add 'close' event to v-dialog and v-modal

2026-01-26 08:57:58 -05:00 · 2020-10-09 14:55:58 +02:00
parent e843dbba8c
commit c19ac51ffa
38 changed files with 55 additions and 49 deletions
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -33,9 +33,10 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const dialog = ref<HTMLElement | null>(null);
+
 		useShortcut('escape', (event, cancelNext) => {
 			if (_active.value) {
-				emitToggle();
+				emit('close')
 				cancelNext();
 			}
 		});
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -38,7 +38,7 @@
 			@input="$emit('input', $event)"
 		/>

-		<v-dialog v-model="showRaw">
+		<v-dialog v-model="showRaw" @close="showRaw = false">
 			<v-card>
 				<v-card-title>{{ $t('edit_raw_value') }}</v-card-title>
 				<v-card-text>
--- 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" :persistent="persistent">
+	<v-dialog v-model="_active" @close="$emit('close')" :persistent="persistent">
 		<template #activator="{ on }">
 			<slot name="activator" v-bind="{ on }" />
 		</template>
--- a/app/src/components/v-upload/v-upload.vue
+++ b/app/src/components/v-upload/v-upload.vue
@@ -59,7 +59,7 @@
 					@input="setSelection"
 				/>

-				<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" :persistent="urlLoading">
+				<v-dialog :active="activeDialog === 'url'" @close="activeDialog = null" @toggle="activeDialog = null" :persistent="urlLoading">
 					<v-card>
 						<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 						<v-card-text>
--- 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">
+		<v-dialog persistent v-model="enableActive" @close="enableActive = false">
 			<v-card>
 				<template v-if="tfaEnabled === false" v-show="loading === false">
 					<v-card-title>
--- 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'" @toggle="activeDialog = null">
+		<v-dialog :active="activeDialog === 'upload'" @close="activeDialog = null" @toggle="activeDialog = null">
 			<v-card>
 				<v-card-title>{{ $t('upload_from_device') }}</v-card-title>
 				<v-card-text>
@@ -86,7 +86,7 @@
 			@input="setSelection"
 		/>

-		<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" :persistent="urlLoading">
+		<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" @close="activeDialog = null" :persistent="urlLoading">
 			<v-card>
 				<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 				<v-card-text>
--- a/app/src/modules/activity/routes/detail.vue
+++ b/app/src/modules/activity/routes/detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal active title="Activity Item" @toggle="close">
+	<v-modal active title="Activity Item" @toggle="close" @close="close">
 		<v-progress-circular indeterminate v-if="loading" />

 		<template v-else-if="error">
--- 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>
+		<v-dialog v-model="renameActive" persistent @close="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>
+		<v-dialog v-model="deleteActive" persistent @close="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_bookmark_copy', { bookmark: bookmark.bookmark }) }}</v-card-title>
 				<v-card-actions>
--- a/app/src/modules/collections/routes/browse.vue
+++ b/app/src/modules/collections/routes/browse.vue
@@ -66,7 +66,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />

-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						:disabled="batchDeleteAllowed !== true"
@@ -96,6 +96,7 @@

 			<v-dialog
 				v-model="confirmArchive"
+				@close="confirmArchive = false"
 				v-if="selection.length > 0 && currentCollection.meta && currentCollection.meta.archive_field"
 			>
 				<template #activator="{ on }">
--- a/app/src/modules/collections/routes/detail.vue
+++ b/app/src/modules/collections/routes/detail.vue
@@ -48,7 +48,7 @@
 		</template>

 		<template #actions>
-			<v-dialog v-if="!isNew" v-model="confirmDelete" :disabled="deleteAllowed === false">
+			<v-dialog v-if="!isNew" v-model="confirmDelete" :disabled="deleteAllowed === false" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -80,6 +80,7 @@
 			<v-dialog
 				v-if="collectionInfo.meta && collectionInfo.meta.archive_field && !isNew"
 				v-model="confirmArchive"
