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

package/dist/ProTable.js

@@ -1,533 +1,924 @@
-import { provideTableContext } from "./context/TableContext.js";
-import { proTableProps, tableProps } from "./props.js";
-import Form_default from "./components/Form/index.js";
-import { genListToolBarStyle } from "./components/ListToolBar/style.js";
-import Bar_default from "./components/ScrollBar/Bar/index.js";
-import TableCell_default from "./components/TableCell/index.js";
-import ToolBar_default from "./components/ToolBar/index.js";
-import { tryOnActivated } from "./hooks/tryOnActivated.js";
-import { useColumns } from "./hooks/useColumns.js";
-import { useConfigFetchData, useFetchData } from "./hooks/useFetchData.js";
+import { createDragTbody } from "./components/Drag/Tbody.js";
+import Bar_default from "./components/ScrollBar/Bar.js";
+import { useProBreakpoints } from "./hooks/useBreakpoints.js";
+import ProTableSearchForm from "./components/SearchForm/SearchForm.js";
+import "./components/SearchForm/index.js";
+import { useProvideTableContext } from "./context/TableContext.js";
+import { Toolbar } from "./components/Toolbar/index.js";
+import { useCellRender } from "./hooks/useCellRender.js";
+import { applyIndexColumn, useColumns } from "./hooks/useColumns.js";
+import { useDragHandleColumn } from "./hooks/useDragHandleColumn.js";
+import { useColumnResize } from "./hooks/useColumnResize.js";
+import { useFetchData } from "./hooks/useFetchData.js";
+import { useFitPage } from "./hooks/useFitPage.js";
+import { useKeepAliveReload } from "./hooks/useKeepAliveReload.js";
 import { useLoading } from "./hooks/useLoading.js";
 import { usePagination } from "./hooks/usePagination.js";
+import { useRowDrag } from "./hooks/useRowDrag.js";
 import { useRowSelection } from "./hooks/useRowSelection.js";
-import { getCurrentData, valueFormat } from "./utils/utils.js";
-import { useScrollArea } from "./hooks/useScrollArea.js";
 import { useTableForm } from "./hooks/useTableForm.js";
 import { useTableScroll } from "./hooks/useTableScroll.js";
 import { useTableSize } from "./hooks/useTableSize.js";
-import { genProTableFitPage } from "./style/fit-page.js";
-import { genProTableList } from "./style/list.js";
-import { genProTableScroll } from "./style/scroll.js";
-import { genProTableStyle } from "./style/index.js";
-import { Fragment, Teleport, cloneVNode, computed, createVNode, defineComponent, h, isVNode, mergeProps, ref, toRaw, toRef, unref, watchEffect } from "vue";
-import { useProAppContext } from "@gx-design-vue/pro-app";
-import { useBreakpoint } from "@gx-design-vue/pro-hooks";
-import { unit, useProStyle } from "@gx-design-vue/pro-provider";
-import { classNames, cloneDeep, convertValueBoolean, deepMerge, filterEmpty, getPrefixCls, getRandomNumber, getSlot, getSlotVNode, getSlotsProps, handleEmptyField, handleShowIndex, isArray, isObject } from "@gx-design-vue/pro-utils";
-import { useFullscreen, useWindowSize } from "@vueuse/core";
-import { Empty, Pagination, Spin, Table } from "ant-design-vue";
-import { omit, pick } from "es-toolkit";
-
+import "./hooks/index.js";
+import style_default from "./style/index.js";
+import { Fragment, Teleport, computed, createVNode, defineComponent, mergeDefaults, mergeProps, ref, toRef, watch } from "vue";
+import { useProConfigContext } from "@gx-design-vue/pro-provider";
+import { classNames, getSlotVNode } from "@gx-design-vue/pro-utils";
+import { useFullscreen } from "@vueuse/core";
+import { Pagination, Spin, Table } from "antdv-next";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
 //#region src/ProTable.tsx
