From cde8a79fa893fa770ddb2c4069afdab6fe924075 Mon Sep 17 00:00:00 2001 From: Koichi Kiyokawa <40315079+KoichiKiyokawa@users.noreply.github.com> Date: Tue, 18 Jan 2022 23:37:55 +0900 Subject: [PATCH] feat(ComboBox): selectedIndex -> selectedId (#1016) * feat(breaking): selectedIndex -> selectedId in ComboBox * docs: update ComboBox --- COMPONENT_INDEX.md | 68 +++++++++--------- docs/src/COMPONENT_API.json | 11 ++- docs/src/pages/components/ComboBox.svx | 4 +- .../framed/ComboBox/ComboBoxClear.svelte | 2 +- .../framed/ComboBox/MultipleComboBox.svelte | 15 ++-- .../framed/ComboBox/ReactiveComboBox.svelte | 10 +-- src/ComboBox/ComboBox.svelte | 70 ++++++++----------- tests/ComboBox.test.svelte | 2 +- types/ComboBox/ComboBox.svelte.d.ts | 11 +-- 9 files changed, 91 insertions(+), 102 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index aa36052b..5f2d5aa7 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -656,31 +656,31 @@ export interface ComboBoxItem { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | -| value | let | Yes | string | "" | Specify the selected combobox value | -| selectedIndex | let | Yes | number | -1 | Set the selected item by value index | -| items | let | No | ComboBoxItem[] | [] | Set the combobox items | -| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | -| size | let | No | "sm" | "xl" | -- | Set the size of the combobox | -| disabled | let | No | boolean | false | Set to `true` to disable the combobox | -| titleText | let | No | string | "" | Specify the title text of the combobox | -| placeholder | let | No | string | "" | Specify the placeholder text | -| helperText | let | No | string | "" | Specify the helper text | -| invalidText | let | No | string | "" | Specify the invalid state text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | -| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | -- | Specify a name attribute for the input | -| clear | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | +| value | let | Yes | string | "" | Specify the selected combobox value | +| selectedId | let | Yes | string | -- | Set the selected item by value id | +| items | let | No | ComboBoxItem[] | [] | Set the combobox items | +| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | +| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | +| size | let | No | "sm" | "xl" | -- | Set the size of the combobox | +| disabled | let | No | boolean | false | Set to `true` to disable the combobox | +| titleText | let | No | string | "" | Specify the title text of the combobox | +| placeholder | let | No | string | "" | Specify the placeholder text | +| helperText | let | No | string | "" | Specify the helper text | +| invalidText | let | No | string | "" | Specify the invalid state text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | +| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | -- | Specify a name attribute for the input | +| clear | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | ### Slots @@ -688,15 +688,15 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :------------------------------------------------------------------------------------- | -| select | dispatched | { selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem } | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| clear | forwarded | -- | -| scroll | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------------------------------------------------- | +| select | dispatched | { selectedId: string; selectedItem: ComboBoxItem } | +| keydown | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| clear | forwarded | -- | +| scroll | forwarded | -- | ## `ComposedModal` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index dd78b1b7..681d353d 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1395,11 +1395,10 @@ "reactive": false }, { - "name": "selectedIndex", + "name": "selectedId", "kind": "let", - "description": "Set the selected item by value index", - "type": "number", - "value": "-1", + "description": "Set the selected item by value id", + "type": "string", "isFunction": false, "isFunctionDeclaration": false, "constant": false, @@ -1616,7 +1615,7 @@ "kind": "function", "description": "Clear the combo box programmatically", "type": "(options?: { focus?: boolean; }) => void", - "value": "() => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = \"\"; if (options?.focus !== false) ref?.focus(); }", + "value": "() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = \"\"; if (options?.focus !== false) ref?.focus(); }", "isFunction": true, "isFunctionDeclaration": true, "constant": false, @@ -1628,7 +1627,7 @@ { "type": "dispatched", "name": "select", - "detail": "{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }" + "detail": "{ selectedId: string; selectedItem: ComboBoxItem }" }, { "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" }, diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx index f40f1679..c4117b7c 100644 --- a/docs/src/pages/components/ComboBox.svx +++ b/docs/src/pages/components/ComboBox.svx @@ -12,10 +12,10 @@ items={[ {id: "2", text: "Fax"} ]} /> -### Selected index +### Selected id (items[i] ? items[i].text : "N/A"); + const formatSelected = (id) => + items.find((item) => item.id === id)?.text ?? "N/A"; - $: primary = formatSelected(comboBox1_selectedIndex); - $: secondary = formatSelected(comboBox2_selectedIndex); + $: primary = formatSelected(comboBox1_selectedId); + $: secondary = formatSelected(comboBox2_selectedId); Primary: {primary} import { ComboBox, Button } from "carbon-components-svelte"; - let selectedIndex = 1; + let selectedId = "1";
- - + + diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 8e2318f1..38ff2ff5 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -1,7 +1,7 @@