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/common-ui/src/components/ellipsis-text/ellipsis-text.vue

@@ -95,41 +95,43 @@ function handleExpand() {
 }
 </script>
 <template>
-  <VbenTooltip
-    :content-style="{
-      ...tooltipOverlayStyle,
-      maxWidth: `${defaultTooltipMaxWidth}px`,
-      fontSize: `${tooltipFontSize}px`,
-      color: tooltipColor,
-      backgroundColor: tooltipBackgroundColor,
-    }"
-    :disabled="!props.tooltip || isExpand"
-    :side="placement"
-  >
-    <slot name="tooltip">
-      <slot></slot>
-    </slot>
-
-    <template #trigger>
-      <div
-        ref="ellipsis"
-        :class="{
-          '!cursor-pointer': expand,
-          ['inline-block truncate']: line === 1,
-          [$style.ellipsisMultiLine]: line > 1,
-        }"
-        :style="{
-          '-webkit-line-clamp': isExpand ? '' : line,
-          'max-width': textMaxWidth,
-        }"
-        class="cursor-text overflow-hidden"
-        @click="handleExpand"
-        v-bind="$attrs"
-      >
+  <div>
+    <VbenTooltip
+      :content-style="{
+        ...tooltipOverlayStyle,
+        maxWidth: `${defaultTooltipMaxWidth}px`,
+        fontSize: `${tooltipFontSize}px`,
+        color: tooltipColor,
+        backgroundColor: tooltipBackgroundColor,
+      }"
+      :disabled="!props.tooltip || isExpand"
+      :side="placement"
+    >
+      <slot name="tooltip">
         <slot></slot>
-      </div>
-    </template>
-  </VbenTooltip>
+      </slot>
+
+      <template #trigger>
+        <div
+          ref="ellipsis"
+          :class="{
+            '!cursor-pointer': expand,
+            ['inline-block truncate']: line === 1,
+            [$style.ellipsisMultiLine]: line > 1,
+          }"
+          :style="{
+            '-webkit-line-clamp': isExpand ? '' : line,
+            'max-width': textMaxWidth,
+          }"
+          class="cursor-text overflow-hidden"
+          @click="handleExpand"
+          v-bind="$attrs"
+        >
+          <slot></slot>
+        </div>
+      </template>
+    </VbenTooltip>
+  </div>
 </template>
 
 <style module>

packages/effects/common-ui/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './ellipsis-text';
 export * from './page';
+export * from '@vben-core/popup-ui';

packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import type { AuthenticationProps, LoginAndRegisterParams } from './types';
 
+import { watch } from 'vue';
+
 import { useForwardPropsEmits } from '@vben/hooks';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-  VbenAvatar,
-  VisuallyHidden,
-} from '@vben-core/shadcn-ui';
+import { useVbenModal } from '@vben-core/popup-ui';
+import { VbenAvatar } from '@vben-core/shadcn-ui';
 
 import AuthenticationLogin from './login.vue';
 
@@ -32,32 +28,37 @@ const emit = defineEmits<{
 const open = defineModel<boolean>('open');
 
 const forwarded = useForwardPropsEmits(props, emit);
+
+const [Modal, modalApi] = useVbenModal();
+
+watch(
+  () => open.value,
+  (val) => {
+    modalApi.setState({ isOpen: val });
+  },
+);
 </script>
 
 <template>
   <div>
-    <Dialog v-model:open="open">
-      <DialogContent
-        :show-close="false"
-        class="top-1/2 h-full w-full translate-y-[-50%] border-none p-4 py-12 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset] md:px-14 md:pt-12"
-        @escape-key-down="(e) => e.preventDefault()"
-        @interact-outside="(e) => e.preventDefault()"
-      >
-        <DialogTitle>
-          <VbenAvatar :src="avatar" class="mx-auto size-20" />
-        </DialogTitle>
-        <VisuallyHidden>
-          <DialogDescription />
-        </VisuallyHidden>
-        <AuthenticationLogin
-          v-bind="forwarded"
-          :show-forget-password="false"
-          :show-register="false"
-          :show-remember-me="false"
-          :sub-title="$t('authentication.loginAgainSubTitle')"
-          :title="$t('authentication.loginAgainTitle')"
-        />
-      </DialogContent>
-    </Dialog>
+    <Modal
+      :closable="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :footer="false"
+      :fullscreen-button="false"
+      class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
+      header-class="hidden"
+    >
+      <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
+      <AuthenticationLogin
+        v-bind="forwarded"
+        :show-forget-password="false"
+        :show-register="false"
+        :show-remember-me="false"
+        :sub-title="$t('authentication.loginAgainSubTitle')"
+        :title="$t('authentication.loginAgainTitle')"
+      />
+    </Modal>
   </div>
 </template>