This commit is contained in:
2026-04-06 18:07:39 +02:00
parent 294547fc56
commit 071a215393
80 changed files with 593 additions and 2085 deletions

View File

@@ -14,7 +14,7 @@ Searchable dropdown with autocomplete functionality, keyboard navigation, and re
| `options` | `Array<string \| {value: string, label: string}>` | `[]` | Options to search from |
| `value` | `string \| Signal<string>` | `''` | Selected value |
| `placeholder`| `string` | `'Search...'` | Placeholder text |
| `onSelect` | `function` | `-` | Called when an option is selected |
| `onselect` | `function` | `-` | Called when an option is selected |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
## Live Examples
@@ -37,7 +37,7 @@ const BasicDemo = () => {
label: 'Search fruit',
options: fruits,
value: selected,
onSelect: (value) => selected(value)
onselect: (value) => selected(value)
});
};
Mount(BasicDemo, '#demo-basic');
@@ -71,7 +71,7 @@ const ObjectsDemo = () => {
label: 'Search country',
options: countries,
value: selectedLabel,
onSelect: (item) => {
onselect: (item) => {
const selectedItem = typeof item === 'string'
? countries.find(c => c.label === item)
: item;
@@ -109,7 +109,7 @@ const ReactiveDemo = () => {
label: 'Programming language',
options: programmingLanguages,
value: selected,
onSelect: (value) => selected(value)
onselect: (value) => selected(value)
}),
() => selected() ? Div({ class: 'alert alert-info' }, [
`You selected: ${selected()}`
@@ -154,7 +154,7 @@ const DynamicDemo = () => {
label: 'Search item',
options: () => allItems[filterType()],
value: selected,
onSelect: (value) => selected(value)
onselect: (value) => selected(value)
})
]);
};
@@ -222,7 +222,7 @@ Mount(VariantsDemo, '#demo-variants');
label: 'Search fruit',
options: fruits,
value: selected,
onSelect: (value) => selected(value)
onselect: (value) => selected(value)
});
};
Mount(BasicDemo, basicTarget);
@@ -249,7 +249,7 @@ Mount(VariantsDemo, '#demo-variants');
label: 'Search country',
options: countries,
value: selectedLabel,
onSelect: (item) => {
onselect: (item) => {
const selectedItem = typeof item === 'string'
? countries.find(c => c.label === item)
: item;
@@ -280,7 +280,7 @@ Mount(VariantsDemo, '#demo-variants');
label: 'Programming language',
options: programmingLanguages,
value: selected,
onSelect: (value) => selected(value)
onselect: (value) => selected(value)
}),
() => selected() ? Div({ class: 'alert alert-info' }, [
`You selected: ${selected()}`
@@ -318,7 +318,7 @@ Mount(VariantsDemo, '#demo-variants');
label: 'Search item',
options: () => allItems[filterType()],
value: selected,
onSelect: (value) => selected(value)
onselect: (value) => selected(value)
})
]);
};