@toolbox-web/grid 1.1.2 → 1.3.0

package/lib/plugins/row-reorder/RowReorderPlugin.d.ts

@@ -0,0 +1,155 @@
+import { BaseGridPlugin } from '../../core/plugin/base-plugin';
+import { ColumnConfig } from '../../core/types';
+import { RowReorderConfig } from './types';
+/** Field name for the drag handle column */
+export declare const ROW_DRAG_HANDLE_FIELD = "__tbw_row_drag";
+/**
+ * Row Reorder Plugin for tbw-grid
+ *
+ * Enables row reordering via keyboard shortcuts (Ctrl+Up/Down) and drag-drop.
+ * Supports validation callbacks and debounced keyboard moves.
+ *
+ * ## Installation
+ *
+ * ```ts
+ * import { RowReorderPlugin } from '@toolbox-web/grid/plugins/row-reorder';
+ * ```
+ *
+ * ## Configuration Options
+ *
+ * | Option | Type | Default | Description |
+ * |--------|------|---------|-------------|
+ * | `enableKeyboard` | `boolean` | `true` | Enable Ctrl+Up/Down shortcuts |
+ * | `showDragHandle` | `boolean` | `true` | Show drag handle column |
+ * | `dragHandlePosition` | `'left' \| 'right'` | `'left'` | Drag handle column position |
+ * | `dragHandleWidth` | `number` | `40` | Drag handle column width |
+ * | `canMove` | `function` | - | Validation callback |
+ * | `debounceMs` | `number` | `300` | Debounce time for keyboard moves |
+ * | `animation` | `false \| 'flip'` | `'flip'` | Animation for row moves |
+ *
+ * ## Keyboard Shortcuts
+ *
+ * | Key | Action |
+ * |-----|--------|
+ * | `Ctrl + ↑` | Move focused row up |
+ * | `Ctrl + ↓` | Move focused row down |
+ *
+ * ## Events
+ *
+ * | Event | Detail | Cancelable | Description |
+ * |-------|--------|------------|-------------|
+ * | `row-move` | `RowMoveDetail` | Yes | Fired when a row move is attempted |
+ *
+ * @example Basic Row Reordering
+ * ```ts
+ * import '@toolbox-web/grid';
+ * import { RowReorderPlugin } from '@toolbox-web/grid/plugins/row-reorder';
+ *
+ * const grid = document.querySelector('tbw-grid');
+ * grid.gridConfig = {
+ *   columns: [
+ *     { field: 'id', header: 'ID' },
+ *     { field: 'name', header: 'Name' },
+ *   ],
+ *   plugins: [new RowReorderPlugin()],
+ * };
+ *
+ * grid.addEventListener('row-move', (e) => {
+ *   console.log('Row moved from', e.detail.fromIndex, 'to', e.detail.toIndex);
+ * });
+ * ```
+ *
+ * @example With Validation
+ * ```ts
+ * new RowReorderPlugin({
+ *   canMove: (row, fromIndex, toIndex, direction) => {
+ *     // Prevent moving locked rows
+ *     return !row.locked;
+ *   },
+ * })
+ * ```
+ *
+ * @see {@link RowReorderConfig} for all configuration options
+ * @see {@link RowMoveDetail} for the event detail structure
+ */
+export declare class RowReorderPlugin extends BaseGridPlugin<RowReorderConfig> {
+    /** @internal */
+    readonly name = "rowReorder";
+    /** @internal */
+    readonly styles: string;
+    /** @internal */
+    protected get defaultConfig(): Partial<RowReorderConfig>;
+    private isDragging;
+    private draggedRowIndex;
+    private dropRowIndex;
+    private pendingMove;
+    private debounceTimer;
+    /** Column index to use when flushing pending move */
+    private lastFocusCol;
+    /** @internal */
+    detach(): void;
+    /** @internal */
+    processColumns(columns: readonly ColumnConfig[]): ColumnConfig[];
+    /** @internal */
+    afterRender(): void;
+    /**
+     * Handle Ctrl+Arrow keyboard shortcuts for row reordering.
+     * @internal
+     */
+    onKeyDown(event: KeyboardEvent): boolean | void;
+    /**
+     * Flush pending keyboard moves when user clicks a cell.
+     * This commits the move immediately so focus works correctly.
+     * @internal
+     */
+    onCellClick(): void;
+    /**
+     * Move a row to a new position programmatically.
+     * @param fromIndex - Current index of the row
+     * @param toIndex - Target index
+     */
+    moveRow(fromIndex: number, toIndex: number): void;
+    /**
+     * Check if a row can be moved to a position.
+     * @param fromIndex - Current index of the row
+     * @param toIndex - Target index
+     */
+    canMoveRow(fromIndex: number, toIndex: number): boolean;
+    /**
+     * Set up drag start/end listeners on the drag handle element.
+     */
+    private setupHandleDragListeners;
+    /**
+     * Set up drop target listeners on a row element.
+     * All rows are valid drop targets during drag operations.
+     */
+    private setupRowDropListeners;
+    /**
+     * Handle debounced keyboard moves.
+     * Rows move immediately for visual feedback, but the event emission is debounced.
+     */
+    private handleKeyboardMove;
+    /**
+     * Flush the pending move by emitting the event.
+     * Called when debounce timer fires or user clicks elsewhere.
+     */
+    private flushPendingMove;
+    /**
+     * Execute a row move and emit the event.
+     */
+    private executeMove;
+    /**
+     * Get the row index from a row element by checking data-row attribute on cells.
+     * This is consistent with how other plugins retrieve row indices.
+     */
+    private getRowIndex;
+    /**
+     * Clear all drag-related classes from rows.
+     */
+    private clearDragClasses;
+    /**
+     * Clear the debounce timer.
+     */
+    private clearDebounceTimer;
+}
+//# sourceMappingURL=RowReorderPlugin.d.ts.map

package/lib/plugins/row-reorder/RowReorderPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowReorderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/row-reorder/RowReorderPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAA8B,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE5E,4CAA4C;AAC5C,eAAO,MAAM,qBAAqB,mBAAmB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBAAa,gBAAiB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACpE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAShE;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,aAAa,CAA8C;IACnE,qDAAqD;IACrD,OAAO,CAAC,YAAY,CAAK;IAKzB,gBAAgB;IACP,MAAM,IAAI,IAAI;IAWvB,gBAAgB;IACP,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAwCzE,gBAAgB;IACP,WAAW,IAAI,IAAI;IA+B5B;;;OAGG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAoCxD;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAS5B;;;;OAIG;IACH,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAiBjD;;;;OAIG;IACH,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAevD;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAwBhC;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAkD7B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAmD1B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAmCxB;;OAEG;IACH,OAAO,CAAC,WAAW;IAqBnB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAO3B"}

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

@@ -0,0 +1,9 @@
+/**
+ * Row Reorder Plugin Entry Point
+ * Re-exports plugin class and types for tree-shakeable imports.
+ *
+ * @module Plugins/Row-Reorder
+ */
+export { ROW_DRAG_HANDLE_FIELD, RowReorderPlugin } from './RowReorderPlugin';
+export type { PendingMove, RowMoveDetail, RowReorderConfig } from './types';
+//# sourceMappingURL=index.d.ts.map

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

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