@lavalogic/scoria 0.38.11 → 0.38.12

package/dist/Components/Table/Headers/SelectAllHeader.svelte

@@ -1,32 +1,32 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const checked: boolean = $derived(
-		tableContext.dataRepo.data.length > 0 ? tableContext.allSelectedInCurrentPage : false
-	);
-</script>
-
-<div class="checkbox-cell">
-	<label aria-label="Select all rows on this page">
-		<input
-			aria-label="Select all rows on this page"
-			onchange={tableContext.selectAllInCurrentPage}
-			type="checkbox"
-			{checked}
-			disabled={tableContext.showSelectedOnly}
-		/>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const checked: boolean = $derived(
+		tableContext.dataRepo.data.length > 0 ? tableContext.allSelectedInCurrentPage : false
+	);
+</script>
+
+<div class="checkbox-cell">
+	<label aria-label="Select all rows on this page">
+		<input
+			aria-label="Select all rows on this page"
+			onchange={tableContext.selectAllInCurrentPage}
+			type="checkbox"
+			{checked}
+			disabled={tableContext.showSelectedOnly}
+		/>
+	</label>
+</div>
+
 <style>input[type=checkbox] {
   height: var(--checkbox-height);
   padding: 1rem;
@@ -54,4 +54,4 @@ label {
 
 label {
   cursor: pointer;
-}</style>
+}</style>

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -124,31 +124,52 @@
 				console.debug(`${def.id}: `, 'has query');
 			}
 
