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

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

Hide file tree

Showing 15 changed files with 119 additions and 33 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-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -75,7 +75,13 @@
 
 <script lang="ts">
 import { Yoco } from '@3yourmind/yoco'
-import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import {
+	computed,
+	defineComponent,
+	onMounted,
+	ref,
+	watch,
+} from '@vue/composition-api'
 import { z } from 'zod'
 
 import { KtField } from '../../kotti-field'
@@ -154,6 +160,16 @@ export default defineComponent({
 		const { isDropdownOpen, isDropdownMounted, ...selectTippy } =
 			useSelectTippy(field)
 
+		onMounted(() => {
+			const fieldInputContainer = document.getElementById(
+				`${field.inputProps.id}-input-container`,
+			)
+
+			if (!fieldInputContainer) return
+
+			selectTippy.setTriggerTarget(fieldInputContainer)
+		})
+
 		const deleteQuery = () => {
 			if (props.isRemote) {
 				if (props.query !== null) emit(UPDATE_QUERY, null)

diff --git a/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts b/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
@@ -71,10 +71,23 @@ export const useSelectTippy = <T>(field: KottiField.Hook.Returns<T>) => {
 		}
 	}
 
+	const setTriggerTarget = (triggerTarget: HTMLElement) => {
+		if (!tippy.value) return
+
+		const tippys = castArray(tippy.value)
+
+		for (const tippy of tippys) {
+			tippy.setProps({
+				triggerTarget,
+			})
+		}
+	}
+
 	return {
 		isDropdownMounted,
 		isDropdownOpen,
 		setIsDropdownOpen,
+		setTriggerTarget,
 		tippyContentRef,
 		tippyTriggerRef,
 	}

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()
 			},