@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -0,0 +1,339 @@
+/**
+ * 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 { generateUUID, syntheticColumnId } from '../../Helpers/Helpers.svelte.js';
+import { CheckboxDef } from './Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js';
+import { DateInputDef } from './Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
+import { NumberInputDef } from './Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
+import { QueryDef } from './Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
+import { SelectDef } from './Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+import { TextInputDef } from './Types/Columns/Definitions/Accessors/TextInputDef.svelte.js';
+import { ActionsDef } from './Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
+import { BubbleDef } from './Types/Columns/Definitions/Display/BubbleDef.svelte.js';
+import { DisplayDef } from './Types/Columns/Definitions/Display/DisplayDef.svelte.js';
+import { ProgressBarDef } from './Types/Columns/Definitions/Display/ProgressBarDef.svelte.js';
+import { ValidityDef } from './Types/Columns/Definitions/Display/ValidityDef.svelte.js';
+import { ExpandDef } from './Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+import { FilterOnlyDef } from './Types/Columns/Definitions/FilterOnly/FilterOnlyDef.svelte.js';
+import { RowSelectionDef } from './Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+import { FilterValueType } from './Types/Filtering/FilterValueType.js';
+import { scoriaStorageKey } from '../../Helpers/Helpers.svelte.js';
+// ─────────────────────────────────────────────────────────────────────────
+// Internal payload carried on every spec
+// ─────────────────────────────────────────────────────────────────────────
+/** Symbol used to attach the internal payload to a public `ColumnSpec`.
+ *  Not exported; consumers cannot observe the property. */
+const InternalSpecPayload = Symbol('scoria.columnSpec.internal');
+/** 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 function unwrapColumnSpec(spec) {
+    const internal = spec[InternalSpecPayload];
+    if (!internal) {
+        throw new Error(`scoria: ColumnSpec for column id "${spec.id}" is missing its internal payload. ` +
+            `Specs must be produced by the typed column factory; do not construct them manually.`);
+    }
+    return internal;
+}
+/** Construct a public-shape `ColumnSpec` from a `ColumnDef` plus optional
+ *  per-column edit metadata. The internal payload is attached as a
+ *  non-enumerable symbol-keyed property so it does not show up in
+ *  `Object.keys` or JSON serialisation, while still being reachable via
+ *  `unwrapColumnSpec(...)`. */
+function makeSpec(kind, def, internals = {}) {
+    const spec = {
+        kind,
+        id: def.id,
+        _scoriaColumnSpec: true,
+    };
+    Object.defineProperty(spec, InternalSpecPayload, {
+        value: { def, ...internals },
+        enumerable: false,
+        configurable: false,
+        writable: false,
+    });
+    return Object.freeze(spec);
+}
+/** Returns the common Def props for an option object, excluding `id`.
+ *  Callers pass `id` directly at the construction site so its strict
+ *  literal-key narrowing survives the object spread. */
+function commonProps(opts) {
+    return {
+        header: opts.header,
+        minSize: opts.minWidth,
+        width: opts.width,
+        allowSorting: opts.allowSorting,
+        allowFiltering: opts.allowFiltering,
+        defaultHidden: opts.defaultHidden,
+        resizable: opts.resizable,
+        debug: opts.debug,
+        isValid: opts.isValid,
+        isEditable: opts.isEditable,
+        filterGroup: opts.filterGroup,
+    };
+}
+/** Generate a synthetic id for a column kind that does not take an `id`
+ *  from the caller. Mirrors the existing pattern used by `ActionsDef` and
+ *  `RowSelectionDef`. The returned value is the `SyntheticColumnId` brand. */
+function mintSyntheticId(prefix, hint) {
+    const suffix = hint ?? generateUUID();
+    return syntheticColumnId(`${prefix}-${suffix}`);
+}
+/** Resolve an `options` field that may be a static array or an async
+ *  loader into the always-loader form the Def expects. Mutable arrays are
+ *  required by the Def's signature; we spread to drop readonly. */
+function normaliseOptionsLoader(options) {
+    if (typeof options === 'function') {
+        return () => options().then((res) => [...res]);
+    }
+    const snapshot = [...options];
+    return () => Promise.resolve(snapshot);
+}
+// ─────────────────────────────────────────────────────────────────────────
+// Public entry point
+// ─────────────────────────────────────────────────────────────────────────
+/**
+ * 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 function createColumnFactory() {
+    const factory = {
+        // ─── Accessor kinds ─────────────────────────────────────────
+        text(opts) {
+            const def = new TextInputDef({
+                id: opts.id,
+                ...commonProps(opts),
+                accessorFn: opts.accessor,
+                filterValueType: FilterValueType.String,
+            });
+            return makeSpec('text', def, {
+                onEdit: opts.onEdit,
+                reactiveDependencies: opts.reactiveDependencies,
+            });
+        },
+        number(opts) {
+            const def = new NumberInputDef({
+                id: opts.id,
+                ...commonProps(opts),
+                accessorFn: opts.accessor,
+                min: opts.min ?? Number.MIN_SAFE_INTEGER,
+                max: opts.max ?? Number.MAX_SAFE_INTEGER,
+                filterValueType: FilterValueType.Number,
+            });
+            return makeSpec('number', def, {
+                onEdit: opts.onEdit,
+                reactiveDependencies: opts.reactiveDependencies,
+            });
+        },
+        checkbox(opts) {
+            const def = new CheckboxDef({
+                id: opts.id,
+                ...commonProps(opts),
+                accessorFn: opts.accessor,
+                filterValueType: FilterValueType.Bool,
+            });
+            return makeSpec('checkbox', def, {
+                onEdit: opts.onEdit,
+                reactiveDependencies: opts.reactiveDependencies,
+            });
+        },
+        date(opts) {
+            const def = new DateInputDef({
+                id: opts.id,
+                ...commonProps(opts),
+                accessorFn: opts.accessor,
+                showTime: opts.withTime ?? false,
+                filterValueType: FilterValueType.Date,
+            });
+            return makeSpec('date', def, {
+                onEdit: opts.onEdit,
+                reactiveDependencies: opts.reactiveDependencies,
+            });
+        },
+        select(opts) {
+            const def = new SelectDef({
+                id: opts.id,
+                ...commonProps(opts),
+                accessorFn: opts.accessor,
+                getOptions: normaliseOptionsLoader(opts.options),
+                getDisplayValue: opts.getDisplayValue ?? ((row) => String(row[opts.id] ?? '')),
+                getSpecificOptions: (() => {
+                    const fn = opts.rowOptions;
+                    if (!fn) {
+                        return undefined;
+                    }
+                    return (item) => Promise.resolve(fn(item)).then((res) => [...res]);
+                })(),
+                filterValueType: FilterValueType.Select,
+            });
+            return makeSpec('select', def, {
+                onEdit: opts.onEdit,
+                reactiveDependencies: opts.reactiveDependencies,
+            });
+        },
+        query(opts) {
+            const def = new QueryDef({
+                id: opts.id,
+                ...commonProps(opts),
+                accessorFn: opts.accessor,
+                query: (queryString) => opts
+                    .query(queryString)
+                    .then((res) => res),
+                getDisplayValue: opts.getDisplayValue ?? ((row) => String(row[opts.id] ?? '')),
+                filterValueType: FilterValueType.Select,
+            });
+            return makeSpec('query', def, {
+                onEdit: opts.onEdit,
+                reactiveDependencies: opts.reactiveDependencies,
+            });
+        },
+        // ─── Display kinds ──────────────────────────────────────────
+        display(opts) {
+            const id = mintSyntheticId('display', opts.idHint);
+            const def = new DisplayDef({
+                id,
+                ...commonProps(opts),
+                accessorFn: opts.value,
+                modal: opts.modal,
+            });
+            return makeSpec('display', def);
+        },
+        bubble(opts) {
+            const id = mintSyntheticId('bubble', opts.idHint);
+            const def = new BubbleDef({
+                id,
+                ...commonProps(opts),
+                accessorFn: opts.value,
+                getColour: opts.colour,
+            });
+            return makeSpec('bubble', def);
+        },
+        progress(opts) {
+            const id = mintSyntheticId('progress', opts.idHint);
+            // Normalise scalar ratio to `[fraction, 1]` tuple for the Def.
+            const tupleAccessor = (row, index) => {
+                const raw = opts.value(row, index);
+                if (raw instanceof Promise) {
+                    return raw.then((v) => (typeof v === 'number' ? [v, 1] : v));
+                }
+                return typeof raw === 'number' ? [raw, 1] : raw;
+            };
+            const userColour = opts.colour;
+            const getColour = userColour
+                ? (row, index, value) => {
+                    const fraction = value[1] === 0 ? 0 : value[0] / value[1];
+                    return userColour(row, index, fraction);
+                }
+                : () => 'grey';
+            const def = new ProgressBarDef({
+                id,
+                ...commonProps(opts),
+                accessorFn: tupleAccessor,
+                getColour,
+            });
+            return makeSpec('progress', def);
+        },
+        validity(opts) {
+            const id = mintSyntheticId('validity', opts?.idHint);
+            const fallbackValid = () => 'Valid';
+            const def = new ValidityDef({
+                id,
+                header: opts?.header ?? '',
+                minSize: opts?.minWidth,
+                width: opts?.width,
+                defaultHidden: opts?.defaultHidden,
+                resizable: opts?.resizable ?? false,
+                debug: opts?.debug,
+                isValid: opts?.isValid ?? fallbackValid,
+                modal: opts?.modal,
+            });
+            return makeSpec('validity', def);
+        },
+        // ─── Structural kinds ───────────────────────────────────────
+        rowSelection(opts) {
+            const def = new RowSelectionDef({
+                isSelectable: opts?.isSelectable ?? (() => true),
+            });
+            return makeSpec('rowSelection', def);
+        },
+        actions(opts) {
+            const wrapped = opts.actions.map((action) => ({
+                getLabel: () => action.label,
+                callback: (row) => {
+                    void action.callback(row);
+                },
+                colourSet: action.colourSet,
+            }));
+            const isEnabledFn = opts.isEnabled;
+            const def = new ActionsDef({
+                actions: wrapped,
+                isEnabled: isEnabledFn ? (item) => isEnabledFn(item) : undefined,
+            });
+            return makeSpec('actions', def);
+        },
+        expand(opts) {
+            // `childRowId` may be either a function or a key string;
+            // the inner `TableContext` expects a function form for
+            // `selectionExtractor`. Normalise here so the nested table
+            // never sees the raw string and `SelectionState.cachedKey`
+            // can safely invoke the extractor.
+            const childRowIdFn = typeof opts.childRowId === 'function'
+                ? opts.childRowId
+                : (inner) => inner[opts.childRowId];
+            const def = new ExpandDef({
+                id: mintSyntheticId('expand'),
+                header: opts.header ?? '',
+                isEnabled: () => true,
+                accessorFn: opts.childRows,
+                headerIcon: 'chevron-down',
+                innerTableName: scoriaStorageKey(opts.name),
+                getInnerColumnDefs: () => {
+                    const innerFactory = createColumnFactory();
+                    const innerSpecs = opts.childColumns(innerFactory);
+                    const innerDefs = innerSpecs.map((spec) => unwrapColumnSpec(spec).def);
+                    return { defs: innerDefs };
+                },
+                innerTableOptions: {
+                    selectionExtractor: childRowIdFn,
+                    getUserId: () => undefined,
+                },
+            });
+            return makeSpec('expand', def);
+        },
+        filterOnly(opts) {
+            const def = new FilterOnlyDef({
+                id: opts.id,
+                header: opts.header,
+                allowSorting: false,
+                resizable: false,
+                allowFiltering: opts.allowFiltering ?? true,
+                defaultHidden: opts.defaultHidden ?? true,
+                debug: opts.debug,
+                filterValueType: opts.filterValueType,
+                filterGroup: opts.filterGroup,
+            });
+            return makeSpec('filterOnly', def);
+        },
+    };
+    return factory;
+}

package/dist/Components/Table/Headers/HighlightAllHeader.svelte

@@ -1,41 +1,43 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../../scss/colours.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext } from 'svelte';
-	import Action from '../../Action.svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const backgroundColour = $derived.by(() => {
-		return tableContext.sortedData.length > 0 && tableContext.allHighlighted
-			? Colour['$brand-primary']
-			: Colour['$ui-white'];
-	});
-</script>
-
-<div class="checkbox-cell">
-	<div class="wrapper">
-		<Action
-			{backgroundColour}
-			hoverBackgroundColour={Colour['$brand-dark']}
-			size={Size.FillWidth}
-			icon={{
-				name: 'nothing',
-			}}
-			onclick={() => {
-				tableContext.onHighlightAll()?.catch(devCatch);
-			}}
-		/>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../../scss/colours.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import Action from '../../Action.svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const backgroundColour = $derived.by(() => {
+		return tableContext.sortedData.length > 0 && tableContext.allHighlighted
+			? Colour['$brand-primary']
+			: Colour['$ui-white'];
+	});
+</script>
+
+<div class="highlight-header">
+	<div class="wrapper">
+		<Action
+			label="Highlight all rows"
+			{backgroundColour}
+			hoverBackgroundColour={Colour['$brand-dark']}
+			size={Size.FillWidth}
+			icon={{
+				name: 'nothing',
+			}}
+			onclick={() => {
+				tableContext.onHighlightAll()?.catch(devCatch);
+			}}
+		/>
+	</div>
+</div>
+
 <style>div.wrapper {
   position: absolute;
   top: 0;
@@ -45,4 +47,4 @@
   display: flex;
   align-items: stretch;
   justify-content: stretch;
-}</style>
+}</style>

package/dist/Components/Table/Headers/HighlightAllHeader.svelte.d.ts

@@ -1,24 +1,25 @@
-declare function $$render<T extends object>(): {
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: Record<string, never>;
     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(): {};
 }
 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>['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>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const HighlightAllHeader: $$IsomorphicComponent;
-type HighlightAllHeader<T extends object> = InstanceType<typeof HighlightAllHeader<T>>;
+type HighlightAllHeader<T extends object, IdType extends Primitive> = InstanceType<typeof HighlightAllHeader<T, IdType>>;
 export default HighlightAllHeader;

package/dist/Components/Table/Headers/SelectAllHeader.svelte

@@ -1,30 +1,32 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const checked: boolean = $derived(
-		tableContext.dataRepo.data.length > 0 ? tableContext.allSelectedInCurrentPage : false
-	);
-</script>
-
-<div class="checkbox-cell">
-	<label>
-		<input
-			onchange={tableContext.selectAllInCurrentPage}
-			type="checkbox"
-			{checked}
-			disabled={tableContext.showSelectedOnly}
-		/>
-	</label>
-</div>
-
+<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';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const checked: boolean = $derived(
+		tableContext.dataRepo.data.length > 0 ? tableContext.allSelectedInCurrentPage : false
+	);
+</script>
+
+<div class="checkbox-cell">
+	<label aria-label="Select all rows on this page">
+		<input
+			aria-label="Select all rows on this page"
+			onchange={tableContext.selectAllInCurrentPage}
+			type="checkbox"
+			{checked}
+			disabled={tableContext.showSelectedOnly}
+		/>
+	</label>
+</div>
+
 <style>input[type=checkbox] {
   height: var(--checkbox-height);
   padding: 1rem;
@@ -52,4 +54,4 @@ label {
 
 label {
   cursor: pointer;
-}</style>
+}</style>

package/dist/Components/Table/Headers/SelectAllHeader.svelte.d.ts

@@ -1,24 +1,25 @@
-declare function $$render<T extends object>(): {
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: Record<string, never>;
     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(): {};
 }
 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>['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>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const SelectAllHeader: $$IsomorphicComponent;
-type SelectAllHeader<T extends object> = InstanceType<typeof SelectAllHeader<T>>;
+type SelectAllHeader<T extends object, IdType extends Primitive> = InstanceType<typeof SelectAllHeader<T, IdType>>;
 export default SelectAllHeader;