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

Refactor UI Shell global search component (#417)

Browse source 
* feat(ui-shell): refactor UI Shell search component

* fix(ui-shell): dispatched event is "select", not "search"

* test(header-search): validate HeaderSearch types

* fix(header-search): selecting a result should reset the search

* feat(header-search): deefault selectedResultIndex should be 0

Reset selectedResultIndex, value after dispatching.

* docs(header-search): demo basic filtering

* chore: rebuild types, docs

* feat(header-search): pass index as a slot prop
This commit is contained in:
Eric Liu 2020-11-26 15:42:15 -08:00 • committed by GitHub
commit 30cfc842d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 737 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

45
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 154 components exported from carbon-components-svelte@0.23.2.
> 155 components exported from carbon-components-svelte@0.23.2.
## Components
@ -57,6 +57,7 @@
- [`HeaderPanelDivider`](#headerpaneldivider)
- [`HeaderPanelLink`](#headerpanellink)
- [`HeaderPanelLinks`](#headerpanellinks)
- [`HeaderSearch`](#headersearch)
- [`HeaderUtilities`](#headerutilities)
- [`Icon`](#icon)
- [`IconSkeleton`](#iconskeleton)
@ -1609,6 +1610,48 @@ None.
None.
## `HeaderSearch`
### Types
```ts
export interface HeaderSearchResult {
href: string;
text: string;
description?: string;
}
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------ | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------- |
| selectedResultIndex | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected result index |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| active | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to activate and focus the search bar |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the search input value |
| results | <code>let</code> | No | <code>HeaderSearchResult[]</code> | <code>[]</code> | Render a list of search results |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}&lt;span&gt;– {result.description}&lt;/span&gt;{/if}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :---------------------------------------------------------------------------------------------- |
| active | dispatched | <code>any</code> |
| inactive | dispatched | <code>any</code> |
| clear | dispatched | <code>any</code> |
| select | dispatched | <code>{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }</code> |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
## `HeaderUtilities`
### Props