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 @@