From 8eb3acb553f0e122db82ed52ea4471915b10944d Mon Sep 17 00:00:00 2001
From: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com>
Date: Thu, 2 Sep 2021 15:49:10 +0200
Subject: [PATCH 1/2] feature(#228): Implement KtFieldEmail

---
 .../pages/usage/components/form-fields.vue    | 12 ++-
 packages/documentation/pages/utilities.ts     |  1 +
 packages/kotti-ui/source/index.ts             |  3 +
 .../source/kotti-field-email/KtFieldEmail.vue | 76 +++++++++++++++++++
 .../source/kotti-field-email/constants.ts     |  8 ++
 .../source/kotti-field-email/index.ts         | 25 ++++++
 .../source/kotti-field-email/types.ts         |  7 ++
 packages/kotti-ui/source/kotti-input/index.ts |  4 +-
 8 files changed, 132 insertions(+), 4 deletions(-)
 create mode 100644 packages/kotti-ui/source/kotti-field-email/KtFieldEmail.vue
 create mode 100644 packages/kotti-ui/source/kotti-field-email/constants.ts
 create mode 100644 packages/kotti-ui/source/kotti-field-email/index.ts
 create mode 100644 packages/kotti-ui/source/kotti-field-email/types.ts

diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
index 374a543ec7..3f48691136 100644
--- a/packages/documentation/pages/usage/components/form-fields.vue
+++ b/packages/documentation/pages/usage/components/form-fields.vue
@@ -382,6 +382,7 @@ import {
 	KtFieldDateRange,
 	KtFieldDateTime,
 	KtFieldDateTimeRange,
+	KtFieldEmail,
 	KtFieldMultiSelect,
 	KtFieldNumber,
 	KtFieldPassword,
@@ -426,7 +427,7 @@ const DATE_ADDITIONAL_PROPS = ['maximumDate', 'minimumDate']
 const components: Array<{
 	additionalProps: Array<string>
 	formKey: string
-	name: string
+	name: Exclude<ComponentNames, 'KtFilters'>
 	supports: Kotti.Field.Supports
 }> = [
 	{
@@ -453,6 +454,12 @@ const components: Array<{
 		name: 'KtFieldDateTimeRange',
 		supports: KtFieldDateTimeRange.meta.supports,
 	},
+	{
+		additionalProps: [],
+		formKey: 'textValue',
+		name: 'KtFieldEmail',
+		supports: KtFieldEmail.meta.supports,
+	},
 	{
 		additionalProps: ['actions', 'collapseTagsAfter', 'maximumSelectable'],
 		formKey: 'multiSelectValue',
@@ -634,7 +641,7 @@ export default defineComponent({
 				isLoading: Kotti.FieldToggle.Value
 				isOptional: Kotti.FieldToggle.Value
 			}
-			component: ComponentNames
+			component: Exclude<ComponentNames, 'KtFilters'>
 			hasHelpTextSlot: boolean
 			helpDescription: Kotti.FieldText.Value
 			helpText: Kotti.FieldText.Value
@@ -914,6 +921,7 @@ export default defineComponent({
 						KtFieldDateRange,
 						KtFieldDateTime,
 						KtFieldDateTimeRange,
+						KtFieldEmail,
 						KtFieldNumber,
 						KtFieldMultiSelect,
 						KtFieldPassword,
diff --git a/packages/documentation/pages/utilities.ts b/packages/documentation/pages/utilities.ts
index 32dfe400c5..1502dcc035 100644
--- a/packages/documentation/pages/utilities.ts
+++ b/packages/documentation/pages/utilities.ts
@@ -5,6 +5,7 @@ export type ComponentNames =
 	| 'KtFieldDateRange'
 	| 'KtFieldDateTime'
 	| 'KtFieldDateTimeRange'
+	| 'KtFieldEmail'
 	| 'KtFieldMultiSelect'
 	| 'KtFieldNumber'
 	| 'KtFieldPassword'
diff --git a/packages/kotti-ui/source/index.ts b/packages/kotti-ui/source/index.ts
index bee7378874..ed33a1c309 100644
--- a/packages/kotti-ui/source/index.ts
+++ b/packages/kotti-ui/source/index.ts
@@ -41,6 +41,8 @@ import {
 	KtFieldDateTimeRange,
 } from './kotti-field-date'
 export * from './kotti-field-date'
+import { KtFieldEmail } from './kotti-field-email'
+export * from './kotti-field-email'
 import { KtFieldNumber } from './kotti-field-number'
 export * from './kotti-field-number'
 import { KtFieldPassword } from './kotti-field-password'
@@ -137,6 +139,7 @@ export default {
 			KtFieldDateRange,
 			KtFieldDateTime,
 			KtFieldDateTimeRange,
+			KtFieldEmail,
 			KtFieldMultiSelect,
 			KtFieldNumber,
 			KtFieldPassword,
diff --git a/packages/kotti-ui/source/kotti-field-email/KtFieldEmail.vue b/packages/kotti-ui/source/kotti-field-email/KtFieldEmail.vue
new file mode 100644
index 0000000000..803dd49f2e
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-email/KtFieldEmail.vue
@@ -0,0 +1,76 @@
+<template>
+	<KtField
+		v-bind="{ field }"
+		:getEmptyValue="() => null"
+		:helpTextSlot="$slots.helpText"
+	>
+		<input v-bind="inputProps" @input="onInput" />
+	</KtField>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api'
+
+import { KtField } from '../kotti-field'
+import { KOTTI_FIELD_PROPS } from '../kotti-field/constants'
+import { useField, useForceUpdate } from '../kotti-field/hooks'
+
+import { KOTTI_FIELD_EMAIL_SUPPORTS } from './constants'
+import { KottiFieldEmail } from './types'
+
+export default defineComponent({
+	name: 'KtFieldEmail',
+	components: { KtField },
+	props: {
+		...KOTTI_FIELD_PROPS,
+		value: { default: null, type: String },
+	},
+	setup(props: KottiFieldEmail.Props, { emit }) {
+		const field = useField<KottiFieldEmail.Value, string | null>({
+			emit,
+			isCorrectDataType: (value): value is KottiFieldEmail.Value =>
+				typeof value === 'string' || value === null,
+			isEmpty: (value) => value === null,
+			props,
+			supports: KOTTI_FIELD_EMAIL_SUPPORTS,
+		})
+
+		const { forceUpdate, forceUpdateKey } = useForceUpdate()
+
+		return {
+			field,
+			inputProps: computed(
+				(): Partial<HTMLInputElement> & {
+					class: object
+					forceUpdateKey: number
+				} => ({
+					...field.inputProps,
+					class: ['kt-field-email__wrapper'],
+					forceUpdateKey: forceUpdateKey.value,
+					type: 'email',
+					size: 1,
+					value: field.currentValue ?? '',
+					placeholder: props.placeholder ?? undefined,
+				}),
+			),
+			onInput: (event: { target: HTMLInputElement }) => {
+				const newValue = event.target.value
+				field.setValue(newValue === '' ? null : newValue)
+
+				forceUpdate()
+			},
+		}
+	},
+})
+</script>
+
+<style lang="scss">
+.kt-field-email__wrapper {
+	display: flex;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	line-height: 1.6;
+	border: 0;
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-field-email/constants.ts b/packages/kotti-ui/source/kotti-field-email/constants.ts
new file mode 100644
index 0000000000..160f81632e
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-email/constants.ts
@@ -0,0 +1,8 @@
+import { KottiField } from '../kotti-field/types'
+
+export const KOTTI_FIELD_EMAIL_SUPPORTS: KottiField.Supports = {
+	clear: true,
+	decoration: true,
+	placeholder: true,
+	tabIndex: true,
+}
diff --git a/packages/kotti-ui/source/kotti-field-email/index.ts b/packages/kotti-ui/source/kotti-field-email/index.ts
new file mode 100644
index 0000000000..bf1c1c2333
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-email/index.ts
@@ -0,0 +1,25 @@
+import { FIELD_META_BASE_SLOTS } from '../kotti-field/meta'
+import { MetaDesignType } from '../types/kotti'
+import { attachMeta, makeInstallable } from '../utilities'
+
+import { KOTTI_FIELD_EMAIL_SUPPORTS } from './constants'
+import KtFieldEmailVue from './KtFieldEmail.vue'
+
+export const KtFieldEmail = attachMeta(
+	makeInstallable(KtFieldEmailVue),
+	{
+		addedVersion: '2.0.0',
+		deprecated: null,
+		designs: {
+			type: MetaDesignType.FIGMA,
+			url: 'https://www.figma.com/file/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=415%3A4',
+		},
+		slots: FIELD_META_BASE_SLOTS,
+		typeScript: {
+			namespace: 'Kotti.FieldEmail',
+		},
+	},
+	{ supports: KOTTI_FIELD_EMAIL_SUPPORTS },
+)
+
+export * from './constants'
diff --git a/packages/kotti-ui/source/kotti-field-email/types.ts b/packages/kotti-ui/source/kotti-field-email/types.ts
new file mode 100644
index 0000000000..f60b94fe6d
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-email/types.ts
@@ -0,0 +1,7 @@
+import { KottiField } from '../kotti-field/types'
+
+export namespace KottiFieldEmail {
+	export type Props = KottiField.Props<Value, string | null>
+
+	export type Value = string | null
+}
diff --git a/packages/kotti-ui/source/kotti-input/index.ts b/packages/kotti-ui/source/kotti-input/index.ts
index 746044f5d1..ce381eeda5 100755
--- a/packages/kotti-ui/source/kotti-input/index.ts
+++ b/packages/kotti-ui/source/kotti-input/index.ts
@@ -9,10 +9,10 @@ export const KtInput = attachMeta(makeInstallable(KtInputVue), {
 	addedVersion: '0.0.1',
 	deprecated: {
 		alternatives: [
-			'KtFieldText',
-			'KtFieldNumber',
 			'KtFieldEmail',
+			'KtFieldNumber',
 			'KtFieldPassword',
+			'KtFieldText',
 		],
 		reason: 'Replaced by Kotti v2.0.0 Forms',
 		version: '3.0.0',

From 806a450bb1cccfa245e9881d656db3a2d7cada70 Mon Sep 17 00:00:00 2001
From: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com>
Date: Thu, 2 Sep 2021 16:08:03 +0200
Subject: [PATCH 2/2] feature(#228): Add KtFieldEmail autoComplete Support

---
 .../pages/usage/components/form-fields.vue    | 69 +++++++++++++++++--
 .../source/kotti-field-email/KtFieldEmail.vue |  6 ++
 .../source/kotti-field-email/types.ts         |  4 +-
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
index 3f48691136..81adad75d0 100644
--- 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
index 803dd49f2e..2cd890fa50 100644
--- 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
index f60b94fe6d..62db6a6b04 100644
--- 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
 }