@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/editing/createSaveCellEdit.js

@@ -0,0 +1,113 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import getEventError from './getEventError.js';
+import warnMissingEvent from './warnMissingEvent.js';
+function setEntry({ api, id, entry }) {
+    api.editing.setOverlay((previous)=>{
+        const next = new Map(previous);
+        next.set(id, entry);
+        return next;
+    });
+}
+function findDataRow({ api, rowKey }) {
+    return api.editing.getDataByKey().get(String(rowKey));
+}
+// Table's edit lifecycle (D8). The new value shows at once, as an overlay entry keyed by row key
+// and column key (never written into `data`), marked saving while onCellEdit runs. The event
+// result decides: on success the entry stays until the row changes in `data` (the app's refetch
+// or SetState lands), then it is dropped; on failure the value reverts and the cell shows an
+// error marker with the action's message. A later edit of the same cell supersedes an earlier
+// one still saving: the earlier result is ignored.
+function createSaveCellEdit(api) {
+    return async function saveCellEdit({ row, rowKey, spec, value, previous }) {
+        const id = `${String(rowKey)}\u0000${spec.key}`;
+        const token = {};
+        const base = {
+            colKey: spec.key,
+            field: spec.field,
+            rowKey: String(rowKey),
+            source: api.editing.sources.get(row) ?? row,
+            token,
+            value
+        };
+        if (!api.events.onCellEdit) {
+            warnMissingEvent({
+                api,
+                name: 'onCellEdit',
+                what: 'cell edits'
+            });
+            setEntry({
+                api,
+                id,
+                entry: {
+                    ...base,
+                    hasValue: true,
+                    status: 'saved'
+                }
+            });
+            return;
+        }
+        setEntry({
+            api,
+            id,
+            entry: {
+                ...base,
+                hasValue: true,
+                status: 'saving'
+            }
+        });
+        const result = await api.methods.triggerEvent({
+            name: 'onCellEdit',
+            event: {
+                row,
+                rowKey,
+                column: {
+                    key: spec.key,
+                    field: spec.field
+                },
+                value,
+                previous
+            }
+        });
+        const message = getEventError(result);
+        const settledSource = findDataRow({
+            api,
+            rowKey
+        });
+        api.editing.setOverlay((current)=>{
+            const entry = current.get(id);
+            if (!entry || entry.token !== token) return current;
+            const next = new Map(current);
+            if (message !== null) {
+                next.set(id, {
+                    ...entry,
+                    hasValue: false,
+                    message,
+                    status: 'error'
+                });
+            } else if (settledSource !== entry.source) {
+                // The data already changed while the event ran (the event wrote it): it holds the edit.
+                next.delete(id);
+            } else {
+                next.set(id, {
+                    ...entry,
+                    status: 'saved'
+                });
+            }
+            return next;
+        });
+    };
+}
+export default createSaveCellEdit;

package/dist/features/editing/createSaveRowMove.js

@@ -0,0 +1,90 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import getEventError from './getEventError.js';
+import warnMissingEvent from './warnMissingEvent.js';
+// Keeps the positions of an earlier move that still shows (saving, or saved on the same data),
+// so two quick moves before a refetch both stay in place.
+function mergePositions({ previous, data, positions }) {
+    if (!previous?.hasValue) return positions;
+    if (previous.status !== 'saving' && previous.source !== data) return positions;
+    return {
+        ...previous.positions,
+        ...positions
+    };
+}
+// Table's row move lifecycle, the same cycle as a cell edit: the rows reorder at once (an
+// overlay over `data`) with a saving marker on the moved row's handle while onRowMove runs; on
+// success the order stays until `data` changes, on failure it reverts and the handle shows the
+// error message. The event carries everything a save needs: the neighbours' keys, and with a
+// position field the new position (normally of the moved row only).
+function createSaveRowMove(api) {
+    return async function saveRowMove({ move, row }) {
+        const { editing } = api;
+        const token = {};
+        const source = editing.data;
+        editing.setMoveOverlay((previous)=>({
+                hasValue: true,
+                message: null,
+                order: move.order,
+                positions: mergePositions({
+                    previous,
+                    data: source,
+                    positions: move.positions ?? {}
+                }),
+                rowKey: String(move.rowKey),
+                source,
+                status: api.events.onRowMove ? 'saving' : 'saved',
+                token
+            }));
+        if (!api.events.onRowMove) {
+            warnMissingEvent({
+                api,
+                name: 'onRowMove',
+                what: 'row moves'
+            });
+            return;
+        }
+        const result = await api.methods.triggerEvent({
+            name: 'onRowMove',
+            event: {
+                row,
+                rowKey: move.rowKey,
+                fromIndex: move.fromIndex,
+                toIndex: move.toIndex,
+                beforeKey: move.beforeKey,
+                afterKey: move.afterKey,
+                position: move.position,
+                positions: move.positions
+            }
+        });
+        const message = getEventError(result);
+        editing.setMoveOverlay((current)=>{
+            if (!current || current.token !== token) return current;
+            if (message !== null) return {
+                ...current,
+                hasValue: false,
+                message,
+                status: 'error'
+            };
+            // The data already changed while the event ran (the event wrote it): it holds the move.
+            if (editing.data !== current.source) return null;
+            return {
+                ...current,
+                status: 'saved'
+            };
+        });
+    };
+}
+export default createSaveRowMove;

