Initial commit

app/components/Modal.vue

@@ -0,0 +1,133 @@
+<template>
+  <Teleport to="#__nuxt > div">
+    <div class="modal is-active" @click="doClick">
+      <div
+        class="modal-background"
+        :style="`opacity:${count === 0 ? 0.7 : 0.3} !important;`"
+      ></div>
+      <div
+        class="modal-card"
+        :id="docid"
+        :style="`width:${vWidth}; border-radius:16px;`"
+      >
+        <header class="modal-card-head my-0 py-2" v-if="title">
+          <div style="width: 100%">
+            <div class="field is-grouped">
+              <div class="control is-expanded has-text-left">
+                <p class="fsb-18 has-text-primary" v-html="title"></p>
+              </div>
+              <div class="control has-text-right">
+                <button class="delete is-medium" @click="closeModal()"></button>
+              </div>
+            </div>
+          </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;`"
+        >
+          <component
+            :is="resolvedComponent"
+            v-bind="props.vbind"
+            @modalevent="modalEvent"
+            @close="closeModal"
+          />
+        </section>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { onMounted, defineAsyncComponent, shallowRef, watchEffect } from "vue";
+import { useStore } from "@/stores/index";
+
+const emit = defineEmits(["close", "remove", "select", "dataevent", "update"]);
+const store = useStore();
+const { $id } = useNuxtApp();
+
+const props = defineProps({
+  component: String, 
+  width: String,
+  height: String,
+  vbind: Object,
+  title: String,
+});
+
+
+const componentFiles = import.meta.glob("@/components/**/*.vue");
+
+const resolvedComponent = shallowRef(null);
+
+function loadDynamicComponent() {
+  if (!props.component) {
+    resolvedComponent.value = null;
+    return;
+  }
+
+  const fullPath = `/components/${props.component}.vue`;
+  
+  const componentPath = Object.keys(componentFiles).find((path) =>
+    path.endsWith(fullPath)
+  );
+
+  if (componentPath) {
+    resolvedComponent.value = defineAsyncComponent(componentFiles[componentPath]);
+  } else {
+    console.error(`Không tìm thấy component tại: ${fullPath}`);
+    resolvedComponent.value = null;
+  }
+}
+
+// Theo dõi sự thay đổi của props.component để load lại nếu cần
+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");
+};
+
+const modalEvent = function (ev) {
+  if (ev.name === "select") {
+    emit("select", ev.data);
+  } else if (ev.name === "dataevent") {
+    emit("dataevent", ev.data);
+  } else if (ev.name === "update") {
+    emit("update", ev.data);
+  } else {
+    emit(ev.name, ev.data);
+  }
+};
+
+const doClick = function (e) {
+  if (!e.srcElement.offsetParent) return;
+  const el = document.getElementById(docid);
+  if (el && !el.contains(e.target)) {
+    closeModal();
+  }
+};
+
+onMounted(() => {
+  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(() => {
+  count--;
+  if (count === 0) document.documentElement.classList.remove('is-clipped');
+})
+</script>