@lavalogic/scoria 0.38.10 → 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/TableConfigurationModal.svelte

@@ -22,6 +22,7 @@
 	import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
 	import ShareViewModal from './ShareViewModal.svelte';
 	import type { TableConfigurationModalProps } from './TableConfigurationModalProps.js';
+	import UpdateViewOptionsModal from './UpdateViewOptionsModal.svelte';
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
@@ -60,6 +61,26 @@
 	// to; the modal closes itself on Cancel / Save.
 	let sharingView = $state<DatatableView | null>(null);
 
+	// The view whose Update Options modal is currently open. `null` when
+	// no options modal is rendered. Same pattern as `sharingView`.
+	let updatingOptionsView = $state<DatatableView | null>(null);
+
+	/**
+	 * Overwrite a saved view's stored body with the table's current
+	 * live state. Triggered by the "Save Layout" / "Save Filter"
+	 * button on an owner card - the typical flow is "apply view A,
+	 * tweak the columns / filters, then click Save on A". Refreshes
+	 * the saved-views list afterwards so the card label and dropdown
+	 * pick up the new body, and surfaces any failure in the inline
+	 * error banner.
+	 */
+	function saveLiveStateInto(view: DatatableView): void {
+		void guard(async () => {
+			await tableContext.saveLiveStateIntoView(view);
+			await tableContext.refreshSavedViews();
+		}, `Could not save changes to "${view.name}". Please try again.`);
+	}
+
 	// Whether remote saved views are available at all. A table created
 	// without `datatableUuid` / `remoteLayouts` opts out of remote views;
 	// the modal then renders a graceful "unavailable" empty state and
@@ -358,6 +379,39 @@
 											applyView(view);
 										}}>Apply</Button
 									>
+									<!--
+										"Save Layout" / "Save Filter" overwrites THIS saved
+										view's stored body with the table's current live state.
+										Typical flow: user applies the view, tweaks the
+										columns or filter inputs, then clicks Save to make
+										the tweaks part of the saved view. Distinct from
+										"Save a new …" (which always creates a fresh record).
+									-->
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'circle-tick', size: Size.Small }}
+										onclick={() => {
+											saveLiveStateInto(view);
+										}}>Save {sectionNoun}</Button
+									>
+									<!--
+										"Update Options" opens a dedicated modal that edits
+										the view's name and sharing visibility (private /
+										public). Kept separate from the inline body-save
+										above so a quick name fix never accidentally
+										overwrites the saved layout / filter.
+									-->
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'edit', size: Size.Small }}
+										onclick={() => {
+											updatingOptionsView = view;
+										}}>Update Options</Button
+									>
 									<Button
 										variant={Variant.Secondary}
 										size={Size.MediumSmall}
@@ -570,6 +624,23 @@
 	/>
 {/if}
 
+<!--
+	Update-Options dialog stacked the same way as the Share dialog.
+	After a successful Save we refresh the saved views so the My-* card
+	picks up the new name / visibility immediately.
+-->
+{#if updatingOptionsView}
+	<UpdateViewOptionsModal
+		view={updatingOptionsView}
+		onclose={() => {
+			updatingOptionsView = null;
+		}}
+		onsaved={async () => {
+			await tableContext.refreshSavedViews();
+		}}
+	/>
+{/if}
+
 <style>.empty-state {
   display: flex;
   flex-flow: column nowrap;

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>