package/dist/features/editing/createStartEdit.js

@@ -0,0 +1,57 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import isCellEditable from './isCellEditable.js';
+const SEEDED_KINDS = new Set([
+    'text',
+    'number',
+    'select',
+    'multiSelect'
+]);
+let sessionCounter = 0;
+// Opens the one editor (tier-1 lazy mount) on a cell addressed by row id and column key. A cell
+// already editing elsewhere commits first; when that commit fails validation, its editor stays
+// and the new one does not open. Returns whether the editor opened.
+function createStartEdit(api) {
+    return function startEdit({ rowId, colKey, seed }) {
+        const { layer, specs } = api.editing;
+        if (!layer) return false;
+        const current = layer.getSession();
+        if (current) {
+            if (current.rowId === rowId && current.colKey === colKey) return true;
+            if (!api.actions.commitEdit({})) return false;
+        }
+        const row = api.table.getRow(rowId, true);
+        const col = api.layout.byKey.get(colKey);
+        if (!row || !col || col.special) return false;
+        const spec = specs.get(colKey);
+        if (!isCellEditable({
+            spec,
+            row: row.original,
+            value: col.accessor(row.original)
+        })) {
+            return false;
+        }
+        sessionCounter += 1;
+        layer.setSession({
+            colKey,
+            error: null,
+            id: sessionCounter,
+            rowId,
+            seed: SEEDED_KINDS.has(spec.kind) ? seed : undefined
+        });
+        return true;
+    };
+}
+export default createStartEdit;

package/dist/features/editing/createStepHistory.js

@@ -0,0 +1,33 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // Ctrl/Cmd+Z and Shift+Ctrl/Cmd+Z (or Ctrl+Y) on TableInput: restores the changeset before (or
+// after) the last edit, add, delete, move or paste, as one write with cause `undo` / `redo`.
+function createStepHistory(api) {
+    return function stepHistory({ direction }) {
+        const { editing } = api;
+        const current = editing.changes;
+        const changes = direction === 'undo' ? editing.undo.undo(current) : editing.undo.redo(current);
+        if (changes === null) return false;
+        api.actions.cancelEdit({
+            refocus: false
+        });
+        return api.actions.writeChanges({
+            changes,
+            cause: direction,
+            record: false
+        });
+    };
+}
+export default createStepHistory;

package/dist/features/editing/createUndoStack.js

@@ -0,0 +1,67 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // A bounded undo history of whole rows arrays. Snapshots are cheap: writes are immutable, so
+// consecutive snapshots share every row they did not change. An entry only applies while the
+// value is still the one it produced; a value changed from outside (SetState, Reset, a refetch)
+// makes the history stale, and it is cleared rather than replayed over the new value.
+function createUndoStack({ limit = 100 } = {}) {
+    let past = [];
+    let future = [];
+    function clear() {
+        past = [];
+        future = [];
+    }
+    function push({ before, after }) {
+        past.push({
+            before,
+            after
+        });
+        if (past.length > limit) past = past.slice(past.length - limit);
+        future = [];
+    }
+    function undo(current) {
+        const entry = past.pop();
+        if (!entry) return null;
+        if (entry.after !== current) {
+            clear();
+            return null;
+        }
+        future.push(entry);
+        return entry.before;
+    }
+    function redo(current) {
+        const entry = future.pop();
+        if (!entry) return null;
+        if (entry.before !== current) {
+            clear();
+            return null;
+        }
+        past.push(entry);
+        return entry.after;
+    }
+    return {
+        clear,
+        push,
+        redo,
+        undo,
+        get size () {
+            return {
+                past: past.length,
+                future: future.length
+            };
+        }
+    };
+}
+export default createUndoStack;

