fix: fixed svg icon load failure and enabled global injection bem.scss

packages/@core/forward/preferences/package.json

@@ -32,6 +32,6 @@
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   }
 }

packages/@core/forward/stores/package.json

@@ -42,7 +42,7 @@
     "@vben-core/typings": "workspace:*",
     "pinia": "2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "^3.4.31",
+    "vue": "^3.4.32",
     "vue-router": "^4.4.0"
   }
 }

packages/@core/hooks/package.json

@@ -41,7 +41,7 @@
     "@vueuse/core": "^10.11.0",
     "radix-vue": "^1.9.1",
     "sortablejs": "^1.15.2",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   },
   "devDependencies": {
     "@types/sortablejs": "^1.15.8"

packages/@core/locales/package.json

@@ -43,7 +43,7 @@
   "dependencies": {
     "@intlify/core-base": "^9.13.1",
     "@vben-core/typings": "workspace:*",
-    "vue": "^3.4.31",
+    "vue": "^3.4.32",
     "vue-i18n": "^9.13.1"
   }
 }

packages/@core/shared/design/package.json

@@ -37,8 +37,5 @@
         "default": "./dist/index.mjs"
       }
     }
-  },
-  "dependencies": {
-    "modern-normalize": "^2.0.0"
   }
 }

packages/@core/shared/design/src/css/transition.css

@@ -0,0 +1,236 @@
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-up-move {
+  transition: transform 0.3s;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-15px);
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-down-move {
+  transition: transform 0.3s;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-left-move {
+  transition: transform 0.3s;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-15px);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-right-move {
+  transition: transform 0.3s;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(15px);
+}
+
+.fade-transition-enter-active,
+.fade-transition-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-transition-enter-from,
+.fade-transition-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translate(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translate(30px);
+}
+
+.fade-down-enter-active,
+.fade-down-leave-active {
+  transition:
+    opacity 0.25s,
+    transform 0.3s;
+}
+
+.fade-down-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-down-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition:
+    opacity 0.2s,
+    transform 0.25s;
+}
+
+.fade-up-enter-from {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+@keyframes fade-slide {
+  0% {
+    opacity: 0;
+    transform: translate(-30px);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(30px);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+}
+
+@keyframes fade-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+}
+
+.fade-slow {
+  animation: fade 3s infinite;
+}
+
+.fade-slide-slow {
+  animation: fade-slide 3s infinite;
+}
+
+.fade-up-slow {
+  animation: fade-up 3s infinite;
+}
+
+.fade-down-slow {
+  animation: fade-down 3s infinite;
+}
+
+.collapse-transition {
+  transition:
+    0.2s height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s padding-bottom ease-in-out;
+}
+
+.collapse-transition-leave-active,
+.collapse-transition-enter-active {
+  transition:
+    0.2s max-height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s margin-top ease-in-out;
+}

packages/@core/shared/design/src/index.ts

@@ -1,5 +1,5 @@
-import './scss/index.scss';
 import './css/global.css';
+import './css/transition.css';
 import './css/nprogress.css';
 import './design-tokens';
 

packages/@core/shared/design/src/scss/index.scss

@@ -1,3 +0,0 @@
-/** css 样式重置 */
-@import 'modern-normalize/modern-normalize.css';
-@import './transition';

packages/@core/shared/design/src/scss/transition/animation.scss

@@ -1,81 +0,0 @@
-@keyframes fade-slide {
-  0% {
-    opacity: 0;
-    transform: translateX(-30px);
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-}
-
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes fade-up {
-  0% {
-    opacity: 0;
-    transform: translateY(10%);
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-}
-
-@keyframes fade-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(10%);
-  }
-}
-
-.fade-slow {
-  animation: fade 3s infinite;
-}
-
-// .fade-slide-fast {
-//   animation: fade-slide 0.3s infinite;
-// }
-
-.fade-slide-slow {
-  animation: fade-slide 3s infinite;
-}
-
-.fade-up-slow {
-  animation: fade-up 3s infinite;
-}
-
-.fade-down-slow {
-  animation: fade-down 3s infinite;
-}

packages/@core/shared/design/src/scss/transition/collapse.scss

@@ -1,14 +0,0 @@
-.collapse-transition {
-  transition:
-    0.2s height ease-in-out,
-    0.2s padding-top ease-in-out,
-    0.2s padding-bottom ease-in-out;
-}
-
-.collapse-transition-leave-active,
-.collapse-transition-enter-active {
-  transition:
-    0.2s max-height ease-in-out,
-    0.2s padding-top ease-in-out,
-    0.2s margin-top ease-in-out;
-}

packages/@core/shared/design/src/scss/transition/fade.scss

@@ -1,97 +0,0 @@
-.fade-transition {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity 0.2s ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* fade-slide */
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-  transition: all 0.3s;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-// ///////////////////////////////////////////////
-// Fade down
-// ///////////////////////////////////////////////
-
-// Speed: 1x
-.fade-down-enter-active,
-.fade-down-leave-active {
-  transition:
-    opacity 0.25s,
-    transform 0.3s;
-}
-
-.fade-down-enter-from {
-  opacity: 0;
-  transform: translateY(-10%);
-}
-
-.fade-down-leave-to {
-  opacity: 0;
-  transform: translateY(10%);
-}
-
-// fade-scale
-.fade-scale-leave-active,
-.fade-scale-enter-active {
-  transition: all 0.28s;
-}
-
-.fade-scale-enter-from {
-  opacity: 0;
-  transform: scale(1.2);
-}
-
-.fade-scale-leave-to {
-  opacity: 0;
-  transform: scale(0.8);
-}
-
-// ///////////////////////////////////////////////
-// Fade Top
-// ///////////////////////////////////////////////
-
-// Speed: 1x
-.fade-up-enter-active,
-.fade-up-leave-active {
-  transition:
-    opacity 0.2s,
-    transform 0.25s;
-}
-
-.fade-up-enter-from {
-  opacity: 0;
-  transform: translateY(10%);
-}
-
-.fade-up-leave-to {
-  opacity: 0;
-  transform: translateY(-10%);
-}

packages/@core/shared/design/src/scss/transition/index.scss

@@ -1,4 +0,0 @@
-@import './slide';
-@import './fade';
-@import './animation';
-@import './collapse';

packages/@core/shared/design/src/scss/transition/mixin.scss

@@ -1,10 +0,0 @@
-@mixin transition() {
-  &-enter-active,
-  &-leave-active {
-    transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
-  }
-
-  &-move {
-    transition: transform 0.3s;
-  }
-}

packages/@core/shared/design/src/scss/transition/slide.scss

@@ -1,41 +0,0 @@
-@use 'mixin.scss' as *;
-
-.slide-up {
-  @include transition;
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(-15px);
-  }
-}
-
-.slide-down {
-  @include transition;
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(15px);
-  }
-}
-
-.slide-left {
-  @include transition;
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateX(-15px);
-  }
-}
-
-.slide-right {
-  @include transition;
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateX(15px);
-  }
-}

