@lavalogic/scoria 0.39.2 → 0.40.0

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

@@ -1,202 +1,202 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Button from '../../Button.svelte';
-	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
-	import { Side } from '../../../Types/Internal/Side.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
-	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
-	import ColumnPanel from './ColumnPanel.svelte';
-	import FilterPanel from './FilterPanel.svelte';
-	import SidePanel from './SidePanel.svelte';
-	import TableConfigurationModal from './TableConfigurationModal.svelte';
-	import ToolboxPanel from './ToolboxPanel.svelte';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	// `TableConfigurationModal` is a full `DesktopModal` rather than a
-	// side-panel body, so it is registered here but rendered standalone
-	// (outside `SidePanel`) below - `panels` only maps the side-panel
-	// kinds. Keeping the Configuration key in the map documents the
-	// relationship and mirrors `TableHorizontalBar`'s registration.
-	const panels = {
-		[ExpandedPanel.Column]: ColumnPanel,
-		[ExpandedPanel.Filter]: FilterPanel,
-		[ExpandedPanel.Toolbox]: ToolboxPanel,
-		[ExpandedPanel.Configuration]: TableConfigurationModal,
-	} as const;
-
-	let expandedPanel = $state<ExpandedPanel | null>(null);
-
-	$effect(() => {
-		// The Configuration modal owns its own overlay and must not shrink
-		// the table footer the way an inline side panel does.
-		tableContext.limitFooter = !!expandedPanel && expandedPanel !== ExpandedPanel.Configuration;
-	});
-
-	// Side-panel body for the inline panel kinds only; the Configuration
-	// kind is excluded and handled by the standalone modal block below.
-	let ExpandedPanelElement = $derived(
-		expandedPanel &&
-			expandedPanel !== ExpandedPanel.None &&
-			expandedPanel !== ExpandedPanel.Configuration
-			? panels[expandedPanel]
-			: null
-	);
-
-	function handleClickOutside(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (!target.isConnected) {
-			return;
-		}
-		// A click landing inside the side-panel or the toolbar
-		// sidebar should keep the panel open.
-		if (target.closest('.side-content') != null) {
-			return;
-		}
-		if (target.closest('.sidebar') != null) {
-			return;
-		}
-		// A click landing inside a teleported select dropdown (see
-		// `Helpers/dropdownPortal.ts`) is a logical extension of the
-		// trigger that lives inside the side-panel, so it must not
-		// close the panel. The marker attribute is set by the portal
-		// helper while the dropdown is teleported to `document.body`.
-		if (target.closest('[data-scoria-portal-dropdown]') != null) {
-			return;
-		}
-		// The Table Configuration modal owns its own backdrop + close
-		// affordances; a click inside its `.modal-root` must not be
-		// treated as a click-outside that dismisses the panel.
-		if (target.closest('.modal-root') != null) {
-			return;
-		}
-		expandedPanel = null;
-	}
-
-	function handleEscKey(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			expandedPanel = null;
-		}
-	}
-</script>
-
-<svelte:window
-	onclick={handleClickOutside}
-	onkeydown={handleEscKey}
-/>
-
-{#if ExpandedPanelElement != null}
-	<SidePanel toolbarPosition={tableContext.toolbarPosition}>
-		<ExpandedPanelElement />
-	</SidePanel>
-{/if}
-
-{#if expandedPanel === ExpandedPanel.Configuration}
-	<TableConfigurationModal
-		onclose={() => {
-			expandedPanel = null;
-		}}
-	/>
-{/if}
-<div class="sidebar">
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		onclick={() => {
-			tableContext.toggleQuickFiltering();
-		}}
-		toggled={tableContext.showQuickFiltering}
-		disabled={!tableContext.allowQuickFiltering}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'assessment',
-			size: Size.Medium,
-		}}
-		label="Quick Filter"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		disabled={!tableContext.allowAdvancedFiltering}
-		toggled={expandedPanel === ExpandedPanel.Filter}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Filter ? null : ExpandedPanel.Filter;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'filter-bars',
-			size: Size.Medium,
-		}}
-		label="Advanced Filter"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Column ? null : ExpandedPanel.Column;
-		}}
-		variant={Variant.Toolbar}
-		toggled={expandedPanel === ExpandedPanel.Column}
-		iconTop={{
-			name: 'columns',
-			size: Size.Medium,
-		}}
-		label="Modify Columns"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'category',
-			size: Size.Medium,
-		}}
-		label="My Tool Box"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Configuration}
-		onclick={() => {
-			expandedPanel =
-				expandedPanel === ExpandedPanel.Configuration ? null : ExpandedPanel.Configuration;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'setting-cog',
-			size: Size.Medium,
-		}}
-		label="Table Configuration"
-	/>
-
-	{#if tableContext.paginationRepo?.reload}
-		<Button
-			side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-			onclick={() => {
-				tableContext.paginationRepo?.reload?.().catch(devCatch);
-			}}
-			disabled={!tableContext.allowQuickFiltering}
-			variant={Variant.Toolbar}
-			toggled={tableContext.dataRepo.isLoading}
-			iconTop={{
-				name: 'refresh',
-				size: Size.Medium,
-			}}
-			label="Refresh"
-		/>
-	{/if}
-
-	<div class="filler"></div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Button from '../../Button.svelte';
+	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
+	import { Side } from '../../../Types/Internal/Side.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
+	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
+	import ColumnPanel from './ColumnPanel.svelte';
+	import FilterPanel from './FilterPanel.svelte';
+	import SidePanel from './SidePanel.svelte';
+	import TableConfigurationModal from './TableConfigurationModal.svelte';
+	import ToolboxPanel from './ToolboxPanel.svelte';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	// `TableConfigurationModal` is a full `DesktopModal` rather than a
+	// side-panel body, so it is registered here but rendered standalone
+	// (outside `SidePanel`) below - `panels` only maps the side-panel
+	// kinds. Keeping the Configuration key in the map documents the
+	// relationship and mirrors `TableHorizontalBar`'s registration.
+	const panels = {
+		[ExpandedPanel.Column]: ColumnPanel,
+		[ExpandedPanel.Filter]: FilterPanel,
+		[ExpandedPanel.Toolbox]: ToolboxPanel,
+		[ExpandedPanel.Configuration]: TableConfigurationModal,
+	} as const;
+
+	let expandedPanel = $state<ExpandedPanel | null>(null);
+
+	$effect(() => {
+		// The Configuration modal owns its own overlay and must not shrink
+		// the table footer the way an inline side panel does.
+		tableContext.limitFooter = !!expandedPanel && expandedPanel !== ExpandedPanel.Configuration;
+	});
+
+	// Side-panel body for the inline panel kinds only; the Configuration
+	// kind is excluded and handled by the standalone modal block below.
+	let ExpandedPanelElement = $derived(
+		expandedPanel &&
+			expandedPanel !== ExpandedPanel.None &&
+			expandedPanel !== ExpandedPanel.Configuration
+			? panels[expandedPanel]
+			: null
+	);
+
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (!target.isConnected) {
+			return;
+		}
+		// A click landing inside the side-panel or the toolbar
+		// sidebar should keep the panel open.
+		if (target.closest('.side-content') != null) {
+			return;
+		}
+		if (target.closest('.sidebar') != null) {
+			return;
+		}
+		// A click landing inside a teleported select dropdown (see
+		// `Helpers/dropdownPortal.ts`) is a logical extension of the
+		// trigger that lives inside the side-panel, so it must not
+		// close the panel. The marker attribute is set by the portal
+		// helper while the dropdown is teleported to `document.body`.
+		if (target.closest('[data-scoria-portal-dropdown]') != null) {
+			return;
+		}
+		// The Table Configuration modal owns its own backdrop + close
+		// affordances; a click inside its `.modal-root` must not be
+		// treated as a click-outside that dismisses the panel.
+		if (target.closest('.modal-root') != null) {
+			return;
+		}
+		expandedPanel = null;
+	}
+
+	function handleEscKey(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			expandedPanel = null;
+		}
+	}
+</script>
+
+<svelte:window
+	onclick={handleClickOutside}
+	onkeydown={handleEscKey}
+/>
+
+{#if ExpandedPanelElement != null}
+	<SidePanel toolbarPosition={tableContext.toolbarPosition}>
+		<ExpandedPanelElement />
+	</SidePanel>
+{/if}
+
+{#if expandedPanel === ExpandedPanel.Configuration}
+	<TableConfigurationModal
+		onclose={() => {
+			expandedPanel = null;
+		}}
+	/>
+{/if}
+<div class="sidebar">
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		onclick={() => {
+			tableContext.toggleQuickFiltering();
+		}}
+		toggled={tableContext.showQuickFiltering}
+		disabled={!tableContext.allowQuickFiltering}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'assessment',
+			size: Size.Medium,
+		}}
+		label="Quick Filter"
+	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		disabled={!tableContext.allowAdvancedFiltering}
+		toggled={expandedPanel === ExpandedPanel.Filter}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Filter ? null : ExpandedPanel.Filter;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'filter-bars',
+			size: Size.Medium,
+		}}
+		label="Advanced Filter"
+	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Column ? null : ExpandedPanel.Column;
+		}}
+		variant={Variant.Toolbar}
+		toggled={expandedPanel === ExpandedPanel.Column}
+		iconTop={{
+			name: 'columns',
+			size: Size.Medium,
+		}}
+		label="Modify Columns"
+	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		toggled={expandedPanel === ExpandedPanel.Toolbox}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'category',
+			size: Size.Medium,
+		}}
+		label="My Tool Box"
+	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		toggled={expandedPanel === ExpandedPanel.Configuration}
+		onclick={() => {
+			expandedPanel =
+				expandedPanel === ExpandedPanel.Configuration ? null : ExpandedPanel.Configuration;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'setting-cog',
+			size: Size.Medium,
+		}}
+		label="Table Configuration"
+	/>
+
+	{#if tableContext.paginationRepo?.reload}
+		<Button
+			side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+			onclick={() => {
+				tableContext.paginationRepo?.reload?.().catch(devCatch);
+			}}
+			disabled={!tableContext.allowQuickFiltering}
+			variant={Variant.Toolbar}
+			toggled={tableContext.dataRepo.isLoading}
+			iconTop={{
+				name: 'refresh',
+				size: Size.Medium,
+			}}
+			label="Refresh"
+		/>
+	{/if}
+
+	<div class="filler"></div>
+</div>
+
 <style>.sidebar {
   flex-flow: column nowrap;
   text-orientation: sideways;
@@ -215,4 +215,4 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}</style>
+}</style>

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

