@toolbox-web/grid 1.9.1 → 1.10.0

package/lib/plugins/pinned-rows/index.js

@@ -1,4 +1,4 @@
-const b = '<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>', A = {
+const b = '<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>', R = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -11,7 +11,7 @@ const b = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   filterActive: b,
   print: "🖨️"
 };
-class R {
+class A {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -208,10 +208,19 @@ class R {
   }
   /**
    * 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
@@ -292,7 +301,7 @@ class R {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...A, ...t };
+    return { ...R, ...t };
   }
   // #region Animation Helpers
   /**
@@ -515,7 +524,7 @@ function E(n, t, e, o, r) {
   };
 }
 const B = "@layer tbw-plugins{.tbw-footer{flex-shrink:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:var(--tbw-font-size-xs, .75rem);color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:var(--tbw-spacing-xl, 1rem)}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, .125rem .5rem);min-height:var(--tbw-row-height, 1.75rem);display:block;align-items:center;border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;text-overflow:ellipsis;white-space:var(--tbw-cell-white-space, nowrap)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}}";
-class x extends R {
+class x extends A {
   /** @internal */
   name = "pinnedRows";
   /** @internal */
@@ -550,7 +559,7 @@ class x extends R {
     if (!e) return;
     this.footerWrapper && !e.contains(this.footerWrapper) && (this.footerWrapper = null, this.bottomAggregationContainer = null, this.infoBarElement = null), this.topAggregationContainer && !e.contains(this.topAggregationContainer) && (this.topAggregationContainer = null), this.infoBarElement && !e.contains(this.infoBarElement) && (this.infoBarElement = null);
     const o = this.getSelectionState(), r = this.getFilterState(), s = E(
-      this.rows,
+      this.sourceRows,
       this.columns,
       this.grid,
       o,
@@ -566,7 +575,7 @@ class x extends R {
         this.topAggregationContainer,
         a,
         this.visibleColumns,
-        this.rows
+        this.sourceRows
       );
     } else this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null);
     const u = this.config.showRowCount !== !1 || this.config.showSelectedCount && s.selectedRows > 0 || this.config.showFilteredCount && s.filteredRows !== s.totalRows || this.config.customPanels && this.config.customPanels.length > 0, h = u && this.config.position !== "top", g = l.length > 0 || h;
@@ -582,7 +591,7 @@ class x extends R {
       this.bottomAggregationContainer,
       l,
       this.visibleColumns,
-      this.rows
+      this.sourceRows
     )), h && (this.infoBarElement = m(this.config, s), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
   }
   // #endregion