@limetech/lime-elements 39.19.0 → 39.20.0

package/dist/types/components/table/row-drag-manager.d.ts

@@ -0,0 +1,58 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ColumnDefinition as TabulatorColumnDefinition, RowComponent as TabulatorRowComponent } from 'tabulator-tables';
+import { ElementPool } from './element-pool';
+import { RowReorderEvent } from './table.types';
+import { Languages } from '../date-picker/date.types';
+/**
+ * Provides row drag-and-drop reordering configuration for Tabulator
+ * using native movableRows with a custom drag handle
+ */
+export declare class RowDragManager {
+    private readonly pool;
+    private readonly reorderEvent;
+    private readonly getLanguage;
+    private mutationObserver;
+    constructor(pool: ElementPool, reorderEvent: EventEmitter<RowReorderEvent<unknown>>, getLanguage: () => Languages);
+    /**
+     * Start releasing drag-handle elements back to the pool when Tabulator
+     * virtualizes rows out of view. Safe to call multiple times — a previous
+     * observer is disconnected first.
+     *
+     * @param container - The element that hosts the Tabulator table.
+     */
+    observe(container: HTMLElement): void;
+    /**
+     * Disconnects the mutation observer. Call when the manager is no longer
+     * needed (e.g. on `disconnectedCallback` or when `movableRows` is toggled).
+     */
+    destroy(): void;
+    /**
+     * Returns the Tabulator rowHeader config that renders
+     * a limel-drag-handle and restricts dragging to that cell
+     */
+    getRowHeaderDefinition(): Partial<TabulatorColumnDefinition>;
+    /**
+     * Tabulator rowMoved event handler.
+     * Attach this to the tabulator instance via `tabulator.on('rowMoved', ...)`
+     * @param row
+     */
+    handleRowMoved(row: TabulatorRowComponent): void;
+    /**
+     * Tabulator fires `rowMoved` / `rowMoveCancelled` from its `mouseup`
+     * handler. The browser may then dispatch a synthetic `click` on the drop
+     * target which would bubble to Tabulator's row-click handling and trigger
+     * a spurious row activation. Call this from both events: it installs a
+     * one-shot capture-phase click listener that swallows that single click
+     * before Tabulator can see it. If no click arrives (rare, but possible),
+     * the listener is removed on the next macrotask so it can never swallow a
+     * later, intentional click.
+     *
+     * @param target - Element that should swallow the post-drop click
+     * (typically the table host).
+     */
+    readonly armPostDropClickGuard: (target: EventTarget) => void;
+    private readonly handleCellClick;
+    private readonly releaseDetachedHandles;
+    private getDragHandleFormatter;
+}
+//# sourceMappingURL=row-drag-manager.d.ts.map

package/dist/types/components/table/table.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Column, TableParams, ColumnSorter, ColumnAggregate, RowData } from './table.types';
+import { Column, TableParams, ColumnSorter, ColumnAggregate, RowData, RowReorderEvent } from './table.types';
 import { Layout } from './layout';
 import { Languages } from '../date-picker/date.types';
 /**
@@ -7,6 +7,7 @@ import { Languages } from '../date-picker/date.types';
  * @exampleComponent limel-example-table-custom-components
  * @exampleComponent limel-example-table-header-menu
  * @exampleComponent limel-example-table-movable-columns
+ * @exampleComponent limel-example-table-movable-rows
  * @exampleComponent limel-example-table-sorting-disabled
  * @exampleComponent limel-example-table-pagination
  * @exampleComponent limel-example-table-local
@@ -66,6 +67,13 @@ export declare class Table {
      * Set to `true` to enable reordering of the columns by dragging them
      */
     movableColumns: boolean;
+    /**
+     * Set to `true` to enable reordering of the rows by dragging them.
+     * A drag handle will be rendered at the start of each row.
+     * Listen for the `reorder` event and update the `data` prop accordingly —
+     * the table will not persist the new order on its own.
+     */
+    movableRows: boolean;
     /**
      * Set to `false` to disable column sorting through header interactions.
      * Programmatic sorting through the `sorting` prop and `sort` event remains available.
@@ -126,6 +134,14 @@ export declare class Table {
      * Emitted when the columns have been changed
      */
     changeColumns: EventEmitter<Column[]>;
+    /**
+     * Emitted when a row has been reordered via drag-and-drop.
+     * The event detail describes which row was moved and where it was placed.
+     * The consumer is responsible for updating the `data` prop to reflect the
+     * new order; otherwise the next render will revert the row to its original
+     * position.
+     */
+    reorder: EventEmitter<RowReorderEvent<unknown>>;
     /**
      * Emitted when the row selection has been changed
      */
