@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/SingleSelect.svelte

@@ -1,263 +1,263 @@
-<svelte:options runes />
-
-<script lang="ts" generics="V extends object, VP extends ValueProp<V>">
-	import { devCatch, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.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 { onMount, tick } from 'svelte';
-	import Action from './Action.svelte';
-	import type { SingleSelectProps } from './SingleSelectProps.js';
-
-	const {
-		label,
-		options,
-		labelProp,
-		valueProp,
-		focusOnLoad = false,
-		searchable = true,
-		creatable = false,
-
-		createFilter,
-		disabled,
-		width,
-		height,
-		name = 'Item',
-		valueAsObject,
-		minHeight,
-		clearable = false,
-		required = false,
-		invalid = false,
-		borderless = false,
-		lazyDropdown = false,
-		forceUpwards = false,
-		inputId = generateShortUUID(),
-		value: selectedValue,
-		onchange,
-		// onkeydown, // TODO
-		onfocus,
-		onCreateOption
-	}: SingleSelectProps<V, VP> = $props();
-
-	// FIXME this in combination with the effect may trigger a double assignment on mount. We will need to test it.
-
-	let currentValue = $derived(selectedValue);
-	let ref = $state<Svelecte | undefined>();
-	let wrapperRef: HTMLDivElement | undefined = $state();
-
-	$effect.pre(() => {
-		void options;
-		void selectedValue;
-		currentValue = selectedValue;
-	});
-
-	// WARN this is potentially duplicating existing logic
-	// $effect.pre(() => {
-	// 	if (selectedValue) {
-	// 		const found = options.find((opt) => opt[valueProp] === selectedValue[valueProp]);
-	// 		debugger;
-	// 		if (!found) {
-	// 			onCreateOption?.(selectedValue);
-	// 		} else {
-	// 			console.log(options);
-	// 		}
-	// 	}
-	// });
-
-	const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? '') ? 'an' : 'a');
-
-	const isInvalid = $derived((required && !currentValue) || invalid);
-
-	let hasAutoFocused = $state(false);
-	const dropdownBottom = $derived(wrapperRef ? wrapperRef.getBoundingClientRect().height : 0);
-
-	function forceShowDropdown(input: HTMLInputElement) {
-		if (focusOnLoad && !hasAutoFocused) {
-			hasAutoFocused = true;
-
-			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) => {
-			// 	onkeydown(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);
-			// 	}
-			// }
-			// });
-		}
-	}
-
-	// let hidden = $state(false);
-	let isExpanded = $state(false);
-
-	onMount(() => {
-		if (focusOnLoad) {
-			tick()
-				.then(() => {
-					(ref as HTMLSelectElement | undefined)?.focus();
-				})
-				.catch(devCatch);
-		}
-
-		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: 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 });
-		}
-
-		return () => {
-			observer.disconnect();
-		};
-	});
-
-	// function onChange(v: V | null) {
-	// 	if (clearable || v != null) {
-	// 		onchange(v ?? null);
-	// 	} else {
-	// 		currentValue = null;
-	// 		currentValue = selectedValue;
-	// 	}
-	// }
-
-	function isObject(value: SingleSelectProps<V, VP>['value']): value is V | null {
-		return typeof value == 'object';
-	}
-</script>
-
-<div
-	class="select-wrapper"
-	class:no-border={borderless}
-	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''} --dropdown-bottom: calc(${dropdownBottom}px + 1px); --sv-min-height: ${minHeight ?? '2rem'};`}
-	class:invalid={isInvalid}
-	class:force-upwards={forceUpwards}
-	bind:this={wrapperRef}
->
-	{#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}
-
-	<Svelecte
-		{createFilter}
-		{disabled}
-		{name}
-		onFocus={(target: HTMLInputElement) => {
-			forceShowDropdown(target);
-			onfocus?.(target);
-		}}
-		bind:this={ref}
-		{valueAsObject}
-		{inputId}
-		{required}
-		valueField={valueProp}
-		labelField={labelProp}
-		virtualList={false}
-		{options}
-		{creatable}
-		searchProps={{ keepSelectionInList: true }}
-		{onCreateOption}
-		placeholder="Please Select {name ? `${an} ${name}` : ''}"
-		{lazyDropdown}
-		value={// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		currentValue as Array<any>}
-		onChange={onchange}
-		{searchable}
-		selectOnTab
-		keepSelectionInList
-		deselectMode={clearable ? 'toggle' : 'none'}
-	>
-		{#snippet option(opt)}<span class="dropdown-item"> {(opt as V)[labelProp]}</span>{/snippet}
-
-		{#snippet append()}
-			<div class="icons">
-				{#if clearable && currentValue}
-					<Action
-						noTabIndex
-						onclick={(e: MouseEvent) => {
-							if (isExpanded) {
-								e.stopPropagation();
-							}
-
-							onchange(null);
-						}}
-						{disabled}
-						colourSet={ColourSet.Auxiliary}
-						size={Size.Small}
-						icon={{
-							name: 'close-menu-cross',
-							colour: Colour['$ui-blue-10']
-						}}
-					/>
-				{/if}
-
-				<Action
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					size={Size.Small}
-					{disabled}
-					icon={{
-						name: isExpanded ? 'chevron-up' : 'chevron-down',
-						colour: Colour['$ui-blue-10']
-					}}
-				/>
-			</div>
-		{/snippet}
-		{#snippet toggleIcon()}
-			<div class="nothing"></div>
-			<!-- <div class="icon-bg">
-				<Icon name="chevron-down" size={Size.MediumSmall} />
-			</div> -->
-		{/snippet}
-
-		{#snippet selection(/*_selectedOptions: Array<any>*/)}
-			<!-- <span class="selection">hello</span> -->
-
-			<span class="selection" class:invalid={isInvalid}>
-				{#if isObject(selectedValue)}
-					{selectedValue?.[labelProp]}
-				{:else}
-					{options.find((it) => it[valueProp] === selectedValue)?.[labelProp]}
-				{/if}
-			</span>
-		{/snippet}
-	</Svelecte>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" generics="V extends object, VP extends ValueProp<V>">
+	import { devCatch, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.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 { onMount, tick } from 'svelte';
+	import Action from './Action.svelte';
+	import type { SingleSelectProps } from './SingleSelectProps.js';
+
+	const {
+		label,
+		options,
+		labelProp,
+		valueProp,
+		focusOnLoad = false,
+		searchable = true,
+		creatable = false,
+
+		createFilter,
+		disabled,
+		width,
+		height,
+		name = 'Item',
+		valueAsObject,
+		minHeight,
+		clearable = false,
+		required = false,
+		invalid = false,
+		borderless = false,
+		lazyDropdown = false,
+		forceUpwards = false,
+		inputId = generateShortUUID(),
+		value: selectedValue,
+		onchange,
+		// onkeydown, // TODO
+		onfocus,
+		onCreateOption
+	}: SingleSelectProps<V, VP> = $props();
+
+	// FIXME this in combination with the effect may trigger a double assignment on mount. We will need to test it.
+
+	let currentValue = $derived(selectedValue);
+	let ref = $state<Svelecte | undefined>();
+	let wrapperRef: HTMLDivElement | undefined = $state();
+
+	$effect.pre(() => {
+		void options;
+		void selectedValue;
+		currentValue = selectedValue;
+	});
+
+	// WARN this is potentially duplicating existing logic
+	// $effect.pre(() => {
+	// 	if (selectedValue) {
+	// 		const found = options.find((opt) => opt[valueProp] === selectedValue[valueProp]);
+	// 		debugger;
+	// 		if (!found) {
+	// 			onCreateOption?.(selectedValue);
+	// 		} else {
+	// 			console.log(options);
+	// 		}
+	// 	}
+	// });
+
+	const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? '') ? 'an' : 'a');
+
+	const isInvalid = $derived((required && !currentValue) || invalid);
+
+	let hasAutoFocused = $state(false);
+	const dropdownBottom = $derived(wrapperRef ? wrapperRef.getBoundingClientRect().height : 0);
+
+	function forceShowDropdown(input: HTMLInputElement) {
+		if (focusOnLoad && !hasAutoFocused) {
+			hasAutoFocused = true;
+
+			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) => {
+			// 	onkeydown(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);
+			// 	}
+			// }
+			// });
+		}
+	}
+
+	// let hidden = $state(false);
+	let isExpanded = $state(false);
+
+	onMount(() => {
+		if (focusOnLoad) {
+			tick()
+				.then(() => {
+					(ref as HTMLSelectElement | undefined)?.focus();
+				})
+				.catch(devCatch);
+		}
+
+		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: 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 });
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	// function onChange(v: V | null) {
+	// 	if (clearable || v != null) {
+	// 		onchange(v ?? null);
+	// 	} else {
+	// 		currentValue = null;
+	// 		currentValue = selectedValue;
+	// 	}
+	// }
+
+	function isObject(value: SingleSelectProps<V, VP>['value']): value is V | null {
+		return typeof value == 'object';
+	}
+</script>
+
+<div
+	class="select-wrapper"
+	class:no-border={borderless}
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''} --dropdown-bottom: calc(${dropdownBottom}px + 1px); --sv-min-height: ${minHeight ?? '2rem'};`}
+	class:invalid={isInvalid}
+	class:force-upwards={forceUpwards}
+	bind:this={wrapperRef}
+>
+	{#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}
+
+	<Svelecte
+		{createFilter}
+		{disabled}
+		{name}
+		onFocus={(target: HTMLInputElement) => {
+			forceShowDropdown(target);
+			onfocus?.(target);
+		}}
+		bind:this={ref}
+		{valueAsObject}
+		{inputId}
+		{required}
+		valueField={valueProp}
+		labelField={labelProp}
+		virtualList={false}
+		{options}
+		{creatable}
+		searchProps={{ keepSelectionInList: true }}
+		{onCreateOption}
+		placeholder="Please Select {name ? `${an} ${name}` : ''}"
+		{lazyDropdown}
+		value={// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		currentValue as Array<any>}
+		onChange={onchange}
+		{searchable}
+		selectOnTab
+		keepSelectionInList
+		deselectMode={clearable ? 'toggle' : 'none'}
+	>
+		{#snippet option(opt)}<span class="dropdown-item"> {(opt as V)[labelProp]}</span>{/snippet}
+
+		{#snippet append()}
+			<div class="icons">
+				{#if clearable && currentValue}
+					<Action
+						noTabIndex
+						onclick={(e: MouseEvent) => {
+							if (isExpanded) {
+								e.stopPropagation();
+							}
+
+							onchange(null);
+						}}
+						{disabled}
+						colourSet={ColourSet.Auxiliary}
+						size={Size.Small}
+						icon={{
+							name: 'close-menu-cross',
+							colour: Colour['$ui-blue-10']
+						}}
+					/>
+				{/if}
+
+				<Action
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					size={Size.Small}
+					{disabled}
+					icon={{
+						name: isExpanded ? 'chevron-up' : 'chevron-down',
+						colour: Colour['$ui-blue-10']
+					}}
+				/>
+			</div>
+		{/snippet}
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+			<!-- <div class="icon-bg">
+				<Icon name="chevron-down" size={Size.MediumSmall} />
+			</div> -->
+		{/snippet}
+
+		{#snippet selection(/*_selectedOptions: Array<any>*/)}
+			<!-- <span class="selection">hello</span> -->
+
+			<span class="selection" class:invalid={isInvalid}>
+				{#if isObject(selectedValue)}
+					{selectedValue?.[labelProp]}
+				{:else}
+					{options.find((it) => it[valueProp] === selectedValue)?.[labelProp]}
+				{/if}
+			</span>
+		{/snippet}
+	</Svelecte>
+</div>
+
 <style>.select-wrapper {
   min-width: var(--input-min-width, 12rem);
   width: var(--input-width, 100%);
@@ -431,4 +431,4 @@ div.icons {
 }
 .dropdown-item .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>