@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/form/Select.svelte

@@ -1,70 +1,102 @@
 <script lang="ts">
-	import { clickOutside } from "../actions/ClickOutside.js";
-	import type { NotifyModel } from "../models/NotifyModel.js";
+	import { clickOutside } from '../util/ClickOutside.js';
 	import type {
 		ComboBoxGroup,
 		ComboBoxItem,
 		FetchFunctionType,
 		RetrieveLabelFunctionType,
-		SearchFunctionType,
-	} from "../models/ComboBoxItem.js";
-	import ComboBoxMulti from "./ComboBoxMulti.svelte";
-	import FormGroup from "./FormGroup.svelte";
-	import Icon from "../icon/Icon.svelte";
-	import Loader from "../ui/Loader.svelte";
-	import { useDialogEvents } from "../ui/DialogEvents.svelte.js";
-	import selectorSvg from "../icon/selector.svg?raw";
-	import { iconX, iconCopy } from "../icon/index.js";
-	import ActionIcon from "../ui/ActionIcon.svelte";
-	import { onMount, tick, type Snippet } from "svelte";
-
-	interface Props {
+		SearchFunctionType
+	} from '../models/ComboBoxItem.js';
+	import { ComboBoxCore } from './comboBoxCore.svelte.js';
+	import ComboBoxMulti from './ComboBoxMulti.svelte';
+	import FormGroup from './FormGroup.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Loader from '../ui/Loader.svelte';
+	import { useDialogEvents } from '../ui/DialogEvents.svelte.js';
+	import selectorSvg from '../icon/selector.svg?raw';
+	import { iconX, iconCopy } from '../icon/index.js';
+	import ActionIcon from '../ui/ActionIcon.svelte';
+	import { onMount, tick, type Snippet } from 'svelte';
+
+	const autoName = `select-${crypto.randomUUID()}`;
+
+	export interface SelectProps {
+		/** HTML name attribute for the select (falls back to label, then auto-generated) */
+		name?: string;
+		/** Label text displayed above the select */
 		label?: string;
+		/** Selected value (bindable) */
 		value?: string;
+		/** Full selected item object */
 		rawValue?: ComboBoxItem;
+		/** Placeholder text when no value is selected */
 		placeholder?: string;
+		/** CSS classes for the select element */
 		class?: string;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Disable the select */
 		disabled?: boolean;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
-		autofocus?: boolean; // will also cause dialog autofocus on first open only
-		autofocusDialog?: boolean; // will cause autofocus on every open, not just the first time
+		/** Auto-focus on mount (first dialog open only) */
+		autofocus?: boolean;
+		/** Auto-focus on every dialog open */
+		autofocusDialog?: boolean;
+		/** Enable search/filter within options */
 		allowSearch?: boolean;
-		showNoResultsMessage?: boolean;
+		/** Hide "no results" message when search finds nothing */
+		hideNoResults?: boolean;
+		/** Text shown while loading options */
 		loadingText?: string;
+		/** Flat list of selectable options */
 		options?: ComboBoxItem[];
+		/** Options organized into groups */
 		groupedOptions?: ComboBoxGroup[];
-		tooltipLocation?: "top" | "bottom" | "left" | "right";
+		/** Position of the tooltip */
+		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Async function to fetch options */
 		fetchFunction?: FetchFunctionType | null;
+		/** Async function to search/filter options */
 		searchFunction?: SearchFunctionType | null;
+		/** Async function to retrieve label for a value */
 		retrieveLabelFunction?: RetrieveLabelFunctionType | null;
+		/** Rich tooltip content using a Svelte snippet */
 		tooltipContent?: Snippet;
+		/** Simple tooltip text */
 		tooltipText?: string;
+		/** Callback when selection changes (returns value string) */
 		onchange?: (e: string | undefined) => void;
+		/** Callback when selection changes (returns full item object) */
 		onchangeRaw?: (e: ComboBoxItem | undefined) => void;
+		/** HTML autocomplete attribute for the input */
+		autocomplete?: string;
 	}
 
 	let {
-		label = "",
+		name,
+		label = '',
 		value = $bindable(undefined),
 		rawValue = undefined,
-		placeholder = "\u00a0", // non-breaking space to prevent the height collapsing
-		class: classes = "",
-		containerClass = "",
+		placeholder = '\u00a0', // non-breaking space to prevent the height collapsing
+		class: classes = '',
+		containerClass = '',
 		disabled = false,
 		required = false,
 		showError = false,
-		errorText = "",
+		errorText = '',
 		autofocus = false,
 		autofocusDialog = false,
 		allowSearch = false,
-		showNoResultsMessage = true,
-		loadingText = "",
+		hideNoResults = false,
+		loadingText = '',
 		options = [],
 		groupedOptions = [],
-		tooltipLocation = "top",
+		tooltipLocation = 'top',
 		fetchFunction = null,
 		searchFunction = null,
 		retrieveLabelFunction = null,
@@ -72,19 +104,37 @@
 		tooltipText,
 		onchange,
 		onchangeRaw,
-	}: Props = $props();
+		autocomplete
+	}: SelectProps = $props();
 
 	// Use derived for computed allowSearch
 	let computedAllowSearch = $derived(searchFunction ? true : allowSearch);
