refactor: mount modal to body node

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/base/modal/Modal.story.vue

@@ -5,17 +5,35 @@ import { VModal } from "@/components/base/modal";
 function initState() {
   return {
     visible: false,
+    fullscreen: false,
+    width: 500,
+    title: "测试",
   };
 }
 </script>
 <template>
-  <Story title="Modal" :init-state="initState">
+  <Story :init-state="initState" title="Modal">
     <template #default="{ state }">
       <VButton type="secondary" @click="state.visible = true">打开</VButton>
-      <VModal v-model:visible="state.visible" title="测试">
+      <VModal
-        Hello World
+        v-model:visible="state.visible"
+        :fullscreen="state.fullscreen"
+        :title="state.title"
+        :width="state.width"
+      >
+        <div class="flex flex-col">
+          <img src="https://ryanc.cc/avatar" class="w-full" />
+          <img src="https://ryanc.cc/avatar" class="w-full" />
+          <img src="https://halo.run/logo" class="w-full" />
+        </div>
         <VButton type="secondary" @click="state.visible = false">关闭</VButton>
       </VModal>
     </template>
+    <template #controls="{ state }">
+      <HstCheckbox v-model="state.visible" title="Visible" />
+      <HstText v-model="state.title" title="Title" />
+      <HstNumber v-model="state.width" title="Width" />
+      <HstCheckbox v-model="state.fullscreen" title="Fullscreen" />
+    </template>
   </Story>
 </template>

src/components/base/modal/Modal.vue

@@ -41,6 +41,7 @@ function handleClose() {
 }
 </script>
 <template>
+  <Teleport to="body">
     <transition
       enter-active-class="ease-out"
       enter-from-class="opacity-0"
@@ -79,6 +80,7 @@ function handleClose() {
         </div>
       </div>
     </transition>
+  </Teleport>
 </template>
 
 <style lang="scss">
@@ -138,6 +140,7 @@ function handleClose() {
 
     .modal-body {
       @apply overflow-x-hidden overflow-y-auto;
+      @apply flex-1;
       word-wrap: break-word;
       padding: 12px 16px;
     }

src/views/HomeView.vue

@@ -9,6 +9,7 @@
           <VButton type="secondary" @click="visible = true">打开</VButton>
         </div>
       </div>
+      <p></p>
     </VModal>
     <VButton type="secondary" @click="visible = true">打开</VButton>
   </FilledLayout>
@@ -18,5 +19,6 @@ import { FilledLayout } from "@/layouts";
 import { VModal } from "@/components/base/modal";
 import { VButton } from "@/components/base/button";
 import { ref } from "vue";
+
 const visible = ref(false);
 </script>