@lavalogic/scoria 0.0.1

package/dist/Components/QuerySelect.svelte

@@ -0,0 +1,556 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	interface commonProps<V extends object, VP extends string & keyof V> {
+		options?: V[];
+		name: string;
+		labelProp: string & keyof V;
+		valueProp: VP;
+		query: (value: string) => Promise<V[]>;
+		onchange: (e: V | null) => void;
+
+		disabled?: boolean;
+
+		width?: string;
+		height?: string;
+		label?: string;
+		required?: boolean;
+		invalid?: boolean;
+		onfocus?: (target: HTMLInputElement) => void;
+		inputId?: string;
+		focusOnLoad?: boolean;
+		clearable?: boolean;
+		isValid?: (item: V | null) => boolean;
+	}
+
+	export interface QuerySelectPropsAsObject<V extends object, VP extends string & keyof V>
+		extends commonProps<V, VP> {
+		valueAsObject: true;
+		selectedValue: V | null;
+	}
+
+	export interface QuerySelectPropsAsPrimitive<V extends object, VP extends string & keyof V>
+		extends commonProps<V, VP> {
+		valueAsObject: false;
+		selectedValue: V[VP] | null;
+	}
+
+	export type QuerySelectProps<V extends object, VP extends string & keyof V> =
+		| QuerySelectPropsAsObject<V, VP>
+		| QuerySelectPropsAsPrimitive<V, VP>;
+</script>
+
+<!-- #region Script -->
+<script lang="ts" generics="V extends object, VP extends string&keyof V">
+	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
+
+	import {
+		generateShortUUID,
+		getErrorMessage,
+		isErrorResponse,
+		vowels
+	} from '../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import Svelecte from 'svelecte';
+	import { getContext, onMount, tick, untrack } from 'svelte';
+	import Action from './Action.svelte';
+	import { Size } from '../Types/Internal/Size.js';
+	import { Validity } from '../Types/Internal/Validity.js';
+
+	let {
+		label,
+		labelProp,
+		valueProp,
+		clearable = false,
+		required = false,
+		invalid = false,
+		valueAsObject,
+		name,
+		disabled,
+		query,
+		width,
+		height,
+		focusOnLoad = false,
+		inputId = generateShortUUID(),
+		selectedValue,
+		options = $bindable([]),
+		isValid,
+		onchange,
+		onfocus
+	}: QuerySelectProps<V, VP> = $props();
+
+	let ref: Svelecte | undefined = $state();
+	let hasAutoFocused = $state(false);
+	let loadingDiv: HTMLDivElement | undefined = $state();
+	let isLoading = $state(false);
+	let hasRegisteredListeners = $state(false);
+
+	$effect.pre(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		selectedValue;
+		untrack(() => {
+			if (selectedValue != null) {
+				if (typeof selectedValue == 'object') {
+					if (!options.some((opt: V) => opt[valueProp] === (selectedValue as V)[valueProp])) {
+						options.push(selectedValue! as V);
+					}
+				} else if (!options.some((opt: V) => opt[valueProp] === selectedValue)) {
+					options.push({
+						[labelProp]: selectedValue.toString(),
+						[valueProp as VP]: selectedValue
+					} as V);
+				}
+			}
+		});
+	});
+
+	function valueIsObject(value: V | V[VP] | null): value is V {
+		return selectedValue == null || typeof selectedValue == 'object';
+	}
+
+	let isInvalid = $derived(
+		(required && !selectedValue) ||
+			invalid ||
+			isValid?.(
+				valueIsObject(selectedValue)
+					? selectedValue
+					: (options.find((a) => a[valueProp] === selectedValue) ?? null)
+			) === false
+	);
+
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	function forceShowDropdown(e: HTMLInputElement) {
+		if (focusOnLoad && !hasAutoFocused) {
+			hasAutoFocused = true;
+
+			const input = e as HTMLInputElement;
+
+			input.click();
+
+			// HACK. the default selectOnTab functionality selects the highlighted element,
+			// this selects the first element on the list
+			// please decide which one we'll be using and be consistent
+			// input.addEventListener('keydown', (e) => {
+			// if (e.key === 'Tab') {
+			// 	const inputElement = e.target as HTMLInputElement | undefined;
+			// 	if (inputElement && inputElement.value.trim()) {
+			// 		(
+			// 			inputElement?.parentElement?.parentElement?.parentElement?.parentElement?.querySelector(
+			// 				'[data-pos="0"]' //first element from dropdown
+			// 			) as HTMLElement | undefined
+			// 		)?.click();
+			// 	} else if (optional) {
+			// 		dispatch('change', null);
+			// 	}
+			// }
+			// });
+		}
+	}
+
+	onMount(() => {
+		if (focusOnLoad) {
+			tick().then(() => {
+				// FIXME uncomment
+				ref?.focus();
+			});
+		}
+
+		const input = document.getElementById(inputId);
+		// input?.addEventListener('focus', () => {
+		// 	hidden = true;
+		// });
+		// input?.addEventListener('blur', () => {
+		// 	hidden = false;
+		// });
+
+		// HACK callback for is-open on/off
+		const dropdownRef = input?.closest('div.svelecte')?.querySelector('.sv_dropdown') ?? undefined;
+		const observer = new MutationObserver(
+			(mutations: MutationRecord[], observer: MutationObserver) => {
+				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 });
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	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;
+
+			const inputElement = e;
+
+			loadingDiv = inputElement?.parentElement?.parentElement?.nextElementSibling as
+				| HTMLDivElement
+				| undefined;
+
+			const currentHandler = (timeoutHandler = setTimeout(() => {
+				tryQuery(currentHandler, '');
+			}, 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);
+				}, 500) as unknown as number);
+			});
+
+			inputElement.addEventListener('keydown', (e) => {
+				if (e.key === 'Enter') {
+					tick().then(() => {
+						const searchValue = (e.target as HTMLInputElement).value;
+						if (searchValue) {
+							// dispatch('search', { value: inputElement.value });
+							clearTimeout(timeoutHandler);
+
+							const currentHandler = (timeoutHandler = setTimeout(() => {
+								tryQuery(currentHandler, searchValue, true);
+							}, 1) as unknown as number);
+						}
+					});
+				}
+			});
+		}
+	}
+
+	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) {
+				if (isErrorResponse(e)) {
+					toastContext.toast(e);
+				} else {
+					toastContext.toast({ message: getErrorMessage(e), result: Validity.Invalid });
+				}
+			}
+		}
+	}
+
+	function onChange(newValue: V | null | undefined) {
+		if (clearable || newValue != null) {
+			onchange(newValue ?? null);
+		}
+	}
+
+	const an = $derived(vowels.has(name[0]?.toLocaleLowerCase()) ? 'an' : 'a');
+	let hidden = $state(false);
+	let isExpanded = $state(false);
+</script>
+
+<!-- #endregion -->
+
+<!-- #region HTML -->
+
+<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... wtf -->
+	<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 any[]}
+		{onChange}
+		selectOnTab
+		deselectMode={required && !clearable ? 'none' : 'toggle'}
+		keepSelectionInList
+		{name}
+		{selection}
+		{append}
+	>
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+			<!-- <div class="icon-bg">
+				<Icon name="chevron-down" size={Size.MediumSmall} />
+			</div> -->
+		{/snippet}
+	</Svelecte>
+
+	{#snippet append()}
+		<div class="icons">
+			{#if clearable && selectedValue}
+				<Action
+					{disabled}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					size={Size.Small}
+					onclick={(e) => {
+						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<object>)}
+		{#if selectedOptions.length == 0}
+			<span class="selection" class:hidden>Please Select {an} {name}</span>
+		{:else}
+			<span class="selection">{(selectedOptions as V[])[0][labelProp]}</span>
+		{/if}
+	{/snippet}
+</div>
+
+<!-- #endregion -->
+
+<!-- #region CSS
+ -->
+<style>.select-wrapper {
+  min-width: var(--input-min-width);
+  width: min(100%, max(var(--input-width), 12rem));
+  height: max(var(--input-height, 3rem));
+  display: flex;
+  gap: 2rem;
+  color: #3a4952;
+  position: relative;
+}
+.select-wrapper.invalid {
+  --sv-border: solid 1px #aa1414;
+  --sv-control-bg: #f9e9e9;
+}
+.select-wrapper.invalid label span:not(.border) {
+  color: #aa1414;
+}
+.select-wrapper.invalid label span {
+  border-top-color: #f9e9e9;
+}
+.select-wrapper label {
+  position: absolute;
+  left: 0.5rem;
+  z-index: 1;
+  font-size: 0.9375rem;
+  padding: 0.05rem 0.4rem;
+  color: #647d8e;
+}
+.select-wrapper label span:not(.border) {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding: 0.1rem 0.4rem;
+  top: -0.6rem;
+  z-index: 2;
+  color: #647d8e;
+  white-space: nowrap;
+}
+.select-wrapper label span:not(.border).invalid {
+  color: #aa1414;
+}
+.select-wrapper label span.border {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  z-index: 1;
+  white-space: nowrap;
+  top: 0%;
+  height: 0;
+  color: transparent;
+  border-bottom: solid 1px #ffffff;
+}
+.select-wrapper label span.border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+.select-wrapper :global(.svelecte.svelecte-control) {
+  cursor: pointer;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+}
+.select-wrapper :global(.sv-item--content) {
+  font-size: 0.9375rem;
+}
+.select-wrapper :global(.sv-item--wrap.in-dropdown) {
+  cursor: pointer;
+  min-height: 40px;
+  align-items: center;
+}
+.select-wrapper :global(.sv-item--content) {
+  min-height: 1.2rem;
+}
+.select-wrapper :global(.sv-btn-indicator) {
+  cursor: pointer;
+}
+.select-wrapper.no-border {
+  --sv-border: none;
+}
+.select-wrapper .select-wrapper.force-upwards :global .sv_dropdown.is-open {
+  bottom: var(--dropdown-bottom);
+}
+.select-wrapper :global .sv-control {
+  width: 100%;
+  height: 100%;
+  font-size: 0.9375rem;
+}
+.select-wrapper :global .sv-control--selection {
+  flex-flow: row nowrap;
+}
+.select-wrapper :global .sv-control--selection span.sv-input--sizer {
+  position: static;
+  margin: -1px;
+}
+.select-wrapper :global .sv-control--selection span.sv-input--sizer input {
+  font-size: 0.9375rem;
+}
+.select-wrapper :global .svelecte.svelecte-control {
+  cursor: pointer;
+}
+.select-wrapper :global .sv-item--wrap.in-dropdown {
+  cursor: pointer;
+  min-height: 40px;
+  align-items: center;
+}
+.select-wrapper :global .sv-item--content {
+  min-height: 1.2rem;
+}
+.select-wrapper :global span {
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+.select-wrapper :global .sv-control {
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+.select-wrapper :global div.sv_dropdown.is-open {
+  z-index: 99;
+}
+.select-wrapper div.nothing {
+  height: 0;
+  width: 0;
+}
+.select-wrapper .dropdown-item,
+.select-wrapper .selection {
+  font-size: 0.9375rem;
+}
+.select-wrapper .selection {
+  padding-left: 0.5rem;
+  white-space: nowrap;
+  display: flex;
+}
+.select-wrapper .selection.invalid {
+  color: #aa1414;
+}
+.select-wrapper .selection.hidden {
+  display: none;
+}
+.select-wrapper .icon-bg {
+  display: contents;
+}
+
+div.icons {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.25rem;
+  height: 100%;
+  margin-right: 0.25rem;
+  box-sizing: border-box;
+}
+
+.dropdown-item {
+  display: flex;
+  flex-flow: row nowrap;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  gap: 1rem;
+  fill: #259fc7;
+}
+.dropdown-item .toggle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column nowrap;
+  opacity: 0;
+}
+.dropdown-item .toggle-icon.yes {
+  opacity: 1;
+}</style>

package/dist/Components/QuerySelect.svelte.d.ts

@@ -0,0 +1,52 @@
+interface commonProps<V extends object, VP extends string & keyof V> {
+    options?: V[];
+    name: string;
+    labelProp: string & keyof V;
+    valueProp: VP;
+    query: (value: string) => Promise<V[]>;
+    onchange: (e: V | null) => void;
+    disabled?: boolean;
+    width?: string;
+    height?: string;
+    label?: string;
+    required?: boolean;
+    invalid?: boolean;
+    onfocus?: (target: HTMLInputElement) => void;
+    inputId?: string;
+    focusOnLoad?: boolean;
+    clearable?: boolean;
+    isValid?: (item: V | null) => boolean;
+}
+export interface QuerySelectPropsAsObject<V extends object, VP extends string & keyof V> extends commonProps<V, VP> {
+    valueAsObject: true;
+    selectedValue: V | null;
+}
+export interface QuerySelectPropsAsPrimitive<V extends object, VP extends string & keyof V> extends commonProps<V, VP> {
+    valueAsObject: false;
+    selectedValue: V[VP] | null;
+}
+export type QuerySelectProps<V extends object, VP extends string & keyof V> = QuerySelectPropsAsObject<V, VP> | QuerySelectPropsAsPrimitive<V, VP>;
+declare function $$render<V extends object, VP extends string & keyof V>(): {
+    props: QuerySelectProps<V, VP>;
+    exports: {};
+    bindings: "options";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends object, VP extends string & keyof V> {
+    props(): ReturnType<typeof $$render<V, VP>>['props'];
+    events(): ReturnType<typeof $$render<V, VP>>['events'];
+    slots(): ReturnType<typeof $$render<V, VP>>['slots'];
+    bindings(): "options";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends object, VP extends string & keyof V>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends object, VP extends string & keyof V>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const QuerySelect: $$IsomorphicComponent;
+type QuerySelect<V extends object, VP extends string & keyof V> = InstanceType<typeof QuerySelect<V, VP>>;
+export default QuerySelect;