93 lines
2.4 KiB
Vue
93 lines
2.4 KiB
Vue
<script setup>
|
|
import { twMerge } from "tailwind-merge";
|
|
import { computed, defineProps, onMounted, ref, watch } from "vue";
|
|
|
|
/* ----------------------------------------------------------------
|
|
id名.showModal(): 開啟 modal
|
|
id名.close(): 關閉 modal
|
|
詳細請參考 daisyUI
|
|
------------------------------------------------------------------- */
|
|
|
|
const props = defineProps({
|
|
id: String,
|
|
title: String,
|
|
onCancel: Function,
|
|
modalClass: String,
|
|
width: Number || String,
|
|
draggable: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
backdrop: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
modalStyle: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
});
|
|
|
|
const dom = ref(null)
|
|
|
|
onMounted(() => {
|
|
document.querySelector(`#${props.id}[open]`)?.addEventListener("load",()=>{
|
|
console.log("loading")
|
|
})
|
|
document.querySelector(`#${props.id}`).addEventListener("load",()=>{
|
|
console.log("loading")
|
|
})
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Open the modal using ID.showModal() method -->
|
|
<!-- :class="twMerge('modal', open && innerOpen ? 'modal-open' : 'modal-close')" -->
|
|
<dialog ref="dom" :id="id" :class="twMerge(
|
|
'modal',
|
|
backdrop
|
|
? ''
|
|
: 'h-fit w-fit max-h-fit max-w-fit focus-visible:outline-none backdrop:bg-transparent',
|
|
)" :style="modalStyle" v-draggable="draggable">
|
|
<div :class="twMerge(
|
|
'modal-box static rounded-md border border-info py-5 px-6 overflow-y-scroll bg-normal',
|
|
modalClass
|
|
)
|
|
" :style="{ minWidth: isNaN(width) ? width : `${width}px` }">
|
|
<div class="text-2xl font-bold">
|
|
<slot name="modalTitle">
|
|
{{ title }}
|
|
</slot>
|
|
</div>
|
|
<div class="min-h-[400px]">
|
|
<slot name="modalContent"></slot>
|
|
</div>
|
|
|
|
<div class="modal-action relative">
|
|
<slot name="modalAction"></slot>
|
|
</div>
|
|
</div>
|
|
<form v-if="backdrop" method="dialog" class="modal-backdrop">
|
|
<button @click="() => {
|
|
onCancel ? onCancel() : cancel();
|
|
}
|
|
">
|
|
close
|
|
</button>
|
|
</form>
|
|
</dialog>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.modal-box::before {
|
|
@apply fixed top-1 right-1 h-5 w-5 rotate-90 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background01.svg')] bg-center;
|
|
content: "";
|
|
}
|
|
|
|
.modal-action::after {
|
|
@apply absolute -bottom-3 -left-4 h-5 w-5 rotate-90 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background05.svg')] bg-center;
|
|
content: "";
|
|
}
|
|
</style>
|