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

selectedItem and AutoComplete example available

Browse source
This commit is contained in:
davideraccagni 2022-04-17 01:54:41 +02:00
commit ac97e7a966
24 changed files with 8267 additions and 653 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/AutoComplete/AutoComplete.svelte
View file

@ -27,6 +27,12 @@
*/
export let selectedId = undefined;
/**
* Specify the selected item
* @type {AutoCompleteItem}
*/
export let selectedItem = undefined;
/**
* Specify the type of dropdown
* @type {"default" | "inline"}
@ -90,7 +96,7 @@
/** Obtain a reference to the button HTML element */
export let ref = null;
/** ???? */
/** Specify the placeholder text */
export let placeholder = null;
import { createEventDispatcher } from "svelte";
@ -129,11 +135,13 @@
highlightedIndex > -1 &&
filteredItems[highlightedIndex].id !== selectedId
) {
selectedId = filteredItems[highlightedIndex].id;
innerValue = filteredItems[highlightedIndex].text;
selectedItem = filteredItems[highlightedIndex];
selectedId = selectedItem.id;
innerValue = selectedItem.text;
open = false;
}
} else if (key === "Backspace") {
selectedItem = undefined;
selectedId = undefined;
open = innerValue.length > 0 && filteredItems.length > 0;
} else if (key === "Tab") {
@ -160,7 +168,6 @@
(item) => innerValue?.length > 0 && item.text.startsWith(innerValue)
);
$: inline = type === "inline";
$: selectedItem = filteredItems.find((item) => item.id === selectedId);
$: if (!open) {
highlightedIndex = -1;
}
@ -251,6 +258,7 @@
active="{selectedId === item.id}"
highlighted="{highlightedIndex === i || selectedId === item.id}"
on:click="{() => {
selectedItem = item;
selectedId = item.id;
innerValue = item.text;
ref.focus();