nexus-shared 1.1.20 → 2.0.0

package/dist/Helpers/RowsStore.js

@@ -0,0 +1,584 @@
+import { duplicateMessageFor, initialInputValue, inputValuesEqual, normalizeInputValue, rowsItemNames, rowsMessage, uniqueKeyOf, validateInput, } from "./InputParamsHelpers.js";
+export class RowsStore {
+    options;
+    inputByName = new Map();
+    entries = [];
+    positions = new Map();
+    initial = [];
+    seq = 0;
+    generation = 0;
+    // Messages: an input's own rules, and values repeated in `unique` inputs.
+    ruleErrors = new Map();
+    duplicateErrors = new Map();
+    invalidByRow = new Map();
+    invalidCells = 0;
+    message = null;
+    messageShown = false;
+    showAll = false;
+    touched = new Map();
+    removed = null;
+    // Rendering: a revision per value set from code (its input mounts again with it), a version per row.
+    revisions = new Map();
+    versions = new Map();
+    rowListeners = new Map();
+    listeners = new Set();
+    valueListeners = new Set();
+    snapshot;
+    valueCache = null;
+    keysCache = null;
+    dirtyUnique = new Set();
+    /** The array last given to value listeners. A controlled parent that passes it back changes nothing. */
+    lastValue = null;
+    constructor(options, rows = []) {
+        this.options = options;
+        this.indexInputs();
+        this.load(rows);
+        this.initial = this.getValue();
+        this.lastValue = this.initial;
+        this.snapshot = this.buildSnapshot();
+    }
+    /* Reading */
+    /** Every row as it is now. The same array until something changes; do not change it. */
+    getValue() {
+        this.valueCache ??= this.entries.map(entry => entry.values);
+        return this.valueCache;
+    }
+    getSnapshot = () => this.snapshot;
+    get count() {
+        return this.entries.length;
+    }
+    get inputs() {
+        return this.options.inputs;
+    }
+    /** The item's names for titles and messages. */
+    get names() {
+        return rowsItemNames(this.options, this.options.fallbackItem ?? "Row");
+    }
+    indexOf(key) {
+        return this.positions.get(key) ?? -1;
+    }
+    keyAt(index) {
+        return this.entries[index]?.key ?? null;
+    }
+    row(key) {
+        const index = this.positions.get(key);
+        return index === undefined ? undefined : this.entries[index]?.values;
+    }
+    get(key, name) {
+        return this.row(key)?.[name];
+    }
+    /** Grows when a value was set from code; an input renders again from the store with a new one. */
+    revision(key, name) {
+        return this.revisions.get(key)?.get(name) ?? 0;
+    }
+    /** Grows whenever what a row shows changes: a message, or a value set from code. */
+    version(key) {
+        return this.versions.get(key) ?? 0;
+    }
+    /** The message a value shows now: every message after `validateAll`; before, a repeated value once its input was left. */
+    shownError(key, name) {
+        const duplicate = this.duplicateErrors.get(key)?.get(name);
+        if (this.showAll)
+            return this.ruleErrors.get(key)?.get(name) ?? duplicate;
+        return duplicate && this.touched.get(key)?.has(name) ? duplicate : undefined;
+    }
+    /** How many values in a row fail. */
+    rowProblems(key) {
+        return this.invalidByRow.get(key) ?? 0;
+    }
+    /** Whether any value or the rows' own rules fail, shown or not. */
+    hasProblems() {
+        return this.invalidCells > 0 || this.message !== null;
+    }
+    /** The first problem in row order, then the rows' own message; `null` when all is valid. */
+    firstProblem() {
+        if (this.invalidCells > 0) {
+            for (const entry of this.entries) {
+                if (!this.invalidByRow.get(entry.key))
+                    continue;
+                for (const params of this.options.inputs) {
+                    if (this.ruleErrors.get(entry.key)?.has(params.name) || this.duplicateErrors.get(entry.key)?.has(params.name))
+                        return { key: entry.key, name: params.name };
+                }
+            }
+        }
+        return this.message ? { key: null, name: null } : null;
+    }
+    /** The first problem's message, named with its row: "Address 2: City is required." */
+    firstMessage() {
+        const place = this.firstProblem();
+        if (!place)
+            return null;
+        if (place.key === null)
+            return this.message;
+        const text = this.ruleErrors.get(place.key)?.get(place.name) ?? this.duplicateErrors.get(place.key)?.get(place.name) ?? "";
+        return `${this.names.title} ${this.indexOf(place.key) + 1}: ${text}`;
+    }
+    /** Whether the rows differ from the ones loaded last (`replace`) or first. */
+    isChanged() {
+        const rows = this.getValue();
+        if (rows.length !== this.initial.length)
+            return true;
+        return rows.some((row, index) => {
+            const before = this.initial[index];
+            return row !== before && this.options.inputs.some(params => !inputValuesEqual(row[params.name], before?.[params.name]));
+        });
+    }
+    /* Subscribing */
+    /** Structure: the rows, their order, and the rows' own message. */
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    };
+    /** One row: its messages and the values set from code. */
+    subscribeRow(key, listener) {
+        let set = this.rowListeners.get(key);
+        if (!set)
+            this.rowListeners.set(key, (set = new Set()));
+        set.add(listener);
+        return () => {
+            set.delete(listener);
+            if (!set.size && this.rowListeners.get(key) === set)
+                this.rowListeners.delete(key);
+        };
+    }
+    /** Every row, after each change of a value or of the rows. */
+    subscribeValue(listener) {
+        this.valueListeners.add(listener);
+        return () => this.valueListeners.delete(listener);
+    }
+    /* Changing */
+    /**
+     * New rules or inputs. `recheck` checks every value again (after a change of inputs or rules); without it, only the
+     * callbacks (`validate`, `onRowChange`, `newRow`) are swapped, which a parent's render does every time.
+     */
+    configure(options, recheck = true) {
+        this.options = options;
+        if (!recheck)
+            return;
+        this.indexInputs();
+        this.checkEverything();
+        this.touchAllRows();
+        this.refresh();
+    }
+    /** Sets a value in a row. `input` is a change the user made in the row's input: it runs `onRowChange`. */
+    set(key, name, value, source = "code") {
+        const before = this.getValue();
+        const changed = new Set();
+        this.write(key, name, value, source, changed, 0);
+        // Nothing was written: the same value again.
+        if (this.getValue() === before)
+            return;
+        this.settle(changed);
+    }
+    /** Marks a value as left by the user: a repeated value shows its message from now on. */
+    touch(key, name) {
+        let names = this.touched.get(key);
+        if (names?.has(name))
+            return;
+        if (!names)
+            this.touched.set(key, (names = new Set()));
+        names.add(name);
+        if (!this.showAll && this.duplicateErrors.get(key)?.has(name))
+            this.bump(key);
+    }
+    /** Adds a row with the inputs' defaults, `newRow`, and `values`, at `index` or at the end. Returns its key. */
+    add(values, index = this.entries.length) {
+        const position = Math.max(0, Math.min(index, this.entries.length));
+        const wasEmpty = this.entries.length === 0;
+        const row = {};
+        for (const params of this.options.inputs)
+            row[params.name] = initialInputValue(params);
+        const { newRow } = this.options;
+        Object.assign(row, typeof newRow === "function" ? newRow(position) : newRow, values);
+        // The first row of a list has each radio on: the first address added is the primary one.
+        for (const params of this.options.inputs) {
+            if (params.type === "radio" && wasEmpty && values?.[params.name] === undefined)
+                row[params.name] = true;
+        }
+        const entry = { key: this.newKey(), values: this.normalizeRow(row) };
+        this.entries.splice(position, 0, entry);
+        this.afterStructure();
+        const changed = new Set();
+        for (const params of this.options.inputs) {
+            this.checkCell(entry, params);
+            // Only one row keeps a radio on: a new row that has it takes it from the others.
+            if (params.type === "radio" && entry.values[params.name] === true)
+                this.radioOn(entry, params.name, changed);
+        }
+        this.messageShown = true;
+        this.removed = null;
+        this.markUniqueDirty();
+        this.settle(changed);
+        return entry.key;
+    }
+    /** Adds a copy of a row after it, without its id and with its radios off. Returns the copy's key. */
+    duplicate(key) {
+        const index = this.positions.get(key);
+        const source = index === undefined ? undefined : this.entries[index];
+        if (!source || index === undefined)
+            return null;
+        const values = { ...source.values };
+        if (this.options.rowKey)
+            delete values[this.options.rowKey];
+        for (const params of this.options.inputs)
+            if (params.type === "radio")
+                values[params.name] = false;
+        return this.add(values, index + 1);
+    }
+    /** Removes a row. A radio it had on moves to the first row left. `undoRemove` puts it back. */
+    remove(key) {
+        const index = this.positions.get(key);
+        if (index === undefined)
+            return;
+        const [entry] = this.entries.splice(index, 1);
+        if (!entry)
+            return;
+        this.forget(key);
+        this.afterStructure();
+        const changed = new Set();
+        const moved = [];
+        const first = this.entries[0];
+        for (const params of this.options.inputs) {
+            if (params.type !== "radio" || entry.values[params.name] !== true || !first)
+                continue;
+            this.write(first.key, params.name, true, "code", changed, 1);
+            moved.push({ key: first.key, name: params.name });
+        }
+        this.removed = { entry, index, moved };
+        this.messageShown = true;
+        this.markUniqueDirty();
+        this.settle(changed);
+    }
+    /** Puts the last removed row back where it was. Returns its key, or `null` when there is nothing to undo. */
+    undoRemove() {
+        const removed = this.removed;
+        if (!removed)
+            return null;
+        this.removed = null;
+        const { entry, index, moved } = removed;
+        // A row with the same id may have been added since; the row comes back under a new key then.
+        if (this.positions.has(entry.key))
+            entry.key = this.newKey();
+        this.entries.splice(Math.min(index, this.entries.length), 0, entry);
+        this.afterStructure();
+        const changed = new Set();
+        for (const { key, name } of moved)
+            if (this.positions.has(key))
+                this.write(key, name, false, "code", changed, 1);
+        for (const params of this.options.inputs)
+            this.checkCell(entry, params);
+        this.markUniqueDirty();
+        this.settle(changed);
+        return entry.key;
+    }
+    /** Moves a row to a new position. */
+    move(key, toIndex) {
+        const index = this.positions.get(key);
+        const target = Math.max(0, Math.min(toIndex, this.entries.length - 1));
+        if (index === undefined || index === target)
+            return;
+        const [entry] = this.entries.splice(index, 1);
+        if (!entry)
+            return;
+        this.entries.splice(target, 0, entry);
+        this.afterStructure();
+        this.removed = null;
+        // "Same as in row 1" names positions, which just changed.
+        this.markUniqueDirty();
+        this.settle(new Set());
+    }
+    /**
+     * Loads new rows, e.g. fresh data from a server. With `asInitial` (default), they become the rows `reset` and
+     * `isChanged` compare with. `emit` tells value listeners, for a change the parent does not know of yet.
+     */
+    replace(rows, { asInitial = true, emit = false } = {}) {
+        this.load(rows);
+        if (asInitial)
+            this.initial = this.getValue();
+        this.generation++;
+        this.showAll = false;
+        this.messageShown = false;
+        this.touched.clear();
+        this.removed = null;
+        this.refresh(true);
+        if (emit)
+            this.emit();
+        else
+            this.lastValue = this.getValue();
+    }
+    /** Back to the rows loaded last, as a form reset does. */
+    reset() {
+        this.replace(this.initial, { asInitial: false, emit: true });
+    }
+    /** Shows every message, as a submit does. Returns the first problem, or `null` when all is valid. */
+    validateAll() {
+        this.showAll = true;
+        this.messageShown = true;
+        this.checkEverything();
+        this.touchAllRows();
+        this.refresh();
+        return this.firstProblem();
+    }
+    /* Inside */
+    indexInputs() {
+        this.inputByName = new Map(this.options.inputs.map(params => [params.name, params]));
+    }
+    newKey() {
+        return "new:" + ++this.seq;
+    }
+    /** Each input's value in the type the input reports, and the other fields of the row as they came. */
+    normalizeRow(row) {
+        const values = { ...row };
+        for (const params of this.options.inputs) {
+            // A hidden input's value stays in the data as it was.
+            if (params.hidden)
+                continue;
+            values[params.name] = normalizeInputValue(params, row[params.name]);
+        }
+        return values;
+    }
+    load(rows) {
+        const { rowKey } = this.options;
+        const used = new Set();
+        this.entries = rows.map(row => {
+            const id = rowKey ? row[rowKey] : undefined;
+            let key = id === undefined || id === null || id === "" ? "" : "id:" + String(id);
+            if (!key || used.has(key))
+                key = this.newKey();
+            used.add(key);
+            return { key, values: this.normalizeRow(row) };
+        });
+        // Saved data with a radio on in more than one row keeps the first.
+        for (const params of this.options.inputs) {
+            if (params.type !== "radio")
+                continue;
+            let found = false;
+            for (const entry of this.entries) {
+                if (entry.values[params.name] !== true)
+                    continue;
+                if (found)
+                    entry.values = { ...entry.values, [params.name]: false };
+                found = true;
+            }
+        }
+        this.revisions.clear();
+        this.afterStructure();
+        this.checkEverything();
+    }
+    afterStructure() {
+        this.positions = new Map(this.entries.map((entry, index) => [entry.key, index]));
+        this.valueCache = null;
+        this.keysCache = null;
+    }
+    /** Drops what the store knew about a removed row. */
+    forget(key) {
+        this.invalidCells -= this.invalidByRow.get(key) ?? 0;
+        this.invalidByRow.delete(key);
+        this.ruleErrors.delete(key);
+        this.duplicateErrors.delete(key);
+        this.touched.delete(key);
+        this.revisions.delete(key);
+    }
+    write(key, name, value, source, changed, depth) {
+        const index = this.positions.get(key);
+        const entry = index === undefined ? undefined : this.entries[index];
+        if (!entry || index === undefined)
+            return;
+        const params = this.inputByName.get(name);
+        const next = params && source === "code" ? normalizeInputValue(params, value) : value;
+        if (inputValuesEqual(entry.values[name], next))
+            return;
+        const shownBefore = this.shownError(key, name);
+        entry.values = { ...entry.values, [name]: next };
+        this.valueCache = null;
+        if (source === "code") {
+            // The input shows its value from when it mounted; a new revision mounts it again with this one.
+            let names = this.revisions.get(key);
+            if (!names)
+                this.revisions.set(key, (names = new Map()));
+            names.set(name, (names.get(name) ?? 0) + 1);
+            changed.add(key);
+        }
+        if (params) {
+            this.checkCell(entry, params);
+            if (params.type === "radio") {
+                // The row shows which radios it has on (a section's "Primary" tag), so it renders again, typed or not.
+                changed.add(key);
+                if (next === true)
+                    this.radioOn(entry, name, changed);
+            }
+        }
+        if (this.options.unique?.includes(name))
+            this.dirtyUnique.add(name);
+        if (this.shownError(key, name) !== shownBefore)
+            changed.add(key);
+        // Values the row derives from the one the user changed, such as an amount from a quantity and a rate.
+        if (source === "input" && depth === 0 && this.options.onRowChange) {
+            const patch = this.options.onRowChange(entry.values, name, index);
+            if (patch) {
+                for (const [field, fieldValue] of Object.entries(patch)) {
+                    if (field !== name)
+                        this.write(key, field, fieldValue, "code", changed, depth + 1);
+                }
+            }
+        }
+    }
+    /** Turns a radio off in every row but this one. */
+    radioOn(entry, name, changed) {
+        for (const other of this.entries) {
+            if (other !== entry && other.values[name] === true)
+                this.write(other.key, name, false, "code", changed, 1);
+        }
+    }
+    /** Checks one value against its input's rules. */
+    checkCell(entry, params) {
+        const message = params.hidden ? null : validateInput(params, entry.values[params.name], this.options.context);
+        this.setError(this.ruleErrors, entry.key, params.name, message);
+    }
+    setError(map, key, name, message) {
+        const current = map.get(key);
+        if ((current?.get(name) ?? null) === message)
+            return;
+        const had = this.isInvalid(key, name);
+        if (message) {
+            if (current)
+                current.set(name, message);
+            else
+                map.set(key, new Map([[name, message]]));
+        }
+        else if (current) {
+            current.delete(name);
+            if (!current.size)
+                map.delete(key);
+        }
+        const has = this.isInvalid(key, name);
+        if (has !== had) {
+            const delta = has ? 1 : -1;
+            this.invalidCells += delta;
+            const count = (this.invalidByRow.get(key) ?? 0) + delta;
+            if (count > 0)
+                this.invalidByRow.set(key, count);
+            else
+                this.invalidByRow.delete(key);
+        }
+    }
+    isInvalid(key, name) {
+        return Boolean(this.ruleErrors.get(key)?.has(name) || this.duplicateErrors.get(key)?.has(name));
+    }
+    markUniqueDirty() {
+        for (const name of this.options.unique ?? [])
+            this.dirtyUnique.add(name);
+    }
+    /**
+     * Finds repeated values in one `unique` input. Every row with the value gets a message, so the one just edited says
+     * so: the first row names the second, the others name the first.
+     */
+    checkUnique(name, changed) {
+        const params = this.inputByName.get(name);
+        const found = new Map();
+        const groups = new Map();
+        this.entries.forEach((entry, index) => {
+            const value = uniqueKeyOf(entry.values[name]);
+            if (value === null)
+                return;
+            const group = groups.get(value);
+            if (group)
+                group.push(index);
+            else
+                groups.set(value, [index]);
+        });
+        for (const group of groups.values()) {
+            if (group.length < 2)
+                continue;
+            for (const index of group) {
+                const entry = this.entries[index];
+                // A value that breaks its own rules says so first.
+                if (this.ruleErrors.get(entry.key)?.has(name))
+                    continue;
+                found.set(entry.key, duplicateMessageFor(params, name, index === group[0] ? group[1] : group[0], this.names.item));
+            }
+        }
+        const keys = new Set([...found.keys()]);
+        for (const [key, names] of this.duplicateErrors)
+            if (names.has(name))
+                keys.add(key);
+        for (const key of keys) {
+            const before = this.shownError(key, name);
+            this.setError(this.duplicateErrors, key, name, found.get(key) ?? null);
+            if (this.shownError(key, name) !== before)
+                changed.add(key);
+        }
+    }
+    checkEverything() {
+        this.ruleErrors.clear();
+        this.duplicateErrors.clear();
+        this.invalidByRow.clear();
+        this.invalidCells = 0;
+        for (const entry of this.entries)
+            for (const params of this.options.inputs)
+                this.checkCell(entry, params);
+        const ignored = new Set();
+        for (const name of this.options.unique ?? [])
+            this.checkUnique(name, ignored);
+        this.dirtyUnique.clear();
+        this.message = rowsMessage(this.getValue(), this.options, this.options.fallbackItem);
+    }
+    /** After a change: repeated values, the rows' own message, the rows to render again, and value listeners. */
+    settle(changed) {
+        for (const name of this.dirtyUnique)
+            this.checkUnique(name, changed);
+        this.dirtyUnique.clear();
+        this.message = rowsMessage(this.getValue(), this.options, this.options.fallbackItem);
+        for (const key of changed)
+            this.bump(key);
+        this.refresh();
+        this.emit();
+    }
+    bump(key) {
+        this.versions.set(key, (this.versions.get(key) ?? 0) + 1);
+        const listeners = this.rowListeners.get(key);
+        if (listeners)
+            for (const listener of [...listeners])
+                listener();
+    }
+    touchAllRows() {
+        for (const entry of this.entries)
+            this.bump(entry.key);
+    }
+    emit() {
+        const rows = this.getValue();
+        this.lastValue = rows;
+        for (const listener of [...this.valueListeners])
+            listener(rows);
+    }
+    buildSnapshot() {
+        return {
+            keys: (this.keysCache ??= this.entries.map(entry => entry.key)),
+            generation: this.generation,
+            message: this.messageShown || this.showAll ? this.message : null,
+            showAll: this.showAll,
+            invalidRows: this.showAll ? this.invalidByRow.size : 0,
+            removed: this.removed ? { index: this.removed.index } : null,
+        };
+    }
+    /** Replaces the snapshot when what it holds changed, and tells structure listeners. */
+    refresh(force = false) {
+        const next = this.buildSnapshot();
+        const current = this.snapshot;
+        const sameKeys = current && (current.keys === next.keys || (current.keys.length === next.keys.length && current.keys.every((key, index) => key === next.keys[index])));
+        if (!force &&
+            current &&
+            sameKeys &&
+            current.generation === next.generation &&
+            current.message === next.message &&
+            current.showAll === next.showAll &&
+            current.invalidRows === next.invalidRows &&
+            current.removed?.index === next.removed?.index) {
+            return;
+        }
+        this.snapshot = sameKeys && current ? { ...next, keys: current.keys } : next;
+        for (const listener of [...this.listeners])
+            listener();
+    }
+}

