Skip to content

Commit 8b4571f

Browse files
scriptcodedscriptcoded
committed
fix: update all inputs to use new input mixin
1 parent 98bf473 commit 8b4571f

File tree

8 files changed

+122
-136
lines changed

8 files changed

+122
-136
lines changed

‎packages/ui-webc/src/components/checkbox/checkbox.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
import {
22
Component,
3+
type ComponentInterface,
34
Event,
45
type EventEmitter,
56
h,
7+
Mixin,
68
Prop,
7-
State,
89
} from "@stencil/core";
910
import checkIcon from "@tabler/icons/outline/check.svg";
11+
import { inputMixin } from "../../mixins/inputMixin";
1012

1113
@Component({
1214
tag: "scout-checkbox",
1315
styleUrl: "checkbox.css",
1416
scoped: true,
1517
})
16-
export class ScoutCheckbox {
18+
export class ScoutCheckbox
19+
extends Mixin(inputMixin)
20+
implements ComponentInterface
21+
{
1722
@Prop() checked: boolean = false;
1823

1924
@Prop() disabled: boolean = false;
@@ -29,21 +34,10 @@ export class ScoutCheckbox {
2934

3035
@Prop() name: string;
3136

32-
@State() ariaId: string;
33-
3437
@Event() scoutChecked: EventEmitter<{
3538
checked: boolean;
3639
element: HTMLInputElement;
3740
}>;
38-
/**
39-
* Internal event used for form field association.
40-
*/
41-
@Event() _scoutFieldId: EventEmitter<string>;
42-
43-
componentWillLoad(): Promise<void> | void {
44-
this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
45-
this._scoutFieldId.emit(this.ariaId);
46-
}
4741

4842
onChange(event: Event) {
4943
const checkbox = event.target as HTMLInputElement;
@@ -59,6 +53,7 @@ export class ScoutCheckbox {
5953
return (
6054
<Tag>
6155
<input
56+
ref={(el) => this.setInputRef(el)}
6257
id={this.ariaId}
6358
type="checkbox"
6459
value={this.value}
@@ -69,7 +64,12 @@ export class ScoutCheckbox {
6964
aria-disabled={this.disabled}
7065
disabled={this.disabled}
7166
checked={this.checked}
72-
onChange={(event) => this.onChange(event)}
67+
onChange={(event) => {
68+
this.onInput();
69+
this.onChange(event);
70+
}}
71+
onBlur={() => this.onBlur()}
72+
onInvalid={() => this.onInvalid()}
7373
/>
7474
{this.label}
7575
</Tag>

‎packages/ui-webc/src/components/checkbox/readme.md‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,27 @@
55

66
## Properties
77

8-
| Property | Attribute | Description | Type | Default |
9-
| ---------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
10-
| `ariaLabelledby` | `aria-labelledby` | Use this prop if you need to connect your checkbox with another element describing its use, other than the property label. | `string` | `undefined` |
11-
| `checked` | `checked` | | `boolean` | `false` |
12-
| `disabled` | `disabled` | | `boolean` | `false` |
13-
| `label` | `label` | | `string` | `undefined` |
14-
| `name` | `name` | | `string` | `undefined` |
15-
| `value` | `value` | | `string` | `undefined` |
8+
| Property | Attribute | Description | Type | Default |
9+
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- |
10+
| `ariaLabelledby` | `aria-labelledby` | Use this prop if you need to connect your checkbox with another element describing its use, other than the property label. | `string` | `undefined` |
11+
| `checked` | `checked` | | `boolean` | `false` |
12+
| `disabled` | `disabled` | | `boolean` | `false` |
13+
| `label` | `label` | | `string` | `undefined` |
14+
| `name` | `name` | | `string` | `undefined` |
15+
| `validate` | -- | Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid. | `(value: string) => string` | `undefined` |
16+
| `value` | `value` | | `string` | `undefined` |
1617

1718

1819
## Events
1920

20-
| Event | Description | Type |
21-
| --------------- | ----------------------------------------------- | --------------------------------------------------------------- |
22-
| `_scoutFieldId` | Internal event used for form field association. | `CustomEvent<string>` |
23-
| `scoutChecked` | | `CustomEvent<{ checked: boolean; element: HTMLInputElement; }>` |
21+
| Event | Description | Type |
22+
| ----------------- | ----------------------------------------------- | --------------------------------------------------------------- |
23+
| `_scoutFieldId` | Internal event used for form field association. | `CustomEvent<string>` |
24+
| `_scoutInvalid` | Internal event used for form field validation. | `CustomEvent<void>` |
25+
| `_scoutValidate` | Internal event used for form field validation. | `CustomEvent<{ element: HTMLElement; }>` |
26+
| `scoutBlur` | | `CustomEvent<void>` |
27+
| `scoutChecked` | | `CustomEvent<{ checked: boolean; element: HTMLInputElement; }>` |
28+
| `scoutInputChnge` | | `CustomEvent<{ value: string; element: HTMLElement; }>` |
2429

2530

2631
## Dependencies

‎packages/ui-webc/src/components/radio-button/radio-button.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import {
22
Component,
3+
type ComponentInterface,
34
Event,
45
type EventEmitter,
56
h,
7+
Mixin,
68
Prop,
7-
State,
89
} from "@stencil/core";
10+
import { inputMixin } from "../../mixins/inputMixin";
911

1012
@Component({
1113
tag: "scout-radio-button",
1214
styleUrl: "radio-button.css",
1315
scoped: true,
1416
})
15-
export class ScoutRadioButton {
17+
export class ScoutRadioButton
18+
extends Mixin(inputMixin)
19+
implements ComponentInterface
20+
{
1621
@Prop() checked: boolean = false;
1722

1823
@Prop() disabled: boolean = false;
@@ -28,21 +33,10 @@ export class ScoutRadioButton {
2833

2934
@Prop() name: string;
3035

31-
@State() ariaId: string;
32-
3336
@Event() scoutChecked: EventEmitter<{
3437
checked: boolean;
3538
element: HTMLInputElement;
3639
}>;
37-
/**
38-
* Internal event used for form field association.
39-
*/
40-
@Event() _scoutFieldId: EventEmitter<string>;
41-
42-
componentWillLoad(): Promise<void> | void {
43-
this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
44-
this._scoutFieldId.emit(this.ariaId);
45-
}
4640

4741
onChange(event: Event) {
4842
const radio = event.target as HTMLInputElement;
@@ -58,6 +52,7 @@ export class ScoutRadioButton {
5852
return (
5953
<Tag>
6054
<input
55+
ref={(el) => this.setInputRef(el)}
6156
id={this.ariaId}
6257
type="radio"
6358
value={this.value}
@@ -67,7 +62,12 @@ export class ScoutRadioButton {
6762
aria-disabled={this.disabled}
6863
disabled={this.disabled}
6964
checked={this.checked}
70-
onChange={(event) => this.onChange(event)}
65+
onChange={(event) => {
66+
this.onInput();
67+
this.onChange(event);
68+
}}
69+
onBlur={() => this.onBlur()}
70+
onInvalid={() => this.onInvalid()}
7171
/>
7272
{this.label}
7373
</Tag>

‎packages/ui-webc/src/components/radio-button/readme.md‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,27 @@
55

66
## Properties
77

8-
| Property | Attribute | Description | Type | Default |
9-
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- |
10-
| `ariaLabelledby` | `aria-labelledby` | Use this prop if you need to connect your radio button with another element describing its use, other than the property label. | `string` | `undefined` |
11-
| `checked` | `checked` | | `boolean` | `false` |
12-
| `disabled` | `disabled` | | `boolean` | `false` |
13-
| `label` | `label` | | `string` | `undefined` |
14-
| `name` | `name` | | `string` | `undefined` |
15-
| `value` | `value` | | `string` | `undefined` |
8+
| Property | Attribute | Description | Type | Default |
9+
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- |
10+
| `ariaLabelledby` | `aria-labelledby` | Use this prop if you need to connect your radio button with another element describing its use, other than the property label. | `string` | `undefined` |
11+
| `checked` | `checked` | | `boolean` | `false` |
12+
| `disabled` | `disabled` | | `boolean` | `false` |
13+
| `label` | `label` | | `string` | `undefined` |
14+
| `name` | `name` | | `string` | `undefined` |
15+
| `validate` | -- | Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid. | `(value: string) => string` | `undefined` |
16+
| `value` | `value` | | `string` | `undefined` |
1617

1718

1819
## Events
1920

20-
| Event | Description | Type |
21-
| --------------- | ----------------------------------------------- | --------------------------------------------------------------- |
22-
| `_scoutFieldId` | Internal event used for form field association. | `CustomEvent<string>` |
23-
| `scoutChecked` | | `CustomEvent<{ checked: boolean; element: HTMLInputElement; }>` |
21+
| Event | Description | Type |
22+
| ----------------- | ----------------------------------------------- | --------------------------------------------------------------- |
23+
| `_scoutFieldId` | Internal event used for form field association. | `CustomEvent<string>` |
24+
| `_scoutInvalid` | Internal event used for form field validation. | `CustomEvent<void>` |
25+
| `_scoutValidate` | Internal event used for form field validation. | `CustomEvent<{ element: HTMLElement; }>` |
26+
| `scoutBlur` | | `CustomEvent<void>` |
27+
| `scoutChecked` | | `CustomEvent<{ checked: boolean; element: HTMLInputElement; }>` |
28+
| `scoutInputChnge` | | `CustomEvent<{ value: string; element: HTMLElement; }>` |
2429

2530

2631
## Dependencies

‎packages/ui-webc/src/components/select/readme.md‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,23 @@ A styled native select component for choosing from a list of options.
3030

3131
## Properties
3232

33-
| Property | Attribute | Description | Type | Default |
34-
| ---------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- |
35-
| `disabled` | `disabled` | Whether the select is disabled. Disabled selects are not editable, excluded from tab order and are not validated. | `boolean` | `false` |
36-
| `name` | `name` | | `string` | `undefined` |
37-
| `validate` | -- | Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the select as invalid, or null to mark it as valid. | `(value: string) => string` | `undefined` |
38-
| `value` | `value` | Value of the select element, in case you want to control it yourself. | `string` | `""` |
33+
| Property | Attribute | Description | Type | Default |
34+
| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- |
35+
| `disabled` | `disabled` | Whether the select is disabled. Disabled selects are not editable, excluded from tab order and are not validated. | `boolean` | `false` |
36+
| `name` | `name` | | `string` | `undefined` |
37+
| `validate` | -- | Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid. | `(value: string) => string` | `undefined` |
38+
| `value` | `value` | Value of the select element, in case you want to control it yourself. | `string` | `""` |
3939

4040

4141
## Events
4242

43-
| Event | Description | Type |
44-
| ------------------ | ----------------------------------------------- | ------------------------------------------------------------- |
45-
| `_scoutFieldId` | Internal event used for form field association. | `CustomEvent<string>` |
46-
| `scoutBlur` | | `CustomEvent<void>` |
47-
| `scoutInputChange` | | `CustomEvent<{ value: string; element: HTMLSelectElement; }>` |
43+
| Event | Description | Type |
44+
| ----------------- | ----------------------------------------------- | ------------------------------------------------------- |
45+
| `_scoutFieldId` | Internal event used for form field association. | `CustomEvent<string>` |
46+
| `_scoutInvalid` | Internal event used for form field validation. | `CustomEvent<void>` |
47+
| `_scoutValidate` | Internal event used for form field validation. | `CustomEvent<{ element: HTMLElement; }>` |
48+
| `scoutBlur` | | `CustomEvent<void>` |
49+
| `scoutInputChnge` | | `CustomEvent<{ value: string; element: HTMLElement; }>` |
4850

4951

5052
----------------------------------------------

0 commit comments

Comments
 (0)