+				@close="confirmArchive = false"
 				:disabled="archiveAllowed === false"
 			>
 				<template #activator="{ on }">
@@ -148,7 +149,7 @@
 			v-model="edits"
 		/>

-		<v-dialog v-model="confirmLeave">
+		<v-dialog v-model="confirmLeave" @close="confirmLeave = false">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
--- 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">
+	<v-dialog v-model="dialogActive" @close="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 />
--- 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>
+		<v-dialog v-model="renameActive" persistent @close="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>
+		<v-dialog v-model="moveActive" persistent @close="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>
+		<v-dialog v-model="deleteActive" persistent @close="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_folder') }}</v-card-title>
 				<v-card-text>
--- 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">
+	<v-dialog :active="true" @toggle="close" @close="close">
 		<v-card>
 			<v-card-title>{{ $t('add_file') }}</v-card-title>
 			<v-card-text>
--- a/app/src/modules/files/routes/browse.vue
+++ b/app/src/modules/files/routes/browse.vue
@@ -19,7 +19,7 @@

 			<add-folder :parent="queryFilters && queryFilters.folder" />

-			<v-dialog v-model="moveToDialogActive" v-if="selection.length > 0">
+			<v-dialog v-model="moveToDialogActive" v-if="selection.length > 0" @close="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">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" outline />
--- a/app/src/modules/files/routes/detail.vue
+++ b/app/src/modules/files/routes/detail.vue
@@ -12,7 +12,7 @@
 		</template>

 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="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">
+			<v-dialog v-model="moveToDialogActive" v-if="isNew === false" @close="moveToDialogActive = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -142,7 +142,7 @@
 			/>
 		</div>

-		<v-dialog v-model="confirmLeave">
+		<v-dialog v-model="confirmLeave" @close="discardAndLeave">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
--- 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">
+		<v-dialog v-model="deleteActive" @close="deleteActive = null">
 			<v-card>
 				<v-card-title>{{ $t('delete_collection_are_you_sure') }}</v-card-title>
 				<v-card-actions>
--- 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,6 +2,7 @@
 	<v-dialog
 		persistent
 		:active="true"
+		@close="cancelField"
 		v-if="localType === 'translations' && translationsManual === false && field === '+'"
 	>
 		<v-card class="auto-translations">
@@ -31,6 +32,7 @@
 		v-else
 		:active="true"
 		@toggle="cancelField"
+		@close="cancelField"
 		:title="
 			field === '+'
 				? $t('creating_new_field', { collection: collectionInfo.name })
--- 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">
+		<v-dialog v-model="duplicateActive" @close="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">
+		<v-dialog v-model="deleteActive" @close="deleteActive = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_field_are_you_sure', { field: field.field }) }}</v-card-title>
 				<v-card-actions>
--- 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">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
--- 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,6 @@
 <template>
-	<v-modal :title="$t('creating_new_collection')" :active="true" class="new-collection" persistent>
-		<v-dialog :active="saveError !== null" @toggle="saveError = null">
+	<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-card class="selectable">
 				<v-card-title>
 					{{ saveError && saveError.message }}
--- a/app/src/modules/settings/routes/presets/browse/browse.vue
+++ b/app/src/modules/settings/routes/presets/browse/browse.vue
@@ -9,7 +9,7 @@
 		</template>

 		<template #actions>
-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" outline />
--- a/app/src/modules/settings/routes/presets/detail.vue
+++ b/app/src/modules/settings/routes/presets/detail.vue
@@ -12,7 +12,7 @@
 		</template>

 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
--- 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>
+	<v-dialog active persistent @close="$router.push('/settings/roles')">
 		<v-card>
 			<v-card-title>
 				{{ $t('create_role') }}
--- a/app/src/modules/settings/routes/roles/detail/components/permissions-overview.vue
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview.vue
@@ -47,7 +47,7 @@
 			{{ $t('reset_system_permissions') }}
 		</button>

