@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/SidebarPanel.svelte

@@ -1,38 +1,36 @@
-<svelte:options runes />
-
-<!--
-@component
-A titled card laid out as a fixed-width menu column beside a main content
-area. Both regions are supplied by the consumer as snippets (`menu` and the
-default `children`), so the component only owns the framing and layout.
--->
-<script lang="ts">
-	import type { SidebarPanelProps } from './SidebarPanelProps.js';
-
-	let { title, subtitle, menu, children, menuWidth = '14rem' }: SidebarPanelProps = $props();
-</script>
-
-<section class="sidebar-panel">
-	<header class="heading">
-		<h2>{title}</h2>
-		{#if subtitle}
-			<span class="subtitle">{subtitle}</span>
-		{/if}
-	</header>
-
-	<div class="body">
-		<aside
-			class="menu"
-			style="--menu-width: {menuWidth};"
-		>
-			{@render menu()}
-		</aside>
-		<div class="main">
-			{@render children()}
-		</div>
-	</div>
-</section>
-
+<svelte:options runes />
+
+<!--
+@component
+A titled card laid out as a fixed-width menu column beside a main content
+area. Both regions are supplied by the consumer as snippets (`menu` and the
+default `children`), so the component only owns the framing and layout.
+-->
+<script lang="ts">let { title, subtitle, menu, children, menuWidth = "14rem" } = $props();
+export {};
+</script>
+
+<section class="sidebar-panel">
+	<header class="heading">
+		<h2>{title}</h2>
+		{#if subtitle}
+			<span class="subtitle">{subtitle}</span>
+		{/if}
+	</header>
+
+	<div class="body">
+		<aside
+			class="menu"
+			style="--menu-width: {menuWidth};"
+		>
+			{@render menu()}
+		</aside>
+		<div class="main">
+			{@render children()}
+		</div>
+	</div>
+</section>
+
 <style>.sidebar-panel {
   display: flex;
   flex-flow: column nowrap;
@@ -82,4 +80,4 @@ default `children`), so the component only owns the framing and layout.
   flex-flow: column nowrap;
   gap: 1.5rem;
   padding: 1.5rem;
-}</style>
+}</style>

package/dist/Components/SingleSelect.svelte

