@3mo/data-grid 0.20.2 → 0.21.0-preview.0

package/dist/DataGridReorderabilityController.js

@@ -0,0 +1,176 @@
+import { AsyncDirective, Controller, directive, noChange, PartType } from '@a11d/lit';
+import { DataGridSelectability } from './DataGridSelectionController.js';
+class DragGhostImage extends Image {
+    constructor() {
+        super(...arguments);
+        this.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==';
+    }
+    static { this.instance = new DragGhostImage(); }
+}
+export var ReorderabilityState;
+(function (ReorderabilityState) {
+    ReorderabilityState["Idle"] = "idle";
+    ReorderabilityState["Dragging"] = "dragging";
+    ReorderabilityState["DropBefore"] = "drop-before";
+    ReorderabilityState["DropAfter"] = "drop-after";
+})(ReorderabilityState || (ReorderabilityState = {}));
+export class ReorderabilityController extends Controller {
+    constructor(host, options) {
+        super(host);
+        this.host = host;
+        this.options = options;
+        this.items = new Map();
+    }
+    get item() {
+        const controller = this;
+        return directive(class extends AsyncDirective {
+            constructor(partInfo) {
+                super(partInfo);
+                if (partInfo.type !== PartType.ELEMENT) {
+                    throw new Error('This directive can only be used on an element');
+                }
+            }
+            render(options) {
+                options;
+                return noChange;
+            }
+            update(part, [options]) {
+                this.part = part;
+                this.options = options;
+                const element = part.element;
+                controller.items.set(element, options);
+                element.draggable = !options.disabled;
+                element.dataset.reorderability = this.state;
+                this.addEventListeners();
+                return noChange;
+            }
+            get state() {
+                const draggingItem = controller.draggingItem;
+                switch (true) {
+                    case draggingItem === undefined:
+                        return ReorderabilityState.Idle;
+                    case draggingItem.source === this.options.index:
+                        return ReorderabilityState.Dragging;
+                    case draggingItem.destination !== this.options.index:
+                        return ReorderabilityState.Idle;
+                    case draggingItem.source > this.options.index:
+                        return ReorderabilityState.DropBefore;
+                    default:
+                        return ReorderabilityState.DropAfter;
+                }
+            }
+            disconnected() {
+                controller.items.delete(this.part.element);
+                this.removeEventListeners();
+            }
+            reconnected() {
+                this.addEventListeners();
+            }
+            addEventListeners() {
+                if (!this.part)
+                    return;
+                const element = this.part.element;
+                element.addEventListener('dragstart', controller, { capture: true });
+                element.addEventListener('dragover', controller, { capture: true });
+                element.addEventListener('drop', controller, { capture: true });
+                element.addEventListener('dragend', controller, { capture: true });
+            }
+            removeEventListeners() {
+                if (!this.part)
+                    return;
+                const element = this.part.element;
+                element.removeEventListener('dragstart', controller);
+                element.removeEventListener('dragover', controller);
+                element.removeEventListener('drop', controller);
+                element.removeEventListener('dragend', controller);
+            }
+        });
+    }
+    handleEvent(e) {
+        if (this.items.get(e.currentTarget)?.disabled) {
+            return;
+        }
+        switch (e.type) {
+            case 'dragstart':
+                return this.handleDragStart(e);
+            case 'dragover':
+                return this.handleDropOver(e);
+            case 'drop':
+                return this.handleDrop(e);
+            case 'dragend':
+                return this.handleDragEnd(e);
+        }
+    }
+    handleDragStart(e) {
+        const index = this.items.get(e.currentTarget).index;
+        this.draggingItem = { source: index, destination: index };
+        e.dataTransfer?.setDragImage(DragGhostImage.instance, 0, 0);
+        e.dataTransfer.effectAllowed = 'move';
+        this.host.requestUpdate();
+    }
+    handleDropOver(e) {
+        if (this.draggingItem) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            this.draggingItem.destination = this.items.get(e.currentTarget).index;
+            this.host.requestUpdate();
+        }
+    }
+    handleDrop(e) {
+        e.preventDefault();
+        if (!this.draggingItem) {
+            return;
+        }
+        this.handleReorder(this.draggingItem.source, this.draggingItem.destination);
+        this.draggingItem = undefined;
+        this.host.requestUpdate();
+    }
+    handleDragEnd(e) {
+        e;
+        this.draggingItem = undefined;
+        this.host.requestUpdate();
+    }
+    handleReorder(source, destination) {
+        this.options.handleReorder?.(source, destination);
+    }
+}
+export class DataGridReorderabilityController extends ReorderabilityController {
+    constructor(host) {
+        super(host, {});
+        this.host = host;
+    }
+    get enabled() {
+        return this.host.reorderability
+            && this.host.sortingController.enabled === false
+            && this.host.selectionController.selectability !== DataGridSelectability.Multiple
+            && this.host.detailsController.hasDetails === false;
+    }
+    reorder(source, destination) {
+        this.handleReorder(source, destination);
+    }
+    handleReorder(source, destination) {
+        if (source === destination) {
+            return;
+        }
+        const d = [...this.host.data];
+        const [movedItem] = d.splice(source, 1);
+        d.splice(destination, 0, movedItem);
+        this.host.data = d;
+        const isMovingDown = source < destination;
+        this.host.reorder.dispatch([
+            {
+                record: this.host.dataRecords[destination],
+                oldIndex: source,
+                type: 'move',
+            },
+            ...Array.from({ length: Math.abs(destination - source) })
+                .fill(0)
+                .map((_, i) => isMovingDown ? source + i : destination + i + 1)
+                .map(i => ({
+                record: this.host.dataRecords[i],
+                oldIndex: isMovingDown ? i + 1 : i - 1,
+                type: 'shift',
+            }))
+        ]);
+    }
+}

