44 lines
1 KiB
Vue
44 lines
1 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div v-if="modelValue" class="fixed inset-0 z-50" @click.self="close">
|
|
<!-- Backdrop -->
|
|
<div class="fixed inset-0 bg-black/50" @click="close"></div>
|
|
|
|
<!-- Modal Panel -->
|
|
<div class="fixed inset-0 flex items-center justify-center p-4">
|
|
<div
|
|
class="bg-white rounded-lg shadow-xl max-w-[85vw] max-h-[85vh] overflow-auto relative"
|
|
:style="{ maxHeight }"
|
|
>
|
|
<!-- Close button -->
|
|
<button
|
|
@click="close"
|
|
class="absolute top-4 right-4 z-10 text-gray-500 hover:text-gray-700 text-2xl leading-none"
|
|
>
|
|
×
|
|
</button>
|
|
|
|
<!-- Content -->
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: Boolean,
|
|
maxHeight: {
|
|
type: String,
|
|
default: '85vh'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const close = () => {
|
|
emit('update:modelValue', false)
|
|
}
|
|
</script>
|