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

package/dist/hooks/useFitPage.d.ts

@@ -0,0 +1,19 @@
+import { BarExpose } from "../components/ScrollBar/Bar.js";
+import { ComputedRef, Ref } from "vue";
+
+//#region src/hooks/useFitPage.d.ts
+interface UseFitPageOptions {
+  fitPage: ComputedRef<boolean>;
+  cardEl: Ref<HTMLElement | undefined>;
+  prefixCls: ComputedRef<string>;
+}
+interface UseFitPageReturn {
+  scrollY: ComputedRef<number>;
+  overflowHidden: ComputedRef<boolean>;
+  fullPageClass: ComputedRef<string>;
+  scrollEl: Ref<HTMLElement | undefined>;
+  barRef: Ref<BarExpose | undefined>;
+}
+declare function useFitPage(options: UseFitPageOptions): UseFitPageReturn;
+//#endregion
+export { UseFitPageOptions, UseFitPageReturn, useFitPage };

package/dist/hooks/useFitPage.js

@@ -0,0 +1,90 @@
+import { useProvideScrollBarContext } from "../components/ScrollBar/context.js";
+import { computed, ref, watchEffect } from "vue";
+import { useElementSize, useMutationObserver, useResizeObserver, useScroll } from "@vueuse/core";
+import { onMountedOrActivated } from "@gx-design-vue/pro-hooks";
+//#region src/hooks/useFitPage.ts
+function queryChildElements(card, prefixCls, targets) {
+	targets.toolbarEl.value = card.querySelector(`.${prefixCls}-list-toolbar`) ?? void 0;
+	targets.headerEl.value = card.querySelector(".ant-table-header") ?? void 0;
+	targets.pageEl.value = card.querySelector(".ant-table-pagination") ?? void 0;
+	targets.scrollEl.value = card.querySelector(".ant-table-body") ?? void 0;
+	targets.bodyInnerEl.value = card.querySelector(".ant-table-body > table") ?? void 0;
+}
+function getElementBlockMargin(el) {
+	if (!el) return 0;
+	const style = getComputedStyle(el);
+	return (Number.parseFloat(style.marginTop) || 0) + (Number.parseFloat(style.marginBottom) || 0);
+}
+function useFitPage(options) {
+	const { fitPage, cardEl, prefixCls } = options;
+	const barRef = ref();
+	const toolbarEl = ref();
+	const headerEl = ref();
+	const pageEl = ref();
+	const scrollEl = ref();
+	const bodyInnerEl = ref();
+	const childRefs = {
+		toolbarEl,
+		headerEl,
+		pageEl,
+		scrollEl,
+		bodyInnerEl
+	};
+	const { height: cardHeight } = useElementSize(cardEl);
+	const { height: toolbarHeight } = useElementSize(toolbarEl);
+	const { height: headerHeight } = useElementSize(headerEl);
+	const { height: pageHeight } = useElementSize(pageEl);
+	const { height: bodyContentHeight } = useElementSize(bodyInnerEl);
+	useMutationObserver(cardEl, () => {
+		if (cardEl.value) queryChildElements(cardEl.value, prefixCls.value, childRefs);
+	}, {
+		childList: true,
+		subtree: true
+	});
+	onMountedOrActivated(() => {
+		if (cardEl.value) queryChildElements(cardEl.value, prefixCls.value, childRefs);
+	});
+	const toolbarMargin = computed(() => getElementBlockMargin(toolbarEl.value));
+	const pageMargin = computed(() => {
+		return getElementBlockMargin(pageEl.value);
+	});
+	const scrollY = computed(() => {
+		if (!cardEl.value || !fitPage.value) return 0;
+		const tableHeight = cardHeight.value - toolbarHeight.value - toolbarMargin.value - headerHeight.value - pageHeight.value - pageMargin.value;
+		return Math.max(0, tableHeight);
+	});
+	const overflowHidden = computed(() => {
+		if (!scrollY.value || !fitPage.value) return false;
+		return bodyContentHeight.value <= scrollY.value;
+	});
+	const fullPageClass = computed(() => {
+		return fitPage.value ? `${prefixCls.value}-full-page` : "";
+	});
+	watchEffect(() => {
+		if (!scrollEl.value) return;
+		if (fitPage.value && scrollY.value > 0) scrollEl.value.style.height = `${scrollY.value}px`;
+		else scrollEl.value.style.height = "";
+	});
+	useScroll(scrollEl, { onScroll: () => {
+		if (scrollEl.value) barRef.value?.handleScroll(scrollEl.value);
+	} });
+	useResizeObserver(scrollEl, () => {
+		barRef.value?.update();
+	});
+	useProvideScrollBarContext({
+		className: `${prefixCls.value}-scroll`,
+		tableHeaderHeight: headerHeight,
+		tableScrollYHeight: scrollY,
+		scrollbarElement: cardEl,
+		wrapElement: scrollEl
+	});
+	return {
+		scrollY,
+		overflowHidden,
+		fullPageClass,
+		scrollEl,
+		barRef
+	};
+}
+//#endregion
+export { useFitPage };

