feature(#228): Add KtFieldEmail autoComplete Support

3YOURMIND · Sep 15, 2021 · b37778d · b37778d
1 parent 79cc03d
commit b37778d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 8 deletions.
diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
@@ -48,10 +48,12 @@
 					<div>
 						<h4>Settings</h4>
 						<KtFieldSingleSelect
-							formKey="component"
+							formKey="NONE"
 							hideClear
 							label="Component"
 							:options="componentOptions"
+							:value="settings.component"
+							@input="setSettingsComponent"
 						/>
 						<KtFieldSingleSelect
 							formKey="locale"
@@ -135,10 +137,34 @@
 								"
 								formKey="autoComplete"
 								label="autoComplete"
-								:options="[
-									{ label: 'current-password', value: 'current-password' },
-									{ label: 'new-password', value: 'new-password' },
-								]"
+								:options="
+									[
+										{
+											isDisabled:
+												componentDefinition.name !== 'KtFieldPassword',
+											label: 'current-password',
+											value: 'current-password',
+										},
+										{
+											isDisabled: componentDefinition.name !== 'KtFieldEmail',
+											label: 'email',
+											value: 'email',
+										},
+										{
+											isDisabled:
+												componentDefinition.name !== 'KtFieldPassword',
+											label: 'new-password',
+											value: 'new-password',
+										},
+										{
+											isDisabled: componentDefinition.name !== 'KtFieldEmail',
+											label: 'username',
+											value: 'username',
+										},
+									].sort((a, b) =>
+										a.isDisabled ? -1 : b.isDisabled ? -1 : a.localeCompare(b),
+									)
+								"
 							/>
 							<KtFieldNumber
 								v-if="
@@ -455,7 +481,7 @@ const components: Array<{
 		supports: KtFieldDateTimeRange.meta.supports,
 	},
 	{
-		additionalProps: [],
+		additionalProps: ['autoComplete'],
 		formKey: 'textValue',
 		name: 'KtFieldEmail',
 		supports: KtFieldEmail.meta.supports,
@@ -620,7 +646,7 @@ export default defineComponent({
 		const settings = ref<{
 			additionalProps: {
 				actions: Kotti.FieldToggle.Value
-				autoComplete: 'current-password' | 'new-password'
+				autoComplete: 'current-password' | 'email' | 'new-password' | 'username'
 				collapseTagsAfter: Kotti.FieldNumber.Value
 				hideChangeButtons: boolean
 				isInline: boolean
@@ -913,6 +939,7 @@ export default defineComponent({
 				validation: settings.value.validation,
 			}),
 		)
+
 		return {
 			component: computed(
 				(): { meta: Kotti.Meta; name: string } =>
@@ -973,6 +1000,34 @@ export default defineComponent({
 				)
 				saveSavedFieldsToLocalStorage(savedFields.value)
 			},
+			setSettingsComponent: (name: Exclude<ComponentNames, 'KtFilters'>) => {
+				switch (name) {
+					case 'KtFieldEmail':
+						settings.value = {
+							...settings.value,
+							additionalProps: {
+								...settings.value.additionalProps,
+								autoComplete: 'email',
+							},
+						}
+						break
+
+					case 'KtFieldPassword':
+						settings.value = {
+							...settings.value,
+							additionalProps: {
+								...settings.value.additionalProps,
+								autoComplete: 'new-password',
+							},
+						}
+						break
+				}
+
+				settings.value = {
+					...settings.value,
+					component: name,
+				}
+			},
 			settings,
 			updateQuery: (
 				newQuery: Kotti.FieldSingleSelectRemote.Events.UpdateQuery,

diff --git a/packages/kotti-ui/source/kotti-field-email/KtFieldEmail.vue b/packages/kotti-ui/source/kotti-field-email/KtFieldEmail.vue
@@ -23,6 +23,11 @@ export default defineComponent({
 	components: { KtField },
 	props: {
 		...KOTTI_FIELD_PROPS,
+		autoComplete: {
+			required: true,
+			type: String,
+			validator: (value) => ['email', 'username'].includes(value),
+		},
 		value: { default: null, type: String },
 	},
 	setup(props: KottiFieldEmail.Props, { emit }) {
@@ -45,6 +50,7 @@ export default defineComponent({
 					forceUpdateKey: number
 				} => ({
 					...field.inputProps,
+					autocomplete: props.autoComplete,
 					class: ['kt-field-email__wrapper'],
 					forceUpdateKey: forceUpdateKey.value,
 					type: 'email',

diff --git a/packages/kotti-ui/source/kotti-field-email/types.ts b/packages/kotti-ui/source/kotti-field-email/types.ts
@@ -1,7 +1,9 @@
 import { KottiField } from '../kotti-field/types'
 
 export namespace KottiFieldEmail {
-	export type Props = KottiField.Props<Value, string | null>
+	export type Props = KottiField.Props<Value, string | null> & {
+		autoComplete: 'email' | 'username'
+	}
 
 	export type Value = string | null
 }