@lavalogic/scoria 0.37.44 → 0.37.46

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

@@ -1,127 +1,127 @@
-<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 ColumnPanelModal from './ColumnPanelModal.svelte';
-	import FilterPanelModal from './FilterPanelModal.svelte';
-	import ToolboxPanelModal from './ToolboxPanelModal.svelte';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const panels = {
-		[ExpandedPanel.None]: null,
-		[ExpandedPanel.Column]: ColumnPanelModal,
-		[ExpandedPanel.Filter]: FilterPanelModal,
-		[ExpandedPanel.Toolbox]: ToolboxPanelModal,
-	} as const;
-
-	let expandedPanel = $state<ExpandedPanel | null>(null);
-
-	let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null);
-</script>
-
-{#if ExpandedPanelElement != null}
-	<ExpandedPanelElement
-		onclose={() => {
-			expandedPanel = null;
-		}}
-	/>
-{/if}
-<div class="sidebar">
-	<Button
-		side={Side.Bottom}
-		onclick={() => {
-			tableContext.toggleQuickFiltering();
-		}}
-		toggled={tableContext.showQuickFiltering}
-		size={Size.Small}
-		disabled={!tableContext.allowQuickFiltering}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'assessment',
-		}}>Quick Filter</Button
-	>
-	<Button
-		side={Side.Bottom}
-		disabled={!tableContext.allowAdvancedFiltering}
-		toggled={expandedPanel === ExpandedPanel.Filter}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Filter ? null : ExpandedPanel.Filter;
-		}}
-		size={Size.Small}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'filter-bars',
-		}}>Advanced Filter</Button
-	>
-	<Button
-		side={Side.Bottom}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Column ? null : ExpandedPanel.Column;
-		}}
-		size={Size.Small}
-		variant={Variant.Toolbar}
-		toggled={expandedPanel === ExpandedPanel.Column}
-		iconTop={{
-			name: 'columns',
-		}}>Modify Columns</Button
-	>
-	<Button
-		size={Size.Small}
-		side={Side.Bottom}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'category',
-		}}>My Tool Box</Button
-	>
-	{#if tableContext.dataRepo.addEmptyRow}
-		<Button
-			size={Size.Small}
-			side={Side.Bottom}
-			onclick={() => {
-				tableContext.dataRepo.addEmptyRow?.();
-			}}
-			variant={Variant.Toolbar}
-			iconTop={{
-				name: 'plus',
-			}}>Add a Row</Button
-		>
-	{/if}
-
-	{#if tableContext.paginationRepo?.reload}
-		<Button
-			side={Side.Bottom}
-			onclick={() => {
-				tableContext.paginationRepo?.reload?.().catch(devCatch);
-			}}
-			toggled={tableContext.dataRepo.isLoading}
-			size={Size.Small}
-			disabled={!tableContext.allowQuickFiltering}
-			variant={Variant.Toolbar}
-			iconTop={{
-				name: 'refresh',
-			}}>Refresh</Button
-		>
-	{/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 ColumnPanelModal from './ColumnPanelModal.svelte';
+	import FilterPanelModal from './FilterPanelModal.svelte';
+	import ToolboxPanelModal from './ToolboxPanelModal.svelte';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const panels = {
+		[ExpandedPanel.None]: null,
+		[ExpandedPanel.Column]: ColumnPanelModal,
+		[ExpandedPanel.Filter]: FilterPanelModal,
+		[ExpandedPanel.Toolbox]: ToolboxPanelModal,
+	} as const;
+
+	let expandedPanel = $state<ExpandedPanel | null>(null);
+
+	let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null);
+</script>
+
+{#if ExpandedPanelElement != null}
+	<ExpandedPanelElement
+		onclose={() => {
+			expandedPanel = null;
+		}}
+	/>
+{/if}
+<div class="sidebar">
+	<Button
+		side={Side.Bottom}
+		onclick={() => {
+			tableContext.toggleQuickFiltering();
+		}}
+		toggled={tableContext.showQuickFiltering}
+		size={Size.Small}
+		disabled={!tableContext.allowQuickFiltering}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'assessment',
+		}}>Quick Filter</Button
+	>
+	<Button
+		side={Side.Bottom}
+		disabled={!tableContext.allowAdvancedFiltering}
+		toggled={expandedPanel === ExpandedPanel.Filter}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Filter ? null : ExpandedPanel.Filter;
+		}}
+		size={Size.Small}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'filter-bars',
+		}}>Advanced Filter</Button
+	>
+	<Button
+		side={Side.Bottom}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Column ? null : ExpandedPanel.Column;
+		}}
+		size={Size.Small}
+		variant={Variant.Toolbar}
+		toggled={expandedPanel === ExpandedPanel.Column}
+		iconTop={{
+			name: 'columns',
+		}}>Modify Columns</Button
+	>
+	<Button
+		size={Size.Small}
+		side={Side.Bottom}
+		toggled={expandedPanel === ExpandedPanel.Toolbox}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'category',
+		}}>My Tool Box</Button
+	>
+	{#if tableContext.dataRepo.addEmptyRow}
+		<Button
+			size={Size.Small}
+			side={Side.Bottom}
+			onclick={() => {
+				tableContext.dataRepo.addEmptyRow?.();
+			}}
+			variant={Variant.Toolbar}
+			iconTop={{
+				name: 'plus',
+			}}>Add a Row</Button
+		>
+	{/if}
+
+	{#if tableContext.paginationRepo?.reload}
+		<Button
+			side={Side.Bottom}
+			onclick={() => {
+				tableContext.paginationRepo?.reload?.().catch(devCatch);
+			}}
+			toggled={tableContext.dataRepo.isLoading}
+			size={Size.Small}
+			disabled={!tableContext.allowQuickFiltering}
+			variant={Variant.Toolbar}
+			iconTop={{
+				name: 'refresh',
+			}}>Refresh</Button
+		>
+	{/if}
+
+	<div class="filler"></div>
+</div>
+
 <style>.sidebar {
   flex-flow: row nowrap;
   text-orientation: sideways;
@@ -140,4 +140,4 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}</style>
+}</style>

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

@@ -1,159 +1,159 @@
-<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 ToolboxPanel from './ToolboxPanel.svelte';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const panels = {
-		[ExpandedPanel.Column]: ColumnPanel,
-		[ExpandedPanel.Filter]: FilterPanel,
-		[ExpandedPanel.Toolbox]: ToolboxPanel,
-	} as const;
-
-	let expandedPanel = $state<ExpandedPanel | null>(null);
-
-	$effect(() => {
-		tableContext.limitFooter = !!expandedPanel;
-	});
-
-	let ExpandedPanelElement = $derived(
-		expandedPanel && expandedPanel !== ExpandedPanel.None ? 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;
-		}
-		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}
-<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"
-	/>
-
-	{#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 ToolboxPanel from './ToolboxPanel.svelte';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const panels = {
+		[ExpandedPanel.Column]: ColumnPanel,
+		[ExpandedPanel.Filter]: FilterPanel,
+		[ExpandedPanel.Toolbox]: ToolboxPanel,
+	} as const;
+
+	let expandedPanel = $state<ExpandedPanel | null>(null);
+
+	$effect(() => {
+		tableContext.limitFooter = !!expandedPanel;
+	});
+
+	let ExpandedPanelElement = $derived(
+		expandedPanel && expandedPanel !== ExpandedPanel.None ? 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;
+		}
+		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}
+<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"
+	/>
+
+	{#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;
@@ -172,4 +172,4 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}</style>
+}</style>