@lavalogic/scoria 0.40.13 → 0.40.15

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

@@ -1,194 +1,167 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import DesktopModal from '../../DesktopModal.svelte';
-	import Icon from '../../Icon.svelte';
-	import InfoAlert from '../../InfoAlert.svelte';
-	import SingleSelect from '../../SingleSelect.svelte';
-	import TextInput from '../../TextInput.svelte';
-	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../../../scss/colours.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext, onMount } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import type { DatatableViewVisibility } from '../Types/Persistence/DatatableView.js';
-	import type { UpdateViewOptionsModalProps } from './UpdateViewOptionsModalProps.js';
-
-	const { view, onclose, onsaved }: UpdateViewOptionsModalProps = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	// Local form state. Seeded from the view's current values inside
-	// `onMount` so the modal opens populated with what's already saved
-	// without triggering Svelte's `state_referenced_locally` lint
-	// against the prop read; Save diffs against the view's current
-	// values to skip a no-op PATCH.
-	let name: string = $state('');
-	let visibility: DatatableViewVisibility = $state('private');
-
-	onMount(() => {
-		name = view.name;
-		visibility = view.visibility ?? 'private';
-	});
-
-	// User-visible error banner. Adapter rejections are routed here so
-	// the modal never throws into the host UI.
-	let errorMessage = $state<string | null>(null);
-
-	// `true` while the PATCH is in flight, disables the footer buttons.
-	let saving = $state(false);
-
-	const visibilityOptions: Array<SelectOption<DatatableViewVisibility>> = [
-		{
-			label: 'Private — only owner and explicit subscribers',
-			value: 'private',
-		},
-		{
-			label: 'Public — anyone with access to this table can subscribe',
-			value: 'public',
-		},
-	];
-
-	const selectedVisibility: SelectOption<DatatableViewVisibility> = $derived(
-		visibilityOptions.find((o) => o.value === visibility) ?? visibilityOptions[0]
-	);
-
-	// Whether anything in the form differs from the initial values.
-	// Drives the Save button's disabled state so a no-op Save never
-	// hits the network (also enforced inside `updateViewOptions`).
-	const dirty = $derived(
-		name.trim() !== view.name || visibility !== (view.visibility ?? 'private')
-	);
-
-	/** Whether the name is valid for submission (non-empty, trimmed). */
-	const isValidName = $derived(name.trim().length > 0);
-
-	async function save(): Promise<void> {
-		if (!dirty) {
-			onclose();
-			return;
-		}
-		if (!isValidName) {
-			errorMessage = `Name cannot be empty.`;
-			return;
-		}
-
-		errorMessage = null;
-		saving = true;
-		try {
-			await tableContext.updateViewOptions(view, {
-				name: name.trim(),
-				visibility,
-			});
-			if (onsaved) {
-				await onsaved();
-			}
-			onclose();
-		} catch (e: unknown) {
-			console.error('[UpdateViewOptionsModal] save failed:', e);
-			errorMessage =
-				e instanceof Error
-					? `Could not update options. (${e.message})`
-					: 'Could not update options.';
-		} finally {
-			saving = false;
-		}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>import DesktopModal from "../../DesktopModal.svelte";
+import Icon from "../../Icon.svelte";
+import InfoAlert from "../../InfoAlert.svelte";
+import SingleSelect from "../../SingleSelect.svelte";
+import TextInput from "../../TextInput.svelte";
+import { cssLength } from "../../../Helpers/Helpers.svelte.js";
+import { ColourSet } from "../../../scss/colours.js";
+import { Size } from "../../../Types/Internal/Size.js";
+import { getContext, onMount } from "svelte";
+import { TableContext } from "../Types/Context/TableContext.svelte.js";
+const { view, onclose, onsaved } = $props();
+const tableContext = getContext(TableContext.identifier);
+// Local form state. Seeded from the view's current values inside
+// `onMount` so the modal opens populated with what's already saved
+// without triggering Svelte's `state_referenced_locally` lint
+// against the prop read; Save diffs against the view's current
+// values to skip a no-op PATCH.
+let name = $state("");
+let visibility = $state("private");
+onMount(() => {
+	name = view.name;
+	visibility = view.visibility ?? "private";
+});
+// User-visible error banner. Adapter rejections are routed here so
+// the modal never throws into the host UI.
+let errorMessage = $state(null);
+// `true` while the PATCH is in flight, disables the footer buttons.
+let saving = $state(false);
+const visibilityOptions = [{
+	label: "Private — only owner and explicit subscribers",
+	value: "private"
+}, {
+	label: "Public — anyone with access to this table can subscribe",
+	value: "public"
+}];
+const selectedVisibility = $derived(visibilityOptions.find((o) => o.value === visibility) ?? visibilityOptions[0]);
+// Whether anything in the form differs from the initial values.
+// Drives the Save button's disabled state so a no-op Save never
+// hits the network (also enforced inside `updateViewOptions`).
+const dirty = $derived(name.trim() !== view.name || visibility !== (view.visibility ?? "private"));
+/** Whether the name is valid for submission (non-empty, trimmed). */
+const isValidName = $derived(name.trim().length > 0);
+async function save() {
+	if (!dirty) {
+		onclose();
+		return;
 	}
-</script>
-
-<DesktopModal
-	headerLabel={`Update Options - "${view.name}"`}
-	headerSubtitle={`Rename and change sharing for this ${view.kind === 'filter' ? 'filter' : 'layout'}.`}
-	onclose={() => {
-		if (!saving) {
-			onclose();
+	if (!isValidName) {
+		errorMessage = `Name cannot be empty.`;
+		return;
+	}
+	errorMessage = null;
+	saving = true;
+	try {
+		await tableContext.updateViewOptions(view, {
+			name: name.trim(),
+			visibility
+		});
+		if (onsaved) {
+			await onsaved();
 		}
-	}}
-	width={cssLength('40vw')}
-	minWidth={cssLength('32rem')}
-	buttons={[
-		{
-			label: 'Cancel',
-			callback: () => {
-				if (!saving) {
-					onclose();
-				}
-			},
-			disabled: saving,
-		},
-		{
-			label: saving ? 'Saving…' : 'Save',
-			callback: () => {
-				void save();
-			},
-			colourSet: ColourSet.Primary,
-			disabled: saving || !dirty || !isValidName,
-		},
-	]}
->
-	<div class="options-body">
-		{#if errorMessage}
-			<div
-				class="error-banner"
-				role="alert"
-			>
-				<Icon
-					name="circle-exclamation"
-					size={Size.Small}
-				/>
-				<span>{errorMessage}</span>
-			</div>
-		{/if}
-
-		<InfoAlert>
-			Changes apply to every user who has access to this {view.kind === 'filter'
-				? 'filter'
-				: 'layout'}. Making it public allows any user with access to the table to subscribe.
-		</InfoAlert>
-
-		<div class="field">
-			<label
-				class="field-label"
-				for="update-view-name">Name</label
-			>
-			<TextInput
-				id="update-view-name"
-				bind:value={name}
-				placeholder={`${view.kind === 'filter' ? 'Filter' : 'Layout'} name`}
-				required
-				invalid={!isValidName}
-			/>
-		</div>
-
-		<div class="field">
-			<label
-				class="field-label"
-				for="update-view-visibility">Visibility</label
-			>
-			<SingleSelect
-				inputId="update-view-visibility"
-				name="Visibility"
-				options={visibilityOptions}
-				labelProp="label"
-				valueProp="value"
-				value={selectedVisibility}
-				valueAsObject
-				searchable={false}
-				onchange={(option: SelectOption<DatatableViewVisibility> | null) => {
-					if (option) {
-						visibility = option.value;
-					}
-				}}
-			/>
-		</div>
-	</div>
-</DesktopModal>
-
+		onclose();
+	} catch (e) {
+		console.error("[UpdateViewOptionsModal] save failed:", e);
+		errorMessage = e instanceof Error ? `Could not update options. (${e.message})` : "Could not update options.";
+	} finally {
+		saving = false;
+	}
+}
+</script>
+
+<DesktopModal
+	headerLabel={`Update Options - "${view.name}"`}
+	headerSubtitle={`Rename and change sharing for this ${view.kind === 'filter' ? 'filter' : 'layout'}.`}
+	onclose={() => {
+		if (!saving) {
+			onclose();
+		}
+	}}
+	width={cssLength('40vw')}
+	minWidth={cssLength('32rem')}
+	buttons={[
+		{
+			label: 'Cancel',
+			callback: () => {
+				if (!saving) {
+					onclose();
+				}
+			},
+			disabled: saving,
+		},
+		{
+			label: saving ? 'Saving…' : 'Save',
+			callback: () => {
+				void save();
+			},
+			colourSet: ColourSet.Primary,
+			disabled: saving || !dirty || !isValidName,
+		},
+	]}
+>
+	<div class="options-body">
+		{#if errorMessage}
+			<div
+				class="error-banner"
+				role="alert"
+			>
+				<Icon
+					name="circle-exclamation"
+					size={Size.Small}
+				/>
+				<span>{errorMessage}</span>
+			</div>
+		{/if}
+
+		<InfoAlert>
+			Changes apply to every user who has access to this {view.kind === 'filter'
+				? 'filter'
+				: 'layout'}. Making it public allows any user with access to the table to subscribe.
+		</InfoAlert>
+
+		<div class="field">
+			<label
+				class="field-label"
+				for="update-view-name">Name</label
+			>
+			<TextInput
+				id="update-view-name"
+				bind:value={name}
+				placeholder={`${view.kind === 'filter' ? 'Filter' : 'Layout'} name`}
+				required
+				invalid={!isValidName}
+			/>
+		</div>
+
+		<div class="field">
+			<label
+				class="field-label"
+				for="update-view-visibility">Visibility</label
+			>
+			<SingleSelect
+				inputId="update-view-visibility"
+				name="Visibility"
+				options={visibilityOptions}
+				labelProp="label"
+				valueProp="value"
+				value={selectedVisibility}
+				valueAsObject
+				searchable={false}
+				onchange={(option: SelectOption<DatatableViewVisibility> | null) => {
+					if (option) {
+						visibility = option.value;
+					}
+				}}
+			/>
+		</div>
+	</div>
+</DesktopModal>
+
 <style>.options-body {
   display: flex;
   flex-flow: column nowrap;
@@ -222,4 +195,4 @@
   font-size: 1.125rem;
   font-weight: 600;
   color: #3a4952;
-}</style>
+}</style>

package/dist/Components/Table/NestedTable.svelte

@@ -1,132 +1,106 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import Table from './Table.svelte';
-	import type { NestedTableProps } from './NestedTableProps.js';
-	import type { Primitive, TableInitOptions } from './Types/Context/TableInitOptions.js';
-	import { TableContext } from './Types/Context/TableContext.svelte.js';
-	import { LocalTableDataRepository } from './Types/DataRepository/LocalTableDataRepository.svelte.js';
-	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
-
-	/**
-	 * Default `TableInitOptions` overrides applied to every nested table.
-	 * Tuned for read-only inline display: copy, resize and column
-	 * reordering are turned off, quick / advanced filtering remain on so
-	 * the consumer can still narrow rows, the toolbar is hidden, and the
-	 * footer is suppressed because pagination is rarely useful for inline
-	 * nested data.
-	 *
-	 * Frozen so consumers cannot accidentally mutate the shared default
-	 * object.
-	 */
-	const DEFAULT_NESTED_TABLE_OPTIONS: Omit<
-		TableInitOptions<object, never>,
-		'selectionExtractor' | 'getUserId'
-	> = Object.freeze({
-		allowCopy: false,
-		enableResize: false,
-		// Nested-table columns can be reordered and pinned by default like
-		// the outer table. Callers opt out per inner table via the
-		// `inner.allowReorder` option on `col.expand` (or the matching
-		// `allowReorder` on top-level `createTable`).
-		allowColumnReordering: true,
-		allowQuickFiltering: true,
-		allowAdvancedFiltering: true,
-		toolbar: ToolbarPosition.None,
-		displayFooter: false,
-	});
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,IdType extends Primitive"
->
-	const {
-		tableName,
-		data,
-		columnDefWrapper,
-		options,
-		oncontextmenu,
-		getUserId,
-	}: NestedTableProps<T, IdType> = $props();
-
-	// Reactive wrapper exposing the `data` prop as `.value` so the
-	// underlying LocalTableDataRepository can read it through its
-	// RefWrapper contract without us materialising a copy.
-	const wrapper = {
-		get value() {
-			return data;
-		},
-	};
-
-	let root: HTMLDivElement | undefined = $state();
-
-	// Track the parent `.datatable`'s visible width (clientWidth) via
-	// ResizeObserver. `.datatable` is the horizontal scroll container, so
-	// its `clientWidth` is the visible viewport regardless of how wide the
-	// inner `.datatable-grid` has grown via `min-width: max-content`. Do
-	// NOT measure `.flex_table` instead - flex `min-width: auto`
-	// propagates the scroll-content width and sizes the nested table to
-	// the full grid, breaking the sticky-fit behaviour.
-	//
-	// Reading layout inside a derivation would force a synchronous reflow
-	// on every reactive re-run; the ResizeObserver path keeps it out of
-	// the reactive graph.
-	let maxWidth: number | undefined = $state();
-	$effect(() => {
-		if (!root) {
-			return;
-		}
-		const scrollHost = root.closest('.datatable');
-		if (!(scrollHost instanceof HTMLElement)) {
-			return;
-		}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import Table from "./Table.svelte";
+import { TableContext } from "./Types/Context/TableContext.svelte.js";
+import { LocalTableDataRepository } from "./Types/DataRepository/LocalTableDataRepository.svelte.js";
+import { ToolbarPosition } from "./Types/Toolbar/ToolbarPosition.js";
+/**
+* Default `TableInitOptions` overrides applied to every nested table.
+* Tuned for read-only inline display: copy, resize and column
+* reordering are turned off, quick / advanced filtering remain on so
+* the consumer can still narrow rows, the toolbar is hidden, and the
+* footer is suppressed because pagination is rarely useful for inline
+* nested data.
+*
+* Frozen so consumers cannot accidentally mutate the shared default
+* object.
+*/
+const DEFAULT_NESTED_TABLE_OPTIONS = Object.freeze({
+	allowCopy: false,
+	enableResize: false,
+	allowColumnReordering: true,
+	allowQuickFiltering: true,
+	allowAdvancedFiltering: true,
+	toolbar: ToolbarPosition.None,
+	displayFooter: false
+});
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,IdType extends Primitive"
+>const { tableName, data, columnDefWrapper, options, oncontextmenu, getUserId } = $props();
+// Reactive wrapper exposing the `data` prop as `.value` so the
+// underlying LocalTableDataRepository can read it through its
+// RefWrapper contract without us materialising a copy.
+const wrapper = { get value() {
+	return data;
+} };
+let root = $state();
+// Track the parent `.datatable`'s visible width (clientWidth) via
+// ResizeObserver. `.datatable` is the horizontal scroll container, so
+// its `clientWidth` is the visible viewport regardless of how wide the
+// inner `.datatable-grid` has grown via `min-width: max-content`. Do
+// NOT measure `.flex_table` instead - flex `min-width: auto`
+// propagates the scroll-content width and sizes the nested table to
+// the full grid, breaking the sticky-fit behaviour.
+//
+// Reading layout inside a derivation would force a synchronous reflow
+// on every reactive re-run; the ResizeObserver path keeps it out of
+// the reactive graph.
+let maxWidth = $state();
+$effect(() => {
+	if (!root) {
+		return;
+	}
+	const scrollHost = root.closest(".datatable");
+	if (!(scrollHost instanceof HTMLElement)) {
+		return;
+	}
+	maxWidth = scrollHost.clientWidth;
+	const ro = new ResizeObserver(() => {
 		maxWidth = scrollHost.clientWidth;
-		const ro = new ResizeObserver(() => {
-			maxWidth = scrollHost.clientWidth;
-		});
-		ro.observe(scrollHost);
-		return () => {
-			ro.disconnect();
-		};
 	});
-
-	// These class instances have `$state`-backed internal fields, so they
-	// must NOT be wrapped in `$state(...)` (that would add a redundant
-	// reactive layer). The `dataRepo` and `tableContext` references must
-	// stay stable across updates: a fresh `dataRepo` would clear
-	// filter/sort state, and a fresh `tableContext` would tear down focus.
-	//
-	// svelte-ignore state_referenced_locally
-	const dataRepo = new LocalTableDataRepository<T>(tableName, wrapper, () => getUserId());
-
-	// svelte-ignore state_referenced_locally
-	const tableContext = TableContext.init<T, IdType>(columnDefWrapper, tableName, dataRepo, {
-		...DEFAULT_NESTED_TABLE_OPTIONS,
-		...options,
-		getUserId: () => getUserId(),
-	});
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="limit-height"
-	bind:this={root}
-	style:width={maxWidth != null ? `${maxWidth}px` : null}
-	oncontextmenu={(e) => {
-		e.stopPropagation();
-		oncontextmenu?.(e);
-	}}
->
-	<Table
-		nested
-		{tableContext}
-	/>
-</div>
-
+	ro.observe(scrollHost);
+	return () => {
+		ro.disconnect();
+	};
+});
+// These class instances have `$state`-backed internal fields, so they
+// must NOT be wrapped in `$state(...)` (that would add a redundant
+// reactive layer). The `dataRepo` and `tableContext` references must
+// stay stable across updates: a fresh `dataRepo` would clear
+// filter/sort state, and a fresh `tableContext` would tear down focus.
+//
+// svelte-ignore state_referenced_locally
+const dataRepo = new LocalTableDataRepository(tableName, wrapper, () => getUserId());
+// svelte-ignore state_referenced_locally
+const tableContext = TableContext.init(columnDefWrapper, tableName, dataRepo, {
+	...DEFAULT_NESTED_TABLE_OPTIONS,
+	...options,
+	getUserId: () => getUserId()
+});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="limit-height"
+	bind:this={root}
+	style:width={maxWidth != null ? `${maxWidth}px` : null}
+	oncontextmenu={(e) => {
+		e.stopPropagation();
+		oncontextmenu?.(e);
+	}}
+>
+	<Table
+		nested
+		{tableContext}
+	/>
+</div>
+
 <style>.limit-height {
   position: sticky;
   left: 0;
@@ -135,4 +109,4 @@
   box-sizing: border-box;
   background-color: #f4f7f9;
   box-shadow: inset 0px 7px 5px -6px #cbd4da, inset 0px -7px 5px -6px #cbd4da;
-}</style>
+}</style>