feature(#228): Implement KtFieldEmail

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="
@@ -382,6 +408,7 @@ import {
 	KtFieldDateRange,
 	KtFieldDateTime,
 	KtFieldDateTimeRange,
+	KtFieldEmail,
 	KtFieldMultiSelect,
 	KtFieldNumber,
 	KtFieldPassword,
@@ -426,7 +453,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 +480,12 @@ const components: Array<{
 		name: 'KtFieldDateTimeRange',
 		supports: KtFieldDateTimeRange.meta.supports,
 	},
+	{
+		additionalProps: ['autoComplete'],
+		formKey: 'textValue',
+		name: 'KtFieldEmail',
+		supports: KtFieldEmail.meta.supports,
+	},
 	{
 		additionalProps: ['actions', 'collapseTagsAfter', 'maximumSelectable'],
 		formKey: 'multiSelectValue',
@@ -613,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
@@ -634,7 +667,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
@@ -906,6 +939,7 @@ export default defineComponent({
 				validation: settings.value.validation,
 			}),
 		)
+
 		return {
 			component: computed(
 				(): { meta: Kotti.Meta; name: string } =>
@@ -914,6 +948,7 @@ export default defineComponent({
 						KtFieldDateRange,
 						KtFieldDateTime,
 						KtFieldDateTimeRange,
+						KtFieldEmail,
 						KtFieldNumber,
 						KtFieldMultiSelect,
 						KtFieldPassword,
@@ -965,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,

packages/documentation/pages/utilities.ts

@@ -5,6 +5,7 @@ export type ComponentNames =
 	| 'KtFieldDateRange'
 	| 'KtFieldDateTime'
 	| 'KtFieldDateTimeRange'
+	| 'KtFieldEmail'
 	| 'KtFieldMultiSelect'
 	| 'KtFieldNumber'
 	| 'KtFieldPassword'

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,

packages/kotti-ui/source/kotti-field-email/KtFieldEmail.vue

@@ -0,0 +1,82 @@
+<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,
+		autoComplete: {
+			required: true,
+			type: String,
+			validator: (value) => ['email', 'username'].includes(value),
+		},
+		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,
+					autocomplete: props.autoComplete,
+					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>

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,
+}

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'

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

@@ -0,0 +1,9 @@
+import { KottiField } from '../kotti-field/types'
+
+export namespace KottiFieldEmail {
+	export type Props = KottiField.Props<Value, string | null> & {
+		autoComplete: 'email' | 'username'
+	}
+
+	export type Value = string | null
+}

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',