flexdesk 0.6.0 → 0.6.1

package/README.md

@@ -321,6 +321,39 @@ behaves as it did in 0.4, except for these:
   to it if it is in a cascade layer, or has zero specificity and loads before
   `flexdesk.css`. A rule for the cells, the rows or the table does not.
 
+### Comparing two tables: `diff` and `createScrollLock`
+
+A side-by-side comparison is two `DataTable`s drawn from ONE aligned row list:
+the rows as they are on one side, as they were on the other, and a gap where
+a side has no row. Both options are off until you set them.
+
+```js
+import { DataTable, createScrollLock } from '@flexdesk/widgets';
+
+const lock = createScrollLock({ axis: 'y' });   // 'x', 'y' or 'both'
+const side = (host, pick) => DataTable.mount(host, {
+    headers, rows: aligned.map((r) => pick(r) ?? blank), pagination: false,
+    scrollLock: lock,
+    diff: (_row, i) => ({ status: statusOf(aligned[i], pick), cells: changedCols(aligned[i]) }),
+});
+side(left,  (r) => r.now);
+side(right, (r) => r.then);
+lock.setEnabled(false);   // scroll each side on its own; true brings them level
+```
+
+- `diff: (row, rowIdx) => {status, cells?}` draws the row
+  `twm-dt-diff twm-dt-diff--<status>`, for `added`, `removed`, `changed`,
+  `same` or `gap`, and each column index in `cells` (an array or a Set)
+  `twm-dt-diff__cell--changed`. `null` or any other status draws the row as
+  without `diff`. A `gap` row's cells are drawn empty, whatever its values and
+  `renderCell`, so the two sides keep their rows level. `updateRow` asks again.
+- `scrollLock` takes a group from `createScrollLock()`. The table's body box
+  joins it on every render and leaves on the next render and on `dispose()`.
+  Any element can join with `lock.attach(el)`, which returns its detach. A
+  box that joins starts at the group's last position, and the echo of a
+  position the lock itself wrote moves nobody back. The lock copies pixels, so
+  it lines rows up only when both sides draw rows of the same height.
+
 ### Scrollbars
 
 `installAutoScrollbars(root)` (from `@flexdesk/widgets`) replaces the browser's

package/css/base.css

