@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/form/Autocomplete.svelte

@@ -39,6 +39,10 @@
 		hideNoResults?: boolean;
 		/** Prevent updating value when an option is selected */
 		preventChangeOnSelection?: boolean;
+		/** Allow suggesting a new value be added when the input doesn't match an existing option */
+		allowAdd?: boolean;
+		/** Builds the label shown for the "add new value" suggestion (default: `Add "<value>"`) */
+		addItemLabel?: (value: string) => string;
 		/** Text shown while loading options */
 		loadingText?: string;
 		/** CSS classes for the FormGroup wrapper */
@@ -69,23 +73,17 @@
 		onSelect?: (e: ComboBoxItem) => void;
 		/** Callback when selection changes (returns full item object) */
 		onchangeRaw?: (e: ComboBoxItem | undefined) => void;
-		/** Allow creating new options not in the list */
-		allowCreate?: boolean;
-		/** Show a "no results" message when no options match */
-		showNoResultsMessage?: boolean;
-		/** Show required indicator (alias for required) */
-		showRequired?: boolean;
-		/** Callback when a new option is created (requires allowCreate) */
-		onCreate?: (value: string) => void;
+		/** Callback when the user chooses to add the typed value as a new item */
+		onItemAdded?: (value: string) => void;
 	}
 </script>
 
 <script lang="ts">
 	import ComboBoxMulti from './ComboBoxMulti.svelte';
-	import { clickOutside } from '../actions/ClickOutside.js';
+	import { clickOutside } from '../util/ClickOutside.js';
 	import Textbox from './Textbox.svelte';
-	import type { NotifyModel } from '../models/NotifyModel.js';
-	import { onMount, tick } from 'svelte';
+	import { ComboBoxCore, findItemByValue } from './comboBoxCore.svelte.js';
+	import { tick } from 'svelte';
 	import { useDialogEvents } from '../ui/DialogEvents.svelte.js';
 
 	let {
@@ -104,6 +102,8 @@
 		autofocusDialog = false,
 		hideNoResults = false,
 		preventChangeOnSelection = false,
+		allowAdd = false,
+		addItemLabel = (v: string) => `Add "${v}"`,
 		loadingText = '',
 		groupClass = '',
 		leftIconSvg,
@@ -119,40 +119,51 @@
 		enterPressed = undefined,
 		onSelect = undefined,
 		onchangeRaw = undefined,
-		allowCreate = false,
-		showNoResultsMessage = false,
-		showRequired = false,
-		onCreate = undefined
+		onItemAdded = undefined
 	}: AutocompleteProps = $props();
 
-	let preloading = $state(false);
-	let searching = $state(false);
-	let timeout: number;
+	const core = new ComboBoxCore({
+		getOptions: () => options,
+		getGroupedOptions: () => groupedOptions,
+		getValue: () => value,
+		setValue: (v) => (value = v ?? ''),
+		setRawValue: (r) => (rawValue = r),
+		getFetchFunction: () => fetchFunction,
+		getSearchFunction: () => searchFunction,
+		getRetrieveLabelFunction: () => retrieveLabelFunction,
+		clearUnknownStatic: false,
+		onOptionsChanged: () => {
+			if (value) core.filterLocal(value);
+		}
+	});
 
-	let allGroups: ComboBoxGroup[] = $state([]);
-	let filteredGroups: ComboBoxGroup[] = $state([]);
+	/** Synthetic "add new value" suggestion shown when the typed value matches no option */
+	let addOption: ComboBoxItem | undefined = $derived.by(() => {
+		const trimmed = value?.trim();
+		if (!allowAdd || !trimmed) return undefined;
+
+		const exists = core.allGroups
+			.flatMap((x) => x.items)
+			.some(
+				(x) =>
+					x.label.toLowerCase() === trimmed.toLowerCase() ||
+					x.value.toLowerCase() === trimmed.toLowerCase()
+			);
+		if (exists) return undefined;
+
+		return { label: addItemLabel(trimmed), value: trimmed, isAddNew: true };
+	});
+
+	/** Groups passed to the dropdown, including the add suggestion when applicable */
+	let displayGroups: ComboBoxGroup[] = $derived(
+		addOption
+			? [...core.filteredGroups, { label: '', items: [addOption], showGroupName: false }]
+			: core.filteredGroups
+	);
 
 	let open = $state(false);
 	let internalValue = $state(value);
 
