@lavalogic/scoria 0.40.1 → 0.40.2

package/dist/Components/QuerySelect.svelte

@@ -1,368 +1,368 @@
-<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);
-		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;
-					}
-				} 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,
-					];
-				}
-			}
-		});
-	});
-
-	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();
-		}
-	}
-
-	// HACK svelecte type shenanigans
-	function isFocusable(ref: unknown): ref is HTMLInputElement {
-		return ref != null;
-	}
-
-	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;
-				}
-			}
-		});
-
-		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');
-		}
-	});
-
-	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);
-					}
-				},
-				{ 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]);
-						}
-					}
-				}
-			} 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);
-			}
-		}
-	}
-
-	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>
-
+<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);
+		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;
+					}
+				} 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,
+					];
+				}
+			}
+		});
+	});
+
+	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();
+		}
+	}
+
+	// HACK svelecte type shenanigans
+	function isFocusable(ref: unknown): ref is HTMLInputElement {
+		return ref != null;
+	}
+
+	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;
+				}
+			}
+		});
+
+		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');
+		}
+	});
+
+	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);
+					}
+				},
+				{ 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]);
+						}
+					}
+				}
+			} 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);
+			}
+		}
+	}
+
+	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 +525,4 @@ div.icons {
 }
 :global(.dropdown-item) .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>