@lavalogic/scoria 0.37.17 → 0.37.19

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -727,6 +727,8 @@ div.input-cell {
   overflow: visible;
   padding-left: 0;
   padding-right: 0;
+  border-right: solid 1px #cbd4da !important;
+  box-sizing: border-box;
 }
 div.input-cell div.stick-right {
   position: absolute;

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -368,59 +368,71 @@
 		ondragleave={disableDragVisual}
 		ondrop={disableDragVisual}
 	>
-		<div class="visibility-wrapper">
-			<Checkbox
-				icon={{ name: 'assessment', size: Size.Medium }}
-				size={Size.FillWidth}
-				id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnVisibility[columnDef.id] !== false}
-				onchange={onVisibilityChange}
-			/>
-		</div>
-
-		{#if tableContext.allowColumnReordering}
-			<!--
-				Tri-state pin selector rendered via `ThreeStateRadio`,
-				matching the visual segmented-control used elsewhere in
-				the table (filter Active state, etc.). The three
-				`Ternary` slots map to:
-				  False   → pinned LEFT  (pin-left icon, leftmost)
-				  Neutral → unpinned     (circle-cross icon, middle)
-				  True    → pinned RIGHT (pin-right icon, rightmost)
-				Expand columns can never be pinned, so the group goes
-				fully disabled for them.
-			-->
-			<div
-				class="pin-selector"
-				class:disabled={isExpandColumn}
+		<!--
+			`.row-main` stacks the column label on top and the
+			visibility / pin controls underneath, so the label gets
+			the full card width to wrap into (instead of competing
+			horizontally with the controls). `.reorder-buttons` stays
+			as a sibling outside `.row-main` so the up / down arrows
+			remain vertically centred on the right edge of the card.
+		-->
+		<div class="row-main">
+			<span
+				class="column-label"
+				title={typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
 			>
-				<ThreeStateRadio
-					value={pinSide}
-					disabled={isExpandColumn}
-					noLabel="Pin to left"
-					neutralLabel="Unpinned"
-					yesLabel="Pin to right"
-					noIcon={{ name: 'pin-left', size: Size.Medium }}
-					neutralIcon={{ name: 'circle-cross', size: Size.Medium }}
-					yesIcon={{ name: 'pin-right', size: Size.Medium }}
-					onchange={(next: Ternary) => {
-						setPin(next);
-					}}
-				/>
+				{#if typeof columnDef.header === 'function'}
+					<!-- FIXME this needs testing -->
+					{@render columnDef.header()}
+				{:else}
+					{columnDef.header}
+				{/if}
+			</span>
+
+			<div class="row-controls">
+				<div class="visibility-wrapper">
+					<Checkbox
+						icon={{ name: 'assessment', size: Size.MediumSmall }}
+						size={Size.FillWidth}
+						id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
+						value={tableContext.columnVisibility[columnDef.id] !== false}
+						onchange={onVisibilityChange}
+					/>
+				</div>
+
+				{#if tableContext.allowColumnReordering}
+					<!--
+						Tri-state pin selector rendered via `ThreeStateRadio`,
+						matching the visual segmented-control used elsewhere in
+						the table (filter Active state, etc.). The three
+						`Ternary` slots map to:
+						  False   → pinned LEFT  (pin-left icon, leftmost)
+						  Neutral → unpinned     (circle-cross icon, middle)
+						  True    → pinned RIGHT (pin-right icon, rightmost)
+						Expand columns can never be pinned, so the group goes
+						fully disabled for them.
+					-->
+					<div
+						class="pin-selector"
+						class:disabled={isExpandColumn}
+					>
+						<ThreeStateRadio
+							value={pinSide}
+							disabled={isExpandColumn}
+							noLabel="Pin to left"
+							neutralLabel="Unpinned"
+							yesLabel="Pin to right"
+							noIcon={{ name: 'pin-left', size: Size.MediumSmall }}
+							neutralIcon={{ name: 'circle-cross', size: Size.MediumSmall }}
+							yesIcon={{ name: 'pin-right', size: Size.MediumSmall }}
+							onchange={(next: Ternary) => {
+								setPin(next);
+							}}
+						/>
+					</div>
+				{/if}
 			</div>
-		{/if}
-
-		<span
-			class="column-label"
-			title={typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
-		>
-			{#if typeof columnDef.header === 'function'}
-				<!-- FIXME this needs testing -->
-				{@render columnDef.header()}
-			{:else}
-				{columnDef.header}
-			{/if}
-		</span>
+		</div>
 
 		{#if tableContext.allowColumnReordering}
 			<!--
@@ -481,10 +493,11 @@ li.targeted {
 
 li.single-column:not(.anchor) {
   display: flex;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0.5rem;
+  flex-flow: row nowrap;
   align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  margin-bottom: 0.375rem;
   background-color: #ffffff;
   border: solid 1px #cbd4da;
   border-radius: 4px;
@@ -502,15 +515,30 @@ li.single-column:not(.anchor):last-of-type {
   margin-bottom: 0;
 }
 
+.row-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.375rem;
+}
+
+.row-controls {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .visibility-wrapper {
-  width: 3rem;
-  height: 3rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: flex;
   flex-shrink: 0;
 }
 
 .pin-selector {
-  --input-height: 3rem;
+  --input-height: 2.25rem;
   --input-width: auto;
   flex-shrink: 0;
   display: flex;
@@ -522,10 +550,12 @@ li.single-column:not(.anchor):last-of-type {
 }
 
 .column-label {
-  flex: 1 1 auto;
+  width: 100%;
   min-width: 0;
   font-size: 1.125rem;
-  line-height: 1.2;
+  font-weight: 500;
+  line-height: 1.25;
+  color: #3a4952;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte

@@ -188,6 +188,7 @@ div.bubble-parent {
   display: flex;
   flex-flow: row wrap;
   max-width: 100%;
+  height: 100%;
   overflow-x: clip;
   justify-content: flex-start;
   align-items: center;

package/dist/Components/Table/Body/TableBody.svelte

@@ -183,6 +183,11 @@
   font-size: 0.875rem;
 }
 
+.datatable-row.quick-filter-row > .cell {
+  border-right: solid 1px #cbd4da;
+  box-sizing: border-box;
+}
+
 .datatable-row.quick-filter-row {
   transition: line-height 0.2s ease, height 0.2s ease;
   height: 61px;

package/dist/Components/Table/ColumnFactory.svelte.d.ts

@@ -28,16 +28,4 @@ export interface ColumnSpecInternals<TRow extends object> {
  *  spec was not produced by `createColumnFactory(...)` (defensive; the
  *  public type's `_scoriaColumnSpec` brand prevents this at compile time). */
 export declare function unwrapColumnSpec<TRow extends object>(spec: ColumnSpec<TRow>): ColumnSpecInternals<TRow>;
-/**
- * Construct a `ColumnFactory<TRow>` for use inside the `columns:` closure of
- * `createTable({ ... })`. Each method on the returned object is a typed
- * builder that wraps the matching internal `<Name>Def` constructor and
- * returns a public `ColumnSpec` whose internal payload is hidden behind a
- * symbol-keyed property.
- *
- * Consumers do not call this directly. It is exported so the `createTable`
- * implementation can instantiate it inside the user-supplied closure and so
- * tests can exercise individual factory methods without round-tripping
- * through a full `createTable(...)` call.
- */
 export declare function createColumnFactory<TRow extends object>(): ColumnFactory<TRow>;

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -178,6 +178,30 @@ function normaliseOptionsLoader(options) {
  * tests can exercise individual factory methods without round-tripping
  * through a full `createTable(...)` call.
  */
+/** Format a Date or ISO-8601 date string for display using the browser
+ *  locale. Returns null / empty input unchanged. Used by `col.display` when
+ *  the column declares `filterValueType: 'Date'` so backend timestamps
+ *  surface as a properly localised date+time string instead of the raw
+ *  ISO payload (`2026-04-16T09:44:11+01:00`). */
+function formatLocaleDate(value) {
+    if (value == null || value === '') {
+        return value;
+    }
+    let d;
+    if (value instanceof Date) {
+        d = value;
+    }
+    else if (typeof value === 'string' || typeof value === 'number') {
+        const parsed = new Date(value);
+        if (!Number.isNaN(parsed.getTime())) {
+            d = parsed;
+        }
+    }
+    if (d == null) {
+        return value;
+    }
+    return d.toLocaleString();
+}
 export function createColumnFactory() {
     const factory = {
         // ─── Accessor kinds ─────────────────────────────────────────
@@ -301,10 +325,26 @@ export function createColumnFactory() {
                             : opts.filterValueType === 'String'
                                 ? 'text'
                                 : 'display';
+            // When the consumer flagged the column as a Date filter, auto-
+            // format the displayed value via `toLocaleString` so timestamps
+            // surface in the user's locale rather than the raw ISO 8601
+            // payload returned by the server. Promise / scalar / null
+            // inputs are all handled. Filter / sort logic still operates
+            // on the raw accessor value below.
+            const rawValue = opts.value;
+            const valueAccessor = opts.filterValueType === 'Date'
+                ? (row, index) => {
+                    const v = rawValue(row, index);
+                    if (v instanceof Promise) {
+                        return v.then(formatLocaleDate);
+                    }
+                    return formatLocaleDate(v);
+                }
+                : rawValue;
             const def = new DisplayDef({
                 id,
                 ...commonProps(opts, inferredKind),
-                accessorFn: opts.value,
+                accessorFn: valueAccessor,
                 modal: opts.modal,
                 // Display columns have no implicit filter type (unlike the
                 // typed kinds where the factory pins one based on the

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

@@ -35,6 +35,24 @@
 
 	const customFilter = $derived(customFilters?.get(def.id));
 
+	/** Human-readable label used by every inner input (QuerySelect /
+	 *  MultiSelect / SingleSelect / etc.). Priority:
+	 *  1. The column's `header` (when it is a plain string, which is the
+	 *     usual case in flowms migrations).
+	 *  2. The customFilter's `label` (set on the remoteFilters entry).
+	 *  3. The raw `customFilter.id` (last-ditch fallback).
+	 *  Avoids surfacing dotted-path / camelCase IDs like
+	 *  `orderLines.allowSplitFulfilment` as the visible label. */
+	const displayLabel: string = $derived.by(() => {
+		if (typeof def.header === 'string' && def.header.length > 0) {
+			return def.header;
+		}
+		if (customFilter?.label) {
+			return customFilter.label;
+		}
+		return customFilter?.id ?? def.id;
+	});
+
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
 
 	let value: unknown = $state(null);
@@ -263,7 +281,7 @@
 {#if isSearchable}
 	<!-- TODO remove this check once datePicker is supported -->
 	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
-		<label for={inputId}>{def.header}</label>
+		<label for={inputId}>{displayLabel}</label>
 	{/if}
 	<div class="row">
 		{#if def instanceof DateInputDef}
@@ -353,7 +371,7 @@
 				{#await options then options}
 					{#if hasQuery(customFilter)}
 						{#if customFilter.valueAsObject !== true}
-							{@const label = customFilter.id}
+							{@const label = displayLabel}
 
 							<!-- TODO: multiselect -->
 
@@ -370,7 +388,7 @@
 								onchange={generateOnChangePrimitive(label)}
 							/>
 						{:else}
-							{@const label = customFilter.id}
+							{@const label = displayLabel}
 
 							<!-- TODO: multiselect -->
 
@@ -389,7 +407,7 @@
 						{/if}
 					{:else}
 						<MultiSelect
-							label={customFilter.id}
+							label={displayLabel}
 							labelProp="label"
 							valueProp="value"
 							name={customFilter.objectName ?? 'Item'}

package/dist/Components/Table/NestedTable.svelte

@@ -28,7 +28,12 @@
 	> = Object.freeze({
 		allowCopy: false,
 		enableResize: false,
-		allowColumnReordering: false,
+		// Was `false`; flipped to `true` so nested-table columns can be
+		// reordered and pinned by default like the outer table. The
+		// `inner.allowReorder` option on `col.expand` (and the matching
+		// `allowReorder` on top-level `createTable`) still lets callers
+		// opt out per inner table when they want to lock the layout.
+		allowColumnReordering: true,
 		allowQuickFiltering: true,
 		allowAdvancedFiltering: true,
 		toolbar: ToolbarPosition.None,

package/dist/Components/Table/Table.svelte

@@ -129,10 +129,21 @@
 				}
 
 				element?.focus({ preventScroll: true });
+				// Same pinned-cell horizontal-scroll skip as the focusEnd
+				// effect below. Sticky-pinned cells are always visually
+				// in view, but their underlying layout position is at
+				// their real column track, so an unconditional
+				// `inline: 'nearest'` here scrolls the table sideways
+				// every time focus lands inside a pinned column (e.g.
+				// every click on a right-pinned Actions button).
+				const startCell = element?.closest('[role="cell"]');
+				const isStartPinned =
+					startCell?.classList.contains('pinned-left') ||
+					startCell?.classList.contains('pinned-right');
 				element?.scrollIntoView({
 					behavior: 'instant',
 					block: 'nearest',
-					inline: 'nearest',
+					inline: isStartPinned ? undefined : 'nearest',
 				});
 			}
 		});
@@ -156,10 +167,25 @@
 					`#${tableContext.tableName}-cell-${row}-${def.id}`
 				) as HTMLElement | undefined;
 
+				// Skip horizontal scroll-into-view for pinned (sticky)
+				// cells. Sticky positioning makes the cell visually
+				// "always on screen", but its true layout position is at
+				// its real column track - which for a right-pinned column
+				// in a wider-than-viewport table is offscreen. Asking the
+				// browser to `scrollIntoView({inline: 'nearest'})` then
+				// scrolls the table horizontally to bring the cell's
+				// underlying position into view, which is the user-facing
+				// "table jumps right when I click the Actions button"
+				// bug. The vertical block axis still scrolls because the
+				// row's vertical position is the user's actual scroll
+				// target.
+				const isPinned =
+					cell?.classList.contains('pinned-left') ||
+					cell?.classList.contains('pinned-right');
 				cell?.scrollIntoView({
 					behavior: 'instant',
 					block: 'nearest',
-					inline: 'nearest',
+					inline: isPinned ? undefined : 'nearest',
 				});
 			}
 		});

package/dist/scss/_mixins.scss

@@ -1869,6 +1869,17 @@
 		overflow: visible;
 		padding-left: 0;
 		padding-right: 0;
+		// Reassert the column-separator border-right here so it survives
+		// even when a narrow select-filter cell's internal widget (the
+		// SingleSelect / MultiSelect dropdown trigger) paints flush to
+		// the right edge. Without this rule, two adjacent select filters
+		// visually merge because the inner widget's background covers
+		// the cell's table-cell-basic border. `!important` is here to
+		// override the more-specific .focusable rule from
+		// table-cell-basic that occasionally re-paints the right edge
+		// transparent during focus.
+		border-right: solid 1px colours.$ui-blue-4 !important;
+		box-sizing: border-box;
 
 		div.stick-right {
 			position: absolute;

package/package.json

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