@toolbox-web/grid 1.6.2 → 1.8.0

package/lib/plugins/pinned-columns/PinnedColumnsPlugin.d.ts

@@ -1,4 +1,4 @@
-import { PluginManifest, BaseGridPlugin, PluginQuery } from '../../core/plugin/base-plugin';
+import { PluginManifest, PluginQuery, BaseGridPlugin } from '../../core/plugin/base-plugin';
 import { ColumnConfig } from '../../core/types';
 import { PinnedColumnsConfig } from './types';
 /**
@@ -63,7 +63,7 @@ import { PinnedColumnsConfig } from './types';
  */
 export declare class PinnedColumnsPlugin extends BaseGridPlugin<PinnedColumnsConfig> {
     /**
-     * Plugin manifest - declares owned properties for configuration validation.
+     * Plugin manifest - declares owned properties and handled queries.
      * @internal
      */
     static readonly manifest: PluginManifest;
@@ -90,7 +90,7 @@ export declare class PinnedColumnsPlugin extends BaseGridPlugin<PinnedColumnsCon
      * Handle inter-plugin queries.
      * @internal
      */
-    onPluginQuery(query: PluginQuery): unknown;
+    handleQuery(query: PluginQuery): unknown;
     /**
      * Re-apply sticky offsets (e.g., after column resize).
      */

package/lib/plugins/pinned-columns/PinnedColumnsPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedColumnsPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/pinned-columns/PinnedColumnsPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAkB,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAQrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBAAa,mBAAoB,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IAC1E;;;OAGG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAS/C;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,mBAAmB;IAEhC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAEnE;IAGD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,YAAY,CAA6B;IAKjD,gBAAgB;IACP,MAAM,IAAI,IAAI;IASvB;;OAEG;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,EAAE,MAAM,EAAE;QAAE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;KAAE,GAAG,OAAO;IAStF,gBAAgB;IACP,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAMzE,gBAAgB;IACP,WAAW,IAAI,IAAI;IAoB5B;;;OAGG;IACM,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAyBnD;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,oBAAoB,IAAI,YAAY,EAAE;IAKtC;;OAEG;IACH,qBAAqB,IAAI,YAAY,EAAE;IAKvC;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;;OAIG;IACM,0BAA0B,CACjC,KAAK,CAAC,EAAE,WAAW,EACnB,WAAW,CAAC,EAAE,WAAW,GACxB;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,SAAS;CAsCrE"}
+{"version":3,"file":"PinnedColumnsPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/pinned-columns/PinnedColumnsPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAQrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAKnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBAAa,mBAAoB,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IAC1E;;;OAGG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAmB/C;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,mBAAmB;IAEhC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAEnE;IAGD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,YAAY,CAA6B;IAKjD,gBAAgB;IACP,MAAM,IAAI,IAAI;IASvB;;OAEG;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,EAAE,MAAM,EAAE;QAAE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;KAAE,GAAG,OAAO;IAStF,gBAAgB;IACP,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAMzE,gBAAgB;IACP,WAAW,IAAI,IAAI;IAoB5B;;;OAGG;IACM,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAgCjD;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,oBAAoB,IAAI,YAAY,EAAE;IAKtC;;OAEG;IACH,qBAAqB,IAAI,YAAY,EAAE;IAKvC;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;;OAIG;IACM,0BAA0B,CACjC,KAAK,CAAC,EAAE,WAAW,EACnB,WAAW,CAAC,EAAE,WAAW,GACxB;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,SAAS;CAsCrE"}

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

@@ -1,4 +1,4 @@
-const d = '<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>', g = {
+const d = '<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>', y = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -10,11 +10,8 @@ const d = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   filter: d,
   filterActive: d,
   print: "🖨️"
-}, y = {
-  /** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
-  CAN_MOVE_COLUMN: "canMoveColumn"
 };
-class m {
+class p {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -149,8 +146,65 @@ class m {
    * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
    */
   emitCancelable(t, e) {
-    const s = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
-    return this.grid?.dispatchEvent?.(s), s.defaultPrevented;
+    const i = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(i), i.defaultPrevented;
+  }
+  // =========================================================================
+  // Event Bus - Plugin-to-Plugin Communication
+  // =========================================================================
+  /**
+   * Subscribe to an event from another plugin.
+   * The subscription is automatically cleaned up when this plugin is detached.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to listen for (e.g., 'filter-change')
+   * @param callback - The callback to invoke when the event is emitted
+   *
+   * @example
+   * ```typescript
+   * // In attach() or other initialization
+   * this.on('filter-change', (detail) => {
+   *   console.log('Filter changed:', detail);
+   * });
+   * ```
+   */
+  on(t, e) {
+    this.grid?._pluginManager?.subscribe(this, t, e);
+  }
+  /**
+   * Unsubscribe from a plugin event.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to stop listening for
+   *
+   * @example
+   * ```typescript
+   * this.off('filter-change');
+   * ```
+   */
+  off(t) {
+    this.grid?._pluginManager?.unsubscribe(this, t);
+  }
+  /**
+   * Emit an event to other plugins via the Event Bus.
+   * This is for inter-plugin communication only; it does NOT dispatch DOM events.
+   * Use `emit()` to dispatch DOM events that external consumers can listen to.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to emit (should be declared in manifest.events)
+   * @param detail - The event payload
+   *
+   * @example
+   * ```typescript
+   * // Emit to other plugins (not DOM)
+   * this.emitPluginEvent('filter-change', { field: 'name', value: 'Alice' });
+   *
+   * // For DOM events that consumers can addEventListener to:
+   * this.emit('filter-change', { field: 'name', value: 'Alice' });
+   * ```
+   */
+  emitPluginEvent(t, e) {
+    this.grid?._pluginManager?.emitPluginEvent(t, e);
   }
   /**
    * Request a re-render of the grid.
@@ -238,7 +292,7 @@ class m {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...g, ...t };
+    return { ...y, ...t };
   }
   // #region Animation Helpers
   /**
@@ -279,8 +333,8 @@ class m {
   get animationDuration() {
     const t = this.gridElement;
     if (t) {
-      const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), s = parseInt(e, 10);
-      if (!isNaN(s)) return s;
+      const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(e, 10);
+      if (!isNaN(i)) return i;
     }
     return 200;
   }
@@ -314,7 +368,7 @@ class m {
   }
   // #endregion
 }
-function p(r) {
+function m(r) {
   return r.filter((t) => t.sticky === "left");
 }
 function k(r) {
@@ -326,25 +380,25 @@ function a(r) {
 function u(r, t) {
   const e = Array.from(r.querySelectorAll(".header-row .cell"));
   if (!e.length) return;
-  const s = /* @__PURE__ */ new Map();
+  const i = /* @__PURE__ */ new Map();
   t.forEach((n, c) => {
-    n.field && s.set(n.field, c);
+    n.field && i.set(n.field, c);
   });
   let l = 0;
   for (const n of t)
     if (n.sticky === "left") {
-      const c = s.get(n.field), i = e.find((o) => o.getAttribute("data-field") === n.field);
-      i && (i.classList.add("sticky-left"), i.style.position = "sticky", i.style.left = l + "px", c !== void 0 && r.querySelectorAll(`.data-grid-row .cell[data-col="${c}"]`).forEach((o) => {
+      const c = i.get(n.field), s = e.find((o) => o.getAttribute("data-field") === n.field);
+      s && (s.classList.add("sticky-left"), s.style.position = "sticky", s.style.left = l + "px", c !== void 0 && r.querySelectorAll(`.data-grid-row .cell[data-col="${c}"]`).forEach((o) => {
         o.classList.add("sticky-left"), o.style.position = "sticky", o.style.left = l + "px";
-      }), l += i.offsetWidth);
+      }), l += s.offsetWidth);
     }
   let f = 0;
   for (const n of [...t].reverse())
     if (n.sticky === "right") {
-      const c = s.get(n.field), i = e.find((o) => o.getAttribute("data-field") === n.field);
-      i && (i.classList.add("sticky-right"), i.style.position = "sticky", i.style.right = f + "px", c !== void 0 && r.querySelectorAll(`.data-grid-row .cell[data-col="${c}"]`).forEach((o) => {
+      const c = i.get(n.field), s = e.find((o) => o.getAttribute("data-field") === n.field);
+      s && (s.classList.add("sticky-right"), s.style.position = "sticky", s.style.right = f + "px", c !== void 0 && r.querySelectorAll(`.data-grid-row .cell[data-col="${c}"]`).forEach((o) => {
         o.classList.add("sticky-right"), o.style.position = "sticky", o.style.right = f + "px";
-      }), f += i.offsetWidth);
+      }), f += s.offsetWidth);
     }
 }
 function h(r) {
@@ -352,9 +406,10 @@ function h(r) {
     e.classList.remove("sticky-left", "sticky-right"), e.style.position = "", e.style.left = "", e.style.right = "";
   });
 }