-			untrack(async () => {
+			untrack(() => {
 				try {
-					//  as unknown as string | number | undefined;
-
-					if (filteringStateValue != undefined) {
+					if (filteringStateValue == undefined) {
+						// Filter cleared externally (saved view applied with an
+						// empty filter, or "Clear All" hit). Drop the typeahead
+						// echo so the next selection isn't masked by a stale
+						// cache, and clear the local value so the chip clears.
 						if (def.debug) {
-							console.debug(`${def.id}: query values:`, tableContext.queryValues.snapshot());
+							console.debug(
+								`${def.id}: filtering state value was undefined`,
+								$state.snapshot(tableContext.paginationRepo?.filtering)
+							);
 						}
-						const x = tableContext.queryValues.get(def);
+						value = null;
+						tableContext.queryValues.delete(def);
+						return;
+					}
 
-						if (def.debug) {
-							console.debug(`${def.id}: value:`, $state.snapshot(x));
-						}
-						value = (x ?? null) as SelectOption<unknown> | null;
-					} else if (def.debug) {
-						console.debug(
-							`${def.id}: filtering state value was undefined`,
-							$state.snapshot(tableContext.paginationRepo?.filtering)
-						);
+					if (def.debug) {
+						console.debug(`${def.id}: query values:`, tableContext.queryValues.snapshot());
+					}
+					// Prefer the typeahead echo — it carries the real label
+					// from the option the user clicked. Fall back to the saved
+					// primitive (the usual case after applying a saved view)
+					// so the chip is at least visible; QuerySelect's own
+					// `$effect.pre` adds a placeholder option keyed on the
+					// primitive so it renders.
+					const cached = tableContext.queryValues.get(def);
+					if (def.debug) {
+						console.debug(`${def.id}: cached value:`, $state.snapshot(cached));
+					}
+					if (cached != null) {
+						value = cached;
+					} else if (customFilter.valueAsObject === true) {
+						value = {
+							value: filteringStateValue,
+							label: String(filteringStateValue),
+						};
+					} else {
+						value = filteringStateValue;
 					}
 				} catch (e) {
 					console.warn(e);
 					value = null;
 				}
-			}).catch(devCatch);
+			});
 		} else if (isSelect) {
 			if (def.debug) {
 				console.debug(`${def.id}: is select (not query)`);

package/dist/Components/Table/Misc/SidePanel.svelte

@@ -1,37 +1,37 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { quintOut } from 'svelte/easing';
-	import { slide } from 'svelte/transition';
-	import { Delay } from '../../../Delay/Delay.js';
-	import { usePrefersReducedMotion } from '../../../Helpers/prefersReducedMotion.svelte.js';
-	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
-	import type { SidePanelProps } from './SidePanelProps.js';
-</script>
-
-<script lang="ts">
-	const { toolbarPosition, onkeydown, ariaLabel, children }: SidePanelProps = $props();
-	const reducedMotion = usePrefersReducedMotion();
-	const slideDuration = $derived(reducedMotion.matches ? 0 : Delay.Default);
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="side-panel"
-	class:left={toolbarPosition === ToolbarPosition.Left}
-	class:right={toolbarPosition === ToolbarPosition.Right}
-	aria-label={ariaLabel}
-	{onkeydown}
-	transition:slide={{ duration: slideDuration, easing: quintOut, axis: 'x' }}
->
-	<div class="side-content">
-		{#if children}{@render children()}{/if}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { quintOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { Delay } from '../../../Delay/Delay.js';
+	import { usePrefersReducedMotion } from '../../../Helpers/prefersReducedMotion.svelte.js';
+	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
+	import type { SidePanelProps } from './SidePanelProps.js';
+</script>
+
+<script lang="ts">
+	const { toolbarPosition, onkeydown, ariaLabel, children }: SidePanelProps = $props();
+	const reducedMotion = usePrefersReducedMotion();
+	const slideDuration = $derived(reducedMotion.matches ? 0 : Delay.Default);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="side-panel"
+	class:left={toolbarPosition === ToolbarPosition.Left}
+	class:right={toolbarPosition === ToolbarPosition.Right}
+	aria-label={ariaLabel}
+	{onkeydown}
+	transition:slide={{ duration: slideDuration, easing: quintOut, axis: 'x' }}
+>
+	<div class="side-content">
+		{#if children}{@render children()}{/if}
+	</div>
+</div>
+
 <style>.side-panel {
   display: flex;
   flex-shrink: 0;
@@ -51,4 +51,4 @@
   flex-flow: column nowrap;
   flex: 1;
   width: 400px;
-}</style>
+}</style>

package/dist/Components/Table/Misc/ToolboxPanel.svelte

@@ -1,102 +1,102 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Checkbox from '../../Checkbox.svelte';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext } from 'svelte';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
-		tableContext.setIsCompact(e.currentTarget.checked);
-	};
-
-	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
-		tableContext.setSingleClickEditing(e.currentTarget.checked);
-	};
-
-	const onAlternateRowColoursChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setAlternateRowColours(e.currentTarget.checked);
-	};
-
-	const onChangeColourOnHoverChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setChangeColourOnHover(e.currentTarget.checked);
-	};
-
-	const onCopyWithHeadersChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setCopyWithHeaders(e.currentTarget.checked);
-	};
-
-	const onCommaSeparatedCopyChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
-	};
-</script>
-
-<section class="side-panel-section">
-	<header class="side-panel-header">
-		<h2>Settings</h2>
-	</header>
-	<div class="side-panel-body">
-		<Checkbox
-			label="Compact"
-			size={Size.MediumSmall}
-			id={`is-compact-${tableContext.tableName}`}
-			value={tableContext.isCompact}
-			onchange={onCompactChange}
-		/>
-		<Checkbox
-			label="Single Click Editing"
-			size={Size.MediumSmall}
-			id={`single-click-editing-${tableContext.tableName}`}
-			value={tableContext.singleClickEditing}
-			onchange={onSingleClickChange}
-		/>
-		<Checkbox
-			label="Alternate Row Colours"
-			size={Size.MediumSmall}
-			id={`alternate-row-colours-${tableContext.tableName}`}
-			value={tableContext.alternateRowColours}
-			onchange={onAlternateRowColoursChange}
-		/>
-		<Checkbox
-			label="Change Colour on Hover"
-			size={Size.MediumSmall}
-			id={`change-colour-on-hover-${tableContext.tableName}`}
-			value={tableContext.changeColourOnHover}
-			onchange={onChangeColourOnHoverChange}
-		/>
-		{#if tableContext.allowCopy}
-			<Checkbox
-				label="Include Headers When Copying"
-				size={Size.MediumSmall}
-				id={`copy-with-headers-${tableContext.tableName}`}
-				value={tableContext.copyWithHeaders}
-				onchange={onCopyWithHeadersChange}
-			/>
-			<Checkbox
-				label="Copy as Comma Separated Values"
-				size={Size.MediumSmall}
-				id={`comma-separated-copy-${tableContext.tableName}`}
-				value={tableContext.commaSeparatedCopy}
-				onchange={onCommaSeparatedCopyChange}
-			/>
-		{/if}
-	</div>
-</section>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Checkbox from '../../Checkbox.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setIsCompact(e.currentTarget.checked);
+	};
+
+	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setSingleClickEditing(e.currentTarget.checked);
+	};
+
+	const onAlternateRowColoursChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setAlternateRowColours(e.currentTarget.checked);
+	};
+
+	const onChangeColourOnHoverChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setChangeColourOnHover(e.currentTarget.checked);
+	};
+
+	const onCopyWithHeadersChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCopyWithHeaders(e.currentTarget.checked);
+	};
+
+	const onCommaSeparatedCopyChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
+	};
+</script>
+
+<section class="side-panel-section">
+	<header class="side-panel-header">
+		<h2>Settings</h2>
+	</header>
+	<div class="side-panel-body">
+		<Checkbox
+			label="Compact"
+			size={Size.MediumSmall}
+			id={`is-compact-${tableContext.tableName}`}
+			value={tableContext.isCompact}
+			onchange={onCompactChange}
+		/>
+		<Checkbox
+			label="Single Click Editing"
+			size={Size.MediumSmall}
+			id={`single-click-editing-${tableContext.tableName}`}
+			value={tableContext.singleClickEditing}
+			onchange={onSingleClickChange}
+		/>
+		<Checkbox
+			label="Alternate Row Colours"
+			size={Size.MediumSmall}
+			id={`alternate-row-colours-${tableContext.tableName}`}
+			value={tableContext.alternateRowColours}
+			onchange={onAlternateRowColoursChange}
+		/>
+		<Checkbox
+			label="Change Colour on Hover"
+			size={Size.MediumSmall}
+			id={`change-colour-on-hover-${tableContext.tableName}`}
+			value={tableContext.changeColourOnHover}
+			onchange={onChangeColourOnHoverChange}
+		/>
+		{#if tableContext.allowCopy}
+			<Checkbox
+				label="Include Headers When Copying"
+				size={Size.MediumSmall}
+				id={`copy-with-headers-${tableContext.tableName}`}
+				value={tableContext.copyWithHeaders}
+				onchange={onCopyWithHeadersChange}
+			/>
+			<Checkbox
+				label="Copy as Comma Separated Values"
+				size={Size.MediumSmall}
+				id={`comma-separated-copy-${tableContext.tableName}`}
+				value={tableContext.commaSeparatedCopy}
+				onchange={onCommaSeparatedCopyChange}
+			/>
+		{/if}
+	</div>
+</section>
+
 <style>.side-panel-section {
   display: flex;
   flex-flow: column nowrap;
@@ -147,4 +147,4 @@
   gap: 0.75rem;
   align-items: center;
   box-sizing: border-box;
-}</style>
+}</style>

