67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<script setup>
|
|
import { twMerge } from "tailwind-merge";
|
|
import { defineProps } from "vue";
|
|
|
|
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>
|
|
<dialog
|
|
:id="id"
|
|
:class="
|
|
twMerge(
|
|
'modal',
|
|
backdrop ? '' : 'focus-visible:outline-none backdrop:bg-transparent'
|
|
)
|
|
"
|
|
:style="modalStyle"
|
|
v-draggable="
|
|
draggable ? { handle: '[data-drag-handle]', target: '.modal-box' } : false
|
|
"
|
|
>
|
|
<div
|
|
:class="
|
|
twMerge(
|
|
'modal-box static rounded-md border border-info py-5 px-6 overflow-y-auto bg-normal',
|
|
modalClass
|
|
)
|
|
"
|
|
:style="{ maxWidth: isNaN(width) ? width : `${width}px` }"
|
|
>
|
|
<!-- 把手：只在這裡按下才可拖動 -->
|
|
<div class="text-2xl font-bold select-none" data-drag-handle>
|
|
<slot name="modalTitle">{{ title }}</slot>
|
|
</div>
|
|
|
|
<div class="min-h-[200px]">
|
|
<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();
|
|
}
|
|
"
|
|
>
|
|
close
|
|
</button>
|
|
</form>
|
|
</dialog>
|
|
</template>
|