@lavalogic/scoria 0.37.42 → 0.37.43

package/dist/Components/HorizontalTabGroup.svelte

@@ -15,6 +15,7 @@
 		selected,
 		noRadius = false,
 		grow = false,
+		dense = false,
 		filterable = false,
 		filterFn,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
@@ -42,6 +43,7 @@
 	class="wrapper"
 	class:no-radius={noRadius}
 	class:grow
+	class:dense
 >
 	<div class="tabs">
 		<div class="sticky">
@@ -104,6 +106,9 @@
 .wrapper.grow {
   flex-grow: 1;
 }
+.wrapper.dense {
+  align-items: flex-start;
+}
 .wrapper:not(.grow) .tabs {
   padding-top: 1px;
 }

package/dist/Components/HorizontalTabGroupProps.d.ts

@@ -15,6 +15,18 @@ interface HorizontalTabGroupPropsBase<CommonDenominator> {
     noRadius?: boolean;
     /** Stretch to fill the parent's flex axis. */
     grow?: boolean;
+    /**
+     * Anchor the tab strip to the top of the group rather than letting
+     * it stretch to the height of the active tab's content. In the
+     * default `align-items: stretch` row layout, the tabs strip and the
+     * content pane stretch each other to the tallest natural height -
+     * which is fine for full-page tables, but leaves a tall column of
+     * empty `.ui-blue-2` background next to a short tab body inside a
+     * dialog. With `dense`, the wrapper switches to `align-items:
+     * flex-start` so both children sit at their natural heights and
+     * the group collapses onto whichever is taller.
+     */
+    dense?: boolean;
     /** The tabs to render. Keyed by `option.label`. */
     tabs: ReadonlyArray<TabOption<CommonDenominator>>;
     /** Currently selected tab, matched by reference. */

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

@@ -257,6 +257,43 @@
 	let showFromDateModal = $state(false);
 	let showToDateModal = $state(false);
 
+	/**
+	 * Debounce window for typed filter inputs (Text / Number / Between
+	 * min+max). Discrete selections (Svelecte selects, date pickers,
+	 * filter-mode dropdowns) bypass this and fire `filterBy` immediately.
+	 * Combined with the 400 ms debounce in `createRemoteRowSource`, the
+	 * server-side lookup lands roughly one second after the last keystroke,
+	 * which matches the "wait a couple of seconds" expectation users have
+	 * when typing into a free-text filter.
+	 */
+	const FILTER_INPUT_DEBOUNCE_MS = 500;
+
+	let typingDebounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+	/** Fire the table's `filterBy` after the user stops typing for
+	 *  `FILTER_INPUT_DEBOUNCE_MS`. Repeated calls coalesce; the most
+	 *  recent value wins. */
+	function debouncedFilterBy(id: string, newValue: unknown): void {
+		if (typingDebounceTimer !== undefined) {
+			clearTimeout(typingDebounceTimer);
+		}
+		typingDebounceTimer = setTimeout(() => {
+			typingDebounceTimer = undefined;
+			tableContext.paginationRepo?.filterBy(id, newValue);
+		}, FILTER_INPUT_DEBOUNCE_MS);
+	}
+
+	// Clear any pending debounce when the row unmounts so we do not
+	// fire `filterBy` against a torn-down `paginationRepo`.
+	$effect(() => {
+		return () => {
+			if (typingDebounceTimer !== undefined) {
+				clearTimeout(typingDebounceTimer);
+				typingDebounceTimer = undefined;
+			}
+		};
+	});
+
 	function generateOnChangeObject(label: string) {
 		return (newValue: SelectOption<unknown> | null) => {
 			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
@@ -406,6 +443,24 @@
 							/>
 						{/if}
 					{:else}
+						{@const selectedPrimitives = selectedOptions
+							.map((it) => it.value)
+							.filter(
+								(v): v is string | number => typeof v === 'string' || typeof v === 'number'
+							)}
+						<!--
+							MultiSelect with `valueAsObject={false}` matches
+							options against the primitive value, not the whole
+							SelectOption shape. Previously the remote-select
+							branch passed the SelectOption objects directly
+							(the `selectedOptions` $state), meaning the inner
+							`selectedKeys` derived saw
+							`[{label, value}, ...]` rows where it expected
+							`[id1, id2, ...]`, so no chips ever rendered even
+							though the filter was active server-side. Pull the
+							primitive `value` off each option to match the
+							local-select branch above.
+						-->
 						<MultiSelect
 							label={displayLabel}
 							labelProp="label"
@@ -418,7 +473,7 @@
 								// primitives directly.
 								tableContext.paginationRepo?.filterBy(def.id, e);
 							}}
-							selectedValues={selectedOptions}
+							selectedValues={selectedPrimitives}
 							collapseSelection
 						/>
 					{/if}
@@ -501,7 +556,7 @@
 						id={inputId}
 						bind:value={valueMin}
 						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
@@ -512,7 +567,7 @@
 						id={inputId}
 						bind:value={valueMax}
 						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
@@ -523,7 +578,7 @@
 						id={inputId}
 						bind:value
 						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [value]);
+							debouncedFilterBy(def.id, [value]);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
@@ -561,7 +616,7 @@
 						id={inputId}
 						bind:value
 						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
+							debouncedFilterBy(def.id, value);
 						}}
 						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();

package/dist/Components/VerticalTabGroup.svelte

@@ -16,6 +16,7 @@
 		noscroll,
 		noTabMessage,
 		nohistory = false,
+		dense = false,
 	}: VerticalTabGroupProps<CommonDenominator> = $props();
 
 	const isNonEmptyString = (raw: unknown): raw is string =>
@@ -48,6 +49,7 @@
 <div
 	class="wrapper"
 	class:noscroll
+	class:dense
 	{style}
 >
 	<div class="tabs">
@@ -62,6 +64,7 @@
 	<div
 		class="content"
 		class:noscroll
+		class:dense
 	>
 		{#if selected}
 			{@render selected.content(selected.args)}
@@ -88,6 +91,10 @@
 .wrapper.noscroll {
   overflow: visible;
 }
+.wrapper.dense {
+  flex: 0 0 auto;
+  overflow: visible;
+}
 .wrapper .tabs {
   border-radius: 0 4px 0 0;
   display: flex;
@@ -113,4 +120,8 @@
 }
 .wrapper .content.noscroll {
   overflow: visible;
+}
+.wrapper .content.dense {
+  flex-grow: 0;
+  overflow: visible;
 }</style>

package/dist/Components/VerticalTabGroupProps.d.ts

@@ -20,4 +20,16 @@ export interface VerticalTabGroupProps<CommonDenominator> {
     noTabMessage?: string;
     /** Suppress on-mount history restore even when `name` is set. */
     nohistory?: boolean;
+    /**
+     * Size the group to the height of the selected tab's content rather
+     * than filling whatever vertical space the parent offers. Use this
+     * inside dialogs / forms where the tab body is a short, content-
+     * driven panel and the default `flex-grow: 1` would leave a
+     * stretch of empty background below the rendered content.
+     *
+     * Concretely this disables the `flex: 1` on the wrapper and the
+     * `flex-grow: 1` on the inner `.content`, so the group collapses
+     * vertically onto whatever the active tab renders.
+     */
+    dense?: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.42",
+  "version": "0.37.43",
   "publishConfig": {
     "access": "restricted"
   },