refactor: improve dialogs

components/modal/ModalContainer.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { isEditHistoryDialogOpen, isImagePreviewDialogOpen, isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
+import {
+  isEditHistoryDialogOpen,
+  isImagePreviewDialogOpen,
+  isPreviewHelpOpen,
+  isPublishDialogOpen,
+  isSigninDialogOpen,
+  isUserSwitcherOpen,
+} from '~/composables/dialog'
 </script>
 
 <template>
-  <ModalDrawer v-model="isUserSwitcherOpen" direction="right">
+  <ModalDialog v-model="isUserSwitcherOpen" type="right">
     <UserSwitcher min-w-100 />
-  </ModalDrawer>
+  </ModalDialog>
   <ModalDialog v-model="isSigninDialogOpen">
     <UserSignIn m6 />
   </ModalDialog>

components/modal/ModalDialog.vue

@@ -1,8 +1,60 @@
 <script setup lang='ts'>
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+
+type DialogType = 'top' | 'right' | 'bottom' | 'left' | 'dialog'
+
+const {
+  type = 'dialog',
+} = defineProps<{
+  type?: DialogType
+}>()
+
 const { modelValue } = defineModel<{
   modelValue: boolean
 }>()
 
+const positionClass = computed(() => {
+  switch (type) {
+    case 'dialog':
+      return 'border rounded top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2'
+    case 'bottom':
+      return 'bottom-0 left-0 right-0 border-t'
+    case 'top':
+      return 'top-0 left-0 right-0 border-b'
+    case 'left':
+      return 'bottom-0 left-0 top-0 border-r'
+    case 'right':
+      return 'bottom-0 top-0 right-0 border-l'
+    default:
+      return ''
+  }
+})
+
+const transform = computed(() => {
+  switch (type) {
+    case 'bottom':
+      return 'translateY(100%)'
+    case 'top':
+      return 'translateY(-100%)'
+    case 'left':
+      return 'translateX(-100%)'
+    case 'right':
+      return 'translateX(100%)'
+    default:
+      return ''
+  }
+})
+
+const target = ref<HTMLElement | null>(null)
+const { activate, deactivate } = useFocusTrap(target)
+
+watchEffect(() => {
+  if (modelValue)
+    activate()
+  else
+    deactivate()
+})
+
 let init = $ref(modelValue)
 watchOnce(modelValue, () => {
   init = true
@@ -11,35 +63,21 @@ watchOnce(modelValue, () => {
 
 <template>
   <div
-    class="fixed top-0 bottom-0 left-0 right-0 z-60 overscroll-none overflow-y-scroll scrollbar-hide"
+    fixed top-0 bottom-0 left-0 right-0 z-40
     :class="modelValue ? '' : 'pointer-events-none'"
   >
     <div
-      class="
-        bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
-        h-[calc(100%+0.5px)]
-      "
+      bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
       :class="modelValue ? 'opacity-85' : 'opacity-0'"
       @click="modelValue = false"
     />
     <div
-      class="
-        bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
-        border border-base top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2
-      "
-      :class="modelValue ? 'opacity-100' : 'opacity-0'"
+      ref="target" bg-base border-base absolute transition-all duration-200
+      ease-out
+      :class="positionClass"
+      :style="modelValue ? {} : { transform }"
     >
       <slot v-if="init" />
     </div>
   </div>
 </template>
-
-<style socped>
-.scrollbar-hide {
-  scrollbar-width: none;
-}
-
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-</style>

components/modal/ModalDrawer.vue

@@ -1,66 +0,0 @@
-<script setup lang='ts'>
-const {
-  direction = 'bottom',
-} = defineProps<{
-  direction?: string
-}>()
-
-const { modelValue } = defineModel<{
-  modelValue: boolean
-}>()
-
-const positionClass = computed(() => {
-  switch (direction) {
-    case 'bottom':
-      return 'bottom-0 left-0 right-0 border-t'
-    case 'top':
-      return 'top-0 left-0 right-0 border-b'
-    case 'left':
-      return 'bottom-0 left-0 top-0 border-r'
-    case 'right':
-      return 'bottom-0 top-0 right-0 border-l'
-    default:
-      return ''
-  }
-})
-
-const transform = computed(() => {
-  switch (direction) {
-    case 'bottom':
-      return 'translateY(100%)'
-    case 'top':
-      return 'translateY(-100%)'
-    case 'left':
-      return 'translateX(-100%)'
-    case 'right':
-      return 'translateX(100%)'
-    default:
-      return ''
-  }
-})
-
-let init = $ref(modelValue)
-watchOnce(modelValue, () => {
-  init = true
-})
-</script>
-
-<template>
-  <div
-    fixed top-0 bottom-0 left-0 right-0 z-40
-    :class="modelValue ? '' : 'pointer-events-none'"
-  >
-    <div
-      bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
-      :class="modelValue ? 'opacity-85' : 'opacity-0'"
-      @click="modelValue = false"
-    />
-    <div
-      bg-base border-base absolute transition-all duration-200 ease-out
-      :class="positionClass"
-      :style="modelValue ? {} : { transform }"
-    >
-      <slot v-if="init" />
-    </div>
-  </div>
-</template>