package/dist/hooks/useKeepAliveReload.d.ts

@@ -0,0 +1,21 @@
+import { ComputedRef, Ref } from "vue";
+
+//#region src/hooks/useKeepAliveReload.d.ts
+interface UseKeepAliveReloadOptions {
+  enabled: ComputedRef<boolean>;
+  reload: () => void;
+}
+interface UseKeepAliveReloadReturn {
+  hasActivated: Ref<boolean>;
+}
+/**
+ * 安全的 onActivated 包装：无组件实例时直接执行回调。
+ */
+declare function tryOnActivated(callback: () => void): void;
+/**
+ * Keep-alive 页面重新进入时触发数据请求。
+ * 首次激活仅标记状态，后续激活且 enabled 为 true 时调用 reload。
+ */
+declare function useKeepAliveReload(options: UseKeepAliveReloadOptions): UseKeepAliveReloadReturn;
+//#endregion
+export { UseKeepAliveReloadOptions, UseKeepAliveReloadReturn, tryOnActivated, useKeepAliveReload };

package/dist/hooks/useKeepAliveReload.js

@@ -0,0 +1,24 @@
+import { getCurrentInstance, nextTick, onActivated, ref } from "vue";
+//#region src/hooks/useKeepAliveReload.ts
+/**
+* 安全的 onActivated 包装：无组件实例时直接执行回调。
+*/
+function tryOnActivated(callback) {
+	if (getCurrentInstance()) onActivated(callback);
+	else nextTick(callback);
+}
+/**
+* Keep-alive 页面重新进入时触发数据请求。
+* 首次激活仅标记状态，后续激活且 enabled 为 true 时调用 reload。
+*/
+function useKeepAliveReload(options) {
+	const hasActivated = ref(false);
+	tryOnActivated(() => {
+		if (hasActivated.value) {
+			if (options.enabled.value) options.reload();
+		} else hasActivated.value = true;
+	});
+	return { hasActivated };
+}
+//#endregion
+export { tryOnActivated, useKeepAliveReload };

package/dist/hooks/useLoading.d.ts

@@ -1,10 +1,21 @@
-import { BaseTableProps } from "../props.js";
-import { Ref } from "vue";
+import { ComputedRef, Ref } from "vue";
 
 //#region src/hooks/useLoading.d.ts
-declare function useLoading(options: {
-  loading: Ref<BaseTableProps['loading']>;
-  onChange: (value: BaseTableProps['loading']) => void;
-}): [Ref<boolean>, (value: boolean) => void];
+interface UseLoadingOptions {
+  loading: ComputedRef<boolean | {
+    spinning?: boolean;
+  } | undefined>;
+  onChange?: (loading: boolean) => void;
+}
+interface UseLoadingReturn {
+  loading: Ref<boolean>;
+  setLoading: (value: boolean) => void;
+}
+/**
+ * Table loading 状态管理。
+ * 支持 boolean 和 SpinProps 对象两种 loading prop 形式，
+ * 内部始终维护 boolean 状态，外部 prop 变化时自动同步。
+ */
+declare function useLoading(options: UseLoadingOptions): UseLoadingReturn;
 //#endregion
-export { useLoading };
+export { UseLoadingOptions, UseLoadingReturn, useLoading };

package/dist/hooks/useLoading.js

@@ -1,20 +1,36 @@
 import { ref, watch } from "vue";
 import { isBoolean, isObject } from "@gx-design-vue/pro-utils";
-
 //#region src/hooks/useLoading.ts