package/dist/DataGridSelectionController.d.ts

@@ -24,7 +24,7 @@ export declare class DataGridSelectionController<TData> {
     readonly host: SelectableComponent<TData>;
     private lastActiveSelection?;
     constructor(host: SelectableComponent<TData>);
-    private get selectability();
+    get selectability(): DataGridSelectability | undefined;
     get hasSelection(): boolean;
     private get data();
     private get selectableData();

package/dist/DataGridSelectionController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridSelectionController.d.ts","sourceRoot":"","sources":["../DataGridSelectionController.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,oBAAY,qBAAqB;IAChC,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AAED,oBAAY,qCAAqC;IAChD,uCAAuC;IACvC,KAAK,UAAU;IACf,2EAA2E;IAC3E,QAAQ,aAAa;IACrB,2CAA2C;IAC3C,OAAO,YAAY;CACnB;AAED,UAAU,mBAAmB,CAAC,KAAK;IAClC,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACrC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;IAC9C,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IAC1B,gBAAgB,CAAC,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,CAAA;IACvC,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,QAAQ,CAAC,6BAA6B,CAAC,EAAE,qCAAqC,CAAA;IAC9E,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,qBAAa,2BAA2B,CAAC,KAAK;IAMjC,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC,KAAK,CAAC;IALrD,OAAO,CAAC,mBAAmB,CAAC,CAG3B;gBAEoB,IAAI,EAAE,mBAAmB,CAAC,KAAK,CAAC;IAErD,OAAO,KAAK,aAAa,GAKxB;IAED,IAAI,YAAY,YAEf;IAED,OAAO,KAAK,IAAI,GAAoD;IAEpE,OAAO,KAAK,cAAc,GAAyD;IAEnF,OAAO,KAAK,YAAY,GAAoC;IAC5D,OAAO,KAAK,YAAY,QAAwC;IAEhE,OAAO,KAAK,sBAAsB,GASjC;IAED,YAAY,CAAC,IAAI,EAAE,KAAK;IAIxB,UAAU,CAAC,IAAI,EAAE,KAAK;IAItB,gBAAgB,CAAC,QAAQ,EAAE,qCAAqC;IAWhE,4BAA4B;IAI5B,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,0BAA0B,UAAQ;IA8B/E,SAAS;IAMT,WAAW;IAIX,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAOzB"}
+{"version":3,"file":"DataGridSelectionController.d.ts","sourceRoot":"","sources":["../DataGridSelectionController.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,oBAAY,qBAAqB;IAChC,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AAED,oBAAY,qCAAqC;IAChD,uCAAuC;IACvC,KAAK,UAAU;IACf,2EAA2E;IAC3E,QAAQ,aAAa;IACrB,2CAA2C;IAC3C,OAAO,YAAY;CACnB;AAED,UAAU,mBAAmB,CAAC,KAAK;IAClC,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACrC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;IAC9C,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IAC1B,gBAAgB,CAAC,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,CAAA;IACvC,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,QAAQ,CAAC,6BAA6B,CAAC,EAAE,qCAAqC,CAAA;IAC9E,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,qBAAa,2BAA2B,CAAC,KAAK;IAMjC,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC,KAAK,CAAC;IALrD,OAAO,CAAC,mBAAmB,CAAC,CAG3B;gBAEoB,IAAI,EAAE,mBAAmB,CAAC,KAAK,CAAC;IAErD,IAAI,aAAa,sCAKhB;IAED,IAAI,YAAY,YAEf;IAED,OAAO,KAAK,IAAI,GAAoD;IAEpE,OAAO,KAAK,cAAc,GAAyD;IAEnF,OAAO,KAAK,YAAY,GAAoC;IAC5D,OAAO,KAAK,YAAY,QAAwC;IAEhE,OAAO,KAAK,sBAAsB,GASjC;IAED,YAAY,CAAC,IAAI,EAAE,KAAK;IAIxB,UAAU,CAAC,IAAI,EAAE,KAAK;IAItB,gBAAgB,CAAC,QAAQ,EAAE,qCAAqC;IAWhE,4BAA4B;IAI5B,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,0BAA0B,UAAQ;IA8B/E,SAAS;IAMT,WAAW;IAIX,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAOzB"}

package/dist/DataGridSortingController.d.ts

@@ -17,6 +17,7 @@ interface SortableComponent<TData> {
 export declare class DataGridSortingController<TData> {
     readonly host: SortableComponent<TData>;
     constructor(host: SortableComponent<TData>);
+    get enabled(): boolean;
     get(): DataGridRankedSortDefinition<TData>[];
     set(sorting: DataGridSorting<TData>): void;
     private toNormalizedRanked;

package/dist/DataGridSortingController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridSortingController.d.ts","sourceRoot":"","sources":["../DataGridSortingController.ts"],"names":[],"mappings":"AAEA,oBAAY,uBAAuB;IAClC,UAAU,eAAe;IACzB,SAAS,cAAc;CACvB;AAED,MAAM,MAAM,yBAAyB,CAAC,KAAK,IAAI;IAC9C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IACpC,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,4BAA4B,CAAC,KAAK,IAAI,yBAAyB,CAAC,KAAK,CAAC,GAAG;IACpF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,KAAK,IAC9B,yBAAyB,CAAC,KAAK,CAAC,GAChC,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAA;AAE1C,UAAU,iBAAiB,CAAC,KAAK;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG,SAAS,CAAA;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;CACpF;AAED,qBAAa,yBAAyB,CAAC,KAAK;IAC/B,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC;gBAA9B,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC;IAEnD,GAAG;IAIH,GAAG,CAAC,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC;IAMnC,OAAO,CAAC,kBAAkB;IAK1B,KAAK;IAIL;;;;;;OAMG;IACH,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,EAAE,uBAAuB;IAyCtE;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAI3B,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK;CAwB3D"}
+{"version":3,"file":"DataGridSortingController.d.ts","sourceRoot":"","sources":["../DataGridSortingController.ts"],"names":[],"mappings":"AAEA,oBAAY,uBAAuB;IAClC,UAAU,eAAe;IACzB,SAAS,cAAc;CACvB;AAED,MAAM,MAAM,yBAAyB,CAAC,KAAK,IAAI;IAC9C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IACpC,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,4BAA4B,CAAC,KAAK,IAAI,yBAAyB,CAAC,KAAK,CAAC,GAAG;IACpF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,KAAK,IAC9B,yBAAyB,CAAC,KAAK,CAAC,GAChC,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAA;AAE1C,UAAU,iBAAiB,CAAC,KAAK;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG,SAAS,CAAA;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;CACpF;AAED,qBAAa,yBAAyB,CAAC,KAAK;IAC/B,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC;gBAA9B,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC;IAEnD,IAAI,OAAO,YAEV;IAED,GAAG;IAIH,GAAG,CAAC,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC;IAMnC,OAAO,CAAC,kBAAkB;IAK1B,KAAK;IAIL;;;;;;OAMG;IACH,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,EAAE,uBAAuB;IAyCtE;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAI3B,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK;CAwB3D"}

package/dist/DataGridSortingController.js

@@ -8,6 +8,9 @@ export class DataGridSortingController {
     constructor(host) {
         this.host = host;
     }
+    get enabled() {
+        return !!this.host.sorting;
+    }
     get() {
         return this.toNormalizedRanked(this.host.sorting ?? []);
     }

package/dist/custom-elements.json

@@ -73,6 +73,11 @@
 					"type": "DataGridSelectionBehaviorOnDataChange",
 					"default": "\"reset\""
 				},
+				{
+					"name": "reorderability",
+					"description": "Whether the rows can be reordered. Can only be enabled if sorting is not active, selectability is not 'multiple', and no details are present.",
+					"type": "boolean | undefined"
+				},
 				{
 					"name": "multipleDetails",
 					"description": "Whether multiple details can be opened at the same time.",
@@ -197,6 +202,10 @@
 					"name": "sortingChange",
 					"type": "EventDispatcher<DataGridRankedSortDefinition<TData>[]>"
 				},
+				{
+					"name": "reorder",
+					"type": "EventDispatcher<DataGridReorderChange<TData>[]>"
+				},
 				{
 					"name": "rowDetailsOpen",
 					"type": "EventDispatcher<DataGridRow<TData, TDetailsElement>>"
@@ -332,6 +341,11 @@
 					"type": "DataGridCsvController<TData>",
 					"default": "\"new DataGridCsvController<TData>(this)\""
 				},
+				{
+					"name": "reorderabilityController",
+					"type": "DataGridReorderabilityController<TData>",
+					"default": "\"new DataGridReorderabilityController(this)\""
+				},
 				{
 					"name": "rowIntersectionObserver",
 					"type": "IntersectionObserver | undefined"
@@ -432,6 +446,12 @@
 					"type": "DataGridSelectionBehaviorOnDataChange",
 					"default": "\"reset\""
 				},
+				{
+					"name": "reorderability",
+					"attribute": "reorderability",
+					"description": "Whether the rows can be reordered. Can only be enabled if sorting is not active, selectability is not 'multiple', and no details are present.",
+					"type": "boolean | undefined"
+				},
 				{
 					"name": "multipleDetails",
 					"attribute": "multipleDetails",
@@ -566,6 +586,10 @@
 					"name": "sortingChange",
 					"type": "CustomEvent<DataGridRankedSortDefinition<TData>[]>"
 				},
+				{
+					"name": "reorder",
+					"type": "CustomEvent<DataGridReorderChange<TData>[]>"
+				},
 				{
 					"name": "rowDetailsOpen",
 					"type": "CustomEvent<DataGridRow<TData, TDetailsElement>>"
@@ -798,6 +822,11 @@
 					"attribute": "overlayOpen",
 					"type": "boolean",
 					"default": "false"
+				},
+				{
+					"name": "reorderabilityController",
+					"type": "ReorderabilityController",
+					"default": "\"new ReorderabilityController(this, {\\r\\n\\t\\thandleReorder: (source, destination) => {\\r\\n\\t\\t\\tconst sourceColumn = this.dataGrid.visibleColumns[source]!\\r\\n\\t\\t\\tconst destinationColumn = this.dataGrid.visibleColumns[destination]!\\r\\n\\t\\t\\tconst sourceIndex = this.dataGrid.columns.indexOf(sourceColumn)\\r\\n\\t\\t\\tconst destinationIndex = this.dataGrid.columns.indexOf(destinationColumn)\\r\\n\\t\\t\\tthis.dataGrid.columns.splice(sourceIndex, 1)\\r\\n\\t\\t\\tthis.dataGrid.columns.splice(destinationIndex, 0, sourceColumn)\\r\\n\\t\\t\\tthis.dataGrid.setColumns(this.dataGrid.columns)\\r\\n\\t\\t}\\r\\n\\t})\""
 				}
 			]
 		},
@@ -3394,6 +3423,11 @@
 					"description": "The behavior of the selection when the data changes.",
 					"type": "DataGridSelectionBehaviorOnDataChange"
 				},
+				{
+					"name": "reorderability",
+					"description": "Whether the rows can be reordered. Can only be enabled if sorting is not active, selectability is not 'multiple', and no details are present.",
+					"type": "boolean | undefined"
+				},
 				{
 					"name": "multipleDetails",
 					"description": "Whether multiple details can be opened at the same time.",
@@ -3507,6 +3541,10 @@
 					"name": "sortingChange",
 					"type": "EventDispatcher<DataGridRankedSortDefinition<TData>[]>"
 				},
+				{
+					"name": "reorder",
+					"type": "EventDispatcher<DataGridReorderChange<TData>[]>"
+				},
 				{
 					"name": "rowDetailsOpen",
 					"type": "EventDispatcher<DataGridRow<TData, TDetailsElement>>"
@@ -3635,6 +3673,10 @@
 					"name": "csvController",
 					"type": "DataGridCsvController<TData>"
 				},
+				{
+					"name": "reorderabilityController",
+					"type": "DataGridReorderabilityController<TData>"
+				},
 				{
 					"name": "rowIntersectionObserver",
 					"type": "IntersectionObserver | undefined"
@@ -3727,6 +3769,12 @@
 					"description": "The behavior of the selection when the data changes.",
 					"type": "DataGridSelectionBehaviorOnDataChange"
 				},
+				{
+					"name": "reorderability",
+					"attribute": "reorderability",
+					"description": "Whether the rows can be reordered. Can only be enabled if sorting is not active, selectability is not 'multiple', and no details are present.",
+					"type": "boolean | undefined"
+				},
 				{
 					"name": "multipleDetails",
 					"attribute": "multipleDetails",
@@ -3851,6 +3899,10 @@
 					"name": "sortingChange",
 					"type": "CustomEvent<DataGridRankedSortDefinition<TData>[]>"
 				},
+				{
+					"name": "reorder",
+					"type": "CustomEvent<DataGridReorderChange<TData>[]>"
+				},
 				{
 					"name": "rowDetailsOpen",
 					"type": "CustomEvent<DataGridRow<TData, TDetailsElement>>"
@@ -4048,6 +4100,10 @@
 				{
 					"name": "overlayOpen",
 					"type": "boolean"
+				},
+				{
+					"name": "reorderabilityController",
+					"type": "ReorderabilityController"
 				}
 			]
 		},

