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

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

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="{() => {