<template> <div class="fixed inset-0 z-10 bg-black bg-opacity-75" :class="{ block: hasModals, hidden: !hasModals, }" > <StackModalForm v-for="(modal, i) in modals" :key="modal.id" :config="modal.config" :show="modal.show" :isActive="i == modals.length - 1" @close="removeModal(modal.id)" @success="removeModal(modal.id)" /> </div> </template> <script> import { ref, watch } from "@vue/composition-api"; import StackModalForm from "./Form/StackModalForm.vue"; import { injectNotifications } from "../../../common/composables"; export default { name: "Modals", components: { StackModalForm, }, setup(props, { root }) { const notifications = injectNotifications(); const modals = ref([]); const hasModals = ref(false); const addModal = (modal = null) => { if (!modal) return; modals.value.push({ id: modal.id, show: true, config: modal, }); hasModals.value = true; }; const removeModal = (id) => { const hideModal = (modal) => modal.id !== id ? modal : { ...modal, show: false }; modals.value = modals.value.map(hideModal); setTimeout(() => { modals.value = modals.value.filter((x) => x.id !== id); if (modals.value.length === 0) { hasModals.value = false; } }, 250); }; watch(() => root.$page.octa_modal, addModal); watch( () => root.$page.octa_response_item, (item) => { if (!item) return; notifications.emit(item.id, item.item); }, ); return { modals, removeModal, addModal, hasModals, }; }, }; </script>