refactor: splitting and reorganizing style files

This commit is contained in:
vince
2024-07-08 22:30:19 +08:00
parent 414a639db1
commit 04a1533a1e
56 changed files with 412 additions and 157 deletions

View File

@@ -1,5 +1,9 @@
/* https://gavin-yyc.github.io/colorconvert/ */
:root {
--font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
/* Default background color of <body />...etc */
--background: 0 0 100%;
--foreground: 210 6% 21%;

View File

@@ -1,22 +0,0 @@
import { defineBuildConfig } from 'unbuild';
export default defineBuildConfig({
clean: true,
declaration: true,
entries: [
{
builder: 'mkdist',
input: './src',
loaders: ['sass'],
outDir: './dist',
pattern: ['index.scss'],
},
{
builder: 'mkdist',
input: './src',
loaders: ['postcss'],
outDir: './dist',
pattern: ['tailwind.css'],
},
],
});

View File

@@ -11,25 +11,31 @@
"license": "MIT",
"type": "module",
"scripts": {
"build": "pnpm unbuild",
"prepublishOnly": "npm run build",
"stub": "pnpm unbuild --stub"
"build": "pnpm vite build",
"prepublishOnly": "npm run build"
},
"files": [
"dist",
"src"
],
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"exports": {
"./bem": {
"development": "./src/scss-bem/bem.scss",
"default": "./dist/bem.scss"
},
".": {
"development": "./src/scss/index.scss",
"default": "./dist/index.css"
},
"./tailwind": {
"development": "./src/tailwind.css",
"default": "./dist/tailwind.css"
},
"./global": {
"default": "./src/scss/global.scss"
"types": "./src/index.ts",
"development": "./src/index.ts",
"default": "./dist/index.mjs"
}
},
"publishConfig": {
"exports": {
".": {
"default": "./dist/index.mjs"
}
}
},
"dependencies": {

View File

@@ -0,0 +1,79 @@
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
@apply bg-primary;
position: fixed;
top: 0;
left: 0;
z-index: 1031;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
position: absolute;
right: 0;
display: block;
width: 100px;
height: 100%;
box-shadow:
0 0 10px hsl(var(--primary)),
0 0 5px hsl(var(--primary));
opacity: 1;
transform: rotate(3deg) translate(0, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
position: fixed;
top: 15px;
right: 15px;
z-index: 1031;
display: block;
}
#nprogress .spinner-icon {
box-sizing: border-box;
width: 18px;
height: 18px;
border: solid 2px transparent;
border-top-color: hsl(var(--primary));
border-left-color: hsl(var(--primary));
border-radius: 50%;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
position: relative;
overflow: hidden;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@@ -1 +0,0 @@
@import './scss/index';

View File

@@ -0,0 +1,5 @@
import './scss/index.scss';
import './css/tailwind.css';
import './css/nprogress.css';
export {};

View File

@@ -1,4 +1,4 @@
@forward './common/constants.scss';
@forward './constants.scss';
@mixin b($block) {
$B: $namespace + '-' + $block !global;

View File

@@ -1,5 +1,4 @@
#app,
.ant-app,
body,
html {
width: 100%;
@@ -7,10 +6,6 @@ html {
overscroll-behavior: none;
}
.ant-app {
color: inherit;
}
*,
::after,
::before {

View File

@@ -1,4 +1,4 @@
/** css 样式重置 */
@import 'modern-normalize/modern-normalize.css';
@import './common/base';
@import './base';
@import './transition';

View File

@@ -0,0 +1,7 @@
import { defineConfig } from '@vben/vite-config';
export default defineConfig({
vite: {
publicDir: 'src/scss-bem',
},
});

View File

@@ -58,7 +58,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
</ul>
</template>
<style lang="scss" scoped>
@import '@vben-core/design/global';
@import '@vben-core/design/bem';
@include b('normal-menu') {
--menu-item-margin-y: 4px;

View File

@@ -1,4 +1,4 @@
@import '@vben-core/design/global';
@import '@vben-core/design/bem';
.#{$namespace}-menu__popup-container,
.#{$namespace}-menu {

View File

@@ -49,7 +49,7 @@
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"class-variance-authority": "^0.7.0",
"lucide-vue-next": "^0.401.0",
"lucide-vue-next": "^0.402.0",
"radix-vue": "^1.9.0",
"vue": "^3.4.31"
}

View File

@@ -2,7 +2,6 @@
import type { IBreadcrumb } from './interface';
import { IcRoundKeyboardArrowDown } from '@vben-core/iconify';
import {
Breadcrumb,
BreadcrumbItem,

View File

@@ -3,12 +3,12 @@ import type { HTMLAttributes } from 'vue';
import { computed } from 'vue';
import { MdiLoading } from '@vben-core/iconify';
import { cn } from '@vben-core/toolkit';
import {
type ButtonVariants,
buttonVariants,
} from '@vben-core/shadcn-ui/components/ui/button';
import { cn } from '@vben-core/toolkit';
import { Primitive, type PrimitiveProps } from 'radix-vue';
interface Props extends PrimitiveProps {

View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { type HTMLAttributes, computed, useSlots } from 'vue';
import { cn } from '@vben-core/toolkit';
import { VbenTooltip } from '@vben-core/shadcn-ui/components/tooltip';
import { ButtonVariants } from '@vben-core/shadcn-ui/components/ui/button';
import { cn } from '@vben-core/toolkit';
import { type PrimitiveProps } from 'radix-vue';
import VbenButton from './button.vue';

View File

@@ -2,6 +2,7 @@
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
import { Checkbox } from '@vben-core/shadcn-ui/components/ui/checkbox';
import { useForwardPropsEmits } from 'radix-vue';
const props = defineProps<

View File

@@ -18,6 +18,7 @@ import {
ContextMenuShortcut,
ContextMenuTrigger,
} from '@vben-core/shadcn-ui/components/ui/context-menu';
import { useForwardPropsEmits } from 'radix-vue';
const props = defineProps<

View File

@@ -8,6 +8,7 @@ import {
HoverCardContent,
HoverCardTrigger,
} from '@vben-core/shadcn-ui/components/ui/hover-card';
import { HoverCardContentProps, useForwardPropsEmits } from 'radix-vue';
const props = defineProps<

View File

@@ -5,11 +5,11 @@ import {
IcOutlineVisibility,
IcOutlineVisibilityOff,
} from '@vben-core/iconify';
import {
type InputProps,
VbenInput,
} from '@vben-core/shadcn-ui/components/input';
import { useForwardProps } from 'radix-vue';
import PasswordStrength from './password-strength.vue';

View File

@@ -12,6 +12,7 @@ import {
Popover as PopoverRoot,
PopoverTrigger,
} from '@vben-core/shadcn-ui/components/ui/popover';
import { useForwardPropsEmits } from 'radix-vue';
const props = withDefaults(

View File

@@ -2,9 +2,8 @@
import type { HTMLAttributes } from 'vue';
import { ref } from 'vue';
import { cn } from '@vben-core/toolkit';
import { ScrollArea } from '@vben-core/shadcn-ui/components/ui/scroll-area';
import { cn } from '@vben-core/toolkit';
interface Props {
class?: HTMLAttributes['class'];

View File

@@ -8,6 +8,7 @@ import {
TabsContent,
TabsList,
} from '@vben-core/shadcn-ui/components/ui/tabs';
import { TabsTrigger } from 'radix-vue';
import TabsIndicator from './tabs-indicator.vue';

View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { computed, useSlots } from 'vue';
import { Cross2Icon } from '@radix-icons/vue';
import {
VbenButton,
VbenIconButton,
@@ -18,6 +17,8 @@ import {
SheetTrigger,
} from '@vben-core/shadcn-ui/components/ui/sheet';
import { Cross2Icon } from '@radix-icons/vue';
interface Props {
cancelText?: string;
description?: string;

View File

@@ -5,6 +5,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from '@vben-core/shadcn-ui/components/ui/tooltip';
import { TooltipContentProps } from 'radix-vue';
interface Props {

View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue';
import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
import { cn } from '@vben-core/toolkit';
import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue';
const props = defineProps<

View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue';
import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
import { cn } from '@vben-core/toolkit';
import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue';
const props = defineProps<

View File

@@ -3,9 +3,9 @@ import type { VariantProps } from 'class-variance-authority';
import { type HTMLAttributes, computed, inject } from 'vue';
import { toggleVariants } from '@vben-core/shadcn-ui/components/ui/toggle';
import { cn } from '@vben-core/toolkit';
import { toggleVariants } from '@vben-core/shadcn-ui/components/ui/toggle';
import {
ToggleGroupItem,
type ToggleGroupItemProps,

View File

@@ -1,4 +1,4 @@
@import '@vben-core/design/global';
@import '@vben-core/design/bem';
@include b('chrome-tabs') {
--tabs-background: hsl(var(--background));

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { TabItem } from '@vben-core/typings';
import type { TabsProps } from '../../interface';
import type { TabsProps } from '../../types';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
@@ -84,11 +84,7 @@ function handleUnPushPin(tab: TabItem) {
<template>
<div :class="b()" class="relative size-full pt-1">
<div
ref="contentRef"
:class="e('content')"
class="relative h-8 overflow-hidden"
>
<div ref="contentRef" class="relative h-8 overflow-hidden">
<TransitionGroup name="slide-down">
<Tab
v-for="(tab, i) in tabsView"

View File

@@ -4,7 +4,7 @@ import type { TabItem } from '@vben-core/typings';
import { useForwardPropsEmits } from '@vben-core/shadcn-ui';
import { ChromeTabs } from './components';
import { TabsProps } from './interface';
import { TabsProps } from './types';
interface Props extends TabsProps {}