@@ -686,6 +686,39 @@ body.twm-dt-col-resizing {
     color: var(--text-dim, #666);
     font-style: italic;
 }
+/* 0.6.1 `diff` — one side of a comparison. A row that is NEW on this side is
+ * green, one that is GONE on this side red, a changed row carries an amber
+ * left edge and its changed cells an amber fill, and a GAP — the place a row
+ * holds on the other side — is hatched, so the eye reads it as "nothing here"
+ * rather than as an empty row. (0,3,2) and up, for `twm-dt-cell--null`'s
+ * reason above; a selected row keeps its own colour (`:not(.selected)`). */
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--added:not(.selected) > td {
+    background: color-mix(in srgb, var(--color-success, #3fb950) 16%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed:not(.selected) > td {
+    background: color-mix(in srgb, var(--color-danger, #c74e4e) 18%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed > td {
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in srgb, var(--color-danger, #c74e4e) 70%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--added > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-success, #3fb950);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-danger, #c74e4e);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--changed > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-warning, #ff9800);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff:not(.selected) > td.twm-dt-diff__cell--changed {
+    background: color-mix(in srgb, var(--color-warning, #ff9800) 22%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--gap > td.twm-dt-diff__gap {
+    background: repeating-linear-gradient(135deg,
+        transparent 0 6px,
+        color-mix(in srgb, var(--text-muted, #888) 14%, transparent) 6px 7px);
+}
 /* `emptyState` and `setError` with no rows: the box's own words, which may
  * wrap — muted for an empty state, red for a failure, in both densities. Quiet
  * while loading — an empty table that is still loading is not empty. */

package/css/flexdesk.css

@@ -713,6 +713,39 @@ body.twm-dt-col-resizing {
     color: var(--text-dim, #666);
     font-style: italic;
 }
+/* 0.6.1 `diff` — one side of a comparison. A row that is NEW on this side is
+ * green, one that is GONE on this side red, a changed row carries an amber
+ * left edge and its changed cells an amber fill, and a GAP — the place a row
+ * holds on the other side — is hatched, so the eye reads it as "nothing here"
+ * rather than as an empty row. (0,3,2) and up, for `twm-dt-cell--null`'s
+ * reason above; a selected row keeps its own colour (`:not(.selected)`). */
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--added:not(.selected) > td {
+    background: color-mix(in srgb, var(--color-success, #3fb950) 16%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed:not(.selected) > td {
+    background: color-mix(in srgb, var(--color-danger, #c74e4e) 18%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed > td {
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in srgb, var(--color-danger, #c74e4e) 70%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--added > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-success, #3fb950);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-danger, #c74e4e);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--changed > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-warning, #ff9800);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff:not(.selected) > td.twm-dt-diff__cell--changed {
+    background: color-mix(in srgb, var(--color-warning, #ff9800) 22%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--gap > td.twm-dt-diff__gap {
+    background: repeating-linear-gradient(135deg,
+        transparent 0 6px,
+        color-mix(in srgb, var(--text-muted, #888) 14%, transparent) 6px 7px);
+}
 /* `emptyState` and `setError` with no rows: the box's own words, which may
  * wrap — muted for an empty state, red for a failure, in both densities. Quiet
  * while loading — an empty table that is still loading is not empty. */

package/dist/charts.js

@@ -39,10 +39,10 @@ import {
   setPlotlySource,
   uid,
   updateChart
-} from "./chunk-CNXP3SIN.js";
+} from "./chunk-ZMCRDOCF.js";
 import {
   createRafResizeObserver
-} from "./chunk-KH2GJTKR.js";
+} from "./chunk-IYV5JVYB.js";
 import {
   ManagedWindow
 } from "./chunk-6JSOVNID.js";

package/dist/{chunk-KH2GJTKR.js → chunk-IYV5JVYB.js}

@@ -360,6 +360,7 @@ function matchDurationFilter(ms, filterText, shown) {
 
 // src/ui/components/data_table.js
 var DEFAULT_PAGE_SIZE = 100;
+var DIFF_STATUSES = /* @__PURE__ */ new Set(["added", "removed", "changed", "same", "gap"]);
 var TYPED_COLUMNS = /* @__PURE__ */ new Set(["date", "datetime", "duration"]);
 var DESELECTING_CLICKS = /* @__PURE__ */ new WeakSet();
 var AUTO_DISPOSE = /* @__PURE__ */ new Map();
@@ -531,6 +532,8 @@ var DataTable = class {
       rowClass: null,
       rowAttrs: null,
       cellClass: null,
+      diff: null,
+      scrollLock: null,
       rowIcon: null,
       emptyState: void 0,
       nullDisplay: null,
@@ -1009,6 +1012,9 @@ var DataTable = class {
     }
     this._tableWrapEl = tableWrap;
     this.container.appendChild(this._wrapperEl);
+    if (this.config.scrollLock && typeof this.config.scrollLock.attach === "function") {
+      this._disposers.push(this.config.scrollLock.attach(tableWrap));
+    }
     if (this.config.autoDispose) autoDisposeWatch(this);
     if (prevScroll && this._state.offset === this._renderedOffset) {
       tableWrap.scrollTop = prevScroll.top;
@@ -2411,11 +2417,20 @@ var DataTable = class {
       tr.appendChild(td);
     }
     const { cellClass, nullDisplay } = this.config;
+    const diff = this._diffOf(row, globalIdx);
+    const gap = diff?.status === "gap";
+    const changedCells = diff?.cells ? diff.cells instanceof Set ? diff.cells : new Set(diff.cells) : null;
     for (let colIdx = 0; colIdx < row.length; colIdx++) {
       const td = document.createElement("td");
       td.className = this._columnTypes[colIdx] || "text";
       const value = row[colIdx];
       let handled = false;
+      if (gap) {
+        td.classList.add("twm-dt-diff__gap");
+        tr.appendChild(td);
+        continue;
+      }
+      if (changedCells?.has(colIdx)) td.classList.add("twm-dt-diff__cell--changed");
       if (this.config.renderCell) {
         handled = !!this.config.renderCell(td, value, colIdx, globalIdx, row);
         if (!handled) {
@@ -2682,6 +2697,14 @@ var DataTable = class {
     }
     return null;
   }
+  /** 0.6.1. The `diff` answer for one row, or `null` when there is none or
+   *  its status is not one this component draws. */
+  _diffOf(row, rowIdx) {
+    if (typeof this.config.diff !== "function") return null;
+    const answer = this.config.diff(row, rowIdx);
+    if (!answer || !DIFF_STATUSES.has(answer.status)) return null;
+    return answer;
+  }
   /** Everything `rowClass`, `rowAttrs` and the open mark put on a `<tr>`,
    *  taken off again first — so `updateRow` cannot leave last state's class
    *  behind. */
@@ -2696,6 +2719,11 @@ var DataTable = class {
       const added = this._addClasses(tr, rowClass(row, rowIdx));
       tr.__twmClasses = added.filter((c) => c !== "data-preview-row" && c !== "selected");
     }
+    for (const c of [...tr.classList]) {
+      if (c === "twm-dt-diff" || c.startsWith("twm-dt-diff--")) tr.classList.remove(c);
+    }
+    const diff = this._diffOf(row, rowIdx);
+    if (diff) tr.classList.add("twm-dt-diff", `twm-dt-diff--${diff.status}`);
     if (tr.__twmAttrs) {
       for (const name of tr.__twmAttrs) tr.removeAttribute(name);
       tr.__twmAttrs = null;
@@ -3699,4 +3727,4 @@ export {
   matchDurationFilter,
   DataTable
 };
-//# sourceMappingURL=chunk-KH2GJTKR.js.map
+//# sourceMappingURL=chunk-IYV5JVYB.js.map