refactor: format AppNavigationForm.vue

Signed-off-by: don9x2E <revan@kakao.com>

[skip ci]

Author: don9x2E

src/components/AppNavigationForm.vue

@@ -86,21 +86,12 @@
 				v-if="canEdit && !readOnly"
 				close-after-click
 				:disabled="isFormLocked"
-				@click="showDeleteDialog = true">
+				@click="onConfirmDelete">
 				<template #icon>
 					<IconDelete :size="20" />
 				</template>
 				{{ t('forms', 'Delete form') }}
 			</NcActionButton>
-			<NcDialog
-				:open.sync="showDeleteDialog"
-				:name="t('forms', 'Delete form')"
-				:message="
-					t('forms', 'Are you sure you want to delete {title}?', {
-						title: formTitle,
-					})
-				"
-				:buttons="buttons" />
 		</template>
 	</NcListItem>
 </template>
@@ -112,7 +103,6 @@ import { showError } from '@nextcloud/dialogs'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
-import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import axios from '@nextcloud/axios'
@@ -150,7 +140,6 @@ export default {
 		NcActionButton,
 		NcActionRouter,
 		NcActionSeparator,
-		NcDialog,
 		NcListItem,
 		NcLoadingIcon,
 	},
@@ -176,17 +165,6 @@ export default {
 	data() {
 		return {
 			loading: false,
-			showDeleteDialog: false,
-			buttons: [
-				{
-					label: t('forms', 'Delete form'),
-					icon: IconDeleteSvg,
-					type: 'error',
-					callback: () => {
-						this.onDeleteForm()
-					},
-				},
-			],
 		}
 	},
 
@@ -306,6 +284,33 @@ export default {
 			this.$emit('clone', this.form.id)
 		},
 
+		async onConfirmDelete() {
+			const dialog = getDialogBuilder(t('forms', 'Delete form'))
+				.setText(
+					t('forms', 'Are you sure you want to delete {title}?', {
+						title: this.formTitle,
+					}),
+				)
+				.setSeverity(DialogSeverity.Error)
+				.setButtons([
+					{
+						label: t('forms', 'Cancel'),
+						callback: () => {},
+						variant: 'secondary',
+					},
+					{
+						label: t('forms', 'Delete form'),
+						callback: () => {
+							this.onDeleteForm()
+						},
+						variant: 'error',
+					},
+				])
+				.build()
+
+			await dialog.show()
+		},
+
 		async onToggleArchive() {
 			try {
 				// TODO: add loading status feedback ?