@gx-design-vue/pro-table 0.2.0-alpha.0 → 0.2.0-alpha.10

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/useRowSelection.d.ts

@@ -1,19 +1,31 @@
-import { ProTableRowSelection } from "../types/TableTypings.js";
-import { Ref } from "vue";
+import { ComputedRef } from "vue";
 import { RecordType } from "@gx-design-vue/pro-utils";
-import { SelectionSelectFn } from "ant-design-vue/es/table/interface";
-import { Key } from "ant-design-vue/es/vc-table/interface";
+import { Key, TableRowSelection } from "antdv-next/dist/table/interface";
 
 //#region src/hooks/useRowSelection.d.ts
-declare function useRowSelection(rowKey: Ref<string>, rowSelection: Ref<ProTableRowSelection | undefined>): {
-  selectedKeys: Ref<Key[], Key[]>;
-  selectedItems: Ref<RecordType[], RecordType[]>;
-  selectRowKey: SelectionSelectFn<RecordType>;
-  selectAllRowKey: (selected: boolean, selectedRows: RecordType[], changeRows: RecordType[]) => void;
-  removeRowKeys: (keys: (string | number)[]) => void;
-  changeRowKey: () => void;
-  syncSelectedRows: (dataList: RecordType[]) => void;
-  clearAllRowKeys: () => void;
-};
+interface UseRowSelectionOptions<T = RecordType> {
+  rowKey: ComputedRef<string>;
+  rowSelection: ComputedRef<TableRowSelection<T> | undefined>;
+  dataSource: ComputedRef<T[]>;
+}
+interface UseRowSelectionReturn<T = RecordType> {
+  selectedRowKeys: ComputedRef<Key[]>;
+  selectedItems: ComputedRef<T[]>;
+  mergedRowSelection: ComputedRef<TableRowSelection<T> | undefined>;
+  select: (record: T, selected: boolean) => void;
+  selectAll: (records: T[], selected: boolean) => void;
+  remove: (keys: Key[]) => void;
+  clear: () => void;
+  sync: () => void;
+}
+/**
+ * 行选择状态管理。内部使用 reactive Map 作为唯一数据源，
+ * selectedRowKeys / selectedItems 均从 Map 派生，保证 keys 与 items 永远同步。
+ *
+ * antdv-next 已废弃 onSelectAll / onSelectInvert / onSelectNone，
+ * 所有选中变化统一通过 onChange 回调，因此 mergedRowSelection 只拦截 onChange，
+ * 不拦截 onSelect / onSelectAll。
+ */
+declare function useRowSelection<T = RecordType>(options: UseRowSelectionOptions<T>): UseRowSelectionReturn<T>;
 //#endregion
-export { useRowSelection };
+export { UseRowSelectionOptions, UseRowSelectionReturn, useRowSelection };

package/dist/hooks/useRowSelection.js

@@ -1,89 +1,102 @@
-import { ref, watch } from "vue";
-import { arrayUnique, cloneDeep } from "@gx-design-vue/pro-utils";
-
+import { computed, onScopeDispose, reactive, watch } from "vue";
 //#region src/hooks/useRowSelection.ts
