@toolbox-web/grid 0.4.0 → 0.4.2

package/lib/plugins/visibility/index.js

@@ -1,4 +1,4 @@
-const p = {
+const h = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,9 +8,28 @@ const p = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class f {
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+class p {
+  /**
+   * Plugin dependencies - declare other plugins this one requires.
+   *
+   * Dependencies are validated when the plugin is attached.
+   * Required dependencies throw an error if missing.
+   * Optional dependencies log an info message if missing.
+   *
+   * @example
+   * ```typescript
+   * static readonly dependencies: PluginDependency[] = [
+   *   { name: 'editing', required: true, reason: 'Tracks cell edits for undo/redo' },
+   *   { name: 'selection', required: false, reason: 'Enables selection-based undo' },
+   * ];
+   * ```
+   */
+  static dependencies;
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -97,12 +116,28 @@ class f {
   emit(e, t) {
     this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(e, t) {
+    const r = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(r), r.defaultPrevented;
+  }
   /**
    * Request a re-render of the grid.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -136,6 +171,19 @@ class f {
   get visibleColumns() {
     return this.grid?._visibleColumns ?? [];
   }
+  /**
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
   /**
    * Get the shadow root of the grid.
    */
@@ -168,8 +216,53 @@ class f {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...p, ...e };
+    return { ...h, ...e };
   }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    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;
+    return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  get animationDuration() {
+    const e = this.shadowRoot?.host;
+    if (e) {
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), r = parseInt(t, 10);
+      if (!isNaN(r)) return r;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -199,16 +292,24 @@ class f {
   }
   // #endregion
 }
-const v = '.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 h(u) {
+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 ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-class g extends f {
+class a extends p {
+  /**
+   * Plugin dependencies - VisibilityPlugin optionally uses ReorderPlugin for drag-drop reordering.
+   *
+   * When ReorderPlugin is present, columns in the visibility panel become draggable.
+   */
+  static dependencies = [
+    { name: "reorder", required: !1, reason: "Enables drag-to-reorder columns in visibility panel" }
+  ];
   name = "visibility";
-  version = "1.0.0";
   /** Tool panel ID for shell integration */
   static PANEL_ID = "columns";
+  styles = f;
   get defaultConfig() {
     return {
       allowHideAll: !1
@@ -221,6 +322,12 @@ class g extends f {
   draggedField = null;
   draggedIndex = null;
   dropIndex = null;
+  /** Clear drag-related classes from all rows in a list. */
+  clearDragClasses(e) {
+    e.querySelectorAll(".tbw-visibility-row").forEach((t) => {
+      t.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
+    });
+  }
   // #endregion
   // #region Lifecycle
   detach() {
@@ -233,7 +340,7 @@ class g extends f {
    */
   getToolPanel() {
     return {
-      id: g.PANEL_ID,
+      id: a.PANEL_ID,
       title: "Columns",
       icon: "☰",
       tooltip: "Column visibility",
@@ -246,9 +353,10 @@ class g extends f {
   // #region Public API
   /**
    * Show the visibility sidebar panel.
+   * Opens the tool panel and ensures this section is expanded.
    */
   show() {
-    this.grid.openToolPanel(g.PANEL_ID);
+    this.grid.openToolPanel(), this.grid.expandedToolPanelSections.includes(a.PANEL_ID) || this.grid.toggleToolPanelSection(a.PANEL_ID);
   }
   /**
    * Hide the visibility sidebar panel.
@@ -257,10 +365,10 @@ class g extends f {
     this.grid.closeToolPanel();
   }
   /**
-   * Toggle the visibility sidebar panel.
+   * Toggle the visibility sidebar panel section.
    */
   toggle() {
-    this.grid.toggleToolPanel(g.PANEL_ID);
+    this.grid.isToolPanelOpen || this.grid.openToolPanel(), this.grid.toggleToolPanelSection(a.PANEL_ID);
   }
   /**
    * Check if a specific column is visible.
@@ -285,14 +393,14 @@ class g extends f {
    * @returns Array of visible field names
    */
   getVisibleColumns() {
-    return this.grid.getAllColumns().filter((t) => t.visible).map((t) => t.field);
+    return this.grid.getAllColumns().filter((e) => e.visible).map((e) => e.field);
   }
   /**
    * Get list of all hidden column fields.
    * @returns Array of hidden field names
    */
   getHiddenColumns() {
-    return this.grid.getAllColumns().filter((t) => !t.visible).map((t) => t.field);
+    return this.grid.getAllColumns().filter((e) => !e.visible).map((e) => e.field);
   }
   /**
    * Show all columns.
@@ -315,7 +423,7 @@ class g extends f {
    * @param field - The field name of the column to show
    */
   showColumn(e) {
-    this.grid.setColumnVisible(e, !0);
+    this.setColumnVisible(e, !0);
   }
   /**
    * Hide a specific column.
@@ -323,7 +431,7 @@ class g extends f {
    * @param field - The field name of the column to hide
    */
   hideColumn(e) {
-    this.grid.setColumnVisible(e, !1);
+    this.setColumnVisible(e, !1);
   }
   /**
    * Get all columns with their visibility status.
@@ -335,10 +443,10 @@ class g extends f {
   }
   /**
    * Check if the sidebar panel is currently open.
-   * @returns True if the panel is open
+   * @returns True if the panel section is expanded
    */
   isPanelVisible() {
-    return this.grid.activeToolPanel === g.PANEL_ID;
+    return this.grid.isToolPanelOpen && this.grid.expandedToolPanelSections.includes(a.PANEL_ID);
   }
   // #endregion
   // #region Private Methods
@@ -347,15 +455,15 @@ class g extends f {
    * Returns a cleanup function.
    */
   renderPanelContent(e) {
-    const t = this.grid, l = document.createElement("div");
-    l.className = "tbw-visibility-content";
-    const o = document.createElement("div");
-    o.className = "tbw-visibility-list", l.appendChild(o);
-    const i = document.createElement("button");
-    return i.className = "tbw-visibility-show-all", i.textContent = "Show All", i.addEventListener("click", () => {
-      t.showAllColumns(), this.rebuildToggles(o);
-    }), l.appendChild(i), this.columnListElement = o, this.rebuildToggles(o), e.appendChild(l), () => {
-      this.columnListElement = null, l.remove();
+    const t = document.createElement("div");
+    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", () => {
+      this.grid.showAllColumns(), this.rebuildToggles(r);
+    }), t.appendChild(n), this.columnListElement = r, this.rebuildToggles(r), e.appendChild(t), () => {
+      this.columnListElement = null, t.remove();
     };
   }
   /**
@@ -370,69 +478,64 @@ class g extends f {
    * When a reorder plugin is present, adds drag handles for reordering.
    */
   rebuildToggles(e) {
-    const t = this.grid, l = this.hasReorderPlugin();
+    const t = this.hasReorderPlugin();
     e.innerHTML = "";
-    const o = t.getAllColumns();
-    for (let i = 0; i < o.length; i++) {
-      const s = o[i], n = s.header || s.field, r = document.createElement("div");
-      r.className = s.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", r.setAttribute("data-field", s.field), r.setAttribute("data-index", String(i)), l && h(s) && (r.draggable = !0, r.classList.add("reorderable"), this.setupDragListeners(r, s.field, i, e));
-      const d = document.createElement("label");
-      d.className = "tbw-visibility-label";
-      const a = document.createElement("input");
-      a.type = "checkbox", a.checked = s.visible, a.disabled = s.lockVisible ?? !1, a.addEventListener("change", () => {
-        t.toggleColumnVisibility(s.field), setTimeout(() => this.rebuildToggles(e), 0);
+    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", () => {
+        this.grid.toggleColumnVisibility(i.field), setTimeout(() => this.rebuildToggles(e), 0);
       });
-      const b = document.createElement("span");
-      if (b.textContent = n, d.appendChild(a), d.appendChild(b), l && h(s)) {
+      const g = document.createElement("span");
+      if (g.textContent = d, o.appendChild(l), o.appendChild(g), t && b(i)) {
         const c = document.createElement("span");
-        c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", r.appendChild(c);
+        c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", s.appendChild(c);
       }
-      r.appendChild(d), e.appendChild(r);
+      s.appendChild(o), e.appendChild(s);
     }
   }
   /**
    * 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, l, o) {
+  setupDragListeners(e, t, r, n) {
     e.addEventListener("dragstart", (i) => {
-      this.isDragging = !0, this.draggedField = t, this.draggedIndex = l, i.dataTransfer && (i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
+      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, o.querySelectorAll(".tbw-visibility-row").forEach((i) => {
-        i.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
-      });
+      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(n);
     }), e.addEventListener("dragover", (i) => {
       if (i.preventDefault(), !this.isDragging || this.draggedField === t) return;
-      const s = e.getBoundingClientRect(), n = s.top + s.height / 2;
-      this.dropIndex = i.clientY < n ? l : l + 1, o.querySelectorAll(".tbw-visibility-row").forEach((r) => {
-        r !== e && r.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);
+      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);
     }), e.addEventListener("dragleave", () => {
       e.classList.remove("drop-target", "drop-before", "drop-after");
     }), e.addEventListener("drop", (i) => {
       i.preventDefault();
-      const s = this.draggedField, n = this.draggedIndex, r = this.dropIndex;
-      if (!this.isDragging || s === null || n === null || r === null)
+      const d = this.draggedField, s = this.draggedIndex, o = this.dropIndex;
+      if (!this.isDragging || d === null || s === null || o === null)
         return;
-      const d = r > n ? r - 1 : r;
-      if (d !== n) {
-        const a = {
-          field: s,
-          fromIndex: n,
-          toIndex: d
+      const l = o > s ? o - 1 : o;
+      if (l !== s) {
+        const g = {
+          field: d,
+          fromIndex: s,
+          toIndex: l
         };
-        this.emit("column-reorder-request", a), setTimeout(() => {
-          this.rebuildToggles(o);
+        this.emit("column-reorder-request", g), setTimeout(() => {
+          this.rebuildToggles(n);
         }, 0);
       }
     });
   }
   // #endregion
-  // #region Styles
-  styles = v;
-  // #endregion
 }
 export {
-  g as VisibilityPlugin
+  a as VisibilityPlugin
 };
 //# sourceMappingURL=index.js.map