From 120ef2f05a215d4dc6666066dc28878ab7100517 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 15 Oct 2020 18:47:06 -0400
Subject: [PATCH] Rename close to esc

---
 app/src/components/v-dialog/v-dialog.vue      |  2 +-
 app/src/components/v-form/form-field.vue      |  2 +-
 app/src/components/v-modal/v-modal.vue        |  2 +-
 app/src/components/v-upload/v-upload.vue      |  7 +-
 .../_system/tfa-setup/tfa-setup.vue           |  2 +-
 app/src/interfaces/file/file.vue              |  9 ++-
 app/src/modules/activity/routes/item.vue      |  2 +-
 .../components/navigation-bookmark.vue        |  4 +-
 .../modules/collections/routes/collection.vue |  4 +-
 app/src/modules/collections/routes/item.vue   | 11 ++-
 .../modules/files/components/add-folder.vue   |  2 +-
 .../files/components/navigation-folder.vue    |  6 +-
 app/src/modules/files/routes/add-new.vue      |  2 +-
 app/src/modules/files/routes/collection.vue   |  4 +-
 app/src/modules/files/routes/item.vue         |  6 +-
 .../components/collection-options.vue         |  2 +-
 .../data-model/field-detail/field-detail.vue  |  4 +-
 .../fields/components/field-select.vue        |  4 +-
 .../routes/data-model/fields/fields.vue       |  2 +-
 .../routes/data-model/new-collection.vue      | 10 ++-
 .../routes/presets/collection/collection.vue  |  2 +-
 .../modules/settings/routes/presets/item.vue  |  2 +-
 .../modules/settings/routes/roles/add-new.vue |  2 +-
 .../item/components/permissions-overview.vue  |  2 +-
 .../settings/routes/roles/item/item.vue       |  6 +-
 .../settings/routes/webhooks/collection.vue   |  2 +-
 .../modules/settings/routes/webhooks/item.vue |  2 +-
 app/src/modules/users/routes/collection.vue   |  2 +-
 app/src/modules/users/routes/item.vue         |  6 +-
 .../components/bookmark-add/bookmark-add.vue  |  2 +-
 .../bookmark-edit/bookmark-edit.vue           |  2 +-
 .../comment-item-header.vue                   |  2 +-
 .../file-lightbox/file-lightbox.vue           |  2 +-
 .../components/image-editor/image-editor.vue  | 13 +--
 .../modal-collection/modal-collection.vue     |  2 +-
 .../components/modal-item/modal-item.vue      |  2 +-
 .../module-bar-avatar/module-bar-avatar.vue   | 81 ++++++++++---------
 .../revisions-modal.vue                       |  4 +-
 38 files changed, 121 insertions(+), 102 deletions(-)

diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog/v-dialog.vue
index 62821f7b3b..0a734c2630 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -36,7 +36,7 @@ export default defineComponent({
 
 		useShortcut('escape', (event, cancelNext) => {
 			if (_active.value) {
-				emit('close')
+				emit('esc');
 				cancelNext();
 			}
 		});
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index 64810ff4c5..c94a0929e3 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -39,7 +39,7 @@
 			@input="$emit('input', $event)"
 		/>
 
-		<v-dialog v-model="showRaw" @close="showRaw = false">
+		<v-dialog v-model="showRaw" @esc="showRaw = false">
 			<v-card>
 				<v-card-title>{{ $t('edit_raw_value') }}</v-card-title>
 				<v-card-text>
diff --git a/app/src/components/v-modal/v-modal.vue b/app/src/components/v-modal/v-modal.vue
index f75605a213..fcce7ff4c3 100644
--- a/app/src/components/v-modal/v-modal.vue
+++ b/app/src/components/v-modal/v-modal.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog v-model="_active" @close="$emit('close')" :persistent="persistent">
+	<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent">
 		<template #activator="{ on }">
 			<slot name="activator" v-bind="{ on }" />
 		</template>
diff --git a/app/src/components/v-upload/v-upload.vue b/app/src/components/v-upload/v-upload.vue
index b300c8f3ac..0b7a9ef4a7 100644
--- a/app/src/components/v-upload/v-upload.vue
+++ b/app/src/components/v-upload/v-upload.vue
@@ -59,7 +59,12 @@
 					@input="setSelection"
 				/>
 
-				<v-dialog :active="activeDialog === 'url'" @close="activeDialog = null" @toggle="activeDialog = null" :persistent="urlLoading">
+				<v-dialog
+					:active="activeDialog === 'url'"
+					@esc="activeDialog = null"
+					@toggle="activeDialog = null"
+					:persistent="urlLoading"
+				>
 					<v-card>
 						<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 						<v-card-text>
diff --git a/app/src/interfaces/_system/tfa-setup/tfa-setup.vue b/app/src/interfaces/_system/tfa-setup/tfa-setup.vue
index 6e33ece173..4117470611 100644
--- a/app/src/interfaces/_system/tfa-setup/tfa-setup.vue
+++ b/app/src/interfaces/_system/tfa-setup/tfa-setup.vue
@@ -8,7 +8,7 @@
 			</template>
 		</v-checkbox>
 
-		<v-dialog persistent v-model="enableActive" @close="enableActive = false">
+		<v-dialog persistent v-model="enableActive" @esc="enableActive = false">
 			<v-card>
 				<template v-if="tfaEnabled === false" v-show="loading === false">
 					<v-card-title>
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index 6fd7b251f8..a44af12941 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -67,7 +67,7 @@
 			</v-list>
 		</v-menu>
 
-		<v-dialog :active="activeDialog === 'upload'" @close="activeDialog = null" @toggle="activeDialog = null">
+		<v-dialog :active="activeDialog === 'upload'" @esc="activeDialog = null" @toggle="activeDialog = null">
 			<v-card>
 				<v-card-title>{{ $t('upload_from_device') }}</v-card-title>
 				<v-card-text>
@@ -86,7 +86,12 @@
 			@input="setSelection"
 		/>
 
-		<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" @close="activeDialog = null" :persistent="urlLoading">
+		<v-dialog
+			:active="activeDialog === 'url'"
+			@toggle="activeDialog = null"
+			@esc="activeDialog = null"
+			:persistent="urlLoading"
+		>
 			<v-card>
 				<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 				<v-card-text>
diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index bc39056002..7be7b344a8 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal active title="Activity Item" @toggle="close" @close="close">
+	<v-modal active title="Activity Item" @toggle="close" @esc="close">
 		<v-progress-circular indeterminate v-if="loading" />
 
 		<template v-else-if="error">
diff --git a/app/src/modules/collections/components/navigation-bookmark.vue b/app/src/modules/collections/components/navigation-bookmark.vue
index 725066edde..9d78af84eb 100644
--- a/app/src/modules/collections/components/navigation-bookmark.vue
+++ b/app/src/modules/collections/components/navigation-bookmark.vue
@@ -27,7 +27,7 @@
 			</v-list>
 		</v-menu>
 
-		<v-dialog v-model="renameActive" persistent @close="renameActive = false">
+		<v-dialog v-model="renameActive" persistent @esc="renameActive = false">
 			<v-card>
 				<v-card-title>{{ $t('rename_bookmark') }}</v-card-title>
 				<v-card-text>
@@ -40,7 +40,7 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="deleteActive" persistent @close="deleteActive = false">
+		<v-dialog v-model="deleteActive" persistent @esc="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_bookmark_copy', { bookmark: bookmark.bookmark }) }}</v-card-title>
 				<v-card-actions>
diff --git a/app/src/modules/collections/routes/collection.vue b/app/src/modules/collections/routes/collection.vue
index 005061427b..c6eea2e940 100644
--- a/app/src/modules/collections/routes/collection.vue
+++ b/app/src/modules/collections/routes/collection.vue
@@ -66,7 +66,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						:disabled="batchDeleteAllowed !== true"
@@ -96,7 +96,7 @@
 
 			<v-dialog
 				v-model="confirmArchive"
-				@close="confirmArchive = false"
+				@dsc="confirmArchive = false"
 				v-if="selection.length > 0 && currentCollection.meta && currentCollection.meta.archive_field"
 			>
 				<template #activator="{ on }">
diff --git a/app/src/modules/collections/routes/item.vue b/app/src/modules/collections/routes/item.vue
index 7523b1755e..567877a50e 100644
--- a/app/src/modules/collections/routes/item.vue
+++ b/app/src/modules/collections/routes/item.vue
@@ -57,7 +57,12 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-if="!isNew" v-model="confirmDelete" :disabled="deleteAllowed === false" @close="confirmDelete = false">
+			<v-dialog
+				v-if="!isNew"
+				v-model="confirmDelete"
+				:disabled="deleteAllowed === false"
+				@esc="confirmDelete = false"
+			>
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -89,7 +94,7 @@
 			<v-dialog
 				v-if="collectionInfo.meta && collectionInfo.meta.archive_field && !isNew"
 				v-model="confirmArchive"
-				@close="confirmArchive = false"
+				@esc="confirmArchive = false"
 				:disabled="archiveAllowed === false"
 			>
 				<template #activator="{ on }">
@@ -158,7 +163,7 @@
 			v-model="edits"
 		/>
 
-		<v-dialog v-model="confirmLeave" @close="confirmLeave = false">
+		<v-dialog v-model="confirmLeave" @esc="confirmLeave = false">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
diff --git a/app/src/modules/files/components/add-folder.vue b/app/src/modules/files/components/add-folder.vue
index ddb049f488..af6ca826e1 100644
--- a/app/src/modules/files/components/add-folder.vue
+++ b/app/src/modules/files/components/add-folder.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog v-model="dialogActive" @close="dialogActive = false">
+	<v-dialog v-model="dialogActive" @esc="dialogActive = false">
 		<template #activator="{ on }">
 			<v-button rounded icon class="add-new" @click="on" v-tooltip.bottom="$t('create_folder')">
 				<v-icon name="create_new_folder" outline />
diff --git a/app/src/modules/files/components/navigation-folder.vue b/app/src/modules/files/components/navigation-folder.vue
index 63c92484d3..78568fe3d0 100644
--- a/app/src/modules/files/components/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation-folder.vue
@@ -66,7 +66,7 @@
 			</v-list>
 		</v-menu>
 
-		<v-dialog v-model="renameActive" persistent @close="renameActive = false">
+		<v-dialog v-model="renameActive" persistent @esc="renameActive = false">
 			<v-card>
 				<v-card-title>{{ $t('rename_folder') }}</v-card-title>
 				<v-card-text>
@@ -79,7 +79,7 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="moveActive" persistent @close="moveActive = false">
+		<v-dialog v-model="moveActive" persistent @esc="moveActive = false">
 			<v-card>
 				<v-card-title>{{ $t('move_to_folder') }}</v-card-title>
 				<v-card-text>
@@ -92,7 +92,7 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="deleteActive" persistent @close="deleteActive = false">
+		<v-dialog v-model="deleteActive" persistent @esc="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_folder') }}</v-card-title>
 				<v-card-text>
diff --git a/app/src/modules/files/routes/add-new.vue b/app/src/modules/files/routes/add-new.vue
index d158aea47a..4135823066 100644
--- a/app/src/modules/files/routes/add-new.vue
+++ b/app/src/modules/files/routes/add-new.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog :active="true" @toggle="close" @close="close">
+	<v-dialog :active="true" @toggle="close" @esc="close">
 		<v-card>
 			<v-card-title>{{ $t('add_file') }}</v-card-title>
 			<v-card-text>
diff --git a/app/src/modules/files/routes/collection.vue b/app/src/modules/files/routes/collection.vue
index 25db787d45..d2d471c748 100644
--- a/app/src/modules/files/routes/collection.vue
+++ b/app/src/modules/files/routes/collection.vue
@@ -19,7 +19,7 @@
 
 			<add-folder :parent="queryFilters && queryFilters.folder" />
 
-			<v-dialog v-model="moveToDialogActive" v-if="selection.length > 0" @close="moveToDialogActive = false">
+			<v-dialog v-model="moveToDialogActive" v-if="selection.length > 0" @esc="moveToDialogActive = false">
 				<template #activator="{ on }">
 					<v-button rounded icon @click="on" class="folder" v-tooltip.bottom="$t('move_to_folder')">
 						<v-icon name="folder_move" />
@@ -44,7 +44,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
index c3ee0e8b7a..948867d66a 100644
--- a/app/src/modules/files/routes/item.vue
+++ b/app/src/modules/files/routes/item.vue
@@ -12,7 +12,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -40,7 +40,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-dialog v-model="moveToDialogActive" v-if="isNew === false" @close="moveToDialogActive = false">
+			<v-dialog v-model="moveToDialogActive" v-if="isNew === false" @esc="moveToDialogActive = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -142,7 +142,7 @@
 			/>
 		</div>
 
-		<v-dialog v-model="confirmLeave" @close="discardAndLeave">
+		<v-dialog v-model="confirmLeave" @esc="discardAndLeave">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
index c098d6b26f..65f866ef66 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
@@ -15,7 +15,7 @@
 				</v-list-item>
 			</v-list>
 		</v-menu>
-		<v-dialog v-model="deleteActive" @close="deleteActive = null">
+		<v-dialog v-model="deleteActive" @esc="deleteActive = null">
 			<v-card>
 				<v-card-title>{{ $t('delete_collection_are_you_sure') }}</v-card-title>
 				<v-card-actions>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 984ae340f7..d3c58b5cfe 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -2,7 +2,7 @@
 	<v-dialog
 		persistent
 		:active="true"
-		@close="cancelField"
+		@esc="cancelField"
 		v-if="localType === 'translations' && translationsManual === false && field === '+'"
 	>
 		<v-card class="auto-translations">
@@ -32,7 +32,7 @@
 		v-else
 		:active="true"
 		@toggle="cancelField"
-		@close="cancelField"
+		@esc="cancelField"
 		:title="
 			field === '+'
 				? $t('creating_new_field', { collection: collectionInfo.name })
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index e788702e1b..0fe570585c 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -152,7 +152,7 @@
 			</template>
 		</v-input>
 
-		<v-dialog v-model="duplicateActive" @close="duplicateActive = false">
+		<v-dialog v-model="duplicateActive" @esc="duplicateActive = false">
 			<v-card class="duplicate">
 				<v-card-title>{{ $t('duplicate_where_to') }}</v-card-title>
 				<v-card-text>
@@ -179,7 +179,7 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="deleteActive" @close="deleteActive = false">
+		<v-dialog v-model="deleteActive" @esc="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_field_are_you_sure', { field: field.field }) }}</v-card-title>
 				<v-card-actions>
diff --git a/app/src/modules/settings/routes/data-model/fields/fields.vue b/app/src/modules/settings/routes/data-model/fields/fields.vue
index a559e89e3f..7efea758d9 100644
--- a/app/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/app/src/modules/settings/routes/data-model/fields/fields.vue
@@ -8,7 +8,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index 93c3a159aa..c588dc59d2 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -1,6 +1,12 @@
 <template>
-	<v-modal :title="$t('creating_new_collection')" :active="true" class="new-collection" persistent @close="$router.push('/settings/data-model')">
-		<v-dialog :active="saveError !== null" @toggle="saveError = null" @close="saveError = null">
+	<v-modal
+		:title="$t('creating_new_collection')"
+		:active="true"
+		class="new-collection"
+		persistent
+		@esc="$router.push('/settings/data-model')"
+	>
+		<v-dialog :active="saveError !== null" @toggle="saveError = null" @esc="saveError = null">
 			<v-card class="selectable">
 				<v-card-title>
 					{{ saveError && saveError.message }}
diff --git a/app/src/modules/settings/routes/presets/collection/collection.vue b/app/src/modules/settings/routes/presets/collection/collection.vue
index 55b3a7bb9e..c2f96739e3 100644
--- a/app/src/modules/settings/routes/presets/collection/collection.vue
+++ b/app/src/modules/settings/routes/presets/collection/collection.vue
@@ -9,7 +9,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/settings/routes/presets/item.vue b/app/src/modules/settings/routes/presets/item.vue
index f481878b4b..d5a8f645c2 100644
--- a/app/src/modules/settings/routes/presets/item.vue
+++ b/app/src/modules/settings/routes/presets/item.vue
@@ -12,7 +12,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
diff --git a/app/src/modules/settings/routes/roles/add-new.vue b/app/src/modules/settings/routes/roles/add-new.vue
index ed23777495..58e32c5d09 100644
--- a/app/src/modules/settings/routes/roles/add-new.vue
+++ b/app/src/modules/settings/routes/roles/add-new.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog active persistent @close="$router.push('/settings/roles')">
+	<v-dialog active persistent @esc="$router.push('/settings/roles')">
 		<v-card>
 			<v-card-title>
 				{{ $t('create_role') }}
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
index 6e9e2b4e09..40c3ce5753 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
@@ -47,7 +47,7 @@
 			{{ $t('reset_system_permissions') }}
 		</button>
 
-		<v-dialog v-model="resetActive" @close="resetActive = false">
+		<v-dialog v-model="resetActive" @esc="resetActive = false">
 			<v-card>
 				<v-card-title>{{ $t('reset_system_permissions') }}</v-card-title>
 				<v-card-text>{{ $t('reset_system_permissions_copy') }}</v-card-text>
diff --git a/app/src/modules/settings/routes/roles/item/item.vue b/app/src/modules/settings/routes/roles/item/item.vue
index db1d664106..d16638977c 100644
--- a/app/src/modules/settings/routes/roles/item/item.vue
+++ b/app/src/modules/settings/routes/roles/item/item.vue
@@ -7,7 +7,11 @@
 			</v-button>
 		</template>
 		<template #actions>
-			<v-dialog v-model="confirmDelete" v-if="[1, 2].includes(+primaryKey) === false" @close="confirmDelete = false">
+			<v-dialog
+				v-model="confirmDelete"
+				v-if="[1, 2].includes(+primaryKey) === false"
+				@esc="confirmDelete = false"
+			>
 				<template #activator="{ on }">
 					<v-button
 						rounded
diff --git a/app/src/modules/settings/routes/webhooks/collection.vue b/app/src/modules/settings/routes/webhooks/collection.vue
index ceaac2d478..26b450af95 100644
--- a/app/src/modules/settings/routes/webhooks/collection.vue
+++ b/app/src/modules/settings/routes/webhooks/collection.vue
@@ -15,7 +15,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/settings/routes/webhooks/item.vue b/app/src/modules/settings/routes/webhooks/item.vue
index d8a38c4ea6..21e033bcae 100644
--- a/app/src/modules/settings/routes/webhooks/item.vue
+++ b/app/src/modules/settings/routes/webhooks/item.vue
@@ -9,7 +9,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/users/routes/collection.vue b/app/src/modules/users/routes/collection.vue
index 143de413a4..517dabb072 100644
--- a/app/src/modules/users/routes/collection.vue
+++ b/app/src/modules/users/routes/collection.vue
@@ -17,7 +17,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index a5b1598b30..f0e0436f68 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -11,7 +11,7 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
+			<v-dialog v-model="confirmDelete" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -42,7 +42,7 @@
 			<v-dialog
 				v-if="collectionInfo.meta && collectionInfo.meta.archive_field && !isNew"
 				v-model="confirmArchive"
-				@close="confirmArchive = false"
+				@esc="confirmArchive = false"
 				:disabled="archiveAllowed === false"
 			>
 				<template #activator="{ on }">
@@ -130,7 +130,7 @@
 			/>
 		</div>
 
-		<v-dialog v-model="confirmLeave" @close="confirmLeave = false">
+		<v-dialog v-model="confirmLeave" @esc="confirmLeave = false">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
diff --git a/app/src/views/private/components/bookmark-add/bookmark-add.vue b/app/src/views/private/components/bookmark-add/bookmark-add.vue
index 3c8bbfa6d5..90f7964956 100644
--- a/app/src/views/private/components/bookmark-add/bookmark-add.vue
+++ b/app/src/views/private/components/bookmark-add/bookmark-add.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog :active="active" @toggle="$listeners.toggle" persistent @close="cancel">
+	<v-dialog :active="active" @toggle="$listeners.toggle" persistent @esc="cancel">
 		<template #activator="slotBinding">
 			<slot name="activator" v-bind="slotBinding" />
 		</template>
diff --git a/app/src/views/private/components/bookmark-edit/bookmark-edit.vue b/app/src/views/private/components/bookmark-edit/bookmark-edit.vue
index b32afeeb5c..e6816f992e 100644
--- a/app/src/views/private/components/bookmark-edit/bookmark-edit.vue
+++ b/app/src/views/private/components/bookmark-edit/bookmark-edit.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog :active="active" @toggle="$listeners.toggle" persistent @close="cancel">
+	<v-dialog :active="active" @toggle="$listeners.toggle" persistent @esc="cancel">
 		<template #activator="slotBinding">
 			<slot name="activator" v-bind="slotBinding" />
 		</template>
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
index 36e85a2570..5b2196cbbe 100644
--- a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
+++ b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
@@ -46,7 +46,7 @@
 			</v-menu>
 		</div>
 
-		<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
+		<v-dialog v-model="confirmDelete" @esc="confirmDelete = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_comment') }}</v-card-title>
 				<v-card-text>{{ $t('delete_are_you_sure') }}</v-card-text>
diff --git a/app/src/views/private/components/file-lightbox/file-lightbox.vue b/app/src/views/private/components/file-lightbox/file-lightbox.vue
index 4d56c291c8..bfff75f72e 100644
--- a/app/src/views/private/components/file-lightbox/file-lightbox.vue
+++ b/app/src/views/private/components/file-lightbox/file-lightbox.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-dialog v-model="_active" @close="_active = false">
+	<v-dialog v-model="_active" @esc="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index bda0d1ef37..5fa96c1958 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @close="_active = false">
+	<v-modal v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @esc="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
@@ -12,9 +12,7 @@
 			<v-progress-circular indeterminate />
 		</div>
 
-		<v-notice type="error" v-else-if="error">
-			error
-		</v-notice>
+		<v-notice type="error" v-else-if="error">error</v-notice>
 
 		<div v-show="imageData && !loading && !error" class="editor-container">
 			<div class="editor">
@@ -102,12 +100,7 @@
 			<div class="dimensions" v-if="imageData">
 				<v-icon name="info_outline" />
 				{{ $n(imageData.width) }}x{{ $n(imageData.height) }}
-				<template
-					v-if="
-					(imageData.width !== newDimensions.width ||
-						imageData.height !== newDimensions.height)
-				"
-				>
+				<template v-if="imageData.width !== newDimensions.width || imageData.height !== newDimensions.height">
 					->
 					{{ $n(newDimensions.width) }}x{{ $n(newDimensions.height) }}
 				</template>
diff --git a/app/src/views/private/components/modal-collection/modal-collection.vue b/app/src/views/private/components/modal-collection/modal-collection.vue
index b63042b532..1521557baa 100644
--- a/app/src/views/private/components/modal-collection/modal-collection.vue
+++ b/app/src/views/private/components/modal-collection/modal-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="$t('select_item')" no-padding @close="cancel">
+	<v-modal v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
diff --git a/app/src/views/private/components/modal-item/modal-item.vue b/app/src/views/private/components/modal-item/modal-item.vue
index 719aa7c849..13cd56cc1a 100644
--- a/app/src/views/private/components/modal-item/modal-item.vue
+++ b/app/src/views/private/components/modal-item/modal-item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="title" persistent form-width @close="cancel">
+	<v-modal v-model="_active" :title="title" persistent form-width @esc="cancel">
 		<template v-if="junctionField">
 			<v-form
 				:loading="loading"
diff --git a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
index 3c76236af5..79fa56e9e2 100644
--- a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-hover class="module-bar-avatar" v-slot="{ hover }">
-		<v-dialog v-model="signOutActive" @close="signOutActive = false">
+		<v-dialog v-model="signOutActive" @esc="signOutActive = false">
 			<template #activator="{ on }">
 				<v-button
 					@click="on"
@@ -75,6 +75,46 @@ export default defineComponent({
 .module-bar-avatar {
 	position: relative;
 
+	.v-avatar {
+		--v-button-color: var(--module-icon);
+		--v-button-color-hover: var(--white);
+		--v-avatar-color: var(--module-background);
+
+		overflow: visible;
+
+		.avatar-image {
+			opacity: 0.5;
+			transition: opacity var(--fast) var(--transition);
+		}
+
+		&.no-avatar {
+			&::after {
+				position: absolute;
+				top: -1px;
+				right: 8px;
+				left: 8px;
+				height: 2px;
+				background-color: var(--module-icon);
+				opacity: 0.25;
+				content: '';
+			}
+		}
+
+		.v-icon {
+			--v-icon-color: var(--module-icon);
+		}
+
+		&:hover {
+			.avatar-image {
+				opacity: 1;
+			}
+
+			.v-icon {
+				--v-icon-color: var(--white);
+			}
+		}
+	}
+
 	.sign-out {
 		--v-button-color: var(--module-icon);
 		--v-button-background-color: var(--module-background);
@@ -95,44 +135,5 @@ export default defineComponent({
 			}
 		}
 	}
-
-	.v-avatar {
-		overflow: visible;
-		--v-button-color: var(--module-icon);
-		--v-button-color-hover: var(--white);
-		--v-avatar-color: var(--module-background);
-
-		.avatar-image {
-			opacity: 0.5;
-			transition: opacity var(--fast) var(--transition);
-		}
-
-		&.no-avatar {
-			&:after {
-				content: "";
-				position: absolute;
-				left: 8px;
-				right: 8px;
-				top: -1px;
-				height: 2px;
-				background-color: var(--module-icon);
-				opacity: 0.25;
-			}
-		}
-
-		.v-icon {
-			--v-icon-color: var(--module-icon);
-		}
-
-		&:hover {
-			.avatar-image {
-				opacity: 1;
-			}
-
-			.v-icon {
-				--v-icon-color: var(--white);
-			}
-		}
-	}
 }
 </style>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
index 53ed24003d..a1b6ac71bd 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-modal v-model="_active" :title="$t('item_revision')" @close="_active = false">
+		<v-modal v-model="_active" :title="$t('item_revision')" @esc="_active = false">
 			<template #subtitle>
 				<revisions-modal-picker :revisions="revisions" :current.sync="_current" />
 			</template>
@@ -30,7 +30,7 @@
 			</template>
 		</v-modal>
 
-		<v-dialog v-model="confirmRevert" :persistent="reverting" @close="confirmRevert = false">
+		<v-dialog v-model="confirmRevert" :persistent="reverting" @esc="confirmRevert = false">
 			<v-card>
 				<v-card-title>{{ $t('confirm_revert') }}</v-card-title>
 				<v-card-text>{{ $t('confirm_revert_body') }}</v-card-text>