refact(kt-field): refact label to reduce field interactivity

3YOURMIND · Dec 6, 2023 · d345f66 · d345f66
1 parent 75c13a1
commit d345f66
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 30 deletions.
diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue
@@ -90,6 +90,7 @@ export default defineComponent({
 					clearable: !field.hideClear,
 					'data-test': field.inputProps['data-test'],
 					disabled: field.isDisabled,
+					id: field.inputProps.id,
 					pickerOptions: pickerOptions.value,
 					placeholder: props.placeholder ?? '',
 					type: 'date',

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue
@@ -4,6 +4,7 @@
 		class="kt-field-date-range"
 		:getEmptyValue="() => [null, null]"
 		:helpTextSlot="$slots.helpText"
+		isRange
 	>
 		<div
 			ref="inputContainerRef"
@@ -98,6 +99,7 @@ export default defineComponent({
 					'data-test': field.inputProps['data-test'],
 					disabled: field.isDisabled,
 					endPlaceholder: props.placeholder[1] ?? '',
+					id: [`${field.inputProps.id}-start`, `${field.inputProps.id}-end`],
 					pickerOptions: pickerOptions.value,
 					startPlaceholder: props.placeholder[0] ?? '',
 					type: 'daterange',

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue
@@ -95,6 +95,7 @@ export default defineComponent({
 					clearable: !field.hideClear,
 					'data-test': field.inputProps['data-test'],
 					disabled: field.isDisabled,
+					id: field.inputProps.id,
 					pickerOptions: pickerOptions.value,
 					placeholder: props.placeholder ?? '',
 					type: 'datetime',

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue
@@ -4,6 +4,7 @@
 		class="kt-field-datetime-range"
 		:getEmptyValue="() => [null, null]"
 		:helpTextSlot="$slots.helpText"
+		isRange
 	>
 		<div
 			ref="inputContainerRef"
@@ -98,6 +99,7 @@ export default defineComponent({
 					'data-test': field.inputProps['data-test'],
 					disabled: field.isDisabled,
 					endPlaceholder: props.placeholder?.[1] ?? '',
+					id: [`${field.inputProps.id}-start`, `${field.inputProps.id}-end`],
 					pickerOptions: pickerOptions.value,
 					startPlaceholder: props.placeholder?.[0] ?? '',
 					type: 'datetimerange',

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue
@@ -9,6 +9,7 @@
 					collapseExtensionsAfter,
 					externalUrl,
 					icon,
+					inputId,
 					tabIndex,
 				}"
 				@addFiles="onAddFiles"
@@ -24,7 +25,7 @@
 					/>
 				</template>
 			</DropArea>
-			<div v-if="filesList.length" :style="filesListStyle" @click.stop.prevent>
+			<div v-if="filesList.length" :style="filesListStyle">
 				<FileItem
 					v-for="fileInfo in filesList"
 					v-bind="{
@@ -38,7 +39,6 @@
 			<div
 				v-if="preUploadedFilesList.length"
 				:style="preUploadedFilesListStyle"
-				@click.stop.prevent
 			>
 				<PreUploadedFileItem
 					v-for="fileInfo in preUploadedFilesList"
@@ -146,6 +146,7 @@ export default defineComponent({
 			filesListStyle: computed(() =>
 				showDropArea.value ? { 'padding-top': 'var(--unit-4)' } : undefined,
 			),
+			inputId: computed(() => field.inputProps.id),
 			onAddFiles: (value: Shared.Events.AddFiles) => {
 				if (props.allowMultiple)
 					field.setValue([

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUploadRemote.vue b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUploadRemote.vue
@@ -9,6 +9,7 @@
 					collapseExtensionsAfter,
 					externalUrl,
 					icon,
+					inputId,
 					tabIndex,
 				}"
 				@addFiles="onAddFiles"
@@ -24,7 +25,7 @@
 					/>
 				</template>
 			</DropArea>
-			<div v-if="filesList.length" :style="filesListStyle" @click.stop.prevent>
+			<div v-if="filesList.length" :style="filesListStyle">
 				<FileItemRemote
 					v-for="fileInfo in filesList"
 					v-bind="{
@@ -38,7 +39,6 @@
 			<div
 				v-if="preUploadedFilesList.length"
 				:style="preUploadedFilesListStyle"
-				@click.stop.prevent
 			>
 				<PreUploadedFileItem
 					v-for="fileInfo in preUploadedFilesList"
@@ -215,6 +215,7 @@ export default defineComponent({
 			filesListStyle: computed(() =>
 				showDropArea.value ? { 'padding-top': 'var(--unit-4)' } : undefined,
 			),
+			inputId: computed(() => field.inputProps.id),
 			onAddFiles: (value: Shared.Events.AddFiles) => {
 				if (props.allowMultiple)
 					field.setValue([

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,11 +3,12 @@
 		:class="classes"
 		:data-test="dataTest ? `${dataTest}.dropArea` : undefined"
 		:tabIndex="_tabIndex"
+		@click.stop="onTriggerInput"
 		@dragleave.stop.prevent="onDragLeave"
 		@dragover.stop.prevent="onDragOver"
 		@drop.stop.prevent="onDrop"
-		@keydown.enter.stop.prevent="uploadInputRef.click()"
-		@keydown.space.stop.prevent="uploadInputRef.click()"
+		@keydown.enter.stop.prevent="onTriggerInput"
+		@keydown.space.stop.prevent="onTriggerInput"
 		@mouseenter.stop.prevent="isHovering = true"
 		@mouseleave.stop.prevent="isHovering = false"
 	>
@@ -33,11 +34,7 @@
 		<input
 			v-show="false"
 			ref="uploadInputRef"
-			:accept="accept"
-			:data-test="dataTest ? `${dataTest}.input` : undefined"
-			:disabled="isDisabled"
-			:multiple="allowMultiple"
-			type="file"
+			v-bind="inputProps"
 			@change="onSelect"
 		/>
 		<div
@@ -122,6 +119,14 @@ export default defineComponent({
 					(isDragging.value || isHovering.value),
 			})),
 			informationText,
+			inputProps: computed(() => ({
+				accept: 'accept',
+				'data-test': props.dataTest ? `${props.dataTest}.input` : undefined,
+				disabled: props.isDisabled,
+				id: props.inputId,
+				multiple: props.allowMultiple,
+				type: 'file',
+			})),
 			isError,
 			isHovering,
 			onDragLeave: () => {
@@ -145,6 +150,7 @@ export default defineComponent({
 				const target = event.target as HTMLInputElement
 				emitFiles(target.files)
 			},
+			onTriggerInput: () => uploadInputRef.value?.click(),
 			showInformation: computed(
 				() => informationText.value || props.externalUrl,
 			),

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/types.ts b/packages/kotti-ui/source/kotti-field-file-upload/types.ts
@@ -82,17 +82,21 @@ export namespace Shared {
 	}
 
 	export namespace DropArea {
-		export const schema = propsSchema.pick({
-			allowMultiple: true,
-			collapseExtensionsAfter: true,
-			dataTest: true,
-			extensions: true,
-			externalUrl: true,
-			icon: true,
-			isDisabled: true,
-			maxFileSize: true,
-			tabIndex: true,
-		})
+		export const schema = propsSchema
+			.pick({
+				allowMultiple: true,
+				collapseExtensionsAfter: true,
+				dataTest: true,
+				extensions: true,
+				externalUrl: true,
+				icon: true,
+				isDisabled: true,
+				maxFileSize: true,
+				tabIndex: true,
+			})
+			.extend({
+				inputId: z.string(),
+			})
 		export type Props = z.output<typeof schema>
 	}
 

diff --git a/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue b/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue
@@ -63,7 +63,7 @@ import {
 import Big from 'big.js'
 
 import { KtField } from '../kotti-field'
-import { useField, useForceUpdate } from '../kotti-field/hooks'
+import { useFocusInput, useField, useForceUpdate } from '../kotti-field/hooks'
 import { useI18nContext } from '../kotti-i18n/hooks'
 import { KottiI18n } from '../kotti-i18n/types'
 import { makeProps } from '../make-props'
@@ -97,6 +97,7 @@ export default defineComponent({
 			supports: KOTTI_FIELD_NUMBER_SUPPORTS,
 		})
 
+		const { focusInput } = useFocusInput(field.inputProps.id)
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
 
 		const i18nContext = useI18nContext()
@@ -229,6 +230,7 @@ export default defineComponent({
 						: props.minimum ?? props.maximum ?? 0
 					: Big(field.currentValue).minus(props.step).toNumber(),
 			)
+			focusInput()
 		}
 
 		const incrementValue = () => {
@@ -241,6 +243,7 @@ export default defineComponent({
 						: props.minimum ?? props.maximum ?? 0
 					: Big(field.currentValue).add(props.step).toNumber(),
 			)
+			focusInput()
 		}
 
 		const wrapperRef = ref<HTMLDivElement | null>(null)

diff --git a/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue b/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue
@@ -3,14 +3,13 @@
 		v-bind="{ field: fieldProps }"
 		:helpTextSlot="showInnerSuffix ? undefined : $slots.helpText"
 	>
-		<div slot="container" class="kt-field-toggle">
+		<div slot="container" class="kt-field-toggle" @click.prevent="onInput">
 			<ToggleInner
 				component="div"
 				:inputProps="inputProps"
 				:isDisabled="fieldProps.isDisabled"
 				:type="type"
 				:value="fieldProps.currentValue"
-				@input="onInput"
 			>
 				<div class="kt-field-toggle__content">
 					<slot name="default" :value="fieldProps.currentValue" />
@@ -71,8 +70,10 @@ export default defineComponent({
 				...field.inputProps,
 				forceUpdateKey: forceUpdateKey.value,
 			})),
-			onInput: (newValue: boolean | undefined) => {
-				field.setValue(newValue ?? null)
+			onInput: () => {
+				if (props.isDisabled) return
+
+				field.setValue(!field.currentValue)
 
 				forceUpdate()
 			},

diff --git a/packages/kotti-ui/source/kotti-field/KtField.vue b/packages/kotti-ui/source/kotti-field/KtField.vue
@@ -1,16 +1,17 @@
 <template>
 	<div class="kt-field">
 		<component
-			:is="isGroup ? 'fieldset' : isComponent ? isComponent : 'label'"
+			:is="isGroup ? 'fieldset' : isComponent ? isComponent : 'div'"
 			:class="wrapperClasses"
 			@click="$emit('click', $event)"
 			@mousedown="$emit('mousedown', $event)"
 		>
 			<div v-if="hasLabel || hasHelpText" class="kt-field__header">
 				<component
-					:is="isGroup ? 'legend' : 'div'"
+					:is="isGroup ? 'legend' : 'label'"
 					v-if="hasLabel"
 					class="kt-field__header__label"
+					:for="inputId"
 				>
 					<span class="kt-field__header__label__text" v-text="field.label" />
 					<span :class="labelSuffixClasses" v-text="labelSuffix" />
@@ -43,7 +44,11 @@
 					<slot name="container-left" />
 				</div>
 				<slot name="container">
-					<div ref="inputContainerRef" class="kt-field__input-container">
+					<div
+						ref="inputContainerRef"
+						class="kt-field__input-container"
+						@click="focusInput"
+					>
 						<div
 							v-if="field.prefix"
 							:class="affixClasses(['left'])"
@@ -112,6 +117,7 @@ import { VNode } from 'vue'
 import { useTranslationNamespace } from '../kotti-i18n/hooks'
 
 import FieldHelpText from './components/FieldHelpText.vue'
+import { useFocusInput } from './hooks'
 import { KottiField } from './types'
 
 export default defineComponent({
@@ -127,19 +133,22 @@ export default defineComponent({
 		helpTextSlot: { default: () => [], type: Array },
 		isComponent: { default: null, type: String },
 		isGroup: { default: false, type: Boolean },
+		isRange: { default: false, type: Boolean },
 	},
 	setup(props: {
 		field: KottiField.Hook.Returns<unknown>
 		helpTextSlot: VNode[]
 		isComponent: string | null
 		isGroup: boolean
+		isRange: boolean
 		getEmptyValue: () => unknown
 	}) {
 		const validationType = computed(() => props.field.validation.type)
 		const showValidation = computed(
 			() => !(props.field.hideValidation || validationType.value === 'empty'),
 		)
 
+		const { focusInput } = useFocusInput(props.field.inputProps.id)
 		const translations = useTranslationNamespace('KtFields')
 
 		return {
@@ -149,6 +158,7 @@ export default defineComponent({
 					(modification) => `kt-field__input-container__affix--${modification}`,
 				),
 			]),
+			focusInput,
 			handleClear: () => {
 				/**
 				 * useSupports hook returns null if hideClear is not supported on ktField component
@@ -159,6 +169,7 @@ export default defineComponent({
 					)
 
 				props.field.setValue(props.getEmptyValue())
+				focusInput()
 			},
 			hasHelpText: computed(
 				() => props.helpTextSlot.length >= 1 || props.field.helpText !== null,
@@ -174,6 +185,13 @@ export default defineComponent({
 					],
 			),
 			inputContainerRef: ref<Element | null>(null),
+			inputId: computed(() =>
+				props.isGroup
+					? undefined
+					: props.isRange
+					? `${props.field.inputProps.id}-start`
+					: props.field.inputProps.id,
+			),
 			labelSuffix: computed(() =>
 				props.field.isOptional ? `(${translations.value.optionalLabel})` : '*',
 			),
@@ -381,6 +399,7 @@ we would be able to extend on demand instead of unscoping all field classes -->
 		// Prefix and Suffix
 		&__affix {
 			color: var(--text-02);
+			cursor: default;
 
 			&--left {
 				padding-right: 0.8rem;
@@ -411,6 +430,11 @@ we would be able to extend on demand instead of unscoping all field classes -->
 				display: flex;
 			}
 
+			&--left,
+			&--right {
+				cursor: default;
+			}
+
 			&--left {
 				transform: translateX(-0.2rem);
 			}