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

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

@@ -68,8 +68,23 @@
 							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"
+								isOptional
+								isUnsorted
+								label="autoComplete"
+								:options="autoCompleteOptions"
+							/>
+							<KtFieldText
+								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"
+								:isDisabled="settings.autoComplete !== 'token'"
+								isOptional
+								label="<token>"
+							/>
 						</div>
 					</div>
 				</div>
@@ -101,6 +116,8 @@ export default defineComponent({
 		const getInitialValue = () => ({ fieldValue: null })
 
 		const settings = ref<{
+			autoComplete: Kotti.FieldText.Value
+			autoCompleteToken: Kotti.FieldText.Value
 			booleanFlags: {
 				hideValidation: Kotti.FieldToggle.Value
 				isDisabled: Kotti.FieldToggle.Value
@@ -119,6 +136,8 @@ export default defineComponent({
 			textStyle: Kotti.FieldInlineEdit.TextStyle | null
 			validation: Kotti.Field.Validation.Result['type'] | null
 		}>({
+			autoComplete: null,
+			autoCompleteToken: null,
 			booleanFlags: {
 				hideValidation: false,
 				isDisabled: false,
@@ -143,10 +162,21 @@ export default defineComponent({
 		)
 
 		return {
+			autoCompleteOptions: computed(() => [
+				...Object.values(Kotti.Field.AutoComplete).map((option) => ({
+					label: option,
+					value: option,
+				})),
+				{ label: '<token>', value: 'token' },
+			]),
 			component: KtFieldInlineEdit,
 			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

@@ -294,6 +294,26 @@
 								</template>
 							</KtFieldSingleSelect>
 						</div>
+						<div
+							v-if="componentDefinition.supports.autoComplete"
+							class="field-row"
+						>
+							<KtFieldSingleSelect
+								formKey="autoComplete"
+								helpText="Support Varies"
+								:isOptional="settings.component !== 'KtFieldPassword'"
+								isUnsorted
+								label="autoComplete"
+								:options="autoCompleteOptions"
+							/>
+							<KtFieldText
+								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"
+								:isDisabled="settings.autoComplete !== 'token'"
+								isOptional
+								label="<token>"
+							/>
+						</div>
 						<KtFormControllerObject
 							v-if="componentDefinition.additionalProps.length > 0"
 							formKey="additionalProps"
@@ -307,17 +327,6 @@
 								label="actions"
 								type="switch"
 							/>
-							<KtFieldSingleSelect
-								v-if="
-									componentDefinition.additionalProps.includes('autoComplete')
-								"
-								formKey="autoComplete"
-								label="autoComplete"
-								:options="[
-									{ label: 'current-password', value: 'current-password' },
-									{ label: 'new-password', value: 'new-password' },
-								]"
-							/>
 							<KtFieldNumber
 								v-if="
 									componentDefinition.additionalProps.includes(
@@ -752,7 +761,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 {
@@ -890,7 +899,7 @@ const components: Array<{
 		supports: KtFieldNumber.meta.supports,
 	},
 	{
-		additionalProps: ['autoComplete'],
+		additionalProps: [],
 		formKey: 'textValue',
 		name: 'KtFieldPassword',
 		supports: KtFieldPassword.meta.supports,
@@ -1166,7 +1175,6 @@ export default defineComponent({
 			additionalProps: {
 				allowMultiple: Kotti.FieldToggle.Value
 				allowPhotos: Kotti.FieldToggle.Value
-				autoComplete: 'current-password' | 'new-password'
 				autoSize: Kotti.FieldToggle.Value
 				clearOnSelect: Kotti.FieldToggle.Value
 				collapseExtensionsAfter: Kotti.FieldNumber.Value
@@ -1202,6 +1210,8 @@ export default defineComponent({
 				showHeaderSideSlot: ComponentValue['showHeaderSideSlot']
 				toggleType: 'checkbox' | 'switch'
 			}
+			autoComplete: string
+			autoCompleteToken: Kotti.FieldText.Value
 			booleanFlags: {
 				hideClear: Kotti.FieldToggle.Value
 				hideValidation: Kotti.FieldToggle.Value
@@ -1232,7 +1242,6 @@ export default defineComponent({
 			additionalProps: {
 				allowMultiple: false,
 				allowPhotos: false,
-				autoComplete: 'current-password',
 				autoSize: false,
 				clearOnSelect: false,
 				collapseExtensionsAfter: null,
@@ -1268,6 +1277,8 @@ export default defineComponent({
 				showHeaderSideSlot: false,
 				toggleType: 'checkbox',
 			},
+			autoComplete: Kotti.Field.AutoComplete.OFF,
+			autoCompleteToken: null,
 			booleanFlags: {
 				hideClear: false,
 				hideValidation: false,
@@ -1361,6 +1372,14 @@ export default defineComponent({
 					tabIndex: settings.value.tabIndex,
 				})
 
+			if (componentDefinition.value.supports.autoComplete)
+				Object.assign(additionalProps, {
+					autoComplete:
+						settings.value.autoComplete === 'token'
+							? settings.value.autoCompleteToken
+							: settings.value.autoComplete,
+				})
+
 			if (
 				componentDefinition.value.additionalProps.includes('toggleType') &&
 				settings.value.additionalProps.toggleType !== 'checkbox' // Exclude Default Value
@@ -1383,10 +1402,6 @@ export default defineComponent({
 					maxHeight: settings.value.additionalProps.maxHeight,
 				})
 
-			if (componentDefinition.value.additionalProps.includes('autoComplete'))
-				Object.assign(additionalProps, {
-					autoComplete: settings.value.additionalProps.autoComplete,
-				})
 			if (
 				componentDefinition.value.additionalProps.includes(
 					'numberDecimalPlaces',
@@ -1670,7 +1685,43 @@ export default defineComponent({
 			}),
 		)
 
+		watch(
+			() => settings.value.component,
+			(newComponent, oldComponent) => {
+				if (
+					newComponent === 'KtFieldPassword' &&
+					oldComponent !== 'KtFieldPassword'
+				)
+					settings.value = {
+						...settings.value,
+						autoComplete: Kotti.FieldPassword.AutoComplete.CURRENT,
+					}
+				else if (
+					newComponent !== 'KtFieldPassword' &&
+					oldComponent === 'KtFieldPassword'
+				)
+					settings.value = {
+						...settings.value,
+						autoComplete: Kotti.Field.AutoComplete.OFF,
+					}
+			},
+		)
+
 		return {
+			autoCompleteOptions: computed(() =>
+				settings.value.component === 'KtFieldPassword'
+					? Object.values(Kotti.FieldPassword.AutoComplete).map((option) => ({
+							label: option,
+							value: option,
+						}))
+					: [
+							...Object.values(Kotti.Field.AutoComplete).map((option) => ({
+								label: option,
+								value: option,
+							})),
+							{ 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

@@ -10,9 +10,12 @@ export module KottiFieldPassword {
 	export enum AutoComplete {
 		CURRENT = 'current-password',
 		NEW = 'new-password',
+		ONE_TIME_CODE = 'one-time-code',
 	}
 	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,

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

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

packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue

@@ -66,6 +66,7 @@ export default defineComponent({
 					forceUpdateKey: number
 				} => ({
 					...field.inputProps,
+					autocomplete: props.autoComplete,
 					class: 'kt-field-text-area__wrapper',
 					forceUpdateKey: forceUpdateKey.value,
 					placeholder: props.placeholder ?? undefined,

packages/kotti-ui/source/kotti-field-text-area/constants.ts

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