diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 052c625c..53cd8425 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -686,7 +686,9 @@ export interface ComboBoxItem { ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- | +| -- | Yes | { item: ComboBoxItem; index: number } | {itemToString(item)} | ### Events diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index f7698d84..33067a10 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1639,7 +1639,14 @@ } ], "moduleExports": [], - "slots": [], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{itemToString(item)}", + "slot_props": "{ item: ComboBoxItem; index: number }" + } + ], "events": [ { "type": "dispatched", diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx index b5d11af5..d934e11f 100644 --- a/docs/src/pages/components/ComboBox.svx +++ b/docs/src/pages/components/ComboBox.svx @@ -18,6 +18,12 @@ items={[ {id: "2", text: "Fax"} ]} /> +### Custom slot + +Override the default slot to customize the display of each item. Access the item and index through the `let:` directive. + + + ### Selected id + import { ComboBox } from "carbon-components-svelte"; + + + +
+ {item.text} +
+
+ id: {item.id} - index: + {index} +
+
+ + diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index be693f34..ae0967f8 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -3,6 +3,7 @@ * @typedef {any} ComboBoxItemId * @typedef {{ id: ComboBoxItemId; text: string; }} ComboBoxItem * @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select + * @slot {{ item: ComboBoxItem; index: number }} */ /** @@ -363,7 +364,9 @@ highlightedIndex = i; }}" > - {itemToString(item)} + + {itemToString(item)} + {#if selectedItem && selectedItem.id === item.id} {/if} diff --git a/tests/ComboBox.test.svelte b/tests/ComboBox.test.svelte index 6635317c..af93d81a 100644 --- a/tests/ComboBox.test.svelte +++ b/tests/ComboBox.test.svelte @@ -23,7 +23,12 @@ on:select="{(e) => { console.log(e.detail.selectedId); }}" -/> + let:item + let:index +> + {item.id} + {index} +
{ /** * Clear the combo box programmatically