@x33025/sveltely 0.1.0 → 0.1.1

package/dist/components/Library/Dropdown/Dropdown.demo.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import Dropdown from './Dropdown.svelte';
 
-	const items = [
+	const allItems = [
 		{
 			type: 'group' as const,
 			label: 'Publishing',
@@ -48,7 +48,35 @@
 		}
 	];
 
+	const filterEntries = (entries: typeof allItems, query: string): typeof allItems => {
+		const normalizedQuery = query.trim().toLowerCase();
+		if (!normalizedQuery) return allItems;
+
+		return entries.flatMap((entry) => {
+			if (entry.type === 'group') {
+				const nextItems = filterEntries(entry.items, normalizedQuery);
+				return nextItems.length > 0 ? [{ ...entry, items: nextItems }] : [];
+			}
+
+			if (entry.type === 'submenu') {
+				const nextItems = filterEntries(entry.items, normalizedQuery);
+				const matches = entry.label.toLowerCase().includes(normalizedQuery);
+				if (!matches && nextItems.length === 0) {
+					return [];
+				}
+				return [{ ...entry, items: matches ? entry.items : nextItems }];
+			}
+
+			return entry.label.toLowerCase().includes(normalizedQuery) ? [entry] : [];
+		});
+	};
+
+	let items = $state(allItems);
 	let value = $state<string | null>('draft');
+
+	const handleSearch = async (query: string) => {
+		items = filterEntries(allItems, query);
+	};
 </script>
 
-<Dropdown {items} bind:value placeholder="Choose status" searchable={true} />
+<Dropdown {items} bind:value placeholder="Choose status" onSearch={handleSearch} />

package/dist/components/Library/Dropdown/Dropdown.svelte

@@ -21,9 +21,9 @@
 		disabled?: boolean;
 		closeOnSelect?: boolean;
 		showCheck?: boolean;
-		searchable?: boolean;
 		searchPlaceholder?: string;
 		placement?: Anchor;
+		onSearch?: (query: string) => void | Promise<void>;
 		onSelect?: (item: DropdownItem<T>) => void;
 	} & StyleProps;
 
@@ -43,9 +43,9 @@
 		disabled = false,
 		closeOnSelect = true,
 		showCheck = true,
-		searchable = false,
 		searchPlaceholder = 'Search',
 		placement = 'bottom',
+		onSearch,
 		onSelect,
 		...styleProps
 	}: Props = $props();
@@ -53,6 +53,9 @@
 	const dropdownStyle = $derived.by(() => surfaceStyle(styleProps, 'dropdown'));
 
 	let query = $state('');
+	let lastSearchedQuery = '';
+
+	const searchEnabled = $derived(!!onSearch);
 
 	const flattenItems = (
 		entries: DropdownEntry<T>[],
@@ -69,25 +72,6 @@
 			return [{ ...entry, disabled: nextDisabled || entry.disabled }];
 		});
 
-	const filterEntries = (entries: DropdownEntry<T>[]): DropdownEntry<T>[] =>
-		entries.flatMap((entry) => {
-			if (isGroup(entry)) {
-				const nextItems = filterEntries(entry.items);
-				return nextItems.length > 0 ? [{ ...entry, items: nextItems }] : [];
-			}
-
-			if (isSubmenu(entry)) {
-				const nextItems = filterEntries(entry.items);
-				const matches = entry.label.toLowerCase().includes(normalizedQuery);
-				if (!matches && nextItems.length === 0) {
-					return [];
-				}
-				return [{ ...entry, items: matches ? entry.items : nextItems }];
-			}
-
-			return entry.label.toLowerCase().includes(normalizedQuery) ? [entry] : [];
-		});
-
 	const findFirstRenderableLabel = (entries: DropdownEntry<T>[]): string | null => {
 		for (const entry of entries) {
 			if (isGroup(entry)) {
@@ -100,8 +84,6 @@
 		return null;
 	};
 
-	const normalizedQuery = $derived(query.trim().toLowerCase());
-
 	const flatItems = $derived.by(() => flattenItems(items));
 
 	const selectedItem = $derived.by(
@@ -110,14 +92,12 @@
 
 	const triggerText = $derived(selectedItem?.label ?? placeholder);
 
-	const filteredItems = $derived.by(() =>
-		normalizedQuery ? filterEntries(items) : items
-	);
+	const filteredItems = $derived(items);
 
 	const firstRenderableLabel = $derived.by(() => findFirstRenderableLabel(filteredItems));
 
 	const itemRadiusSourceEnabled = $derived.by(() => {
-		if (searchable) return false;
+		if (searchEnabled) return false;
 		const firstEntry = filteredItems[0];
 		if (!firstEntry) return false;
 		if (isGroup(firstEntry)) {
@@ -143,6 +123,13 @@
 		disabled || inheritedDisabled || !!entry.disabled;
 
 	const isRadiusSource = (label: string) => itemRadiusSourceEnabled && label === firstRenderableLabel;
+
+	$effect(() => {
+		if (!onSearch) return;
+		if (query === lastSearchedQuery) return;
+		lastSearchedQuery = query;
+		void onSearch(query);
+	});
 </script>
 
 <Floating
@@ -174,9 +161,9 @@
 
 	<div
 		class="dropdown-content vstack"
-		style={`${dropdownStyle} --dropdown-item-radius: ${searchable ? 'var(--sveltely-border-radius)' : 'var(--sveltely-border-radius-nested)'};`}
+		style={`${dropdownStyle} --dropdown-item-radius: ${searchEnabled ? 'var(--sveltely-border-radius)' : 'var(--sveltely-border-radius-nested)'};`}
 	>
-		{#if searchable}
+		{#if searchEnabled}
 			<SearchInput
 				bind:value={query}
 				placeholder={searchPlaceholder}

package/dist/components/Library/Dropdown/Dropdown.svelte.d.ts

@@ -11,9 +11,9 @@ declare function $$render<T extends string | number = string>(): {
         disabled?: boolean;
         closeOnSelect?: boolean;
         showCheck?: boolean;
-        searchable?: boolean;
         searchPlaceholder?: string;
         placement?: Anchor;
+        onSearch?: (query: string) => void | Promise<void>;
         onSelect?: (item: DropdownItem<T>) => void;
     } & StyleProps;
     exports: {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",