@toolbox-web/grid 0.6.0 → 1.1.0

package/lib/plugins/reorder/ReorderPlugin.d.ts

@@ -1,16 +1,80 @@
 import { BaseGridPlugin } from '../../core/plugin/base-plugin';
 import { ReorderConfig } from './types';
 /**
- * Column Reordering Plugin for tbw-grid
+ * Column Reorder Plugin for tbw-grid
  *
- * @example
+ * Lets users rearrange columns by dragging and dropping column headers. Supports smooth
+ * FLIP animations, fade transitions, or instant reordering. Animation respects the
+ * grid-level `animation.mode` setting.
+ *
+ * ## Installation
+ *
+ * ```ts
+ * import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder';
+ * ```
+ *
+ * ## Configuration Options
+ *
+ * | Option | Type | Default | Description |
+ * |--------|------|---------|-------------|
+ * | `animation` | `false \| 'flip' \| 'fade'` | `'flip'` | Animation type for column moves |
+ * | `animationDuration` | `number` | `200` | Animation duration in ms |
+ *
+ * ## Keyboard Shortcuts
+ *
+ * | Key | Action |
+ * |-----|--------|
+ * | `Alt + ←` | Move focused column left |
+ * | `Alt + →` | Move focused column right |
+ *
+ * ## Events
+ *
+ * | Event | Detail | Cancelable | Description |
+ * |-------|--------|------------|-------------|
+ * | `column-move` | `{ field, fromIndex, toIndex, columnOrder }` | Yes | Fired when a column move is attempted |
+ *
+ * @example Basic Drag-and-Drop Reordering
  * ```ts
- * new ReorderPlugin()
+ * import '@toolbox-web/grid';
+ * import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder';
+ *
+ * const grid = document.querySelector('tbw-grid');
+ * grid.gridConfig = {
+ *   columns: [
+ *     { field: 'id', header: 'ID' },
+ *     { field: 'name', header: 'Name' },
+ *     { field: 'email', header: 'Email' },
+ *   ],
+ *   plugins: [new ReorderPlugin({ animation: 'flip', animationDuration: 200 })],
+ * };
+ *
+ * // Persist column order
+ * grid.addEventListener('column-move', (e) => {
+ *   localStorage.setItem('columnOrder', JSON.stringify(e.detail.columnOrder));
+ * });
  * ```
+ *
+ * @example Prevent Moves That Break Group Boundaries
+ * ```ts
+ * grid.addEventListener('column-move', (e) => {
+ *   if (!isValidMoveWithinGroup(e.detail.field, e.detail.fromIndex, e.detail.toIndex)) {
+ *     e.preventDefault(); // Column snaps back to original position
+ *   }
+ * });
+ * ```
+ *
+ * @see {@link ReorderConfig} for all configuration options
+ * @see {@link ColumnMoveDetail} for the event detail structure
+ * @see {@link GroupingColumnsPlugin} for column group integration
+ *
+ * @internal Extends BaseGridPlugin
  */
 export declare class ReorderPlugin extends BaseGridPlugin<ReorderConfig> {
+    /** @internal */
     readonly name = "reorder";
+    /** @internal */
     readonly styles: string;
+    /** @internal */
     protected get defaultConfig(): Partial<ReorderConfig>;
     /**
      * Resolve animation type from plugin config.
@@ -34,11 +98,15 @@ export declare class ReorderPlugin extends BaseGridPlugin<ReorderConfig> {
      * Clear all drag-related classes from header cells.
      */
     private clearDragClasses;
+    /** @internal */
     attach(grid: import('../../core/plugin/base-plugin').GridElement): void;
+    /** @internal */
     detach(): void;
+    /** @internal */
     afterRender(): void;
     /**
      * Handle Alt+Arrow keyboard shortcuts for column reordering.
+     * @internal
      */
     onKeyDown(event: KeyboardEvent): boolean | void;
     /**

package/lib/plugins/reorder/ReorderPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/reorder/ReorderPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAkB,MAAM,+BAA+B,CAAC;AAI/E,OAAO,KAAK,EAAoB,aAAa,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D,QAAQ,CAAC,IAAI,aAAa;IAC1B,SAAkB,MAAM,SAAU;IAElC,cAAuB,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,CAI7D;IAED;;;OAGG;IACH,OAAO,KAAK,aAAa,GAYxB;IAED;;;OAGG;IACH,cAAuB,iBAAiB,IAAI,MAAM,CAMjD;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,SAAS,CAAuB;IAExC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAShC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASf,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAiBvE,MAAM,IAAI,IAAI;IAUd,WAAW,IAAI,IAAI;IAiG5B;;OAEG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAyCxD;;;OAGG;IACH,cAAc,IAAI,MAAM,EAAE;IAI1B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAoBhD;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IAIrC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAQxB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAS9B;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAmDnB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAgDnB;;OAEG;IACH,OAAO,CAAC,iBAAiB;CAqB1B"}
+{"version":3,"file":"ReorderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/reorder/ReorderPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAkB,MAAM,+BAA+B,CAAC;AAI/E,OAAO,KAAK,EAAoB,aAAa,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBAAa,aAAc,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D,gBAAgB;IAChB,QAAQ,CAAC,IAAI,aAAa;IAC1B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,CAI7D;IAED;;;OAGG;IACH,OAAO,KAAK,aAAa,GAQxB;IAED;;;OAGG;IACH,cAAuB,iBAAiB,IAAI,MAAM,CAMjD;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,SAAS,CAAuB;IAExC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAShC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAiBhF,gBAAgB;IACP,MAAM,IAAI,IAAI;IAUvB,gBAAgB;IACP,WAAW,IAAI,IAAI;IAiG5B;;;OAGG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAyCxD;;;OAGG;IACH,cAAc,IAAI,MAAM,EAAE;IAI1B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAoBhD;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IAIrC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAQxB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAS9B;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAmDnB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAgDnB;;OAEG;IACH,OAAO,CAAC,iBAAiB;CAqB1B"}

package/lib/plugins/reorder/index.d.ts

@@ -1,6 +1,8 @@
 /**
  * Reorder Plugin Entry Point
  * Re-exports plugin class and types for tree-shakeable imports.
+ *
+ * @module Plugins/Reorder
  */
 export { ReorderPlugin } from './ReorderPlugin';
 export type { ColumnMoveDetail, ReorderAnimation, ReorderConfig } from './types';

package/lib/plugins/reorder/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/reorder/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/reorder/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/lib/plugins/reorder/index.js

@@ -78,6 +78,28 @@ class A {
    * ```
    */
   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.
@@ -237,23 +259,6 @@ class A {
   get gridElement() {
     return this.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.gridElement;
-  }
   /**
    * Get the disconnect signal for event listener cleanup.
    * This signal is aborted when the grid disconnects from the DOM.
@@ -367,8 +372,11 @@ function p(l, e, t) {
 }
 const _ = '@layer tbw-plugins{.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.cell.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration, .2s) ease-out backwards}}';
 class R extends A {
+  /** @internal */
   name = "reorder";
+  /** @internal */
   styles = _;
+  /** @internal */
   get defaultConfig() {
     return {
       animation: "flip"
@@ -380,7 +388,7 @@ class R extends A {
    * Uses base class isAnimationEnabled to respect grid-level settings.
    */
   get animationType() {
-    return this.isAnimationEnabled ? this.config.animation !== void 0 ? this.config.animation : this.config.viewTransition === !1 ? !1 : (this.config.viewTransition === !0, "flip") : !1;
+    return this.isAnimationEnabled ? this.config.animation !== void 0 ? this.config.animation : "flip" : !1;
   }
   /**
    * Get animation duration, allowing plugin config override.
@@ -413,6 +421,7 @@ class R extends A {
   }
   // #endregion
   // #region Lifecycle
+  /** @internal */
   attach(e) {
     super.attach(e), e.addEventListener(
       "column-reorder-request",
@@ -423,11 +432,13 @@ class R extends A {
       { signal: this.disconnectSignal }
     );
   }
+  /** @internal */
   detach() {
     this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
   }
   // #endregion
   // #region Hooks
+  /** @internal */
   afterRender() {
     const e = this.gridElement;
     if (!e) return;
@@ -467,6 +478,7 @@ class R extends A {
   }
   /**
    * Handle Alt+Arrow keyboard shortcuts for column reordering.
+   * @internal
    */
   onKeyDown(e) {
     if (!e.altKey || e.key !== "ArrowLeft" && e.key !== "ArrowRight")