@@ -143,8 +159,10 @@ export declare class Table {
     private destroyed;
     private resizeObserver;
     private currentSorting;
+    private rowDragManager;
     private tableSelection;
     private shouldSort;
+    private hasWarnedOnConflictingMovableAndSortable;
     constructor();
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -158,7 +176,9 @@ export declare class Table {
     protected updateAggregates(newAggregates: ColumnAggregate[], oldAggregates: ColumnAggregate[]): void;
     protected updateSelection(newSelection: any[]): void;
     protected updateSelectable(): void;
+    protected updateMovableRows(): void;
     protected updateSortableColumns(): void;
+    private warnOnConflictingMovableAndSortable;
     protected updateSorting(newValue: ColumnSorter[], oldValue: ColumnSorter[]): void;
     private reformatChangedRows;
     private fillMissingFields;
@@ -170,6 +190,7 @@ export declare class Table {
     private init;
     private initTabulatorComponent;
     private createTabulator;
+    private initRowDragManager;
     private initTableSelection;
     private setSelection;
     private updateMaxPage;
@@ -196,6 +217,7 @@ export declare class Table {
     private calculatePageCount;
     private hasAggregation;
     private readonly getColumnOptions;
+    private readonly getRowDragOptions;
     private readonly handleMoveColumn;
     private readonly findColumn;
     render(): any;

package/dist/types/components/table/table.types.d.ts

@@ -187,4 +187,24 @@ export interface ColumnAggregate {
 export type RowData = {
     id?: string | number;
 };
+/**
+ * Describes a row reorder operation.
+ * Emitted when a row is moved via drag-and-drop.
+ * @public
+ */
+export interface RowReorderEvent<T> {
+    /**
+     * The data of the row that was moved
+     */
+    fromRow: T;
+    /**
+     * The data of the row that was used as the drop target
+     */
+    toRow: T;
+    /**
+     * If `true`, the row was placed above the target row.
+     * If `false`, it was placed below.
+     */
+    above: boolean;
+}
 //# sourceMappingURL=table.types.d.ts.map

package/dist/types/components.d.ts

@@ -46,7 +46,7 @@ import { EditorUiType } from "./components/text-editor/types";
 import { Option } from "./components/select/option.types";
 import { SpinnerSize } from "./components/spinner/spinner.types";
 import { Tab } from "./components/tab-bar/tab.types";
-import { Column, ColumnAggregate, ColumnSorter, RowData, TableParams } from "./components/table/table.types";
+import { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
 import { Layout } from "./components/table/layout";
 import { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
 export { ActionBarItem } from "./components/action-bar/action-bar.types";
@@ -90,7 +90,7 @@ export { EditorUiType } from "./components/text-editor/types";
 export { Option } from "./components/select/option.types";
 export { SpinnerSize } from "./components/spinner/spinner.types";
 export { Tab } from "./components/tab-bar/tab.types";
-export { Column, ColumnAggregate, ColumnSorter, RowData, TableParams } from "./components/table/table.types";
+export { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
 export { Layout } from "./components/table/layout";
 export { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
 export namespace Components {
@@ -3615,6 +3615,7 @@ export namespace Components {
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
+     * @exampleComponent limel-example-table-movable-rows
      * @exampleComponent limel-example-table-sorting-disabled
      * @exampleComponent limel-example-table-pagination
      * @exampleComponent limel-example-table-local
@@ -3674,6 +3675,10 @@ export namespace Components {
           * Set to `true` to enable reordering of the columns by dragging them
          */
         "movableColumns": boolean;
+        /**
+          * Set to `true` to enable reordering of the rows by dragging them. A drag handle will be rendered at the start of each row. Listen for the `reorder` event and update the `data` prop accordingly — the table will not persist the new order on its own.
+         */
+        "movableRows": boolean;
         /**
           * The page to show
           * @default FIRST_PAGE
@@ -6247,6 +6252,7 @@ declare global {
         "load": TableParams;
         "activate": object;
         "changeColumns": Column[];
+        "reorder": RowReorderEvent<unknown>;
         "select": object[];
         "selectAll": boolean;
     }
@@ -6255,6 +6261,7 @@ declare global {
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
+     * @exampleComponent limel-example-table-movable-rows
      * @exampleComponent limel-example-table-sorting-disabled
      * @exampleComponent limel-example-table-pagination
      * @exampleComponent limel-example-table-local
@@ -10255,6 +10262,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
+     * @exampleComponent limel-example-table-movable-rows
      * @exampleComponent limel-example-table-sorting-disabled
      * @exampleComponent limel-example-table-pagination
      * @exampleComponent limel-example-table-local
@@ -10314,6 +10322,10 @@ declare namespace LocalJSX {
           * Set to `true` to enable reordering of the columns by dragging them
          */
         "movableColumns"?: boolean;
+        /**
+          * Set to `true` to enable reordering of the rows by dragging them. A drag handle will be rendered at the start of each row. Listen for the `reorder` event and update the `data` prop accordingly — the table will not persist the new order on its own.
+         */
+        "movableRows"?: boolean;
         /**
           * Emitted when a row is activated
          */
@@ -10330,6 +10342,10 @@ declare namespace LocalJSX {
           * Emitted when `mode` is `remote` and the table is loading new data. The consumer is responsible for giving the table new data
          */
         "onLoad"?: (event: LimelTableCustomEvent<TableParams>) => void;
+        /**
+          * Emitted when a row has been reordered via drag-and-drop. The event detail describes which row was moved and where it was placed. The consumer is responsible for updating the `data` prop to reflect the new order; otherwise the next render will revert the row to its original position.
+         */
+        "onReorder"?: (event: LimelTableCustomEvent<RowReorderEvent<unknown>>) => void;
         /**
           * Emitted when the row selection has been changed
          */
@@ -11177,6 +11193,7 @@ declare namespace LocalJSX {
         "pageSize": number;
         "totalRows": number;
         "movableColumns": boolean;
+        "movableRows": boolean;
         "sortableColumns": boolean;
         "loading": boolean;
         "page": number;
@@ -12561,6 +12578,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-table-custom-components
              * @exampleComponent limel-example-table-header-menu
              * @exampleComponent limel-example-table-movable-columns
+             * @exampleComponent limel-example-table-movable-rows
              * @exampleComponent limel-example-table-sorting-disabled
              * @exampleComponent limel-example-table-pagination
              * @exampleComponent limel-example-table-local

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "39.19.0",
+  "version": "39.20.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",