packages/@core/shared/icons/package.json

@@ -36,6 +36,6 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   }
 }

packages/@core/shared/toolkit/package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
-    "@vue/shared": "^3.4.31",
+    "@vue/shared": "^3.4.32",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",
     "lodash.clonedeep": "^4.5.0",

packages/@core/shared/typings/package.json

@@ -39,7 +39,7 @@
     }
   },
   "dependencies": {
-    "vue": "^3.4.31",
+    "vue": "^3.4.32",
     "vue-router": "^4.4.0"
   }
 }

packages/@core/ui-kit/layout-ui/package.json

@@ -43,6 +43,6 @@
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   }
 }

packages/@core/ui-kit/menu-ui/package.json

@@ -43,6 +43,6 @@
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   }
 }

packages/@core/ui-kit/shadcn-ui/package.json

@@ -50,6 +50,6 @@
     "class-variance-authority": "^0.7.0",
     "lucide-vue-next": "^0.408.0",
     "radix-vue": "^1.9.1",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   }
 }

packages/@core/ui-kit/tabs-ui/package.json

@@ -41,6 +41,6 @@
     "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   }
 }

packages/effects/access/package.json

@@ -42,6 +42,6 @@
     "@vben-core/stores": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   }
 }

packages/effects/chart-ui/package.json

@@ -40,6 +40,6 @@
     "@vben-core/preferences": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "echarts": "^5.5.1",
-    "vue": "^3.4.31"
+    "vue": "^3.4.32"
   }
 }

