133 lines
3.5 KiB
Vue
133 lines
3.5 KiB
Vue
<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> |