@lavalogic/scoria 0.36.0 → 0.37.0

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

@@ -2,57 +2,415 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, IdType extends Primitive"
 >
+	import Action from '../../Action.svelte';
 	import Button from '../../Button.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import { Colour, ColourSet } from '../../../scss/colours.js';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { SvelteSet } from 'svelte/reactivity';
 	import { getContext } from 'svelte';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import FilterInput from './FilterInput.svelte';
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
-	function reset() {
+	/** Fallback group label used for any filterable column whose
+	 *  `filterGroup` is undefined. Picked up by the same grouping +
+	 *  collapse machinery as user-declared groups. */
+	const FALLBACK_GROUP = 'Other';
+
+	const defs = $derived(tableContext.columnDefs as Array<ColumnDef<T, unknown>>);
+	const filterableDefs = $derived(defs.filter((d) => d.allowFiltering));
+
+	/** User-typed substring filter for the column-header text. Empty
+	 *  string is the "no filter" state. */
+	let quickFindValue: string = $state('');
+
+	/** Whether the Save Filter overflow menu is open. The chevron
+	 *  toggles it; clicking anywhere else (via the window-level
+	 *  listener below) closes it. */
+	let saveMenuOpen: boolean = $state(false);
+
+	/** Names of currently-collapsed groups. A name absent from this
+	 *  set is rendered expanded. Reactive via `SvelteSet` so the panel
+	 *  re-renders on toggle without manually re-assigning. */
+	const collapsedGroups = new SvelteSet<string>();
+
+	/** Filters the column-def list against `quickFindValue`. The match
+	 *  is case-insensitive against the header text (for string
+	 *  headers) and the column id as a fallback for Snippet headers. */
+	const matchingDefs: Array<ColumnDef<T, unknown>> = $derived.by(() => {
+		const q = quickFindValue.trim().toLowerCase();
+		if (q.length === 0) {
+			return filterableDefs;
+		}
+		return filterableDefs.filter((d) => {
+			if (typeof d.header === 'string' && d.header.toLowerCase().includes(q)) {
+				return true;
+			}
+			return d.id.toLowerCase().includes(q);
+		});
+	});
+
+	/** Ordered list of group names. The first column-def each group
+	 *  is seen on determines its position so groups appear in the
+	 *  source-declaration order. The fallback "Other" group is
+	 *  appended last so explicitly-named groups always lead. */
+	const orderedGroupNames: Array<string> = $derived.by(() => {
+		const seen = new Set<string>();
+		const out: Array<string> = [];
+		let sawFallback = false;
+		for (const def of matchingDefs) {
+			const name = def.filterGroup ?? FALLBACK_GROUP;
+			if (name === FALLBACK_GROUP) {
+				sawFallback = true;
+				continue;
+			}
+			if (!seen.has(name)) {
+				seen.add(name);
+				out.push(name);
+			}
+		}
+		if (sawFallback) {
+			out.push(FALLBACK_GROUP);
+		}
+		return out;
+	});
+
+	/** Group name -> column-defs in that group, preserving declaration
+	 *  order within the group. */
+	const groupedDefs: Map<string, Array<ColumnDef<T, unknown>>> = $derived.by(() => {
+		const map = new Map<string, Array<ColumnDef<T, unknown>>>();
+		for (const def of matchingDefs) {
+			const name = def.filterGroup ?? FALLBACK_GROUP;
+			let bucket = map.get(name);
+			if (!bucket) {
+				bucket = [];
+				map.set(name, bucket);
+			}
+			bucket.push(def);
+		}
+		return map;
+	});
+
+	function toggleGroup(name: string): void {
+		if (collapsedGroups.has(name)) {
+			collapsedGroups.delete(name);
+		} else {
+			collapsedGroups.add(name);
+		}
+	}
+
+	function resetFilters(): void {
 		tableContext.paginationRepo?.resetFilters();
 	}
 
-	const defs = $derived(tableContext.columnDefs as Array<ColumnDef<T, unknown>>);
+	/**
+	 * Placeholder for the future Save-Filter / preset workflow. For
+	 * now this just closes the overflow menu; consumers wire the real
+	 * persistence layer in a follow-up workorder. The chevron menu is
+	 * still useful today as a home for the Reset action and as the
+	 * insertion point for "Load Filter" / "Manage Filters" entries
+	 * once those land.
+	 */
+	function saveFilter(): void {
+		saveMenuOpen = false;
+		if (typeof window !== 'undefined') {
+			window.dispatchEvent(
+				new CustomEvent('scoria:save-filter', {
+					detail: { tableName: tableContext.tableName },
+				})
+			);
+		}
+	}
+
+	function handleWindowClick(e: MouseEvent): void {
+		if (!saveMenuOpen) {
+			return;
+		}
+		const target = e.target as HTMLElement | null;
+		if (target?.closest('.save-filter-cluster') == null) {
+			saveMenuOpen = false;
+		}
+	}
+
+	/**
+	 * No-op keydown handler used to override `TextInput`'s default
+	 * `passthrough` keydown (defined in `Helpers.svelte.ts`), which
+	 * blurs the focused input on every alphanumeric keypress so that
+	 * barcode-scanner buffers can flow into `UntypedInputContext`
+	 * instead. For a plain quick-find search field we want every key
+	 * to land in the input rather than the input blurring after the
+	 * first character. Returns immediately and lets the keystroke
+	 * continue to bubble so the side-panel's window-level Escape
+	 * handler still closes the panel.
+	 */
+	function noopKeydown(_e: KeyboardEvent): void {
+		// intentionally empty
+	}
 </script>
 
-<div class="column-panel">
-	<h3>Filter by</h3>
-
-	{#each defs as def (def.id)}
-		<FilterInput
-			{def}
-			customFilters={tableContext.remoteFilters}
-		/>
-	{/each}
-
-	<div class="reset-button">
-		<Button
-			onclick={() => {
-				reset();
-			}}
-			variant={Variant.Secondary}
-			nowrap
-			size={Size.MediumSmall}>Reset</Button
-		>
+<svelte:window onclick={handleWindowClick} />
+
+<section class="side-panel-section">
+	<header class="side-panel-header">
+		<h2>Advanced Filter</h2>
+	</header>
+
+	<div class="toolbar">
+		<div class="quick-find">
+			<TextInput
+				labelTop="Quick Find a Filter"
+				placeholder="Filter…"
+				bind:value={quickFindValue}
+				rightIcon={{ name: 'search', size: Size.Medium }}
+				onkeydown={noopKeydown}
+			/>
+		</div>
+
+		<div class="save-filter-cluster">
+			<Button
+				variant={Variant.Secondary}
+				nowrap
+				disabled
+				size={Size.MediumSmall}
+				onclick={saveFilter}>Save Filter</Button
+			>
+			<Action
+				label="More save options"
+				colourSet={ColourSet.Auxiliary}
+				icon={{ name: 'chevron-down', size: Size.Medium }}
+				onclick={() => {
+					saveMenuOpen = !saveMenuOpen;
+				}}
+			/>
+			{#if saveMenuOpen}
+				<div class="save-menu">
+					<button
+						type="button"
+						class="save-menu-item"
+						onclick={() => {
+							saveMenuOpen = false;
+							resetFilters();
+						}}>Reset all filters</button
+					>
+				</div>
+			{/if}
+		</div>
 	</div>
-</div>
 
-<style>div.column-panel {
-  padding: 0.5rem;
+	<div class="side-panel-body">
+		{#if filterableDefs.length === 0}
+			<p class="empty">No filterable columns.</p>
+		{:else if matchingDefs.length === 0}
+			<p class="empty">
+				No filters match &ldquo;{quickFindValue}&rdquo;.
+			</p>
+		{:else}
+			<div class="groups">
+				{#each orderedGroupNames as groupName (groupName)}
+					{@const defsInGroup = groupedDefs.get(groupName) ?? []}
+					{@const isCollapsed = collapsedGroups.has(groupName)}
+					{#if defsInGroup.length > 0}
+						<section
+							class="group"
+							class:collapsed={isCollapsed}
+						>
+							<header class="group-header">
+								<h3>{groupName}</h3>
+								<Action
+									label={isCollapsed ? `Expand ${groupName}` : `Collapse ${groupName}`}
+									colourSet={ColourSet.Auxiliary}
+									icon={{
+										name: isCollapsed ? 'circle-plus' : 'circle-minus',
+										size: Size.Medium,
+										colour: Colour['$ui-blue-9'],
+									}}
+									onclick={() => {
+										toggleGroup(groupName);
+									}}
+								/>
+							</header>
+							{#if !isCollapsed}
+								<div class="group-body">
+									{#each defsInGroup as def (def.id)}
+										<FilterInput
+											{def}
+											customFilters={tableContext.remoteFilters}
+										/>
+									{/each}
+								</div>
+							{/if}
+						</section>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</div>
+</section>
+
+<style>.side-panel-section {
   display: flex;
   flex-flow: column nowrap;
-  gap: 0.5rem;
   height: 100%;
+  width: 100%;
   background-color: #ffffff;
-  overflow: auto;
+  box-sizing: border-box;
+  min-height: 0;
 }
 
-h3 {
+.side-panel-header {
+  flex-shrink: 0;
+  padding: 1.25rem 1.25rem 0.875rem;
+  border-bottom: solid 1px #cbd4da;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.side-panel-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
   font-weight: 600;
+  color: #3a4952;
+  line-height: 1.25;
+}
+
+.side-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.side-panel-footer {
+  flex-shrink: 0;
+  padding: 0.875rem 1.25rem;
+  border-top: solid 1px #cbd4da;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.75rem;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.toolbar {
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  background-color: #ffffff;
+  border-bottom: solid 1px #cbd4da;
+}
+.toolbar .quick-find {
+  flex: 1;
+  min-width: 0;
+  --input-height: 3rem;
+}
+.toolbar .save-filter-cluster {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+.toolbar .save-filter-cluster .save-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.25rem;
+  background-color: #ffffff;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  min-width: 12rem;
+  z-index: 5;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 0.25rem 0;
+}
+.toolbar .save-filter-cluster .save-menu-item {
+  background: transparent;
+  border: none;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font: inherit;
+  color: #3a4952;
+}
+.toolbar .save-filter-cluster .save-menu-item:hover {
+  background-color: #f4f7f9;
+}
+.toolbar .save-filter-cluster .save-menu-item:focus-visible {
+  outline: 2px solid #259fc7;
+  outline-offset: -2px;
+}
+
+p.empty {
+  color: #647d8e;
+  font-style: italic;
+  margin: 0;
+}
+
+.groups {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+}
+
+.group {
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #ffffff;
+  overflow: visible;
+}
+
+.group-header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  background-color: #f4f7f9;
+  border-bottom: solid 1px #cbd4da;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.group-header h3 {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.1875rem;
+  color: #3a4952;
+}
+
+.group.collapsed > .group-header {
+  border-bottom: none;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.group:not(.collapsed) > .group-body {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.group-body {
+  padding: 1rem 0.75rem 0.25rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
 }</style>

package/dist/Components/Table/Misc/FilterPanel.svelte.d.ts

@@ -1,24 +1,25 @@
-declare function $$render<T extends object>(): {
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: Record<string, never>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const FilterPanel: $$IsomorphicComponent;
-type FilterPanel<T extends object> = InstanceType<typeof FilterPanel<T>>;
+type FilterPanel<T extends object, IdType extends Primitive> = InstanceType<typeof FilterPanel<T, IdType>>;
 export default FilterPanel;

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

@@ -4,34 +4,16 @@
 	lang="ts"
 	module
 >
-	import Button from '../../Button.svelte';
 	import TouchModal from '../../Touch/TouchModal.svelte';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
-	import { getContext } from 'svelte';
-	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import FilterInput from './FilterInput.svelte';
+	import FilterPanel from './FilterPanel.svelte';
 
 	export interface FilterPanelModalProps {
 		onclose?: () => void;
 	}
 </script>
 
-<script
-	lang="ts"
-	generics="T extends object"
->
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
+<script lang="ts">
 	const { onclose }: FilterPanelModalProps = $props();
-	// const refs: Array<FilterInput<T, never, unknown>> = $state([]);
-
-	function reset() {
-		tableContext.paginationRepo?.resetFilters();
-	}
-
-	const defs = $derived(tableContext.columnDefs as Array<ColumnDef<T, unknown>>);
 </script>
 
 <TouchModal
@@ -41,40 +23,11 @@
 	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
 >
 	<div class="flex">
-		<div class="column-panel">
-			{#each defs as def (def.id)}
-				<!-- bind:this={refs[index]} -->
-				<FilterInput
-					{def}
-					customFilters={tableContext.remoteFilters}
-				/>
-			{/each}
-
-			<div class="reset-button">
-				<Button
-					onclick={() => {
-						reset();
-					}}
-					variant={Variant.Secondary}
-					nowrap
-					size={Size.MediumSmall}>Reset</Button
-				>
-			</div>
-		</div>
+		<FilterPanel />
 	</div>
 </TouchModal>
 
-<style>div.column-panel {
-  padding: 0.5rem;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 0.5rem;
-  height: 100%;
-  background-color: #ffffff;
-  overflow: auto;
-}
-
-.flex {
+<style>.flex {
   display: flex;
   flex-flow: column nowrap;
   height: 100%;

package/dist/Components/Table/Misc/FilterPanelModal.svelte.d.ts

@@ -1,27 +1,6 @@
 export interface FilterPanelModalProps {
     onclose?: () => void;
 }
-declare function $$render<T extends object>(): {
-    props: FilterPanelModalProps;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const FilterPanelModal: $$IsomorphicComponent;
-type FilterPanelModal<T extends object> = InstanceType<typeof FilterPanelModal<T>>;
+declare const FilterPanelModal: import("svelte").Component<FilterPanelModalProps, {}, "">;
+type FilterPanelModal = ReturnType<typeof FilterPanelModal>;
 export default FilterPanelModal;

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

@@ -1,19 +1,21 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import { quintOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
-	import type { Snippet } from 'svelte';
+	import { Delay } from '../../../Delay/Delay.js';
+	import { usePrefersReducedMotion } from '../../../Helpers/prefersReducedMotion.svelte.js';
 	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
-	export interface SidePanelProps {
-		toolbarPosition: ToolbarPosition;
-		onkeydown?: (e: KeyboardEvent) => void;
-		children?: Snippet;
-	}
+	import type { SidePanelProps } from './SidePanelProps.js';
 </script>
 
 <script lang="ts">
-	const { toolbarPosition, onkeydown, children }: SidePanelProps = $props();
+	const { toolbarPosition, onkeydown, ariaLabel, children }: SidePanelProps = $props();
+	const reducedMotion = usePrefersReducedMotion();
+	const slideDuration = $derived(reducedMotion.matches ? 0 : Delay.Default);
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -21,8 +23,9 @@
 	class="side-panel"
 	class:left={toolbarPosition === ToolbarPosition.Left}
 	class:right={toolbarPosition === ToolbarPosition.Right}
+	aria-label={ariaLabel}
 	{onkeydown}
-	transition:slide={{ duration: 300, easing: quintOut, axis: 'x' }}
+	transition:slide={{ duration: slideDuration, easing: quintOut, axis: 'x' }}
 >
 	<div class="side-content">
 		{#if children}{@render children()}{/if}

package/dist/Components/Table/Misc/SidePanel.svelte.d.ts

@@ -1,10 +1,4 @@
-import type { Snippet } from 'svelte';
-import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
-export interface SidePanelProps {
-    toolbarPosition: ToolbarPosition;
-    onkeydown?: (e: KeyboardEvent) => void;
-    children?: Snippet;
-}
+import type { SidePanelProps } from './SidePanelProps.js';
 declare const SidePanel: import("svelte").Component<SidePanelProps, {}, "">;
 type SidePanel = ReturnType<typeof SidePanel>;
 export default SidePanel;

package/dist/Components/Table/Misc/SidePanelProps.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
+/**
+ * Props for `SidePanel`, the slide-in container for a Table side panel
+ * (Filter, Column, Toolbox). The panel anchors left or right depending on
+ * the current `toolbarPosition`.
+ */
+export interface SidePanelProps {
+    /** Which side the toolbar is anchored to. Selects the slide-in side. */
+    toolbarPosition: ToolbarPosition;
+    /** Forwarded `keydown` handler on the panel element. */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Accessible name announced when the panel becomes visible. */
+    ariaLabel?: string;
+    /** Panel contents. */
+    children?: Snippet;
+}

package/dist/Components/Table/Misc/SidePanelProps.js

@@ -0,0 +1 @@
+export {};