@@ -1,252 +1,204 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="V extends object, VP extends ValueProp<V>"
->
-	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 { 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 = generateWeakId(),
-		value: selectedValue,
-		onchange,
-		onfocus,
-		onCreateOption,
-	}: SingleSelectProps<V, VP> = $props();
-
-	// Single source of truth for the current value. The previous code mixed
-	// `$derived` and `$effect.pre`, which fired a redundant assignment on mount.
-	const currentValue = $derived(selectedValue);
-	let ref = $state<Svelecte | undefined>();
-	let wrapperRef: HTMLDivElement | undefined = $state();
-
-	const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? '') ? 'an' : 'a');
-
-	const isInvalid = $derived((required && !currentValue) || invalid);
-
-	let hasAutoFocused = $state(false);
-
-	// ResizeObserver-driven height. Replaces the layout-forcing
-	// `getBoundingClientRect()` call that used to run inside a `$derived`.
-	let dropdownBottom = $state(0);
-	$effect(() => {
-		if (!wrapperRef) {
-			return;
-		}
-		const ro = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			dropdownBottom = entry.borderBoxSize[0].blockSize;
-		});
-		ro.observe(wrapperRef);
-		return () => {
-			ro.disconnect();
-		};
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="V extends object, VP extends ValueProp<V>"
+>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 { onMount, tick } from "svelte";
+import Action from "./Action.svelte";
+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 = generateWeakId(), value: selectedValue, onchange, onfocus, onCreateOption } = $props();
+// Single source of truth for the current value. The previous code mixed
+// `$derived` and `$effect.pre`, which fired a redundant assignment on mount.
+const currentValue = $derived(selectedValue);
+let ref = $state();
+let wrapperRef = $state();
+const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? "") ? "an" : "a");
+const isInvalid = $derived(required && !currentValue || invalid);
+let hasAutoFocused = $state(false);
+// ResizeObserver-driven height. Replaces the layout-forcing
+// `getBoundingClientRect()` call that used to run inside a `$derived`.
+let dropdownBottom = $state(0);
+$effect(() => {
+	if (!wrapperRef) {
+		return;
+	}
+	const ro = new ResizeObserver((entries) => {
+		const entry = entries[0];
+		dropdownBottom = entry.borderBoxSize[0].blockSize;
 	});
-
-	function forceShowDropdown(input: HTMLInputElement) {
-		if (focusOnLoad && !hasAutoFocused) {
-			hasAutoFocused = true;
-			input.click();
-		}
+	ro.observe(wrapperRef);
+	return () => {
+		ro.disconnect();
+	};
+});
+function forceShowDropdown(input) {
+	if (focusOnLoad && !hasAutoFocused) {
+		hasAutoFocused = true;
+		input.click();
 	}
-
-	let isExpanded = $state(false);
-
-	onMount(() => {
-		if (focusOnLoad) {
-			tick()
-				.then(() => {
-					(ref as HTMLSelectElement | undefined)?.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 / clear icon visibility below.
-		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;
-				}
+}
+let isExpanded = $state(false);
+onMount(() => {
+	if (focusOnLoad) {
+		tick().then(() => {
+			ref?.focus();
+		}).catch(devCatch);
+	}
+	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 / clear icon visibility below.
+	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 dropdown to `document.body` while open so it
-		// escapes every ancestor `overflow` / `transform` / `z-index`
-		// stacking context (filter-panel groups, sticky table strips,
-		// modals, etc.). The portal helper also auto-flips upwards
-		// when there is not enough space below the trigger and
-		// repositions on scroll / resize. See
-		// `Helpers/dropdownPortal.ts` for the full rationale.
-		const detachPortal = attachDropdownPortal({
-			getTrigger: () => svelecteRoot,
-			getDropdown: () => dropdownRef,
-		});
-
-		return () => {
-			observer.disconnect();
-			detachPortal();
-		};
 	});
-
-	function isObject(value: SingleSelectProps<V, VP>['value']): value is V {
-		return value !== null && typeof value === 'object';
+	if (dropdownRef) {
+		observer.observe(dropdownRef, { attributes: true });
 	}
-</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={(newValue: V | null) => {
-			// svelecte always emits the full option object regardless of
-			// `valueAsObject`. Map to the shape the discriminated variant
-			// promised: primitive for AsPrimitive, object for AsObject.
-			if (valueAsObject) {
-				void (onchange as (v: V | null) => void | Promise<void>)(newValue);
-			} 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);
-			}
-		}}
-		{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();
-							}
-
-							void 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>
-		{/snippet}
-
-		{#snippet selection(/*_selectedOptions: Array<any>*/)}
-			<span
-				class="selection"
-				class:invalid={isInvalid}
-			>
-				{#if isObject(selectedValue)}
-					{selectedValue[labelProp]}
-				{:else}
-					{options.find((it) => it[valueProp] === selectedValue)?.[labelProp]}
-				{/if}
-			</span>
-		{/snippet}
-	</Svelecte>
-</div>
-
+	// Teleport the dropdown to `document.body` while open so it
+	// escapes every ancestor `overflow` / `transform` / `z-index`
+	// stacking context (filter-panel groups, sticky table strips,
+	// modals, etc.). The portal helper also auto-flips upwards
+	// when there is not enough space below the trigger and
+	// repositions on scroll / resize. See
+	// `Helpers/dropdownPortal.ts` for the full rationale.
+	const detachPortal = attachDropdownPortal({
+		getTrigger: () => svelecteRoot,
+		getDropdown: () => dropdownRef
+	});
+	return () => {
+		observer.disconnect();
+		detachPortal();
+	};
+});
+function isObject(value) {
+	return value !== null && 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={(newValue: V | null) => {
+			// svelecte always emits the full option object regardless of
+			// `valueAsObject`. Map to the shape the discriminated variant
+			// promised: primitive for AsPrimitive, object for AsObject.
+			if (valueAsObject) {
+				void (onchange as (v: V | null) => void | Promise<void>)(newValue);
+			} 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);
+			}
+		}}
+		{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();
+							}
+
+							void 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>
+		{/snippet}
+
+		{#snippet selection(/*_selectedOptions: Array<any>*/)}
+			<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%);
@@ -409,4 +361,4 @@ div.icons {
 }
 :global(.dropdown-item) .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>