package/dist/features/editing/createValueStore.js

@@ -0,0 +1,34 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // A one-value store for useSyncExternalStore: memoised row cells that must follow table-level
+// state (the drag handles' disabled state while sorted) subscribe to it, so only they re-render
+// when it changes, not every row.
+function createValueStore(initial) {
+    let value = initial;
+    const listeners = new Set();
+    return {
+        get: ()=>value,
+        set (next) {
+            if (next === value) return;
+            value = next;
+            listeners.forEach((listener)=>listener());
+        },
+        subscribe (listener) {
+            listeners.add(listener);
+            return ()=>listeners.delete(listener);
+        }
+    };
+}
+export default createValueStore;

package/dist/features/editing/createWriteCell.js

@@ -0,0 +1,34 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import setChangeField from './setChangeField.js';
+// A TableInput cell edit: the field goes into the changeset under the row's key.
+function createWriteCell(api) {
+    return function writeCell({ rowKey, field, value }) {
+        const { editing } = api;
+        const changes = setChangeField({
+            changes: editing.changes,
+            rowKey,
+            field,
+            value,
+            dataRow: editing.getDataByKey().get(String(rowKey))
+        });
+        return api.actions.writeChanges({
+            changes,
+            cause: 'edit',
+            rowKey
+        });
+    };
+}
+export default createWriteCell;

package/dist/features/editing/createWriteChanges.js

@@ -0,0 +1,43 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // TableInput's one write path: a new changeset becomes the block value with one setValue (the
+// changeset is small: only what changed, never the rows), then onChange { value, cause, rowKey }
+// fires. It is kept as the latest value at once, so a second write before the engine re-renders
+// (Tab through cells) builds on the first. `record` adds the write to the undo history; undo
+// and redo themselves do not.
+function createWriteChanges(api) {
+    return function writeChanges({ changes, cause, rowKey, record = true, event = {} }) {
+        const { editing } = api;
+        const before = editing.changes;
+        if (changes === before) return false;
+        editing.changes = changes;
+        if (record) editing.undo.push({
+            before,
+            after: changes
+        });
+        editing.input.methods.setValue(changes);
+        editing.input.methods.triggerEvent({
+            name: 'onChange',
+            event: {
+                value: changes,
+                cause,
+                rowKey,
+                ...event
+            }
+        });
+        return true;
+    };
+}
+export default createWriteChanges;

package/dist/features/editing/editing.css

