@uzum-tech/ui 2.0.5 → 2.0.7

package/lib/data-table/src/TableParts/Header.js

@@ -15,6 +15,8 @@ const interface_1 = require("../interface");
 const utils_1 = require("../utils");
 const SelectionMenu_1 = __importDefault(require("./SelectionMenu"));
 function renderTitle(column) {
+    if (column.type === 'draggable')
+        return null;
     return typeof column.title === 'function'
         ? column.title(column)
         : column.title;
@@ -147,6 +149,9 @@ exports.default = (0, vue_1.defineComponent)({
                 const { ellipsis } = column;
                 const ellipsisEnabled = (0, utils_1.isColumnEllipsisEnabled)(column);
                 const createColumnVNode = () => {
+                    if (column.type === 'draggable') {
+                        return null;
+                    }
                     if (column.type === 'selection') {
                         return column.multiple !== false ? ((0, vue_1.h)(vue_1.Fragment, null,
                             (0, vue_1.h)(checkbox_1.UCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked, size: sizeRef }),
@@ -187,6 +192,7 @@ exports.default = (0, vue_1.defineComponent)({
                         column.className
                     ], onClick: column.type !== 'selection'
                         && column.type !== 'expand'
+                        && column.type !== 'draggable'
                         && !('children' in column)
                         ? (e) => {
                             handleColHeaderClick(e, column);

package/lib/data-table/src/TableParts/VirtualListItemWrapper.d.ts

@@ -0,0 +1,36 @@
+import type { PropType } from 'vue';
+import type { ColItem } from '../use-group-header';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    cols: {
+        type: PropType<ColItem[]>;
+        required: true;
+    };
+    tableWidth: StringConstructor;
+    onMouseenter: PropType<(e: MouseEvent) => void>;
+    onMouseleave: PropType<(e: MouseEvent) => void>;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    cols: {
+        type: PropType<ColItem[]>;
+        required: true;
+    };
+    tableWidth: StringConstructor;
+    onMouseenter: PropType<(e: MouseEvent) => void>;
+    onMouseleave: PropType<(e: MouseEvent) => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/data-table/src/TableParts/VirtualListItemWrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'VirtualListItemWrapper',
+    props: {
+        clsPrefix: {
+            type: String,
+            required: true
+        },
+        id: {
+            type: String,
+            required: true
+        },
+        cols: {
+            type: Array,
+            required: true
+        },
+        tableWidth: String,
+        onMouseenter: Function,
+        onMouseleave: Function
+    },
+    render() {
+        const { clsPrefix, id, cols, tableWidth, onMouseenter, onMouseleave } = this;
+        return ((0, vue_1.h)("table", { style: { tableLayout: 'fixed', width: tableWidth }, class: `${clsPrefix}-data-table-table`, onMouseenter: onMouseenter, onMouseleave: onMouseleave },
+            (0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
+            (0, vue_1.h)("tbody", { "data-u-id": id, class: `${clsPrefix}-data-table-tbody` }, this.$slots)));
+    }
+});

package/lib/data-table/src/interface.d.ts

@@ -1,5 +1,5 @@
 import type { TreeMate, TreeNode } from 'treemate';
-import type { CSSProperties, ExtractPropTypes, HTMLAttributes, PropType, Ref, Slots, VNode, VNodeChild } from 'vue';
+import type { ComputedRef, CSSProperties, ExtractPropTypes, HTMLAttributes, PropType, Ref, Slots, VNode, VNodeChild } from 'vue';
 import type { BaseLoadingExposedProps } from '../../_internal';
 import type { MergedTheme } from '../../_mixins';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
@@ -178,6 +178,9 @@ export declare const dataTableProps: {
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -1133,6 +1136,9 @@ export declare const dataTableProps: {
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -2088,6 +2094,9 @@ export declare const dataTableProps: {
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
+        dropMarkColor: string;
+        dragGhostOpacity: string;
+        dragGhostFilter: string;
         borderColorModal: string;
         tdColorHoverModal: string;
         tdColorStripedModal: string;
@@ -3016,6 +3025,7 @@ export interface DataTableSlots {
     default?: () => VNode[];
     empty?: () => VNode[];
     loading?: () => VNode[];
+    'drag-handle'?: () => VNode[];
 }
 export type RowData = Record<string, any>;
 export type InternalRowData = Record<string, unknown>;
@@ -3134,8 +3144,123 @@ export interface TableExpandColumn<T = InternalRowData> extends Omit<TableSelect
     renderExpand: RenderExpand<T>;
     expandable?: Expandable<T>;
 }
-export type TableColumn<T = InternalRowData> = TableColumnGroup<T> | TableBaseColumn<T> | TableSelectionColumn<T> | TableExpandColumn<T>;
+export interface RowDragEndOptions {
+    index: number;
+    oldOrder: number;
+    newOrder: number;
+}
+export interface UseTableDataDeps {
+    dataRelatedColsRef: ComputedRef<DataRelatedColumn[]>;
+}
+export interface UseSorterDeps {
+    dataRelatedColsRef: ComputedRef<DataRelatedColumn[]>;
+    filteredDataRef: ComputedRef<TmNode[]>;
+}
+export interface UseRowDragDeps {
+    paginatedDataRef: ComputedRef<TmNode[]>;
+    mergedCheckedRowKeySetRef: Ref<Set<RowKey>>;
+    mergedClsPrefixRef: Ref<string>;
+}
+export interface UseRowDragReturn {
+    draggableColumnRef: Ref<TableDraggableColumn | null>;
+    draggingRowKeySetRef: Ref<Set<RowKey>>;
+    droppingRowKeyRef: Ref<RowKey | null>;
+    droppingPositionRef: Ref<RowDropPosition | null>;
+    handleRowDragStart: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragOver: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragLeave: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragEnd: () => void;
+    handleRowDrop: (event: DragEvent, rowKey: RowKey) => void;
+}
+export interface BodyRowRenderContext {
+    mergedClsPrefix: string;
+    cols: ColItem[];
+    colCount: number;
+    rowCount: number;
+    hasChildren: boolean;
+    childTriggerColIndex: number;
+    indentStyle: {
+        width: string;
+    } | undefined;
+    rowClassName: string | CreateRowClassName | undefined;
+    rowProps: CreateRowProps | undefined;
+    mergedSortState: SortState[];
+    mergedExpandedRowKeySet: Set<RowKey>;
+    fixedColumnLeftMap: Record<ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>;
+    fixedColumnRightMap: Record<ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>;
+    currentPage: number;
+    loadingKeySet: Set<RowKey>;
+    stickyExpandedRows: boolean;
+    bodyWidthPx: string | undefined;
+    renderExpand: RenderExpand | undefined;
+    renderExpandIcon: RenderExpandIcon | undefined;
+    renderCell: ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild) | undefined;
+    defaultEmptyValue: string | (() => VNodeChild) | undefined;
+    mergedTheme: MergedTheme<DataTableTheme>;
+    rowIndexToKey: Record<number, RowKey>;
+    cordToPass: Record<number, number[]>;
+    cordKey: Record<number, Record<number, RowKey[]>>;
+    draggableColumn: TableDraggableColumn | null;
+    droppingRowKey: RowKey | null;
+    droppingPosition: RowDropPosition | null;
+    draggingRowKeySet: Set<RowKey>;
+    hoverKey: RowKey | null;
+    dataTableSlots: Slots;
+    setHoverKey: (key: RowKey) => void;
+    handleCheckboxUpdateChecked: (tmNode: {
+        key: RowKey;
+    }, checked: boolean, shiftKey: boolean) => void;
+    handleRadioUpdateChecked: (tmNode: {
+        key: RowKey;
+    }) => void;
+    handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
+    handleRowDragStart: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragOver: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragLeave: (event: DragEvent, rowKey: RowKey) => void;
+    handleRowDragEnd: () => void;
+    handleRowDrop: (event: DragEvent, rowKey: RowKey) => void;
+    emitEdit: (value: any, row: any, key: any) => void;
+}
+export interface BodyEmptyDeps {
+    clsPrefix: string;
+    loading: boolean;
+    bodyStyle: CSSProperties | undefined;
+    dataTableSlots: Slots;
+    mergedTheme: MergedTheme<DataTableTheme>;
+    emptyProps: Partial<EmptyProps> | undefined;
+}
+export interface FixedShadowStyleProps {
+    leftActiveFixedColKey: ColumnKey | null;
+    leftActiveFixedChildrenColKeys: ColumnKey[];
+    rightActiveFixedColKey: ColumnKey | null;
+    rightActiveFixedChildrenColKeys: ColumnKey[];
+    componentId: string;
+}
+export type RowDropPosition = 'before' | 'after';
+export type TableDraggableColumn<T = InternalRowData> = {
+    type: 'draggable';
+    key: ColumnKey;
+    draggable?: (row: T) => boolean;
+    onDragEnd?: (row: T, options: RowDragEndOptions) => void;
+    sortByKey?: boolean;
+    sorter?: never;
+    filter?: never;
+    filterOptions?: never;
+    filterOptionValues?: never;
+    filterOptionValue?: never;
+    resizable?: never;
+    colSpan?: never;
+    rowSpan?: never;
+} & CommonColumnInfo<T>;
+export type TableColumn<T = InternalRowData> = TableColumnGroup<T> | TableBaseColumn<T> | TableSelectionColumn<T> | TableExpandColumn<T> | TableDraggableColumn<T>;
 export type TableColumns<T = InternalRowData> = Array<TableColumn<T>>;
+export type DataRelatedColumn<T = InternalRowData> = TableSelectionColumn<T> | TableBaseColumn<T> | TableExpandColumn<T> | TableDraggableColumn<T>;
 export type DataTableSelectionOptions<T = InternalRowData> = Array<DataTableSelectionOption | {
     label: string;
     key: string | number;
@@ -3226,6 +3351,15 @@ export interface DataTableInjection {
     defaultEmptyValueRef: Ref<string | (() => VNodeChild) | undefined>;
     emptyPropsRef: Ref<Partial<EmptyProps> | undefined>;
     handleEdit: (value: any, row: any, key: string) => void;
+    draggableColumnRef: UseRowDragReturn['draggableColumnRef'];
+    draggingRowKeySetRef: UseRowDragReturn['draggingRowKeySetRef'];
+    droppingRowKeyRef: UseRowDragReturn['droppingRowKeyRef'];
+    droppingPositionRef: UseRowDragReturn['droppingPositionRef'];
+    handleRowDragStart: UseRowDragReturn['handleRowDragStart'];
+    handleRowDragOver: UseRowDragReturn['handleRowDragOver'];
+    handleRowDragLeave: UseRowDragReturn['handleRowDragLeave'];
+    handleRowDragEnd: UseRowDragReturn['handleRowDragEnd'];
+    handleRowDrop: UseRowDragReturn['handleRowDrop'];
 }
 export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;
 export interface MainTableInjection {
@@ -3314,5 +3448,30 @@ export interface CsvOptionsType {
     fileName?: string;
     keepOriginalData?: boolean;
 }
+export interface NormalRowRenderInfo {
+    striped: boolean;
+    tmNode: TmNode;
+    key: RowKey;
+    index: number;
+}
+export interface WidthConstraintSignal {
+    systemMinWidth: number | string;
+    systemMaxWidth?: number | string;
+}
+export type RowRenderInfo = {
+    isSummaryRow: true;
+    key: RowKey;
+    tmNode: {
+        rawNode: SummaryRowData;
+        disabled: boolean;
+    };
+    index: number;
+} | NormalRowRenderInfo | {
+    isExpandedRow: true;
+    tmNode: TmNode;
+    key: RowKey;
+    index: number;
+};
+export type ResizeReconcileReason = 'topology/capability' | 'mode' | 'environment' | 'width-state';
 export type DataTableProps = ExtractPublicPropTypes<typeof dataTableProps>;
 export type DataTableSetupProps = ExtractPropTypes<typeof dataTableProps>;

package/lib/data-table/src/styles/index.cssr.js

@@ -145,7 +145,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  margin: calc(var(--u-th-padding) * -1);
  padding: var(--u-th-padding);
  box-sizing: border-box;
- `), (0, cssr_1.cM)('disabled', null, [(0, cssr_1.cB)('data-table-td', 'color: var(--u-td-opacity-disabled);')]), (0, cssr_1.cM)('striped', 'background-color: var(--u-merged-td-color-striped);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), (0, cssr_1.c)('&:hover', 'background-color: var(--u-merged-td-color-hover);', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])]), (0, cssr_1.c)('&:has(.u-data-table-td--editable:hover)', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color);', [(0, cssr_1.cM)('editable', [(0, cssr_1.c)('&:hover', 'background-color: var(--u-merged-td-color-hover);')])])])])]), (0, cssr_1.cB)('data-table-th', `
+ `), (0, cssr_1.cM)('disabled', null, [(0, cssr_1.cB)('data-table-td', 'color: var(--u-td-opacity-disabled);')]), (0, cssr_1.cM)('dragging', 'opacity: 0.4;'), (0, cssr_1.cM)('drop-before', null, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', `
+ box-shadow: inset 0 2px 0 0 var(--u-drop-mark-color);
+ `)])]), (0, cssr_1.cM)('drop-after', null, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', `
+ box-shadow: inset 0 -2px 0 0 var(--u-drop-mark-color);
+ `)])]), (0, cssr_1.cM)('striped', 'background-color: var(--u-merged-td-color-striped);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), (0, cssr_1.c)('&:hover', 'background-color: var(--u-merged-td-color-hover);', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])]), (0, cssr_1.c)('&:has(.u-data-table-td--editable:hover)', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--u-merged-td-color);', [(0, cssr_1.cM)('editable', [(0, cssr_1.c)('&:hover', 'background-color: var(--u-merged-td-color-hover);')])])])])]), (0, cssr_1.cB)('data-table-th', `
  padding: var(--u-th-padding);
  position: relative;
  height: var(--u-th-height);
@@ -298,7 +302,22 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  `), (0, cssr_1.cM)('selection, expand', `
  text-align: center;
  line-height: 0;
- `), (0, cssr_1.cM)('editable', `
+ `), (0, cssr_1.cM)('draggable', `
+ text-align: center;
+ line-height: 0;
+ cursor: grab;
+ `, [(0, cssr_1.c)('&:active', `
+ cursor: grabbing;
+ `), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('drag-handle', `
+ color: var(--u-th-icon-color-active);
+ `)]), (0, cssr_1.cE)('drag-handle', `
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--u-th-icon-color);
+ line-height: 0;
+ pointer-events: none;
+ `)]), (0, cssr_1.cM)('editable', `
  cursor: pointer;
  position: relative;
  padding: 0;
@@ -317,7 +336,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  height: 100%;
  width: 100%;
  }
- `), fixedColumnStyle]), (0, cssr_1.cB)('data-table-empty', `
+ `), fixedColumnStyle]), (0, cssr_1.cB)('data-table-drag-ghost', `
+ opacity: var(--u-drag-ghost-opacity);
+ filter: var(--u-drag-ghost-filter);
+ pointer-events: none;
+ `), (0, cssr_1.cB)('data-table-empty', `
  box-sizing: border-box;
  padding: var(--u-empty-padding);
  flex-grow: 1;

package/lib/data-table/src/use-group-header.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, CSSProperties } from 'vue';
-import type { ColumnKey, DataTableSetupProps, TableBaseColumn, TableColumn, TableExpandColumn, TableSelectionColumn } from './interface';
+import type { ColumnKey, DataRelatedColumn, DataTableSetupProps, TableColumn } from './interface';
 export interface RowItem {
     colSpan: number;
     rowSpan: number;
@@ -9,11 +9,11 @@ export interface RowItem {
 export interface ColItem {
     key: string | number;
     style: CSSProperties;
-    column: TableSelectionColumn | TableExpandColumn | TableBaseColumn;
+    column: DataRelatedColumn;
 }
 export declare function useGroupHeader(props: DataTableSetupProps, getResizableWidth: (key: ColumnKey) => number | undefined): {
     rowsRef: ComputedRef<RowItem[][]>;
     colsRef: ComputedRef<ColItem[]>;
     hasEllipsisRef: ComputedRef<boolean>;
-    dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
+    dataRelatedColsRef: ComputedRef<DataRelatedColumn[]>;
 };

package/lib/data-table/src/use-row-drag.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableSetupProps, UseRowDragDeps, UseRowDragReturn } from './interface';
+export declare function useRowDrag(props: DataTableSetupProps, { paginatedDataRef, mergedCheckedRowKeySetRef, mergedClsPrefixRef }: UseRowDragDeps): UseRowDragReturn;

package/lib/data-table/src/use-row-drag.js

@@ -0,0 +1,270 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowDrag = useRowDrag;
+const vooks_1 = require("vooks");
+const vue_1 = require("vue");
+const DROP_HALF_DIVISOR = 2;
+const DROP_STEP_BIAS = 1;
+const FALLBACK_ORDER = 0;
+const SINGLE_ROW_DRAG_SIZE = 1;
+const DRAG_IMAGE_OFFSET = 0;
+const GHOST_OFFSCREEN_TOP_PX = -10000;
+const GHOST_CLEANUP_DELAY_MS = 0;
+function useRowDrag(props, { paginatedDataRef, mergedCheckedRowKeySetRef, mergedClsPrefixRef }) {
+    const draggableColumnRef = (0, vooks_1.useMemo)(() => {
+        const findDraggableColumn = (columns) => {
+            for (const column of columns) {
+                if ('children' in column) {
+                    const nested = findDraggableColumn(column.children);
+                    if (nested)
+                        return nested;
+                }
+                else if (column.type === 'draggable') {
+                    return column;
+                }
+            }
+            return null;
+        };
+        return findDraggableColumn(props.columns);
+    });
+    const draggingRowKeysRef = (0, vue_1.ref)([]);
+    const draggingRowKeySetRef = (0, vue_1.computed)(() => new Set(draggingRowKeysRef.value));
+    const droppingRowKeyRef = (0, vue_1.ref)(null);
+    const droppingPositionRef = (0, vue_1.ref)(null);
+    function resetDropState() {
+        droppingRowKeyRef.value = null;
+        droppingPositionRef.value = null;
+    }
+    function isRowDraggable(rowData) {
+        const column = draggableColumnRef.value;
+        if (!column)
+            return false;
+        if (typeof column.draggable === 'function') {
+            return column.draggable(rowData);
+        }
+        return true;
+    }
+    function getRowByKey(targetKey) {
+        var _a;
+        return (_a = paginatedDataRef.value.find(node => node.key === targetKey)) === null || _a === void 0 ? void 0 : _a.rawNode;
+    }
+    function resolveDragKeys(initialRowKey) {
+        const checkedSet = mergedCheckedRowKeySetRef.value;
+        if (!checkedSet.has(initialRowKey))
+            return [initialRowKey];
+        const keysInOrder = [];
+        for (const node of paginatedDataRef.value) {
+            if (checkedSet.has(node.key) && isRowDraggable(node.rawNode)) {
+                keysInOrder.push(node.key);
+            }
+        }
+        return keysInOrder.length ? keysInOrder : [initialRowKey];
+    }
+    function applyDragImage(event) {
+        if (!event.dataTransfer
+            || typeof event.dataTransfer.setDragImage !== 'function') {
+            return;
+        }
+        const cellElement = event.currentTarget;
+        const rowElement = cellElement === null || cellElement === void 0 ? void 0 : cellElement.closest('tr');
+        if (!rowElement)
+            return;
+        const draggedSet = draggingRowKeySetRef.value;
+        if (draggedSet.size <= SINGLE_ROW_DRAG_SIZE) {
+            event.dataTransfer.setDragImage(rowElement, DRAG_IMAGE_OFFSET, DRAG_IMAGE_OFFSET);
+            return;
+        }
+        const tableElement = rowElement.closest('table');
+        if (!tableElement) {
+            event.dataTransfer.setDragImage(rowElement, DRAG_IMAGE_OFFSET, DRAG_IMAGE_OFFSET);
+            return;
+        }
+        const mergedClsPrefix = mergedClsPrefixRef.value;
+        const keyStringSet = new Set(Array.from(draggedSet).map(String));
+        const ghost = tableElement.cloneNode(true);
+        ghost.classList.add(`${mergedClsPrefix}-data-table-drag-ghost`);
+        ghost
+            .querySelectorAll('thead')
+            .forEach(headElement => headElement.remove());
+        ghost.querySelectorAll('tbody > tr').forEach((rowChild) => {
+            const childKey = rowChild.getAttribute('data-row-key');
+            if (childKey === null || !keyStringSet.has(childKey))
+                rowChild.remove();
+        });
+        ghost.style.position = 'fixed';
+        ghost.style.top = `${GHOST_OFFSCREEN_TOP_PX}px`;
+        ghost.style.left = '0';
+        ghost.style.pointerEvents = 'none';
+        ghost.style.width = `${tableElement.offsetWidth}px`;
+        const hostElement = tableElement.closest(`.${mergedClsPrefix}-data-table`) || document.body;
+        hostElement.appendChild(ghost);
+        event.dataTransfer.setDragImage(ghost, DRAG_IMAGE_OFFSET, DRAG_IMAGE_OFFSET);
+        setTimeout(() => {
+            if (ghost.parentNode)
+                ghost.parentNode.removeChild(ghost);
+        }, GHOST_CLEANUP_DELAY_MS);
+    }
+    function handleRowDragStart(event, rowKey) {
+        const row = getRowByKey(rowKey);
+        if (!row || !isRowDraggable(row)) {
+            event.preventDefault();
+            return;
+        }
+        draggingRowKeysRef.value = resolveDragKeys(rowKey);
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', draggingRowKeysRef.value.map(String).join(','));
+        }
+        applyDragImage(event);
+    }
+    function handleRowDragOver(event, rowKey) {
+        if (!draggableColumnRef.value)
+            return;
+        if (!draggingRowKeysRef.value.length)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        if (draggingRowKeySetRef.value.has(rowKey)) {
+            resetDropState();
+            return;
+        }
+        const target = event.currentTarget;
+        if (!target)
+            return;
+        const rect = target.getBoundingClientRect();
+        const offset = event.clientY - rect.top;
+        const position = offset < rect.height / DROP_HALF_DIVISOR ? 'before' : 'after';
+        droppingRowKeyRef.value = rowKey;
+        droppingPositionRef.value = position;
+    }
+    function handleRowDragLeave(event, rowKey) {
+        if (droppingRowKeyRef.value !== rowKey)
+            return;
+        const related = event.relatedTarget;
+        const current = event.currentTarget;
+        if (related && current && current.contains(related)) {
+            return;
+        }
+        resetDropState();
+    }
+    function handleRowDragEnd() {
+        draggingRowKeysRef.value = [];
+        resetDropState();
+    }
+    function readOrder(row, orderKey) {
+        const value = row === null || row === void 0 ? void 0 : row[orderKey];
+        return typeof value === 'number' ? value : Number(value) || FALLBACK_ORDER;
+    }
+    function computeNewOrders(draggedKeys, dropIndex, position, orderKey) {
+        var _a, _b, _c;
+        const rows = paginatedDataRef.value;
+        if (!rows.length)
+            return null;
+        const draggedSet = new Set(draggedKeys);
+        const draggedIndexes = rows
+            .map((node, index) => (draggedSet.has(node.key) ? index : -1))
+            .filter(index => index >= 0);
+        if (!draggedIndexes.length)
+            return null;
+        const filtered = rows.filter(node => !draggedSet.has(node.key));
+        const targetIndex = position === 'before' ? dropIndex : dropIndex + 1;
+        const removedBefore = draggedIndexes.filter(index => index < targetIndex).length;
+        const insertAt = Math.max(0, targetIndex - removedBefore);
+        const prev = (_a = filtered[insertAt - 1]) === null || _a === void 0 ? void 0 : _a.rawNode;
+        const next = (_b = filtered[insertAt]) === null || _b === void 0 ? void 0 : _b.rawNode;
+        const draggedCount = draggedKeys.length;
+        const orders = [];
+        if (prev && next) {
+            const prevOrder = readOrder(prev, orderKey);
+            const nextOrder = readOrder(next, orderKey);
+            const step = (nextOrder - prevOrder) / (draggedCount + DROP_STEP_BIAS);
+            for (let index = 0; index < draggedCount; index++) {
+                orders.push(prevOrder + step * (index + DROP_STEP_BIAS));
+            }
+        }
+        else if (!prev && next) {
+            const nextOrder = readOrder(next, orderKey);
+            for (let index = 0; index < draggedCount; index++) {
+                orders.push(nextOrder - (draggedCount - index));
+            }
+        }
+        else if (prev && !next) {
+            const prevOrder = readOrder(prev, orderKey);
+            for (let index = 0; index < draggedCount; index++) {
+                orders.push(prevOrder + (index + DROP_STEP_BIAS));
+            }
+        }
+        else {
+            for (const key of draggedKeys) {
+                const row = (_c = rows.find(node => node.key === key)) === null || _c === void 0 ? void 0 : _c.rawNode;
+                orders.push(readOrder(row, orderKey));
+            }
+        }
+        return orders;
+    }
+    function handleRowDrop(event, rowKey) {
+        event.preventDefault();
+        const column = draggableColumnRef.value;
+        const draggedKeys = draggingRowKeysRef.value;
+        const position = droppingPositionRef.value;
+        if (!column
+            || !draggedKeys.length
+            || position === null
+            || draggingRowKeySetRef.value.has(rowKey)) {
+            handleRowDragEnd();
+            return;
+        }
+        const rows = paginatedDataRef.value;
+        const dropIndex = rows.findIndex(node => node.key === rowKey);
+        if (dropIndex < 0) {
+            handleRowDragEnd();
+            return;
+        }
+        const orderKey = column.key;
+        const newOrders = computeNewOrders(draggedKeys, dropIndex, position, orderKey);
+        const dispatchPlan = draggedKeys.map((key, index) => {
+            var _a;
+            const row = (_a = rows.find(node => node.key === key)) === null || _a === void 0 ? void 0 : _a.rawNode;
+            return row
+                ? {
+                    row,
+                    oldOrder: readOrder(row, orderKey),
+                    newOrder: newOrders ? newOrders[index] : readOrder(row, orderKey)
+                }
+                : null;
+        });
+        const targetIndex = position === 'before' ? dropIndex : dropIndex + 1;
+        const draggedSet = draggingRowKeySetRef.value;
+        const draggedIndexes = rows
+            .map((node, index) => (draggedSet.has(node.key) ? index : -1))
+            .filter(index => index >= 0);
+        const removedBefore = draggedIndexes.filter(index => index < targetIndex).length;
+        const baseIndex = Math.max(0, targetIndex - removedBefore);
+        handleRowDragEnd();
+        if (!newOrders)
+            return;
+        dispatchPlan.forEach((entry, index) => {
+            var _a;
+            if (!entry)
+                return;
+            (_a = column.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(column, entry.row, {
+                index: baseIndex + index,
+                oldOrder: entry.oldOrder,
+                newOrder: entry.newOrder
+            });
+        });
+    }
+    return {
+        draggableColumnRef,
+        draggingRowKeySetRef,
+        droppingRowKeyRef,
+        droppingPositionRef,
+        handleRowDragStart,
+        handleRowDragOver,
+        handleRowDragLeave,
+        handleRowDragEnd,
+        handleRowDrop
+    };
+}

package/lib/data-table/src/use-sorter.d.ts

@@ -1,13 +1,9 @@
-import type { ComputedRef } from 'vue';
-import type { ColumnKey, CompareFn, DataTableSetupProps, InternalRowData, SortOrder, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn, TmNode } from './interface';
-export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsRef, filteredDataRef }: {
-    dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
-    filteredDataRef: ComputedRef<TmNode[]>;
-}): {
+import type { ColumnKey, CompareFn, DataTableSetupProps, InternalRowData, SortOrder, SortState, TmNode, UseSorterDeps } from './interface';
+export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsRef, filteredDataRef }: UseSorterDeps): {
     clearSorter: () => void;
     sort: (columnKey: ColumnKey, order?: SortOrder) => void;
-    sortedDataRef: ComputedRef<TmNode[]>;
-    mergedSortStateRef: ComputedRef<{
+    sortedDataRef: import("vue").ComputedRef<TmNode[]>;
+    mergedSortStateRef: import("vue").ComputedRef<{
         columnKey: ColumnKey;
         order: SortOrder;
         sorter: boolean | "default" | CompareFn<InternalRowData> | {