package/dist/index.d.ts

@@ -16,6 +16,7 @@ import '@3mo/section';
 import '@3mo/tab';
 import '@3mo/line';
 import './types.js';
+export * from './DataGridReorderabilityController.js';
 export * from './DataRecord.js';
 export * from './DataGridColumn.js';
 export * from './columns/index.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AACzB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,cAAc,CAAA;AACrB,OAAO,eAAe,CAAA;AACtB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,UAAU,CAAA;AACjB,OAAO,WAAW,CAAA;AAElB,OAAO,YAAY,CAAA;AACnB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qCAAqC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,eAAe,CAAA;AACtB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AACzB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,cAAc,CAAA;AACrB,OAAO,eAAe,CAAA;AACtB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,UAAU,CAAA;AACjB,OAAO,WAAW,CAAA;AAElB,OAAO,YAAY,CAAA;AACnB,cAAc,uCAAuC,CAAA;AACrD,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qCAAqC,CAAA"}

package/dist/index.js

@@ -17,6 +17,7 @@ import '@3mo/tab';
 import '@3mo/line';
 // import '@3mo/focus-ring'
 import './types.js';
+export * from './DataGridReorderabilityController.js';
 export * from './DataRecord.js';
 export * from './DataGridColumn.js';
 export * from './columns/index.js';

