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 {

app/components/SearchBox.vue

@@ -135,9 +135,10 @@
       </div>
     </div>
     <Modal
+      v-if="showmodal"
+      v-bind="showmodal"
       @dataevent="dataevent"
       @close="showmodal = undefined"
-      v-bind="showmodal"
     />
   </div>
 </template>

app/components/datatable/TimeOption.vue

@@ -155,6 +155,7 @@
       </div>
     </div>
     <Modal
+      v-if="showmodal"
       v-bind="showmodal"
       @close="showmodal = undefined"
     />

app/components/imports/AddProductForm.vue

@@ -282,6 +282,7 @@ async function createProduct() {
               first: true,
               clearable: true,
               placeholder: 'Bộ nhớ ngoài',
+              position: 'is-top-right',
               addon: {
                 component: 'imports/addons/AddExternalStorage',
                 width: '70%',
@@ -304,6 +305,7 @@ async function createProduct() {
               first: true,
               clearable: true,
               placeholder: 'Chỉ số IP',
+              position: 'is-top-right',
               addon: {
                 component: 'imports/addons/AddIPRating',
                 width: '70%',
@@ -326,6 +328,7 @@ async function createProduct() {
               first: true,
               clearable: true,
               placeholder: 'Chất liệu',
+              position: 'is-top-right',
               addon: {
                 component: 'imports/addons/AddDesign',
                 width: '70%',

app/components/imports/DeleteProduct.vue

@@ -42,6 +42,7 @@ async function deleteProduct() {
       />
     </span>
     <Modal
+      v-if="showConfirmModal"
       v-bind="showConfirmModal"
       @close="showConfirmModal = null"
     />

app/components/imports/DeleteProductVariant.vue

@@ -42,6 +42,7 @@ async function deleteVariant() {
       />
     </span>
     <Modal
+      v-if="showConfirmModal"
       v-bind="showConfirmModal"
       @close="showConfirmModal = null"
     />

app/components/imports/IMEIButton.vue

@@ -26,6 +26,7 @@ const showModal = ref(null);
     </span>
   </button>
   <Modal
+    v-if="showModal"
     v-bind="showModal"
     @close="showModal = null"
   />

app/components/media/FileUpload.vue

@@ -32,6 +32,7 @@
       </label>
     </div>
     <Modal
+      v-if="showmodal"
       v-bind="showmodal"
       @close="showmodal = undefined"
       @files="getFiles"