feat: edit an existing custom type

web/src/components/DirectoryDialog.vue

@@ -2,7 +2,7 @@
 import { SHEET_CONTENT_CLASS, SHEET_FOOTER_CLASS } from '@/components/sheetClasses'
 import { t } from '@/i18n'
 
-import { computed } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import type { DirectoryNotice } from '@/lib/directoryTypes'
 
 const props = withDefaults(
@@ -17,6 +17,7 @@ const props = withDefaults(
 		notice?: DirectoryNotice | null
 		closable?: boolean
 		confirmDisabled?: boolean
+		wide?: boolean
 	}>(),
 	{
 		cancelLabel: '',
@@ -25,13 +26,30 @@ const props = withDefaults(
 		notice: null,
 		closable: false,
 		confirmDisabled: false,
+		wide: false,
 	},
 )
 
-const emit = defineEmits<{ confirm: []; close: [] }>()
+const emit = defineEmits<{ confirm: []; close: []; cancel: [] }>()
 
 const open = defineModel<boolean>('open', { default: true })
 
+const titleElement = ref<HTMLElement | null>(null)
+const contentClass = computed(
+	() =>
+		`${SHEET_CONTENT_CLASS} ${props.wide ? 'sm:top-15 sm:max-w-140' : 'sm:top-35 sm:max-w-115'}`,
+)
+
+watch(
+	() => props.pending,
+	async (value) => {
+		if (value) {
+			await nextTick()
+			titleElement.value?.focus()
+		}
+	},
+)
+
 const confirmText = computed(() => (props.pending ? props.pendingLabel : props.confirmLabel))
 const closeButton = computed(() =>
 	props.closable && !props.pending
@@ -50,6 +68,7 @@ function onOpenChange(value: boolean) {
 }
 
 function onCancel() {
+	emit('cancel')
 	onOpenChange(false)
 }
 </script>
@@ -66,8 +85,11 @@ function onCancel() {
 			'aria-busy': pending ? 'true' : undefined,
 		}"
 		:ui="{
-			content: `${SHEET_CONTENT_CLASS} sm:top-35 sm:max-w-115`,
-			header: 'min-h-0 px-6 pt-5 pb-0 sm:px-6',
+			content: contentClass,
+			header:
+				props.wide && props.closable
+					? 'min-h-0 px-6 pe-20 pt-5 pb-0 sm:px-6 sm:pe-16'
+					: 'min-h-0 px-6 pt-5 pb-0 sm:px-6',
 			title: 'text-lg/6 font-semibold',
 			description: 'mt-1 text-sm text-muted text-pretty',
 			body: 'px-6 pt-5 pb-0 sm:px-6 sm:pt-5 sm:pb-0',
@@ -75,6 +97,9 @@ function onCancel() {
 		}"
 		@update:open="onOpenChange"
 	>
+		<template #title>
+			<span ref="titleElement" tabindex="-1" class="outline-none">{{ title }}</span>
+		</template>
 		<template #body>
 			<div class="flex flex-col gap-4">
 				<UAlert
@@ -100,7 +125,10 @@ function onCancel() {
 					color="neutral"
 					variant="outline"
 					block
-					class="h-11 justify-center text-sm text-highlighted disabled:text-dimmed disabled:opacity-100 sm:h-8 sm:w-auto sm:px-3"
+					class="h-11 justify-center text-sm text-highlighted sm:h-8 sm:w-auto sm:px-3"
+					:class="
+						wide ? 'disabled:opacity-40' : 'disabled:text-dimmed disabled:opacity-100'
+					"
 					:disabled="pending"
 					@click="onCancel"
 				>
@@ -112,6 +140,7 @@ function onCancel() {
 					:disabled="pending || confirmDisabled"
 					block
 					class="h-11 justify-center text-sm sm:h-8 sm:w-auto sm:px-3"
+					:class="wide ? 'disabled:opacity-40' : ''"
 					@click="emit('confirm')"
 				>
 					{{ confirmText }}