package/dist/rows/DataGridDefaultRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridDefaultRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridDefaultRow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,qBACa,kBAAkB,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC;IAC1I,WAAoB,MAAM,kCAqBzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAQjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}
+{"version":3,"file":"DataGridDefaultRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridDefaultRow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,qBACa,kBAAkB,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC;IAC1I,WAAoB,MAAM,kCAqBzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CASjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}

package/dist/rows/DataGridDefaultRow.js

@@ -33,6 +33,7 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
     }
     get rowTemplate() {
         return html `
+			${this.reorderabilityTemplate}
 			${this.detailsExpanderTemplate}
 			${this.selectionTemplate}
 			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}

package/dist/rows/DataGridRow.d.ts

@@ -23,6 +23,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
     static get styles(): import("@a11d/lit").CSSResult;
     protected get template(): HTMLTemplateResult;
     protected abstract get rowTemplate(): HTMLTemplateResult;
+    protected get reorderabilityTemplate(): HTMLTemplateResult;
     protected get detailsExpanderTemplate(): HTMLTemplateResult;
     protected get selectionTemplate(): HTMLTemplateResult;
     protected getCellTemplate(column: DataGridColumn<TData, KeyPath.ValueOf<TData, KeyPath.Of<TData>>>): HTMLTemplateResult;

package/dist/rows/DataGridRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,KAAK,kBAAkB,EAAoB,MAAM,WAAW,CAAA;AAKtH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,YAAY,EAAkC,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEhG,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACnF,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,EAAG,WAAW,CAAA;IAE7B,cAAc,UAAO;IAEtB,UAAU,EAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1D,IAAI,QAAQ,kDAAsC;IAClD,IAAI,IAAI,UAAkC;IAC1C,IAAI,KAAK,WAAmC;IAC5C,IAAI,KAAK,WAAmC;IAC5C,IAAI,QAAQ,YAAwC;IACpD,IAAI,WAAW,YAAyC;IAExD,IAAI,cAAc,IACkF,eAAe,GAAG,SAAS,CAC9H;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAMC,WAAW;cAKX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA6IzB;IAED,cAAuB,QAAQ,uBAmB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAe9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAYlG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAY5B;IAED,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAY1C,SAAS,CAAC,2BAA2B,CAAC,IAAI,EAAE,OAAO;IAQnD,OAAO,KAAK,mBAAmB,GAM9B;IAEK,gBAAgB;IAKtB,aAAa;CAQb;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}
+{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,KAAK,kBAAkB,EAAsC,MAAM,WAAW,CAAA;AAKxI,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,YAAY,EAAkC,KAAK,UAAU,EAAuB,MAAM,aAAa,CAAA;AAErH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACnF,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,EAAG,WAAW,CAAA;IAE7B,cAAc,UAAO;IAEtB,UAAU,EAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1D,IAAI,QAAQ,kDAAsC;IAClD,IAAI,IAAI,UAAkC;IAC1C,IAAI,KAAK,WAAmC;IAC5C,IAAI,KAAK,WAAmC;IAC5C,IAAI,QAAQ,YAAwC;IACpD,IAAI,WAAW,YAAyC;IAExD,IAAI,cAAc,IACkF,eAAe,GAAG,SAAS,CAC9H;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAMC,WAAW;cAKX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCAiKzB;IAED,cAAuB,QAAQ,uBAmB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,sBAAsB,uBAMnC;IAED,SAAS,KAAK,uBAAuB,uBAgBpC;IAED,SAAS,KAAK,iBAAiB,uBAgB9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAYlG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAY5B;IAED,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAY1C,SAAS,CAAC,2BAA2B,CAAC,IAAI,EAAE,OAAO;IAQnD,OAAO,KAAK,mBAAmB,GAM9B;IAEK,gBAAgB;IAKtB,aAAa;CAQb;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}

package/dist/rows/DataGridRow.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { css, property, Component, html, query, queryAll, LitElement, live } from '@a11d/lit';
+import { css, property, Component, html, query, queryAll, LitElement, live, style, unsafeCSS } from '@a11d/lit';
 import { equals } from '@a11d/equals';
 import { DirectionsByLanguage } from '@3mo/localization';
 import { popover } from '@3mo/popover';
 import { ContextMenu } from '@3mo/context-menu';
-import { DataGridPrimaryContextMenuItem } from '../index.js';
+import { DataGridPrimaryContextMenuItem, ReorderabilityState } from '../index.js';
 export class DataGridRow extends Component {
     constructor() {
         super(...arguments);
@@ -58,6 +58,31 @@ export class DataGridRow extends Component {
 				width: 100%;
 			}
 
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.Dragging)}]) {
+				opacity: 0.5;
+			}
+
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.DropBefore)}]) {
+				border-top: 2px solid var(--mo-color-accent);
+			}
+
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.DropAfter)}]) {
+				border-bottom: 2px solid var(--mo-color-accent);
+			}
+
+			#reorderability {
+				position: sticky;
+				z-index: 2;
+				width: var(--mo-data-grid-column-reorder-width);
+				height: 100%;
+				background: var(--mo-data-grid-sticky-part-color);
+
+				mo-icon-button {
+					cursor: grab;
+					opacity: 0.5;
+				}
+			}
+
 			#detailsExpanderContainer {
 				position: sticky;
 				z-index: 2;
@@ -69,12 +94,8 @@ export class DataGridRow extends Component {
 				width: var(--mo-data-grid-column-selection-width);
 				position: sticky;
 				z-index: 2;
-				inset-inline-start: 0px;
 				height: 100%;
 				background: var(--mo-data-grid-sticky-part-color);
-				&[data-has-details] {
-					inset-inline-start: 20px;
-				}
 			}
 
 			:host(:hover) {
@@ -90,7 +111,6 @@ export class DataGridRow extends Component {
 						width: 2px;
 						height: 100%;
 						top: 0;
-						inset-inline-start: 0;
 						position: absolute;
 						background-color: var(--mo-color-accent);
 						z-index: 2;
@@ -211,9 +231,17 @@ export class DataGridRow extends Component {
 			<slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : html.nothing}</slot>
 		`;
     }
+    get reorderabilityTemplate() {
+        return !this.dataGrid.reorderabilityController.enabled ? html.nothing : html `
+			<mo-flex id='reorderability' justifyContent='center' alignItems='center' ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('reordering') })}>
+				<mo-icon-button icon='drag_handle'></mo-icon-button>
+			</mo-flex>
+		`;
+    }
     get detailsExpanderTemplate() {
         return this.dataGrid.hasDetails === false ? html.nothing : html `
 			<mo-flex id='detailsExpanderContainer' justifyContent='center' alignItems='center'
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('details') })}
 				@click=${(e) => e.stopPropagation()}
 				@dblclick=${(e) => e.stopPropagation()}
 			>
@@ -231,6 +259,7 @@ export class DataGridRow extends Component {
         return !this.dataGrid.hasSelection ? html.nothing : html `
 			<mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
 				?data-has-details=${this.dataGrid.hasDetails}
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('selection') })}
 				@click=${(e) => e.stopPropagation()}
 				@dblclick=${(e) => e.stopPropagation()}
 			>