@lavalogic/scoria 0.35.0 → 0.37.0

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

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

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

@@ -1,58 +1,416 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import Button from '../../Button.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';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	function reset() {
-		tableContext.paginationRepo?.resetFilters();
-	}
-
-	const defs = $derived(tableContext.columnDefs as Array<ColumnDef<T, unknown>>);
-</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
-		>
-	</div>
-</div>
-
-<style>div.column-panel {
-  padding: 0.5rem;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	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, IdType>>(TableContext.identifier);
+
+	/** 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();
+	}
+
+	/**
+	 * 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>
+
+<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 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;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+.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;
-  overflow: auto;
+  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;
 }
 
-h3 {
+.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;
-}</style>
+  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

@@ -1,84 +1,37 @@
-<svelte:options runes />
-
-<script
-	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';
-
-	export interface FilterPanelModalProps {
-		onclose?: () => void;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	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
-	width="800px"
-	header="Filter by"
-	onclose={() => onclose?.()}
-	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>
-	</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;
-}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import TouchModal from '../../Touch/TouchModal.svelte';
+	import FilterPanel from './FilterPanel.svelte';
+
+	export interface FilterPanelModalProps {
+		onclose?: () => void;
+	}
+</script>
+
+<script lang="ts">
+	const { onclose }: FilterPanelModalProps = $props();
+</script>
+
+<TouchModal
+	width="800px"
+	header="Filter by"
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<FilterPanel />
+	</div>
+</TouchModal>
 
-.flex {
+<style>.flex {
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
   width: 100%;
   flex: 1;
   overflow: hidden;
-}</style>
+}</style>