-class C extends m {
+const g = "canMoveColumn";
+class C extends p {
   /**
-   * Plugin manifest - declares owned properties for configuration validation.
+   * Plugin manifest - declares owned properties and handled queries.
    * @internal
    */
   static manifest = {
@@ -365,6 +420,16 @@ class C extends m {
         description: 'the "sticky" column property',
         isUsed: (t) => t === "left" || t === "right"
       }
+    ],
+    queries: [
+      {
+        type: g,
+        description: "Prevents pinned (sticky) columns from being moved/reordered"
+      },
+      {
+        type: "getStickyOffsets",
+        description: "Returns the sticky offsets for left/right pinned columns"
+      }
     ]
   };
   /** @internal */
@@ -389,8 +454,8 @@ class C extends m {
    * Auto-detect sticky columns from column configuration.
    */
   static detect(t, e) {
-    const s = e?.columns;
-    return Array.isArray(s) ? a(s) : !1;
+    const i = e?.columns;
+    return Array.isArray(i) ? a(i) : !1;
   }
   // #endregion
   // #region Hooks
@@ -415,15 +480,20 @@ class C extends m {
    * Handle inter-plugin queries.
    * @internal
    */
-  onPluginQuery(t) {
+  handleQuery(t) {
     switch (t.type) {
-      case y.CAN_MOVE_COLUMN: {
-        const e = t.context, s = e.sticky;
-        if (s === "left" || s === "right")
+      case g: {
+        const e = t.context, i = e.sticky;
+        if (i === "left" || i === "right")
           return !1;
         const l = e.meta?.sticky;
         return l === "left" || l === "right" ? !1 : void 0;
       }
+      case "getStickyOffsets":
+        return {
+          left: Object.fromEntries(this.leftOffsets),
+          right: Object.fromEntries(this.rightOffsets)
+        };
       default:
         return;
     }
@@ -442,7 +512,7 @@ class C extends m {
    */
   getLeftPinnedColumns() {
     const t = [...this.columns];
-    return p(t);
+    return m(t);
   }
   /**
    * Get columns pinned to the right.
@@ -465,20 +535,20 @@ class C extends m {
   getHorizontalScrollOffsets(t, e) {
     if (!this.isApplied)
       return;
-    let s = 0, l = 0;
+    let i = 0, l = 0;
     if (t) {
       const n = t.querySelectorAll(".sticky-left"), c = t.querySelectorAll(".sticky-right");
-      n.forEach((i) => {
-        s += i.offsetWidth;
-      }), c.forEach((i) => {
-        l += i.offsetWidth;
+      n.forEach((s) => {
+        i += s.offsetWidth;
+      }), c.forEach((s) => {
+        l += s.offsetWidth;
       });
     } else
-      this.grid.querySelectorAll(".header-row .cell").forEach((i) => {
-        i.classList.contains("sticky-left") ? s += i.offsetWidth : i.classList.contains("sticky-right") && (l += i.offsetWidth);
+      this.grid.querySelectorAll(".header-row .cell").forEach((s) => {
+        s.classList.contains("sticky-left") ? i += s.offsetWidth : s.classList.contains("sticky-right") && (l += s.offsetWidth);
       });
     const f = e?.classList.contains("sticky-left") || e?.classList.contains("sticky-right");
-    return { left: s, right: l, skipScroll: f };
+    return { left: i, right: l, skipScroll: f };
   }
   // #endregion
 }