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(multi-select): add itemToProp to customize name, title, labelText values passed to input (#1074)

Browse source 
Currently, the input `name` for each item uses the same value as `itemToString(item)`.

This adds an `itemToInput` prop to allow the consumer to customize the name/title/labelText values passed to the `Checkbox` input.

The name attribute now defaults to use the `item.id` instead of `item.text`.
This commit is contained in:
metonym 2022-02-10 08:32:24 -08:00 • committed by GitHub
commit 2148e1c7b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -2429,6 +2429,7 @@ export interface MultiSelectItem {
| 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 |
| 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 |
| 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 |
| 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 |

11
docs/src/COMPONENT_API.json
View file

@ -6446,6 +6446,17 @@
"constant": false,
"reactive": false
},
{
"name": "itemToInput",
"kind": "let",
"description": "Override the item name, title, labelText passed to the checkbox input",
"type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }",
"value": "(item) => {}",
"isFunction": true,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "selectedIds",
"kind": "let",

13
src/MultiSelect/MultiSelect.svelte
View file

@ -23,6 +23,12 @@
*/
export let itemToString = (item) => item.text || item.id;
/**
* Override the item name, title, labelText passed to the checkbox input
* @type {(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }}
*/
export let itemToInput = (item) => {};
/**
* Set the selected ids
* @type {MultiSelectItemId[]}
@ -478,12 +484,13 @@
}}"
>
<Checkbox
name="{item.id}"
labelText="{itemToString(item)}"
title="{useTitleInItem ? itemToString(item) : undefined}"
{...itemToInput(item)}
readonly
tabindex="-1"
id="checkbox-{item.id}"
title="{useTitleInItem ? itemToString(item) : undefined}"
name="{itemToString(item)}"
labelText="{itemToString(item)}"
checked="{item.checked}"
disabled="{disabled}"
on:blur="{() => {

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

@ -24,6 +24,16 @@ export interface MultiSelectProps
*/
itemToString?: (item: MultiSelectItem) => any;
/**
* Override the item name, title, labelText passed to the checkbox input
* @default (item) => {}
*/
itemToInput?: (item: MultiSelectItem) => {
name?: string;
labelText?: any;
title?: string;
};
/**
* Set the selected ids
* @default []