package/dist/Helpers/TableColumns.d.ts

@@ -0,0 +1,40 @@
+export interface ColumnDragOptions {
+    /** The heading pressed. */
+    heading: HTMLElement;
+    /** The box the columns scroll in, scrolled while the pointer is near its edges. */
+    scroller?: HTMLElement | null;
+    /** The table, which carries the attribute that changes the cursor while a drag runs. */
+    root?: HTMLElement | null;
+    /** The move the user made: `key` goes just before `beforeKey`, or to the end when it is null. */
+    onDrop: (key: string, beforeKey: string | null) => void;
+}
+/**
+ * Drags a column heading to another place among the headings pinned to the same side. A line shows where it will land;
+ * Esc puts it back. Returns a function that ends the drag.
+ */
+export declare function startColumnDrag(event: PointerEvent, { heading, scroller, root, onDrop }: ColumnDragOptions): () => void;
+export interface ColumnResizeOptions {
+    /** The heading whose edge was pressed. */
+    heading: HTMLElement;
+    /** The table, which carries the attribute that changes the cursor while the drag runs. */
+    root?: HTMLElement | null;
+    /** Before the first move: the table writes the width of every column, so only this one changes. */
+    onStart?: () => void;
+    /** On every move, with the new width in pixels. The table writes it straight to the column, with no render. */
+    onResize: (width: number) => void;
+    /** The width to keep, once the drag ends. Esc sends the width it started at. */
+    onCommit: (width: number) => void;
+    /** Narrowest the column gets. Default 56. */
+    min?: number;
+}
+/** Drags the edge of a heading to change its width. Returns a function that ends the drag. */
+export declare function startColumnResize(event: PointerEvent, { heading, root, onStart, onResize, onCommit, min }: ColumnResizeOptions): () => void;
+/**
+ * The width a column needs for its widest value and its heading, at most `max`. Used by "Fit to content" in a heading's
+ * menu and by a double-click on its edge.
+ *
+ * A cell's value is a block that fills its column and cuts long text with an ellipsis, so its own width says nothing
+ * about the text inside it. Each one is measured at `max-content` instead, with the cap taken off: every cell is set,
+ * then every cell is read, so the browser lays the table out twice, not once per row.
+ */
+export declare function fitColumnWidth(table: HTMLElement, key: string, max?: number): number;