@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/QuerySelect.svelte

@@ -1,368 +1,282 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="V extends object, VP extends ValueProp<V>"
->
-	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
-
-	import { dev } from '$app/environment';
-	import { devCatch, generateWeakId, vowels } from '../Helpers/Helpers.svelte.js';
-	import { attachDropdownPortal } from '../Helpers/dropdownPortal.js';
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import type { ValueProp } from '../Types/Internal/Misc.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Svelecte from 'svelecte';
-	import { getContext, onMount, type Snippet, tick, untrack } from 'svelte';
-	import Action from './Action.svelte';
-	import type { QuerySelectProps } from './QuerySelectProps.js';
-
-	let {
-		label,
-		labelProp,
-		valueProp,
-		clearable = false,
-		required = false,
-		invalid = false,
-		valueAsObject,
-		name = 'Item',
-		disabled,
-		query,
-		width,
-		height,
-		focusOnLoad = false,
-		inputId = generateWeakId(),
-		value: selectedValue,
-		options = $bindable<Array<V>>([]),
-		isValid,
-		onchange,
-		onfocus,
-	}: QuerySelectProps<V, VP> = $props();
-
-	export function forceQuery() {
-		clearTimeout(timeoutHandler);
-
-		const input = document.getElementById(inputId);
-		const searchValue = (input as HTMLInputElement).value;
-
-		const currentHandler = (timeoutHandler = setTimeout(() => {
-			tryQuery(currentHandler, searchValue).catch(devCatch);
-		}, 500) as unknown as number);
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="V extends object, VP extends ValueProp<V>"
+>import { ToastContext } from "../Contexts/ToastContext.svelte.js";
+import { dev } from "$app/environment";
+import { devCatch, generateWeakId, vowels } from "../Helpers/Helpers.svelte.js";
+import { attachDropdownPortal } from "../Helpers/dropdownPortal.js";
+import { Colour, ColourSet } from "../scss/colours.js";
+import { Size } from "../Types/Internal/Size.js";
+import Svelecte from "svelecte";
+import { getContext, onMount, tick, untrack } from "svelte";
+import Action from "./Action.svelte";
+let { label, labelProp, valueProp, clearable = false, required = false, invalid = false, valueAsObject, name = "Item", disabled, query, width, height, focusOnLoad = false, inputId = generateWeakId(), value: selectedValue, options = $bindable([]), isValid, onchange, onfocus } = $props();
+export function forceQuery() {
+	clearTimeout(timeoutHandler);
+	const input = document.getElementById(inputId);
+	const searchValue = input.value;
+	const currentHandler = timeoutHandler = setTimeout(() => {
 		tryQuery(currentHandler, searchValue).catch(devCatch);
-	}
-
-	let ref: Svelecte | undefined = $state();
-	let hasAutoFocused = $state(false);
-	let loadingDiv: HTMLDivElement | undefined = $state();
-	let isLoading = $state(false);
-	let hasRegisteredListeners = $state(false);
-	// Abort controller used to remove input listeners on unmount.
-	let listenerAbort: AbortController | undefined;
-
-	function isObjectValue(value: unknown): value is V {
-		return value !== null && typeof value == 'object' && labelProp in value && valueProp in value;
-	}
-
-	$effect.pre(() => {
-		void selectedValue;
-		untrack(() => {
-			if (selectedValue != null) {
-				if (valueAsObject) {
-					if (isObjectValue(selectedValue)) {
-						if (!options.some((opt: V) => opt[valueProp] === selectedValue[valueProp])) {
-							// Immutable update so the bindable propagates even when the
-							// parent did not declare `$state` on its side.
-							options = [...options, selectedValue];
-						}
-					} else if (dev) {
-						console.warn(`valueAsObject is true but the value doesn't match`, selectedValue);
-						return;
+	}, 500);
+	tryQuery(currentHandler, searchValue).catch(devCatch);
+}
+let ref = $state();
+let hasAutoFocused = $state(false);
+let loadingDiv = $state();
+let isLoading = $state(false);
+let hasRegisteredListeners = $state(false);
+// Abort controller used to remove input listeners on unmount.
+let listenerAbort;
+function isObjectValue(value) {
+	return value !== null && typeof value == "object" && labelProp in value && valueProp in value;
+}
+$effect.pre(() => {
+	void selectedValue;
+	untrack(() => {
+		if (selectedValue != null) {
+			if (valueAsObject) {
+				if (isObjectValue(selectedValue)) {
+					if (!options.some((opt) => opt[valueProp] === selectedValue[valueProp])) {
+						// Immutable update so the bindable propagates even when the
+						// parent did not declare `$state` on its side.
+						options = [...options, selectedValue];
 					}
-				} else if (!options.some((opt: V) => opt[valueProp] === selectedValue)) {
-					options = [
-						...options,
-						{
-							//best-effort solution. Not a good one
-							// eslint-disable-next-line @typescript-eslint/no-base-to-string
-							[labelProp]: selectedValue.toString(),
-							[valueProp]: selectedValue,
-						} as V,
-					];
+				} else if (dev) {
+					console.warn(`valueAsObject is true but the value doesn't match`, selectedValue);
+					return;
 				}
+			} else if (!options.some((opt) => opt[valueProp] === selectedValue)) {
+				options = [...options, {
+					[labelProp]: selectedValue.toString(),
+					[valueProp]: selectedValue
+				}];
 			}
-		});
-	});
-
-	const isInvalid = $derived(
-		(required && !selectedValue) ||
-			invalid ||
-			isValid?.(
-				valueAsObject
-					? (selectedValue as V)
-					: (options.find((a) => a[valueProp] === selectedValue) ?? null)
-			) === false
-	);
-
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
-
-	function forceShowDropdown(e: HTMLInputElement) {
-		if (focusOnLoad && !hasAutoFocused) {
-			hasAutoFocused = true;
-			e.click();
 		}
+	});
+});
+const isInvalid = $derived(required && !selectedValue || invalid || isValid?.(valueAsObject ? selectedValue : options.find((a) => a[valueProp] === selectedValue) ?? null) === false);
+const toastContext = getContext(ToastContext.identifier);
+function forceShowDropdown(e) {
+	if (focusOnLoad && !hasAutoFocused) {
+		hasAutoFocused = true;
+		e.click();
 	}
-
-	// HACK svelecte type shenanigans
-	function isFocusable(ref: unknown): ref is HTMLInputElement {
-		return ref != null;
+}
+// HACK svelecte type shenanigans
+function isFocusable(ref) {
+	return ref != null;
+}
+onMount(() => {
+	if (focusOnLoad) {
+		tick().then(() => {
+			if (isFocusable(ref)) {
+				ref.focus();
+			}
+		}).catch(devCatch);
 	}
-
-	onMount(() => {
-		if (focusOnLoad) {
-			tick()
-				.then(() => {
-					if (isFocusable(ref)) {
-						ref.focus();
-					}
-				})
-				.catch(devCatch);
-		}
-
-		const input = document.getElementById(inputId);
-		const svelecteRoot = input?.closest('div.svelecte') as HTMLElement | null;
-		const dropdownRef =
-			(svelecteRoot?.querySelector('.sv_dropdown') as HTMLElement | null) ?? undefined;
-
-		// HACK callback for is-open on/off; drives the chevron rotation
-		// in the action snippet further down.
-		const observer = new MutationObserver((mutations: Array<MutationRecord>) => {
-			for (let i = mutations.length - 1; i > -1; i--) {
-				const mutation = mutations[i];
-				if (mutation.attributeName === 'class') {
-					isExpanded = dropdownRef?.classList.contains('is-open') ?? false;
-				}
+	const input = document.getElementById(inputId);
+	const svelecteRoot = input?.closest("div.svelecte");
+	const dropdownRef = svelecteRoot?.querySelector(".sv_dropdown") ?? undefined;
+	// HACK callback for is-open on/off; drives the chevron rotation
+	// in the action snippet further down.
+	const observer = new MutationObserver((mutations) => {
+		for (let i = mutations.length - 1; i > -1; i--) {
+			const mutation = mutations[i];
+			if (mutation.attributeName === "class") {
+				isExpanded = dropdownRef?.classList.contains("is-open") ?? false;
 			}
-		});
-
-		if (dropdownRef) {
-			observer.observe(dropdownRef, { attributes: true });
 		}
-
-		// Teleport the Svelecte dropdown to `document.body` while open
-		// so it escapes every ancestor `overflow` / `transform` /
-		// `z-index` stacking context. See `Helpers/dropdownPortal.ts`.
-		const detachPortal = attachDropdownPortal({
-			getTrigger: () => svelecteRoot,
-			getDropdown: () => dropdownRef,
-		});
-
-		return () => {
-			observer.disconnect();
-			detachPortal();
-			clearTimeout(timeoutHandler);
-			listenerAbort?.abort();
-		};
 	});
-
-	let timeoutHandler = -1;
-
-	$effect(() => {
-		if (loadingDiv && isLoading) {
-			loadingDiv.classList.add('is-loading');
-		} else {
-			loadingDiv?.classList.remove('is-loading');
-		}
+	if (dropdownRef) {
+		observer.observe(dropdownRef, { attributes: true });
+	}
+	// Teleport the Svelecte dropdown to `document.body` while open
+	// so it escapes every ancestor `overflow` / `transform` /
+	// `z-index` stacking context. See `Helpers/dropdownPortal.ts`.
+	const detachPortal = attachDropdownPortal({
+		getTrigger: () => svelecteRoot,
+		getDropdown: () => dropdownRef
 	});
-
-	function registerInputListeners(e: HTMLInputElement) {
-		if (!hasRegisteredListeners) {
-			hasRegisteredListeners = true;
-			listenerAbort = new AbortController();
-			const signal = listenerAbort.signal;
-
-			const inputElement = e;
-
-			loadingDiv = inputElement.parentElement?.parentElement?.nextElementSibling as
-				| HTMLDivElement
-				| undefined;
-
-			const currentHandler = (timeoutHandler = setTimeout(() => {
-				tryQuery(currentHandler, '').catch(devCatch);
-			}, 500) as unknown as number);
-
-			inputElement.addEventListener(
-				'input',
-				(e) => {
-					clearTimeout(timeoutHandler);
-
-					const searchValue = (e.target as HTMLInputElement).value;
-
-					const currentHandler = (timeoutHandler = setTimeout(() => {
-						tryQuery(currentHandler, searchValue).catch(devCatch);
-					}, 500) as unknown as number);
-				},
-				{ signal }
-			);
-
-			inputElement.addEventListener(
-				'keydown',
-				(e) => {
-					if (e.key === 'Enter') {
-						tick()
-							.then(() => {
-								const searchValue = (e.target as HTMLInputElement).value;
-								if (searchValue) {
-									clearTimeout(timeoutHandler);
-
-									const currentHandler = (timeoutHandler = setTimeout(() => {
-										tryQuery(currentHandler, searchValue, true).catch(devCatch);
-									}, 1) as unknown as number);
-								}
-							})
-							.catch(devCatch);
+	return () => {
+		observer.disconnect();
+		detachPortal();
+		clearTimeout(timeoutHandler);
+		listenerAbort?.abort();
+	};
+});
+let timeoutHandler = -1;
+$effect(() => {
+	if (loadingDiv && isLoading) {
+		loadingDiv.classList.add("is-loading");
+	} else {
+		loadingDiv?.classList.remove("is-loading");
+	}
+});
+function registerInputListeners(e) {
+	if (!hasRegisteredListeners) {
+		hasRegisteredListeners = true;
+		listenerAbort = new AbortController();
+		const signal = listenerAbort.signal;
+		const inputElement = e;
+		loadingDiv = inputElement.parentElement?.parentElement?.nextElementSibling;
+		const currentHandler = timeoutHandler = setTimeout(() => {
+			tryQuery(currentHandler, "").catch(devCatch);
+		}, 500);
+		inputElement.addEventListener("input", (e) => {
+			clearTimeout(timeoutHandler);
+			const searchValue = e.target.value;
+			const currentHandler = timeoutHandler = setTimeout(() => {
+				tryQuery(currentHandler, searchValue).catch(devCatch);
+			}, 500);
+		}, { signal });
+		inputElement.addEventListener("keydown", (e) => {
+			if (e.key === "Enter") {
+				tick().then(() => {
+					const searchValue = e.target.value;
+					if (searchValue) {
+						clearTimeout(timeoutHandler);
+						const currentHandler = timeoutHandler = setTimeout(() => {
+							tryQuery(currentHandler, searchValue, true).catch(devCatch);
+						}, 1);
 					}
-				},
-				{ signal }
-			);
-		}
+				}).catch(devCatch);
+			}
+		}, { signal });
 	}
-
-	async function tryQuery(handler: number, value: string, andSelectIt = false) {
-		if (timeoutHandler === handler) {
-			isLoading = true;
-			try {
-				const newValues = await query(value);
-				isLoading = false;
-
-				if (timeoutHandler === handler) {
-					options = newValues;
-
-					if (andSelectIt) {
-						if (newValues.length === 1) {
-							onChange(newValues[0]);
-						}
+}
+async function tryQuery(handler, value, andSelectIt = false) {
+	if (timeoutHandler === handler) {
+		isLoading = true;
+		try {
+			const newValues = await query(value);
+			isLoading = false;
+			if (timeoutHandler === handler) {
+				options = newValues;
+				if (andSelectIt) {
+					if (newValues.length === 1) {
+						onChange(newValues[0]);
 					}
 				}
-			} catch (e) {
-				toastContext.toast(e);
 			}
+		} catch (e) {
+			toastContext.toast(e);
 		}
 	}
-
-	function onChange(newValue: V | null | undefined) {
-		if (clearable || newValue != null) {
-			// svelecte always passes the full option object; normalise to
-			// the shape the variant promised. AsPrimitive callbacks
-			// receive the primitive key (`V[VP]`), not the object.
-			if (valueAsObject) {
-				void (onchange as (v: V | null) => void | Promise<void>)(newValue ?? null);
-			} else {
-				const primitive = newValue == null ? null : newValue[valueProp];
-				// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-				void (onchange as (v: V[VP] | null) => void | Promise<void>)(primitive);
-			}
+}
+function onChange(newValue) {
+	if (clearable || newValue != null) {
+		// svelecte always passes the full option object; normalise to
+		// the shape the variant promised. AsPrimitive callbacks
+		// receive the primitive key (`V[VP]`), not the object.
+		if (valueAsObject) {
+			void onchange(newValue ?? null);
+		} else {
+			const primitive = newValue == null ? null : newValue[valueProp];
+			// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+			void onchange(primitive);
 		}
 	}
-
-	const an = $derived(vowels.has(name[0].toLocaleLowerCase()) ? 'an' : 'a');
-
-	let isExpanded = $state(false);
-</script>
-
-<div
-	class="select-wrapper"
-	class:invalid={isInvalid}
-	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
->
-	{#if label}
-		<label for={inputId}>
-			<span
-				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
-			>
-			<span class="border"
-				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
-			>
-		</label>
-	{/if}
-	<!-- strict mode is used to stop svelecte from rejecting perfectly valid values -->
-	<Svelecte
-		strictMode={false}
-		keepCreated
-		onFocus={(e: HTMLInputElement) => {
-			registerInputListeners(e);
-			forceShowDropdown(e);
-			onfocus?.(e);
-		}}
-		placeholder="Please Select{name ? ` ${an} ${name}` : ''}"
-		bind:this={ref}
-		{inputId}
-		{disabled}
-		valueField={valueProp}
-		labelField={labelProp}
-		virtualList={false}
-		searchable
-		searchProps={{ keepSelectionInList: true }}
-		lazyDropdown
-		{valueAsObject}
-		{options}
-		value={selectedValue as Array<unknown>}
-		{onChange}
-		selectOnTab
-		deselectMode={required && !clearable ? 'none' : 'toggle'}
-		keepSelectionInList
-		{name}
-		selection={selection as (selectedOptions: Array<object>) => ReturnType<Snippet>}
-		{append}
-	>
-		{#snippet toggleIcon()}
-			<div class="nothing"></div>
-		{/snippet}
-	</Svelecte>
-
-	{#snippet append()}
-		<div class="icons">
-			{#if clearable && selectedValue}
-				<Action
-					{disabled}
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					size={Size.Small}
-					onclick={(e: MouseEvent) => {
-						if (isExpanded) {
-							e.stopPropagation();
-						}
-
-						onChange(null);
-					}}
-					icon={{
-						name: 'close-menu-cross',
-						colour: Colour['$ui-blue-9'],
-					}}
-				/>
-			{/if}
-
-			<Action
-				{disabled}
-				noTabIndex
-				colourSet={ColourSet.Auxiliary}
-				size={Size.Small}
-				icon={{
-					name: isExpanded ? 'chevron-up' : 'chevron-down',
-					colour: Colour['$ui-blue-9'],
-				}}
-			/>
-		</div>
-	{/snippet}
-
-	{#snippet selection(selectedOptions: Array<V>)}
-		{#if selectedOptions.length == 0}
-			<span class="selection">Please Select {an} {name}</span>
-		{:else}
-			<span class="selection">{selectedOptions[0][labelProp]}</span>
-		{/if}
-	{/snippet}
-</div>
-
+}
+const an = $derived(vowels.has(name[0].toLocaleLowerCase()) ? "an" : "a");
+let isExpanded = $state(false);
+</script>
+
+<div
+	class="select-wrapper"
+	class:invalid={isInvalid}
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
+>
+	{#if label}
+		<label for={inputId}>
+			<span
+				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
+			>
+			<span class="border"
+				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
+			>
+		</label>
+	{/if}
+	<!-- strict mode is used to stop svelecte from rejecting perfectly valid values -->
+	<Svelecte
+		strictMode={false}
+		keepCreated
+		onFocus={(e: HTMLInputElement) => {
+			registerInputListeners(e);
+			forceShowDropdown(e);
+			onfocus?.(e);
+		}}
+		placeholder="Please Select{name ? ` ${an} ${name}` : ''}"
+		bind:this={ref}
+		{inputId}
+		{disabled}
+		valueField={valueProp}
+		labelField={labelProp}
+		virtualList={false}
+		searchable
+		searchProps={{ keepSelectionInList: true }}
+		lazyDropdown
+		{valueAsObject}
+		{options}
+		value={selectedValue as Array<unknown>}
+		{onChange}
+		selectOnTab
+		deselectMode={required && !clearable ? 'none' : 'toggle'}
+		keepSelectionInList
+		{name}
+		selection={selection as (selectedOptions: Array<object>) => ReturnType<Snippet>}
+		{append}
+	>
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+		{/snippet}
+	</Svelecte>
+
+	{#snippet append()}
+		<div class="icons">
+			{#if clearable && selectedValue}
+				<Action
+					{disabled}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					size={Size.Small}
+					onclick={(e: MouseEvent) => {
+						if (isExpanded) {
+							e.stopPropagation();
+						}
+
+						onChange(null);
+					}}
+					icon={{
+						name: 'close-menu-cross',
+						colour: Colour['$ui-blue-9'],
+					}}
+				/>
+			{/if}
+
+			<Action
+				{disabled}
+				noTabIndex
+				colourSet={ColourSet.Auxiliary}
+				size={Size.Small}
+				icon={{
+					name: isExpanded ? 'chevron-up' : 'chevron-down',
+					colour: Colour['$ui-blue-9'],
+				}}
+			/>
+		</div>
+	{/snippet}
+
+	{#snippet selection(selectedOptions: Array<V>)}
+		{#if selectedOptions.length == 0}
+			<span class="selection">Please Select {an} {name}</span>
+		{:else}
+			<span class="selection">{selectedOptions[0][labelProp]}</span>
+		{/if}
+	{/snippet}
+</div>
+
 <style>.select-wrapper {
   min-width: var(--input-min-width, 12rem);
   width: var(--input-width, 100%);
@@ -525,4 +439,4 @@ div.icons {
 }
 :global(.dropdown-item) .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>