feature(#228): Implement KtFieldEmail

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,

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

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,7 @@
+import { KottiField } from '../kotti-field/types'
+
+export namespace KottiFieldEmail {
+	export type Props = KottiField.Props<Value, string | null>
+
+	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',