53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<div id="modal_container" v-show="modalStore.isModalOpen" class="fixed w-screen h-screen bg-gray-800
|
|
flex justify-center items-center">
|
|
|
|
<div class="flex">
|
|
<ModalAccountEditCreate v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW "/>
|
|
<ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO"/>
|
|
<ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed, } from 'vue';
|
|
import { useModalStore } from '@/stores/modal.js';
|
|
import ModalAccountEditCreate from './ModalAccountEditCreate.vue';
|
|
import ModalAccountInfo from './ModalAccountInfo.vue';
|
|
import ModalDeleteAlert from './ModalDeleteAlert.vue';
|
|
import {
|
|
MODAL_CREATE_NEW,
|
|
MODAL_ACCT_EDIT,
|
|
MODAL_ACCT_INFO,
|
|
MODAL_DELETE,
|
|
} from "@/constants/constants.js";
|
|
|
|
|
|
export default {
|
|
setup() {
|
|
const modalStore = useModalStore();
|
|
const whichModal = computed(() => modalStore.whichModal);
|
|
|
|
return {
|
|
modalStore,
|
|
whichModal,
|
|
MODAL_CREATE_NEW,
|
|
MODAL_ACCT_EDIT,
|
|
MODAL_ACCT_INFO,
|
|
MODAL_DELETE,
|
|
};
|
|
},
|
|
components: {
|
|
ModalAccountEditCreate,
|
|
ModalAccountInfo,
|
|
ModalDeleteAlert,
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
#modal_container {
|
|
z-index: 9999;
|
|
background-color: rgba(254,254,254, 0.8);
|
|
}
|
|
</style> |