feat/Autocomplete Generics

packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte

@@ -8,22 +8,25 @@
 	type TransitionIn = Transition;
 	type TransitionOut = Transition;
 	type Value = unknown;
+	type Meta = unknown;
 </script>
 
 <script
 	lang="ts"
-	generics="Value = unknown, TransitionIn extends Transition = SlideTransition, TransitionOut extends Transition = SlideTransition"
+	generics="Value = unknown, Meta = unknown, 
+	TransitionIn extends Transition = SlideTransition, TransitionOut extends Transition = SlideTransition"
 >
 	import { createEventDispatcher } from 'svelte';
 	// import { flip } from 'svelte/animate';
 	// import {slide} from 'svelte/transition';
 
 	// Types
 	import type { AutocompleteOption } from './types.js';
+	type Option = AutocompleteOption<Value, Meta>;
 
 	// Event Dispatcher
 	type AutocompleteEvent = {
-		selection: AutocompleteOption<Value>;
+		selection: Option;
 	};
 	const dispatch = createEventDispatcher<AutocompleteEvent>();
 
@@ -35,9 +38,9 @@
 	export let input: Value | undefined = undefined;
 	/**
 	 * Define values for the list.
-	 * @type {AutocompleteOption<Value>[]}
+	 * @type {Option[]}
 	 */
-	export let options: AutocompleteOption<Value>[] = [];
+	export let options: Option[] = [];
 	/** Limit the total number of suggestions. */
 	export let limit: number | undefined = undefined;
 	/**
@@ -114,7 +117,7 @@
 		listedOptions = _options;
 	}
 
-	function filterOptions(): AutocompleteOption<Value>[] {
+	function filterOptions(): Option[] {
 		// Create a local copy of options
 		let _options = [...listedOptions];
 		// Filter options
@@ -129,8 +132,8 @@
 		return _options;
 	}
 
-	function onSelection(option: AutocompleteOption<Value>) {
-		/** @event {AutocompleteOption<Value>} selection - Fire on option select. */
+	function onSelection(option: Option) {
+		/** @event {Option} selection - Fire on option select. */
 		dispatch('selection', option);
 	}
 

packages/skeleton/src/lib/components/Autocomplete/types.ts

@@ -1,12 +1,12 @@
 // Autocomplete Types
 
-export interface AutocompleteOption<Value = unknown> {
+export interface AutocompleteOption<Value = unknown, Meta = unknown> {
 	/** Provide a unique display label per option. Supports HTML. */
 	label: string;
 	/** Provide a unique option value. */
 	value: Value;
 	/** Provide a comma separated list of keywords. */
-	keywords?: any;
+	keywords?: string;
 	/** Pass arbitrary data per option. */
-	meta?: any;
+	meta?: Meta;
 }

sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte

@@ -39,15 +39,15 @@
 
 	let inputDemo = '';
 	let inputAllowlist = '';
-	type FlavorOption = AutocompleteOption<string>;
-	const flavorOptions = [
+	type FlavorOption = AutocompleteOption<string, { healthy: boolean }>;
+	const flavorOptions: FlavorOption[] = [
 		{ label: 'Vanilla', value: 'vanilla', keywords: 'plain, basic', meta: { healthy: false } },
 		{ label: 'Chocolate', value: 'chocolate', keywords: 'dark, white', meta: { healthy: false } },
 		{ label: 'Strawberry', value: 'strawberry', keywords: 'fruit', meta: { healthy: true } },
 		{ label: 'Neapolitan', value: 'neapolitan', keywords: 'mix, strawberry, chocolate, vanilla', meta: { healthy: false } },
 		{ label: 'Pineapple', value: 'pineapple', keywords: 'fruit', meta: { healthy: true } },
 		{ label: 'Peach', value: 'peach', keywords: 'fruit', meta: { healthy: true } }
-	] satisfies FlavorOption[];
+	];
 	const flavorAllowlist = ['neapolitan', 'pineapple', 'peach'];
 	let flavorDenylist = ['vanilla', 'chocolate'];