@lavalogic/scoria 0.40.13 → 0.40.15

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

@@ -1,202 +1,187 @@
-<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;
+<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 { 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.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
+};
+let expandedPanel = $state(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) {
+	const target = e.target;
+	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;
 	}
-
-	function handleEscKey(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			expandedPanel = null;
-		}
+	// 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;
 	}
-</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>
-
+	expandedPanel = null;
+}
+function handleEscKey(e) {
+	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 +200,4 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}</style>
+}</style>

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

@@ -1,109 +1,89 @@
-<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;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>import SingleSelect from "../../SingleSelect.svelte";
+import { getContext } from "svelte";
+import { TableContext } from "../Types/Context/TableContext.svelte.js";
+const { kind } = $props();
+const tableContext = getContext(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 = $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 = $derived({
+	label: dropdownLabel,
+	value: activeValue
+});
+/** Apply the option the user picked from the dropdown. */
+function selectOption(option) {
+	if (!option) {
+		return;
 	}
-
-	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);
-		}
+	if (option.value === DEFAULT_OPTION) {
+		tableContext.resetToDefault(kind);
+		return;
 	}
-</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>
-
+	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>