changes

app/components/Modal.vue

@@ -1,19 +1,18 @@
 <template>
   <Teleport
-    v-if="Object.values(props).some((x) => isNotNil(x))"
-    to="#__nuxt > div"
+    defer
+    to="#modals"
   >
     <div
+      :id="id"
       class="modal is-active has-text-text-20"
-      @click="doClick"
     >
       <div
         class="modal-background"
-        :style="`opacity:${count === 0 ? 0.7 : 0.3} !important;`"
+        @click="closeModal"
       ></div>
       <div
         class="modal-card"
-        :id="docid"
         :style="{
           width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width || '60%',
         }"
@@ -29,14 +28,12 @@
           <button
             class="delete is-medium"
             aria-label="close"
-            @click="closeModal()"
+            @click="closeModal"
           ></button>
         </header>
         <section
           class="modal-card-body p-4"
-          :style="{
-            minHeight: height || '750px',
-          }"
+          :style="{ minHeight: height || '750px' }"
         >
           <component
             :is="resolvedComponent"
@@ -53,10 +50,9 @@
 
 <script setup>
 import { onMounted, defineAsyncComponent, shallowRef, watchEffect } from "vue";
-import { isNotNil } from "es-toolkit";
 
 const emit = defineEmits(["close", "remove", "select", "dataevent", "update"]);
-const { $id, $store } = useNuxtApp();
+const { $store } = useNuxtApp();
 
 const props = defineProps({
   component: String,
@@ -67,7 +63,6 @@ const props = defineProps({
 });
 
 const componentFiles = import.meta.glob("@/components/**/*.vue");
-
 const resolvedComponent = shallowRef(null);
 
 function loadDynamicComponent() {
@@ -77,7 +72,6 @@ function loadDynamicComponent() {
   }
 
   const fullPath = `/components/${props.component}.vue`;
-
   const componentPath = Object.keys(componentFiles).find((path) => path.endsWith(fullPath));
 
   if (componentPath) {
@@ -93,13 +87,16 @@ watchEffect(() => {
   loadDynamicComponent();
 });
 
-const docid = $id();
+const id = useId();
 let count = 0;
-const lock = false;
 
-const closeModal = () => {
-  if (!lock) emit("close");
-};
+function closeModal() {
+  const modals = document.getElementById("modals");
+  const isTopMost = modals.lastElementChild?.id === id;
+  if (isTopMost) {
+    emit("close");
+  }
+}
 
 const modalEvent = function (ev) {
   if (ev.name === "select") {
@@ -113,24 +110,13 @@ const modalEvent = function (ev) {
   }
 };
 
-const doClick = function (e) {
-  if (!e.srcElement.offsetParent) return;
-  const el = document.getElementById(docid);
-  if (el && !el.contains(e.target)) {
-    closeModal();
-  }
-};
-
 onMounted(() => {
-  const modalHasProps = Object.values(props).some((x) => isNotNil(x));
-  if (modalHasProps) {
-    document.documentElement.classList.add("is-clipped");
-    window.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") closeModal();
-    });
-    const collection = document.getElementsByClassName("modal-background");
-    count = collection.length;
-  }
+  document.documentElement.classList.add("is-clipped");
+  window.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") closeModal();
+  });
+  const collection = document.getElementsByClassName("modal-background");
+  count = collection.length;
 });
 
 onUnmounted(() => {
@@ -139,7 +125,39 @@ onUnmounted(() => {
 });
 </script>
 <style scoped>
-footer {
+.modal {
+  overflow: scroll;
+}
+
+.modal-background {
+  position: fixed;
+  --bulma-modal-background-background-color: hsla(
+    var(--bulma-scheme-h),
+    var(--bulma-scheme-s),
+    var(--bulma-scheme-invert-l),
+    0.7
+  );
+}
+
+.modal-card {
+  overflow: visible;
+}
+
+.modal-card-body {
+  overflow: visible;
+}
+
+.modal-card:not(:has(.modal-card-head)) .modal-card-body {
+  border-start-start-radius: var(--bulma-radius-large);
+  border-start-end-radius: var(--bulma-radius-large);
+}
+
+.modal-card:has(.modal-card-foot:empty) .modal-card-body {
+  border-end-start-radius: var(--bulma-radius-large);
+  border-end-end-radius: var(--bulma-radius-large);
+}
+
+.modal-card-foot {
   background-color: var(--bulma-modal-card-body-background-color);
 
   &:empty {