Skip to content

Commit

Permalink
feature(#228): Add KtFieldEmail autoComplete Support
Browse files Browse the repository at this point in the history
  • Loading branch information
FlorianWendelborn committed Sep 15, 2021
1 parent 79cc03d commit b37778d
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 8 deletions.
69 changes: 62 additions & 7 deletions packages/documentation/pages/usage/components/form-fields.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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="
Expand Down Expand Up @@ -455,7 +481,7 @@ const components: Array<{
supports: KtFieldDateTimeRange.meta.supports,
},
{
additionalProps: [],
additionalProps: ['autoComplete'],
formKey: 'textValue',
name: 'KtFieldEmail',
supports: KtFieldEmail.meta.supports,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -913,6 +939,7 @@ export default defineComponent({
validation: settings.value.validation,
}),
)
return {
component: computed(
(): { meta: Kotti.Meta; name: string } =>
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 6 additions & 0 deletions packages/kotti-ui/source/kotti-field-email/KtFieldEmail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand All @@ -45,6 +50,7 @@ export default defineComponent({
forceUpdateKey: number
} => ({
...field.inputProps,
autocomplete: props.autoComplete,
class: ['kt-field-email__wrapper'],
forceUpdateKey: forceUpdateKey.value,
type: 'email',
Expand Down
4 changes: 3 additions & 1 deletion packages/kotti-ui/source/kotti-field-email/types.ts
Original file line number Diff line number Diff line change
@@ -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
}

0 comments on commit b37778d

Please sign in to comment.