@toolbox-web/grid 1.2.0 → 1.3.1

package/lib/plugins/visibility/index.js

@@ -1,4 +1,4 @@
-const v = {
+const m = '<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>', w = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -6,9 +6,11 @@ const v = {
   sortNone: "⇅",
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
-  toolPanel: "☰"
+  toolPanel: "☰",
+  filter: m,
+  filterActive: m
 };
-class w {
+class C {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -232,7 +234,7 @@ class w {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...v, ...e };
+    return { ...w, ...e };
   }
   // #region Animation Helpers
   /**
@@ -308,12 +310,12 @@ class w {
   }
   // #endregion
 }
-const C = '@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}}';
-function m(b) {
+const y = '@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}}';
+function f(b) {
   const e = b.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-class g extends w {
+class g extends C {
   /**
    * Plugin dependencies - VisibilityPlugin optionally uses ReorderPlugin for drag-drop reordering.
    *
@@ -328,7 +330,7 @@ class g extends w {
   /** Tool panel ID for shell integration */
   static PANEL_ID = "columns";
   /** @internal */
-  styles = C;
+  styles = y;
   /** @internal */
   get defaultConfig() {
     return {
@@ -504,16 +506,16 @@ class g extends w {
     e.innerHTML = "";
     const r = this.grid.getAllColumns().filter((s) => !s.utility);
     for (let s = 0; s < r.length; s++) {
-      const i = r[s], d = i.header || i.field, n = document.createElement("div");
-      n.className = i.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", n.setAttribute("data-field", i.field), n.setAttribute("data-index", String(s)), t && m(i) && (n.draggable = !0, n.classList.add("reorderable"), this.setupDragListeners(n, i.field, s, e));
+      const i = r[s], a = i.header || i.field, n = document.createElement("div");
+      n.className = i.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", n.setAttribute("data-field", i.field), n.setAttribute("data-index", String(s)), t && f(i) && (n.draggable = !0, n.classList.add("reorderable"), this.setupDragListeners(n, i.field, s, e));
       const l = document.createElement("label");
       l.className = "tbw-visibility-label";
       const o = document.createElement("input");
       o.type = "checkbox", o.checked = i.visible, o.disabled = i.lockVisible ?? !1, o.addEventListener("change", () => {
         this.grid.toggleColumnVisibility(i.field), setTimeout(() => this.rebuildToggles(e), 0);
       });
-      const a = document.createElement("span");
-      if (a.textContent = d, l.appendChild(o), l.appendChild(a), t && m(i)) {
+      const d = document.createElement("span");
+      if (d.textContent = a, l.appendChild(o), l.appendChild(d), t && f(i)) {
         const c = document.createElement("span");
         c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", n.appendChild(c);
       }
@@ -531,7 +533,7 @@ class g extends w {
       this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(s);
     }), e.addEventListener("dragover", (i) => {
       if (i.preventDefault(), !this.isDragging || this.draggedField === t) return;
-      const d = e.getBoundingClientRect(), n = d.top + d.height / 2;
+      const a = e.getBoundingClientRect(), n = a.top + a.height / 2;
       this.dropIndex = i.clientY < n ? r : r + 1, s.querySelectorAll(".tbw-visibility-row").forEach((l) => {
         l !== e && l.classList.remove("drop-target", "drop-before", "drop-after");
       }), e.classList.add("drop-target"), e.classList.toggle("drop-before", i.clientY < n), e.classList.toggle("drop-after", i.clientY >= n);
@@ -539,18 +541,18 @@ class g extends w {
       e.classList.remove("drop-target", "drop-before", "drop-after");
     }), e.addEventListener("drop", (i) => {
       i.preventDefault();
-      const d = this.draggedField, n = this.draggedIndex, l = this.dropIndex;
-      if (!this.isDragging || d === null || n === null || l === null)
+      const a = this.draggedField, n = this.draggedIndex, l = this.dropIndex;
+      if (!this.isDragging || a === null || n === null || l === null)
         return;
       const o = l > n ? l - 1 : l;
       if (o !== n) {
-        const a = this.grid.getAllColumns(), h = a.filter((u) => !u.utility)[o]?.field, f = h ? a.findIndex((u) => u.field === h) : a.length, p = {
-          field: d,
+        const d = this.grid.getAllColumns(), h = d.filter((u) => !u.utility)[o]?.field, p = h ? d.findIndex((u) => u.field === h) : d.length, v = {
+          field: a,
           fromIndex: n,
           // Not used by ReorderPlugin, just for info
-          toIndex: f
+          toIndex: p
         };
-        this.emit("column-reorder-request", p), setTimeout(() => {
+        this.emit("column-reorder-request", v), setTimeout(() => {
           this.rebuildToggles(s);
         }, 0);
       }