package/dist/Components/Table/Misc/ToolboxPanelModal.svelte

@@ -1,113 +1,113 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Checkbox from '../../Checkbox.svelte';
-	import DesktopModal from '../../DesktopModal.svelte';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
-
-	let { onclose }: ToolboxPanelModalProps = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
-		tableContext.setIsCompact(e.currentTarget.checked);
-	};
-
-	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
-		tableContext.setSingleClickEditing(e.currentTarget.checked);
-	};
-
-	const onAlternateRowColoursChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setAlternateRowColours(e.currentTarget.checked);
-	};
-
-	const onChangeColourOnHoverChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setChangeColourOnHover(e.currentTarget.checked);
-	};
-
-	const onCopyWithHeadersChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setCopyWithHeaders(e.currentTarget.checked);
-	};
-
-	const onCommaSeparatedCopyChange = (
-		e: Event & { currentTarget: EventTarget & HTMLInputElement }
-	) => {
-		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
-	};
-</script>
-
-<DesktopModal
-	headerLabel="Table Settings"
-	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
->
-	<div class="flex">
-		<div class="column-panel">
-			<Checkbox
-				label="Compact"
-				size={Size.MediumSmall}
-				id={`is-compact-${tableContext.tableName}-modal`}
-				value={tableContext.isCompact}
-				onchange={onCompactChange}
-			/>
-			<Checkbox
-				label="Single Click Editing"
-				size={Size.MediumSmall}
-				id={`single-click-editing-${tableContext.tableName}-modal`}
-				value={tableContext.singleClickEditing}
-				onchange={onSingleClickChange}
-			/>
-			<Checkbox
-				label="Alternate Row Colours"
-				size={Size.MediumSmall}
-				id={`alternate-row-colours-${tableContext.tableName}-modal`}
-				value={tableContext.alternateRowColours}
-				onchange={onAlternateRowColoursChange}
-			/>
-			<Checkbox
-				label="Change Colour on Hover"
-				size={Size.MediumSmall}
-				id={`change-colour-on-hover-${tableContext.tableName}-modal`}
-				value={tableContext.changeColourOnHover}
-				onchange={onChangeColourOnHoverChange}
-			/>
-			{#if tableContext.allowCopy}
-				<Checkbox
-					label="Include Headers When Copying"
-					size={Size.MediumSmall}
-					id={`copy-with-headers-${tableContext.tableName}-modal`}
-					value={tableContext.copyWithHeaders}
-					onchange={onCopyWithHeadersChange}
-				/>
-				<Checkbox
-					label="Copy as Comma Separated Values"
-					size={Size.MediumSmall}
-					id={`comma-separated-copy-${tableContext.tableName}-modal`}
-					value={tableContext.commaSeparatedCopy}
-					onchange={onCommaSeparatedCopyChange}
-				/>
-			{/if}
-		</div>
-	</div>
-</DesktopModal>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Checkbox from '../../Checkbox.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
+
+	let { onclose }: ToolboxPanelModalProps = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setIsCompact(e.currentTarget.checked);
+	};
+
+	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setSingleClickEditing(e.currentTarget.checked);
+	};
+
+	const onAlternateRowColoursChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setAlternateRowColours(e.currentTarget.checked);
+	};
+
+	const onChangeColourOnHoverChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setChangeColourOnHover(e.currentTarget.checked);
+	};
+
+	const onCopyWithHeadersChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCopyWithHeaders(e.currentTarget.checked);
+	};
+
+	const onCommaSeparatedCopyChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
+	};
+</script>
+
+<DesktopModal
+	headerLabel="Table Settings"
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<div class="column-panel">
+			<Checkbox
+				label="Compact"
+				size={Size.MediumSmall}
+				id={`is-compact-${tableContext.tableName}-modal`}
+				value={tableContext.isCompact}
+				onchange={onCompactChange}
+			/>
+			<Checkbox
+				label="Single Click Editing"
+				size={Size.MediumSmall}
+				id={`single-click-editing-${tableContext.tableName}-modal`}
+				value={tableContext.singleClickEditing}
+				onchange={onSingleClickChange}
+			/>
+			<Checkbox
+				label="Alternate Row Colours"
+				size={Size.MediumSmall}
+				id={`alternate-row-colours-${tableContext.tableName}-modal`}
+				value={tableContext.alternateRowColours}
+				onchange={onAlternateRowColoursChange}
+			/>
+			<Checkbox
+				label="Change Colour on Hover"
+				size={Size.MediumSmall}
+				id={`change-colour-on-hover-${tableContext.tableName}-modal`}
+				value={tableContext.changeColourOnHover}
+				onchange={onChangeColourOnHoverChange}
+			/>
+			{#if tableContext.allowCopy}
+				<Checkbox
+					label="Include Headers When Copying"
+					size={Size.MediumSmall}
+					id={`copy-with-headers-${tableContext.tableName}-modal`}
+					value={tableContext.copyWithHeaders}
+					onchange={onCopyWithHeadersChange}
+				/>
+				<Checkbox
+					label="Copy as Comma Separated Values"
+					size={Size.MediumSmall}
+					id={`comma-separated-copy-${tableContext.tableName}-modal`}
+					value={tableContext.commaSeparatedCopy}
+					onchange={onCommaSeparatedCopyChange}
+				/>
+			{/if}
+		</div>
+	</div>
+</DesktopModal>
+
 <style>.flex {
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
   width: 100%;
   flex: 1;
-}</style>
+}</style>

package/dist/Components/Test/TestContextConsumer.svelte

@@ -1,13 +1,13 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { TestContext } from '../../Contexts/TestContext.svelte.js';
-	import { getContext } from 'svelte';
-
-	const testContext = getContext<TestContext>(TestContext.identifier);
-</script>
-
-<h1>counter 1: {testContext.value1.value}</h1>
-<p>Ref wrapper 1 is incremented every time you click the button</p>
-<h2>counter 2: {testContext.value2.value}</h2>
-<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>
+<svelte:options runes />
+
+<script lang="ts">
+	import { TestContext } from '../../Contexts/TestContext.svelte.js';
+	import { getContext } from 'svelte';
+
+	const testContext = getContext<TestContext>(TestContext.identifier);
+</script>
+
+<h1>counter 1: {testContext.value1.value}</h1>
+<p>Ref wrapper 1 is incremented every time you click the button</p>
+<h2>counter 2: {testContext.value2.value}</h2>
+<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>