@lavalogic/scoria 0.37.23 → 0.37.24

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

@@ -24,6 +24,33 @@
 		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
 	);
 
+	/** For Date-typed display columns, expose both the local-time and UTC
+	 *  representations of the raw accessor value as a multi-line tooltip.
+	 *  The cell's body shows the locale-formatted value (via
+	 *  `getDisplayValue`); the title attribute below lets users hover to
+	 *  see Local + UTC side-by-side without expanding the column. */
+	const dateTooltip: string | undefined = $derived.by(() => {
+		if (cell.column.columnDef.filterValueType !== 'Date') {
+			return undefined;
+		}
+		if (value == null || value === '' || value instanceof Promise) {
+			return undefined;
+		}
+		let d: Date | undefined;
+		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 undefined;
+		}
+		return `Local: ${d.toLocaleString()}\nUTC: ${d.toUTCString()}`;
+	});
+
 	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
 	const options: Array<SelectOption<unknown>> = $derived(
@@ -106,6 +133,7 @@
 	class:has-modal={!!modalComponent}
 	tabIndex={hasValue ? 0 : undefined}
 	class="focusable"
+	title={dateTooltip}
 	style={focusDetails.outline}
 	class:multifocus={hasValue && focusDetails.isMultiFocused}
 	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}

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

@@ -325,26 +325,33 @@ 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.
+            // For Date-typed display columns, leave the accessor returning
+            // the raw Date / ISO string (filter / sort logic still operates
+            // on the raw value) and surface the formatted local-time
+            // string via `getDisplayValue`. The cell renders
+            // `getDisplayValue` for visible text and reads the raw value
+            // from `accessorFn` to compose the hover tooltip showing both
+            // the local-time and UTC representations.
             const rawValue = opts.value;
-            const valueAccessor = opts.filterValueType === 'Date'
+            const valueAccessor = rawValue;
+            const dateDisplayValue = opts.filterValueType === 'Date'
                 ? (row, index) => {
                     const v = rawValue(row, index);
                     if (v instanceof Promise) {
-                        return v.then(formatLocaleDate);
+                        return v.then((resolved) => {
+                            const formatted = formatLocaleDate(resolved);
+                            return formatted == null ? null : String(formatted);
+                        });
                     }
-                    return formatLocaleDate(v);
+                    const formatted = formatLocaleDate(v);
+                    return formatted == null ? null : String(formatted);
                 }
-                : rawValue;
+                : undefined;
             const def = new DisplayDef({
                 id,
                 ...commonProps(opts, inferredKind),
                 accessorFn: valueAccessor,
+                getDisplayValue: dateDisplayValue,
                 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/TableFooter.svelte

@@ -359,7 +359,8 @@
   --button-padding-vertical: 0.42rem;
 }
 .spread_row .block.records-per-page {
-  --input-width: 2.75rem;
+  --input-min-width: 3.5rem;
+  --input-width: 3.5rem;
 }
 .spread_row span,
 .spread_row label {

package/package.json

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