TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-26 22:43:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

(search) clicking / tapping outside of the dialogue closes it

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-12-26 13:56:27 +01:00
parent 9318d64e44
commit 14937616fe
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/search/SearchDialogue.vue
View File

@ -50,6 +50,16 @@ onUnmounted(() => {
document.removeEventListener('keydown', onKeydown);
});
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();
}
};
const router = useRouter();
watch(router.currentRoute, () => {
close();
@ -59,7 +69,7 @@ defineExpose({ open, close });
</script>
<template>
<dialog ref="dialogue" class="container m-auto h-100 rounded border">
<dialog ref="dialogue" class="container m-auto h-100 rounded border" @mousedown="onMousedown">
<div class="input-group mb-4">
<span class="input-group-text">
<Spinner v-if="isLoading" size="1.25em" />