@toolbox-web/grid 1.9.0 → 1.9.2

package/lib/plugins/responsive/index.js

@@ -66,9 +66,9 @@ function k(r) {
 }
 function H(r, t) {
   if (!r || r.indexOf("{{") === -1) return r;
-  const e = [], i = r.replace(R, (o, d) => {
-    const l = T(d, t);
-    return e.push({ expr: d.trim(), result: l }), l;
+  const e = [], i = r.replace(R, (o, c) => {
+    const l = T(c, t);
+    return e.push({ expr: c.trim(), result: l }), l;
   }), n = L(i), a = e.length && e.every((o) => o.result === "" || o.result === u);
   return /Reflect\.|\bProxy\b|ownKeys\(/.test(r) || a ? "" : n;
 }
@@ -101,10 +101,10 @@ const q = document.createElement("template");
 q.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
 function g(r, t) {
   if (r._virtualization?.enabled) {
-    const { rowHeight: s, container: o, viewportEl: d } = r._virtualization, l = o, h = d?.clientHeight ?? l?.clientHeight ?? 0;
+    const { rowHeight: s, container: o, viewportEl: c } = r._virtualization, l = o, h = c?.clientHeight ?? l?.clientHeight ?? 0;
     if (l && h > 0) {
-      const c = r._focusRow * s;
-      c < l.scrollTop ? l.scrollTop = c : c + s > l.scrollTop + h && (l.scrollTop = c - h + s);
+      const d = r._focusRow * s;
+      d < l.scrollTop ? l.scrollTop = d : d + s > l.scrollTop + h && (l.scrollTop = d - h + s);
     }
   }
   const e = r._activeEditRows !== void 0 && r._activeEditRows !== -1;
@@ -117,12 +117,12 @@ function g(r, t) {
     let o = s?.children[r._focusCol];
     if ((!o || !o.classList?.contains("cell")) && (o = s?.querySelector(`.cell[data-col="${r._focusCol}"]`) ?? s?.querySelector(".cell[data-col]")), o) {
       o.classList.add("cell-focus"), o.setAttribute("aria-selected", "true");
-      const d = r.querySelector(".tbw-scroll-area");
-      if (d && o && !e) {
+      const c = r.querySelector(".tbw-scroll-area");
+      if (c && o && !e) {
         const l = r._getHorizontalScrollOffsets?.(s ?? void 0, o) ?? { left: 0, right: 0 };
         if (!l.skipScroll) {
-          const h = o.getBoundingClientRect(), c = d.getBoundingClientRect(), f = h.left - c.left + d.scrollLeft, w = f + h.width, p = d.scrollLeft + l.left, b = d.scrollLeft + d.clientWidth - l.right;
-          f < p ? d.scrollLeft = f - l.left : w > b && (d.scrollLeft = w - d.clientWidth + l.right);
+          const h = o.getBoundingClientRect(), d = c.getBoundingClientRect(), f = h.left - d.left + c.scrollLeft, w = f + h.width, p = c.scrollLeft + l.left, b = c.scrollLeft + c.clientWidth - l.right;
+          f < p ? c.scrollLeft = f - l.left : w > b && (c.scrollLeft = w - c.clientWidth + l.right);
         }
       }
       if (r._activeEditRows !== void 0 && r._activeEditRows !== -1 && o.classList.contains("editing")) {
@@ -352,10 +352,19 @@ class P {
   }
   /**
    * Request a re-render of the grid.
+   * Uses ROWS phase - does NOT trigger processColumns hooks.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a columns re-render of the grid.
+   * Uses COLUMNS phase - triggers processColumns hooks.
+   * Use this when your plugin needs to reprocess column configuration.
+   */
+  requestColumnsRender() {
+    this.grid?.requestColumnsRender?.();
+  }
   /**
    * Request a re-render and restore focus styling afterward.
    * Use this when a plugin action (like expand/collapse) triggers a render
@@ -544,9 +553,9 @@ class B extends P {
   /** Set of column fields to show value only (no header label) */
   #l = /* @__PURE__ */ new Set();
   /** Currently active breakpoint, or null if none */
-  #c = null;
+  #d = null;
   /** Sorted breakpoints from largest to smallest */
-  #d = [];
+  #c = [];
   /**
    * Check if currently in responsive mode.
    * @returns `true` if the grid is in card layout mode
@@ -593,10 +602,10 @@ class B extends P {
    * @returns The active BreakpointConfig, or null if no breakpoint is active
    */
   getActiveBreakpoint() {
-    return this.#c;
+    return this.#d;
   }
   attach(t) {
-    super.attach(t), this.#R(), this.#u(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#d = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
+    super.attach(t), this.#R(), this.#u(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#c = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
       const i = e[0]?.contentRect.width ?? 0;
       this.#a = i, clearTimeout(this.#n), this.#n = setTimeout(() => {
         this.#m(i);
@@ -633,21 +642,21 @@ class B extends P {
     if (!e) return;
     const i = t;
     if (i.__frameworkAdapter?.parseResponsiveCardElement) {
-      const c = i.__frameworkAdapter.parseResponsiveCardElement(e);
-      c && (this.config = { ...this.config, cardRenderer: c });
+      const d = i.__frameworkAdapter.parseResponsiveCardElement(e);
+      d && (this.config = { ...this.config, cardRenderer: d });
     }
-    const n = e.getAttribute("breakpoint"), a = e.getAttribute("card-row-height"), s = e.getAttribute("hidden-columns"), o = e.getAttribute("hide-header"), d = e.getAttribute("debounce-ms"), l = {};
+    const n = e.getAttribute("breakpoint"), a = e.getAttribute("card-row-height"), s = e.getAttribute("hidden-columns"), o = e.getAttribute("hide-header"), c = e.getAttribute("debounce-ms"), l = {};
     if (n !== null) {
-      const c = parseInt(n, 10);
-      isNaN(c) || (l.breakpoint = c);
+      const d = parseInt(n, 10);
+      isNaN(d) || (l.breakpoint = d);
     }
-    if (a !== null && (l.cardRowHeight = a === "auto" ? "auto" : parseInt(a, 10)), s !== null && (l.hiddenColumns = s.split(",").map((c) => c.trim()).filter((c) => c.length > 0)), o !== null && (l.hideHeader = o !== "false"), d !== null) {
-      const c = parseInt(d, 10);
-      isNaN(c) || (l.debounceMs = c);
+    if (a !== null && (l.cardRowHeight = a === "auto" ? "auto" : parseInt(a, 10)), s !== null && (l.hiddenColumns = s.split(",").map((d) => d.trim()).filter((d) => d.length > 0)), o !== null && (l.hideHeader = o !== "false"), c !== null) {
+      const d = parseInt(c, 10);
+      isNaN(d) || (l.debounceMs = d);
     }
     const h = e.innerHTML.trim();
-    h && !this.config.cardRenderer && !i.__frameworkAdapter?.parseResponsiveCardElement && (l.cardRenderer = (c) => {
-      const f = H(h, { value: c, row: c }), w = S(f), p = document.createElement("div");
+    h && !this.config.cardRenderer && !i.__frameworkAdapter?.parseResponsiveCardElement && (l.cardRenderer = (d) => {
+      const f = H(h, { value: d, row: d }), w = S(f), p = document.createElement("div");
       return p.className = "tbw-responsive-card-content", p.innerHTML = w, p;
     }), Object.keys(l).length > 0 && (this.config = { ...this.config, ...l });
   }
@@ -677,7 +686,7 @@ class B extends P {
    * In multi-breakpoint mode, applies whenever there's an active breakpoint.
    */
   afterRender() {
-    if (this.#E(), !(this.#d.length > 0 ? this.#c !== null : this.#t))
+    if (this.#E(), !(this.#c.length > 0 ? this.#d !== null : this.#t))
       return;
     const e = this.#s.size > 0, i = this.#l.size > 0;
     if (!e && !i)
@@ -693,7 +702,7 @@ class B extends P {
    * Handles both single breakpoint (legacy) and multi-breakpoint modes.
    */
   #m(t) {
-    if (this.#d.length > 0) {
+    if (this.#c.length > 0) {
       this.#y(t);
       return;
     }
@@ -714,10 +723,10 @@ class B extends P {
    */
   #y(t) {
     let e = null;
-    for (const n of this.#d)
+    for (const n of this.#c)
       t <= n.maxWidth && (e = n);
-    if (e !== this.#c) {
-      this.#c = e, e?.hiddenColumns ? this.#u(e.hiddenColumns) : this.#u(this.config.hiddenColumns);
+    if (e !== this.#d) {
+      this.#d = e, e?.hiddenColumns ? this.#u(e.hiddenColumns) : this.#u(this.config.hiddenColumns);
       const n = e?.cardLayout === !0;
       n !== this.#t && (this.#t = n, this.#h()), this.emit("responsive-change", {
         isResponsive: this.#t,
@@ -883,11 +892,11 @@ class B extends P {
     if (!this.#t || !this.config.cardRenderer || !this.#f())
       return 0;
     const e = this.#i ?? 28, i = this.#b(), n = this.#v(), a = Math.max(0, i - e), s = Math.max(0, n - e);
-    let o = 0, d = 0;
+    let o = 0, c = 0;
     const l = this.rows, h = Math.min(t, l.length);
-    for (let c = 0; c < h; c++)
-      l[c].__isGroupRow ? o++ : d++;
-    return o * a + d * s;
+    for (let d = 0; d < h; d++)
+      l[d].__isGroupRow ? o++ : c++;
+    return o * a + c * s;
   }
   /**
    * Count the number of card rows (non-group rows) in the current dataset.