@toolbox-web/grid 1.26.1 → 1.27.0

package/lib/plugins/undo-redo/types.d.ts

@@ -4,7 +4,19 @@
  * Type definitions for the undo/redo plugin that tracks
  * cell edits and provides undo/redo functionality.
  */
-/** Configuration for the undo/redo plugin */
+/**
+ * Configuration for the undo/redo plugin.
+ *
+ * Controls how many edit actions are retained in the history stack.
+ *
+ * @example
+ * ```ts
+ * const grid = document.querySelector('tbw-grid');
+ * grid.plugins = [
+ *   new UndoRedoPlugin({ maxHistorySize: 50 }),
+ * ];
+ * ```
+ */
 export interface UndoRedoConfig {
     /** Maximum number of actions to keep in history. Default: 100 */
     maxHistorySize?: number;
@@ -58,9 +70,9 @@ export interface UndoRedoDetail {
 declare module '../../core/types' {
     interface DataGridEventMap {
         /** Fired after an undo operation (Ctrl+Z). Provides the undone action. @group Undo/Redo Events */
-        'undo': UndoRedoDetail;
+        undo: UndoRedoDetail;
         /** Fired after a redo operation (Ctrl+Y). Provides the redone action. @group Undo/Redo Events */
-        'redo': UndoRedoDetail;
+        redo: UndoRedoDetail;
     }
     interface PluginNameMap {
         undoRedo: import('./UndoRedoPlugin').UndoRedoPlugin;

package/lib/plugins/visibility/VisibilityPlugin.d.ts

@@ -94,7 +94,7 @@ export interface ColumnReorderRequestDetail {
  * ```
  *
  * @see {@link VisibilityConfig} for configuration options
- * @see {@link ReorderPlugin} for drag-to-reorder integration
+ * @see ReorderPlugin for drag-to-reorder integration
  *
  * @internal Extends BaseGridPlugin
  */
@@ -234,11 +234,21 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
     /**
      * Build the column toggle checkboxes.
      * When GroupingColumnsPlugin is present, renders columns under collapsible group headers.
+     * Groups that are fragmented (same group split across non-contiguous positions) are
+     * shown as separate sections to match the grid's visual layout.
      * When a reorder plugin is present, adds drag handles for reordering.
      */
     private rebuildToggles;
     /**
-     * Render a group section with header checkbox and indented column rows.
+     * Compute contiguous column fragments from display-order columns.
+     * Each fragment is either a group section (contiguous run of same-group columns)
+     * or a single ungrouped column.
+     */
+    private computeFragments;
+    /**
+     * Render a group fragment section with header checkbox and indented column rows.
+     * A fragment is a contiguous run of columns from the same group. When a group is
+     * fragmented (split across non-contiguous positions), each fragment gets its own section.
      */
     private renderGroupSection;
     /**
@@ -251,12 +261,15 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
     private createColumnRow;
     /**
      * Set up drag-and-drop listeners for a group header row.
-     * Dragging a group moves all its member columns as a block.
+     * Dragging a group fragment moves only the columns in that fragment as a block.
+     * When a group is fragmented, each fragment header drags independently.
      */
     private setupGroupDragListeners;
     /**
-     * Execute a group drop — move the dragged group's fields as a block
-     * to the position relative to the target group or column.
+     * Execute a group drop — move the dragged fragment's fields as a block
+     * to the position relative to the target group/column.
+     * Routes through the ReorderPlugin when available for proper animation and
+     * full render cycle, otherwise falls back to direct grid.setColumnOrder().
      */
     private executeGroupDrop;
     /**

package/lib/plugins/visibility/index.js

@@ -1,2 +1,2 @@
-function e(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function t(t,i,r,s){return`${e(r,s)} ${t}: ${i}\n\n  → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(t)}`}const i='<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>',r={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:i,filterActive:i,print:"🖨️"};class s{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const i=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(i),i.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...r,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),i=parseInt(t,10);if(!isNaN(i))return i}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(i,r){void 0!==r?console.warn(t(i,r,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${i}`)}throwDiagnostic(e,i){throw new Error(t(e,i,this.gridElement.id,this.name))}}function n(e){const t=e.meta??{};return!0!==t.lockPosition&&!0!==t.suppressMovable}class o extends s{static dependencies=[{name:"reorder",required:!1,reason:"Enables drag-to-reorder columns in visibility panel"}];static manifest={queries:[{type:"getContextMenuItems",description:'Contributes "Hide column" item to the header context menu'}]};name="visibility";static PANEL_ID="columns";styles='@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))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);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)}.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-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.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));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg));color:var(--tbw-color-fg);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))}.tbw-visibility-group-header{display:flex;align-items:center;padding:var(--tbw-menu-item-padding, .375rem .25rem);font-size:var(--tbw-font-size-sm, .8125rem);font-weight:600;color:var(--tbw-color-fg);border-bottom:1px solid var(--tbw-color-border);margin-top:var(--tbw-spacing-sm, .25rem);position:relative}.tbw-visibility-group-header:first-child{margin-top:0}.tbw-visibility-group-header .tbw-visibility-label{gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-visibility-group-header.reorderable{cursor:grab}.tbw-visibility-group-header.reorderable:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-group-header .tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-group-header.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-group-header.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-group-header.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-group-header.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row--grouped{padding-left:calc(var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem)) + .75rem)}}';get defaultConfig(){return{allowHideAll:!1}}columnListElement=null;isDragging=!1;draggedField=null;draggedIndex=null;dropIndex=null;draggedGroupId=null;draggedGroupFields=[];clearDragClasses(e){e.querySelectorAll(".tbw-visibility-row, .tbw-visibility-group-header").forEach(e=>{e.classList.remove("dragging","drop-target","drop-before","drop-after")})}attach(e){super.attach(e),this.gridElement.addEventListener("column-move",()=>{this.columnListElement&&requestAnimationFrame(()=>{this.columnListElement&&this.rebuildToggles(this.columnListElement)})},{signal:this.disconnectSignal})}detach(){this.columnListElement=null,this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null}handleQuery(e){if("getContextMenuItems"===e.type){const t=e.context;if(!t.isHeader)return;const i=t.column;if(!i?.field)return;if(i.meta?.lockVisibility)return;return[{id:"visibility/hide-column",label:"Hide Column",icon:"👁",order:30,action:()=>this.hideColumn(i.field)}]}}getToolPanel(){return{id:o.PANEL_ID,title:"Columns",icon:"☰",tooltip:"Column visibility",order:100,render:e=>this.renderPanelContent(e)}}show(){this.grid.openToolPanel(),this.grid.expandedToolPanelSections.includes(o.PANEL_ID)||this.grid.toggleToolPanelSection(o.PANEL_ID)}hide(){this.grid.closeToolPanel()}toggle(){this.grid.isToolPanelOpen||this.grid.openToolPanel(),this.grid.toggleToolPanelSection(o.PANEL_ID)}isColumnVisible(e){return this.grid.isColumnVisible(e)}setColumnVisible(e,t){this.grid.setColumnVisible(e,t)}getVisibleColumns(){return this.grid.getAllColumns().filter(e=>e.visible).map(e=>e.field)}getHiddenColumns(){return this.grid.getAllColumns().filter(e=>!e.visible).map(e=>e.field)}showAll(){this.grid.showAllColumns()}toggleColumn(e){this.grid.toggleColumnVisibility(e)}showColumn(e){this.setColumnVisible(e,!0)}hideColumn(e){this.setColumnVisible(e,!1)}getAllColumns(){return this.grid.getAllColumns()}isPanelVisible(){return this.grid.isToolPanelOpen&&this.grid.expandedToolPanelSections.includes(o.PANEL_ID)}renderPanelContent(e){const t=document.createElement("div");t.className="tbw-visibility-content";const i=document.createElement("div");i.className="tbw-visibility-list",t.appendChild(i);const r=document.createElement("button");return r.className="tbw-visibility-show-all",r.textContent="Show All",r.addEventListener("click",()=>{this.grid.showAllColumns(),this.rebuildToggles(i)}),t.appendChild(r),this.columnListElement=i,this.rebuildToggles(i),e.appendChild(t),()=>{this.columnListElement=null,t.remove()}}hasReorderPlugin(){const e=this.grid?.getPluginByName?.("reorder");return!(!e||"function"!=typeof e.moveColumn)}rebuildToggles(e){const t=this.hasReorderPlugin();e.innerHTML="";const i=this.grid.getAllColumns().filter(e=>!e.utility),r=this.grid.query("getColumnGrouping"),s=r?.flat().filter(e=>e&&e.fields.length>0)??[];if(0===s.length)return void this.renderFlatColumnList(i,t,e);const n=/* @__PURE__ */new Map;for(const l of s)for(const e of l.fields)n.set(e,l);const o=/* @__PURE__ */new Set;for(const l of i){const r=n.get(l.field);if(r){if(!o.has(r.id)){o.add(r.id);const s=new Set(r.fields),n=i.filter(e=>s.has(e.field));n.length>0&&this.renderGroupSection(r,n,t,e)}}else{const r=i.indexOf(l);e.appendChild(this.createColumnRow(l,r,t,e))}}}renderGroupSection(e,t,i,r){const s=document.createElement("div");s.className="tbw-visibility-group-header",s.setAttribute("data-group-id",e.id),i&&(s.draggable=!0,s.classList.add("reorderable"),this.setupGroupDragListeners(s,e,r));const n=document.createElement("label");n.className="tbw-visibility-label";const o=document.createElement("input");o.type="checkbox";const l=t.filter(e=>e.visible).length,d=t.every(e=>e.lockVisible);l===t.length?(o.checked=!0,o.indeterminate=!1):0===l?(o.checked=!1,o.indeterminate=!1):(o.checked=!1,o.indeterminate=!0),o.disabled=d,o.addEventListener("change",()=>{const e=o.checked;for(const i of t)i.lockVisible||this.grid.setColumnVisible(i.field,e);setTimeout(()=>this.rebuildToggles(r),0)});const a=document.createElement("span");if(a.textContent=e.label,n.appendChild(o),n.appendChild(a),s.appendChild(n),i){const e=document.createElement("span");e.className="tbw-visibility-handle",this.setIcon(e,this.resolveIcon("dragHandle")),e.title="Drag to reorder group",s.insertBefore(e,n)}r.appendChild(s);const g=this.grid.getAllColumns().filter(e=>!e.utility);for(const c of t){const e=g.findIndex(e=>e.field===c.field),t=this.createColumnRow(c,e,i,r);t.classList.add("tbw-visibility-row--grouped"),r.appendChild(t)}}renderFlatColumnList(e,t,i){const r=this.grid.getAllColumns().filter(e=>!e.utility);for(const s of e){const e=r.findIndex(e=>e.field===s.field);i.appendChild(this.createColumnRow(s,e,t,i))}}createColumnRow(e,t,i,r){const s=e.header||e.field,o=document.createElement("div");o.className=e.lockVisible?"tbw-visibility-row locked":"tbw-visibility-row",o.setAttribute("data-field",e.field),o.setAttribute("data-index",String(t)),i&&n(e)&&(o.draggable=!0,o.classList.add("reorderable"),this.setupDragListeners(o,e.field,t,r));const l=document.createElement("label");l.className="tbw-visibility-label";const d=document.createElement("input");d.type="checkbox",d.checked=e.visible,d.disabled=e.lockVisible??!1,d.addEventListener("change",()=>{this.grid.toggleColumnVisibility(e.field),setTimeout(()=>this.rebuildToggles(r),0)});const a=document.createElement("span");if(a.textContent=s,l.appendChild(d),l.appendChild(a),i&&n(e)){const e=document.createElement("span");e.className="tbw-visibility-handle",this.setIcon(e,this.resolveIcon("dragHandle")),e.title="Drag to reorder",o.appendChild(e)}return o.appendChild(l),o}setupGroupDragListeners(e,t,i){e.addEventListener("dragstart",r=>{this.isDragging=!0,this.draggedGroupId=t.id,this.draggedGroupFields=[...t.fields],this.draggedField=null,this.draggedIndex=null,r.dataTransfer&&(r.dataTransfer.effectAllowed="move",r.dataTransfer.setData("text/plain",`group:${t.id}`)),e.classList.add("dragging"),i.querySelectorAll(".tbw-visibility-row--grouped").forEach(e=>{const t=e.getAttribute("data-field");t&&this.draggedGroupFields.includes(t)&&e.classList.add("dragging")})}),e.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedGroupId=null,this.draggedGroupFields=[],this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.clearDragClasses(i)}),e.addEventListener("dragover",r=>{if(r.preventDefault(),!this.isDragging)return;if(this.draggedGroupId===t.id)return;if(!this.draggedGroupId)return;const s=e.getBoundingClientRect(),n=s.top+s.height/2,o=r.clientY<n;this.clearDragClasses(i),e.classList.add("drop-target"),e.classList.toggle("drop-before",o),e.classList.toggle("drop-after",!o)}),e.addEventListener("dragleave",()=>{e.classList.remove("drop-target","drop-before","drop-after")}),e.addEventListener("drop",r=>{if(r.preventDefault(),!this.isDragging||!this.draggedGroupId||this.draggedGroupId===t.id)return;const s=e.getBoundingClientRect(),n=r.clientY<s.top+s.height/2;this.executeGroupDrop(this.draggedGroupFields,t.fields,n,i)})}executeGroupDrop(e,t,i,r){const s=this.grid.getAllColumns().map(e=>e.field),n=s.filter(t=>!e.includes(t)),o=i?t[0]:t[t.length-1],l=n.indexOf(o);if(-1===l)return;const d=i?l:l+1,a=s.filter(t=>e.includes(t));n.splice(d,0,...a),this.grid.setColumnOrder(n),requestAnimationFrame(()=>{this.columnListElement&&this.rebuildToggles(this.columnListElement)})}setupDragListeners(e,t,i,r){e.addEventListener("dragstart",r=>{this.isDragging=!0,this.draggedField=t,this.draggedIndex=i,this.draggedGroupId=null,this.draggedGroupFields=[],r.dataTransfer&&(r.dataTransfer.effectAllowed="move",r.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(r)}),e.addEventListener("dragover",s=>{if(s.preventDefault(),!this.isDragging)return;if(this.draggedGroupId){if(e.classList.contains("tbw-visibility-row--grouped"))return}else if(this.draggedField===t)return;const n=e.getBoundingClientRect(),o=n.top+n.height/2;this.dropIndex=s.clientY<o?i:i+1,this.clearDragClasses(r),this.draggedGroupId?(r.querySelector(`.tbw-visibility-group-header[data-group-id="${this.draggedGroupId}"]`)?.classList.add("dragging"),r.querySelectorAll(".tbw-visibility-row--grouped").forEach(e=>{const t=e.getAttribute("data-field");t&&this.draggedGroupFields.includes(t)&&e.classList.add("dragging")})):this.draggedField&&r.querySelector(`.tbw-visibility-row[data-field="${this.draggedField}"]`)?.classList.add("dragging"),e.classList.add("drop-target"),e.classList.toggle("drop-before",s.clientY<o),e.classList.toggle("drop-after",s.clientY>=o)}),e.addEventListener("dragleave",()=>{e.classList.remove("drop-target","drop-before","drop-after")}),e.addEventListener("drop",i=>{if(i.preventDefault(),!this.isDragging)return;if(this.draggedGroupId&&this.draggedGroupFields.length>0){if(e.classList.contains("tbw-visibility-row--grouped"))return;const s=e.getBoundingClientRect(),n=i.clientY<s.top+s.height/2;return void this.executeGroupDrop(this.draggedGroupFields,[t],n,r)}const s=this.draggedField,n=this.draggedIndex,o=this.dropIndex;if(null===s||null===n||null===o)return;const l=o>n?o-1:o;if(l!==n){const e=this.grid.getAllColumns(),t=e.filter(e=>!e.utility),i=t[l]?.field,r={field:s,fromIndex:n,toIndex:i?e.findIndex(e=>e.field===i):e.length};this.emit("column-reorder-request",r)}})}}export{o as VisibilityPlugin};
+function e(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function t(t,i,r,s){return`${e(r,s)} ${t}: ${i}\n\n  → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(t)}`}const i='<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>',r={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:i,filterActive:i,print:"🖨️"};class s{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const i=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(i),i.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...r,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),i=parseInt(t,10);if(!isNaN(i))return i}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(i,r){void 0!==r?console.warn(t(i,r,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${i}`)}throwDiagnostic(e,i){throw new Error(t(e,i,this.gridElement.id,this.name))}}function n(e){const t=e.meta??{};return!0!==t.lockPosition&&!0!==t.suppressMovable}class o extends s{static dependencies=[{name:"reorder",required:!1,reason:"Enables drag-to-reorder columns in visibility panel"}];static manifest={queries:[{type:"getContextMenuItems",description:'Contributes "Hide column" item to the header context menu'}]};name="visibility";static PANEL_ID="columns";styles='@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))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);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)}.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-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.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));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg));color:var(--tbw-color-fg);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))}.tbw-visibility-group-header{display:flex;align-items:center;padding:var(--tbw-menu-item-padding, .375rem .25rem);font-size:var(--tbw-font-size-sm, .8125rem);font-weight:600;color:var(--tbw-color-fg);border-bottom:1px solid var(--tbw-color-border);margin-top:var(--tbw-spacing-sm, .25rem);position:relative}.tbw-visibility-group-header:first-child{margin-top:0}.tbw-visibility-group-header .tbw-visibility-label{gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-visibility-group-header.reorderable{cursor:grab}.tbw-visibility-group-header.reorderable:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-group-header .tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-group-header.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-group-header.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-group-header.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-group-header.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row--grouped{padding-left:calc(var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem)) + .75rem)}}';get defaultConfig(){return{allowHideAll:!1}}columnListElement=null;isDragging=!1;draggedField=null;draggedIndex=null;dropIndex=null;draggedGroupId=null;draggedGroupFields=[];clearDragClasses(e){e.querySelectorAll(".tbw-visibility-row, .tbw-visibility-group-header").forEach(e=>{e.classList.remove("dragging","drop-target","drop-before","drop-after")})}attach(e){super.attach(e),this.gridElement.addEventListener("column-move",()=>{this.columnListElement&&requestAnimationFrame(()=>{this.columnListElement&&this.rebuildToggles(this.columnListElement)})},{signal:this.disconnectSignal})}detach(){this.columnListElement=null,this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null}handleQuery(e){if("getContextMenuItems"===e.type){const t=e.context;if(!t.isHeader)return;const i=t.column;if(!i?.field)return;if(i.meta?.lockVisibility)return;return[{id:"visibility/hide-column",label:"Hide Column",icon:"👁",order:30,action:()=>this.hideColumn(i.field)}]}}getToolPanel(){return{id:o.PANEL_ID,title:"Columns",icon:"☰",tooltip:"Column visibility",order:100,render:e=>this.renderPanelContent(e)}}show(){this.grid.openToolPanel(),this.grid.expandedToolPanelSections.includes(o.PANEL_ID)||this.grid.toggleToolPanelSection(o.PANEL_ID)}hide(){this.grid.closeToolPanel()}toggle(){this.grid.isToolPanelOpen||this.grid.openToolPanel(),this.grid.toggleToolPanelSection(o.PANEL_ID)}isColumnVisible(e){return this.grid.isColumnVisible(e)}setColumnVisible(e,t){this.grid.setColumnVisible(e,t)}getVisibleColumns(){return this.grid.getAllColumns().filter(e=>e.visible).map(e=>e.field)}getHiddenColumns(){return this.grid.getAllColumns().filter(e=>!e.visible).map(e=>e.field)}showAll(){this.grid.showAllColumns()}toggleColumn(e){this.grid.toggleColumnVisibility(e)}showColumn(e){this.setColumnVisible(e,!0)}hideColumn(e){this.setColumnVisible(e,!1)}getAllColumns(){return this.grid.getAllColumns()}isPanelVisible(){return this.grid.isToolPanelOpen&&this.grid.expandedToolPanelSections.includes(o.PANEL_ID)}renderPanelContent(e){const t=document.createElement("div");t.className="tbw-visibility-content";const i=document.createElement("div");i.className="tbw-visibility-list",t.appendChild(i);const r=document.createElement("button");return r.className="tbw-visibility-show-all",r.textContent="Show All",r.addEventListener("click",()=>{this.grid.showAllColumns(),this.rebuildToggles(i)}),t.appendChild(r),this.columnListElement=i,this.rebuildToggles(i),e.appendChild(t),()=>{this.columnListElement=null,t.remove()}}hasReorderPlugin(){const e=this.grid?.getPluginByName?.("reorder");return!(!e||"function"!=typeof e.moveColumn)}rebuildToggles(e){const t=this.hasReorderPlugin();e.innerHTML="";const i=this.grid.getAllColumns().filter(e=>!e.utility),r=this.grid.query("getColumnGrouping"),s=r?.flat().filter(e=>e&&e.fields.length>0)??[];if(0===s.length)return void this.renderFlatColumnList(i,t,e);const n=/* @__PURE__ */new Map;for(const l of s)for(const e of l.fields)n.set(e,l);const o=this.computeFragments(i,n);for(const l of o)if(l.group)this.renderGroupSection(l.group,l.columns,t,e);else{const r=i.indexOf(l.columns[0]);e.appendChild(this.createColumnRow(l.columns[0],r,t,e))}}computeFragments(e,t){const i=[];let r=null,s=[];for(const n of e){const e=t.get(n.field)??null;e&&r&&e.id===r.id?s.push(n):(s.length>0&&i.push({group:r,columns:s}),r=e,s=[n])}return s.length>0&&i.push({group:r,columns:s}),i}renderGroupSection(e,t,i,r){const s=t.map(e=>e.field),n=document.createElement("div");n.className="tbw-visibility-group-header",n.setAttribute("data-group-id",e.id),i&&(n.draggable=!0,n.classList.add("reorderable"),this.setupGroupDragListeners(n,e,s,r));const o=document.createElement("label");o.className="tbw-visibility-label";const l=document.createElement("input");l.type="checkbox";const d=t.filter(e=>e.visible).length,a=t.every(e=>e.lockVisible);d===t.length?(l.checked=!0,l.indeterminate=!1):0===d?(l.checked=!1,l.indeterminate=!1):(l.checked=!1,l.indeterminate=!0),l.disabled=a,l.addEventListener("change",()=>{const e=l.checked;for(const i of t)i.lockVisible||this.grid.setColumnVisible(i.field,e);setTimeout(()=>this.rebuildToggles(r),0)});const g=document.createElement("span");if(g.textContent=e.label,o.appendChild(l),o.appendChild(g),n.appendChild(o),i){const e=document.createElement("span");e.className="tbw-visibility-handle",this.setIcon(e,this.resolveIcon("dragHandle")),e.title="Drag to reorder group",n.insertBefore(e,o)}r.appendChild(n);const u=this.grid.getAllColumns().filter(e=>!e.utility);for(const c of t){const e=u.findIndex(e=>e.field===c.field),t=this.createColumnRow(c,e,i,r);t.classList.add("tbw-visibility-row--grouped"),r.appendChild(t)}}renderFlatColumnList(e,t,i){const r=this.grid.getAllColumns().filter(e=>!e.utility);for(const s of e){const e=r.findIndex(e=>e.field===s.field);i.appendChild(this.createColumnRow(s,e,t,i))}}createColumnRow(e,t,i,r){const s=e.header||e.field,o=document.createElement("div");o.className=e.lockVisible?"tbw-visibility-row locked":"tbw-visibility-row",o.setAttribute("data-field",e.field),o.setAttribute("data-index",String(t)),i&&n(e)&&(o.draggable=!0,o.classList.add("reorderable"),this.setupDragListeners(o,e.field,t,r));const l=document.createElement("label");l.className="tbw-visibility-label";const d=document.createElement("input");d.type="checkbox",d.checked=e.visible,d.disabled=e.lockVisible??!1,d.addEventListener("change",()=>{this.grid.toggleColumnVisibility(e.field),setTimeout(()=>this.rebuildToggles(r),0)});const a=document.createElement("span");if(a.textContent=s,l.appendChild(d),l.appendChild(a),i&&n(e)){const e=document.createElement("span");e.className="tbw-visibility-handle",this.setIcon(e,this.resolveIcon("dragHandle")),e.title="Drag to reorder",o.appendChild(e)}return o.appendChild(l),o}setupGroupDragListeners(e,t,i,r){e.addEventListener("dragstart",s=>{this.isDragging=!0,this.draggedGroupId=t.id,this.draggedGroupFields=[...i],this.draggedField=null,this.draggedIndex=null,s.dataTransfer&&(s.dataTransfer.effectAllowed="move",s.dataTransfer.setData("text/plain",`group:${t.id}`)),e.classList.add("dragging"),r.querySelectorAll(".tbw-visibility-row--grouped").forEach(e=>{const t=e.getAttribute("data-field");t&&this.draggedGroupFields.includes(t)&&e.classList.add("dragging")})}),e.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedGroupId=null,this.draggedGroupFields=[],this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.clearDragClasses(r)}),e.addEventListener("dragover",t=>{if(t.preventDefault(),!this.isDragging)return;if(this.draggedGroupFields.length===i.length&&this.draggedGroupFields.every(e=>i.includes(e)))return;if(!this.draggedGroupId)return;const s=e.getBoundingClientRect(),n=s.top+s.height/2,o=t.clientY<n;this.clearDragClasses(r),e.classList.add("drop-target"),e.classList.toggle("drop-before",o),e.classList.toggle("drop-after",!o)}),e.addEventListener("dragleave",()=>{e.classList.remove("drop-target","drop-before","drop-after")}),e.addEventListener("drop",t=>{if(t.preventDefault(),!this.isDragging||!this.draggedGroupId)return;if(this.draggedGroupFields.length===i.length&&this.draggedGroupFields.every(e=>i.includes(e)))return;const r=e.getBoundingClientRect(),s=t.clientY<r.top+r.height/2;this.executeGroupDrop(this.draggedGroupFields,i,s)})}executeGroupDrop(e,t,i){const r=this.grid.getAllColumns().map(e=>e.field),s=r.filter(t=>!e.includes(t)),n=i?t[0]:t[t.length-1],o=s.indexOf(n);if(-1===o)return;const l=i?o:o+1,d=r.filter(t=>e.includes(t));s.splice(l,0,...d);const a=this.grid.getPluginByName?.("reorder");a?.setColumnOrder&&a.gridElement?a.setColumnOrder(s):this.grid.setColumnOrder(s),requestAnimationFrame(()=>{this.columnListElement&&this.rebuildToggles(this.columnListElement)})}setupDragListeners(e,t,i,r){e.addEventListener("dragstart",r=>{this.isDragging=!0,this.draggedField=t,this.draggedIndex=i,this.draggedGroupId=null,this.draggedGroupFields=[],r.dataTransfer&&(r.dataTransfer.effectAllowed="move",r.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(r)}),e.addEventListener("dragover",s=>{if(s.preventDefault(),!this.isDragging)return;if(this.draggedGroupId){if(e.classList.contains("tbw-visibility-row--grouped"))return}else if(this.draggedField===t)return;const n=e.getBoundingClientRect(),o=n.top+n.height/2;this.dropIndex=s.clientY<o?i:i+1,this.clearDragClasses(r),this.draggedGroupId?(r.querySelector(`.tbw-visibility-group-header[data-group-id="${this.draggedGroupId}"]`)?.classList.add("dragging"),r.querySelectorAll(".tbw-visibility-row--grouped").forEach(e=>{const t=e.getAttribute("data-field");t&&this.draggedGroupFields.includes(t)&&e.classList.add("dragging")})):this.draggedField&&r.querySelector(`.tbw-visibility-row[data-field="${this.draggedField}"]`)?.classList.add("dragging"),e.classList.add("drop-target"),e.classList.toggle("drop-before",s.clientY<o),e.classList.toggle("drop-after",s.clientY>=o)}),e.addEventListener("dragleave",()=>{e.classList.remove("drop-target","drop-before","drop-after")}),e.addEventListener("drop",i=>{if(i.preventDefault(),!this.isDragging)return;if(this.draggedGroupId&&this.draggedGroupFields.length>0){if(e.classList.contains("tbw-visibility-row--grouped"))return;const r=e.getBoundingClientRect(),s=i.clientY<r.top+r.height/2;return void this.executeGroupDrop(this.draggedGroupFields,[t],s)}const r=this.draggedField,s=this.draggedIndex,n=this.dropIndex;if(null===r||null===s||null===n)return;const o=n>s?n-1:n;if(o!==s){const e=this.grid.getAllColumns(),t=e.filter(e=>!e.utility),i=t[o]?.field,n={field:r,fromIndex:s,toIndex:i?e.findIndex(e=>e.field===i):e.length};this.emit("column-reorder-request",n)}})}}export{o as VisibilityPlugin};
 //# sourceMappingURL=index.js.map