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

Type id as any in ComboBox, Dropdown, MultiSelect (#1019)

Browse source 
Loosen the prop type for `id`, `selectedId` to be `any` instead of a `string`.
This commit is contained in:
Eric Liu 2022-01-20 18:50:36 -08:00 • committed by GitHub
commit 1f7b5560a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 68 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

20
COMPONENT_INDEX.md
View file

@ -648,8 +648,10 @@ None.
### Types ### Types
```ts ```ts
export type ComboBoxItemId = any;
export interface ComboBoxItem { export interface ComboBoxItem {
id: string; id: ComboBoxItemId;
text: string; text: string;
} }
``` ```
@ -662,7 +664,7 @@ export interface ComboBoxItem {
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value | | value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
| selectedId | <code>let</code> | Yes | <code>string</code> | -- | Set the selected item by value id | | selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | -- | Set the selected item by value id |
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items | | items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
| itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item | | itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu | | direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
@ -689,8 +691,8 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------------------------- | | :--------- | :--------- | :---------------------------------------------------------------------- |
| select | dispatched | <code>{ selectedId: string; selectedItem: ComboBoxItem }</code> | | select | dispatched | <code>{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }</code> |
| keydown | forwarded | -- | | keydown | forwarded | -- |
| keyup | forwarded | -- | | keyup | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
@ -1151,7 +1153,7 @@ None.
### Types ### Types
```ts ```ts
export type DropdownItemId = string; export type DropdownItemId = any;
export type DropdownItemText = string; export type DropdownItemText = string;
@ -2401,7 +2403,7 @@ None.
### Types ### Types
```ts ```ts
export type MultiSelectItemId = string; export type MultiSelectItemId = any;
export type MultiSelectItemText = string; export type MultiSelectItemText = string;
@ -2423,7 +2425,7 @@ export interface MultiSelectItem {
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value | | value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids | | selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
| items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items | | items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
| itemToString | <code>let</code> | No | <code>(item: MultiSelectItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item | | itemToString | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | -- | Set the size of the combobox | | size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | -- | Set the size of the combobox |
| type | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect | | type | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu | | direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
@ -2455,8 +2457,8 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------------------------------------------------------------- | | :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- |
| select | dispatched | <code>{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> | | select | dispatched | <code>{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
| clear | dispatched | <code>any</code> | | clear | dispatched | <code>any</code> |
| keydown | forwarded | -- | | keydown | forwarded | -- |
| keyup | forwarded | -- | | keyup | forwarded | -- |

25
docs/src/COMPONENT_API.json
View file

@ -1398,7 +1398,7 @@
"name": "selectedId", "name": "selectedId",
"kind": "let", "kind": "let",
"description": "Set the selected item by value id", "description": "Set the selected item by value id",
"type": "string", "type": "ComboBoxItemId",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -1627,7 +1627,7 @@
{ {
"type": "dispatched", "type": "dispatched",
"name": "select", "name": "select",
"detail": "{ selectedId: string; selectedItem: ComboBoxItem }" "detail": "{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }"
}, },
{ "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" },
@ -1638,9 +1638,14 @@
], ],
"typedefs": [ "typedefs": [
{ {
"type": "{ id: string; text: string; }", "type": "any",
"name": "ComboBoxItemId",
"ts": "type ComboBoxItemId = any"
},
{
"type": "{ id: ComboBoxItemId; text: string; }",
"name": "ComboBoxItem", "name": "ComboBoxItem",
"ts": "interface ComboBoxItem { id: string; text: string; }" "ts": "interface ComboBoxItem { id: ComboBoxItemId; text: string; }"
} }
], ],
"rest_props": { "type": "Element", "name": "input" } "rest_props": { "type": "Element", "name": "input" }
@ -3254,9 +3259,9 @@
], ],
"typedefs": [ "typedefs": [
{ {
"type": "string", "type": "any",
"name": "DropdownItemId", "name": "DropdownItemId",
"ts": "type DropdownItemId = string" "ts": "type DropdownItemId = any"
}, },
{ {
"type": "string", "type": "string",
@ -6404,7 +6409,7 @@
"name": "itemToString", "name": "itemToString",
"kind": "let", "kind": "let",
"description": "Override the display of a multiselect item", "description": "Override the display of a multiselect item",
"type": "(item: MultiSelectItem) => string", "type": "(item: MultiSelectItem) => any",
"value": "(item) => item.text || item.id", "value": "(item) => item.text || item.id",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -6744,7 +6749,7 @@
{ {
"type": "dispatched", "type": "dispatched",
"name": "select", "name": "select",
"detail": "{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }" "detail": "{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }"
}, },
{ "type": "dispatched", "name": "clear", "detail": "any" }, { "type": "dispatched", "name": "clear", "detail": "any" },
{ "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" },
@ -6754,9 +6759,9 @@
], ],
"typedefs": [ "typedefs": [
{ {
"type": "string", "type": "any",
"name": "MultiSelectItemId", "name": "MultiSelectItemId",
"ts": "type MultiSelectItemId = string" "ts": "type MultiSelectItemId = any"
}, },
{ {
"type": "string", "type": "string",

7
src/ComboBox/ComboBox.svelte
View file

@ -1,7 +1,8 @@
<script> <script>
/** /**
* @typedef {{ id: string; text: string; }} ComboBoxItem * @typedef {any} ComboBoxItemId
* @event {{ selectedId: string; selectedItem: ComboBoxItem }} select * @typedef {{ id: ComboBoxItemId; text: string; }} ComboBoxItem
* @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select
*/ */
/** /**
@ -18,7 +19,7 @@
/** /**
* Set the selected item by value id * Set the selected item by value id
* @type {string} * @type {ComboBoxItemId}
*/ */
export let selectedId = undefined; export let selectedId = undefined;

2
src/Dropdown/Dropdown.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
/** /**
* @typedef {string} DropdownItemId * @typedef {any} DropdownItemId
* @typedef {string} DropdownItemText * @typedef {string} DropdownItemText
* @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
* @event {{ selectedId: DropdownItemId, selectedItem: DropdownItem }} select * @event {{ selectedId: DropdownItemId, selectedItem: DropdownItem }} select

6
src/MultiSelect/MultiSelect.svelte
View file

@ -1,9 +1,9 @@
<script> <script>
/** /**
* @typedef {string} MultiSelectItemId * @typedef {any} MultiSelectItemId
* @typedef {string} MultiSelectItemText * @typedef {string} MultiSelectItemText
* @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
* @event {{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select * @event {{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
* @event {any} clear * @event {any} clear
*/ */
@ -15,7 +15,7 @@
/** /**
* Override the display of a multiselect item * Override the display of a multiselect item
* @type {(item: MultiSelectItem) => string} * @type {(item: MultiSelectItem) => any}
*/ */
export let itemToString = (item) => item.text || item.id; export let itemToString = (item) => item.text || item.id;

5
tests/ComboBox.test.svelte
View file

@ -3,7 +3,7 @@
import type { ComboBoxItem } from "../types/ComboBox/ComboBox.svelte"; import type { ComboBoxItem } from "../types/ComboBox/ComboBox.svelte";
const items: ComboBoxItem[] = [ const items: ComboBoxItem[] = [
{ id: "0", text: "Slack" }, { id: 0, text: "Slack" },
{ id: "1", text: "Email" }, { id: "1", text: "Email" },
{ id: "2", text: "Fax" }, { id: "2", text: "Fax" },
]; ];
@ -20,6 +20,9 @@
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
items="{items}" items="{items}"
on:select="{(e) => {
console.log(e.detail.selectedId);
}}"
/> />
<ComboBox <ComboBox

5
tests/Dropdown.test.svelte
View file

@ -7,10 +7,13 @@
titleText="Contact" titleText="Contact"
selectedId="0" selectedId="0"
items="{[ items="{[
{ id: '0', text: 'Slack' }, { id: 0, text: 'Slack' },
{ id: '1', text: 'Email' }, { id: '1', text: 'Email' },
{ id: '2', text: 'Fax' }, { id: '2', text: 'Fax' },
]}" ]}"
on:select="{(e) => {
console.log(e.detail.selectedId);
}}"
/> />
<Dropdown <Dropdown

2
tests/MultiSelect.test.svelte
View file

@ -8,7 +8,7 @@
label="Select contact methods..." label="Select contact methods..."
hideLabel hideLabel
items="{[ items="{[
{ id: '0', text: 'Slack' }, { id: 0, text: 'Slack' },
{ id: '1', text: 'Email' }, { id: '1', text: 'Email' },
{ id: '2', text: 'Fax' }, { id: '2', text: 'Fax' },
]}" ]}"

11
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -1,8 +1,10 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte"; import { SvelteComponentTyped } from "svelte";
export type ComboBoxItemId = any;
export interface ComboBoxItem { export interface ComboBoxItem {
id: string; id: ComboBoxItemId;
text: string; text: string;
} }
@ -23,7 +25,7 @@ export interface ComboBoxProps
/** /**
* Set the selected item by value id * Set the selected item by value id
*/ */
selectedId?: string; selectedId?: ComboBoxItemId;
/** /**
* Specify the selected combobox value * Specify the selected combobox value
@ -140,7 +142,10 @@ export interface ComboBoxProps
export default class ComboBox extends SvelteComponentTyped< export default class ComboBox extends SvelteComponentTyped<
ComboBoxProps, ComboBoxProps,
{ {
select: CustomEvent<{ selectedId: string; selectedItem: ComboBoxItem }>; select: CustomEvent<{
selectedId: ComboBoxItemId;
selectedItem: ComboBoxItem;
}>;
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];

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

@ -1,7 +1,7 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte"; import { SvelteComponentTyped } from "svelte";
export type DropdownItemId = string; export type DropdownItemId = any;
export type DropdownItemText = string; export type DropdownItemText = string;

6
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -1,7 +1,7 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte"; import { SvelteComponentTyped } from "svelte";
export type MultiSelectItemId = string; export type MultiSelectItemId = any;
export type MultiSelectItemText = string; export type MultiSelectItemText = string;
@ -22,7 +22,7 @@ export interface MultiSelectProps
* Override the display of a multiselect item * Override the display of a multiselect item
* @default (item) => item.text || item.id * @default (item) => item.text || item.id
*/ */
itemToString?: (item: MultiSelectItem) => string; itemToString?: (item: MultiSelectItem) => any;
/** /**
* Set the selected ids * Set the selected ids
@ -210,7 +210,7 @@ export default class MultiSelect extends SvelteComponentTyped<
MultiSelectProps, MultiSelectProps,
{ {
select: CustomEvent<{ select: CustomEvent<{
selectedIds: string[]; selectedIds: MultiSelectItemId[];
selected: MultiSelectItem[]; selected: MultiSelectItem[];
unselected: MultiSelectItem[]; unselected: MultiSelectItem[];
}>; }>;