@toolbox-web/grid 1.16.1 → 1.18.0

package/lib/plugins/multi-sort/MultiSortPlugin.d.ts

@@ -89,6 +89,10 @@ export declare class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {
     /** @internal */
     protected get defaultConfig(): Partial<MultiSortConfig>;
     private sortModel;
+    /** Cached sort result — returned as-is while a row edit is active to prevent
+     *  the edited row from jumping to a new sorted position mid-edit. Row data
+     *  mutations are still visible because the array holds shared object refs. */
+    private cachedSortResult;
     /** @internal */
     detach(): void;
     /** @internal */

package/lib/plugins/multi-sort/MultiSortPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSortPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/multi-sort/MultiSortPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,eAAe;IAC5B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAK/D;IAGD,OAAO,CAAC,SAAS,CAAmB;IAKpC,gBAAgB;IACP,MAAM,IAAI,IAAI;IAOvB,gBAAgB;IACP,WAAW,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE;IAOzD,gBAAgB;IACP,aAAa,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAexD,gBAAgB;IACP,WAAW,IAAI,IAAI;IAiE5B;;;OAGG;IACH,YAAY,IAAI,SAAS,EAAE;IAI3B;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI;IAMtC;;OAEG;IACH,SAAS,IAAI,IAAI;IAMjB;;;;OAIG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAI/C;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS;IAO3D;;;OAGG;IACM,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS;IAaxE;;;;OAIG;IACM,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI;CA2BnE"}
+{"version":3,"file":"MultiSortPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/multi-sort/MultiSortPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,eAAe;IAC5B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAK/D;IAGD,OAAO,CAAC,SAAS,CAAmB;IACpC;;kFAE8E;IAC9E,OAAO,CAAC,gBAAgB,CAA0B;IAKlD,gBAAgB;IACP,MAAM,IAAI,IAAI;IAQvB,gBAAgB;IACP,WAAW,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE;IAyBzD,gBAAgB;IACP,aAAa,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAgBxD,gBAAgB;IACP,WAAW,IAAI,IAAI;IAoE5B;;;OAGG;IACH,YAAY,IAAI,SAAS,EAAE;IAI3B;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI;IAOtC;;OAEG;IACH,SAAS,IAAI,IAAI;IAOjB;;;;OAIG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAI/C;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS;IAO3D;;;OAGG;IACM,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS;IAaxE;;;;OAIG;IACM,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI;CA2BnE"}

package/lib/plugins/multi-sort/index.js

@@ -1,4 +1,4 @@
-const h = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', x = {
+const f = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', S = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -7,8 +7,8 @@ const h = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: h,
-  filterActive: h,
+  filter: f,
+  filterActive: f,
   print: "🖨️"
 };
 class C {
@@ -146,8 +146,8 @@ class C {
    * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
    */
   emitCancelable(t, e) {
-    const o = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
-    return this.grid?.dispatchEvent?.(o), o.defaultPrevented;
+    const n = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(n), n.defaultPrevented;
   }
   // =========================================================================
   // Event Bus - Plugin-to-Plugin Communication
@@ -301,7 +301,7 @@ class C {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...x, ...t };
+    return { ...S, ...t };
   }
   // #region Animation Helpers
   /**
@@ -342,8 +342,8 @@ class C {
   get animationDuration() {
     const t = this.gridElement;
     if (t) {
-      const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), o = parseInt(e, 10);
-      if (!isNaN(o)) return o;
+      const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), n = parseInt(e, 10);
+      if (!isNaN(n)) return n;
     }
     return 200;
   }
@@ -377,29 +377,29 @@ class C {
   }
   // #endregion
 }
-function v(r, t, e) {
-  return t.length ? [...r].sort((o, i) => {
-    for (const n of t) {
-      const d = e.find((c) => c.field === n.field)?.sortComparator ?? M, u = o[n.field], g = i[n.field], s = d(u, g, o, i);
-      if (s !== 0)
-        return n.direction === "asc" ? s : -s;
+function v(i, t, e) {
+  return t.length ? [...i].sort((n, r) => {
+    for (const s of t) {
+      const d = e.find((u) => u.field === s.field)?.sortComparator ?? x, g = n[s.field], c = r[s.field], o = d(g, c, n, r);
+      if (o !== 0)
+        return s.direction === "asc" ? o : -o;
     }
     return 0;
-  }) : [...r];
+  }) : [...i];
 }
-function M(r, t) {
-  return r == null && t == null ? 0 : r == null ? 1 : t == null ? -1 : typeof r == "number" && typeof t == "number" ? r - t : r instanceof Date && t instanceof Date ? r.getTime() - t.getTime() : typeof r == "boolean" && typeof t == "boolean" ? r === t ? 0 : r ? -1 : 1 : String(r).localeCompare(String(t));
+function x(i, t) {
+  return i == null && t == null ? 0 : i == null ? 1 : t == null ? -1 : typeof i == "number" && typeof t == "number" ? i - t : i instanceof Date && t instanceof Date ? i.getTime() - t.getTime() : typeof i == "boolean" && typeof t == "boolean" ? i === t ? 0 : i ? -1 : 1 : String(i).localeCompare(String(t));
 }
-function S(r, t, e, o) {
-  const i = r.find((n) => n.field === t);
-  return e ? i ? i.direction === "asc" ? r.map((n) => n.field === t ? { ...n, direction: "desc" } : n) : r.filter((n) => n.field !== t) : r.length < o ? [...r, { field: t, direction: "asc" }] : r : i?.direction === "asc" ? [{ field: t, direction: "desc" }] : i?.direction === "desc" ? [] : [{ field: t, direction: "asc" }];
+function M(i, t, e, n) {
+  const r = i.find((s) => s.field === t);
+  return e ? r ? r.direction === "asc" ? i.map((s) => s.field === t ? { ...s, direction: "desc" } : s) : i.filter((s) => s.field !== t) : i.length < n ? [...i, { field: t, direction: "asc" }] : i : r?.direction === "asc" ? [{ field: t, direction: "desc" }] : r?.direction === "desc" ? [] : [{ field: t, direction: "asc" }];
 }
-function m(r, t) {
-  const e = r.findIndex((o) => o.field === t);
+function m(i, t) {
+  const e = i.findIndex((n) => n.field === t);
   return e >= 0 ? e + 1 : void 0;
 }
-function p(r, t) {
-  return r.find((e) => e.field === t)?.direction;
+function p(i, t) {
+  return i.find((e) => e.field === t)?.direction;
 }
 const w = '@layer tbw-plugins{.header-cell[data-sort=asc]:after{content:"↑";margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.sort-indicator{margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.sort-index{font-size:var(--tbw-font-size-2xs, .7em);background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:var(--tbw-multi-sort-badge-size, 1em);height:var(--tbw-multi-sort-badge-size, 1em);display:inline-flex;align-items:center;justify-content:center;margin-left:var(--tbw-spacing-xs, .125em);font-weight:600}}';
 class y extends C {
@@ -416,44 +416,54 @@ class y extends C {
   }
   // #region Internal State
   sortModel = [];
+  /** Cached sort result — returned as-is while a row edit is active to prevent
+   *  the edited row from jumping to a new sorted position mid-edit. Row data
+   *  mutations are still visible because the array holds shared object refs. */
+  cachedSortResult = null;
   // #endregion
   // #region Lifecycle
   /** @internal */
   detach() {
-    this.sortModel = [];
+    this.sortModel = [], this.cachedSortResult = null;
   }
   // #endregion
   // #region Hooks
   /** @internal */
   processRows(t) {
-    return this.sortModel.length === 0 ? [...t] : v([...t], this.sortModel, [...this.columns]);
+    if (this.sortModel.length === 0)
+      return this.cachedSortResult = null, [...t];
+    const e = this.gridElement;
+    if (e && !e._isGridEditMode && typeof e._activeEditRows == "number" && e._activeEditRows !== -1 && this.cachedSortResult && this.cachedSortResult.length === t.length)
+      return [...this.cachedSortResult];
+    const n = v([...t], this.sortModel, [...this.columns]);
+    return this.cachedSortResult = n, n;
   }
   /** @internal */
   onHeaderClick(t) {
-    if (!this.columns.find((n) => n.field === t.field)?.sortable) return !1;
-    const o = t.originalEvent.shiftKey, i = this.config.maxSortColumns ?? 3;
-    return this.sortModel = S(this.sortModel, t.field, o, i), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
+    if (!this.columns.find((s) => s.field === t.field)?.sortable) return !1;
+    const n = t.originalEvent.shiftKey, r = this.config.maxSortColumns ?? 3;
+    return this.sortModel = M(this.sortModel, t.field, n, r), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), this.grid?.requestStateChange?.(), !0;
   }
   /** @internal */
   afterRender() {
     const t = this.gridElement;
     if (!t) return;
     const e = this.config.showSortIndex !== !1;
-    t.querySelectorAll(".header-row .cell[data-field]").forEach((i) => {
-      const n = i.getAttribute("data-field");
-      if (!n) return;
-      const a = m(this.sortModel, n), d = p(this.sortModel, n);
-      if (i.querySelector(".sort-index")?.remove(), d) {
-        i.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), i.setAttribute("data-sort", d);
-        const s = document.createElement("span");
-        s.className = "sort-indicator", this.setIcon(s, this.resolveIcon(d === "asc" ? "sortAsc" : "sortDesc"));
-        const c = i.querySelector(".tbw-filter-btn"), b = i.querySelector(".resize-handle"), f = c ?? b;
-        if (f ? i.insertBefore(s, f) : i.appendChild(s), e && this.sortModel.length > 1 && a !== void 0) {
+    t.querySelectorAll(".header-row .cell[data-field]").forEach((r) => {
+      const s = r.getAttribute("data-field");
+      if (!s) return;
+      const a = m(this.sortModel, s), d = p(this.sortModel, s);
+      if (r.querySelector(".sort-index")?.remove(), d) {
+        r.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), r.setAttribute("data-sort", d);
+        const o = document.createElement("span");
+        o.className = "sort-indicator", this.setIcon(o, this.resolveIcon(d === "asc" ? "sortAsc" : "sortDesc"));
+        const u = r.querySelector(".tbw-filter-btn"), b = r.querySelector(".resize-handle"), h = u ?? b;
+        if (h ? r.insertBefore(o, h) : r.appendChild(o), e && this.sortModel.length > 1 && a !== void 0) {
           const l = document.createElement("span");
-          l.className = "sort-index", l.textContent = String(a), s.nextSibling ? i.insertBefore(l, s.nextSibling) : i.appendChild(l);
+          l.className = "sort-index", l.textContent = String(a), o.nextSibling ? r.insertBefore(l, o.nextSibling) : r.appendChild(l);
         }
       } else
-        i.removeAttribute("data-sort");
+        r.removeAttribute("data-sort"), r.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove();
     });
   }
   // #endregion
@@ -470,13 +480,13 @@ class y extends C {
    * @param model - New sort model to apply
    */
   setSortModel(t) {
-    this.sortModel = [...t], this.emit("sort-change", { sortModel: [...t] }), this.requestRender();
+    this.sortModel = [...t], this.emit("sort-change", { sortModel: [...t] }), this.requestRender(), this.grid?.requestStateChange?.();
   }
   /**
    * Clear all sorting.
    */
   clearSort() {
-    this.sortModel = [], this.emit("sort-change", { sortModel: [] }), this.requestRender();
+    this.sortModel = [], this.emit("sort-change", { sortModel: [] }), this.requestRender(), this.grid?.requestStateChange?.();
   }
   /**
    * Get the sort index (1-based) for a specific field.
@@ -501,7 +511,7 @@ class y extends C {
    * @internal
    */
   getColumnState(t) {
-    const e = this.sortModel.findIndex((i) => i.field === t);
+    const e = this.sortModel.findIndex((r) => r.field === t);
     return e === -1 ? void 0 : {
       sort: {
         direction: this.sortModel[e].direction,
@@ -516,14 +526,14 @@ class y extends C {
    */
   applyColumnState(t, e) {
     if (!e.sort) {
-      this.sortModel = this.sortModel.filter((n) => n.field !== t);
+      this.sortModel = this.sortModel.filter((s) => s.field !== t);
       return;
     }
-    const o = this.sortModel.findIndex((n) => n.field === t), i = {
+    const n = this.sortModel.findIndex((s) => s.field === t), r = {
       field: t,
       direction: e.sort.direction
     };
-    o !== -1 ? this.sortModel[o] = i : this.sortModel.splice(e.sort.priority, 0, i);
+    n !== -1 ? this.sortModel[n] = r : this.sortModel.splice(e.sort.priority, 0, r);
   }
   // #endregion
 }