Autocomplete Complete

.eslintrc.cjs

@@ -16,5 +16,5 @@ module.exports = {
 		browser: true,
 		es2017: true,
 		node: true
-	}
+	},
 };

src/docs/links.ts

@@ -94,6 +94,7 @@ export const menuNavLinks: any = [
 			{ href: '/components/app-bar', label: 'App Bar', keywords: 'header, top, bar, title' },
 			{ href: '/components/app-rail', label: 'App Rail', keywords: 'nav, navigation, tile, sidebar' },
 			{ href: '/components/app-shell', label: 'App Shell', keywords: 'layout, header, footer, sidebar, page, content' },
+			{ href: '/components/autocomplete', label: 'Autocomplete', keywords: 'input, filter, fuzzy, auto, complete, suggest' },
 			{ href: '/components/avatars', label: 'Avatars', keywords: 'image, initial, filter' },
 			{ href: '/components/conic-gradients', label: 'Conic Gradients', keywords: 'chart, graph, circle, pie, spinner, legend' },
 			{ href: '/components/file-buttons', label: 'File Buttons', keywords: 'upload, form, input, file, media' },

src/lib/components/Autocomplete/Autocomplete.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	const dispatch = createEventDispatcher();
+
+	// Types
+	import type { AutocompleteOption } from './types';
+
+	// Props
+	/**
+	 * Bind the input value.
+	 * @type {unknown}
+	 */
+	export let input: unknown = undefined;
+	/**
+	 * Define values for the list
+	 * @type {AutocompleteOption[]}
+	 */
+	export let options: AutocompleteOption[] = [];
+	/**
+	 * Provide whitelisted values
+	 * @type {unknown[]}
+	 */
+	export let whitelist: unknown[] = [];
+	/**
+	 * Provide blacklist values
+	 * @type {unknown[]}
+	 */
+	export let blacklist: unknown[] = [];
+	/** Provide a HTML markup to display when no match is found. */
+	export let emptyState: string = 'No Results Found.';
+	/** Set the animation duration. Use zero to disable. */
+	export let duration: number = 200;
+	// Props (region)
+	/** Provide arbitrary classes to nav element. */
+	export let regionNav: string = '';
+	/** Provide arbitrary classes to each list. */
+	export let regionList: string = 'list-nav';
+	/** Provide arbitrary classes to each list item. */
+	export let regionItem: string = '';
+	/** Provide arbitrary classes to each button. */
+	export let regionButton: string = 'w-full';
+	/** Provide arbitrary classes to empty message. */
+	export let regionEmpty: string = 'text-center';
+
+	// Local
+	let listedOptions = options;
+
+	// Whitelist Options
+	function whitelistOptions(): void {
+		if (!whitelist.length) return;
+		listedOptions = [...options].filter((option: AutocompleteOption) => whitelist.includes(option.value));
+	}
+
+	// Blacklist Options
+	function blacklistOptions(): void {
+		if (!blacklist.length) return;
+		const toBlacklist = new Set(blacklist);
+		listedOptions = [...options].filter((option: AutocompleteOption) => !toBlacklist.has(option.value));
+	}
+
+	function filterOptions(): AutocompleteOption[] {
+		// Create a local copy of options
+		let _options = [...listedOptions];
+		// Filter options
+		_options = _options.filter((option: AutocompleteOption) => {
+			// Format the input search value
+			const inputFormatted = String(input).toLowerCase().trim();
+			// Format the option
+			let optionFormatted = JSON.stringify([option.label, option.value, option.keywords]).toLowerCase();
+			// Check Match
+			if (optionFormatted.includes(inputFormatted)) return option;
+		});
+		return _options;
+	}
+
+	function onSelection(option: AutocompleteOption) {
+		/** @event {AutocompleteOption} selection - Fire on option select. */
+		dispatch('selection', option);
+	}
+
+	// State
+	$: if (whitelist) whitelistOptions();
+	$: if (blacklist) blacklistOptions();
+	$: optionsFiltered = input ? filterOptions() : listedOptions;
+	// Reactive
+	$: classsesBase = `${$$props.class ?? ''}`;
+	$: classesNav = `${regionNav}`;
+	$: classesList = `${regionList}`;
+	$: classesItem = `${regionItem}`;
+	$: classesButton = `${regionButton}`;
+	$: classesEmtpy = `${regionEmpty}`;
+</script>
+
+<div class="autocomplete {classsesBase}" data-testid="autocomplete">
+	{#if optionsFiltered.length > 0}
+		<nav class="autocomplete-nav {classesNav}">
+			<ul class="autocomplete-list {classesList}">
+				{#each optionsFiltered as option, i (option)}
+					<li class="autocomplete-item {classesItem}" animate:flip={{ duration }} transition:slide|local={{ duration }}>
+						<button class="autocomplete-button {classesButton}" type="button" on:click={() => onSelection(option)} on:click on:keypress>
+							{@html option.label}
+						</button>
+					</li>
+				{/each}
+			</ul>
+		</nav>
+	{:else}
+		<div class="autocomplete-empty {classesEmtpy}">{emptyState}</div>
+	{/if}
+</div>

src/lib/components/Autocomplete/types.ts

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

src/lib/components/InputChip/InputChip.svelte

@@ -10,6 +10,8 @@
 	const dispatch = createEventDispatcher();
 
 	// Props
+	/** Bind the input value. */
+	export let input: string = '';
 	/**
 	 * Set a unique select input name.
 	 * @type {string}
@@ -59,27 +61,27 @@
 	const cInputField = 'unstyled bg-transparent border-0 !ring-0 p-0 w-full';
 
 	// Local
-	let inputValue = '';
+	// let input = '';
 	let inputValid = true;
 
 	function onInputHandler(): void {
 		inputValid = true;
 	}
 
 	function validate(): boolean {
-		if (!inputValue) return false;
+		if (!input) return false;
 		// Custom validation
-		if (validation !== undefined && !validation(inputValue)) return false;
+		if (validation !== undefined && !validation(input)) return false;
 		// Maxiumum
 		if (max !== -1 && value.length >= max) return false;
 		// Minimum Character Length
-		if (minlength !== -1 && inputValue.length < minlength) return false;
+		if (minlength !== -1 && input.length < minlength) return false;
 		// Maxiumum Character Length
-		if (maxlength !== -1 && inputValue.length > maxlength) return false;
+		if (maxlength !== -1 && input.length > maxlength) return false;
 		// Whitelist (if available)
-		if (whitelist.length > 0 && !whitelist.includes(inputValue)) return false;
+		if (whitelist.length > 0 && !whitelist.includes(input)) return false;
 		// Value is unique
-		if (allowDuplicates === false && value.includes(inputValue)) return false;
+		if (allowDuplicates === false && value.includes(input)) return false;
 		// State is valid
 		return true;
 	}
@@ -90,15 +92,15 @@
 		inputValid = validate();
 		if (inputValid === false) return;
 		// Format: trim value
-		inputValue = inputValue.trim();
+		input = input.trim();
 		// Format: to lowercase (if enabled)
-		inputValue = allowUpperCase ? inputValue : inputValue.toLowerCase();
+		input = allowUpperCase ? input : input.toLowerCase();
 		// Append value to array
-		value = [...value, inputValue];
+		value = [...value, input];
 		/** @event {{ event: Event, chipIndex: number, chipValue: string }} add - Fires when a chip is added. */
-		dispatch('add', { event, chipIndex: value.length - 1, chipValue: inputValue });
+		dispatch('add', { event, chipIndex: value.length - 1, chipValue: input });
 		// Clear input value
-		inputValue = '';
+		input = '';
 	}
 
 	function removeChip(event: Event, chipIndex: number, chipValue: string): void {
@@ -131,7 +133,7 @@
 		<form on:submit={addChip}>
 			<input
 				type="text"
-				bind:value={inputValue}
+				bind:value={input}
 				placeholder={$$restProps.placeholder ?? 'Enter values...'}
 				class="input-chip-field {classesInputField}"
 				on:input={onInputHandler}

src/lib/index.ts

@@ -2,6 +2,7 @@
 
 // Types ---
 
+export type { AutocompleteOption } from './components/Autocomplete/types';
 export type { ConicStop } from './components/ConicGradient/types';
 export type { DrawerSettings } from './utilities/Drawer/types';
 export type { ModalSettings, ModalComponent } from './utilities/Modal/types';
@@ -70,6 +71,7 @@ export { default as AppBar } from './components/AppBar/AppBar.svelte';
 export { default as AppRail } from './components/AppRail/AppRail.svelte';
 export { default as AppRailTile } from './components/AppRail/AppRailTile.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as Autocomplete } from './components/Autocomplete/Autocomplete.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as ConicGradient } from './components/ConicGradient/ConicGradient.svelte';
 export { default as FileButton } from './components/FileButton/FileButton.svelte';

src/lib/styles/elements/lists.css

@@ -40,6 +40,8 @@
 		@apply px-4 py-2;
 		/* Hover */
 		@apply bg-primary-hover-token;
+		/* Focus */
+		@apply focus:!variant-filled-primary outline-none;
 		/* Cursor */
 		@apply cursor-pointer;
 		/* Theme: Rounded */