feat: add modal and drawer components and examples (#4229)

* feat: add modal component

* feat: add drawer component

* feat: apply new modal and drawer components to the layout

* chore: typo

* feat: add some unit tests

packages/effects/layouts/src/widgets/preferences/blocks/shortcut-keys/global.vue

@@ -15,7 +15,7 @@ const shortcutKeysGlobalSearch = defineModel<boolean>(
   'shortcutKeysGlobalSearch',
 );
 const shortcutKeysLogout = defineModel<boolean>('shortcutKeysLogout');
-const shortcutKeysPreferences = defineModel<boolean>('shortcutKeysPreferences');
+// const shortcutKeysPreferences = defineModel<boolean>('shortcutKeysPreferences');
 const shortcutKeysLockScreen = defineModel<boolean>('shortcutKeysLockScreen');
 
 const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
@@ -39,10 +39,10 @@ const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
     {{ $t('preferences.shortcutKeys.logout') }}
     <template #shortcut> {{ altView }} Q </template>
   </SwitchItem>
-  <SwitchItem v-model="shortcutKeysPreferences" :disabled="!shortcutKeysEnable">
+  <!-- <SwitchItem v-model="shortcutKeysPreferences" :disabled="!shortcutKeysEnable">
     {{ $t('preferences.shortcutKeys.preferences') }}
     <template #shortcut> {{ altView }} , </template>
-  </SwitchItem>
+  </SwitchItem> -->
   <SwitchItem v-model="shortcutKeysLockScreen" :disabled="!shortcutKeysEnable">
     {{ $t('widgets.lockScreen.title') }}
     <template #shortcut> {{ altView }} L </template>

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -14,7 +14,7 @@ import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { computed, ref } from 'vue';
 
-import { Copy, RotateCw, Settings } from '@vben/icons';
+import { Copy, RotateCw } from '@vben/icons';
 import { $t, loadLocaleMessages } from '@vben/locales';
 import {
   clearPreferencesCache,
@@ -22,12 +22,12 @@ import {
   resetPreferences,
   usePreferences,
 } from '@vben/preferences';
+import { useVbenDrawer } from '@vben-core/popup-ui';
 import {
   useToast,
   VbenButton,
   VbenIconButton,
   VbenSegmented,
-  VbenSheet,
 } from '@vben-core/shadcn-ui';
 
 import { useClipboard } from '@vueuse/core';
@@ -52,7 +52,6 @@ import {
   Theme,
   Widget,
 } from './blocks';
-import { useOpenPreferences } from './use-open-preferences';
 
 const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
 const { toast } = useToast();
@@ -134,9 +133,7 @@ const shortcutKeysGlobalSearch = defineModel<boolean>(
 const shortcutKeysGlobalLogout = defineModel<boolean>(
   'shortcutKeysGlobalLogout',
 );
-const shortcutKeysGlobalPreferences = defineModel<boolean>(
-  'shortcutKeysGlobalPreferences',
-);
+
 const shortcutKeysGlobalLockScreen = defineModel<boolean>(
   'shortcutKeysGlobalLockScreen',
 );
@@ -161,6 +158,8 @@ const {
 } = usePreferences();
 const { copy } = useClipboard();
 
+const [Drawer] = useVbenDrawer();
+
 const activeTab = ref('appearance');
 
 const tabs = computed((): SegmentedItem[] => {
@@ -193,8 +192,6 @@ const showBreadcrumbConfig = computed(() => {
   );
 });
 
-const { openPreferences } = useOpenPreferences();
-
 async function handleCopy() {
   await copy(JSON.stringify(diffPreference.value, null, 2));
 
@@ -225,21 +222,11 @@ async function handleReset() {
 
 <template>
   <div>
-    <VbenSheet
-      v-model:open="openPreferences"
+    <Drawer
       :description="$t('preferences.subtitle')"
       :title="$t('preferences.title')"
+      class="sm:max-w-sm"
     >
-      <template #trigger>
-        <slot name="trigger">
-          <VbenButton
-            :title="$t('preferences.title')"
-            class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
-          >
-            <Settings class="size-5" />
-          </VbenButton>
-        </slot>
-      </template>
       <template #extra>
         <div class="flex items-center">
           <VbenIconButton
@@ -256,7 +243,7 @@ async function handleReset() {
         </div>
       </template>
 
-      <div class="p-4 pt-4">
+      <div class="p-1">
         <VbenSegmented v-model="activeTab" :tabs="tabs">
           <template #general>
             <Block :title="$t('preferences.general')">
@@ -402,9 +389,6 @@ async function handleReset() {
                 v-model:shortcut-keys-global-search="shortcutKeysGlobalSearch"
                 v-model:shortcut-keys-lock-screen="shortcutKeysGlobalLockScreen"
                 v-model:shortcut-keys-logout="shortcutKeysGlobalLogout"
-                v-model:shortcut-keys-preferences="
-                  shortcutKeysGlobalPreferences
-                "
               />
             </Block>
           </template>
@@ -433,6 +417,6 @@ async function handleReset() {
           {{ $t('preferences.clearAndLogout') }}
         </VbenButton>
       </template>
-    </VbenSheet>
+    </Drawer>
   </div>
 </template>

packages/effects/layouts/src/widgets/preferences/preferences.vue

@@ -1,11 +1,18 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import { loadLocaleMessages } from '@vben/locales';
+import { Settings } from '@vben/icons';
+import { $t, loadLocaleMessages } from '@vben/locales';
 import { preferences, updatePreferences } from '@vben/preferences';
 import { capitalizeFirstLetter } from '@vben/utils';
+import { useVbenDrawer } from '@vben-core/popup-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
 
-import PreferencesSheet from './preferences-sheet.vue';
+import PreferencesDrawer from './preferences-drawer.vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  connectedComponent: PreferencesDrawer,
+});
 
 /**
  * preferences 转成 vue props
@@ -47,9 +54,18 @@ const listen = computed(() => {
 });
 </script>
 <template>
-  <PreferencesSheet v-bind="attrs" v-on="listen">
-    <template #trigger>
-      <slot></slot>
-    </template>
-  </PreferencesSheet>
+  <div>
+    <Drawer v-bind="attrs" v-on="listen" />
+
+    <div @click="() => drawerApi.open()">
+      <slot>
+        <VbenButton
+          :title="$t('preferences.title')"
+          class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
+        >
+          <Settings class="size-5" />
+        </VbenButton>
+      </slot>
+    </div>
+  </div>
 </template>