Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed focus issues on modals closing

Browse Source
This commit is contained in:
Alexis
2025-03-01 14:37:47 +01:00
parent ba3eb29e04
commit 71866b0e4b
6 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/calendar/dialog/Create.vue
View File

@@ -22,7 +22,7 @@ function handleClose() {
<template> <template>
<UiAlertDialog :open="modalState"> <UiAlertDialog :open="modalState">
<UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6"> <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6" @close-auto-focus="(e) => e.preventDefault()">
<UiAlertDialogTitle> <UiAlertDialogTitle>
<span class="text-2xl"> <span class="text-2xl">
<strong class="font-bold">{{ world.name }}</strong> <strong class="font-bold">{{ world.name }}</strong>

1
components/calendar/dialog/Delete.vue
View File

@@ -66,6 +66,7 @@ function handleClosing() {
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"
@pointer-down-outside="handleClosing" @pointer-down-outside="handleClosing"
@close-auto-focus="(e) => e.preventDefault()"
> >
<UiAlertDialogTitle> <UiAlertDialogTitle>
{{ $t('entity.calendar.deleteDialog.title') }} {{ $t('entity.calendar.deleteDialog.title') }}

2
components/world/dialog/Create.vue
View File

@@ -20,7 +20,7 @@ function handleClose() {
<template> <template>
<UiAlertDialog :open="modalState"> <UiAlertDialog :open="modalState">
<UiAlertDialogContent class="gap-4"> <UiAlertDialogContent class="gap-4" @close-auto-focus="(e) => e.preventDefault()">
<header> <header>
<UiAlertDialogTitle> <UiAlertDialogTitle>
<span class="text-2xl"> <span class="text-2xl">

1
components/world/dialog/Delete.vue
View File

@@ -66,6 +66,7 @@ function handleClosing() {
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"
@pointer-down-outside="handleClosing" @pointer-down-outside="handleClosing"
@close-auto-focus="(e) => e.preventDefault()"
> >
<UiAlertDialogTitle> <UiAlertDialogTitle>
{{ $t('entity.world.deleteDialog.title') }} {{ $t('entity.world.deleteDialog.title') }}

2
components/world/dialog/Edit.vue
View File

@@ -25,7 +25,7 @@ function handleClose() {
<template> <template>
<UiAlertDialog :open="modalState"> <UiAlertDialog :open="modalState">
<UiAlertDialogContent class="gap-4"> <UiAlertDialogContent class="gap-4" @close-auto-focus="(e) => e.preventDefault()">
<header> <header>
<UiAlertDialogTitle> <UiAlertDialogTitle>
<span class="text-2xl"> <span class="text-2xl">

2
pages/my/worlds/[id].vue
View File

@@ -232,7 +232,7 @@ function hideEditModal() {
<WorldDialogEdit :world="world.data" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" /> <WorldDialogEdit :world="world.data" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
<CalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" /> <CalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
<CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal" /> <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal"/>
</template> </template>
<template v-else> <template v-else>
<div class="h-full w-full grid place-items-center"> <div class="h-full w-full grid place-items-center">