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
-        bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
-        h-[calc(100%+0.5px)]
-      "
       :class="modelValue ? 'opacity-85' : 'opacity-0'"
       @click="modelValue = false"
     />
     <div
-      class="
+      ref="target" bg-base border-base absolute transition-all duration-200
-        bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
+      ease-out
-        border border-base top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2
+      :class="positionClass"
-      "
+      :style="modelValue ? {} : { transform }"
-      :class="modelValue ? 'opacity-100' : 'opacity-0'"
     >
       <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>

package.json

@@ -40,12 +40,14 @@
     "@unocss/nuxt": "^0.46.5",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue-macros/nuxt": "^0.1.2",
+    "@vueuse/integrations": "^9.6.0",
     "@vueuse/nuxt": "^9.6.0",
     "blurhash": "^2.0.4",
     "browser-fs-access": "^0.31.1",
     "eslint": "^8.28.0",
     "esno": "^0.16.3",
     "floating-vue": "2.0.0-beta.20",
+    "focus-trap": "^7.1.0",
     "form-data": "^4.0.0",
     "fs-extra": "^10.1.0",
     "js-yaml": "^4.1.0",

pnpm-lock.yaml

@@ -25,12 +25,14 @@ specifiers:
   '@unocss/nuxt': ^0.46.5
   '@vitejs/plugin-vue': ^3.2.0
   '@vue-macros/nuxt': ^0.1.2
+  '@vueuse/integrations': ^9.6.0
   '@vueuse/nuxt': ^9.6.0
   blurhash: ^2.0.4
   browser-fs-access: ^0.31.1
   eslint: ^8.28.0
   esno: ^0.16.3
   floating-vue: 2.0.0-beta.20
+  focus-trap: ^7.1.0
   form-data: ^4.0.0
   fs-extra: ^10.1.0
   js-yaml: ^4.1.0
@@ -80,12 +82,14 @@ devDependencies:
   '@unocss/nuxt': 0.46.5
   '@vitejs/plugin-vue': 3.2.0
   '@vue-macros/nuxt': 0.1.2_nuxt@3.0.0
+  '@vueuse/integrations': 9.6.0_focus-trap@7.1.0
   '@vueuse/nuxt': 9.6.0_nuxt@3.0.0
   blurhash: 2.0.4
   browser-fs-access: 0.31.1
   eslint: 8.28.0
   esno: 0.16.3
   floating-vue: 2.0.0-beta.20
+  focus-trap: 7.1.0
   form-data: 4.0.0
   fs-extra: 10.1.0
   js-yaml: 4.1.0
@@ -2199,6 +2203,53 @@ packages:
       vue: 3.2.45
     dev: true
 
+  /@vueuse/integrations/9.6.0_focus-trap@7.1.0:
+    resolution: {integrity: sha512-+rs2OWY/3spxoAGQMnlHQpxf8ErAYf4D1bT0aXaPnxphmtYgexm6KIjTFpBbcQnHwVi1g2ET1SJoQL16yDrgWA==}
+    peerDependencies:
+      async-validator: '*'
+      axios: '*'
+      change-case: '*'
+      drauu: '*'
+      focus-trap: '*'
+      fuse.js: '*'
+      idb-keyval: '*'
+      jwt-decode: '*'
+      nprogress: '*'
+      qrcode: '*'
+      universal-cookie: '*'
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      universal-cookie:
+        optional: true
+    dependencies:
+      '@vueuse/core': 9.6.0
+      '@vueuse/shared': 9.6.0
+      focus-trap: 7.1.0
+      vue-demi: 0.13.11
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@vueuse/metadata/9.6.0:
     resolution: {integrity: sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==}
     dev: true
@@ -4105,6 +4156,12 @@ packages:
       vue-resize: 2.0.0-alpha.1
     dev: true
 
+  /focus-trap/7.1.0:
+    resolution: {integrity: sha512-CuJvwUBfJCWcU6fc4xr3UwMF5vWnox4isXAixCwrPzCsPKOQjP9T+nTlYT2t+vOmQL8MOQ16eim99XhjQHAuiQ==}
+    dependencies:
+      tabbable: 6.0.1
+    dev: true
+
   /follow-redirects/1.15.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -7037,6 +7094,10 @@ packages:
       stable: 0.1.8
     dev: true
 
+  /tabbable/6.0.1:
+    resolution: {integrity: sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==}
+    dev: true
+
   /tapable/1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
     engines: {node: '>=6'}