@@ -0,0 +1,223 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+/* Editing styles: the cell editor and status markers (portalled into cells), TableInput's row
+   controls, drop indicator and add-row row. Colours are antd tokens, like the engine's. */
+
+@layer components {
+  .lf-table-editor {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    padding: 0 2px;
+    background: var(--lf-bg);
+    white-space: normal;
+  }
+
+  .lf-table-editor > * {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* antd fades a searchable select's value while it is open; the editor shows the current value
+     as the value until something is typed. */
+  .lf-table-editor
+    .ant-select-open
+    .ant-select-content-has-value:not(.ant-select-content-has-search-value) {
+    opacity: 1;
+  }
+
+  .lf-table-editor-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    max-width: 100%;
+    margin-inline-end: var(--ant-margin-xxs, 4px);
+  }
+
+  .lf-table-editor-tag > .lf-table-tag {
+    padding: 2px var(--ant-padding-xxs, 4px);
+  }
+
+  .lf-table-editor-tag-remove {
+    flex: none;
+    padding: 0 1px;
+    color: var(--ant-color-text-tertiary, rgba(0, 0, 0, 0.45));
+    font: inherit;
+    line-height: 1;
+    background: transparent;
+    border: 0;
+    border-radius: var(--ant-border-radius-sm, 4px);
+    cursor: pointer;
+  }
+
+  .lf-table-editor-tag-remove:hover {
+    color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
+    background: var(--ant-color-fill-secondary, rgba(0, 0, 0, 0.06));
+  }
+
+  .lf-table-editor > .ant-switch,
+  .lf-table-editor > .ant-rate {
+    flex: none;
+    margin-inline-start: var(--ant-padding-xs, 8px);
+  }
+
+  .lf-table-edit-marker {
+    position: absolute;
+    z-index: 1;
+    pointer-events: auto;
+  }
+
+  .lf-table-edit-marker[data-lf-edit-status='saving'] {
+    top: 50%;
+    inset-inline-end: 4px;
+    width: 10px;
+    height: 10px;
+    margin-top: -5px;
+    border: 2px solid var(--ant-color-primary, #1677ff);
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    animation: lf-table-edit-spin 0.8s linear infinite;
+  }
+
+  .lf-table-edit-marker[data-lf-edit-status='error'],
+  .lf-table-edit-marker[data-lf-edit-status='invalid'] {
+    top: 0;
+    inset-inline-end: 0;
+    width: 10px;
+    height: 10px;
+    background: linear-gradient(
+      to bottom left,
+      var(--ant-color-error, #ff4d4f) 50%,
+      transparent 50%
+    );
+    cursor: help;
+  }
+
+  .lf-table-gridcell:has(> [data-lf-edit-status='saving']) > .lf-table-cell {
+    opacity: 0.65;
+  }
+
+  .lf-table-gridcell:has(> [data-lf-edit-status='error']) {
+    box-shadow: inset 0 0 0 1px var(--ant-color-error-border, #ffccc7);
+  }
+
+  .lf-table-row-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .lf-table-drag-handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 24px;
+    color: var(--ant-color-text-tertiary, rgba(0, 0, 0, 0.45));
+    border-radius: var(--ant-border-radius-sm, 4px);
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .lf-table-drag-handle:hover {
+    color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
+    background: var(--ant-color-fill-secondary, rgba(0, 0, 0, 0.06));
+  }
+
+  .lf-table-drag-handle[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.35;
+  }
+
+  .lf-table-row-delete {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    color: var(--ant-color-text-tertiary, rgba(0, 0, 0, 0.45));
+    background: transparent;
+    border: 0;
+    border-radius: var(--ant-border-radius-sm, 4px);
+    cursor: pointer;
+  }
+
+  .lf-table-row-delete:hover {
+    color: var(--ant-color-error, #ff4d4f);
+    background: var(--ant-color-error-bg, #fff2f0);
+  }
+
+  .lf-table-body .lf-table-row[data-lf-dragging] {
+    opacity: 0.5;
+  }
+
+  .lf-table-drop-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 4;
+    width: 100%;
+    height: 2px;
+    background: var(--ant-color-primary, #1677ff);
+    pointer-events: none;
+  }
+
+  .lf-table-add-row {
+    display: flex;
+    align-items: center;
+    gap: var(--ant-padding-xs, 8px);
+    width: 100%;
+    height: var(--lf-row-h);
+    padding: 0 var(--ant-padding-sm, 12px);
+    color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.65));
+    font: inherit;
+    text-align: start;
+    background: var(--lf-bg);
+    border: 0;
+    border-top: 1px solid var(--lf-border);
+    cursor: pointer;
+  }
+
+  .lf-table-add-row:hover,
+  .lf-table-add-row:focus-visible {
+    color: var(--ant-color-primary, #1677ff);
+    background: var(--lf-row-hover);
+    outline: none;
+  }
+
+  .lf-table-add-row-icon {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  .lf-table-edit-notice {
+    padding: var(--ant-padding-xxs, 4px) var(--ant-padding-sm, 12px);
+    color: var(--ant-color-warning-text, #d48806);
+    font-size: var(--ant-font-size-sm, 12px);
+    background: var(--ant-color-warning-bg, #fffbe6);
+    border-top: 1px solid var(--lf-border);
+  }
+
+  @keyframes lf-table-edit-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}