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

feat(multi-select): add itemToInput to allow customizing name/title/labelText

Browse source
This commit is contained in:
Eric Liu 2022-02-10 07:11:15 -08:00
commit 0f7349eff5
4 changed files with 53 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

4
COMPONENT_INDEX.md
View file

@ -2419,7 +2419,7 @@ export interface MultiSelectItem {
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | | :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
| selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element | | selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element | | fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
| multiSelectRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element | | multiSelectRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
@ -2429,7 +2429,7 @@ export interface MultiSelectItem {
| 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) => any</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 |
| itemToName | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.id</code> | Override the input name attribute of a multiselect item.<br />Defaults to using the item id | | itemToInput | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</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 |

8
docs/src/COMPONENT_API.json
View file

@ -6447,11 +6447,11 @@
"reactive": false "reactive": false
}, },
{ {
"name": "itemToName", "name": "itemToInput",
"kind": "let", "kind": "let",
"description": "Override the input name attribute of a multiselect item.\nDefaults to using the item id", "description": "Override the item name, title, labelText passed to the checkbox input",
"type": "(item: MultiSelectItem) => any", "type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }",
"value": "(item) => item.id", "value": "(item) => {}",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,

14
src/MultiSelect/MultiSelect.svelte
View file

@ -20,11 +20,10 @@
export let itemToString = (item) => item.text || item.id; export let itemToString = (item) => item.text || item.id;
/** /**
* Override the input name attribute of a multiselect item. * Override the item name, title, labelText passed to the checkbox input
* Defaults to using the item id * @type {(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }}
* @type {(item: MultiSelectItem) => any}
*/ */
export let itemToName = (item) => item.id; export let itemToInput = (item) => {};
/** /**
* Set the selected ids * Set the selected ids
@ -494,12 +493,13 @@
}}" }}"
> >
<Checkbox <Checkbox
name="{item.id}"
labelText="{itemToString(item)}"
title="{useTitleInItem ? itemToString(item) : undefined}"
{...itemToInput(item)}
readonly readonly
tabindex="-1" tabindex="-1"
id="checkbox-{item.id}" id="checkbox-{item.id}"
title="{useTitleInItem ? itemToString(item) : undefined}"
name="{itemToName(item)}"
labelText="{itemToString(item)}"
checked="{item.checked}" checked="{item.checked}"
disabled="{disabled}" disabled="{disabled}"
on:blur="{() => { on:blur="{() => {

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

@ -25,11 +25,14 @@ export interface MultiSelectProps
itemToString?: (item: MultiSelectItem) => any; itemToString?: (item: MultiSelectItem) => any;
/** /**
* Override the input name attribute of a multiselect item. * Override the item name, title, labelText passed to the checkbox input
* Defaults to using the item id * @default (item) => {}
* @default (item) => item.id
*/ */
itemToName?: (item: MultiSelectItem) => any; itemToInput?: (item: MultiSelectItem) => {
name?: string;
labelText?: any;
title?: string;
};
/** /**
* Set the selected ids * Set the selected ids