refactor: use teleport for dialog instead of high z-index (#168)

app.vue

@@ -19,6 +19,9 @@ isDark.value
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
+  <TeleportTarget
+    id="teleport-end"
+  />
 </template>
 
 <style>

components/modal/ModalDialog.vue

@@ -96,10 +96,11 @@ function onTransitionEnd() {
 </script>
 
 <template>
+  <SafeTeleport to="#teleport-end">
     <div
       v-if="isVisible"
       class="scrollbar-hide"
-    fixed top-0 bottom-0 left-0 right-0 z-20000 overscroll-none overflow-y-scroll
+      fixed top-0 bottom-0 left-0 right-0 z-10 overscroll-none overflow-y-scroll
       :class="modelValue ? '' : 'pointer-events-none'"
     >
       <!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
@@ -119,6 +120,7 @@ function onTransitionEnd() {
         <slot />
       </div>
     </div>
+  </SafeTeleport>
 </template>
 
 <style socped>

package.json

@@ -65,7 +65,8 @@
     "ufo": "^1.0.0",
     "unplugin-auto-import": "^0.12.0",
     "vite-plugin-inspect": "^0.7.9",
-    "vitest": "^0.25.3"
+    "vitest": "^0.25.3",
+    "vue-safe-teleport": "^0.1.1"
   },
   "dependencies": {
     "vue-virtual-scroller": "2.0.0-beta.3"

plugins/vue-safe-teleport.ts

@@ -0,0 +1,6 @@
+import VueSafeTeleport from 'vue-safe-teleport'
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueSafeTeleport)
+})

pnpm-lock.yaml

@@ -51,6 +51,7 @@ specifiers:
   unplugin-auto-import: ^0.12.0
   vite-plugin-inspect: ^0.7.9
   vitest: ^0.25.3
+  vue-safe-teleport: ^0.1.1
   vue-virtual-scroller: 2.0.0-beta.3
 
 dependencies:
@@ -107,6 +108,7 @@ devDependencies:
   unplugin-auto-import: 0.12.0
   vite-plugin-inspect: 0.7.9
   vitest: 0.25.3
+  vue-safe-teleport: 0.1.1
 
 packages:
 
@@ -7883,6 +7885,12 @@ packages:
       vue: 3.2.45
     dev: true
 
+  /vue-safe-teleport/0.1.1:
+    resolution: {integrity: sha512-fHA4mod2oF7am2yEUtT0CsxAwfNBt6hWuYTVWzGxrY8vzxxgHMFnPjdZTKl01qGcKEMYYO38LmWizL7oGMVPGw==}
+    peerDependencies:
+      vue: ^3.2.0
+    dev: true
+
   /vue-virtual-scroller/2.0.0-beta.3:
     resolution: {integrity: sha512-k0hTAkZRmm3TXpfhW5Ig1fd8VV7+CmgnkebbQ4Uw6wnuQF52YJoaMQTFD3IV/Qi2WNadDB4ETrLUbVdnWboSjg==}
     peerDependencies: