95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<script setup>
|
|
import { twMerge } from "tailwind-merge";
|
|
import { defineProps, 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: {},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Open the modal using ID.showModal() method -->
|
|
<!-- :class="twMerge('modal', open && innerOpen ? 'modal-open' : 'modal-close')" -->
|
|
<dialog
|
|
: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>
|