+	let resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
 
 	let internalValue = $state(value);
-	let filterString = $state("");
-	let preloading = $state(false);
-	let searching = $state(false);
-	let timeout: number;
-
-	let allGroups: ComboBoxGroup[] = $state([]);
-	let filteredGroups: ComboBoxGroup[] = $state([]);
+	let filterString = $state('');
+
+	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: true,
+		onValueCleared: () => {
+			internalValue = undefined;
+			onchange?.(undefined);
+			onchangeRaw?.(undefined);
+		},
+		onRawValueResolved: (raw) => onchangeRaw?.(raw),
+		// Re-apply the active filter so a mid-search options swap doesn't drop results
+		onOptionsChanged: () => {
+			if (filterString) onFilterChange(filterString);
+		}
+	});
 
 	let open = $state(false);
 
@@ -114,7 +164,7 @@
 					focus();
 				}, 150);
 			}
-		},
+		}
 	});
 
 	function focus() {
@@ -125,155 +175,48 @@
 	$effect(() => {
 		if (value !== internalValue) {
 			internalValue = value;
-			rawValue =
-				allGroups
-					.flatMap((x) => x.items)
-					.find((x) => x.value === value) ?? undefined;
-			isEmpty = rawValue === undefined;
-			onchangeRaw?.(rawValue);
-			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;
-			});
-		} else {
-			rawValue = { label: value.toString(), value };
-		}
-	}
-
-	function initOptions(opts: ComboBoxItem[]) {
-		if (fetchFunction) {
-			preloading = true;
-			fetchFunction().then((response: NotifyModel<ComboBoxItem[]>) => {
-				convertOptions(response.object!);
-				preloadValues();
-				preloading = false;
-			});
-		} else {
-			if (groupedOptions.length) {
-				convertGroupOptions(groupedOptions);
-			} else if (opts.length) {
-				convertOptions(opts);
-			} else {
-				filteredGroups = [];
+			const selfCleared = core.preloadValues();
+			// preloadValues fires its own callbacks on the clear path; don't double-notify
+			if (!selfCleared) {
+				onchangeRaw?.(rawValue);
 			}
-			preloadValues();
 		}
-	}
-
-	onMount(() => {
-		initOptions(options);
 	});
 
-	function convertOptions(options: ComboBoxItem[]) {
-		const allOptions = options.map((option) => {
-			return {
-				...option,
-				selected: value === option.value,
-			};
-		});
-		allGroups = [{ label: "", items: [...allOptions] }];
-		filteredGroups = [{ label: "", items: [...allOptions] }];
-	}
-
-	function convertGroupOptions(groups: ComboBoxGroup[]) {
-		allGroups = groups.map((group) => {
-			return {
-				...group,
-				items: group.items.map((option) => {
-					return {
-						...option,
-						selected: value === option.value,
-						groupName: group.label,
-					};
-				}),
-			};
-		});
-		filteredGroups = [...allGroups];
-	}
-
 	function onSelection(selectedValue: ComboBoxItem) {
-		options.forEach((option) => {
-			if (option.value === selectedValue.value)
-				option.selected = selectedValue.selected;
+		core.allGroups.forEach((group) => {
+			group.items.forEach((item) => {
+				item.selected = item.value === selectedValue.value;
+			});
 		});
 
 		value = selectedValue.value;
+		internalValue = value;
 		rawValue = selectedValue;
 
-		onchange?.(value ? value : "");
+		onchange?.(value);
 		onchangeRaw?.(rawValue);
 
 		open = false;
 	}
 
-	function onFilterChange(value: string) {
-		if (value.length === 0) {
-			filteredGroups = allGroups;
-			return;
-		}
-		if (searchFunction && value) {
-			clearTimeout(timeout);
-			searching = true;
-			timeout = window.setTimeout(() => {
-				searchFunction(value).then(
-					(response: NotifyModel<ComboBoxItem[]>) => {
-						convertOptions(response.object!);
-						searching = false;
-						open = true;
-					},
-				);
-			}, 300);
-		} else if (allGroups) {
-			filteredGroups = allGroups.filter((group) =>
-				group.items.some((x) =>
-					x.label.toLowerCase().includes(value.toLowerCase()),
-				),
-			);
-
-			if (filteredGroups.length > 0) {
-				filteredGroups = filteredGroups.map((group) => ({
-					...group,
-					items: group.items.filter((x) =>
-						x.label.toLowerCase().includes(value.toLowerCase()),
-					),
-				}));
-			}
+	function onFilterChange(filterValue: string) {
+		if (searchFunction && filterValue) {
+			core.search(filterValue, () => (open = true));
+		} else {
+			core.filterLocal(filterValue);
 		}
 	}
 
-	let comboBoxEl: ReturnType<typeof ComboBoxMulti> | undefined =
-		$state(undefined);
+	let comboBoxEl: ReturnType<typeof ComboBoxMulti> | undefined = $state(undefined);
 	let textboxElement: HTMLElement | undefined = $state(undefined);
 	let buttonElement: HTMLElement | undefined = $state(undefined);
-	let comboBoxKeyDown: ((e: KeyboardEvent) => void) | undefined =
-		$state(undefined);
+	let comboBoxKeyDown: ((e: KeyboardEvent) => void) | undefined = $state(undefined);
 
 	function onKeyDown(e: KeyboardEvent) {
 		if (!open) return;
 
-		if (e.key === "Escape") {
+		if (e.key === 'Escape') {
 			e.preventDefault();
 			open = false;
 		} else if (comboBoxKeyDown) {
@@ -284,10 +227,8 @@
 	}
 
 	function closePopover(e: MouseEvent) {
-		if (textboxElement && textboxElement.contains(e.target as HTMLElement))
-			return;
-		if (buttonElement && buttonElement.contains(e.target as HTMLElement))
-			return;
+		if (textboxElement && textboxElement.contains(e.target as HTMLElement)) return;
+		if (buttonElement && buttonElement.contains(e.target as HTMLElement)) return;
 
 		open = false;
 	}
@@ -295,31 +236,25 @@
 	function copyCurrentValue() {
 		if (rawValue?.label) {
 			navigator.clipboard.writeText(rawValue.label).catch((err) => {
-				console.error("Failed to copy text: ", err);
+				console.error('Failed to copy text: ', err);
 			});
 		}
 	}
 
 	const extraClasses: string[] = $derived.by(() => {
 		const classes = [];
-		if (open) classes.push("!border-accent");
-		if (disabled) classes.push("disabled");
-		if (showError) classes.push("show-error");
-		if (computedAllowSearch) classes.push("searchable");
-		if (open && !isEmpty) classes.push("has-actions");
+		if (open) classes.push('!border-accent');
+		if (disabled) classes.push('disabled');
+		if (showError) classes.push('show-error');
+		if (computedAllowSearch) classes.push('searchable');
+		if (open && !isEmpty) classes.push('has-actions');
 
 		return classes;
 	});
 </script>
 
 <div class="select-container {containerClass}">
-	<FormGroup
-		{label}
-		{required}
-		{tooltipContent}
-		{tooltipText}
-		{tooltipLocation}
-	>
+	<FormGroup {label} {required} {tooltipContent} {tooltipText} {tooltipLocation}>
 		{#if computedAllowSearch && open}
 			<div class="select-input-wrapper">
 				<input
@@ -327,12 +262,14 @@
 					bind:value={filterString}
 					oninput={() => onFilterChange(filterString)}
 					onkeydown={onKeyDown}
-					autocomplete="off"
-					disabled={preloading || disabled}
-					placeholder={isEmpty ? placeholder : rawValue?.label || ""}
+					name={resolvedName}
+					autocomplete={(autocomplete as any) ?? 'off'}
+					disabled={core.preloading || disabled}
+					placeholder={isEmpty ? placeholder : rawValue?.label || ''}
 					class="select select-input {extraClasses} {classes}"
+					type="search"
 				/>
-				{#if preloading || searching}
+				{#if core.preloading || core.searching}
 					<div class="loader">
 						<Loader sizeOverride="1.125rem" />
 					</div>
@@ -352,18 +289,16 @@
 							svg={iconX}
 							size="0.75rem"
 							onclick={(e: MouseEvent) => {
+								internalValue = undefined;
 								value = undefined;
 								rawValue = undefined;
-								filterString = "";
-								filteredGroups = allGroups;
+								filterString = '';
+								core.filteredGroups = core.allGroups;
 
 								onchange?.(undefined);
 								onchangeRaw?.(undefined);
 
-								options.forEach((x) => (x.selected = false));
-								allGroups
-									.flatMap((x) => x.items)
-									.forEach((x) => (x.selected = false));
+								core.allGroups.flatMap((x) => x.items).forEach((x) => (x.selected = false));
 
 								e.stopPropagation();
 							}}
@@ -385,25 +320,21 @@
 					}
 				}}
 				onkeydown={(e) => onKeyDown(e)}
-				disabled={preloading || disabled}
+				name={resolvedName}
+				disabled={core.preloading || disabled}
 				class="select {extraClasses} {classes}"
 			>
 				{#if isEmpty}
-					<span class="placeholder"
-						>{preloading ? "Loading..." : placeholder}</span
-					>
+					<span class="placeholder">{core.preloading ? 'Loading...' : placeholder}</span>
 				{:else if rawValue?.selectedComponent}
 					{@const DisplayComponent = rawValue.selectedComponent}
-					<DisplayComponent
-						option={rawValue}
-						{...rawValue.selectedComponentProps}
-					/>
+					<DisplayComponent option={rawValue} {...rawValue.selectedComponentProps} />
 				{:else}
 					<span>
 						{rawValue?.label}
 					</span>
 				{/if}
-				{#if preloading || searching}
+				{#if core.preloading || core.searching}
 					<div class="loader">
 						<Loader sizeOverride="1.125rem" />
 					</div>
@@ -423,16 +354,14 @@
 							svg={iconX}
 							size="0.75rem"
 							onclick={(e: MouseEvent) => {
+								internalValue = undefined;
 								value = undefined;
 								rawValue = undefined;
 
 								onchange?.(undefined);
 								onchangeRaw?.(undefined);
 
-								options.forEach((x) => (x.selected = false));
-								allGroups
-									.flatMap((x) => x.items)
-									.forEach((x) => (x.selected = false));
+								core.allGroups.flatMap((x) => x.items).forEach((x) => (x.selected = false));
 
 								e.stopPropagation();
 							}}
@@ -458,10 +387,10 @@
 				values={rawValue ? [rawValue] : []}
 				{onSelection}
 				onkeydown={comboBoxKeyDown}
-				groupedOptions={filteredGroups}
+				groupedOptions={core.filteredGroups}
 				{open}
-				loading={searching}
-				{showNoResultsMessage}
+				loading={core.searching}
+				{hideNoResults}
 				{loadingText}
 			/>
 		</div>
@@ -477,26 +406,26 @@
 	}
 
 	.select {
-		font-size: var(--pui-font-size-md);
-		line-height: var(--pui-line-height-normal);
+		font-size: 1rem;
+		line-height: 1.5rem;
 		position: relative;
 		display: flex;
 		flex-wrap: wrap;
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		border-radius: var(--pui-radius-base);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
 		text-align: left;
-		background-color: var(--pui-input-bg);
-		color: var(--pui-text-primary);
-		border-color: var(--pui-border-default);
+		background-color: var(--input-bg-color);
+		color: var(--text-color);
+		border-color: var(--border-color);
 		cursor: pointer;
 		width: 100%;
 		align-items: center;
-		border: 1px solid var(--pui-border-default);
-		padding-right: var(--pui-spacing-8);
+		border: 1px solid var(--border-color);
+		padding-right: 2rem;
 	}
 
 	.select.has-actions {
-		padding-right: var(--pui-spacing-14);
+		padding-right: 3.5rem;
 	}
 
 	.select.searchable {
@@ -504,9 +433,9 @@
 	}
 
 	.select:focus {
-		border-color: var(--pui-input-border-focus);
+		border-color: var(--accent-color);
 		outline: 2px solid transparent;
-		outline-offset: var(--pui-focus-ring-offset);
+		outline-offset: 2px;
 	}
 
 	.select-input-wrapper {
@@ -520,10 +449,10 @@
 
 	.select-icon {
 		position: absolute;
-		right: var(--pui-spacing-2);
+		right: 0.5rem;
 		top: 50%;
 		transform: translateY(-50%);
-		width: var(--pui-spacing-4);
+		width: 1rem;
 		display: flex;
 		pointer-events: none;
 	}
@@ -531,16 +460,16 @@
 	.btn-clear-container {
 		position: absolute;
 		line-height: 0;
-		right: var(--pui-spacing-2);
+		right: 0.5rem;
 		top: 50%;
 		transform: translateY(-50%);
 		display: flex;
-		gap: var(--pui-spacing-1);
+		gap: 0.25rem;
 	}
 
 	.select-btn-clear {
-		border-radius: var(--pui-radius-base);
-		padding: var(--pui-spacing-1);
+		border-radius: 0.25rem;
+		padding: 0.25rem;
 		right: 0.4rem;
 	}
 
@@ -548,9 +477,10 @@
 		position: absolute;
 		width: 100%;
 		left: 0;
-		z-index: var(--pui-z-dropdown);
+		z-index: 70;
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
+		/* absolute w-full left-0 z-20 */
 	}
 
 	.select-panel-inner {
@@ -559,7 +489,8 @@
 	}
 
 	.placeholder {
-		color: var(--pui-text-placeholder);
+		color: var(--placeholder-color);
+		/* text-zinc-400 dark:text-neutral-500 */
 	}
 
 	.hidden {
@@ -569,22 +500,22 @@
 	.disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background-color: var(--pui-bg-disabled);
+		background-color: var(--border-color);
 	}
 
 	.loader {
 		position: absolute;
-		right: var(--pui-spacing-2_5);
+		right: 0.65rem;
 		top: 50%;
 		transform: translateY(-50%);
-		width: var(--pui-spacing-4);
+		width: 1rem;
 	}
 
 	.show-error {
-		border-color: var(--pui-text-danger);
+		border-color: var(--danger-text);
 	}
 
 	.text-error {
-		color: var(--pui-text-danger);
+		color: var(--danger-text);
 	}
 </style>