changes

app/components/Modal.vue

@@ -1,7 +1,10 @@
 <template>
-  <Teleport to="#__nuxt > div">
+  <Teleport
+    v-if="Object.values(props).some((x) => isNotNil(x))"
+    to="#__nuxt > div"
+  >
     <div
-      class="modal is-active"
+      class="modal is-active has-text-text-20"
       @click="doClick"
     >
       <div
@@ -11,17 +14,19 @@
       <div
         class="modal-card"
         :id="docid"
-        :style="`width:${vWidth}; border-radius:16px;`"
+        :style="{
+          width: $store.viewport <= 2 ? 'calc(100% - 2rem)' : width || '60%',
+        }"
       >
         <header
-          class="modal-card-head my-0 py-2"
           v-if="title"
+          class="modal-card-head px-4 py-3"
         >
-          <div style="width: 100%">
-            <div class="field is-grouped">
+          <div class="w-full">
+            <div class="field is-grouped is-align-items-center">
               <div class="control is-expanded has-text-left">
                 <p
-                  class="fsb-18 has-text-primary"
+                  class="fs-17 font-semibold has-text-primary"
                   v-html="title"
                 ></p>
               </div>
@@ -35,18 +40,19 @@
           </div>
         </header>
         <section
-          class="modal-card-body px-4 py-4"
-          :style="`min-height:${
-            height ? height : '750px'
-          };border-bottom-left-radius:16px; border-bottom-right-radius:16px;`"
+          class="modal-card-body p-4"
+          :style="{
+            minHeight: height || '750px',
+          }"
         >
           <component
             :is="resolvedComponent"
-            v-bind="props.vbind"
+            v-bind="vbind"
             @modalevent="modalEvent"
             @close="closeModal"
           />
         </section>
+        <footer class="modal-card-foot pt-0 px-4 pb-4"></footer>
       </div>
     </div>
   </Teleport>
@@ -54,11 +60,10 @@
 
 <script setup>
 import { onMounted, defineAsyncComponent, shallowRef, watchEffect } from "vue";
-import { useStore } from "@/stores/index";
+import { isNotNil } from "es-toolkit";
 
 const emit = defineEmits(["close", "remove", "select", "dataevent", "update"]);
-const store = useStore();
-const { $id } = useNuxtApp();
+const { $id, $store } = useNuxtApp();
 
 const props = defineProps({
   component: String,
@@ -95,12 +100,9 @@ watchEffect(() => {
   loadDynamicComponent();
 });
 
-const viewport = store.viewport;
 const docid = $id();
-const title = props.title;
 let count = 0;
 const lock = false;
-const vWidth = viewport <= 2 ? "100%" : props.width || "60%";
 
 const closeModal = function () {
   if (!lock) emit("close");
@@ -140,3 +142,8 @@ onUnmounted(() => {
   if (count === 0) document.documentElement.classList.remove("is-clipped");
 });
 </script>
+<style scoped>
+footer:empty {
+  display: none;
+}
+</style>