43 lines
972 B
Vue
43 lines
972 B
Vue
<script setup lang="ts">
|
|
import { X } from "lucide-vue-next";
|
|
const props = defineProps<{ open: boolean; title: string }>();
|
|
const emit = defineEmits<{ close: [] }>();
|
|
const dialog = ref<HTMLDialogElement>();
|
|
const titleId = useId();
|
|
watch(
|
|
() => props.open,
|
|
async (open) => {
|
|
await nextTick();
|
|
if (open) dialog.value?.showModal();
|
|
else dialog.value?.close();
|
|
},
|
|
);
|
|
onMounted(() => {
|
|
if (props.open) dialog.value?.showModal();
|
|
});
|
|
</script>
|
|
<template>
|
|
<dialog
|
|
ref="dialog"
|
|
class="glass modal"
|
|
:aria-labelledby="titleId"
|
|
@cancel.prevent="emit('close')"
|
|
@click="
|
|
(e) => {
|
|
if (e.target === dialog) emit('close');
|
|
}
|
|
"
|
|
>
|
|
<div class="section-heading">
|
|
<h2 :id="titleId">{{ title }}</h2>
|
|
<GlassButton
|
|
:aria-label="$t('common.close')"
|
|
class="icon-button"
|
|
@click="emit('close')"
|
|
><X :size="20"
|
|
/></GlassButton>
|
|
</div>
|
|
<slot />
|
|
</dialog>
|
|
</template>
|