@gx-design-vue/pro-table 0.2.0-alpha.20 → 0.2.0-alpha.21

package/dist/hooks/useAutoScroll.js

@@ -0,0 +1,127 @@
+//#region src/hooks/useAutoScroll.ts
+const ScrollDirection = {
+	Idle: 0,
+	Forward: 1,
+	Reverse: -1
+};
+const SCROLL_EPSILON = .5;
+/**
+* 纵向自动滚动 —— 精简复刻 `@dnd-kit/dom` 的 `detectScrollIntent` + `Scroller` 思路，
+* 与 pro-layout Tabs 的横向 `useAutoScroll` 同构（仅轴向不同）。
+*
+* 指针进入 `scrollEl` 上/下边缘 threshold 区域时，按距边缘的比例计算速度
+* （越靠边越快）。滚动方向必须先被用户同向移动解锁；如果当前方向已经到达边界，
+* 则不产生滚动 intent，避免触底后因为鼠标还在边缘区被反复重新激活。
+*
+* 关键：`maxScrollTop` 在 `start()` 时快照一次（`??` 仅在 undefined 时 fallback 到实时值），
+* 拖拽全程都用快照值判定能否滚动。这样即使拖拽中 `transform` 撑大了 `scrollHeight`，
+* 也不会污染滚动判定，避免死循环。
+*/
+function useAutoScroll(scrollEl, getPointerY, options = {}) {
+	const { threshold = .2, acceleration = 18, tolerance = 10, onScroll } = options;
+	let rafId;
+	let lastPointerY = null;
+	let maxScrollTop;
+	const unlockedDirections = /* @__PURE__ */ new Set();
+	function getMaxScrollTop() {
+		const el = scrollEl.value;
+		if (!el) return 0;
+		return maxScrollTop ?? Math.max(0, el.scrollHeight - el.clientHeight);
+	}
+	function canScroll(direction) {
+		const el = scrollEl.value;
+		if (!el) return false;
+		const max = getMaxScrollTop();
+		if (direction === ScrollDirection.Forward) return el.scrollTop < max - SCROLL_EPSILON;
+		if (direction === ScrollDirection.Reverse) return el.scrollTop > SCROLL_EPSILON;
+		return false;
+	}
+	function getEdgeIntent() {
+		const el = scrollEl.value;
+		const pointerY = getPointerY();
+		if (!el || pointerY == null) return {
+			direction: ScrollDirection.Idle,
+			speed: 0
+		};
+		const rect = el.getBoundingClientRect();
+		const triggerHeight = rect.height * threshold;
+		if (triggerHeight <= 0) return {
+			direction: ScrollDirection.Idle,
+			speed: 0
+		};
+		let direction = ScrollDirection.Idle;
+		let speed = 0;
+		const distBottom = rect.bottom - pointerY;
+		const distTop = pointerY - rect.top;
+		const canScrollDown = canScroll(ScrollDirection.Forward);
+		const canScrollUp = canScroll(ScrollDirection.Reverse);
+		if (canScrollDown && distBottom <= triggerHeight && pointerY <= rect.bottom + tolerance) {
+			const ratio = Math.abs((rect.bottom - triggerHeight - pointerY) / triggerHeight);
+			direction = ScrollDirection.Forward;
+			speed = acceleration * Math.min(ratio, 1);
+		} else if (canScrollUp && distTop <= triggerHeight && pointerY >= rect.top - tolerance) {
+			const ratio = Math.abs((rect.top + triggerHeight - pointerY) / triggerHeight);
+			direction = ScrollDirection.Reverse;
+			speed = acceleration * Math.min(ratio, 1);
+		}
+		return {
+			direction,
+			speed
+		};
+	}
+	function applyScroll() {
+		const el = scrollEl.value;
+		if (!el) return false;
+		const { direction, speed } = getEdgeIntent();
+		if (direction === ScrollDirection.Idle) return false;
+		if (!unlockedDirections.has(direction)) return false;
+		if (!canScroll(direction)) return false;
+		const delta = direction * speed;
+		if (delta !== 0) {
+			const before = el.scrollTop;
+			const next = Math.min(getMaxScrollTop(), Math.max(0, before + delta));
+			if (Math.abs(next - before) <= SCROLL_EPSILON) return false;
+			el.scrollTop = next;
+			onScroll?.();
+			return true;
+		}
+		return false;
+	}
+	function tick() {
+		rafId = void 0;
+		if (applyScroll()) rafId = requestAnimationFrame(tick);
+	}
+	function scroll() {
+		const pointerY = getPointerY();
+		if (pointerY == null) return false;
+		if (lastPointerY != null) {
+			const moveDirection = Math.sign(pointerY - lastPointerY);
+			if (moveDirection !== ScrollDirection.Idle) unlockedDirections.add(moveDirection);
+		}
+		lastPointerY = pointerY;
+		const didScroll = applyScroll();
+		if (didScroll) rafId ??= requestAnimationFrame(tick);
+		return didScroll;
+	}
+	function start() {
+		const el = scrollEl.value;
+		maxScrollTop = el ? Math.max(0, el.scrollHeight - el.clientHeight) : void 0;
+		scroll();
+	}
+	function stop() {
+		if (rafId != null) {
+			cancelAnimationFrame(rafId);
+			rafId = void 0;
+		}
+		lastPointerY = null;
+		maxScrollTop = void 0;
+		unlockedDirections.clear();
+	}
+	return {
+		scroll,
+		start,
+		stop
+	};
+}
+//#endregion
+export { useAutoScroll };

