mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(Select)!: dispatch update instead of input

Browse source 
Adjust Select docs to use native change event handling.
This commit is contained in:
Enrico Sacchetti 2022-12-12 11:34:55 -05:00
commit 1b54825c85
5 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
COMPONENT_INDEX.md
View file

@ -3180,8 +3180,9 @@ None.
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------- |
| input | dispatched | <code>string &#124; number</code> |
| update | dispatched | <code>string &#124; number</code> |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |

3
docs/src/COMPONENT_API.json
View file

@ -10257,8 +10257,9 @@
}
],
"events": [
{ "type": "dispatched", "name": "input", "detail": "string | number" },
{ "type": "dispatched", "name": "update", "detail": "string | number" },
{ "type": "forwarded", "name": "change", "element": "select" },
{ "type": "forwarded", "name": "input", "element": "select" },
{ "type": "forwarded", "name": "focus", "element": "select" },
{ "type": "forwarded", "name": "blur", "element": "select" }
],

6
docs/src/pages/components/Select.svx
View file

@ -11,7 +11,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value.
<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" />
<SelectItem value="g10" />
<SelectItem value="g80" />
@ -23,7 +23,7 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u
Use the `text` prop on `SelectItem` to customize the display value.
<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
@ -35,7 +35,7 @@ Use the `text` prop on `SelectItem` to customize the display value.
Use the `selected` prop to specify an initial value.
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.detail)}>
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />

5
src/Select/Select.svelte
View file

@ -1,6 +1,6 @@
<script>
/**
* @event {string | number} input
* @event {string | number} update
*/
/**
@ -114,7 +114,7 @@
selected = $selectedValue;
if (prevSelected !== undefined && selected !== prevSelected) {
dispatch("input", $selectedValue);
dispatch("update", $selectedValue);
}
prevSelected = selected;
@ -207,6 +207,7 @@
class:bx--select-input--sm="{size === 'sm'}"
class:bx--select-input--xl="{size === 'xl'}"
on:change="{handleChange}"
on:change
on:input
on:focus
on:blur

3
types/Select/Select.svelte.d.ts vendored
View file

@ -109,8 +109,9 @@ export interface SelectProps
export default class Select extends SvelteComponentTyped<
SelectProps,
{
input: CustomEvent<string | number>;
update: CustomEvent<string | number>;
change: WindowEventMap["change"];
input: WindowEventMap["input"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},