@lavalogic/scoria 0.39.2 → 0.40.0

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

@@ -1,192 +1,192 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Action from '../../Action.svelte';
-	import TextInput from '../../TextInput.svelte';
-	import { Colour, ColourSet } from '../../../scss/colours.js';
-	import { Size } from '../../../Types/Internal/Size.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';
-	import TableViewDropdown from './TableViewDropdown.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('');
-
-	/** 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);
-		}
-	}
-
-	/**
-	 * 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>
-
-<section class="side-panel-section">
-	<header class="side-panel-header">
-		<h2>Advanced Filter</h2>
-	</header>
-
-	<div class="toolbar">
-		<!-- Quick-switch dropdown for saved filter sets. Sits above the
-		     search box; saving a filter is done from the Table
-		     Configuration modal's "Save a new Filter" tab. -->
-		<TableViewDropdown kind="filter" />
-		<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>
-
-	<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>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Action from '../../Action.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import { Colour, ColourSet } from '../../../scss/colours.js';
+	import { Size } from '../../../Types/Internal/Size.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';
+	import TableViewDropdown from './TableViewDropdown.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('');
+
+	/** 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);
+		}
+	}
+
+	/**
+	 * 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>
+
+<section class="side-panel-section">
+	<header class="side-panel-header">
+		<h2>Advanced Filter</h2>
+	</header>
+
+	<div class="toolbar">
+		<!-- Quick-switch dropdown for saved filter sets. Sits above the
+		     search box; saving a filter is done from the Table
+		     Configuration modal's "Save a new Filter" tab. -->
+		<TableViewDropdown kind="filter" />
+		<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>
+
+	<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;
@@ -325,4 +325,4 @@ p.empty {
   display: flex;
   flex-flow: column nowrap;
   gap: 0.5rem;
-}</style>
+}</style>

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

@@ -1,33 +1,33 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import DesktopModal from '../../DesktopModal.svelte';
-	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
-	import FilterPanel from './FilterPanel.svelte';
-
-	export interface FilterPanelModalProps {
-		onclose?: () => void;
-	}
-</script>
-
-<script lang="ts">
-	const { onclose }: FilterPanelModalProps = $props();
-</script>
-
-<DesktopModal
-	width={cssLength('800px')}
-	headerLabel="Filter by"
-	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
->
-	<div class="flex">
-		<FilterPanel />
-	</div>
-</DesktopModal>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import DesktopModal from '../../DesktopModal.svelte';
+	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
+	import FilterPanel from './FilterPanel.svelte';
+
+	export interface FilterPanelModalProps {
+		onclose?: () => void;
+	}
+</script>
+
+<script lang="ts">
+	const { onclose }: FilterPanelModalProps = $props();
+</script>
+
+<DesktopModal
+	width={cssLength('800px')}
+	headerLabel="Filter by"
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<FilterPanel />
+	</div>
+</DesktopModal>
+
 <style>.flex {
   display: flex;
   flex-flow: column nowrap;
@@ -35,4 +35,4 @@
   width: 100%;
   flex: 1;
   overflow: hidden;
-}</style>
+}</style>