@toolbox-web/grid 0.4.2 → 0.6.0

package/lib/plugins/visibility/index.js

@@ -1,4 +1,4 @@
-const h = {
+const v = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const h = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class p {
+class w {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -185,10 +185,21 @@ class p {
     return this.grid;
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -216,7 +227,7 @@ class p {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...h, ...e };
+    return { ...v, ...e };
   }
   // #region Animation Helpers
   /**
@@ -239,7 +250,7 @@ class p {
     const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (e === !1 || e === "off") return !1;
     if (e === !0 || e === "on") return !0;
-    const t = this.shadowRoot?.host;
+    const t = this.gridElement;
     return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
@@ -255,7 +266,7 @@ class p {
    * ```
    */
   get animationDuration() {
-    const e = this.shadowRoot?.host;
+    const e = this.gridElement;
     if (e) {
       const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), r = parseInt(t, 10);
       if (!isNaN(r)) return r;
@@ -292,12 +303,12 @@ class p {
   }
   // #endregion
 }
-const f = '.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:8px}.tbw-visibility-row{display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;font-size:13px;border-radius:var(--tbw-border-radius, 4px);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:10px;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:8px;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:8px;padding:8px 12px;border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, 4px);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:13px}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}';
-function b(u) {
-  const e = u.meta ?? {};
+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 e = b.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-class a extends p {
+class g extends w {
   /**
    * Plugin dependencies - VisibilityPlugin optionally uses ReorderPlugin for drag-drop reordering.
    *
@@ -309,7 +320,7 @@ class a extends p {
   name = "visibility";
   /** Tool panel ID for shell integration */
   static PANEL_ID = "columns";
-  styles = f;
+  styles = C;
   get defaultConfig() {
     return {
       allowHideAll: !1
@@ -340,7 +351,7 @@ class a extends p {
    */
   getToolPanel() {
     return {
-      id: a.PANEL_ID,
+      id: g.PANEL_ID,
       title: "Columns",
       icon: "☰",
       tooltip: "Column visibility",
@@ -356,7 +367,7 @@ class a extends p {
    * Opens the tool panel and ensures this section is expanded.
    */
   show() {
-    this.grid.openToolPanel(), this.grid.expandedToolPanelSections.includes(a.PANEL_ID) || this.grid.toggleToolPanelSection(a.PANEL_ID);
+    this.grid.openToolPanel(), this.grid.expandedToolPanelSections.includes(g.PANEL_ID) || this.grid.toggleToolPanelSection(g.PANEL_ID);
   }
   /**
    * Hide the visibility sidebar panel.
@@ -368,7 +379,7 @@ class a extends p {
    * Toggle the visibility sidebar panel section.
    */
   toggle() {
-    this.grid.isToolPanelOpen || this.grid.openToolPanel(), this.grid.toggleToolPanelSection(a.PANEL_ID);
+    this.grid.isToolPanelOpen || this.grid.openToolPanel(), this.grid.toggleToolPanelSection(g.PANEL_ID);
   }
   /**
    * Check if a specific column is visible.
@@ -446,7 +457,7 @@ class a extends p {
    * @returns True if the panel section is expanded
    */
   isPanelVisible() {
-    return this.grid.isToolPanelOpen && this.grid.expandedToolPanelSections.includes(a.PANEL_ID);
+    return this.grid.isToolPanelOpen && this.grid.expandedToolPanelSections.includes(g.PANEL_ID);
   }
   // #endregion
   // #region Private Methods
@@ -459,10 +470,10 @@ class a extends p {
     t.className = "tbw-visibility-content";
     const r = document.createElement("div");
     r.className = "tbw-visibility-list", t.appendChild(r);
-    const n = document.createElement("button");
-    return n.className = "tbw-visibility-show-all", n.textContent = "Show All", n.addEventListener("click", () => {
+    const s = document.createElement("button");
+    return s.className = "tbw-visibility-show-all", s.textContent = "Show All", s.addEventListener("click", () => {
       this.grid.showAllColumns(), this.rebuildToggles(r);
-    }), t.appendChild(n), this.columnListElement = r, this.rebuildToggles(r), e.appendChild(t), () => {
+    }), t.appendChild(s), this.columnListElement = r, this.rebuildToggles(r), e.appendChild(t), () => {
       this.columnListElement = null, t.remove();
     };
   }
@@ -480,55 +491,56 @@ class a extends p {
   rebuildToggles(e) {
     const t = this.hasReorderPlugin();
     e.innerHTML = "";
-    const r = this.grid.getAllColumns().filter((n) => !n.utility);
-    for (let n = 0; n < r.length; n++) {
-      const i = r[n], d = i.header || i.field, s = document.createElement("div");
-      s.className = i.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", s.setAttribute("data-field", i.field), s.setAttribute("data-index", String(n)), t && b(i) && (s.draggable = !0, s.classList.add("reorderable"), this.setupDragListeners(s, i.field, n, e));
-      const o = document.createElement("label");
-      o.className = "tbw-visibility-label";
-      const l = document.createElement("input");
-      l.type = "checkbox", l.checked = i.visible, l.disabled = i.lockVisible ?? !1, l.addEventListener("change", () => {
+    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 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 g = document.createElement("span");
-      if (g.textContent = d, o.appendChild(l), o.appendChild(g), t && b(i)) {
+      const a = document.createElement("span");
+      if (a.textContent = d, l.appendChild(o), l.appendChild(a), t && m(i)) {
         const c = document.createElement("span");
-        c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", s.appendChild(c);
+        c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", n.appendChild(c);
       }
-      s.appendChild(o), e.appendChild(s);
+      n.appendChild(l), e.appendChild(n);
     }
   }
   /**
    * Set up drag-and-drop event listeners for a row.
    * On drop, emits a 'column-reorder-request' event for other plugins to handle.
    */
-  setupDragListeners(e, t, r, n) {
+  setupDragListeners(e, t, r, s) {
     e.addEventListener("dragstart", (i) => {
       this.isDragging = !0, this.draggedField = t, this.draggedIndex = r, i.dataTransfer && (i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
     }), e.addEventListener("dragend", () => {
-      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(n);
+      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(), s = d.top + d.height / 2;
-      this.dropIndex = i.clientY < s ? r : r + 1, n.querySelectorAll(".tbw-visibility-row").forEach((o) => {
-        o !== e && o.classList.remove("drop-target", "drop-before", "drop-after");
-      }), e.classList.add("drop-target"), e.classList.toggle("drop-before", i.clientY < s), e.classList.toggle("drop-after", i.clientY >= s);
+      const d = e.getBoundingClientRect(), n = d.top + d.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);
     }), e.addEventListener("dragleave", () => {
       e.classList.remove("drop-target", "drop-before", "drop-after");
     }), e.addEventListener("drop", (i) => {
       i.preventDefault();
-      const d = this.draggedField, s = this.draggedIndex, o = this.dropIndex;
-      if (!this.isDragging || d === null || s === null || o === null)
+      const d = this.draggedField, n = this.draggedIndex, l = this.dropIndex;
+      if (!this.isDragging || d === null || n === null || l === null)
         return;
-      const l = o > s ? o - 1 : o;
-      if (l !== s) {
-        const g = {
+      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,
-          fromIndex: s,
-          toIndex: l
+          fromIndex: n,
+          // Not used by ReorderPlugin, just for info
+          toIndex: f
         };
-        this.emit("column-reorder-request", g), setTimeout(() => {
-          this.rebuildToggles(n);
+        this.emit("column-reorder-request", p), setTimeout(() => {
+          this.rebuildToggles(s);
         }, 0);
       }
     });
@@ -536,6 +548,6 @@ class a extends p {
   // #endregion
 }
 export {
-  a as VisibilityPlugin
+  g as VisibilityPlugin
 };
 //# sourceMappingURL=index.js.map