mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
30cfc842d5* 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
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
/// <reference types="svelte" />
|
|
|
|
export interface HeaderSearchResult {
|
|
href: string;
|
|
text: string;
|
|
description?: string;
|
|
}
|
|
|
|
export interface HeaderSearchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
|
|
/**
|
|
* Specify the search input value
|
|
* @default ""
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Set to `true` to activate and focus the search bar
|
|
* @default false
|
|
*/
|
|
active?: boolean;
|
|
|
|
/**
|
|
* Obtain a reference to the input HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLInputElement;
|
|
|
|
/**
|
|
* Render a list of search results
|
|
* @default []
|
|
*/
|
|
results?: HeaderSearchResult[];
|
|
|
|
/**
|
|
* Specify the selected result index
|
|
* @default 0
|
|
*/
|
|
selectedResultIndex?: number;
|
|
}
|
|
|
|
export default class HeaderSearch {
|
|
$$prop_def: HeaderSearchProps;
|
|
$$slot_def: {
|
|
default: { result: HeaderSearchResult; index: number };
|
|
};
|
|
|
|
$on(eventname: "active", cb: (event: CustomEvent<any>) => void): () => void;
|
|
$on(eventname: "inactive", cb: (event: CustomEvent<any>) => void): () => void;
|
|
$on(eventname: "clear", cb: (event: CustomEvent<any>) => void): () => void;
|
|
$on(
|
|
eventname: "select",
|
|
cb: (event: CustomEvent<{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }>) => void
|
|
): () => void;
|
|
$on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
|
|
$on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
|
|
$on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
|
|
$on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
|
|
$on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
|
|
$on(eventname: string, cb: (event: Event) => void): () => void;
|
|
}
|