feat(kt-fields-kt-field-inline-edit): add autoComplete prop

packages/documentation/pages/usage/components/field-inline-edit.vue

@@ -68,8 +68,26 @@
 							isOptional
 							label="helpDescription"
 						/>
+						<KtFieldText formKey="helpText" isOptional label="helpText" />
 						<div class="field-row">
-							<KtFieldText formKey="helpText" isOptional label="helpText" />
+							<KtFieldSingleSelect
+								formKey="autoComplete"
+								helpText="Support Varies"
+								isUnsorted
+								label="autoComplete"
+								:options="[
+									{ label: 'off', value: 'off' },
+									{ label: 'on', value: 'on' },
+									{ label: '<token>', value: 'token' },
+								]"
+							/>
+							<KtFieldText
+								v-if="settings.autoComplete === 'token'"
+								formKey="autoCompleteToken"
+								helpText="A space-separated <token-list> that describes the meaning of the autocompletion value. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values"
+								isOptional
+								label="<token>"
+							/>
 						</div>
 					</div>
 				</div>
@@ -101,6 +119,8 @@ export default defineComponent({
 		const getInitialValue = () => ({ fieldValue: null })
 
 		const settings = ref<{
+			autoComplete: string
+			autoCompleteToken: Kotti.FieldText.Value
 			booleanFlags: {
 				hideValidation: Kotti.FieldToggle.Value
 				isDisabled: Kotti.FieldToggle.Value
@@ -119,6 +139,8 @@ export default defineComponent({
 			textStyle: Kotti.FieldInlineEdit.TextStyle | null
 			validation: Kotti.Field.Validation.Result['type'] | null
 		}>({
+			autoComplete: 'off',
+			autoCompleteToken: null,
 			booleanFlags: {
 				hideValidation: false,
 				isDisabled: false,
@@ -147,6 +169,10 @@ export default defineComponent({
 			formValue,
 			fieldValue: computed(() => formValue.value.fieldValue),
 			fieldProps: computed(() => ({
+				autoComplete:
+					settings.value.autoComplete === 'token'
+						? settings.value.autoCompleteToken
+						: settings.value.autoComplete,
 				dataTest: settings.value.dataTest,
 				helpDescription: settings.value.helpDescription,
 				helpText: settings.value.helpText,

packages/documentation/pages/usage/components/form-fields.vue

@@ -307,17 +307,27 @@
 								label="actions"
 								type="switch"
 							/>
-							<KtFieldSingleSelect
+							<div
 								v-if="
 									componentDefinition.additionalProps.includes('autoComplete')
 								"
-								formKey="autoComplete"
-								label="autoComplete"
-								:options="[
-									{ label: 'current-password', value: 'current-password' },
-									{ label: 'new-password', value: 'new-password' },
-								]"
-							/>
+								class="field-row"
+							>
+								<KtFieldSingleSelect
+									formKey="autoComplete"
+									helpText="Support Varies"
+									isUnsorted
+									label="autoComplete"
+									:options="autoCompleteOptions"
+								/>
+								<KtFieldText
+									v-if="settings.additionalProps.autoComplete === 'token'"
+									formKey="autoCompleteToken"
+									helpText="A space-separated <token-list> that describes the meaning of the autocompletion value. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values"
+									isOptional
+									label="<token>"
+								/>
+							</div>
 							<KtFieldNumber
 								v-if="
 									componentDefinition.additionalProps.includes(
@@ -752,7 +762,7 @@ import {
 import { Yoco } from '@3yourmind/yoco'
 import { TimeConversion } from '@metatypes/units'
 import cloneDeep from 'lodash/cloneDeep.js'
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 
 import { useRouter } from '../../../hooks/use-router'
 import {
@@ -806,7 +816,12 @@ const components: Array<{
 	supports: Kotti.Field.Supports
 }> = [
 	{
-		additionalProps: ['currencyCurrency', 'numberMaximum', 'numberMinimum'],
+		additionalProps: [
+			'autoComplete',
+			'currencyCurrency',
+			'numberMaximum',
+			'numberMinimum',
+		],
 		formKey: 'currencyValue',
 		name: 'KtFieldCurrency',
 		supports: KtFieldCurrency.meta.supports,
@@ -850,6 +865,7 @@ const components: Array<{
 	{
 		additionalProps: [
 			'actions',
+			'autoComplete',
 			'clearOnSelect',
 			'collapseTagsAfter',
 			'hasOptionSlot',
@@ -863,6 +879,7 @@ const components: Array<{
 	{
 		additionalProps: [
 			'actions',
+			'autoComplete',
 			'clearOnSelect',
 			'collapseTagsAfter',
 			'hasOptionSlot',
@@ -877,6 +894,7 @@ const components: Array<{
 	},
 	{
 		additionalProps: [
+			'autoComplete',
 			'numberDecimalPlaces',
 			'numberHideChangeButtons',
 			'numberHideMaximum',
@@ -907,14 +925,15 @@ const components: Array<{
 		supports: KtFieldRadioGroup.meta.supports,
 	},
 	{
-		additionalProps: ['actions', 'hasOptionSlot', 'isUnsorted'],
+		additionalProps: ['autoComplete', 'actions', 'hasOptionSlot', 'isUnsorted'],
 		formKey: 'singleSelectValue',
 		name: 'KtFieldSingleSelect',
 		supports: KtFieldSingleSelect.meta.supports,
 	},
 	{
 		additionalProps: [
 			'actions',
+			'autoComplete',
 			'hasOptionSlot',
 			'isLoadingOptions',
 			'isUnsorted',
@@ -925,13 +944,13 @@ const components: Array<{
 		supports: KtFieldSingleSelectRemote.meta.supports,
 	},
 	{
-		additionalProps: [],
+		additionalProps: ['autoComplete'],
 		formKey: 'textValue',
 		name: 'KtFieldText',
 		supports: KtFieldText.meta.supports,
 	},
 	{
-		additionalProps: ['autoSize', 'maxHeight', 'rows'],
+		additionalProps: ['autoComplete', 'autoSize', 'maxHeight', 'rows'],
 		formKey: 'textValue',
 		name: 'KtFieldTextArea',
 		supports: KtFieldTextArea.meta.supports,
@@ -1166,7 +1185,8 @@ export default defineComponent({
 			additionalProps: {
 				allowMultiple: Kotti.FieldToggle.Value
 				allowPhotos: Kotti.FieldToggle.Value
-				autoComplete: 'current-password' | 'new-password'
+				autoComplete: string
+				autoCompleteToken: Kotti.FieldText.Value
 				autoSize: Kotti.FieldToggle.Value
 				clearOnSelect: Kotti.FieldToggle.Value
 				collapseExtensionsAfter: Kotti.FieldNumber.Value
@@ -1232,7 +1252,8 @@ export default defineComponent({
 			additionalProps: {
 				allowMultiple: false,
 				allowPhotos: false,
-				autoComplete: 'current-password',
+				autoComplete: 'off',
+				autoCompleteToken: null,
 				autoSize: false,
 				clearOnSelect: false,
 				collapseExtensionsAfter: null,
@@ -1385,7 +1406,10 @@ export default defineComponent({
 
 			if (componentDefinition.value.additionalProps.includes('autoComplete'))
 				Object.assign(additionalProps, {
-					autoComplete: settings.value.additionalProps.autoComplete,
+					autoComplete:
+						settings.value.additionalProps.autoComplete === 'token'
+							? settings.value.additionalProps.autoCompleteToken
+							: settings.value.additionalProps.autoComplete,
 				})
 			if (
 				componentDefinition.value.additionalProps.includes(
@@ -1670,7 +1694,50 @@ export default defineComponent({
 			}),
 		)
 
+		watch(
+			() => settings.value.component,
+			(newComponent, oldComponent) => {
+				if (
+					newComponent === 'KtFieldPassword' &&
+					oldComponent !== 'KtFieldPassword'
+				)
+					settings.value = {
+						...settings.value,
+						additionalProps: {
+							...settings.value.additionalProps,
+							autoComplete: 'current-password',
+						},
+					}
+				else if (
+					newComponent !== 'KtFieldPassword' &&
+					oldComponent === 'KtFieldPassword'
+				)
+					settings.value = {
+						...settings.value,
+						additionalProps: {
+							...settings.value.additionalProps,
+							autoComplete: 'off',
+						},
+					}
+			},
+		)
+
 		return {
+			autoCompleteOptions: computed(() =>
+				settings.value.component === 'KtFieldPassword'
+					? [
+							{
+								label: 'current-password',
+								value: 'current-password',
+							},
+							{ label: 'new-password', value: 'new-password' },
+						]
+					: [
+							{ label: 'off', value: 'off' },
+							{ label: 'on', value: 'on' },
+							{ label: '<token>', value: 'token' },
+						],
+			),
 			component: computed(
 				(): { meta: Kotti.Meta; name: string } =>
 					(

packages/kotti-ui/source/kotti-field-currency/KtFieldCurrency.vue

@@ -166,6 +166,7 @@ export default defineComponent({
 					forceUpdateKey: number
 				} => ({
 					...field.inputProps,
+					autocomplete: props.autoComplete,
 					class: {
 						'kt-field-currency__input': true,
 					},

packages/kotti-ui/source/kotti-field-currency/constants.ts

@@ -2,6 +2,7 @@ import type { KottiField } from '../kotti-field/types'
 import { DECIMAL_SEPARATORS_CHARACTER_SET } from '../utilities'
 
 export const KOTTI_FIELD_CURRENCY_SUPPORTS: KottiField.Supports = {
+	autoComplete: true,
 	clear: false,
 	decoration: false,
 	placeholder: true,

packages/kotti-ui/source/kotti-field-currency/types.ts

@@ -10,6 +10,7 @@ export module KottiFieldCurrency {
 	export const propsSchema = KottiField.propsSchema
 		.merge(
 			KottiField.potentiallySupportedPropsSchema.pick({
+				autoComplete: true,
 				tabIndex: true,
 			}),
 		)

packages/kotti-ui/source/kotti-field-date/constants.ts

@@ -32,6 +32,7 @@ export const DATE_FORMAT_REGEX = /^\d{4}-\d{2}-\d{2}$/
 export const DATE_TIME_FORMAT_REGEX = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/
 
 export const KOTTI_FIELD_DATE_SUPPORTS: KottiField.Supports = {
+	autoComplete: false,
 	clear: true,
 	decoration: false,
 	placeholder: true,

packages/kotti-ui/source/kotti-field-file-upload/constants.ts

@@ -7,6 +7,7 @@ export enum ErrorCodes {
 }
 
 export const KOTTI_FIELD_FILE_UPLOAD_SUPPORTS: KottiField.Supports = {
+	autoComplete: false,
 	clear: false,
 	decoration: false,
 	placeholder: false,

packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue

@@ -267,6 +267,7 @@ export default defineComponent({
 					forceUpdateKey: number
 				} => ({
 					...sharedProps.value,
+					autocomplete: props.autoComplete,
 					class: {
 						'kt-field-inline-edit__input': true,
 						...(props.textStyle !== null && { [props.textStyle]: true }),
@@ -307,6 +308,7 @@ export default defineComponent({
 					forceUpdateKey: number
 				} => ({
 					...sharedProps.value,
+					autocomplete: props.autoComplete,
 					class: {
 						'kt-field-inline-edit__input': true,
 						'kt-field-inline-edit__input--is-multiline': true,

packages/kotti-ui/source/kotti-field-inline-edit/constants.ts

@@ -1,6 +1,7 @@
 import type { KottiField } from '../kotti-field/types'
 
 export const KOTTI_FIELD_INLINE_EDIT_SUPPORTS: KottiField.Supports = {
+	autoComplete: true,
 	clear: false,
 	decoration: false,
 	placeholder: true,

packages/kotti-ui/source/kotti-field-inline-edit/types.ts

@@ -20,7 +20,12 @@ export module KottiFieldInlineEdit {
 	}
 
 	export const propsSchema = KottiField.propsSchema
-		.merge(KottiField.potentiallySupportedPropsSchema.pick({ tabIndex: true }))
+		.merge(
+			KottiField.potentiallySupportedPropsSchema.pick({
+				autoComplete: true,
+				tabIndex: true,
+			}),
+		)
 		.extend({
 			isReadonly: z.boolean().default(false),
 			isMultiline: z.boolean().default(false),

packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue

@@ -312,6 +312,7 @@ export default defineComponent({
 						forceUpdateKey: number
 					} => ({
 					...field.inputProps,
+					autocomplete: props.autoComplete,
 					class: {
 						'kt-field-number__input': true,
 						'kt-field-number__input--has-maximum': showMaximum.value,

packages/kotti-ui/source/kotti-field-number/constants.ts

@@ -3,6 +3,7 @@ import { DecimalSeparator } from '../types/kotti'
 import { DECIMAL_SEPARATORS_CHARACTER_SET } from '../utilities'
 
 export const KOTTI_FIELD_NUMBER_SUPPORTS: KottiField.Supports = {
+	autoComplete: true,
 	clear: false,
 	decoration: true,
 	placeholder: true,

packages/kotti-ui/source/kotti-field-number/types.ts

@@ -9,6 +9,7 @@ export module KottiFieldNumber {
 	export const propsSchema = KottiField.propsSchema
 		.merge(
 			KottiField.potentiallySupportedPropsSchema.pick({
+				autoComplete: true,
 				leftIcon: true,
 				prefix: true,
 				rightIcon: true,

packages/kotti-ui/source/kotti-field-password/constants.ts

@@ -1,6 +1,7 @@
 import type { KottiField } from '../kotti-field/types'
 
 export const KOTTI_FIELD_PASSWORD_SUPPORTS: KottiField.Supports = {
+	autoComplete: true,
 	clear: true,
 	decoration: true,
 	placeholder: true,

packages/kotti-ui/source/kotti-field-password/types.ts

@@ -12,7 +12,9 @@ export module KottiFieldPassword {
 		NEW = 'new-password',
 	}
 	export const propsSchema = KottiField.propsSchema
-		.merge(KottiField.potentiallySupportedPropsSchema)
+		.merge(
+			KottiField.potentiallySupportedPropsSchema.omit({ autoComplete: true }),
+		)
 		.extend({
 			placeholder: z.string().nullable().default(null),
 			autoComplete: createLooseZodEnumSchema(AutoComplete),

packages/kotti-ui/source/kotti-field-radio-group/constants.ts

@@ -1,6 +1,7 @@
 import type { KottiField } from '../kotti-field/types'
 
 export const KOTTI_FIELD_RADIO_GROUP_SUPPORTS: KottiField.Supports = {
+	autoComplete: false,
 	clear: false,
 	decoration: false,
 	placeholder: false,

packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue

@@ -247,6 +247,7 @@ export default defineComponent({
 			),
 			inputProps: computed(() => ({
 				...field.inputProps,
+				autocomplete: props.autoComplete,
 				class: ['kt-field-select__wrapper'],
 				forceUpdateKey: forceUpdateKey.value,
 				placeholder: props.placeholder ?? undefined,