37 lines
800 B
Vue
37 lines
800 B
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition name="modal">
|
|
<div
|
|
v-if="show"
|
|
class="fixed inset-0 z-[2000] flex items-center justify-center p-4"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:aria-labelledby="ariaLabelledby"
|
|
@keydown.escape="$emit('close')"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="absolute inset-0 bg-black/60 transition-opacity"
|
|
aria-label="Close"
|
|
@click="$emit('close')"
|
|
/>
|
|
<div
|
|
class="relative w-full"
|
|
@click.stop
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
show: Boolean,
|
|
ariaLabelledby: { type: String, default: undefined },
|
|
})
|
|
|
|
defineEmits(['close'])
|
|
</script>
|