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

feat(header-search): pass index as a slot prop

Browse source
This commit is contained in:
Eric Liu 2020-11-26 15:29:32 -08:00
commit 38e6985926
2 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/UIShell/HeaderSearch.svelte
View file

@ -5,6 +5,7 @@
* @event {any} inactive * @event {any} inactive
* @event {any} clear * @event {any} clear
* @event {{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }} select * @event {{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }} select
* @slot {{ result: HeaderSearchResult; index: number }}
*/ */
/** Specify the search input value */ /** Specify the search input value */
@ -271,7 +272,7 @@
class:selected="{selectedId === `search-menuitem-${i}`}" class:selected="{selectedId === `search-menuitem-${i}`}"
on:click|preventDefault="{selectResult}" on:click|preventDefault="{selectResult}"
> >
<slot result="{result}"> <slot result="{result}" index="{i}">
{result.text} {result.text}
{#if result.description}<span>– {result.description}</span>{/if} {#if result.description}<span>– {result.description}</span>{/if}
</slot> </slot>

6
tests/HeaderSearch.svelte
View file

@ -73,7 +73,11 @@
on:select="{(e) => { on:select="{(e) => {
console.log('on:select', e.detail); console.log('on:select', e.detail);
}}" }}"
/> let:result
let:index
>
<div>{result.text}{index}</div>
</HeaderSearch>
<HeaderAction bind:isOpen> <HeaderAction bind:isOpen>
<HeaderPanelLinks> <HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider> <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>