mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-22 20:24:18 -04:00
32 lines
790 B
Vue
32 lines
790 B
Vue
<script setup lang="ts">
|
|
const dialogue = useTemplateRef('dialogue');
|
|
const searchForm = useTemplateRef('searchForm');
|
|
|
|
const open = () => {
|
|
searchForm.value?.reset();
|
|
dialogue.value?.showModal();
|
|
};
|
|
|
|
const close = () => {
|
|
dialogue.value?.close();
|
|
};
|
|
|
|
const onMousedown = (event: MouseEvent) => {
|
|
const rect = dialogue.value?.getBoundingClientRect();
|
|
if (rect && (
|
|
event.clientX < rect.left || event.clientX > rect.right ||
|
|
event.clientY < rect.top || event.clientY > rect.bottom)
|
|
) {
|
|
close();
|
|
}
|
|
};
|
|
|
|
defineExpose({ open, close });
|
|
</script>
|
|
|
|
<template>
|
|
<dialog ref="dialogue" class="container m-auto h-100 rounded border" @mousedown="onMousedown">
|
|
<SearchForm ref="searchForm" @selected="close()" />
|
|
</dialog>
|
|
</template>
|