-const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
-const ProTable = /* @__PURE__ */ defineComponent({
-	name: "GProTable",
-	inheritAttrs: false,
-	props: proTableProps,
-	emits: [
-		"reset",
-		"reload",
-		"submit",
-		"sizeChange",
-		"expandedRowsChange",
-		"expand",
-		"change",
-		"requestError",
-		"columnsStateChange",
-		"loadingChange"
-	],
-	slots: Object,
-	setup(props, { emit, slots, expose }) {
-		const baseClassName = getPrefixCls({
-			suffixCls: "table",
-			isPor: true
-		});
-		const { wrapSSR, hashId } = useProStyle("ProBaseTable", [
-			genProTableStyle,
-			genProTableScroll,
-			genProTableFitPage,
-			genProTableList,
-			genListToolBarStyle
-		], baseClassName);
-		const screens = useBreakpoint();
-		const { width: screenWidth } = useWindowSize();
-		const activated = ref(false);
-		const appContext = useProAppContext();
-		const tableRef = ref();
-		const tableFormRef = ref();
-		const waitRequest = ref(props.waitRequest);
-		watchEffect(() => waitRequest.value = props.waitRequest);
-		const { toggle, isFullscreen } = useFullscreen(tableRef);
-		const isMobile = computed(() => !screens.value.xl);
-		const formRef = computed(() => {
-			if (props.form === false) return false;
-			const defaultConfig = {
-				actions: { resetReload: true },
-				autoRequest: false,
-				span: {
-					xxl: 5,
-					xl: 5,
-					lg: 3
-				},
-				resetText: "重置",
-				searchText: "查询"
-			};
-			if (isObject(props.form)) return deepMerge(defaultConfig, props.form);
-			return defaultConfig;
-		});
-		const formConfig = computed(() => formRef.value === false ? {} : formRef.value);
-		const formAutoRequest = computed(() => formConfig.value?.autoRequest ?? props.autoRequest);
-		const formActions = computed(() => formConfig.value?.actions);
-		const cacheColumns = computed(() => {
-			function initColumns(data) {
-				return data.filter((item) => item.key || item.dataIndex).filter((item) => item.show ?? true).map((item, order) => {
-					const key = item.key || item.dataIndex;
-					item.key = key;
-					item.order = order;
-					item.dataIndex = key;
-					item.align = item.align || props.align || "left";
-					item.uuid = item.uuid || getRandomNumber().uuid(15);
-					if (item.children) item.children = initColumns(item.children);
-					return item;
-				});
-			}
-			return handleShowIndex(initColumns(cloneDeep(props.columns || [])), {
-				align: props.align || "left",
-				showIndex: props.showIndex ?? false
+const defaults = {
+	rowKey: "id",
+	align: "left",
+	columns: [],
+	dataSource: [],
+	pagination: void 0,
+	params: {},
+	waitRequest: false,
+	immediate: true,
+	autoRequest: true,
+	debounceTime: 10,
+	polling: false,
+	pollingTime: 2e3,
+	showLoading: true,
+	keepAliveReload: false
+};
+const TABLE_PASSTHROUGH_KEYS = [
+	"bordered",
+	"expandable",
+	"showHeader",
+	"showSorterTooltip",
+	"sortDirections",
+	"sticky",
+	"tableLayout",
+	"virtual",
+	"locale",
+	"getPopupContainer",
+	"dropdownPrefixCls",
+	"rowClassName",
+	"rowHoverable",
+	"rootClass",
+	"prefixCls",
+	"classes",
+	"styles"
+];
+const ForwardProTable = /* @__PURE__ */ defineComponent((props, { attrs, slots, emit, expose }) => {
+	const { prefixCls } = useBaseConfig("pro-table", props);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const configContext = useProConfigContext();
+	const rootEl = ref();
+	const { toggle: toggleFullscreen, isFullscreen } = useFullscreen(rootEl);
+	watch(isFullscreen, (val) => {
+		emit("fullscreenChange", val);
+	});
+	const rootClassNames = computed(() => {
+		return classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value, attrs.class, props.proClasses?.root, fullPageClass.value);
+	});
+	const mergedStyle = computed(() => {
+		return [props.proStyles?.root, attrs.style];
+	});
+	const { isMobile, screenWidth, screens } = useProBreakpoints();
+	const { paginationInfo, paginationAlign, requestPagination, setPagination } = usePagination({ pagination: toRef(props, "pagination") });
+	const { tableSize, setTableSize } = useTableSize({
+		size: computed(() => props.size),
+		onChange: (s) => emit("sizeChange", s)
+	});
+	const { loading: internalLoading, setLoading } = useLoading({
+		loading: computed(() => props.loading),
+		onChange: (val) => props.onLoadingChange?.(val)
+	});
+	/**
+	* loading 指示器解析：
+	* 优先级 loading(SpinProps).indicator > 全局 configContext.indicator > Spin 默认。
+	* configContext.indicator 可能是函数，需调用取值（与 AppPage 一致）。
+	*/
+	const resolvedIndicator = computed(() => {
+		const loadingProp = props.loading;
+		if (loadingProp && typeof loadingProp === "object") {
+			const indicator = loadingProp.indicator;
+			if (indicator !== void 0) return indicator;
+		}
+		const ctxIndicator = configContext?.indicator?.value;
+		return typeof ctxIndicator === "function" ? ctxIndicator() : ctxIndicator;
+	});
+	const { selectedRowKeys, selectedItems, mergedRowSelection, select: selectRow, selectAll: selectAllRows, remove: removeSelectedKeys, clear: clearSelectedKeys, sync: syncSelectedRows } = useRowSelection({
+		rowKey: computed(() => props.rowKey),
+		rowSelection: computed(() => props.rowSelection),
+		dataSource: computed(() => props.dataSource ?? [])
+	});
+	const columnsForScroll = computed(() => {
+		return applyIndexColumn(props.columns ?? [], props.indexColumn, props.align ?? "left");
+	});
+	const { tableScroll: policyTableScroll, shouldFixActionColumn } = useTableScroll({
+		scroll: computed(() => props.scroll),
+		columns: columnsForScroll,
+		rowSelection: computed(() => props.rowSelection),
+		screens,
+		screenWidth,
+		scrollPolicy: computed(() => props.scrollPolicy)
+	});
+	const rowDraggableRef = computed(() => props.rowDraggable);
+	const { dragColumns } = useDragHandleColumn({
+		columns: computed(() => props.columns ?? []),
+		rowDraggable: rowDraggableRef,
+		prefixCls,
+		cssVarCls
+	});
+	const { tableColumns, cacheColumns, setColumns } = useColumns({
+		columns: dragColumns,
+		align: computed(() => props.align ?? "left"),
+		indexColumn: computed(() => props.indexColumn),
+		shouldFixActionColumn,
+		wrapColumnRender: useCellRender({
+			columnEmptyText: computed(() => props.columnEmptyText),
+			prefixCls
+		}).wrapColumnRender
+	});
+	const { resizableColumns, resizableComponents } = useColumnResize({
+		columns: tableColumns,
+		onResize: (w, col) => emit("resizeColumn", w, col)
+	});
+	const dragTbodyRef = ref();
+	const DragTbody = createDragTbody(dragTbodyRef);
+	if (props.virtual && props.rowDraggable) console.warn("[GProTable] rowDraggable 与 virtual 模式不兼容（虚拟滚动下行未挂载，拖拽不可靠），已忽略行拖拽。");
+	const rowDragEnabled = computed(() => !!props.rowDraggable && !props.virtual);
+	const formConfig = computed(() => props.form === false ? void 0 : props.form);
+	const formAutoRequest = computed(() => {
+		if (props.form === false) return props.autoRequest ?? true;
+		return props.form?.autoRequest ?? props.autoRequest ?? true;
+	});
+	const formActions = computed(() => {
+		if (props.form === false) return void 0;
+		return props.form?.actions;
+	});
+	const { formColumns, formParamKeys, defaultFormSearch, formState, getFormSearch, resetFormState } = useTableForm({
+		searchMap: computed(() => props.searchMap ?? []),
+		columns: computed(() => props.columns ?? []),
+		params: computed(() => props.params)
+	});
+	const { dataSource, setTableDataList, operateTableDataRow, handleTableChange, reload, run } = useFetchData({
+		rowKey: computed(() => props.rowKey),
+		polling: computed(() => props.polling ?? false),
+		pollingTime: computed(() => props.pollingTime ?? 2e3),
+		request: props.request,
+		postData: props.postData,
+		dataSource: computed(() => props.dataSource),
+		immediate: computed(() => props.immediate ?? true),
+		waitRequest: computed(() => props.waitRequest ?? false),
+		autoRequest: computed(() => props.autoRequest ?? true),
+		debounceTime: computed(() => props.debounceTime ?? 10),
+		params: computed(() => props.params),
+		defaultFormSearch,
+		formParamKeys,
+		getFormSearch,
+		onLoadingChange: props.onLoadingChange,
+		onRequestError: props.onRequestError,
+		onBeforeSearchSubmit: props.onBeforeSearchSubmit
+	}, {
+		pageInfo: requestPagination,
+		paginationInfo,
+		setPagination,
+		setLoading,
+		setColumns,
+		removeRowKeys: removeSelectedKeys,
+		syncSelectedRows,
+		columns: cacheColumns
+	});
+	useKeepAliveReload({
+		enabled: computed(() => props.keepAliveReload ?? false),
+		reload
+	});
+	const cardEl = ref();
+	const { scrollY: fitPageScrollY, overflowHidden, fullPageClass, scrollEl, barRef } = useFitPage({
+		fitPage: computed(() => !policyTableScroll.value?.y && !!props.fitPage),
+		cardEl,
+		prefixCls
+	});
+	const tableScroll = computed(() => ({
+		...policyTableScroll.value ?? {},
+		...fitPageScrollY.value > 0 ? { y: fitPageScrollY.value } : {}
+	}));
+	const { getRowProps } = useRowDrag({
+		tbodyEl: dragTbodyRef,
+		scrollEl,
+		dataSource,
+		rowKey: computed(() => props.rowKey),
+		rowDraggable: rowDraggableRef,
+		onSortEnd: (from, to, newData, record) => {
+			emit("rowSortEnd", {
+				from,
+				to,
+				data: newData,
+				record
 			});
+		}
+	});
+	const mergedOnRow = computed(() => {
+		if (!rowDragEnabled.value) return props.onRow;
+		const userOnRow = props.onRow;
+		return (record, index) => ({
+			...userOnRow?.(record, index) ?? {},
+			...getRowProps(record, index)
 		});
-		/**
-		* @Author      gx12358
-		* @DateTime    2022/1/21
-		* @lastTime    2022/1/21
-		* @description Table-loading hooks 方法
-		*/
-		const [loading, setLoading] = useLoading({
-			loading: toRef(props, "loading"),
-			onChange: (value) => {
-				props.onLoadingChange && props.onLoadingChange(value);
-			}
-		});
-		/**
-		* @Author      gx12358
-		* @DateTime    2022/1/21
-		* @lastTime    2022/1/21
-		* @description Table-size hooks 方法
-		*/
-		const [tableSize, setTableSize] = useTableSize({
-			size: toRef(props, "size"),
-			onChange: (value) => {
-				props.onSizeChange && props.onSizeChange(value);
+	});
+	const mergedComponents = computed(() => {
+		const base = props.draggable ? resizableComponents.value : {};
+		if (!rowDragEnabled.value) return passThroughProps.value.components ?? base;
+		return {
+			...base,
+			body: {
+				...base?.body ?? {},
+				wrapper: DragTbody
 			}
+		};
+	});
+	useProvideTableContext({
+		reload,
+		setPagination,
+		tableSize,
+		setTableSize,
+		formAutoRequest,
+		formConfig,
+		formActions,
+		isMobile,
+		screenWidth,
+		toggleFullscreen,
+		isFullscreen
+	});
+	const isCustomRenderMode = computed(() => !!(props.customRender || slots.customRender));
+	const shouldRenderForm = computed(() => {
+		if (props.form === false) return false;
+		return formColumns.value.length > 0 || !!slots.form;
+	});
+	function handleTableSubmit(params, action) {
+		if (formAutoRequest.value) {
+			reload({ params });
+			return;
+		}
+		if (action === "reset") {
+			emit("reset", params);
+			if (props.request && formActions.value?.resetReload !== false) reload({ params });
+		} else if (props.request) {
+			emit("submit", params);
+			reload({ params });
+		}
+	}
+	function sliceCurrentPageData(fullData) {
+		const pagination = paginationInfo.value;
+		if (!pagination) return fullData;
+		const { current = 1, pageSize = 10 } = pagination;
+		return fullData.filter((_, index) => index >= (current - 1) * pageSize && index < current * pageSize);
+	}
+	function renderCustomContent() {
+		const customRenderFn = props.customRender || slots.customRender;
+		if (!customRenderFn) return null;
+		const tableData = dataSource.value;
+		if (!tableData?.length) return renderEmptyText();
+		if (typeof customRenderFn === "function") return customRenderFn({
+			dataSource: tableData,
+			currentData: sliceCurrentPageData(tableData)
 		});
-		/**
-		* @Author      gx12358
-		* @DateTime    2022/1/21
-		* @lastTime    2022/1/21
-		* @description Table-page hooks 方法
-		*/
-		const { paginationInfo, requestPagination, setPagination } = usePagination({
-			pagination: toRef(props, "pagination"),
-			pageItemRender: getSlot({
-				slots,
-				props,
-				key: "pageItemRender"
-			})
-		});
-		/**
-		* @Author      gx12358
-		* @DateTime    2022/1/21
-		* @lastTime    2022/1/21
-		* @description Table-scroll hooks 方法
-		*/
-		const { proScroll, breakpoint } = useTableScroll({
-			scroll: toRef(props, "scroll"),
-			autoScroll: toRef(props, "autoScroll"),
-			modalScroll: toRef(props, "modalScroll"),
-			neverScroll: toRef(props, "neverScroll"),
-			rowSelection: toRef(props, "rowSelection"),
-			scrollBreakpoint: toRef(props, "scrollBreakpoint"),
-			innerWidth: screenWidth,
-			columns: cacheColumns,
-			screens
-		});
-		/**
-		* @Author      gx12358
-		* @DateTime    2022/1/21
-		* @lastTime    2022/1/21
-		* @description Table-columns hooks 方法
-		*/
-		const { proColumns, setColumns, resizeColumnWidth } = useColumns({
-			draggable: toRef(props, "draggable"),
-			neverScroll: toRef(props, "neverScroll"),
-			autoScroll: toRef(props, "autoScroll"),
-			breakpoint,
-			scroll: proScroll,
-			columns: cacheColumns
+		return null;
+	}
+	function renderEmptyText() {
+		const emptyTextSlot = getSlotVNode({
+			slots,
+			props,
+			key: "emptyText"
 		});
-		/**
-		* @Author      gx12358
-		* @DateTime    2022/1/21
-		* @lastTime    2022/1/21
-		* @description Table-setting columns hooks 方法
-		*/
-		/**
-		* @Author      gx12358
-		* @DateTime    2022/1/21
-		* @lastTime    2022/1/21
-		* @description Table-Form(搜索) hooks 方法
-		*/
-		const { formCols, defaultFormSearch } = useTableForm({
-			searchMap: toRef(props, "searchMap"),
-			columns: cacheColumns
+		if (emptyTextSlot && configContext?.renderEmpty?.value) return emptyTextSlot || configContext?.renderEmpty?.value?.();
+		return null;
+	}
+	function onCustomPaginationChange(currentPage, currentPageSize) {
+		onTableChange({
+			current: currentPage,
+			pageSize: currentPageSize
+		}, {}, {}, {});
+	}
+	const loadingState = computed(() => {
+		if (props.showLoading === false) return false;
+		return internalLoading.value;
+	});
+	const passThroughProps = computed(() => {
+		const result = {};
+		for (const key of TABLE_PASSTHROUGH_KEYS) {
+			if (key === "classes") {
+				const userClasses = props.classes;
+				const tableClass = props.proClasses?.table;
+				if (userClasses || tableClass) result.classes = {
+					...userClasses ?? {},
+					...tableClass ? { root: classNames(userClasses?.root, tableClass) } : {}
+				};
+				continue;
+			}
+			if (key === "expandable") {
+				const userExpandable = props.expandable;
+				const controlledExpandedRowKeys = props.expandedRowKeys;
+				if (userExpandable !== void 0 || controlledExpandedRowKeys !== void 0) result.expandable = {
+					...userExpandable ?? {},
+					...controlledExpandedRowKeys !== void 0 ? { expandedRowKeys: controlledExpandedRowKeys } : {}
+				};
+				continue;
+			}
+			const val = props[key];
+			if (val !== void 0) result[key] = val;
+		}
+		return result;
+	});
+	function onTableChange(paginationConfig, filters, sorter, extra) {
+		handleTableChange(paginationConfig, filters, sorter, extra);
+		props.onChange?.(paginationConfig, filters, sorter, extra);
+	}
+	function onTableExpandedRowKeysChange(keys) {
+		emit("update:expandedRowKeys", keys);
+	}
+	function onTableScroll(e) {
+		emit("scroll", e);
+	}
+	const passthroughSlotKeys = [
+		"title",
+		"footer",
+		"summary",
+		"expandIcon",
+		"expandedRowRender",
+		"filterDropdown",
+		"filterIcon"
+	];
+	const tableSlots = computed(() => {
+		const result = {};
+		for (const key of passthroughSlotKeys) if (slots[key]) result[key] = slots[key];
+		if (slots.bodyCell) result.bodyCell = (ctx) => slots.bodyCell(ctx);
+		if (slots.headerCell) result.headerCell = (ctx) => slots.headerCell(ctx);
+		const emptyTextRender = getSlotVNode({
+			slots,
+			props,
+			key: "emptyText"
 		});
-		const { selectedKeys, selectedItems, changeRowKey, selectRowKey, selectAllRowKey, syncSelectedRows, removeRowKeys, clearAllRowKeys } = useRowSelection(toRef(props, "rowKey"), toRef(props, "rowSelection"));
-		const { run, setTableDataList, operateTableDataRow, isTreeDataRef, dataSource, handleTableChange } = useFetchData({
-			...useConfigFetchData(props),
-			waitRequest
-		}, {
-			loading,
-			paginationInfo,
+		if (emptyTextRender || configContext?.renderEmpty?.value) result.emptyText = () => emptyTextRender || configContext?.renderEmpty?.value?.();
+		return result;
+	});
+	expose({
+		actionRef: () => ({
+			loading: internalLoading,
+			dataSource,
 			pageInfo: requestPagination,
+			reload,
+			reloadAndReset: (options) => {
+				setPagination({ current: 1 });
+				resetFormState();
+				run();
+				options?.callBack?.();
+			},
 			setPagination,
-			removeRowKeys,
-			syncSelectedRows,
+			setPageInfo: (pagination, filters, sorter, extra) => {
+				setPagination(pagination);
+				handleTableChange(pagination, filters ?? {}, sorter ?? {}, extra ?? {});
+			},
+			setTableDataList,
+			operateTableDataRow,
 			setLoading,
-			setColumns,
-			columns: proColumns,
-			defaultFormSearch,
-			params: toRef(props, "params"),
-			onRequestError: props.onRequestError,
-			onBeforeSearchSubmit: props.onBeforeSearchSubmit,
-			hasCustomRender: computed(() => convertValueBoolean(props.customRender || slots?.customRender))
-		}, emit);
-		const { tableCardEl, tableScrollYHeight, tableListToolsHeight, tableScrollEl, tableOverHidden, barRef } = useScrollArea({
-			hashId,
-			scroll: proScroll,
-			baseClassName,
-			fitPage: toRef(props, "fitPage")
-		});
-		const tableScrollState = computed(() => {
-			const fitScrollY = tableScrollYHeight.value && props.fitPage ? { y: tableScrollYHeight.value } : {};
-			return {
-				...unref(proScroll),
-				...fitScrollY
-			};
-		});
-		const tablePropsValues = computed(() => {
-			return {
-				...omit(props, Object.keys(tableProps).concat([
-					"style",
-					"class",
-					"loading",
-					"rowKey",
-					"transformCellText",
-					"rowSelection",
-					"onChange",
-					"onExpandedRowsChange",
-					"onExpand",
-					"onResizeColumn"
-				])),
-				size: unref(tableSize),
-				scroll: unref(tableScrollState),
-				dataSource: unref(dataSource),
-				pagination: unref(paginationInfo),
-				columns: unref(proColumns).filter((column) => column.show || column.show === void 0)
-			};
-		});
-		const loadingState = computed(() => {
-			const spinningProps = isObject(props.loading) ? omit(props.loading, ["spinning"]) : {};
-			if (!spinningProps.indicator && appContext?.indicator?.value) spinningProps.indicator = appContext?.indicator?.value;
-			return {
-				spinning: props.showLoading ? convertValueBoolean(loading.value) : false,
-				...spinningProps
-			};
-		});
-		const paginationPosition = computed(() => {
-			let positionClass;
-			const defaultPosition = props.direction === "rtl" ? "bottomLeft" : "right";
-			const tablePosition = unref(paginationInfo)?.position;
-			if (tablePosition !== null && Array.isArray(tablePosition)) {
-				const topPos = tablePosition.find((p) => p.includes("top"));
-				const bottomPos = tablePosition.find((p) => p.includes("bottom"));
-				const isDisable = tablePosition.every((p) => `${p}` === "none");
-				if (!topPos && !bottomPos && !isDisable) positionClass = defaultPosition;
-				if (topPos) positionClass = topPos.toLowerCase().replace("top", "");
-				if (bottomPos) positionClass = bottomPos.toLowerCase().replace("bottom", "");
-			} else positionClass = defaultPosition;
-			return positionClass;
-		});
-		function getFormSearch() {
-			return {
-				...unref(defaultFormSearch),
-				...tableFormRef.value?.getFormSearch(),
-				...props.params
-			};
-		}
-		tryOnActivated(() => {
-			if (activated.value) {
-				if (props.keepAliveReload) run({ params: getFormSearch() });
-			} else activated.value = true;
-		});
-		const handleTableSubmit = async (value, action) => {
-			if (formAutoRequest.value) {
-				run({ params: value });
-				return;
+			selectedKeys: selectedRowKeys,
+			selectedItems,
+			rowsSelection: {
+				clear: clearSelectedKeys,
+				select: selectRow,
+				selectAll: selectAllRows,
+				remove: removeSelectedKeys,
+				sync: syncSelectedRows
 			}
-			if (action === "reset") {
-				emit("reset", value);
-				if (props.request && formActions.value?.resetReload) run({ params: value });
-			} else if (props.request) {
-				emit("submit", value);
-				run({ params: value });
+		}),
+		formRef: () => ({
+			getFormSearch,
+			getFormInnerState: () => formState.value,
+			restFormState: (callback) => {
+				resetFormState();
+				callback?.();
 			}
-		};
-		/**
-		* @Author      gx12358
-		* @DateTime    2021/7/14
-		* @lastTime    2021/7/14
-		* @description ant-table原始方法
-		*/
-		const changePage = (pagination, filters, sorter, extra) => {
-			handleTableChange(pagination, filters, sorter, extra);
-			props.onChange?.(pagination, filters, sorter, extra);
-		};
-		const expandedRowsChange = (expandedRows) => props.onExpandedRowsChange?.(expandedRows);
-		const expand = (expanded, record) => props.onExpand?.(expanded, record);
-		const handleResizeColumn = (w, col) => {
-			resizeColumnWidth(w, col);
-			props.onResizeColumn?.(w, col);
-		};
-		function renderEmptyText() {
-			const emptyTextRender = getSlotVNode({
-				slots,
-				props,
-				key: "emptyText"
-			});
-			if (emptyTextRender !== false && appContext?.emptyText?.value !== false) {
-				const extraProps = props.emptyTextProps?.extraProps || {};
-				const emptyRender = emptyTextRender || appContext?.emptyText?.value;
-				const isNode = isVNode(emptyRender);
-				const customEmpty = isNode ? h(emptyRender, extraProps) : filterEmpty(isArray(emptyRender) ? emptyRender : [emptyRender]);
-				return createVNode("div", {
-					"class": classNames(`${baseClassName}-empty-text`, hashId.value, props.emptyTextProps?.class),
-					"style": props.emptyTextProps?.style
-				}, [isNode ? customEmpty : isArray(customEmpty) && customEmpty.length ? customEmpty.map((item) => cloneVNode(item, extraProps)) : createVNode(Empty, { "image": simpleImage }, null)]);
+		})
+	});
+	return () => {
+		const actionsRender = slots.actions?.() || props.actionProps?.actions;
+		return createVNode("div", {
+			"ref": rootEl,
+			"class": rootClassNames.value,
+			"style": mergedStyle.value
+		}, [createVNode("div", {
+			"class": classNames(props.proClasses?.content, `${prefixCls.value}-content`),
+			"style": props.proStyles?.content
+		}, [shouldRenderForm.value && createVNode(ProTableSearchForm, {
+			"prefixCls": prefixCls.value,
+			"formColumns": formColumns.value,
+			"formState": formState.value,
+			"defaultFormSearch": defaultFormSearch.value,
+			"formConfig": formConfig.value,
+			"formAutoRequest": formAutoRequest.value,
+			"formActions": formActions.value,
+			"loading": loadingState.value,
+			"cardBordered": props.cardBordered,
+			"proClasses": props.proClasses ?? {},
+			"proStyles": props.proStyles ?? {},
+			"onSearch": handleTableSubmit,
+			"onReset": (params) => emit("reset", params)
+		}, { default: () => [slots.form?.()] }), createVNode("div", {
+			"ref": cardEl,
+			"class": classNames(props.proClasses?.card, `${prefixCls.value}-card`, props.cardBordered && `${prefixCls.value}-card-border`),
+			"style": props.proStyles?.card
+		}, [createVNode(Toolbar, {
+			"prefixCls": prefixCls.value,
+			"options": props.options,
+			"titleTipText": props.titleTipText,
+			"actionsPlacement": props.actionProps?.placement,
+			"actions": actionsRender,
+			"headerTitle": slots.headerTitle?.() ?? props.headerTitle,
+			"headerTitleTip": slots.headerTitleTip?.() ?? props.headerTitleTip,
+			"listToolAfter": slots.listToolAfter?.() ?? props.listToolAfter,
+			"proClasses": props.proClasses ?? {},
+			"proStyles": props.proStyles ?? {}
+		}, null), createVNode("div", { "class": `${prefixCls.value}-loading-container` }, [isCustomRenderMode.value ? createVNode("div", { "class": classNames(`${prefixCls.value}-list`, props.proClasses?.list) }, [createVNode("div", {
+			"class": classNames(`${prefixCls.value}-list-content`, props.proClasses?.listContent),
+			"style": props.proStyles?.listContent
+		}, [renderCustomContent()]), paginationInfo.value !== false && dataSource.value?.length > 0 && createVNode(Pagination, mergeProps(paginationInfo.value, {
+			"align": paginationAlign.value,
+			"class": classNames(`${prefixCls.value}-pagination`, props.proClasses?.pagination),
+			"style": props.proStyles?.pagination,
+			"onChange": onCustomPaginationChange
+		}), null)]) : createVNode(Fragment, null, [createVNode(Table, mergeProps(passThroughProps.value, {
+			"scroll": tableScroll.value,
+			"dataSource": dataSource.value,
+			"columns": props.draggable ? resizableColumns.value : tableColumns.value,
+			"components": mergedComponents.value,
+			"onRow": mergedOnRow.value,
+			"rowKey": props.rowKey,
+			"size": tableSize.value,
+			"pagination": paginationInfo.value,
+			"loading": false,
+			"rowSelection": mergedRowSelection.value,
+			"onChange": onTableChange,
+			"onUpdate:expandedRowKeys": onTableExpandedRowKeysChange,
+			"onScroll": onTableScroll,
+			"classes": {
+				...passThroughProps.value.classes,
+				...overflowHidden.value ? { root: `${prefixCls.value}-overflow-hidden` } : {}
 			}
-			return null;
+		}), tableSlots.value), scrollEl.value && createVNode(Teleport, { "to": scrollEl.value }, { default: () => [createVNode(Bar_default, {
+			"ref": barRef,
+			"hasScrollY": !!tableScroll.value.y
+		}, null)] })]), loadingState.value && createVNode("div", { "class": classNames(`${prefixCls.value}-loading-mask`, hashId.value) }, [createVNode(Spin, { "indicator": resolvedIndicator.value }, null)])])])])]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		loading: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		rowKey: { required: false },
+		columns: {
+			type: Array,
+			required: false
+		},
+		indexColumn: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		scrollPolicy: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		fitPage: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		dataSource: {
+			type: Array,
+			required: false
+		},
+		proClasses: {
+			type: Object,
+			required: false
+		},
+		proStyles: {
+			type: Object,
+			required: false
+		},
+		cardBordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		align: {
+			type: String,
+			required: false
+		},
+		waitRequest: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		polling: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		pollingTime: {
+			type: Number,
+			required: false
+		},
+		request: {
+			type: Function,
+			required: false
+		},
+		immediate: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		autoRequest: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		debounceTime: {
+			type: Number,
+			required: false
+		},
+		showLoading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		params: { required: false },
+		postData: {
+			type: Function,
+			required: false
+		},
+		form: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		searchMap: {
+			type: Array,
+			required: false
+		},
+		pagination: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		onReset: {
+			type: Function,
+			required: false
+		},
+		onReload: {
+			type: Function,
+			required: false
+		},
+		onSubmit: {
+			type: Function,
+			required: false
+		},
+		onLoadingChange: {
+			type: Function,
+			required: false
+		},
+		onRequestError: {
+			type: Function,
+			required: false
+		},
+		onSizeChange: {
+			type: Function,
+			required: false
+		},
+		onBeforeSearchSubmit: {
+			type: Function,
+			required: false
+		},
+		onResizeColumn: {
+			type: Function,
+			required: false
+		},
+		draggable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		rowDraggable: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		onRowSortEnd: {
+			type: Function,
+			required: false
+		},
+		keepAliveReload: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		columnEmptyText: {
+			type: [String, Function],
+			required: false
+		},
+		options: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		titleTipText: {
+			type: String,
+			required: false
+		},
+		actionProps: {
+			type: Object,
+			required: false
+		},
+		onFullscreenChange: {
+			type: Function,
+			required: false
+		},
+		emptyText: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		headerTitle: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		headerTitleTip: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		listToolAfter: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		customRender: {
+			type: Boolean,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		pageItemRender: {
+			type: Boolean,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		dropdownPrefixCls: {
+			type: String,
+			required: false
+		},
+		column: {
+			type: Object,
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		locale: {
+			type: Object,
+			required: false
+		},
+		rowSelection: {
+			type: Object,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		scroll: {
+			type: Object,
+			required: false
+		},
+		sortDirections: {
+			type: Array,
+			required: false
+		},
+		showSorterTooltip: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		virtual: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		tableLayout: {
+			type: String,
+			required: false
+		},
+		expandable: {
+			type: Object,
+			required: false
+		},
+		indentSize: {
+			type: Number,
+			required: false
+		},
+		rowClassName: {
+			type: [String, Function],
+			required: false
+		},
+		title: {
+			type: Function,
+			required: false
+		},
+		footer: {
+			type: Function,
+			required: false
+		},
+		summary: {
+			type: Function,
+			required: false
+		},
+		headerCell: {
+			type: Function,
+			required: false
+		},
+		bodyCell: {
+			type: Function,
+			required: false
+		},
+		caption: { required: false },
+		id: {
+			type: String,
+			required: false
+		},
+		showHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			required: false
+		},
+		onRow: {
+			type: Function,
+			required: false
+		},
+		onHeaderRow: {
+			type: Function,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		sticky: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		rowHoverable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tailor: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getContainerWidth: {
+			type: Function,
+			required: false
+		},
+		measureRowRender: {
+			type: Function,
+			required: false
+		},
+		expandedRowKeys: {
+			type: Array,
+			required: false
+		},
+		defaultExpandedRowKeys: {
+			type: Array,
+			required: false
+		},
+		expandedRowRender: {
+			type: Function,
+			required: false
+		},
+		expandRowByClick: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		expandIcon: {
+			type: Function,
+			required: false
+		},
+		onExpand: {
+			type: Function,
+			required: false
+		},
+		onExpandedRowsChange: {
+			type: Function,
+			required: false
+		},
+		defaultExpandAllRows: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		expandIconColumnIndex: {
+			type: Number,
+			required: false
+		},
+		expandedRowClassName: {
+			type: Function,
+			required: false
+		},
+		childrenColumnName: {
+			type: String,
+			required: false
 		}
-		const renderCustomize = () => {
-			const customRender = getSlot({
-				slots,
-				props,
-				key: "customRender"
-			});
-			if (customRender) {
-				if (dataSource.value?.length) {
-					const tableData = cloneDeep(unref(dataSource));
-					return customRender?.({
-						dataSource: tableData,
-						currentData: getCurrentData(tableData, paginationInfo.value)
-					});
-				}
-				return renderEmptyText();
-			}
-			return createVNode(Fragment, null, null);
-		};
-		provideTableContext({
-			hashId,
-			prefixCls: baseClassName,
-			tableScrollState,
-			tableSize,
-			columns: proColumns,
-			cacheColumns,
-			isMobile,
-			formConfig,
-			formAutoRequest,
-			formActions,
-			screenWidth,
-			tableListToolsHeight,
-			styles: toRef(props, "styles"),
-			classNames: toRef(props, "classNames"),
-			action: {
-				setTableSize,
-				reload: (info) => run(info),
-				toggle
-			},
-			setPagination
-		});
-		expose({
-			formRef: () => ({
-				getFormSearch,
-				getFormInnerState: () => tableFormRef.value?.getFormSearch() || {},
-				restFormState: (callBack) => {
-					waitRequest.value = true;
-					callBack && callBack?.();
-					tableFormRef.value?.resetForm(false);
-					waitRequest.value = false;
-				}
-			}),
-			actionRef: () => ({
-				loading,
-				dataSource,
-				pageInfo: requestPagination,
-				pagination: paginationInfo.value,
-				selectedKeys: computed(() => selectedKeys.value),
-				selectedItems: computed(() => selectedItems.value),
-				rowsSelection: {
-					clear: clearAllRowKeys,
-					select: selectRowKey,
-					remove: removeRowKeys,
-					sync: syncSelectedRows,
-					selectAll: selectAllRowKey
-				},
-				reload: run,
-				getLoadingStatus: () => unref(loading),
-				reloadAndReset: async (options) => {
-					waitRequest.value = true;
-					setPagination({
-						current: 1,
-						pageSize: requestPagination?.pageSize || 10
-					});
-					if (options && options?.callBack) if (options.wait) await options.callBack();
-					else options.callBack();
-					tableFormRef.value?.resetForm(true);
-					waitRequest.value = false;
-				},
-				setPageInfo: changePage,
-				setTableDataList,
-				setPagination,
-				operateTableDataRow,
-				setLoading
-			})
-		});
-		return () => {
-			const hasCustom = convertValueBoolean(props.customRender || slots.customRender);
-			const actionsRender = slots.actions?.() || props.actionProps?.actions;
-			const slotsPropsVNode = getSlotsProps({
-				slots,
-				props,
-				keys: [
-					"headerTitle",
-					"headerTitleTip",
-					"listToolAfter"
-				],
-				render: true
-			});
-			return wrapSSR(createVNode("div", {
-				"ref": tableRef,
-				"class": classNames(baseClassName, hashId.value, props.class, props.classNames?.root, [{
-					[`${baseClassName}-no-scroll`]: !Object.keys(unref(proScroll) || {}).length,
-					[`${baseClassName}-table-tree`]: isTreeDataRef.value,
-					[`${baseClassName}-full-page`]: props.fitPage,
-					[`${baseClassName}-full-screen`]: isFullscreen.value
-				}]),
-				"style": {
-					...props.style,
-					...props.styles?.root || {}
-				}
-			}, [createVNode("div", {
-				"class": classNames(`${baseClassName}-content`, hashId.value, props.classNames?.content),
-				"style": props.styles?.content
-			}, [(formCols.value.length > 0 || !!slots.form) && props.form !== false && createVNode(Form_default, {
-				"ref": tableFormRef,
-				"modalScroll": props.modalScroll,
-				"cardBordered": props.cardBordered,
-				"formCols": formCols.value,
-				"prefixCls": baseClassName,
-				"loading": unref(loading),
-				"onSearch": handleTableSubmit,
-				"defaultFormSearch": defaultFormSearch.value
-			}, { default: slots.form ? () => slots.form?.() : null }), createVNode("div", {
-				"ref": tableCardEl,
-				"class": classNames(props.classNames?.card, hashId.value, `${baseClassName}-card`, props.cardBordered && `${baseClassName}-card-border`),
-				"style": props.styles?.card
-			}, [createVNode(ToolBar_default, {
-				"options": props.options ? isObject(props.options) ? props.options : {} : false,
-				"titleTipText": props.titleTipText,
-				"actionsPlacement": props.actionProps?.placement,
-				"actionsRender": actionsRender,
-				"headerTitle": slotsPropsVNode.headerTitle,
-				"listToolAfter": slotsPropsVNode.listToolAfter,
-				"headerTitleTip": slotsPropsVNode.headerTitleTip
-			}, null), hasCustom ? createVNode(Spin, loadingState.value, { default: () => [createVNode("div", {
-				"class": classNames(`${baseClassName}-list ${hashId.value}`, props.classNames?.list),
-				"style": props.styles?.list
-			}, [createVNode("div", {
-				"class": classNames(`${baseClassName}-list-content`, hashId.value, props.classNames?.listContent),
-				"style": {
-					...props.styles?.listContent || {},
-					height: tableScrollYHeight.value ? unit(tableScrollYHeight.value) : props.styles?.listContent?.height
-				}
-			}, [renderCustomize()]), props.pagination !== false && dataSource.value?.length > 0 && createVNode(Pagination, mergeProps(toRaw(unref(paginationInfo)), {
-				"class": classNames(hashId.value, `${baseClassName}-pagination`, `${baseClassName}-pagination-${paginationPosition.value}`, props.classNames?.pagination),
-				"style": props.styles?.pagination,
-				"onChange": (current, pageSize) => changePage({
-					current,
-					pageSize
-				})
-			}), null)])] }) : createVNode(Fragment, null, [createVNode(Table, mergeProps(pick(props, Object.keys(tableProps)), unref(tablePropsValues), {
-				"style": props.styles?.table,
-				"class": classNames(props.classNames?.table, hashId.value, tableOverHidden.value && `${baseClassName}-overflow-hidden`),
-				"loading": loadingState.value,
-				"rowKey": (record) => record[props.rowKey],
-				"transformCellText": (options) => {
-					if (props.transformCellText && typeof props.transformCellText === "function") props.transformCellText?.(options);
-					const { column, record } = options;
-					if (!column) return options.text;
-					const key = column?.key || column?.dataIndex;
-					let text = options.text;
-					if (isArray(text)) {
-						if (text.length === 0 || text.length === 1 && !isVNode(text[0])) text = text?.[0];
-						else if (text[0]?.type === "template") text = text[0]?.children;
-					}
-					text = valueFormat(text, column?.valueType || props.columns?.find((item) => (item.key || item.dataIndex) === key)?.valueType, baseClassName, hashId.value);
-					const columnEmptyText = column?.columnEmptyText || props?.columnEmptyText;
-					const { value, success } = handleEmptyField(text, columnEmptyText ? typeof columnEmptyText === "function" ? columnEmptyText(record) : columnEmptyText : "");
-					if (success && column?.ellipsis && text) return createVNode(TableCell_default, {
-						"text": value,
-						"column": column,
-						"className": baseClassName,
-						"hashId": hashId.value
-					}, null);
-					return value;
-				},
-				"rowSelection": props.rowSelection ? {
-					...omit(props.rowSelection, [
-						"onSelect",
-						"onSelectAll",
-						"onChange",
-						"selectedRowKeys"
-					]),
-					selectedRowKeys: selectedKeys.value || [],
-					onSelect: selectRowKey,
-					onSelectAll: selectAllRowKey,
-					onChange: changeRowKey
-				} : void 0,
-				"rowClassName": () => "aaa",
-				"onChange": changePage,
-				"onExpandedRowsChange": expandedRowsChange,
-				"onExpand": expand,
-				"onResizeColumn": (w, col) => handleResizeColumn(w, col)
-			}), {
-				...slots,
-				emptyText: () => renderEmptyText()
-			}), tableScrollEl.value && !hasCustom && createVNode(Teleport, { "to": tableScrollEl.value }, { default: () => [createVNode(Bar_default, { "ref": barRef }, null)] })])])])]));
-		};
-	}
+	}, defaults),
+	emits: [
+		"change",
+		"reset",
+		"reload",
+		"submit",
+		"loadingChange",
+		"requestError",
+		"sizeChange",
+		"resizeColumn",
+		"fullscreenChange",
+		"rowSortEnd",
+		"update:expandedRowKeys",
+		"scroll"
+	],
+	name: "GProTable",
+	inheritAttrs: false
 });
-var ProTable_default = ProTable;
-
 //#endregion
-export { ProTable_default as default };
+export { ForwardProTable as default };