Skip to content

Commit e3cb21b

Browse files
deleoniodeleonio
committed
feat: Refactor input components to support auto-complete functionality
- Updated form elements to remove deprecated auto-complete attributes. - Introduced AutoCompletePropType across input components for better type safety. - Implemented validateAutoComplete function to standardize auto-complete validation. - Enhanced schema definitions to include auto-complete properties for input components. - Removed legacy InputTypeOnOff type in favor of more flexible auto-complete options. - Updated snapshots and tests to reflect changes in auto-complete handling.
1 parent a6f1acf commit e3cb21b

File tree

28 files changed

+151
-148
lines changed

28 files changed

+151
-148
lines changed

‎packages/components/src/components/form/shadow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export class KolForm implements FormAPI {
8282

8383
private renderFormElement(): JSX.Element {
8484
return (
85-
<form class="kol-form" method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
85+
<form class="kol-form" method="post" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>
8686
{this.state._requiredText === true ? (
8787
<p>
8888
<div class="kol-form__mandatory-fields-hint">{translate('kol-form-description')}</div>

‎packages/components/src/components/form/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`kol-form should render with _requiredText="Pflichtfeld" 1`] = `
44
<kol-form>
55
<template shadowrootmode="open">
6-
<form autocomplete="off" class="kol-form" method="post" novalidate="">
6+
<form class="kol-form" method="post" novalidate="">
77
<p>
88
<div class="kol-form__mandatory-fields-hint">
99
Pflichtfeld

‎packages/components/src/components/input-color/controller.ts‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import type { InputColorProps, InputColorWatches, InputTypeOnOff, SuggestionsPropType } from '../../schema';
2-
import { inputTypeOnOffOptions, validateSuggestions, watchString, watchValidator } from '../../schema';
1+
import type { AutoCompletePropType, InputColorProps, InputColorWatches, SuggestionsPropType } from '../../schema';
2+
import { validateSuggestions, watchString } from '../../schema';
3+
import { validateAutoComplete } from '../../schema/props/auto-complete';
34

45
import { InputIconController } from '../@deprecated/input/controller-icon';
56

@@ -12,14 +13,8 @@ export class InputColorController extends InputIconController implements InputCo
1213
this.component = component;
1314
}
1415

15-
public validateAutoComplete(value?: InputTypeOnOff): void {
16-
watchValidator(
17-
this.component,
18-
'_autoComplete',
19-
(value): boolean => typeof value === 'string' && inputTypeOnOffOptions.includes(value),
20-
new Set(inputTypeOnOffOptions),
21-
value,
22-
);
16+
public validateAutoComplete(value?: AutoCompletePropType): void {
17+
validateAutoComplete(this.component, value);
2318
}
2419

2520
public validateSuggestions(value?: SuggestionsPropType): void {

‎packages/components/src/components/input-color/shadow.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { JSX } from '@stencil/core';
22
import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
33
import type {
4+
AutoCompletePropType,
45
ButtonProps,
56
FocusableElement,
67
HideMsgPropType,
@@ -9,7 +10,6 @@ import type {
910
InputColorAPI,
1011
InputColorStates,
1112
InputTypeOnDefault,
12-
InputTypeOnOff,
1313
LabelWithExpertSlotPropType,
1414
MsgPropType,
1515
NamePropType,
@@ -20,10 +20,10 @@ import type {
2020
TooltipAlignPropType,
2121
} from '../../schema';
2222

23-
import { nonce } from '../../utils/dev.utils';
2423
import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
25-
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
2624
import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
25+
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
26+
import { nonce } from '../../utils/dev.utils';
2727
import { InputColorController } from './controller';
2828

2929
/**
@@ -165,7 +165,7 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
165165
/**
166166
* Defines whether the input can be auto-completed.
167167
*/
168-
@Prop() public _autoComplete?: InputTypeOnOff;
168+
@Prop() public _autoComplete?: AutoCompletePropType = 'off'; /* disable browser's not accessible autocomplete popup */
169169

170170
/**
171171
* Makes the element not focusable and ignore all events.
@@ -259,7 +259,6 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
259259
@Prop({ reflect: true }) public _value?: string;
260260

261261
@State() public state: InputColorStates = {
262-
_autoComplete: 'off',
263262
_hideMsg: false,
264263
_id: `id-${nonce()}`,
265264
_label: '', // ⚠ required
@@ -282,7 +281,7 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
282281
}
283282

284283
@Watch('_autoComplete')
285-
public validateAutoComplete(value?: InputTypeOnOff): void {
284+
public validateAutoComplete(value?: AutoCompletePropType): void {
286285
this.controller.validateAutoComplete(value);
287286
}
288287

‎packages/components/src/components/input-date/controller.ts‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import type {
2+
AutoCompletePropType,
23
InputDateProps,
34
InputDateType,
45
InputDateWatches,
56
InputTypeOnDefault,
6-
InputTypeOnOff,
77
Iso8601,
88
NumberString,
99
ReadOnlyPropType,
1010
SuggestionsPropType,
1111
} from '../../schema';
1212
import { inputDateTypeOptions, setState, validateReadOnly, validateSuggestions, watchBoolean, watchValidator } from '../../schema';
13+
import { validateAutoComplete } from '../../schema/props/auto-complete';
1314

1415
import { InputIconController } from '../@deprecated/input/controller-icon';
1516

@@ -32,14 +33,8 @@ export class InputDateController extends InputIconController implements InputDat
3233
this.component = component;
3334
}
3435

35-
public validateAutoComplete(value?: InputTypeOnOff): void {
36-
watchValidator(
37-
this.component,
38-
'_autoComplete',
39-
(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),
40-
new Set(['on | off']),
41-
value,
42-
);
36+
public validateAutoComplete(value?: AutoCompletePropType): void {
37+
validateAutoComplete(this.component, value);
4338
}
4439

4540
public validateSuggestions(value?: SuggestionsPropType): void {

‎packages/components/src/components/input-date/shadow.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core
33
import clsx from 'clsx';
44

55
import type {
6+
AutoCompletePropType,
67
ButtonProps,
78
FocusableElement,
89
HideMsgPropType,
@@ -12,7 +13,6 @@ import type {
1213
InputDateStates,
1314
InputDateType,
1415
InputTypeOnDefault,
15-
InputTypeOnOff,
1616
Iso8601,
1717
LabelWithExpertSlotPropType,
1818
MsgPropType,
@@ -27,11 +27,11 @@ import type {
2727
} from '../../schema';
2828
import { deprecatedHint } from '../../schema';
2929

30-
import { nonce } from '../../utils/dev.utils';
31-
import { propagateSubmitEventToForm } from '../form/controller';
3230
import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
33-
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
3431
import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
32+
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
33+
import { nonce } from '../../utils/dev.utils';
34+
import { propagateSubmitEventToForm } from '../form/controller';
3535
import { InputDateController } from './controller';
3636

3737
/**
@@ -177,7 +177,7 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
177177
/**
178178
* Defines whether the input can be auto-completed.
179179
*/
180-
@Prop() public _autoComplete?: InputTypeOnOff;
180+
@Prop() public _autoComplete?: AutoCompletePropType = 'off';
181181

182182
/**
183183
* Makes the element not focusable and ignore all events.
@@ -303,7 +303,6 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
303303
@Prop({ mutable: true, reflect: true }) public _value?: Iso8601 | Date | null;
304304

305305
@State() public state: InputDateStates = {
306-
_autoComplete: 'off',
307306
_hasValue: false,
308307
_hideMsg: false,
309308
_id: `id-${nonce()}`,
@@ -328,7 +327,7 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
328327
}
329328

330329
@Watch('_autoComplete')
331-
public validateAutoComplete(value?: InputTypeOnOff): void {
330+
public validateAutoComplete(value?: AutoCompletePropType): void {
332331
this.controller.validateAutoComplete(value);
333332
}
334333

‎packages/components/src/components/input-email/shadow.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core
33
import clsx from 'clsx';
44

55
import type {
6+
AutoCompletePropType,
67
ButtonProps,
78
FocusableElement,
89
HideMsgPropType,
@@ -11,7 +12,6 @@ import type {
1112
InputEmailAPI,
1213
InputEmailStates,
1314
InputTypeOnDefault,
14-
InputTypeOnOff,
1515
LabelWithExpertSlotPropType,
1616
MsgPropType,
1717
MultiplePropType,
@@ -24,11 +24,11 @@ import type {
2424
} from '../../schema';
2525
import { setState } from '../../schema';
2626

27-
import { nonce } from '../../utils/dev.utils';
28-
import { propagateSubmitEventToForm } from '../form/controller';
2927
import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
30-
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
3128
import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
29+
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
30+
import { nonce } from '../../utils/dev.utils';
31+
import { propagateSubmitEventToForm } from '../form/controller';
3232
import { InputEmailController } from './controller';
3333

3434
/**
@@ -130,7 +130,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
130130
/**
131131
* Defines whether the input can be auto-completed.
132132
*/
133-
@Prop() public _autoComplete?: InputTypeOnOff;
133+
@Prop() public _autoComplete?: AutoCompletePropType = 'off';
134134

135135
/**
136136
* Makes the element not focusable and ignore all events.
@@ -262,7 +262,6 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
262262
@Prop({ mutable: true, reflect: true }) public _value?: string;
263263

264264
@State() public state: InputEmailStates = {
265-
_autoComplete: 'off',
266265
_currentLength: 0,
267266
_hasValue: false,
268267
_hideMsg: false,
@@ -287,7 +286,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
287286
}
288287

289288
@Watch('_autoComplete')
290-
public validateAutoComplete(value?: InputTypeOnOff): void {
289+
public validateAutoComplete(value?: AutoCompletePropType): void {
291290
this.controller.validateAutoComplete(value);
292291
}
293292

‎packages/components/src/components/input-number/controller.ts‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import type { InputNumberProps, InputNumberWatches, InputTypeOnOff, NumberString, SuggestionsPropType } from '../../schema';
2-
import { validateSuggestions, watchBoolean, watchString, watchValidator } from '../../schema';
1+
import type { AutoCompletePropType, InputNumberProps, InputNumberWatches, NumberString, SuggestionsPropType } from '../../schema';
2+
import { validateSuggestions, watchBoolean, watchString } from '../../schema';
3+
import { validateAutoComplete } from '../../schema/props/auto-complete';
34

45
import { InputIconController } from '../@deprecated/input/controller-icon';
56

@@ -12,14 +13,8 @@ export class InputNumberController extends InputIconController implements InputN
1213
this.component = component;
1314
}
1415

15-
public validateAutoComplete(value?: InputTypeOnOff): void {
16-
watchValidator(
17-
this.component,
18-
'_autoComplete',
19-
(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),
20-
new Set(['on | off']),
21-
value,
22-
);
16+
public validateAutoComplete(value?: AutoCompletePropType): void {
17+
validateAutoComplete(this.component, value);
2318
}
2419

2520
public validateSuggestions(value?: SuggestionsPropType): void {

‎packages/components/src/components/input-number/shadow.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type {
1111
InputNumberAPI,
1212
InputNumberStates,
1313
InputTypeOnDefault,
14-
InputTypeOnOff,
14+
AutoCompletePropType,
1515
LabelWithExpertSlotPropType,
1616
MsgPropType,
1717
NamePropType,
@@ -159,7 +159,7 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
159159
/**
160160
* Defines whether the input can be auto-completed.
161161
*/
162-
@Prop() public _autoComplete?: InputTypeOnOff;
162+
@Prop() public _autoComplete?: AutoCompletePropType = 'off';
163163

164164
/**
165165
* Makes the element not focusable and ignore all events.
@@ -285,7 +285,6 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
285285
@Prop({ mutable: true, reflect: true }) public _value?: number | NumberString | null;
286286

287287
@State() public state: InputNumberStates = {
288-
_autoComplete: 'off',
289288
_hasValue: false,
290289
_hideMsg: false,
291290
_id: `id-${nonce()}`,
@@ -309,7 +308,7 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
309308
}
310309

311310
@Watch('_autoComplete')
312-
public validateAutoComplete(value?: InputTypeOnOff): void {
311+
public validateAutoComplete(value?: AutoCompletePropType): void {
313312
this.controller.validateAutoComplete(value);
314313
}
315314

‎packages/components/src/components/input-password/controller.ts‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import type { InputPasswordProps, InputPasswordWatches, InputTypeOnOff } from '../../schema';
2-
import { validateHasCounter, watchBoolean, watchNumber, watchString, watchValidator } from '../../schema';
1+
import type { AutoCompletePropType, InputPasswordProps, InputPasswordWatches } from '../../schema';
2+
import { validateHasCounter, watchBoolean, watchNumber, watchString } from '../../schema';
3+
import { validateAutoComplete } from '../../schema/props/auto-complete';
34
import type { PasswordVariantPropType } from '../../schema/props/variant/password-variant';
45
import { validatePasswordVariant } from '../../schema/props/variant/password-variant';
56

@@ -21,14 +22,8 @@ export class InputPasswordController extends InputIconController implements Inpu
2122
}
2223
};
2324

24-
public validateAutoComplete(value?: InputTypeOnOff): void {
25-
watchValidator(
26-
this.component,
27-
'_autoComplete',
28-
(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),
29-
new Set(['on | off']),
30-
value,
31-
);
25+
public validateAutoComplete(value?: AutoCompletePropType): void {
26+
validateAutoComplete(this.component, value);
3227
}
3328

3429
public validateHasCounter(value?: boolean): void {

0 commit comments

Comments
 (0)
⚡