-		<v-dialog v-model="resetActive">
+		<v-dialog v-model="resetActive" @close="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>
--- a/app/src/modules/settings/routes/roles/detail/detail.vue
+++ b/app/src/modules/settings/routes/roles/detail/detail.vue
@@ -7,7 +7,7 @@
 			</v-button>
 		</template>
 		<template #actions>
-			<v-dialog v-model="confirmDelete" v-if="[1, 2].includes(+primaryKey) === false">
+			<v-dialog v-model="confirmDelete" v-if="[1, 2].includes(+primaryKey) === false" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
--- a/app/src/modules/settings/routes/webhooks/browse.vue
+++ b/app/src/modules/settings/routes/webhooks/browse.vue
@@ -15,7 +15,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />

-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" outline />
--- a/app/src/modules/settings/routes/webhooks/detail.vue
+++ b/app/src/modules/settings/routes/webhooks/detail.vue
@@ -9,7 +9,7 @@
 		</template>

 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" outline />
--- a/app/src/modules/users/routes/browse.vue
+++ b/app/src/modules/users/routes/browse.vue
@@ -17,7 +17,7 @@
 		<template #actions>
 			<search-input v-model="searchQuery" />

-			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" outline />
--- a/app/src/modules/users/routes/detail.vue
+++ b/app/src/modules/users/routes/detail.vue
@@ -11,7 +11,7 @@
 		</template>

 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
 						rounded
@@ -42,6 +42,7 @@
 			<v-dialog
 				v-if="collectionInfo.meta && collectionInfo.meta.archive_field && !isNew"
 				v-model="confirmArchive"
+				@close="confirmArchive = false"
 				:disabled="archiveAllowed === false"
 			>
 				<template #activator="{ on }">
@@ -129,7 +130,7 @@
 			/>
 		</div>

-		<v-dialog v-model="confirmLeave">
+		<v-dialog v-model="confirmLeave" @close="confirmLeave = false">
 			<v-card>
 				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
 				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
--- 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>
+	<v-dialog :active="active" @toggle="$listeners.toggle" persistent @close="cancel">
 		<template #activator="slotBinding">
 			<slot name="activator" v-bind="slotBinding" />
 		</template>
--- 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>
+	<v-dialog :active="active" @toggle="$listeners.toggle" persistent @close="cancel">
 		<template #activator="slotBinding">
 			<slot name="activator" v-bind="slotBinding" />
 		</template>
--- 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">
+		<v-dialog v-model="confirmDelete" @close="confirmDelete = false">
 			<v-card>
 				<v-card-title>{{ $t('delete_comment') }}</v-card-title>
 				<v-card-text>{{ $t('delete_are_you_sure') }}</v-card-text>
--- 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">
+	<v-dialog v-model="_active" @close="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
--- 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>
+	<v-modal v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @close="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
--- a/app/src/views/private/components/modal-browse/modal-browse.vue
+++ b/app/src/views/private/components/modal-browse/modal-browse.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="$t('select_item')" no-padding>
+	<v-modal v-model="_active" :title="$t('select_item')" no-padding @close="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
--- a/app/src/views/private/components/modal-detail/modal-detail.vue
+++ b/app/src/views/private/components/modal-detail/modal-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="title" persistent form-width>
+	<v-modal v-model="_active" :title="title" persistent form-width @close="cancel">
 		<template v-if="junctionField">
 			<v-form
 				:loading="loading"
--- 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">
+		<v-dialog v-model="signOutActive" @close="signOutActive = false">
 			<template #activator="{ on }">
 				<v-button
 					@click="on"
--- 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')">
+		<v-modal v-model="_active" :title="$t('item_revision')" @close="_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">
+		<v-dialog v-model="confirmRevert" :persistent="reverting" @close="confirmRevert = false">
 			<v-card>
 				<v-card-title>{{ $t('confirm_revert') }}</v-card-title>
 				<v-card-text>{{ $t('confirm_revert_body') }}</v-card-text>