-	onMount(() => {
-		if (fetchFunction) {
-			preloading = true;
-			fetchFunction().then((response: NotifyModel<ComboBoxItem[]>) => {
-				convertOptions(response.object!);
-				preloadValues();
-				preloading = false;
-			});
-		} else {
-			if (groupedOptions.length) {
-				convertGroupOptions(groupedOptions);
-			} else if (options.length) {
-				convertOptions(options);
-			}
-			preloadValues();
-		}
-	});
-
 	useDialogEvents({
 		onFirstOpen: () => {
 			if (autofocus) {
@@ -178,76 +189,28 @@
 	$effect(() => {
 		if (value !== internalValue) {
 			internalValue = value;
-			rawValue =
-				allGroups.flatMap((x) => x.items).find((x) => x.value === value) ?? undefined;
+			rawValue = findItemByValue(core.allGroups, value);
 			onchangeRaw?.(rawValue);
-			preloadValues();
+			core.preloadValues();
 		}
 	});
 
-	function preloadValues() {
-		if (!value) {
-			rawValue = undefined;
-			return;
-		}
-
-		const foundOption = allGroups.flatMap((x) => x.items).find((x) => x.value === value);
-
-		if (foundOption !== undefined) {
-			rawValue = foundOption;
-		} else if (searchFunction && retrieveLabelFunction) {
-			preloading = true;
-			retrieveLabelFunction(value).then((response) => {
-				rawValue = {
-					label: response.object ?? value!.toString(),
-					value: value!
-				};
-				preloading = false;
-			});
-		}
-	}
-
-	function convertOptions(opts: ComboBoxItem[]) {
-		const allOptions = opts.map((option) => ({
-			...option,
-			selected: option.value === value
-		}));
-		allGroups = [{ label: '', items: [...allOptions] }];
-		filteredGroups = [{ label: '', items: [...allOptions] }];
-	}
-
-	function convertGroupOptions(groups: ComboBoxGroup[]) {
-		allGroups = groups.map((group) => ({
-			...group,
-			items: group.items.map((option) => ({
-				...option,
-				selected: option.value === value,
-				groupName: group.label
-			}))
-		}));
-		filteredGroups = [...allGroups];
-	}
-
 	let selectionJustMade = false;
 
 	function onSelection(selectedValue: ComboBoxItem) {
 		selectionJustMade = true;
 		open = false;
 
-		// Handle "Create" items from allowCreate
-		if (allowCreate && selectedValue.label.startsWith('Create "')) {
-			const created = selectedValue.value;
-			value = created;
-			internalValue = value;
-			rawValue = { value: created, label: created };
-			onCreate?.(created);
-			onchangeRaw?.(rawValue);
+		if (selectedValue.isAddNew) {
+			addItem(selectedValue.value);
 			return;
 		}
 
-		allGroups.flatMap((x) => x.items).forEach((option) => {
-			option.selected = option.value === selectedValue.value;
-		});
+		core.allGroups
+			.flatMap((x) => x.items)
+			.forEach((option) => {
+				option.selected = option.value === selectedValue.value;
+			});
 
 		if (!preventChangeOnSelection) {
 			value = selectedValue.value;
@@ -260,48 +223,36 @@
 		onchangeRaw?.(selectedValue);
 	}
 
+	function addItem(newValue: string) {
+		open = false;
+
+		const newItem: ComboBoxItem = { label: newValue, value: newValue };
+
+		if (!preventChangeOnSelection) {
+			value = newValue;
+			internalValue = value;
+		}
+
+		rawValue = newItem;
+
+		onItemAdded?.(newValue);
+		onchangeRaw?.(newItem);
+	}
+
 	function onFilterChange(filterValue: string) {
 		if (filterValue.length === 0) {
-			filteredGroups = allGroups;
+			core.filterLocal('');
 			open = true;
 			return;
 		}
 
 		if (searchFunction && filterValue) {
-			clearTimeout(timeout);
-			searching = true;
-			timeout = window.setTimeout(() => {
-				searchFunction(filterValue).then((response: NotifyModel<ComboBoxItem[]>) => {
-					convertOptions(response.object!);
-					searching = false;
-					open = true;
-				});
-			}, 300);
-		} else if (allGroups.length) {
-			filteredGroups = allGroups
-				.map((group) => ({
-					...group,
-					items: group.items.filter((x) =>
-						x.label.toLowerCase().includes(filterValue.toLowerCase())
-					)
-				}))
-				.filter((group) => group.items.length > 0);
+			core.search(filterValue, () => (open = true));
+		} else {
+			core.filterLocal(filterValue);
 			open = true;
 		}
 
-		if (allowCreate && filterValue) {
-			const hasExact = filteredGroups
-				.flatMap((g) => g.items)
-				.some((x) => x.label.toLowerCase() === filterValue.toLowerCase());
-			if (!hasExact) {
-				const createItem: ComboBoxItem = { value: filterValue, label: `Create "${filterValue}"` };
-				filteredGroups = [
-					...filteredGroups,
-					{ label: '', items: [createItem] }
-				];
-			}
-		}
-
 		onchange?.(filterValue);
 	}
 
@@ -345,16 +296,16 @@
 		{label}
 		class={classes}
 		{containerClass}
-		required={required || showRequired}
+		{required}
 		{showError}
 		{errorText}
 		{tooltipLocation}
 		{tooltipContent}
 		{tooltipText}
 		bind:textboxElement
-		placeholder={preloading ? 'Loading...' : placeholder}
-		loading={searching || preloading}
-		disabled={preloading || disabled}
+		placeholder={core.preloading ? 'Loading...' : placeholder}
+		loading={core.searching || core.preloading}
+		disabled={core.preloading || disabled}
 		autocomplete="off"
 		{groupClass}
 		{leftIconSvg}
@@ -371,11 +322,11 @@
 				bind:this={comboBoxEl}
 				filterString={value}
 				values={rawValue ? [rawValue] : []}
-				onSelection={onSelection}
-				groupedOptions={filteredGroups}
+				{onSelection}
+				groupedOptions={displayGroups}
 				{open}
-				loading={searching}
-				showNoResultsMessage={showNoResultsMessage || !hideNoResults}
+				loading={core.searching}
+				{hideNoResults}
 				{loadingText}
 			/>
 		</div>

package/dist/form/Autocomplete.svelte.d.ts

@@ -31,6 +31,10 @@ export interface AutocompleteProps {
     hideNoResults?: boolean;
     /** Prevent updating value when an option is selected */
     preventChangeOnSelection?: boolean;
+    /** Allow suggesting a new value be added when the input doesn't match an existing option */
+    allowAdd?: boolean;
+    /** Builds the label shown for the "add new value" suggestion (default: `Add "<value>"`) */
+    addItemLabel?: (value: string) => string;
     /** Text shown while loading options */
     loadingText?: string;
     /** CSS classes for the FormGroup wrapper */
@@ -61,14 +65,8 @@ export interface AutocompleteProps {
     onSelect?: (e: ComboBoxItem) => void;
     /** Callback when selection changes (returns full item object) */
     onchangeRaw?: (e: ComboBoxItem | undefined) => void;
-    /** Allow creating new options not in the list */
-    allowCreate?: boolean;
-    /** Show a "no results" message when no options match */
-    showNoResultsMessage?: boolean;
-    /** Show required indicator (alias for required) */
-    showRequired?: boolean;
-    /** Callback when a new option is created (requires allowCreate) */
-    onCreate?: (value: string) => void;
+    /** Callback when the user chooses to add the typed value as a new item */
+    onItemAdded?: (value: string) => void;
 }
 declare const Autocomplete: import("svelte").Component<AutocompleteProps, {}, "value" | "rawValue">;
 type Autocomplete = ReturnType<typeof Autocomplete>;