+/** 从 boolean 或 SpinProps 对象中提取 spinning 状态 */
+function toSpinning(value, fallback = false) {
+	if (isBoolean(value)) return value;
+	if (isObject(value)) return value.spinning ?? fallback;
+	return fallback;
+}
+/**
+* Table loading 状态管理。
+* 支持 boolean 和 SpinProps 对象两种 loading prop 形式，
+* 内部始终维护 boolean 状态，外部 prop 变化时自动同步。
+*/
 function useLoading(options) {
-	const loading = ref(getStatus(options.loading.value));
-	watch(() => options.loading.value, (val) => {
-		loading.value = getStatus(val, loading.value);
+	const loading = ref(toSpinning(options.loading.value));
+	watch(() => options.loading.value, (propValue) => {
+		const next = toSpinning(propValue, loading.value);
+		if (next !== loading.value) {
+			loading.value = next;
+			options.onChange?.(next);
+		}
 	});
-	function getStatus(value, defaultValue = false) {
-		return isBoolean(value) ? value : isObject(value) ? value?.spinning ?? defaultValue : defaultValue;
-	}
 	function setLoading(value) {
-		loading.value = value;
+		if (loading.value !== value) {
+			loading.value = value;
+			options.onChange?.(value);
+		}
 	}
-	return [loading, setLoading];
+	return {
+		loading,
+		setLoading
+	};
 }
-
 //#endregion
-export { useLoading };
+export { useLoading };

package/dist/hooks/usePagination.d.ts

@@ -1,18 +1,21 @@
-import { PageItemRender } from "../types/SlotsTypings.js";
-import { PageState, ProTablePagination, ProTableProps } from "../types/TableTypings.js";
+import { PageState, ProTablePagination, ProTablePaginationConfig } from "../interface.js";
 import { Ref } from "vue";
 
 //#region src/hooks/usePagination.d.ts
+/**
+ * 分页状态管理。
+ * 合并用户分页配置与默认值，分离 UI 分页展示与请求分页参数。
+ * setPagination 只同步 current/pageSize/total 到 requestPagination，避免 UI 字段污染请求参数。
+ */
 declare function usePagination({
-  pagination,
-  pageItemRender
+  pagination
 }: {
-  pagination: Ref<ProTableProps['pagination']>;
-  pageItemRender: PageItemRender;
+  pagination: Ref<ProTablePagination | undefined>;
 }): {
   paginationInfo: Ref<ProTablePagination | false>;
+  paginationAlign: Ref<'start' | 'center' | 'end'>;
   requestPagination: PageState;
-  setPagination: (info: Partial<ProTablePagination>) => void;
+  setPagination: (info: Partial<ProTablePaginationConfig>) => void;
 };
 //#endregion
 export { usePagination };

package/dist/hooks/usePagination.js

@@ -1,11 +1,9 @@
-import { reactive, ref, unref, watch } from "vue";
-import { cloneDeep, deepMerge, forInObject, isFunction, isNumber } from "@gx-design-vue/pro-utils";
-
-//#region src/hooks/usePagination.tsx
+import { computed, reactive, ref, watch } from "vue";
+import { isNumber, merge } from "@gx-design-vue/pro-utils";
+//#region src/hooks/usePagination.ts
 const defaultPagination = {
 	current: 1,
 	pageSize: 10,
-	size: "default",
 	showQuickJumper: true,
 	showSizeChanger: true,
 	pageSizeOptions: [
@@ -15,48 +13,59 @@ const defaultPagination = {
 		"100"
 	]
 };
-function usePagination({ pagination, pageItemRender }) {
+/**
+* 分页状态管理。
+* 合并用户分页配置与默认值，分离 UI 分页展示与请求分页参数。
+* setPagination 只同步 current/pageSize/total 到 requestPagination，避免 UI 字段污染请求参数。
+*/
+function usePagination({ pagination }) {
 	const paginationInfo = ref({ ...defaultPagination });
 	const requestPagination = reactive({
-		current: defaultPagination.current || 1,
-		pageSize: defaultPagination.pageSize || 10,
+		current: defaultPagination.current,
+		pageSize: defaultPagination.pageSize,
 		total: 0
 	});
-	watch(() => pagination.value, () => {
-		if (pagination.value === false) {
+	watch(() => pagination.value, (paginationValue) => {
+		if (paginationValue === false) {
 			paginationInfo.value = false;
 			return;
 		}
-		const itemRenderProps = isFunction(pageItemRender) ? { itemRender: ({ page, type, originalElement }) => pageItemRender ? pageItemRender({
-			page,
-			type,
-			originalElement
-		}) : null } : null;
-		const pageInfo = {
+		const merged = {
 			...defaultPagination,
-			...pagination.value || {},
-			...itemRenderProps || {}
+			...paginationValue || {}
 		};
-		if (!pagination.value?.showTotal) pageInfo.showTotal = (total) => `共${total < pageInfo.pageSize ? 1 : Math.ceil(total / (pageInfo.pageSize || 10))}页 ${total}条记录`;
-		paginationInfo.value = cloneDeep(pageInfo);
-		forInObject(requestPagination, (key) => {
-			if (isNumber(pageInfo[key])) requestPagination[key] = pageInfo[key];
-		});
+		paginationInfo.value = merged;
+		syncRequestPagination(merged);
 	}, {
-		deep: 1,
+		deep: true,
 		immediate: true
 	});
-	function setPagination(state) {
+	function syncRequestPagination(info) {
+		if (isNumber(info.current)) requestPagination.current = info.current;
+		if (isNumber(info.pageSize)) requestPagination.pageSize = info.pageSize;
+		if (isNumber(info.total)) requestPagination.total = info.total;
+	}
+	function setPagination(info) {
 		if (paginationInfo.value === false) return;
-		paginationInfo.value = deepMerge(unref(paginationInfo), state);
-		for (const key in requestPagination) if (state[key] && isNumber(state[key])) requestPagination[key] = state[key];
+		paginationInfo.value = merge({}, paginationInfo.value, info);
+		syncRequestPagination(info);
 	}
 	return {
 		paginationInfo,
+		paginationAlign: computed(() => {
+			const paginationConfig = paginationInfo.value;
+			if (!paginationConfig) return "end";
+			const placementList = paginationConfig.placement;
+			if (!Array.isArray(placementList)) return "end";
+			const matchedPlacement = placementList.find((item) => item.includes("bottom") || item.includes("top"));
+			if (!matchedPlacement) return "end";
+			if (matchedPlacement.includes("Start")) return "start";
+			if (matchedPlacement.includes("Center")) return "center";
+			return "end";
+		}),
 		requestPagination,
 		setPagination
 	};
 }
-
 //#endregion
-export { usePagination };
+export { usePagination };

package/dist/hooks/useRequestOptions.d.ts

@@ -0,0 +1,18 @@
+import { ProSchemaValueEnumType } from "../interface.js";
+import { Ref } from "vue";
+
+//#region src/hooks/useRequestOptions.d.ts
+interface UseRequestOptionsParams {
+  fetch?: () => Promise<ProSchemaValueEnumType[]>;
+  manual?: boolean;
+  debounceTime?: number;
+}
+interface UseRequestOptionsReturn {
+  optionList: Ref<ProSchemaValueEnumType[]>;
+  loading: Ref<boolean>;
+  status: Ref<'idle' | 'loading' | 'success' | 'error'>;
+  fetchOptions: () => Promise<ProSchemaValueEnumType[] | undefined>;
+}
+declare function useRequestOptions(params: UseRequestOptionsParams): UseRequestOptionsReturn;
+//#endregion
+export { UseRequestOptionsParams, UseRequestOptionsReturn, useRequestOptions };

package/dist/hooks/useRequestOptions.js

@@ -0,0 +1,39 @@
+import { onUnmounted, ref } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+//#region src/hooks/useRequestOptions.ts
+function useRequestOptions(params) {
+	const optionList = ref([]);
+	const loading = ref(false);
+	const status = ref("idle");
+	const debouncedFetch = useDebounceFn(async () => {
+		if (!params.fetch) return;
+		loading.value = true;
+		status.value = "loading";
+		try {
+			const result = await params.fetch();
+			optionList.value = result ?? [];
+			status.value = "success";
+			return result;
+		} catch (error) {
+			console.error("[useRequestOptions] fetch error:", error);
+			status.value = "error";
+			optionList.value = [];
+			return;
+		} finally {
+			loading.value = false;
+		}
+	}, params.debounceTime ?? 10);
+	if (params.fetch && !params.manual) debouncedFetch();
+	onUnmounted(() => {
+		optionList.value = [];
+		loading.value = false;
+	});
+	return {
+		optionList,
+		loading,
+		status,
+		fetchOptions: debouncedFetch
+	};
+}
+//#endregion
+export { useRequestOptions };

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 };