@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -1,93 +1,210 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import type { RefWrapper } from '../../../Types/Internal/RefWrapper.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import QuickSearchCell from './QuickSearchCell.svelte';
-	import TableRow from './Rows/TableRow.svelte';
-	import type { TableBodyProps } from './TableBodyProps.js';
-
-	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	type HasHeight = {
-		totalTrHeight?: RefWrapper<number>;
-	};
-	const rows: Array<TableRow<T, never>> = $state([]);
-
-	const _rowHeights = $derived(
-		// HACK terrible type casting due to svelte type gen not being liked by eslint
-		rows.map((it) => {
-			return (it as HasHeight | undefined)?.totalTrHeight?.value ?? 0;
-		})
-	);
-
-	export const rowHeights = {
-		get value() {
-			return _rowHeights;
-		},
-	};
-</script>
-
-<tbody>
-	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && columns.length}
-		<tr class="sticky">
-			{#if includeHighlight}
-				<td class="highlight-dud"><!-- accomodating for row marking --></td>
-			{/if}
-			{#each columns as column (column.id)}
-				<QuickSearchCell
-					{column}
-					customFilters={tableContext.remoteFilters}
-				/>
-			{/each}
-		</tr>
-	{/if}
-
-	{#each tableContext.paginationRowModel.rows as row, index (row.visibleIndex)}
-		{@const customHeight = heights[index]?.applyTo.includes(side)
-			? heights[index].maxHeight
-			: undefined}
-		<TableRow
-			{customHeight}
-			{includeHighlight}
-			{row}
-			{side}
-			odd={index % 2 == 1}
-			bind:this={rows[index]}
-		/>
-	{/each}
-</tbody>
-
-<style>td {
-  transition: line-height 0.2s ease, height 0.2s ease;
-  --input-border: none;
-  --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
-  text-overflow: ellipsis;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import QuickSearchCell from './QuickSearchCell.svelte';
+	import TableRow from './Rows/TableRow.svelte';
+	import type { TableBodyProps } from './TableBodyProps.js';
+
+	const { oncontextmenu }: TableBodyProps = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	// Visible columns split by pinning side, matching the cell-side
+	// arrays used by `TableRow`. Each side is reactive on column
+	// visibility and pinning state.
+	const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
+	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
+	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
+
+	const showHighlightColumn = $derived(
+		leftColumns.length + centreColumns.length + rightColumns.length > 0
+	);
+
+	// Cumulative pinning offsets for the quick-filter row's sticky
+	// cells. Reads rendered widths from `_columnRenderedWidths`
+	// (populated by the ResizeObserver in TableHead) so filter inputs
+	// for pinned columns stay aligned with their column even when the
+	// column flexes wider than `columnDef.width`.
+	function renderedColumnWidth(columnId: string, declared: number): number {
+		return tableContext._columnRenderedWidths.get(columnId) ?? declared;
+	}
+
+	const leftOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets: Array<number> = [];
+		let cumulative = showHighlightColumn ? 20 : 0;
+		for (const col of leftColumns) {
+			offsets.push(cumulative);
+			cumulative += renderedColumnWidth(col.id, col.columnDef.width);
+		}
+		return offsets;
+	});
+
+	const rightOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets = new Array<number>(rightColumns.length).fill(0);
+		let cumulative = 0;
+		for (let i = rightColumns.length - 1; i >= 0; i--) {
+			offsets[i] = cumulative;
+			cumulative += renderedColumnWidth(rightColumns[i].id, rightColumns[i].columnDef.width);
+		}
+		return offsets;
+	});
+
+	// Phase 7.4 row virtualisation. When the current row count is above
+	// the `_virtualisation` threshold (100 rows by default), only rows
+	// in the viewport plus an overscan band are rendered. Two spacer
+	// rows (top and bottom) reserve the rest of the body height so the
+	// scrollbar matches the un-virtualised length.
+	const virtualisation = $derived(tableContext._virtualisation);
+	const visibleRows = $derived(virtualisation.visibleRows);
+	const topSpacerHeight = $derived(virtualisation.topSpacerHeight);
+	const bottomSpacerHeight = $derived(virtualisation.bottomSpacerHeight);
+</script>
+
+<div
+	role="rowgroup"
+	class="datatable-body"
+	{oncontextmenu}
+>
+	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && showHighlightColumn}
+		<div
+			role="row"
+			class="datatable-row quick-filter-row"
+		>
+			{#if showHighlightColumn}
+				<div
+					role="cell"
+					class="cell highlight-dud pinned-left"
+					style="left: 0px"
+					aria-hidden="true"
+				>
+					&nbsp;
+				</div>
+			{/if}
+			{#each leftColumns as column, index (column.id)}
+				<div
+					role="cell"
+					class="cell pinned-left"
+					style="left: {leftOffsets[index]}px"
+				>
+					<QuickSearchCell
+						{column}
+						customFilters={tableContext.remoteFilters}
+					/>
+				</div>
+			{/each}
+			{#each centreColumns as column (column.id)}
+				<div
+					role="cell"
+					class="cell"
+				>
+					<QuickSearchCell
+						{column}
+						customFilters={tableContext.remoteFilters}
+					/>
+				</div>
+			{/each}
+			{#each rightColumns as column, index (column.id)}
+				<div
+					role="cell"
+					class="cell pinned-right"
+					style="right: {rightOffsets[index]}px"
+				>
+					<QuickSearchCell
+						{column}
+						customFilters={tableContext.remoteFilters}
+					/>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if topSpacerHeight > 0}
+		<div
+			role="presentation"
+			class="virtual-spacer"
+			style="height: {topSpacerHeight}px;"
+		></div>
+	{/if}
+
+	{#each visibleRows as { row } (row.id)}
+		{@const originalIndex = row.visibleIndex}
+		<TableRow
+			{row}
+			odd={originalIndex % 2 == 1}
+			includeHighlight={showHighlightColumn}
+		/>
+	{/each}
+
+	{#if bottomSpacerHeight > 0}
+		<div
+			role="presentation"
+			class="virtual-spacer"
+			style="height: {bottomSpacerHeight}px;"
+		></div>
+	{/if}
+</div>
+
+<style>.cell {
+  display: block;
   position: relative;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  min-width: 0;
+  overflow: visible;
+  box-sizing: border-box;
+}
+.cell.pinned-left, .cell.pinned-right {
+  position: sticky;
+  z-index: 2;
+  background-color: #ffffff;
+}
+.cell.pinned-left {
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
+}
+.cell.pinned-right {
+  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
 }
 
-tr {
+.datatable-row {
+  display: grid;
+  grid-template-columns: var(--cols);
   line-height: var(--line-height, 3);
+  transition: line-height 0.2s ease, height 0.2s ease;
 }
 
-tbody {
+.datatable-body {
+  display: contents;
   font-size: 0.875rem;
 }
 
-tr.sticky {
+.datatable-row.quick-filter-row {
   transition: line-height 0.2s ease, height 0.2s ease;
   height: 61px;
   --height: 61px;
-}</style>
+  position: sticky;
+  top: 3rem;
+  z-index: 10;
+  background-color: #f4f7f9;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, calc(0.08 * var(--show-top-shadow, 0)));
+}
+.datatable-row.quick-filter-row > .cell.pinned-left, .datatable-row.quick-filter-row > .cell.pinned-right {
+  z-index: 11;
+}
+.datatable-row.quick-filter-row > .highlight-dud {
+  background-color: #f4f7f9;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+}
+
+.virtual-spacer {
+  display: block;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+}</style>

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

@@ -1,33 +1,26 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
 import type { TableBodyProps } from './TableBodyProps.js';
-declare function $$render<T extends object>(): {
-    props: TableBodyProps<T>;
-    exports: {
-        rowHeights: {
-            readonly value: number[];
-        };
-    };
+declare function $$render<T extends object, IdType extends Primitive>(): {
+    props: TableBodyProps;
+    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(): {
-        rowHeights: {
-            readonly value: number[];
-        };
-    };
+    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>['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>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableBody: $$IsomorphicComponent;
-type TableBody<T extends object> = InstanceType<typeof TableBody<T>>;
+type TableBody<T extends object, IdType extends Primitive> = InstanceType<typeof TableBody<T, IdType>>;
 export default TableBody;

package/dist/Components/Table/Body/TableBodyProps.d.ts

@@ -1,8 +1,10 @@
-import type { Column } from '../Types/Columns/Column.js';
-import type { HeightData } from './HeightData.js';
-export interface TableBodyProps<T extends object> {
-    side: 'left' | 'centre' | 'right';
-    heights: Array<HeightData<T>>;
-    columns: Array<Column<T>>;
-    includeHighlight: boolean;
+/**
+ * Props for `TableBody`. The body now renders the full column set (left
+ * pinned + centre + right pinned) inside a single grid container; the
+ * per-side `side` / `columns` / `heights` / `includeHighlight` props from
+ * the three-section render were dropped in the div+grid refactor.
+ */
+export interface TableBodyProps {
+    /** Forwarded right-click handler on the body element. */
+    oncontextmenu?: (e: MouseEvent) => void;
 }

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js

@@ -1,4 +1,5 @@
-import { asyncSleep, generateShortUUID, getAccessorSortingFn, } from '../../../Helpers/Helpers.svelte.js';
+import { getAccessorSortingFn } from '../TableHelpers.svelte.js';
+import { asyncSleep, generateWeakId, scoriaStorageKey, syntheticColumnId, } from '../../../Helpers/Helpers.svelte.js';
 import { Colour } from '../../../scss/colours.js';
 import { ExampleSelectEnum } from '../../../Types/Examples/ExampleSelectEnum.js';
 import { Validity } from '../../../Types/Internal/Validity.js';
@@ -45,9 +46,9 @@ export function generateExampleItemColumnDefs(modal) {
         accessorFn: (it) => [it],
         getInnerColumnDefs: () => generateExampleItemColumnDefs(modal),
         header: 'Expand Cell',
-        id: 'expand',
+        id: syntheticColumnId('expand'),
         headerIcon: 'access-token',
-        innerTableName: 'expand-inner',
+        innerTableName: scoriaStorageKey('expand-inner'),
         innerTableOptions: {
             selectionExtractor: (item) => Promise.resolve(item.id),
             getUserId: () => '1',
@@ -55,27 +56,29 @@ export function generateExampleItemColumnDefs(modal) {
         isEnabled: () => true,
         isValid,
     }));
+    // Module-local memoisation table; not part of the reactive graph.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const uuidByIndex = new Map();
-    const statusAccessorFn = async (item) => {
+    const statusAccessorFn = (item) => {
         const foundByIndex = uuidByIndex.get(item.id);
         if (foundByIndex) {
-            return foundByIndex;
+            return Promise.resolve(foundByIndex);
         }
-        const newlyMade = generateShortUUID();
+        const newlyMade = generateWeakId();
         uuidByIndex.set(item.id, newlyMade);
-        return newlyMade;
+        return Promise.resolve(newlyMade);
     };
     let defs = $state([
         expandDef,
         new ValidityDef({
             header: 'Valid',
-            id: 'valid',
+            id: syntheticColumnId('valid'),
             // debug: true,
             isValid,
             modal,
         }),
         new DisplayDef({
-            id: 'orderLineStatus',
+            id: syntheticColumnId('orderLineStatus'),
             header: 'Order Line Status',
             allowSorting: true,
             accessorFn: statusAccessorFn,
@@ -126,8 +129,11 @@ export function generateExampleItemColumnDefs(modal) {
                     : [];
             },
             isValid,
-            filterFn: (row, index, value) => {
-                console.log(value);
+            filterFn: (_row, _index, value) => {
+                // Example fixture: the value-only inspection is intentional; real
+                // implementations would match against `_row`. The `_` prefix keeps
+                // `no-unused-vars` quiet without changing the public signature.
+                void value;
                 return false;
             },
         }),
@@ -232,7 +238,7 @@ export function generateExampleItemColumnDefs(modal) {
         }),
         new BubbleDef({
             header: 'Generated Bubble',
-            id: 'generatedBubble',
+            id: syntheticColumnId('generatedBubble'),
             accessorFn: () => {
                 return ['foo', 'bar', 'baz'];
             },

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

@@ -0,0 +1,43 @@
+/**
+ * Runtime for the typed column builder closure consumers pass to
+ * `createTable({ columns: (col) => [...] })`. Each method on the returned
+ * `ColumnFactory<TRow>` wraps the matching existing `<Name>Def` constructor
+ * and returns a `ColumnSpec<TRow, Kind>` whose internal payload (the
+ * underlying `ColumnDef<TRow>` plus any per-column edit handler / reactive
+ * dependencies) is hidden behind a symbol-keyed property.
+ *
+ * Phase 1 implementation note: this file is a thin facade. It maps the
+ * consumer-friendly option shapes (with `accessor` instead of `accessorFn`,
+ * `minWidth` instead of `minSize`, etc.) to the internal `<Name>Def` props
+ * by spreading a `commonProps(...)` helper that returns the non-id common
+ * fields, with `id` passed explicitly at each call site so its narrowed
+ * type survives the spread.
+ */
+import type { CellCoordinates } from './Types/Coordinates/CellCoordinates.js';
+import type { ColumnDef } from './Types/Columns/Definitions/ColumnDef.svelte.js';
+import type { ColumnFactory } from './Types/Public/ColumnFactory.js';
+import type { ColumnSpec } from './Types/Public/ColumnSpec.js';
+/** Internal payload shape. Reachable from `createTable` via the
+ *  module-private `unwrapColumnSpec` helper below. */
+export interface ColumnSpecInternals<TRow extends object> {
+    readonly def: ColumnDef<TRow>;
+    readonly onEdit?: (row: TRow, value: unknown, coords: CellCoordinates) => void | Promise<void>;
+    readonly reactiveDependencies?: (row: TRow) => ReadonlyArray<unknown>;
+}
+/** Recover the internal payload from a public `ColumnSpec`. Throws if the
+ *  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>;