diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 29cee82b..a386f367 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3147,7 +3147,7 @@ None. | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- | | ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | -| selected | No | let | Yes | string | undefined | Specify the selected item value | +| selected | No | let | Yes | string | number | undefined | Specify the selected item value | | size | No | let | No | "sm" | "xl" | undefined | Set the size of the select input | | inline | No | let | No | boolean | false | Set to `true` to use the inline variant | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | @@ -3184,12 +3184,12 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------- | -| value | No | let | No | string | "" | Specify the option value | -| text | No | let | No | string | "" | Specify the option text | -| hidden | No | let | No | boolean | false | Set to `true` to hide the option | -| disabled | No | let | No | boolean | false | Set to `true` to disable the option | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- | +| value | No | let | No | string | number | "" | Specify the option value | +| text | No | let | No | string | "" | Specify the option text | +| hidden | No | let | No | boolean | false | Set to `true` to hide the option | +| disabled | No | let | No | boolean | false | Set to `true` to disable the option | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 975ca64b..5807768b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -10027,7 +10027,7 @@ "name": "selected", "kind": "let", "description": "Specify the selected item value", - "type": "string", + "type": "string | number", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -10252,7 +10252,7 @@ "name": "value", "kind": "let", "description": "Specify the option value", - "type": "string", + "type": "string | number", "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte index 948c9270..acb01456 100644 --- a/src/Pagination/Pagination.svelte +++ b/src/Pagination/Pagination.svelte @@ -85,17 +85,7 @@ } }); - $: { - if (typeof page !== "number") { - page = Number(page); - } - - if (typeof pageSize !== "number") { - pageSize = Number(pageSize); - } - - dispatch("update", { pageSize, page }); - } + $: dispatch("update", { pageSize, page }); $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1); $: selectItems = Array.from({ length: totalPages }, (_, i) => i); $: backButtonDisabled = disabled || page === 1; diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte index 78eb8c97..1fbbdf81 100644 --- a/src/Select/Select.svelte +++ b/src/Select/Select.svelte @@ -5,7 +5,7 @@ /** * Specify the selected item value - * @type {string} + * @type {string | number} */ export let selected = undefined; @@ -73,6 +73,7 @@ const selectedValue = writable(selected); const defaultSelectId = writable(null); const defaultValue = writable(null); + const itemTypesByValue = writable({}); setContext("Select", { selectedValue, @@ -89,9 +90,24 @@ selectedValue.set(value); } } + + itemTypesByValue.update((types) => ({ + ...types, + [value]: typeof value, + })); }, }); + const handleChange = ({ target }) => { + let value = target.value; + + if ($itemTypesByValue[value] === "number") { + value = Number(value); + } + + selectedValue.set(value); + }; + afterUpdate(() => { selected = $selectedValue; dispatch("change", $selectedValue); @@ -139,9 +155,7 @@ class:bx--select-input="{true}" class:bx--select-input--sm="{size === 'sm'}" class:bx--select-input--xl="{size === 'xl'}" - on:change="{({ target }) => { - selectedValue.set(target.value); - }}" + on:change="{handleChange}" on:input on:focus on:blur @@ -184,9 +198,7 @@ class:bx--select-input="{true}" class:bx--select-input--sm="{size === 'sm'}" class:bx--select-input--xl="{size === 'xl'}" - on:change="{({ target }) => { - selectedValue.set(target.value); - }}" + on:change="{handleChange}" on:input on:focus on:blur diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte index abd4e771..e009ba62 100644 --- a/src/Select/SelectItem.svelte +++ b/src/Select/SelectItem.svelte @@ -1,5 +1,8 @@