changes

app/assets/styles/utils.scss

@@ -262,7 +262,6 @@ $containers: ("3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "
 }
 
 // ─── Shared keywords (auto, px, full, min, max, fit) ───────────────────────
-// These are identical in value across w-, h-, and size-
 $shared-keywords: (
   "auto": auto,
   "px": 1px,
@@ -281,7 +280,6 @@ $shared-keywords: (
 }
 
 // ─── Viewport keywords ─────────────────────────────────────────────────────
-// dvw/dvh/lvw/lvh/svw/svh apply equally to w-, h-, and size-
 $viewport-keywords: (
   "dvw": 100dvw,
   "dvh": 100dvh,
@@ -305,3 +303,68 @@ $viewport-keywords: (
 .h-screen {
   height: 100vh;
 }
+
+// ─── Inset / positional offset classes ────────────────────────────────────
+$inset-types: (
+  "inset": (
+    top,
+    right,
+    bottom,
+    left,
+  ),
+  "inset-x": (
+    left,
+    right,
+  ),
+  "inset-y": (
+    top,
+    bottom,
+  ),
+  "top": (
+    top,
+  ),
+  "right": (
+    right,
+  ),
+  "bottom": (
+    bottom,
+  ),
+  "left": (
+    left,
+  ),
+);
+
+// ─── Numeric: 0 → 48, using the same --spacing scale ──────────────────────
+@each $prefix, $props in $inset-types {
+  @for $i from 0 through 48 {
+    .#{$prefix}-#{$i} {
+      @include set-props($props, calc(var(--spacing) * #{$i}));
+    }
+  }
+}
+
+// ─── Fractions ─────────────────────────────────────────────────────────────
+@each $prefix, $props in $inset-types {
+  @each $name, $pair in $fractions {
+    $num: list.nth($pair, 1);
+    $den: list.nth($pair, 2);
+    .#{$prefix}-#{$name} {
+      @include set-props($props, calc(#{$num} / #{$den} * 100%));
+    }
+  }
+}
+
+// ─── Keywords ──────────────────────────────────────────────────────────────
+$inset-keywords: (
+  "auto": auto,
+  "px": 1px,
+  "full": 100%,
+);
+
+@each $prefix, $props in $inset-types {
+  @each $name, $value in $inset-keywords {
+    .#{$prefix}-#{$name} {
+      @include set-props($props, $value);
+    }
+  }
+}

app/components/Modal.vue

@@ -1,19 +1,18 @@
 <template>
   <Teleport
-    v-if="Object.values(props).some((x) => isNotNil(x))"
+    defer
-    to="#__nuxt > div"
+    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="{
+          :style="{ minHeight: height || '750px' }"
-            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 = () => {
+function closeModal() {
-  if (!lock) emit("close");
+  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));
+  document.documentElement.classList.add("is-clipped");
-  if (modalHasProps) {
+  window.addEventListener("keydown", (e) => {
-    document.documentElement.classList.add("is-clipped");
+    if (e.key === "Escape") closeModal();
-    window.addEventListener("keydown", (e) => {
+  });
-      if (e.key === "Escape") closeModal();
+  const collection = document.getElementsByClassName("modal-background");
-    });
+  count = collection.length;
-    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"

app/composables/useModal.js

@@ -1,35 +0,0 @@
-const activeModals = ref([]);
-
-export default function useModal() {
-  function open(component, options = {}) {
-    const id = Date.now() + Math.random();
-    const modal = {
-      id,
-      component,
-      title: options.title,
-      width: options.width,
-      height: options.height,
-      vbind: options.props || {},
-      onClose: options.onClose,
-      onEvent: options.onEvent,
-      ...options,
-    };
-    activeModals.value.push(modal);
-    return id;
-  }
-
-  function close(id) {
-    const index = activeModals.value.findIndex((m) => m.id === id);
-    if (index !== -1) {
-      const modal = activeModals.value[index];
-      modal.onClose?.();
-      activeModals.value.splice(index, 1);
-    }
-  }
-
-  function send(id, eventName, data) {
-    const modal = activeModals.value.find((m) => m.id === id);
-    modal?.onEvent?.({ name: eventName, data });
-  }
-  return { modals: activeModals, open, close, send };
-}

app/layouts/default.vue

@@ -11,15 +11,16 @@
         @close="$store.snackbar = undefined"
       />
     </Transition>
-    <Modal
+    <div
-      v-bind="$store.showmodal"
+      id="modals"
-      @close="$store.showmodal = undefined"
+      class="absolute top-0"
-    />
+    >
-    <!-- <Modal2
+      <Modal
-      v-for="modal in modals"
+        v-if="$store.showmodal"
-      :key="modal.id"
+        v-bind="$store.showmodal"
-      v-bind="modal"
+        @close="$store.showmodal = undefined"
-    /> -->
+      />
+    </div>
   </div>
 </template>