@@ -1,109 +1,109 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import SingleSelect from '../../SingleSelect.svelte';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
-
-	interface Props {
-		/**
-		 * Which view-state slice this dropdown switches between. `'layout'`
-		 * lists saved column layouts; `'filter'` lists saved filter sets.
-		 * Drives every `_viewState` read (label / active view / saved
-		 * views) and which kind `resetToDefault` is called with.
-		 */
-		kind: DatatableViewKind;
-	}
-
-	const { kind }: Props = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	// Sentinel value for the "Default" option. Must be NON-EMPTY: svelecte
-	// treats an empty-string value as "no selection" and shows the
-	// placeholder instead of the selected option. The leading space keeps
-	// it distinct from every server-assigned saved-view id (numeric
-	// strings) and from `UNSAVED_OPTION`.
-	const DEFAULT_OPTION = ' default';
-
-	// The view-state slice for `kind`, read live from the context.
-	const activeView = $derived(tableContext._viewState.activeView(kind));
-	const savedViews = $derived(tableContext._viewState.savedViews(kind));
-
-	// Dropdown label: 'Default' / 'Custom (unsaved)' / '<name>' / '<name>
-	// (unsaved)'. Used as the displayed value of the select so it reflects
-	// the dirty state exactly. When dirty this is a *transient* string
-	// ("Custom (unsaved)" / "<name> (unsaved)") that is deliberately NOT
-	// one of the selectable options below.
-	const dropdownLabel = $derived(tableContext._viewState.dropdownLabel(kind));
-
-	// The value of the currently-active option: the sentinel for Default,
-	// otherwise the saved view's id.
-	const activeValue = $derived(activeView.kind === 'saved' ? activeView.id : DEFAULT_OPTION);
-
-	// The selectable options. ALWAYS "Default" first (with its plain
-	// label, so the user can always pick it to revert) followed by every
-	// saved view of this kind with its plain name. The transient
-	// "…(unsaved)" label is never substituted in here - keeping it out
-	// means "Default" and the saved views stay selectable even while the
-	// table state is dirty. "Default" is present even when remote saved
-	// views are disabled and `savedViews` is empty.
-	const options: Array<SelectOption<string>> = $derived([
-		{ label: 'Default', value: DEFAULT_OPTION },
-		...savedViews.map((view) => ({ label: view.name, value: view.id })),
-	]);
-
-	// The value handed to `SingleSelect`. The `value` is always the active
-	// option's real value (the Default sentinel or a saved-view id), so it
-	// matches an entry in `options` and `SingleSelect` keeps the selection
-	// rendered. The `label` is `dropdownLabel`, which already encodes the
-	// dirty state ("…(unsaved)"); `SingleSelect` shows it verbatim via its
-	// `selection` snippet. An earlier approach fed a transient value that
-	// was absent from `options`, which made svelecte drop the selection
-	// and fall back to its placeholder.
-	const selectedOption: SelectOption<string> = $derived({
-		label: dropdownLabel,
-		value: activeValue,
-	});
-
-	/** Apply the option the user picked from the dropdown. */
-	function selectOption(option: SelectOption<string> | null): void {
-		if (!option) {
-			return;
-		}
-		if (option.value === DEFAULT_OPTION) {
-			tableContext.resetToDefault(kind);
-			return;
-		}
-		const view = savedViews.find((v) => v.id === option.value);
-		if (view) {
-			tableContext.applyDatatableView(view);
-		}
-	}
-</script>
-
-<div class="view-dropdown">
-	<SingleSelect
-		label={kind === 'filter' ? 'Filter' : 'Layout'}
-		name={kind === 'filter' ? 'Filter' : 'Layout'}
-		{options}
-		labelProp="label"
-		valueProp="value"
-		value={selectedOption}
-		valueAsObject
-		searchable={false}
-		onchange={selectOption}
-	/>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import SingleSelect from '../../SingleSelect.svelte';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
+
+	interface Props {
+		/**
+		 * Which view-state slice this dropdown switches between. `'layout'`
+		 * lists saved column layouts; `'filter'` lists saved filter sets.
+		 * Drives every `_viewState` read (label / active view / saved
+		 * views) and which kind `resetToDefault` is called with.
+		 */
+		kind: DatatableViewKind;
+	}
+
+	const { kind }: Props = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	// Sentinel value for the "Default" option. Must be NON-EMPTY: svelecte
+	// treats an empty-string value as "no selection" and shows the
+	// placeholder instead of the selected option. The leading space keeps
+	// it distinct from every server-assigned saved-view id (numeric
+	// strings) and from `UNSAVED_OPTION`.
+	const DEFAULT_OPTION = ' default';
+
+	// The view-state slice for `kind`, read live from the context.
+	const activeView = $derived(tableContext._viewState.activeView(kind));
+	const savedViews = $derived(tableContext._viewState.savedViews(kind));
+
+	// Dropdown label: 'Default' / 'Custom (unsaved)' / '<name>' / '<name>
+	// (unsaved)'. Used as the displayed value of the select so it reflects
+	// the dirty state exactly. When dirty this is a *transient* string
+	// ("Custom (unsaved)" / "<name> (unsaved)") that is deliberately NOT
+	// one of the selectable options below.
+	const dropdownLabel = $derived(tableContext._viewState.dropdownLabel(kind));
+
+	// The value of the currently-active option: the sentinel for Default,
+	// otherwise the saved view's id.
+	const activeValue = $derived(activeView.kind === 'saved' ? activeView.id : DEFAULT_OPTION);
+
+	// The selectable options. ALWAYS "Default" first (with its plain
+	// label, so the user can always pick it to revert) followed by every
+	// saved view of this kind with its plain name. The transient
+	// "…(unsaved)" label is never substituted in here - keeping it out
+	// means "Default" and the saved views stay selectable even while the
+	// table state is dirty. "Default" is present even when remote saved
+	// views are disabled and `savedViews` is empty.
+	const options: Array<SelectOption<string>> = $derived([
+		{ label: 'Default', value: DEFAULT_OPTION },
+		...savedViews.map((view) => ({ label: view.name, value: view.id })),
+	]);
+
+	// The value handed to `SingleSelect`. The `value` is always the active
+	// option's real value (the Default sentinel or a saved-view id), so it
+	// matches an entry in `options` and `SingleSelect` keeps the selection
+	// rendered. The `label` is `dropdownLabel`, which already encodes the
+	// dirty state ("…(unsaved)"); `SingleSelect` shows it verbatim via its
+	// `selection` snippet. An earlier approach fed a transient value that
+	// was absent from `options`, which made svelecte drop the selection
+	// and fall back to its placeholder.
+	const selectedOption: SelectOption<string> = $derived({
+		label: dropdownLabel,
+		value: activeValue,
+	});
+
+	/** Apply the option the user picked from the dropdown. */
+	function selectOption(option: SelectOption<string> | null): void {
+		if (!option) {
+			return;
+		}
+		if (option.value === DEFAULT_OPTION) {
+			tableContext.resetToDefault(kind);
+			return;
+		}
+		const view = savedViews.find((v) => v.id === option.value);
+		if (view) {
+			tableContext.applyDatatableView(view);
+		}
+	}
+</script>
+
+<div class="view-dropdown">
+	<SingleSelect
+		label={kind === 'filter' ? 'Filter' : 'Layout'}
+		name={kind === 'filter' ? 'Filter' : 'Layout'}
+		{options}
+		labelProp="label"
+		valueProp="value"
+		value={selectedOption}
+		valueAsObject
+		searchable={false}
+		onchange={selectOption}
+	/>
+</div>
+
 <style>.view-dropdown {
   display: flex;
   flex-flow: column nowrap;
   width: 100%;
-}</style>
+}</style>