@lavalogic/scoria 0.39.2 → 0.40.0

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

@@ -1,194 +1,194 @@
-<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;
-		}
-	}
-</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>
-
+<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;
+		}
+	}
+</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 +222,4 @@
   font-size: 1.125rem;
   font-weight: 600;
   color: #3a4952;
-}</style>
+}</style>

package/dist/Components/Table/NestedTable.svelte

@@ -1,132 +1,132 @@
-<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;
-		}
-		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>
-
+<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;
+		}
+		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>
+
 <style>.limit-height {
   position: sticky;
   left: 0;
@@ -135,4 +135,4 @@
   box-sizing: border-box;
   background-color: #f4f7f9;
   box-shadow: inset 0px 7px 5px -6px #cbd4da, inset 0px -7px 5px -6px #cbd4da;
-}</style>
+}</style>