changes

2026-05-15 14:32:09 +07:00
parent 0ef1d29850
commit 4edb2ff22b
11 changed files with 139 additions and 83 deletions
--- a/app/assets/styles/utils.scss
+++ b/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);
+    }
+  }
+}
--- a/app/components/Modal.vue
+++ b/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 {
--- a/app/components/SearchBox.vue
+++ b/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>
--- a/app/components/datatable/TimeOption.vue
+++ b/app/components/datatable/TimeOption.vue
@@ -155,6 +155,7 @@
      </div>
    </div>
    <Modal
+      v-if="showmodal"
      v-bind="showmodal"
      @close="showmodal = undefined"
    />
--- a/app/components/imports/AddProductForm.vue
+++ b/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%',
--- a/app/components/imports/DeleteProduct.vue
+++ b/app/components/imports/DeleteProduct.vue
@@ -42,6 +42,7 @@ async function deleteProduct() {
      />
    </span>
    <Modal
+      v-if="showConfirmModal"
      v-bind="showConfirmModal"
      @close="showConfirmModal = null"
    />
--- a/app/components/imports/DeleteProductVariant.vue
+++ b/app/components/imports/DeleteProductVariant.vue
@@ -42,6 +42,7 @@ async function deleteVariant() {
      />
    </span>
    <Modal
+      v-if="showConfirmModal"
      v-bind="showConfirmModal"
      @close="showConfirmModal = null"
    />
--- a/app/components/imports/IMEIButton.vue
+++ b/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"
  />
--- a/app/components/media/FileUpload.vue
+++ b/app/components/media/FileUpload.vue
@@ -32,6 +32,7 @@
      </label>
    </div>
    <Modal
+      v-if="showmodal"
      v-bind="showmodal"
      @close="showmodal = undefined"
      @files="getFiles"
--- a/app/composables/useModal.js
+++ b/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 };
-}
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -11,15 +11,16 @@
        @close="$store.snackbar = undefined"
      />
    </Transition>
-    <Modal
-      v-bind="$store.showmodal"
-      @close="$store.showmodal = undefined"
-    />
-    <!-- <Modal2
-      v-for="modal in modals"
-      :key="modal.id"
-      v-bind="modal"
-    /> -->
+    <div
+      id="modals"
+      class="absolute top-0"
+    >
+      <Modal
+        v-if="$store.showmodal"
+        v-bind="$store.showmodal"
+        @close="$store.showmodal = undefined"
+      />
+    </div>
  </div>
 </template>