@toolbox-web/grid 1.0.0 → 1.1.1

package/lib/plugins/filtering/index.js

@@ -1,9 +1,9 @@
 function P(h) {
-  const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: n, overscan: l } = h, i = Math.ceil(t / n);
-  let a = Math.floor(r / n) - l;
+  const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: n, overscan: i } = h, l = Math.ceil(t / n);
+  let a = Math.floor(r / n) - i;
   a < 0 && (a = 0);
-  let o = a + i + l * 2;
-  return o > e && (o = e), o === e && a > 0 && (a = Math.max(0, o - i - l * 2)), {
+  let o = a + l + i * 2;
+  return o > e && (o = e), o === e && a > 0 && (a = Math.max(0, o - l - i * 2)), {
     start: a,
     end: o,
     offsetY: a * n,
@@ -40,6 +40,28 @@ class M {
    * ```
    */
   static dependencies;
+  /**
+   * Plugin manifest - declares owned properties, config rules, and hook priorities.
+   *
+   * This is read by the configuration validator to:
+   * - Validate that required plugins are loaded when their properties are used
+   * - Execute configRules to detect invalid/conflicting settings
+   * - Order hook execution based on priority
+   *
+   * @example
+   * ```typescript
+   * static override readonly manifest: PluginManifest<MyConfig> = {
+   *   ownedProperties: [
+   *     { property: 'myProp', level: 'column', description: 'the "myProp" column property' },
+   *   ],
+   *   configRules: [
+   *     { id: 'myPlugin/conflict', severity: 'warn', message: '...', check: (c) => c.a && c.b },
+   *   ],
+   * };
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static manifest;
   /**
    * Plugin version - defaults to grid version for built-in plugins.
    * Third-party plugins can override with their own semver.
@@ -311,21 +333,21 @@ function q(h, e, t = !1) {
   if (e.operator === "notBlank")
     return r != null && r !== "";
   if (r == null) return !1;
-  const n = String(r), l = t ? n : n.toLowerCase(), i = t ? String(e.value) : String(e.value).toLowerCase();
+  const n = String(r), i = t ? n : n.toLowerCase(), l = t ? String(e.value) : String(e.value).toLowerCase();
   switch (e.operator) {
     // Text operators
     case "contains":
-      return l.includes(i);
+      return i.includes(l);
     case "notContains":
-      return !l.includes(i);
+      return !i.includes(l);
     case "equals":
-      return l === i;
+      return i === l;
     case "notEquals":
-      return l !== i;
+      return i !== l;
     case "startsWith":
-      return l.startsWith(i);
+      return i.startsWith(l);
     case "endsWith":
-      return l.endsWith(i);
+      return i.endsWith(l);
     // Number/Date operators (use raw numeric values)
     case "lessThan":
       return Number(r) < Number(e.value);
@@ -437,18 +459,18 @@ class g extends M {
     e.querySelectorAll('[part~="header-cell"]').forEach((r) => {
       const n = r.getAttribute("data-col");
       if (n === null) return;
-      const l = this.visibleColumns[parseInt(n, 10)];
-      if (!l || l.filterable === !1 || z(l)) return;
-      const i = l.field;
-      if (!i) return;
-      const a = this.filters.has(i);
+      const i = this.visibleColumns[parseInt(n, 10)];
+      if (!i || i.filterable === !1 || z(i)) return;
+      const l = i.field;
+      if (!l) return;
+      const a = this.filters.has(l);
       let o = r.querySelector(".tbw-filter-btn");
       if (o) {
         o.classList.toggle("active", a), r.classList.toggle("filtered", a);
         return;
       }
-      o = document.createElement("button"), o.className = "tbw-filter-btn", o.setAttribute("aria-label", `Filter ${l.header ?? i}`), o.innerHTML = '<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 && (o.classList.add("active"), r.classList.add("filtered")), o.addEventListener("click", (b) => {
-        b.stopPropagation(), this.toggleFilterPanel(i, l, o);
+      o = document.createElement("button"), o.className = "tbw-filter-btn", o.setAttribute("aria-label", `Filter ${i.header ?? l}`), o.innerHTML = '<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 && (o.classList.add("active"), r.classList.add("filtered")), o.addEventListener("click", (b) => {
+        b.stopPropagation(), this.toggleFilterPanel(l, i, o);
       });
       const p = r.querySelector(".resize-handle");
       p ? r.insertBefore(o, p) : r.appendChild(o);
@@ -565,26 +587,26 @@ class g extends M {
     this.closeFilterPanel();
     const n = document.createElement("div");
     if (n.className = "tbw-filter-panel", this.isAnimationEnabled && n.classList.add("tbw-filter-panel-animated"), this.panelElement = n, this.openPanelField = e, this.config.valuesHandler) {
-      n.innerHTML = '<div class="tbw-filter-loading">Loading...</div>', document.body.appendChild(n), this.positionPanel(n, r), this.setupPanelCloseHandler(n, r), this.config.valuesHandler(e, t).then((i) => {
-        this.openPanelField !== e || !this.panelElement || (n.innerHTML = "", this.renderPanelContent(e, t, n, i));
+      n.innerHTML = '<div class="tbw-filter-loading">Loading...</div>', document.body.appendChild(n), this.positionPanel(n, r), this.setupPanelCloseHandler(n, r), this.config.valuesHandler(e, t).then((l) => {
+        this.openPanelField !== e || !this.panelElement || (n.innerHTML = "", this.renderPanelContent(e, t, n, l));
       });
       return;
     }
-    const l = H(this.sourceRows, e);
-    this.renderPanelContent(e, t, n, l), document.body.appendChild(n), this.positionPanel(n, r), this.setupPanelCloseHandler(n, r);
+    const i = H(this.sourceRows, e);
+    this.renderPanelContent(e, t, n, i), document.body.appendChild(n), this.positionPanel(n, r), this.setupPanelCloseHandler(n, r);
   }
   /**
    * Render filter panel content with given values
    */
   renderPanelContent(e, t, r, n) {
-    let l = this.excludedValues.get(e);
-    l || (l = /* @__PURE__ */ new Set(), this.excludedValues.set(e, l));
-    const i = this.searchText.get(e) ?? "", a = {
+    let i = this.excludedValues.get(e);
+    i || (i = /* @__PURE__ */ new Set(), this.excludedValues.set(e, i));
+    const l = this.searchText.get(e) ?? "", a = {
       field: e,
       column: t,
       uniqueValues: n,
-      excludedValues: l,
-      searchText: i,
+      excludedValues: i,
+      searchText: l,
       applySetFilter: (p) => {
         this.applySetFilter(e, p), this.closeFilterPanel();
       },
@@ -597,7 +619,7 @@ class g extends M {
       closePanel: () => this.closeFilterPanel()
     };
     let o = !1;
-    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(r, a), o = r.children.length > 0), o || this.renderDefaultFilterPanel(r, a, n, l);
+    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(r, a), o = r.children.length > 0), o || this.renderDefaultFilterPanel(r, a, n, i);
   }
   /**
    * Setup click-outside handler to close the panel
@@ -636,25 +658,25 @@ class g extends M {
     const n = t.closest(".cell") ?? t;
     if (n.style.anchorName = "--tbw-filter-anchor", this.panelAnchorElement = n, g.checkAnchorPositioningSupport()) {
       requestAnimationFrame(() => {
-        const i = e.getBoundingClientRect(), a = n.getBoundingClientRect();
-        i.top < a.top && e.classList.add("tbw-filter-panel-above");
+        const l = e.getBoundingClientRect(), a = n.getBoundingClientRect();
+        l.top < a.top && e.classList.add("tbw-filter-panel-above");
       });
       return;
     }
-    const l = n.getBoundingClientRect();
-    e.style.position = "fixed", e.style.top = `${l.bottom + 4}px`, e.style.left = `${l.left}px`, requestAnimationFrame(() => {
-      const i = e.getBoundingClientRect();
-      i.right > window.innerWidth - 8 && (e.style.left = `${l.right - i.width}px`), i.bottom > window.innerHeight - 8 && (e.style.top = `${l.top - i.height - 4}px`, e.classList.add("tbw-filter-panel-above"));
+    const i = n.getBoundingClientRect();
+    e.style.position = "fixed", e.style.top = `${i.bottom + 4}px`, e.style.left = `${i.left}px`, requestAnimationFrame(() => {
+      const l = e.getBoundingClientRect();
+      l.right > window.innerWidth - 8 && (e.style.left = `${i.right - l.width}px`), l.bottom > window.innerHeight - 8 && (e.style.top = `${i.top - l.height - 4}px`, e.classList.add("tbw-filter-panel-above"));
     });
   }
   /**
    * Render the default filter panel content
    */
   renderDefaultFilterPanel(e, t, r, n) {
-    const { field: l } = t, i = document.createElement("div");
-    i.className = "tbw-filter-search";
+    const { field: i } = t, l = document.createElement("div");
+    l.className = "tbw-filter-search";
     const a = document.createElement("input");
-    a.type = "text", a.placeholder = "Search...", a.className = "tbw-filter-search-input", a.value = this.searchText.get(l) ?? "", i.appendChild(a), e.appendChild(i);
+    a.type = "text", a.placeholder = "Search...", a.className = "tbw-filter-search-input", a.value = this.searchText.get(i) ?? "", l.appendChild(a), e.appendChild(l);
     const o = document.createElement("div");
     o.className = "tbw-filter-actions";
     const p = document.createElement("label");
@@ -735,7 +757,7 @@ class g extends M {
     let L;
     a.addEventListener("input", () => {
       clearTimeout(L), L = setTimeout(() => {
-        this.searchText.set(l, a.value), I(a.value);
+        this.searchText.set(i, a.value), I(a.value);
       }, this.config.debounceMs ?? 150);
     });
     const S = document.createElement("div");
@@ -790,10 +812,10 @@ class g extends M {
     if (this.config.filterHandler) {
       const t = this.grid;
       t.setAttribute("aria-busy", "true");
-      const r = this.config.filterHandler(e, this.sourceRows), n = (l) => {
-        t.removeAttribute("aria-busy"), this.cachedResult = l, this.grid.rows = l, this.emit("filter-change", {
+      const r = this.config.filterHandler(e, this.sourceRows), n = (i) => {
+        t.removeAttribute("aria-busy"), this.cachedResult = i, this.grid.rows = i, this.emit("filter-change", {
           filters: e,
-          filteredRowCount: l.length
+          filteredRowCount: i.length
         }), this.requestRender();
       };
       r && typeof r.then == "function" ? r.then(n) : n(r);