packages/effects/common-ui/package.json

@@ -45,7 +45,7 @@
     "@vben/types": "workspace:*",
     "@vueuse/integrations": "^10.11.0",
     "qrcode": "^1.5.3",
-    "vue": "^3.4.31",
+    "vue": "^3.4.32",
     "vue-router": "^4.4.0"
   },
   "devDependencies": {

packages/effects/layouts/package.json

@@ -50,7 +50,7 @@
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.31",
+    "vue": "^3.4.32",
     "vue-router": "^4.4.0"
   }
 }

packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue

@@ -121,7 +121,7 @@ function toggleTheme(event: MouseEvent) {
   </VbenButton>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .theme-toggle {
   &__moon {
     & > circle {
@@ -130,32 +130,32 @@ function toggleTheme(event: MouseEvent) {
   }
 
   &__sun {
-    fill: hsl(var(--foreground) / 80%);
-    stroke: none;
+    @apply fill-foreground/80 stroke-none;
+
     transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
     transform-origin: center center;
 
     &:hover > svg > & {
-      fill: hsl(var(--foreground));
+      @apply fill-foreground/80;
     }
   }
 
   &__sun-beams {
-    stroke: hsl(var(--foreground) / 80%);
-    stroke-width: 2px;
+    @apply stroke-foreground/80 stroke-[2px];
+
     transition:
       transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
       opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
     transform-origin: center center;
 
     &:hover > svg > & {
-      stroke: hsl(var(--foreground));
+      @apply stroke-foreground;
     }
   }
 
   &.is-light {
     .theme-toggle__sun {
-      transform: scale(0.5);
+      @apply scale-50;
     }
 
     .theme-toggle__sun-beams {
@@ -171,14 +171,14 @@ function toggleTheme(event: MouseEvent) {
     }
 
     .theme-toggle__sun-beams {
-      opacity: 0;
+      @apply opacity-0;
     }
   }
 
   &:hover > svg {
     .theme-toggle__sun,
     .theme-toggle__moon {
-      fill: hsl(var(--foreground));
+      @apply fill-foreground;
     }
   }
 }

packages/icons/build.config.ts

@@ -3,6 +3,14 @@ import { defineBuildConfig } from 'unbuild';
 export default defineBuildConfig({
   clean: true,
   declaration: true,
-  entries: ['src/index'],
+  entries: [
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts', '**/*.svg'],
+    },
+  ],
   externals: ['vue'],
 });

packages/styles/build.config.ts

@@ -0,0 +1,23 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts', '**/*.scss'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['sass'],
+      pattern: ['**/*.css'],
+    },
+  ],
+  externals: ['vue'],
+});

packages/styles/package.json

@@ -11,7 +11,7 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build": "pnpm vite build",
+    "build": "pnpm unbuild",
     "prepublishOnly": "npm run build"
   },
   "files": [
@@ -26,13 +26,12 @@
       "default": "./dist/index.mjs"
     },
     "./antd": {
-      "types": "./src/antd/index.ts",
-      "development": "./src/antd/index.ts",
-      "default": "./dist/antd.mjs"
+      "development": "./src/antd/index.css",
+      "default": "./dist/antd/index.css"
     },
-    "./bem": {
-      "development": "./src/bem/bem.scss",
-      "default": "./dist/bem.scss"
+    "./global": {
+      "development": "./src/global/index.scss",
+      "default": "./dist/global/index.scss"
     }
   },
   "publishConfig": {

packages/styles/src/antd/index.ts

@@ -1 +0,0 @@
-import './base.css';

packages/styles/vite.config.mts

@@ -1,18 +0,0 @@
-import { defineConfig } from '@vben/vite-config';
-
-export default defineConfig(async () => {
-  return {
-    vite: {
-      build: {
-        lib: {
-          entry: {
-            antd: 'src/antd/index.ts',
-            index: 'src/index.ts',
-          },
-          fileName: (_format, name) => `${name}.mjs`,
-        },
-      },
-      publicDir: 'src/bem',
-    },
-  };
-});

packages/types/package.json

@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@vben-core/typings": "workspace:*",
-    "vue": "^3.4.31",
+    "vue": "^3.4.32",
     "vue-router": "^4.4.0"
   }
 }

packages/utils/build.config.ts

@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});