@lavalogic/scoria 0.33.0 → 0.35.0

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

@@ -1,158 +1,158 @@
-<svelte:options runes />
-
-<script lang="ts" generics="T extends object">
-	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 ColumnPanelModal from './ColumnPanelModal.svelte';
-	import {
-		default as FilterPanelModal,
-		default as ToolboxPanelModal
-	} from './FilterPanelModal.svelte';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const panels = {
-		[ExpandedPanel.None]: null,
-		[ExpandedPanel.Column]: ColumnPanelModal,
-		[ExpandedPanel.Filter]: FilterPanelModal,
-		[ExpandedPanel.Toolbox]: ToolboxPanelModal
-	} as const;
-
-	let expandedPanel: ExpandedPanel | null = $state(null as ExpandedPanel | 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={{
-			// colour: Colour.$alt,
-			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={{
-			// colour: Colour.$alt,
-			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={{
-			// colour: Colour.$alt,
-			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={{
-			// colour: Colour.$alt,
-			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={{
-				// colour: Colour.$alt,
-				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={{
-				// colour: Colour.$alt,
-				name: 'refresh'
-			}}>Refresh</Button
-		>
-	{/if}
-
-	<div class="filler"></div>
-
-	<!-- <Button
-		size={Size.Small}
-		side={Side.Bottom}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'database-download'
-		}}>Export Records</Button
-	>
-	<Button
-		size={Size.Small}
-		side={Side.Bottom}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'setting-cog'
-		}}>Table Configuration</Button
-	> -->
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" generics="T extends object">
+	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 ColumnPanelModal from './ColumnPanelModal.svelte';
+	import {
+		default as FilterPanelModal,
+		default as ToolboxPanelModal
+	} from './FilterPanelModal.svelte';
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const panels = {
+		[ExpandedPanel.None]: null,
+		[ExpandedPanel.Column]: ColumnPanelModal,
+		[ExpandedPanel.Filter]: FilterPanelModal,
+		[ExpandedPanel.Toolbox]: ToolboxPanelModal
+	} as const;
+
+	let expandedPanel: ExpandedPanel | null = $state(null as ExpandedPanel | 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={{
+			// colour: Colour.$alt,
+			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={{
+			// colour: Colour.$alt,
+			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={{
+			// colour: Colour.$alt,
+			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={{
+			// colour: Colour.$alt,
+			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={{
+				// colour: Colour.$alt,
+				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={{
+				// colour: Colour.$alt,
+				name: 'refresh'
+			}}>Refresh</Button
+		>
+	{/if}
+
+	<div class="filler"></div>
+
+	<!-- <Button
+		size={Size.Small}
+		side={Side.Bottom}
+		toggled={expandedPanel === ExpandedPanel.Toolbox}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			// colour: Colour.$alt,
+			name: 'database-download'
+		}}>Export Records</Button
+	>
+	<Button
+		size={Size.Small}
+		side={Side.Bottom}
+		toggled={expandedPanel === ExpandedPanel.Toolbox}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			// colour: Colour.$alt,
+			name: 'setting-cog'
+		}}>Table Configuration</Button
+	> -->
+</div>
+
 <style>.sidebar {
   flex-flow: row nowrap;
   text-orientation: sideways;
@@ -171,4 +171,4 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}</style>
+}</style>

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

@@ -1,178 +1,178 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	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 ToolboxPanel from './ToolboxPanel.svelte';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const panels = {
-		[ExpandedPanel.None]: null,
-		[ExpandedPanel.Column]: ColumnPanel,
-		[ExpandedPanel.Filter]: FilterPanel,
-		[ExpandedPanel.Toolbox]: ToolboxPanel,
-	};
-
-	let expandedPanel = $state<ExpandedPanel | null>(null);
-
-	$effect(() => {
-		tableContext.limitFooter = !!expandedPanel;
-	});
-
-	let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null);
-
-	function handleClickOutside(e: MouseEvent) {
-		if (
-			(e.target as HTMLElement).isConnected &&
-			(e.target as HTMLElement).closest('.side-content') == null &&
-			(e.target as HTMLElement).closest('.sidebar') == null
-		) {
-			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">
-	<!-- TODO may have to disable the sidebar class when it is not toggled -->
-
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		onclick={() => {
-			tableContext.toggleQuickFiltering();
-		}}
-		toggled={tableContext.showQuickFiltering}
-		disabled={!tableContext.allowQuickFiltering}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			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={{
-			// colour: Colour.$alt,
-			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={{
-			// colour: Colour.$alt,
-			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={{
-			// colour: Colour.$alt,
-			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={{
-				// colour: Colour.$alt,
-				name: 'refresh',
-				size: Size.Medium,
-			}}
-			label="Refresh"
-		/>
-	{/if}
-
-	<div class="filler"></div>
-	<!-- <Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={(e) => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'database-download',
-			size: Size.Medium
-		}}
-		label="Export Records"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={(e) => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'setting-cog',
-			size: Size.Medium
-		}}
-		label="Table Configuration"
-	/> -->
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	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 ToolboxPanel from './ToolboxPanel.svelte';
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const panels = {
+		[ExpandedPanel.None]: null,
+		[ExpandedPanel.Column]: ColumnPanel,
+		[ExpandedPanel.Filter]: FilterPanel,
+		[ExpandedPanel.Toolbox]: ToolboxPanel,
+	};
+
+	let expandedPanel = $state<ExpandedPanel | null>(null);
+
+	$effect(() => {
+		tableContext.limitFooter = !!expandedPanel;
+	});
+
+	let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null);
+
+	function handleClickOutside(e: MouseEvent) {
+		if (
+			(e.target as HTMLElement).isConnected &&
+			(e.target as HTMLElement).closest('.side-content') == null &&
+			(e.target as HTMLElement).closest('.sidebar') == null
+		) {
+			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">
+	<!-- TODO may have to disable the sidebar class when it is not toggled -->
+
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		onclick={() => {
+			tableContext.toggleQuickFiltering();
+		}}
+		toggled={tableContext.showQuickFiltering}
+		disabled={!tableContext.allowQuickFiltering}
+		variant={Variant.Toolbar}
+		iconTop={{
+			// colour: Colour.$alt,
+			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={{
+			// colour: Colour.$alt,
+			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={{
+			// colour: Colour.$alt,
+			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={{
+			// colour: Colour.$alt,
+			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={{
+				// colour: Colour.$alt,
+				name: 'refresh',
+				size: Size.Medium,
+			}}
+			label="Refresh"
+		/>
+	{/if}
+
+	<div class="filler"></div>
+	<!-- <Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		toggled={expandedPanel === ExpandedPanel.Toolbox}
+		onclick={(e) => {
+			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			// colour: Colour.$alt,
+			name: 'database-download',
+			size: Size.Medium
+		}}
+		label="Export Records"
+	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		toggled={expandedPanel === ExpandedPanel.Toolbox}
+		onclick={(e) => {
+			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			// colour: Colour.$alt,
+			name: 'setting-cog',
+			size: Size.Medium
+		}}
+		label="Table Configuration"
+	/> -->
+</div>
+
 <style>.sidebar {
   flex-flow: column nowrap;
   text-orientation: sideways;
@@ -191,4 +191,4 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}</style>
+}</style>