chore: update deps

packages/@vben-core/uikit/layout-ui/package.json

@@ -46,7 +46,7 @@
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
     "vue": "3.4.27"
   }
 }

packages/@vben-core/uikit/layout-ui/src/components/layout-header.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { IcRoundMenu } from '@vben-core/iconify';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
-import { useNamespace } from '@vben-core/toolkit';
 
 import type { CSSProperties } from 'vue';
 
@@ -82,8 +81,6 @@ const emit = defineEmits<{ openMenu: []; toggleMenu: [] }>();
 
 const slots = useSlots();
 
-const { b, e } = useNamespace('header');
-
 const style = computed((): CSSProperties => {
   const { backgroundColor, fullWidth, height, show } = props;
   const right = !show || !fullWidth ? undefined : 0;
@@ -113,13 +110,16 @@ function handleOpenMenu() {
 </script>
 
 <template>
-  <header :class="b()" :style="style">
+  <header
+    :style="style"
+    class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b"
+  >
     <div v-if="slots.logo" :style="logoStyle">
       <slot name="logo"></slot>
     </div>
     <VbenIconButton
       v-if="showToggleBtn"
-      :class="e('toggle-btn')"
+      class="my-0 ml-2 mr-1 rounded"
       @click="handleToggleMenu"
     >
       <IcRoundMenu class="size-5" />
@@ -127,7 +127,7 @@ function handleOpenMenu() {
 
     <VbenIconButton
       v-if="isMobile"
-      :class="e('toggle-btn')"
+      class="my-0 ml-2 mr-1 rounded"
       @click="handleOpenMenu"
     >
       <IcRoundMenu class="size-5" />
@@ -136,21 +136,3 @@ function handleOpenMenu() {
     <slot></slot>
   </header>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('header') {
-  top: 0;
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  width: 100%;
-  border-bottom: 1px solid hsl(var(--color-border));
-
-  @include e('toggle-btn') {
-    margin: 0 4px 0 8px;
-    border-radius: 4px;
-  }
-}
-</style>

packages/@vben-core/uikit/layout-ui/src/components/layout-tabs.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useNamespace } from '@vben-core/toolkit';
-
 import type { CSSProperties } from 'vue';
 
 import { computed } from 'vue';
@@ -25,8 +23,6 @@ const props = withDefaults(defineProps<Props>(), {
   height: 30,
 });
 
-const { b, e } = useNamespace('tabs');
-
 const hiddenStyle = computed((): CSSProperties => {
   const { height } = props;
   return {
@@ -45,26 +41,10 @@ const style = computed((): CSSProperties => {
 </script>
 
 <template>
-  <section :class="b()" :style="style">
+  <section :style="style" class="border-border flex w-full border-b">
     <slot></slot>
-    <div :class="e('toolbar')">
+    <div class="flex items-center">
       <slot name="toolbar"></slot>
     </div>
   </section>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('tabs') {
-  display: flex;
-  width: 100%;
-  border-bottom: 1px solid hsl(var(--color-border));
-  // transition: all 0.2s;
-
-  @include e('toolbar') {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

packages/@vben-core/uikit/layout-ui/src/vben-layout.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useNamespace } from '@vben-core/toolkit';
-
 import type { CSSProperties } from 'vue';
 
 import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
@@ -60,7 +58,6 @@ const sideExtraCollapse = defineModel<boolean>('sideExtraCollapse');
 const sideExpandOnHover = defineModel<boolean>('sideExpandOnHover');
 const sideVisible = defineModel<boolean>('sideVisible', { default: true });
 
-const { b, e, is } = useNamespace('layout');
 const {
   arrivedState,
   directions,
@@ -453,7 +450,7 @@ function handleOpenMenu() {
 </script>
 
 <template>
-  <div :class="[b(), is(realLayout, true)]">
+  <div class="relative flex min-h-full w-full">
     <slot name="preference"></slot>
     <slot name="back-top"></slot>
     <LayoutSide
@@ -496,8 +493,13 @@ function handleOpenMenu() {
       </template>
     </LayoutSide>
 
-    <div :class="e('main')">
-      <div :style="headerWrapperStyle" :class="e('header-wrapper')">
+    <div
+      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
+    >
+      <div
+        :style="headerWrapperStyle"
+        class="overflow-hidden transition-all duration-200 ease-in-out"
+      >
         <LayoutHeader
           v-if="headerVisible"
           :full-width="!isSideMode"
@@ -529,7 +531,7 @@ function handleOpenMenu() {
 
       <!-- </div> -->
       <LayoutContent
-        :class="e('content')"
+        class="transition-[margin-top] duration-300 ease-in"
         :style="contentStyle"
         :content-compact="contentCompact"
         :content-compact-width="contentCompactWidth"
@@ -555,50 +557,9 @@ function handleOpenMenu() {
     </div>
     <div
       v-if="maskVisible"
-      :class="e('mask')"
+      class="fixed left-0 top-0 h-full w-full bg-[rgb(0_0_0_/_40%)] transition-[background-color] duration-200"
       :style="maskStyle"
       @click="handleClickMask"
     ></div>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('layout') {
-  position: relative;
-  display: flex;
-  width: 100%;
-  min-height: 100%;
-
-  @include e('main') {
-    display: flex;
-    flex: auto;
-    flex: 1;
-    flex-direction: column;
-    overflow-x: hidden;
-    background-color: hsl(var(--color-body));
-    border-left: 1px solid hsl(var(--color-border));
-    transition: all 0.3s ease;
-  }
-
-  @include e('content') {
-    transition: margin-top 0.3s ease;
-  }
-
-  @include e('header-wrapper') {
-    overflow: hidden;
-    transition: all 0.25s ease-in-out;
-  }
-
-  @include e('mask') {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 40%);
-    transition: background-color 0.2s;
-  }
-}
-</style>

packages/@vben-core/uikit/menu-ui/package.json

@@ -46,7 +46,7 @@
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
     "vue": "3.4.27"
   }
 }

packages/@vben-core/uikit/shadcn-ui/package.json

@@ -45,10 +45,10 @@
     "@vben-core/iconify": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "2.1.1",
-    "radix-vue": "^1.8.1",
+    "radix-vue": "^1.8.2",
     "tailwind-merge": "^2.3.0",
     "vue": "3.4.27",
     "vue-sonner": "^1.1.2"