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

feat(select): support selected prop number type (#1355)

Browse source 
* feat(select): support number type

* Run "yarn build:docs"

* refactor(pagination): do not coerce `pageSize`, `page` to be numbers

* test(select): assert selected prop number type
This commit is contained in:
metonym 2022-06-18 11:09:41 -07:00 • committed by GitHub
commit 78d3f1328a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 37 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

14
COMPONENT_INDEX.md
View file

@ -3147,7 +3147,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLSelectElement</code> | <code>null</code> | Obtain a reference to the select HTML element |
| selected | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the selected item value |
| selected | No | <code>let</code> | Yes | <code>string &#124; number</code> | <code>undefined</code> | Specify the selected item value |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the select input |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | 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 | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the option value |
| text | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the option text |
| hidden | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the option |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the option |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- |
| value | No | <code>let</code> | No | <code>string &#124; number</code> | <code>""</code> | Specify the option value |
| text | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the option text |
| hidden | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the option |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the option |
### Slots

4
docs/src/COMPONENT_API.json
View file

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

12
src/Pagination/Pagination.svelte
View file

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

26
src/Select/Select.svelte
View file

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

5
src/Select/SelectItem.svelte
View file

@ -1,5 +1,8 @@
<script>
/** Specify the option value */
/**
* Specify the option value
* @type {string | number}
*/
export let value = "";
/** Specify the option text */

4
tests/Select.test.svelte
View file

@ -14,8 +14,8 @@
<SelectItem value="g100" text="Gray 100" />
</Select>
<Select labelText="Carbon theme" selected="g10">
<SelectItem value="0" text="Select a theme" disabled hidden />
<Select labelText="Carbon theme" selected="{0}">
<SelectItem value="{0}" text="Select a theme" disabled hidden />
<SelectItemGroup label="Light theme">
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />

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

@ -7,7 +7,7 @@ export interface SelectProps
* Specify the selected item value
* @default undefined
*/
selected?: string;
selected?: string | number;
/**
* Set the size of the select input

2
types/Select/SelectItem.svelte.d.ts vendored
View file

@ -6,7 +6,7 @@ export interface SelectItemProps {
* Specify the option value
* @default ""
*/
value?: string;
value?: string | number;
/**
* Specify the option text