-function useRowSelection(rowKey, rowSelection) {
-	const selectedKeys = ref([]);
-	const selectedItems = ref([]);
-	watch(() => rowSelection.value?.selectedRows, (keys) => {
-		selectedItems.value = cloneDeep(keys || []);
-	}, {
-		deep: true,
-		immediate: true
-	});
-	watch(() => rowSelection.value?.selectedRowKeys, (keys) => {
-		selectedKeys.value = arrayUnique([...keys || []]);
-	}, {
-		deep: true,
-		immediate: true
-	});
-	const selectRowKey = (record, selected) => {
-		const type = rowSelection.value?.type || "checkbox";
-		if (rowKey.value) if (selected) if (record?.[rowKey.value] && type === "checkbox") {
-			selectedKeys.value.push(record[rowKey.value]);
-			selectedItems.value.push(record);
-		} else {
-			selectedKeys.value = [record[rowKey.value]];
-			selectedItems.value = [record];
+function getKey(record, rowKey) {
+	return record[rowKey];
+}
+/**
+* 行选择状态管理。内部使用 reactive Map 作为唯一数据源，
+* selectedRowKeys / selectedItems 均从 Map 派生，保证 keys 与 items 永远同步。
+*
+* antdv-next 已废弃 onSelectAll / onSelectInvert / onSelectNone，
+* 所有选中变化统一通过 onChange 回调，因此 mergedRowSelection 只拦截 onChange，
+* 不拦截 onSelect / onSelectAll。
+*/
+function useRowSelection(options) {
+	const selectedMap = reactive(/* @__PURE__ */ new Map());
+	const stopWatch = watch(() => options.rowSelection.value?.selectedRowKeys, (keys) => {
+		if (!keys) return;
+		const newMap = /* @__PURE__ */ new Map();
+		const currentDataSource = options.dataSource.value;
+		for (const key of keys) {
+			const existing = selectedMap.get(key);
+			const matched = currentDataSource.find((record) => getKey(record, options.rowKey.value) === key);
+			newMap.set(key, matched ?? existing);
 		}
-		else {
-			selectedKeys.value = selectedKeys.value.filter((item) => item !== record[rowKey.value]);
-			selectedItems.value = selectedItems.value.filter((item) => item[rowKey.value] !== record[rowKey.value]);
+		selectedMap.clear();
+		for (const [key, item] of newMap) selectedMap.set(key, item);
+	}, { immediate: true });
+	onScopeDispose(() => stopWatch());
+	const selectedRowKeys = computed(() => Array.from(selectedMap.keys()));
+	const selectedItems = computed(() => Array.from(selectedMap.values()).filter((item) => item != null));
+	function emitChange(type) {
+		options.rowSelection.value?.onChange?.(selectedRowKeys.value, selectedItems.value, { type });
+	}
+	function select(record, selected) {
+		const key = getKey(record, options.rowKey.value);
+		const selectionType = options.rowSelection.value?.type ?? "checkbox";
+		if (selected) if (selectionType === "radio") {
+			selectedMap.clear();
+			selectedMap.set(key, record);
+		} else selectedMap.set(key, record);
+		else selectedMap.delete(key);
+		emitChange(selected ? selectionType === "radio" ? "single" : "multiple" : "none");
+	}
+	function selectAll(records, selected) {
+		if (selected) for (const record of records) selectedMap.set(getKey(record, options.rowKey.value), record);
+		else for (const record of records) selectedMap.delete(getKey(record, options.rowKey.value));
+		emitChange(selected ? "all" : "none");
+	}
+	function remove(keys) {
+		for (const key of keys) selectedMap.delete(key);
+		emitChange("none");
+	}
+	function clear() {
+		selectedMap.clear();
+		emitChange("none");
+	}
+	/** 从当前 dataSource 补全 Map 中 value 为空的条目（分页切换后调用） */
+	function sync() {
+		const currentDataSource = options.dataSource.value;
+		const rowKeyField = options.rowKey.value;
+		for (const [key, item] of selectedMap) if (item == null) {
+			const matched = currentDataSource.find((record) => getKey(record, rowKeyField) === key);
+			if (matched) selectedMap.set(key, matched);
 		}
-	};
-	const changeRowKey = () => {
-		if (rowSelection.value) rowSelection.value?.onChange?.(selectedKeys.value, selectedItems.value);
-	};
-	const selectAllRowKey = (selected, selectedRows, changeRows) => {
-		if (rowKey.value) if (selected) selectedRows.map((item) => {
-			if (selectedKeys.value.every((el) => el !== item?.[rowKey.value])) {
-				if (item?.[rowKey.value]) {
-					selectedKeys.value.push(item[rowKey.value]);
-					selectedItems.value.push(item);
-				}
-			}
-			return item;
-		});
-		else changeRows.map((item) => {
-			if (selectedKeys.value.includes(item?.[rowKey.value])) {
-				selectedKeys.value = selectedKeys.value.filter((el) => el !== item[rowKey.value]);
-				selectedItems.value = selectedItems.value.filter((el) => el[rowKey.value] !== item[rowKey.value]);
-			}
-			return item;
-		});
-	};
-	const removeRowKeys = (keys) => {
-		selectedKeys.value = selectedKeys.value.filter((el) => !keys.includes(el));
-		selectedItems.value = selectedItems.value.filter((el) => !keys.includes(el?.[rowKey.value || ""]));
-		changeRowKey();
-	};
-	const syncSelectedRows = (dataList) => {
-		if (rowKey.value) {
-			if (selectedKeys.value.length !== selectedItems.value.length) {
-				const itemsKeys = selectedItems.value.map((item) => item[rowKey.value]);
-				const notIncludes = selectedKeys.value.filter((item) => !itemsKeys.includes(item));
-				dataList.forEach((item) => {
-					if (notIncludes.includes(item[rowKey.value])) selectedItems.value.push(cloneDeep(item));
-				});
-			}
+	}
+	/**
+	* 处理 antdv Table 的 onChange 回调。
+	* antd 传入的 rows 只包含当前页数据，需与已有 Map 合并以保留跨页选中项。
+	*/
+	function handleAntdChange(keys, rows, info) {
+		const rowKeyField = options.rowKey.value;
+		const newMap = /* @__PURE__ */ new Map();
+		for (const key of keys) {
+			const fromRows = rows.find((record) => getKey(record, rowKeyField) === key);
+			const existing = selectedMap.get(key);
+			newMap.set(key, fromRows ?? existing);
 		}
-	};
-	const clearAllRowKeys = () => {
-		selectedKeys.value = [];
-		selectedItems.value = [];
-		changeRowKey();
-	};
+		selectedMap.clear();
+		for (const [key, item] of newMap) selectedMap.set(key, item);
+		options.rowSelection.value?.onChange?.(selectedRowKeys.value, selectedItems.value, info);
+	}
 	return {
-		selectedKeys,
+		selectedRowKeys,
 		selectedItems,
-		selectRowKey,
-		selectAllRowKey,
-		removeRowKeys,
-		changeRowKey,
-		syncSelectedRows,
-		clearAllRowKeys
+		mergedRowSelection: computed(() => {
+			const rowSelectionConfig = options.rowSelection.value;
+			if (!rowSelectionConfig) return void 0;
+			return {
+				...rowSelectionConfig,
+				selectedRowKeys: selectedRowKeys.value,
+				onChange: handleAntdChange
+			};
+		}),
+		select,
+		selectAll,
+		remove,
+		clear,
+		sync
 	};
 }
-
 //#endregion
-export { useRowSelection };
+export { useRowSelection };

package/dist/hooks/useTable.d.ts

@@ -1,90 +1,48 @@
-import { ProColumnType, ProColumnsType, ProSearchMap } from "../types/ColumnTypings.js";
-import { ProCoreActionType, ProCoreFormType, ProTableProps, ProTableRef, ProTableRowSelection, RequestConfig, RequestFunction } from "../types/TableTypings.js";
-import { BaseTableProps } from "../props.js";
+import { PageState, ProCoreActionType, ProCoreFormType, ProSearchMap, ProTablePaginationConfig, ProTableProps, ProTableRef, RequestFunction, RowSelectionActions } from "../interface.js";
 import { ComputedRef, MaybeRef, Reactive, Ref } from "vue";
-import { RecordType } from "@gx-design-vue/pro-utils";
+import { FilterValue, SorterResult, TableCurrentDataSource } from "antdv-next/dist/table/interface";
 
 //#region src/hooks/useTable.d.ts
-type ProTableState<T extends object = RecordType, R extends object = RecordType> = Omit<BaseTableProps, 'columns' | 'params' | 'dataSource' | 'rowSelection' | 'searchMap' | 'rowKey' | 'postData' | 'onReset' | 'onReload' | 'onSubmit' | 'onExpand' | 'title' | 'footer' | 'rowExpandable' | 'transformCellText' | 'expandIcon' | 'rowClassName' | 'customRow' | 'customHeaderRow' | 'expandedRowRender' | 'onBeforeSearchSubmit'> & {
-  params: R;
-  columns: ProColumnsType<T, R>;
-  dataSource: T[];
-  rowSelection: ProTableRowSelection<T>;
-  searchMap: ProSearchMap<undefined, keyof R | keyof T>[];
-  rowKey?: keyof T;
-  title?: (data: T[]) => any;
-  footer?: (data: T[]) => any;
-  postData?: (data: T[]) => any;
-  rowExpandable?: (record: T) => boolean;
-  transformCellText?: (opt: {
-    text: any;
-    column: ProColumnType<T, R>;
-    record: any;
-    index: number;
-  }) => any;
-  expandIcon?: (props: {
-    prefixCls: string;
-    expanded: boolean;
-    record: T;
-    expandable: boolean;
-    onExpand: (record: T, event: MouseEvent) => void;
-  }) => any;
-  customRow?: (data: T, index?: number, column?: ProColumnType<T, R>) => any;
-  customHeaderRow?: (data: T, index?: number, column?: ProColumnType<T, R>) => any;
-  expandedRowRender: (opt: {
-    record: T;
-    index: number;
-    indent: number;
-    expanded: boolean;
-  }) => any;
-  rowClassName?: string | ((record: T, index: number, indent: number) => string);
-  onReset?: (params?: Partial<R>) => void;
-  onReload?: (params?: Partial<R>) => void;
-  onSubmit?: (params?: Partial<R>) => void;
-  onExpand?: (expanded: boolean, record: T) => void;
-  onResizeColumn?: (w: number, col: ProColumnType<T, R>) => void;
-  onBeforeSearchSubmit?: RequestFunction<T, R>;
-};
-type BaseTableState<T extends object = RecordType, R extends object = RecordType> = Omit<ProTableProps<T, R>, 'request'>;
-interface UseTableReturn<T extends object = RecordType, R extends object = RecordType> {
-  /** @name loading 状态，可以直接进行修改 */
+interface UseTableOptions<T = any, R = any> {
+  state?: MaybeRef<Partial<ProTableProps<T, R>>> | Reactive<Partial<ProTableProps<T, R>>>;
+  request?: RequestFunction<T, R>;
+}
+interface UseTableReturn<T = any, R = any> {
+  /** loading 状态，可直接赋值 */
   loading: Ref<boolean>;
-  /** @name 只读表格数据，不能修改 */
+  /** 只读表格数据 */
   dataSource: ComputedRef<T[]>;
-  /** @name 表格列选择keys，只读 */
-  selectedKeys: ProCoreActionType<T, R>['selectedKeys'];
-  /** @name 表格列选择rows，只读 */
-  selectedItems: ProCoreActionType<T, R>['selectedItems'];
-  /** @name 表格列选项操作 */
-  rowsSelection: ProCoreActionType<T, R>['rowsSelection'];
-  /** @name 表格请求参数 */
-  requestSearch: ComputedRef<RequestConfig<R>['params']>;
-  /** @name 主动刷新，按照当前的参数在当前页重新请求下 */
+  /** 表格请求参数（含分页 + 表单搜索参数） */
+  requestSearch: ComputedRef<Partial<R> & Partial<PageState>>;
+  /** 表格行选择 keys */
+  selectedKeys: ComputedRef<(string | number)[]>;
+  /** 表格行选择 rows */
+  selectedItems: ComputedRef<T[]>;
+  /** 表格行选择操作 */
+  rowsSelection: RowSelectionActions<T>;
+  /** action 表格实例 */
+  actionRef: ComputedRef<ProCoreActionType<T, R>>;
+  /** form 查询表单实例 */
+  formRef: ComputedRef<ProCoreFormType<R>>;
+  /** 主动刷新 */
   reload: ProCoreActionType<T, R>['reload'];
-  /** @name 更新表格数据，直接替换，谨慎操作 */
+  /** 更新表格数据 */
   setTableDataList: ProCoreActionType<T, R>['setTableDataList'];
-  /** @name 更新TableData属性值 */
+  /** 更新表格行数据 */
   operateTableDataRow: ProCoreActionType<T, R>['operateTableDataRow'];
-  /** @name 设置翻页、排序、筛选、并且刷新(reload) */
-  setPageInfo: ProCoreActionType<T, R>['setPageInfo'];
-  /** @name 设置翻页 */
+  /** 设置翻页、排序、筛选并刷新 */
+  setPageInfo: (pagination: ProTablePaginationConfig, filters?: Record<string, FilterValue | null>, sorter?: SorterResult | SorterResult[], extra?: TableCurrentDataSource) => void;
+  /** 设置翻页 */
   setPagination: ProCoreActionType<T, R>['setPagination'];
-  /** @name 刷新并清空表单，重置为第一页 */
+  /** 刷新并清空表单，重置为第一页 */
   reloadAndReset: ProCoreActionType<T, R>['reloadAndReset'];
-  /** @name 改变loading状态 */
+  /** 改变 loading 状态 */
   setLoading: ProCoreActionType<T, R>['setLoading'];
-  /** @name action表格实例 */
-  actionRef: ComputedRef<ProCoreActionType<T, R>>;
-  /** @name form查询表单实例 */
-  formRef: ComputedRef<ProCoreFormType<R>>;
-  /** @name 表格参数，用于传递给ProTable组件使用，可以对其进行修改 */
-  tableState: Reactive<ProTableState<T, R>>;
-  /** @name 更新表格参数 SearchMap，key为SearchMap唯一字段，value是更新的参数，会merge */
-  updateSearchMap: (key: keyof R | keyof T, value: Partial<ProSearchMap<any>>) => void;
+  /** 表格参数，传递给 ProTable 组件 */
+  tableState: Reactive<Partial<ProTableProps<T, R>>>;
+  /** 更新 searchMap 中指定字段的配置 */
+  updateSearchMap: (key: keyof T | keyof R, value: Partial<ProSearchMap<any>>) => void;
 }
-declare function useTable<T extends object = RecordType, R extends object = RecordType>(tableRef: Ref<ProTableRef<T> | undefined>, options?: {
-  state?: MaybeRef<BaseTableState<T, R>> | Reactive<BaseTableState<T, R>> | ComputedRef<BaseTableState<T, R>>;
-  request?: RequestFunction<T, R>;
-}): UseTableReturn<T, R>;
+declare function useTable<T = any, R = any>(tableRef: Ref<ProTableRef<T, R> | undefined>, options?: UseTableOptions<T, R>): UseTableReturn<T, R>;
 //#endregion
-export { BaseTableState, ProTableState, UseTableReturn, useTable };
+export { UseTableOptions, UseTableReturn, useTable };