package/dist/hooks/useCellRender.js

@@ -1,6 +1,8 @@
+import EllipsisText_default from "../components/EllipsisText/index.js";
+import { normalizeEllipsis } from "../utils/ellipsis.js";
 import { valueFormat } from "../utils/valueFormat.js";
-import { isVNode } from "vue";
-import { handleEmptyField } from "@gx-design-vue/pro-utils";
+import { h, isVNode } from "vue";
+import { handleEmptyField, isNil } from "@gx-design-vue/pro-utils";
 //#region src/hooks/useCellRender.ts
 function resolveEmptyText(column, record, tableLevelEmptyText) {
 	if (column.columnEmptyText !== void 0) return typeof column.columnEmptyText === "function" ? column.columnEmptyText(record) : column.columnEmptyText;
@@ -10,15 +12,25 @@ function resolveEmptyText(column, record, tableLevelEmptyText) {
 function useCellRender(options) {
 	function wrapColumnRender(column) {
 		const userRender = column.render;
+		const normalizedEllipsis = normalizeEllipsis(column.ellipsis);
 		const wrappedRender = (value, record, index) => {
 			let cellValue = userRender ? userRender(value, record, index) : value;
 			if (!userRender && column.valueType && !isVNode(cellValue)) cellValue = valueFormat(cellValue, column.valueType, { className: options.prefixCls.value });
 			const emptyText = resolveEmptyText(column, record, options.columnEmptyText?.value);
 			const { value: finalValue } = handleEmptyField(cellValue, emptyText);
+			let measurableText = null;
+			if (typeof cellValue === "string" && cellValue !== "" || typeof cellValue === "number") measurableText = String(cellValue);
+			else if (column.valueType === "link" && !isNil(value) && value !== "" && (typeof value === "string" || typeof value === "number")) measurableText = String(value);
+			if (normalizedEllipsis.enabled && measurableText !== null) return h(EllipsisText_default, {
+				text: measurableText,
+				ellipsis: normalizedEllipsis,
+				prefixCls: options.prefixCls.value
+			}, { default: () => finalValue });
 			return finalValue;
 		};
 		return {
 			...column,
+			ellipsis: false,
 			render: wrappedRender
 		};
 	}

package/dist/hooks/useColumnResize.js

@@ -1,4 +1,5 @@
 import { getColumnKey } from "./useColumns.js";
+import "./useDragHandleColumn.js";
 import { computed, defineComponent, h, onScopeDispose, shallowRef } from "vue";
 //#region src/hooks/useColumnResize.ts
 const MIN_COLUMN_WIDTH = 40;
@@ -82,6 +83,7 @@ function useColumnResize(options) {
 		const source = options.columns.value;
 		const overrides = columnWidthOverrides.value;
 		return source.map((column) => {
+			if (column.key === "__drag_handle__" || column.dataIndex === "__drag_handle__") return column;
 			const columnKey = getColumnKey(column);
 			const overriddenWidth = overrides.get(columnKey);
 			return {

package/dist/hooks/useDragHandleColumn.d.ts

@@ -0,0 +1,26 @@
+import { ProColumnType, ProTableRowDragOptions } from "../interface.js";
+import { ComputedRef } from "vue";
+import { RecordType } from "@gx-design-vue/pro-utils";
+
+//#region src/hooks/useDragHandleColumn.d.ts
+interface UseDragHandleColumnOptions<T = RecordType> {
+  columns: ComputedRef<ProColumnType<T>[]>;
+  rowDraggable: ComputedRef<boolean | ProTableRowDragOptions | undefined>;
+  prefixCls: ComputedRef<string>;
+  cssVarCls: ComputedRef<string>;
+}
+interface UseDragHandleColumnReturn<T = RecordType> {
+  dragColumns: ComputedRef<ProColumnType<T>[]>;
+}
+/** 把手列内部标记 key */
+declare const DRAG_HANDLE_COLUMN_KEY = "__drag_handle__";
+/**
+ * 在列首注入行拖拽把手列。
+ *
+ * 纯函数实现（对标 `applyIndexColumn`），在 `useColumns` 的 `cacheColumns` computed 中、
+ * `applyIndexColumn` 之前调用，确保把手列比序号列更靠前。
+ */
+declare function applyDragHandleColumn<T>(columns: ProColumnType<T>[], rowDraggable: boolean | ProTableRowDragOptions | undefined, prefixCls: string, cssVarCls: string): ProColumnType<T>[];
+declare function useDragHandleColumn<T = RecordType>(options: UseDragHandleColumnOptions<T>): UseDragHandleColumnReturn<T>;
+//#endregion
+export { DRAG_HANDLE_COLUMN_KEY, UseDragHandleColumnOptions, UseDragHandleColumnReturn, applyDragHandleColumn, useDragHandleColumn };

package/dist/hooks/useDragHandleColumn.js

@@ -0,0 +1,52 @@
+import { DragHandle } from "../components/Drag/Handle.js";
+import { computed, createVNode } from "vue";
+import { createUUIDFactory } from "@gx-design-vue/pro-utils";
+//#region src/hooks/useDragHandleColumn.tsx
+/** 把手列内部标记 key */
+const DRAG_HANDLE_COLUMN_KEY = "__drag_handle__";
+/**
+* 创建行拖拽把手列配置。
+*
+* 把手列固定在最前面（比 indexColumn 序号列更靠前），包含 DragHandle 组件。
+* 通过 `disabled(record)` 判断每行是否禁用拖拽。
+*/
+function createDragHandleColumn(options, prefixCls, cssVarCls) {
+	return {
+		key: DRAG_HANDLE_COLUMN_KEY,
+		dataIndex: DRAG_HANDLE_COLUMN_KEY,
+		title: "排序",
+		width: options.width ?? 40,
+		align: options.align ?? "center",
+		fixed: options.fixed ?? "start",
+		uuid: createUUIDFactory().uuid(15),
+		render: (_value, record, index) => {
+			const disabled = options.disabled?.(record) ?? false;
+			return createVNode(DragHandle, {
+				"handleRender": options.handleRender,
+				"record": record,
+				"index": index,
+				"disabled": disabled,
+				"cssVarCls": cssVarCls,
+				"prefixCls": prefixCls
+			}, null);
+		}
+	};
+}
+/**
+* 在列首注入行拖拽把手列。
+*
+* 纯函数实现（对标 `applyIndexColumn`），在 `useColumns` 的 `cacheColumns` computed 中、
+* `applyIndexColumn` 之前调用，确保把手列比序号列更靠前。
+*/
+function applyDragHandleColumn(columns, rowDraggable, prefixCls, cssVarCls) {
+	if (!rowDraggable || columns.length === 0) return columns;
+	if (columns.some((column) => column.dataIndex === "__drag_handle__")) return columns;
+	return [createDragHandleColumn(typeof rowDraggable === "object" ? rowDraggable : {}, prefixCls, cssVarCls), ...columns];
+}
+function useDragHandleColumn(options) {
+	return { dragColumns: computed(() => {
+		return applyDragHandleColumn(options.columns.value, options.rowDraggable.value, options.prefixCls.value, options.cssVarCls.value);
+	}) };
+}
+//#endregion
+export { DRAG_HANDLE_COLUMN_KEY, applyDragHandleColumn, useDragHandleColumn };

package/dist/hooks/useEllipsis.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from "vue";
+
+//#region src/hooks/useEllipsis.d.ts
+interface UseEllipsisReturn {
+  /** 当前文本在给定宽度/行数下是否溢出 */
+  isOverflow: Ref<boolean>;
+}
+/**
+ * 基于 @chenglou/pretext 的溢出判断。
+ *
+ * - prepare(text, font) 一次性预处理（命中 pretext 内部缓存），仅随 text/font 变化重跑；
+ * - layout(prepared, width, lineHeight) 纯算力预算行数，随列宽/行数变化重算（符合 pretext 性能模型）；
+ * - 宽度取自 ResizeObserver 的 contentRect.width（已扣除 padding）；
+ * - font/lineHeight 于 mount 时通过 getComputedStyle 读取，保证与实际 CSS 渲染一致。
+ *
+ * lineCount > 期望行数 即判定为溢出。
+ */
+declare function useEllipsis(textRef: Ref<string>, linesRef: Ref<number>, cellElRef: Ref<HTMLElement | undefined>): UseEllipsisReturn;
+//#endregion
+export { UseEllipsisReturn, useEllipsis };

package/dist/hooks/useEllipsis.js

@@ -0,0 +1,51 @@
+import { computed, onMounted, ref } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { layout, prepare } from "@chenglou/pretext";
+//#region src/hooks/useEllipsis.ts
+/**
+* 基于 @chenglou/pretext 的溢出判断。
+*
+* - prepare(text, font) 一次性预处理（命中 pretext 内部缓存），仅随 text/font 变化重跑；
+* - layout(prepared, width, lineHeight) 纯算力预算行数，随列宽/行数变化重算（符合 pretext 性能模型）；
+* - 宽度取自 ResizeObserver 的 contentRect.width（已扣除 padding）；
+* - font/lineHeight 于 mount 时通过 getComputedStyle 读取，保证与实际 CSS 渲染一致。
+*
+* lineCount > 期望行数 即判定为溢出。
+*/
+function useEllipsis(textRef, linesRef, cellElRef) {
+	const contentWidth = ref(0);
+	const fontInfo = ref({
+		font: "14px sans-serif",
+		lineHeight: 22
+	});
+	useResizeObserver(cellElRef, (entries) => {
+		const entry = entries[0];
+		if (entry) contentWidth.value = entry.contentRect.width;
+	});
+	onMounted(() => {
+		const el = cellElRef.value;
+		if (!el) return;
+		const computedStyle = getComputedStyle(el);
+		const fontSize = Number.parseFloat(computedStyle.fontSize) || 14;
+		let lineHeight = Number.parseFloat(computedStyle.lineHeight);
+		if (!lineHeight || Number.isNaN(lineHeight)) lineHeight = fontSize * 1.5715;
+		fontInfo.value = {
+			font: `${fontSize}px ${computedStyle.fontFamily}`,
+			lineHeight
+		};
+	});
+	const prepared = computed(() => {
+		const text = textRef.value;
+		if (!text) return null;
+		return prepare(text, fontInfo.value.font);
+	});
+	return { isOverflow: computed(() => {
+		const preparedText = prepared.value;
+		const width = contentWidth.value;
+		if (!preparedText || width <= 0) return false;
+		const { lineCount } = layout(preparedText, width, fontInfo.value.lineHeight);
+		return lineCount > linesRef.value;
+	}) };
+}
+//#endregion
+export { useEllipsis };

package/dist/hooks/useRowDrag.d.ts

@@ -0,0 +1,42 @@
+import { ProTableRowDragOptions } from "../interface.js";
+import { ComputedRef, Ref } from "vue";
+import { RecordType } from "@gx-design-vue/pro-utils";
+
+//#region src/hooks/useRowDrag.d.ts
+interface UseRowDragOptions<T = RecordType> {
+  /** tbody DOM 引用（通过 components.body.wrapper 覆写拿到） */
+  tbodyEl: Ref<HTMLElement | undefined>;
+  /** 表格滚动容器（用于垂直自动滚动） */
+  scrollEl: Ref<HTMLElement | undefined>;
+  /** 数据源（只读 computed） */
+  dataSource: ComputedRef<T[]>;
+  /** 行唯一标识字段 */
+  rowKey: ComputedRef<string>;
+  /** 行拖拽配置（含 disabled 谓词） */
+  rowDraggable: ComputedRef<boolean | ProTableRowDragOptions | undefined>;
+  /** 拖拽排序完成回调（仅通知重排结果，由调用方决定是否回写数据源） */
+  onSortEnd?: (from: number, to: number, newData: T[], record: T) => void;
+}
+/** onRow 返回的行属性（对标 antdv 的 CellAttributes 子集） */
+type RowDragCellProps = Record<string, any>;
+interface UseRowDragReturn {
+  isDragging: Ref<boolean>;
+  draggingRowKey: Ref<string | number>;
+  /** 返回 onRow 函数（antdv Table 的 onRow 签名） */
+  getRowProps: (record: any, index: number) => RowDragCellProps;
+}
+/**
+ * 表格行拖拽排序 —— 精简复刻 `useTabDrag` 的垂直版本。
+ *
+ * - 仅从把手列（`[data-drag-handle]`）发起拖拽，单元格交互不受影响
+ * - 移动阈值（3px）区分点击与拖拽
+ * - 拖拽行 `transform: translateY(delta)` 跟随指针
+ * - 同列表其他行按虚拟插入位置实时 `translate` 让位（CSS translate 属性 + WAAPI）
+ * - drop 锚点用最近中心法（被拖行中心 Y 与全量各行中心比距离取最近者；含自身，半身位即换位）
+ * - 松手 → onSortEnd（仅 emit 排序结果，由使用方回写数据源）→ nextTick 用 flipAnimate 平滑归位
+ * - 拖拽结束后捕获抑制下一次 click
+ * - 指针接近滚动容器上下边缘时自动滚动（垂直版 detectScrollIntent）
+ */
+declare function useRowDrag<T = RecordType>(options: UseRowDragOptions<T>): UseRowDragReturn;
+//#endregion
+export { RowDragCellProps, UseRowDragOptions, UseRowDragReturn, useRowDrag };

package/dist/hooks/useRowDrag.js

@@ -0,0 +1,268 @@
+import { arrayMove } from "../utils/arrayMove.js";
+import { flipAnimate } from "../utils/flipAnimate.js";
+import { useAutoScroll } from "./useAutoScroll.js";
+import { nextTick, ref } from "vue";
+import { useEventListener } from "@vueuse/core";
+//#region src/hooks/useRowDrag.ts
+/** 移动阈值（px），超过才视为拖拽，避免误触影响点击 */
+const DRAG_THRESHOLD = 3;
+const SCROLL_RESTORE_FRAMES = 2;
+const DISPLACEMENT_DURATION = 160;
+const DISPLACEMENT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
+const DRAGGING_Z_INDEX = "1000";
+function isFromDragHandle(target) {
+	const el = target;
+	if (!el || typeof el.closest !== "function") return false;
+	const handle = el.closest("[data-drag-handle]");
+	if (!handle) return false;
+	return handle.getAttribute("data-drag-disabled") !== "true";
+}
+/**
+* 表格行拖拽排序 —— 精简复刻 `useTabDrag` 的垂直版本。
+*
+* - 仅从把手列（`[data-drag-handle]`）发起拖拽，单元格交互不受影响
+* - 移动阈值（3px）区分点击与拖拽
+* - 拖拽行 `transform: translateY(delta)` 跟随指针
+* - 同列表其他行按虚拟插入位置实时 `translate` 让位（CSS translate 属性 + WAAPI）
+* - drop 锚点用最近中心法（被拖行中心 Y 与全量各行中心比距离取最近者；含自身，半身位即换位）
+* - 松手 → onSortEnd（仅 emit 排序结果，由使用方回写数据源）→ nextTick 用 flipAnimate 平滑归位
+* - 拖拽结束后捕获抑制下一次 click
+* - 指针接近滚动容器上下边缘时自动滚动（垂直版 detectScrollIntent）
+*/
+function useRowDrag(options) {
+	const { tbodyEl, scrollEl, dataSource, rowKey, rowDraggable, onSortEnd } = options;
+	const isDragging = ref(false);
+	const draggingRowKey = ref("");
+	let dragStartClientY = 0;
+	let dragStartScrollTop = 0;
+	let dragPointerOffsetY = 0;
+	let pointerClientY = 0;
+	let dragEl = null;
+	let rowRects = [];
+	let pendingKey = "";
+	let pendingStartY = 0;
+	let pendingRecord = null;
+	const { scroll: scrollOnDragMove, start: startAutoScroll, stop: stopAutoScroll } = useAutoScroll(scrollEl, () => pointerClientY, { onScroll: updateDragPosition });
+	function queryRowEl(key) {
+		return tbodyEl.value?.querySelector(`tr[data-row-key="${key}"]`) ?? null;
+	}
+	function recordRowRects() {
+		rowRects = [];
+		const data = dataSource.value;
+		for (const record of data) {
+			const key = record?.[rowKey.value];
+			if (key == null) continue;
+			const el = queryRowEl(key);
+			if (!el) continue;
+			const rect = el.getBoundingClientRect();
+			rowRects.push({
+				el,
+				key,
+				top: rect.top,
+				height: rect.height,
+				translate: 0
+			});
+		}
+	}
+	function getCurrentScrollOffset() {
+		return (scrollEl.value?.scrollTop ?? 0) - dragStartScrollTop;
+	}
+	function getVisualPointerY() {
+		return pointerClientY + getCurrentScrollOffset();
+	}
+	function getDragCenterY() {
+		const dragRect = rowRects.find((r) => r.key === draggingRowKey.value);
+		if (!dragRect) return getVisualPointerY();
+		return getVisualPointerY() - dragPointerOffsetY + dragRect.height / 2;
+	}
+	/**
+	* 计算拖拽行应去的目标索引（最近中心法，对齐 dnd-kit `closestCenter`）。
+	*
+	* 在全量行（含拖拽行自身）里找离拖拽行视觉中心最近的行，返回其索引作为
+	* `arrayMove(data, fromIdx, 返回值)` 的 to。返回值的几何意义即"拖拽行想占据的位置"：
+	*  - 最近行是自己(fromIdx) → from===to，不移动
+	*  - 最近行在下方 → 向下移动占据其位置
+	*  - 最近行在上方 → 向上移动占据其位置
+	*
+	* 关键：拖拽行自身必须参与比较，否则切换阈值会从「半个身位」退化成「一个身位」——
+	* 缺少起始参考点后，需要整行越过下一行中心才会换位（表现为完全覆盖才触发）；
+	* 含自身时切换点落在相邻两行中心的中点，即拖动半个行高即换位。
+	*/
+	function computeTargetIdx(dragCenterY) {
+		const fromIdx = rowRects.findIndex((r) => r.key === draggingRowKey.value);
+		if (fromIdx < 0) return -1;
+		let nearestIdx = fromIdx;
+		let nearestDist = Infinity;
+		for (let i = 0; i < rowRects.length; i++) {
+			const center = rowRects[i].top + rowRects[i].height / 2;
+			const dist = Math.abs(dragCenterY - center);
+			if (dist < nearestDist) {
+				nearestDist = dist;
+				nearestIdx = i;
+			}
+		}
+		return nearestIdx;
+	}
+	/** 同区间其他行实时让位 */
+	function applyDisplacement(targetIdx) {
+		const fromIdx = rowRects.findIndex((r) => r.key === draggingRowKey.value);
+		if (fromIdx < 0) return;
+		const dragHeight = rowRects.find((r) => r.key === draggingRowKey.value)?.height ?? 0;
+		for (let i = 0; i < rowRects.length; i++) {
+			const rect = rowRects[i];
+			if (rect.key === draggingRowKey.value) continue;
+			let translate = 0;
+			if (fromIdx < targetIdx && i > fromIdx && i <= targetIdx) translate = -dragHeight;
+			else if (fromIdx > targetIdx && i >= targetIdx && i < fromIdx) translate = dragHeight;
+			applyRowTranslate(rect, translate);
+		}
+	}
+	function applyRowTranslate(rect, nextTranslate) {
+		const prevTranslate = rect.translate;
+		if (prevTranslate === nextTranslate) return;
+		rect.animation?.cancel();
+		rect.translate = nextTranslate;
+		rect.el.style.translate = nextTranslate ? `0px ${nextTranslate}px` : "";
+		if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches || typeof rect.el.animate !== "function") return;
+		rect.animation = rect.el.animate({ translate: [`0px ${prevTranslate}px`, `0px ${nextTranslate}px`] }, {
+			duration: DISPLACEMENT_DURATION,
+			easing: DISPLACEMENT_EASING
+		});
+		const clear = () => {
+			rect.animation = void 0;
+		};
+		rect.animation.addEventListener("finish", clear, { once: true });
+		rect.animation.addEventListener("cancel", clear, { once: true });
+	}
+	function updateDragPosition() {
+		if (!isDragging.value) return;
+		if (dragEl) dragEl.style.transform = `translateY(${getVisualPointerY() - dragStartClientY}px)`;
+		applyDisplacement(computeTargetIdx(getDragCenterY()));
+	}
+	function clearInlineStyles(rects = rowRects, activeDragEl = dragEl) {
+		for (const rect of rects) {
+			rect.animation?.cancel();
+			rect.animation = void 0;
+			rect.translate = 0;
+			rect.el.style.translate = "";
+			rect.el.style.zIndex = "";
+		}
+		if (activeDragEl) {
+			activeDragEl.style.transform = "";
+			activeDragEl.classList.remove("row-dragging");
+		}
+	}
+	function restoreScrollTop(scrollTop, frames = SCROLL_RESTORE_FRAMES) {
+		const el = scrollEl.value;
+		if (!el) return;
+		el.scrollTop = scrollTop;
+		if (frames <= 0 || typeof requestAnimationFrame === "undefined") return;
+		requestAnimationFrame(() => restoreScrollTop(scrollTop, frames - 1));
+	}
+	function beginDrag(clientY) {
+		isDragging.value = true;
+		dragStartClientY = clientY;
+		dragStartScrollTop = scrollEl.value?.scrollTop ?? 0;
+		pointerClientY = clientY;
+		dragEl = queryRowEl(draggingRowKey.value);
+		recordRowRects();
+		const dragRect = rowRects.find((r) => r.key === draggingRowKey.value);
+		dragPointerOffsetY = dragRect ? clientY - dragRect.top : 0;
+		if (dragEl) {
+			dragEl.classList.add("row-dragging");
+			dragEl.style.zIndex = DRAGGING_Z_INDEX;
+		}
+		startAutoScroll();
+	}
+	/** 捕获阶段抑制拖拽结束后的下一次 click */
+	function suppressNextClick() {
+		const target = dragEl;
+		if (!target) return;
+		const suppress = (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+			target.removeEventListener("click", suppress, true);
+		};
+		target.addEventListener("click", suppress, {
+			capture: true,
+			once: true
+		});
+	}
+	function handleMousedown(event, record) {
+		if (event.button !== 0) return;
+		if (!isFromDragHandle(event.target)) return;
+		const cfg = rowDraggable.value;
+		if (!cfg) return;
+		if ((typeof cfg === "object" ? cfg : {}).disabled?.(record)) return;
+		event.preventDefault();
+		const key = record?.[rowKey.value];
+		pendingKey = key;
+		pendingStartY = event.clientY;
+		pendingRecord = record;
+		draggingRowKey.value = key;
+	}
+	function handleMousemove(event) {
+		if (!isDragging.value) {
+			if (!pendingKey) return;
+			if (Math.abs(event.clientY - pendingStartY) < DRAG_THRESHOLD) return;
+			beginDrag(pendingStartY);
+		}
+		pointerClientY = event.clientY;
+		updateDragPosition();
+		scrollOnDragMove();
+	}
+	function endDrag() {
+		const targetIdx = computeTargetIdx(getDragCenterY());
+		const fromIdx = rowRects.findIndex((r) => r.key === draggingRowKey.value);
+		const data = dataSource.value;
+		const prevRects = /* @__PURE__ */ new Map();
+		for (const { key, el } of rowRects) prevRects.set(key, el.getBoundingClientRect());
+		stopAutoScroll();
+		const currentRowRects = rowRects;
+		const currentDragEl = dragEl;
+		const currentScrollTop = scrollEl.value?.scrollTop ?? 0;
+		const record = pendingRecord;
+		if (targetIdx >= 0 && targetIdx !== fromIdx && targetIdx < data.length) {
+			const newData = arrayMove(data, fromIdx, targetIdx);
+			onSortEnd?.(fromIdx, targetIdx, newData, record);
+			nextTick(() => {
+				restoreScrollTop(currentScrollTop);
+				clearInlineStyles(currentRowRects, currentDragEl);
+				flipAnimate(data.map((r) => ({
+					key: r[rowKey.value],
+					el: queryRowEl(r[rowKey.value])
+				})).filter((entry) => Boolean(entry.el)), prevRects);
+				restoreScrollTop(currentScrollTop);
+			});
+		} else clearInlineStyles();
+		suppressNextClick();
+		isDragging.value = false;
+		draggingRowKey.value = "";
+		dragEl = null;
+		rowRects = [];
+		dragPointerOffsetY = 0;
+		pendingKey = "";
+		pendingRecord = null;
+	}
+	function handleMouseup() {
+		if (isDragging.value) endDrag();
+		else if (pendingKey) {
+			pendingKey = "";
+			draggingRowKey.value = "";
+			pendingRecord = null;
+		}
+	}
+	const documentTarget = typeof document === "undefined" ? void 0 : document;
+	useEventListener(documentTarget, "mousemove", handleMousemove);
+	useEventListener(documentTarget, "mouseup", handleMouseup);
+	function getRowProps(record, _index) {
+		return { onMousedown: (event) => handleMousedown(event, record) };
+	}
+	return {
+		isDragging,
+		draggingRowKey,
+		getRowProps
+	};
+}
+//#endregion
+export { useRowDrag };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BeforeSearchSubmit, ColConfig, ColumnWithKeyOrDataIndex, CustomDataFn, CustomDataRender, CustomRenderResult, DefaultProColumn, DefaultProColumnWithKeyOrDataIndex, DefaultRender, FormConfig, OperateRowProps, PageItemFn, PageItemRender, PageState, ProColumn, ProColumnType, ProColumnsValueType, ProCoreActionType, ProCoreFormType, ProFieldValueFormat, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap, ProTableBodyCellProps, ProTableClassNamesType, ProTableCustomProps, ProTableEmits, ProTableFetchParams, ProTableIndexColumn, ProTablePagination, ProTablePaginationConfig, ProTableProps, ProTableRef, ProTableScrollPolicy, ProTableSizeType, ProTableSlots, ProTableStylesType, RequestConfig, RequestData, RequestFunction, RowSelectionActions, TableSemanticName, TableSorterRecord, ToolbarOptionConfig, ToolbarPlacement } from "./interface.js";
+import { BeforeSearchSubmit, ColConfig, ColumnWithKeyOrDataIndex, CustomDataFn, CustomDataRender, CustomRenderResult, DefaultProColumn, DefaultProColumnWithKeyOrDataIndex, DefaultRender, FormConfig, OperateRowProps, PageItemFn, PageItemRender, PageState, ProColumn, ProColumnEllipsis, ProColumnType, ProColumnsValueType, ProCoreActionType, ProCoreFormType, ProFieldValueFormat, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap, ProTableBodyCellProps, ProTableClassNamesType, ProTableCustomProps, ProTableEmits, ProTableFetchParams, ProTableIndexColumn, ProTablePagination, ProTablePaginationConfig, ProTableProps, ProTableRef, ProTableRowDragOptions, ProTableRowSortEndEvent, ProTableScrollPolicy, ProTableSizeType, ProTableSlots, ProTableStylesType, RequestConfig, RequestData, RequestFunction, RowSelectionActions, TableSemanticName, TableSorterRecord, ToolbarOptionConfig, ToolbarPlacement } from "./interface.js";
 import _default from "./ProTable.js";
 import { useInjectTableContext } from "./context/TableContext.js";
 import { UseProBreakpointsReturn, useProBreakpoints } from "./hooks/useBreakpoints.js";
@@ -7,4 +7,5 @@ import { usePagination } from "./hooks/usePagination.js";
 import { UseRequestOptionsParams, UseRequestOptionsReturn, useRequestOptions } from "./hooks/useRequestOptions.js";
 import { UseTableOptions, UseTableReturn, useTable } from "./hooks/useTable.js";
 import { UseTableFormOptions, UseTableFormReturn, useTableForm } from "./hooks/useTableForm.js";
-export { BeforeSearchSubmit, ColConfig, ColumnWithKeyOrDataIndex, CustomDataFn, CustomDataRender, CustomRenderResult, DefaultProColumn, DefaultProColumnWithKeyOrDataIndex, DefaultRender, type FetchDataAction, type FetchDataConfig, FormConfig, _default as GProTable, OperateRowProps, PageItemFn, PageItemRender, PageState, ProColumn, ProColumnType, ProColumnsValueType, ProCoreActionType, ProCoreFormType, ProFieldValueFormat, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap, ProTableBodyCellProps, ProTableClassNamesType, ProTableCustomProps, ProTableEmits, ProTableFetchParams, ProTableIndexColumn, ProTablePagination, ProTablePaginationConfig, ProTableProps, ProTableRef, ProTableScrollPolicy, ProTableSizeType, ProTableSlots, ProTableStylesType, RequestConfig, RequestData, RequestFunction, RowSelectionActions, TableSemanticName, TableSorterRecord, ToolbarOptionConfig, ToolbarPlacement, type UseProBreakpointsReturn, type UseRequestOptionsParams, type UseRequestOptionsReturn, type UseTableFormOptions, type UseTableFormReturn, type UseTableOptions, type UseTableReturn, useFetchData, useInjectTableContext, usePagination, useProBreakpoints, useRequestOptions, useTable, useTableForm };
+import { arrayMove } from "./utils/arrayMove.js";
+export { BeforeSearchSubmit, ColConfig, ColumnWithKeyOrDataIndex, CustomDataFn, CustomDataRender, CustomRenderResult, DefaultProColumn, DefaultProColumnWithKeyOrDataIndex, DefaultRender, type FetchDataAction, type FetchDataConfig, FormConfig, _default as GProTable, OperateRowProps, PageItemFn, PageItemRender, PageState, ProColumn, ProColumnEllipsis, ProColumnType, ProColumnsValueType, ProCoreActionType, ProCoreFormType, ProFieldValueFormat, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap, ProTableBodyCellProps, ProTableClassNamesType, ProTableCustomProps, ProTableEmits, ProTableFetchParams, ProTableIndexColumn, ProTablePagination, ProTablePaginationConfig, ProTableProps, ProTableRef, ProTableRowDragOptions, ProTableRowSortEndEvent, ProTableScrollPolicy, ProTableSizeType, ProTableSlots, ProTableStylesType, RequestConfig, RequestData, RequestFunction, RowSelectionActions, TableSemanticName, TableSorterRecord, ToolbarOptionConfig, ToolbarPlacement, type UseProBreakpointsReturn, type UseRequestOptionsParams, type UseRequestOptionsReturn, type UseTableFormOptions, type UseTableFormReturn, type UseTableOptions, type UseTableReturn, arrayMove, useFetchData, useInjectTableContext, usePagination, useProBreakpoints, useRequestOptions, useTable, useTableForm };

package/dist/index.js

@@ -3,8 +3,9 @@ import { useRequestOptions } from "./hooks/useRequestOptions.js";
 import { useInjectTableContext } from "./context/TableContext.js";
 import { useFetchData } from "./hooks/useFetchData.js";
 import { usePagination } from "./hooks/usePagination.js";
+import { arrayMove } from "./utils/arrayMove.js";
 import { useTable } from "./hooks/useTable.js";
 import { useTableForm } from "./hooks/useTableForm.js";
 import "./hooks/index.js";
 import ForwardProTable from "./ProTable.js";
-export { ForwardProTable as GProTable, useFetchData, useInjectTableContext, usePagination, useProBreakpoints, useRequestOptions, useTable, useTableForm };
+export { ForwardProTable as GProTable, arrayMove, useFetchData, useInjectTableContext, usePagination, useProBreakpoints, useRequestOptions, useTable, useTableForm };