feat(kt-form-fields): add blur event support to form fields

3YOURMIND · Feb 14, 2025 · 3c9f6d9 · 3c9f6d9
1 parent f27e2bc
commit 3c9f6d9
Show file tree

Hide file tree

Showing 13 changed files with 163 additions and 25 deletions.
diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
@@ -188,9 +188,9 @@
 							<h4>Events</h4>
 							<KtFieldToggle
 								formKey="emitBlur"
-								helpText="Only works with KtFieldNumber for now"
+								helpText="Support Varies"
 								isOptional
-								label="Show blur event toasts (documentation-only)"
+								label="Listen for blur events (shows a toast in documentation only)"
 								type="switch"
 							/>
 						</div>
@@ -809,7 +809,12 @@ const saveSavedFieldsToLocalStorage = (savedFields: Array<unknown>) => {
 	}
 }
 
-const DATE_ADDITIONAL_PROPS = ['maximumDate', 'minimumDate', 'shortcuts']
+const DATE_ADDITIONAL_PROPS = [
+	'emitEvents',
+	'maximumDate',
+	'minimumDate',
+	'shortcuts',
+]
 const FILE_UPLOAD_SHARED_PROPS = [
 	'allowMultiple',
 	'allowPhotos',
@@ -828,7 +833,12 @@ const components: Array<{
 	supports: Kotti.Field.Supports
 }> = [
 	{
-		additionalProps: ['currencyCurrency', 'numberMaximum', 'numberMinimum'],
+		additionalProps: [
+			'currencyCurrency',
+			'emitEvents',
+			'numberMaximum',
+			'numberMinimum',
+		],
 		formKey: 'currencyValue',
 		name: 'KtFieldCurrency',
 		supports: KtFieldCurrency.meta.supports,
@@ -858,7 +868,7 @@ const components: Array<{
 		supports: KtFieldDateTimeRange.meta.supports,
 	},
 	{
-		additionalProps: [...FILE_UPLOAD_SHARED_PROPS],
+		additionalProps: [...FILE_UPLOAD_SHARED_PROPS, 'emitEvents'],
 		formKey: 'fileUploadValue',
 		name: 'KtFieldFileUpload',
 		supports: KtFieldFileUpload.meta.supports,
@@ -874,6 +884,7 @@ const components: Array<{
 			'actions',
 			'clearOnSelect',
 			'collapseTagsAfter',
+			'emitEvents',
 			'hasOptionSlot',
 			'isUnsorted',
 			'maximumSelectable',
@@ -887,6 +898,7 @@ const components: Array<{
 			'actions',
 			'clearOnSelect',
 			'collapseTagsAfter',
+			'emitEvents',
 			'hasOptionSlot',
 			'isLoadingOptions',
 			'isUnsorted',
@@ -912,7 +924,7 @@ const components: Array<{
 		supports: KtFieldNumber.meta.supports,
 	},
 	{
-		additionalProps: ['showVisibilityToggle'],
+		additionalProps: ['emitEvents', 'showVisibilityToggle'],
 		formKey: 'textValue',
 		name: 'KtFieldPassword',
 		supports: KtFieldPassword.meta.supports,
@@ -929,14 +941,15 @@ const components: Array<{
 		supports: KtFieldRadioGroup.meta.supports,
 	},
 	{
-		additionalProps: ['actions', 'hasOptionSlot', 'isUnsorted'],
+		additionalProps: ['actions', 'emitEvents', 'hasOptionSlot', 'isUnsorted'],
 		formKey: 'singleSelectValue',
 		name: 'KtFieldSingleSelect',
 		supports: KtFieldSingleSelect.meta.supports,
 	},
 	{
 		additionalProps: [
 			'actions',
+			'emitEvents',
 			'hasOptionSlot',
 			'isLoadingOptions',
 			'isUnsorted',
@@ -947,13 +960,13 @@ const components: Array<{
 		supports: KtFieldSingleSelectRemote.meta.supports,
 	},
 	{
-		additionalProps: [],
+		additionalProps: ['emitEvents'],
 		formKey: 'textValue',
 		name: 'KtFieldText',
 		supports: KtFieldText.meta.supports,
 	},
 	{
-		additionalProps: ['autoSize', 'maxHeight', 'rows'],
+		additionalProps: ['autoSize', 'emitEvents', 'maxHeight', 'rows'],
 		formKey: 'textValue',
 		name: 'KtFieldTextArea',
 		supports: KtFieldTextArea.meta.supports,
@@ -1305,7 +1318,7 @@ export default defineComponent({
 			component: initialComponentName ?? 'KtFieldText',
 			dataTest: null,
 			decimalSeparator: Kotti.DecimalSeparator.DOT,
-			emitBlur: false,
+			emitBlur: true,
 			formId: null,
 			hasHelpTextSlot: false,
 			helpDescription: null,
@@ -1804,7 +1817,7 @@ export default defineComponent({
 			onBlur: (value: number) => {
 				if (settings.value.emitBlur)
 					info({
-						text: `@blur: ${String(value)}`,
+						text: `@blur: ${JSON.stringify(value)}`,
 					})
 			},
 			onSubmit: (values: Record<string, unknown>) => {

diff --git a/packages/kotti-ui/source/kotti-field-currency/KtFieldCurrency.vue b/packages/kotti-ui/source/kotti-field-currency/KtFieldCurrency.vue
@@ -1,6 +1,6 @@
 <template>
 	<KtField :field="modifiedField" :helpTextSlot="$slots.helpText">
-		<input ref="inputRef" v-bind="inputProps" @input="onInput" />
+		<input ref="inputRef" v-bind="inputProps" @blur="onBlur" @input="onInput" />
 	</KtField>
 </template>
 
@@ -47,6 +47,7 @@ export default defineComponent({
 	name: 'KtFieldCurrency',
 	components: { KtField },
 	props: makeProps(KottiFieldCurrency.propsSchema),
+	emits: ['blur', 'input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldCurrency.Value>({
 			emit,
@@ -179,6 +180,9 @@ export default defineComponent({
 				...field,
 				prefix: currencyFormat.value.symbol,
 			})),
+			onBlur: () => {
+				emit('blur', field.currentValue)
+			},
 			onInput: (event: Event) => {
 				const value = (event.target as HTMLInputElement).value
 

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue
@@ -8,7 +8,12 @@
 	>
 		<template #container>
 			<div ref="inputContainerRef" class="kt-field__input-container">
-				<ElDate ref="elDateRef" v-bind="elDatePickerProps" @input="onInput" />
+				<ElDate
+					ref="elDateRef"
+					v-bind="elDatePickerProps"
+					@blur="onBlur"
+					@input="onInput"
+				/>
 			</div>
 		</template>
 	</KtField>
@@ -38,6 +43,7 @@ export default defineComponent({
 	name: 'KtFieldDate',
 	components: { ElDate, KtField },
 	props: makeProps(KottiFieldDate.propsSchema),
+	emits: ['blur', 'input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldDate.Value>({
 			emit,
@@ -100,6 +106,9 @@ export default defineComponent({
 			elDateRef: elDateRef as any,
 			field,
 			inputContainerRef,
+			onBlur: () => {
+				emit('blur', field.currentValue)
+			},
 			onInput: (value: KottiFieldDate.Value) => {
 				if (!field.isDisabled && !field.isLoading) field.setValue(value)
 			},

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue
@@ -12,6 +12,7 @@
 				<ElDate
 					ref="elDateRef"
 					v-bind="elDateRangePickerProps"
+					@blur="onBlur"
 					@input="onInput"
 				/>
 			</div>
@@ -47,6 +48,7 @@ export default defineComponent({
 	name: 'KtFieldDateRange',
 	components: { ElDate, KtField },
 	props: makeProps(KottiFieldDateRange.propsSchema),
+	emits: ['blur', 'input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldDateRange.Value>({
 			emit,
@@ -112,6 +114,9 @@ export default defineComponent({
 			elDateRef: elDateRef as any,
 			field,
 			inputContainerRef,
+			onBlur: () => {
+				emit('blur', field.currentValue)
+			},
 			onInput: (value: KottiFieldDateRange.Value | null) => {
 				if (field.isDisabled || field.isLoading) return
 

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue
@@ -11,6 +11,7 @@
 				<ElDate
 					ref="elDateRef"
 					v-bind="elDateTimePickerProps"
+					@blur="onBlur"
 					@input="onInput"
 				/>
 			</div>
@@ -42,6 +43,7 @@ export default defineComponent({
 	name: 'KtFieldDateTime',
 	components: { ElDate, KtField },
 	props: makeProps(KottiFieldDateTime.propsSchema),
+	emits: ['blur', 'input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldDateTime.Value>({
 			emit,
@@ -105,6 +107,9 @@ export default defineComponent({
 			),
 			field,
 			inputContainerRef,
+			onBlur: () => {
+				emit('blur', field.currentValue)
+			},
 			onInput: (value: KottiFieldDateTime.Value) => {
 				if (!field.isDisabled && !field.isLoading) field.setValue(value)
 			},

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue
@@ -12,6 +12,7 @@
 				<ElDate
 					ref="elDateRef"
 					v-bind="elDateTimeRangePickerProps"
+					@blur="onBlur"
 					@input="onInput"
 				/>
 			</div>
@@ -47,6 +48,7 @@ export default defineComponent({
 	name: 'KtFieldDateTimeRange',
 	components: { ElDate, KtField },
 	props: makeProps(KottiFieldDateTimeRange.propsSchema),
+	emits: ['blur', 'input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldDateTimeRange.Value>({
 			emit,
@@ -112,6 +114,9 @@ export default defineComponent({
 			),
 			field,
 			inputContainerRef,
+			onBlur: () => {
+				emit('blur', field.currentValue)
+			},
 			onInput: (value: KottiFieldDateTimeRange.Value | null) => {
 				if (field.isDisabled || field.isLoading) return
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue
@@ -18,6 +18,7 @@
 						tabIndex,
 					}"
 					@addFiles="onAddFiles"
+					@blur="onBlur"
 				>
 					<template #footer>
 						<TakePhoto
@@ -87,6 +88,7 @@ export default defineComponent({
 		TakePhoto,
 	},
 	props: makeProps(KottiFieldFileUpload.propsSchema),
+	emits: ['blur', 'input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldFileUpload.ValueInternal>({
 			emit,
@@ -164,6 +166,9 @@ export default defineComponent({
 					])
 				else field.setValue([buildFileItem(value[0] as File)])
 			},
+			onBlur: () => {
+				emit('blur', field.currentValue)
+			},
 			onRemoveFile: (id: Shared.Events.RemoveFile) => {
 				field.setValue(
 					field.currentValue.filter((fileItem) => fileItem.id !== id),

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue
@@ -3,6 +3,7 @@
 		:class="classes"
 		:data-test="dataTest ? `${dataTest}.dropArea` : undefined"
 		:tabIndex="localTabIndex"
+		@blur="onBlur"
 		@click.stop="onTriggerInput"
 		@dragleave.stop.prevent="onDragLeave"
 		@dragover.stop.prevent="onDragOver"
@@ -35,6 +36,7 @@
 			v-show="false"
 			ref="uploadInputRef"
 			v-bind="inputProps"
+			@cancel="onCancelSelect"
 			@change="onSelect"
 		/>
 		<div
@@ -69,13 +71,14 @@ import { isSelectingMultipleFilesWhenNotAllowed } from '../validators'
 export default defineComponent({
 	name: 'DropArea',
 	props: makeProps(Shared.DropArea.schema),
-	emits: ['addFiles'],
+	emits: ['addFiles', 'blur'],
 	setup(props, { emit }) {
 		const translations = useTranslationNamespace('KtFieldFileUpload')
 
 		const isDragging = ref<boolean>(false)
 		const isError = ref<boolean>(false)
 		const isHovering = ref<boolean>(false)
+		const isSelecting = ref<boolean>(false)
 		const uploadInputRef = ref<HTMLInputElement | null>(null)
 
 		const informationText = computed(() =>
@@ -104,6 +107,7 @@ export default defineComponent({
 
 			const payload: Shared.Events.AddFiles = Array.from(files)
 			emit('addFiles', payload)
+			isSelecting.value = false
 		}
 
 		return {
@@ -128,7 +132,17 @@ export default defineComponent({
 			})),
 			isError,
 			isHovering,
-			localTabIndex: computed(() => (props.isDisabled ? -1 : props.tabIndex)),
+			localTabIndex: computed(() =>
+				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+				props.isDisabled ? -1 : (props.tabIndex ?? 0),
+			),
+			onBlur: () => {
+				if (isSelecting.value) return
+				emit('blur')
+			},
+			onCancelSelect: () => {
+				isSelecting.value = false
+			},
 			onDragLeave: () => {
 				isDragging.value = false
 				isError.value = false
@@ -154,6 +168,7 @@ export default defineComponent({
 				if (uploadInputRef.value === null)
 					throw new Error('uploadInputRef is null')
 
+				isSelecting.value = true
 				uploadInputRef.value.click()
 			},
 			showInformation: computed(

diff --git a/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue b/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue
@@ -5,7 +5,7 @@
 		:helpTextSlot="$slots.helpText"
 		@visibilityChange="handleVisibilityChange"
 	>
-		<input v-bind="inputProps" @input="onInput" />
+		<input v-bind="inputProps" @blur="onBlur" @input="onInput" />
 	</KtField>
 </template>
 
@@ -24,7 +24,7 @@ export default defineComponent({
 	name: 'KtFieldPassword',
 	components: { KtField },
 	props: makeProps(KottiFieldPassword.propsSchema),
-	emits: ['input'],
+	emits: ['blur', 'input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldPassword.Value>({
 			emit,
@@ -55,6 +55,9 @@ export default defineComponent({
 					value: field.currentValue ?? '',
 				}),
 			),
+			onBlur: () => {
+				emit('blur', field.currentValue === null ? null : '•••')
+			},
 			onInput: (event: Event) => {
 				const newValue = (event.target as HTMLInputElement).value
 				field.setValue(newValue === '' ? null : newValue)