@antdv-vue/pro-table 0.0.0-stage → 2.0.3

package/dist/components/EditableTable/InternalEditableTable.js

@@ -0,0 +1,508 @@
+import { useProTableInstanceExpose } from "../../utils/index.js";
+import ProTable from "../../Table.js";
+import { useEditableTableActionContextInject, useEditableTableActionContextProvider } from "./context.js";
+import { Fragment, cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, ref, shallowRef, toRef } from "vue";
+import { ProFormDependency } from "@antdv-vue/pro-form";
+import { useIntl } from "@antdv-vue/pro-provider";
+import { childrenToArray, isSpecialNode, runFunction, stringify, transformBooleanProps, useEffect, useMemo } from "@antdv-vue/pro-utils";
+import { get, set, useMergedState } from "@v-c/util";
+import isEqual from "@v-c/util/dist/isEqual";
+import { Button } from "antdv-next";
+import { PlusOutlined } from "@antdv-next/icons";
+//#region src/components/EditableTable/InternalEditableTable.tsx
+/** 可编辑表格的按钮 */
+const RecordCreator = ({ record, position, newRecordType, parentKey }, { slots }) => {
+	const actionRef = useEditableTableActionContextInject();
+	return childrenToArray(slots.default?.(), true).map((vnode) => {
+		if (isVNode(vnode) && !isSpecialNode(vnode)) return cloneVNode(vnode, {
+			...vnode.props,
+			onClick: async (e) => {
+				if (await vnode.props?.onClick?.(e) === false) return;
+				if (actionRef) actionRef.value?.addEditRecord?.(record, {
+					position,
+					newRecordType,
+					parentKey
+				});
+			}
+		});
+		return vnode;
+	});
+};
+RecordCreator.displayName = "RecordCreator";
+RecordCreator.inheritAttrs = false;
+/**
+* 检查是否应该显示创建按钮
+*/
+function shouldShowCreatorButton(maxLength, valueLength, recordCreatorProps) {
+	if (typeof maxLength === "number" && maxLength <= valueLength) return false;
+	return recordCreatorProps !== false;
+}
+/**
+* 创建按钮 DOM
+*/
+function createButtonDom(recordCreatorProps, value, intl) {
+	const { record, position, creatorButtonText, newRecordType, parentKey, style, ...restButtonProps } = recordCreatorProps;
+	return createVNode(RecordCreator, {
+		"record": runFunction(record, value?.length, value) || {},
+		"position": position,
+		"parentKey": runFunction(parentKey, value?.length, value),
+		"newRecordType": newRecordType
+	}, { default: () => [createVNode(Button, mergeProps({
+		"type": "dashed",
+		"style": {
+			display: "block",
+			margin: "10px 0",
+			width: "100%",
+			...style
+		},
+		"icon": createVNode(PlusOutlined, null, null)
+	}, restButtonProps), { default: () => [creatorButtonText || intl.getMessage({
+		id: "editableTable.action.add",
+		defaultMessage: "添加一行数据"
+	})] })] });
+}
+/**
+* 创建顶部按钮的渲染属性
+*/
+function createTopButtonProps(creatorButtonDom, columnsLength) {
+	const wrapper = (_, { attrs, slots }) => createVNode("thead", { "class": attrs.class }, [slots.default?.(), createVNode("tr", { "style": { position: "relative" } }, [createVNode("td", {
+		"col-span": 0,
+		"style": { visibility: "hidden" }
+	}, [creatorButtonDom]), createVNode("td", {
+		"style": {
+			position: "absolute",
+			left: 0,
+			width: "100%"
+		},
+		"col-span": columnsLength
+	}, [creatorButtonDom])])]);
+	return { components: { header: { wrapper } } };
+}
+/**
+* 创建底部按钮的渲染属性
+*/
+function createBottomButtonProps(creatorButtonDom, tableViewRender) {
+	return { tableViewRender: (_, dom) => createVNode(Fragment, null, [tableViewRender?.(_, dom) ?? dom, creatorButtonDom]) };
+}
+function useCreatorButton({ recordCreatorProps, maxLength, value, intl, columnsLength, tableViewRender }) {
+	const creatorButtonDom = computed(() => {
+		if (!shouldShowCreatorButton(maxLength.value, value.value?.length || 0, recordCreatorProps.value)) return false;
+		if (!recordCreatorProps.value) return false;
+		return createButtonDom(recordCreatorProps.value, value.value, intl.value);
+	});
+	return {
+		creatorButtonDom,
+		buttonRenderProps: computed(() => {
+			if (!recordCreatorProps.value) return {};
+			const { position } = recordCreatorProps.value;
+			if (!creatorButtonDom) return {};
+			return position === "top" ? createTopButtonProps(creatorButtonDom.value, columnsLength.value) : createBottomButtonProps(creatorButtonDom.value, tableViewRender);
+		})
+	};
+}
+function useEditableProTableInstanceExpose(editableTableRef) {
+	return {
+		...useProTableInstanceExpose(editableTableRef),
+		get nativeElement() {
+			return editableTableRef.value?.nativeElement;
+		},
+		get pageInfo() {
+			return editableTableRef.value?.pageInfo;
+		},
+		get formRef() {
+			return editableTableRef.value?.formRef?.nativeElement ? editableTableRef.value?.formRef : null;
+		},
+		get editableFormRef() {
+			return editableTableRef.value?.editableFormRef;
+		},
+		getRowData: (rowIndex) => editableTableRef.value?.getRowData?.(rowIndex),
+		getRowsData: () => editableTableRef.value?.getRowsData?.(),
+		setRowData: (rowIndex, data) => editableTableRef.value?.setRowData?.(rowIndex, data)
+	};
+}
+const InternalEditableProTable = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
+	const intl = useIntl();
+	const preData = ref(void 0);
+	const tableRef = shallowRef(null);
+	const formRef = shallowRef(null);
+	const hasHydratedEditableForm = ref(false);
+	const booleanProps = transformBooleanProps([
+		"manualRequest",
+		"showSorterTooltip",
+		"showHeader",
+		"rowHoverable",
+		"revalidateOnFocus",
+		"loading",
+		"virtual",
+		"sticky",
+		"tailor",
+		"bordered",
+		"cardBordered",
+		"ghost"
+	], props);
+	const [value, setValue] = useMergedState(() => props.value || props.defaultValue || [], {
+		value: toRef(() => props.value),
+		defaultValue: props.defaultValue,
+		onChange: (value) => {
+			props.onChange?.(value);
+			props["onUpdate:value"]?.(value);
+		}
+	});
+	const getRowKey = useMemo(() => {
+		if (typeof props.rowKey === "function") return props.rowKey;
+		return (record, index) => record[props.rowKey] || index;
+	}, [() => props.rowKey]);
+	/**
+	* 根据不同的情况返回不同的 rowKey
+	* @param finlayRowKey
+	* @returns string | number
+	*/
+	const coverRowKey = (finlayRowKey) => {
+		/**
+		* 如果是 prop.name 的模式，就需要把行号转化成具体的rowKey。
+		*/
+		if (typeof finlayRowKey === "number" && !props.name) {
+			if (finlayRowKey >= value.value.length) return finlayRowKey;
+			const rowData = value.value && value.value[finlayRowKey];
+			return getRowKey.value?.(rowData, finlayRowKey);
+		}
+		/**
+		* 如果是 prop.name 的模式，就直接返回行号
+		*/
+		if ((typeof finlayRowKey === "string" || finlayRowKey >= value.value.length) && props.name) {
+			const rowIndex = value.value.findIndex((item, index) => {
+				return getRowKey.value?.(item, index)?.toString() === finlayRowKey?.toString();
+			});
+			if (rowIndex !== -1) return rowIndex;
+		}
+		return finlayRowKey;
+	};
+	useEffect(() => {
+		if (!formRef.value || !props.controlled && (props.name || hasHydratedEditableForm.value)) return;
+		const formValues = (value.value || []).reduce((result, current, index) => {
+			result[String(getRowKey.value(current, index))] = current;
+			return result;
+		}, {});
+		if (Object.keys(formValues).length === 0) return;
+		formRef.value.setFieldsValue(formValues);
+		hasHydratedEditableForm.value = true;
+	}, [
+		() => stringify(value.value),
+		() => props.controlled,
+		() => formRef.value
+	]);
+	useEffect(() => {
+		if (props.name && props?.editable?.form) formRef.value = props?.editable?.form;
+	}, [() => props.editable?.form, () => props.name]);
+	/**
+	* 防止闭包的onchange
+	*
+	*/
+	const handleValuesChange = (record, dataSource) => {
+		props.editable?.onValuesChange?.(record, dataSource || []);
+		props.onValuesChange?.(dataSource || [], record);
+		if (props.controlled && props?.onChange) props.onChange(dataSource);
+	};
+	useEditableTableActionContextProvider(tableRef);
+	/**
+	* 获取一行数据的
+	* @param rowIndex
+	*/
+	const getRowData = (rowIndex) => {
+		if (rowIndex === void 0) throw new Error("rowIndex is required");
+		const finlayRowKey = coverRowKey(rowIndex);
+		const rowKeyName = [props.name, finlayRowKey?.toString() ?? ""].flat(1).filter(Boolean);
+		return formRef.value?.getFieldValue(rowKeyName);
+	};
+	/**
+	* 获取整个 table 的数据
+	*/
+	const getRowsData = () => {
+		const rowKeyName = [props.name].flat(1).filter(Boolean);
+		if (Array.isArray(rowKeyName) && rowKeyName.length === 0) {
+			const rowData = formRef.value?.getFieldsValue();
+			if (Array.isArray(rowData)) return rowData;
+			return Object.keys(rowData || {}).map((key) => {
+				return rowData?.[key];
+			});
+		}
+		return formRef.value?.getFieldValue(rowKeyName);
+	};
+	/**
+	* 设置一行的数据，会将数据进行简单的 merge
+	* @param rowIndex
+	* @param data
+	* @returns void
+	*/
+	const setRowData = (rowIndex, data) => {
+		if (rowIndex === void 0) throw new Error("rowIndex is required");
+		const finlayRowKey = coverRowKey(rowIndex);
+		const rowKeyName = [props.name, finlayRowKey?.toString() ?? ""].flat(1).filter(Boolean);
+		const newRowData = Object.assign({}, {
+			...getRowData(rowIndex),
+			...data || {}
+		});
+		if (props.name) {
+			const tableName = [props.name].flat(1).filter(Boolean);
+			const currentTableData = props.value || formRef.value?.getFieldValue(tableName);
+			if (Array.isArray(currentTableData)) {
+				const rowIndexToUpdate = typeof finlayRowKey === "number" ? finlayRowKey : currentTableData.findIndex((row, index) => {
+					const rowKey = getRowKey.value?.(row, index);
+					return rowKey === finlayRowKey || rowKey?.toString() === finlayRowKey?.toString();
+				});
+				if (rowIndexToUpdate >= 0 && rowIndexToUpdate < currentTableData.length) {
+					const updatedTableData = [...currentTableData];
+					updatedTableData[rowIndexToUpdate] = newRowData;
+					const updateValues = set({}, tableName, updatedTableData);
+					formRef.value?.setFieldsValue(updateValues);
+					if (props.controlled && props.onChange) props.onChange(updatedTableData);
+				}
+			} else {
+				const updateValues = set({}, rowKeyName, newRowData);
+				formRef.value?.setFieldsValue(updateValues);
+			}
+		} else {
+			const updateValues = set({}, rowKeyName, newRowData);
+			formRef.value?.setFieldsValue(updateValues);
+		}
+		return true;
+	};
+	const { buttonRenderProps } = useCreatorButton({
+		recordCreatorProps: computed(() => props.recordCreatorProps),
+		maxLength: computed(() => props.maxLength),
+		value,
+		intl,
+		columnsLength: computed(() => props.columns?.length),
+		tableViewRender: props.tableViewRender
+	});
+	/**
+	* 创建编辑 keys 的 Set，用于快速查找
+	*/
+	const createEditingKeysSet = (editingKeys) => {
+		return new Set((editingKeys || []).map((key) => String(key)));
+	};
+	/**
+	* 同步表单值，排除正在编辑的行
+	*/
+	const syncFormValuesExcludingEditing = (dataSource, editingKeysSet, namePath) => {
+		if (!formRef.value) return;
+		try {
+			if (namePath && namePath.length > 0) {
+				const currentList = get(formRef.value.getFieldsValue() || {}, namePath);
+				if (currentList && Array.isArray(currentList)) {
+					const currentListMap = /* @__PURE__ */ new Map();
+					currentList.forEach((item, idx) => {
+						const key = getRowKey.value(item, idx);
+						currentListMap.set(String(key), item);
+					});
+					const newValue = set({}, namePath, dataSource.map((item, index) => {
+						const key = getRowKey.value(item, index);
+						const keyStr = String(key);
+						if (editingKeysSet.has(keyStr)) return currentListMap.get(keyStr) || item;
+						return item;
+					}));
+					formRef.value.setFieldsValue(newValue);
+				} else {
+					const newValue = set({}, namePath, dataSource);
+					formRef.value.setFieldsValue(newValue);
+				}
+			} else {
+				const formValues = {};
+				dataSource.forEach((current, index) => {
+					const key = getRowKey.value(current, index);
+					const keyStr = String(key);
+					if (!editingKeysSet.has(keyStr)) formValues[keyStr] = current;
+				});
+				if (Object.keys(formValues).length > 0) formRef.value.setFieldsValue(formValues);
+			}
+		} catch (error) {
+			console.warn("Failed to sync form values:", error);
+		}
+	};
+	expose({
+		...useProTableInstanceExpose(tableRef),
+		get nativeElement() {
+			return tableRef.value?.nativeElement;
+		},
+		get pageInfo() {
+			return tableRef.value?.pageInfo;
+		},
+		get formRef() {
+			return tableRef.value?.formRef?.nativeElement ? tableRef.value?.formRef : null;
+		},
+		get editableFormRef() {
+			return formRef.value;
+		},
+		getRowData,
+		getRowsData,
+		setRowData
+	});
+	return () => {
+		const { onTableChange, maxLength, formItemProps, recordCreatorProps, rowKey, controlled, defaultValue, onChange, onDataSourceChange, ...rest } = props;
+		const editableProps = props.name ? {
+			...props.editable,
+			form: tableRef.value?.formRef
+		} : { ...props.editable };
+		if (props?.onValuesChange || props.editable?.onValuesChange || props.controlled && props?.onChange) editableProps.onValuesChange = handleValuesChange;
+		return createVNode(Fragment, null, [createVNode(ProTable, mergeProps({ "ref": tableRef }, rest, booleanProps, {
+			"search": rest.search || false,
+			"options": rest.options || false,
+			"pagination": rest.pagination || false,
+			"rowKey": rowKey,
+			"scroll": props.scroll || { x: "max-content" },
+			"revalidateOnFocus": rest.revalidateOnFocus || false,
+			"tableLayout": props.tableLayout || "fixed"
+		}, buttonRenderProps.value, {
+			"editable": {
+				...editableProps,
+				formProps: {
+					formRef,
+					...editableProps.formProps
+				}
+			},
+			"dataSource": value.value,
+			"onDataSourceChange": (dataSource) => {
+				setValue(dataSource);
+				/**
+				* 如果是 name 模式，需要同步表单值
+				* 避免表单值和数据源不一致
+				* 注意：不会覆盖正在编辑的行
+				*/
+				if (props.name && formRef.value) {
+					const editingKeys = props.editable?.editableKeys;
+					syncFormValuesExcludingEditing(dataSource, createEditingKeysSet(editingKeys), [props.name].flat(1).filter(Boolean));
+				}
+				if (!props.controlled && props.onChange) props.onChange(dataSource);
+			}
+		}), slots), props.name ? createVNode(ProFormDependency, { "name": [props.name] }, { default: (changeValue) => {
+			if (!preData.value) {
+				preData.value = value.value;
+				return null;
+			}
+			const list = get(changeValue, [props.name].flat(1));
+			if (!list || !Array.isArray(list)) {
+				preData.value = value.value;
+				return null;
+			}
+			const changeIndex = list.findIndex((item, index) => {
+				return !isEqual(item, preData.value?.[index]);
+			});
+			if (changeIndex !== -1) {
+				const changeItem = list[changeIndex];
+				props?.editable?.onValuesChange?.(changeItem, list);
+			}
+			preData.value = list;
+			return null;
+		} }) : null]);
+	};
+}, {
+	name: "InternalEditableTable",
+	inheritAttrs: false,
+	props: [
+		"beforeSearchSubmit",
+		"bodyCell",
+		"bordered",
+		"caption",
+		"cardBordered",
+		"cardProps",
+		"childrenColumnName",
+		"classes",
+		"columnEmptyText",
+		"columns",
+		"columnsState",
+		"components",
+		"controlled",
+		"dataSource",
+		"dateFormatter",
+		"debounceTime",
+		"defaultData",
+		"defaultExpandAllRows",
+		"defaultExpandedRowKeys",
+		"defaultSize",
+		"defaultValue",
+		"direction",
+		"dropdownPrefixCls",
+		"editable",
+		"errorBoundaryRender",
+		"expandIcon",
+		"expandIconColumnIndex",
+		"expandRowByClick",
+		"expandable",
+		"expandedRowClassName",
+		"expandedRowKeys",
+		"expandedRowRender",
+		"footer",
+		"form",
+		"formItemProps",
+		"getContainerWidth",
+		"getPopupContainer",
+		"ghost",
+		"headerCell",
+		"headerTitle",
+		"id",
+		"indentSize",
+		"loading",
+		"locale",
+		"manualRequest",
+		"maxLength",
+		"measureRowRender",
+		"name",
+		"onChange",
+		"onDataSourceChange",
+		"onExpand",
+		"onExpandedRowsChange",
+		"onHeaderRow",
+		"onLoad",
+		"onLoadingChange",
+		"onRequestError",
+		"onReset",
+		"onRow",
+		"onSizeChange",
+		"onSubmit",
+		"onTableChange",
+		"onValuesChange",
+		"options",
+		"optionsRender",
+		"pagination",
+		"params",
+		"polling",
+		"postData",
+		"prefixCls",
+		"recordCreatorProps",
+		"request",
+		"revalidateOnFocus",
+		"rootClass",
+		"rowClassName",
+		"rowHoverable",
+		"rowKey",
+		"rowSelection",
+		"scroll",
+		"search",
+		"searchFormRender",
+		"showHeader",
+		"showSorterTooltip",
+		"size",
+		"sortDirections",
+		"sticky",
+		"styles",
+		"summary",
+		"tableAlertOptionRender",
+		"tableAlertRender",
+		"tableClass",
+		"tableExtraRender",
+		"tableLayout",
+		"tableRender",
+		"tableStyle",
+		"tableViewRender",
+		"tailor",
+		"title",
+		"toolBarRender",
+		"toolbar",
+		"tooltip",
+		"type",
+		"value",
+		"virtual"
+	]
+});
+//#endregion
+export { RecordCreator, InternalEditableProTable as default, useCreatorButton, useEditableProTableInstanceExpose };

package/dist/components/EditableTable/RowEditorTable.d.ts

@@ -0,0 +1,63 @@
+import { FilterValue, ProTableProps } from "../../typing.js";
+import { RecordCreatorProps } from "./InternalEditableTable.js";
+import * as _$vue from "vue";
+import { ParamsType } from "@antdv-vue/pro-provider";
+import * as _$_antdv_vue_pro_utils0 from "@antdv-vue/pro-utils";
+import { ProFieldValueObjectType, ProFieldValueType } from "@antdv-vue/pro-utils";
+import * as _$antdv_next0 from "antdv-next";
+import * as _$antdv_next_dist_table_interface0 from "antdv-next/dist/table/interface";
+import { VueNode as VueNode$1 } from "@v-c/util/dist/type";
+
+//#region src/components/EditableTable/RowEditorTable.d.ts
+declare const RowEditorTable: new <DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType extends (ProFieldValueType | ProFieldValueObjectType) = "text">(props: Omit<ProTableProps<DataType, Params, ValueType>, "onChange"> & {
+  defaultValue?: DataType[] | undefined;
+  value?: DataType[] | undefined;
+  'onUpdate:value'?: ((value?: DataType[] | undefined) => void) | undefined;
+  onChange?: ((value?: DataType[] | undefined) => void) | undefined;
+  onTableChange?: ((pagination: _$antdv_next0.TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: _$antdv_next0.TableSorterResult<DataType> | _$antdv_next0.TableSorterResult<DataType>[], extra: _$antdv_next_dist_table_interface0.TableCurrentDataSource<DataType>) => void) | undefined;
+  recordCreatorProps?: _$_antdv_vue_pro_utils0.WithFalse<RecordCreatorProps<DataType> & _$antdv_next0.ButtonProps & {
+    style?: _$vue.CSSProperties;
+    creatorButtonText?: VueNode$1;
+  }> | undefined;
+  maxLength?: number;
+  onValuesChange?: ((values: DataType[], record: DataType) => void) | undefined;
+  controlled?: boolean;
+  formItemProps?: Omit<_$_antdv_vue_pro_utils0.FormItemProps, "name">;
+} & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<Omit<ProTableProps<DataType, Params, ValueType>, "onChange"> & {
+  defaultValue?: DataType[] | undefined;
+  value?: DataType[] | undefined;
+  'onUpdate:value'?: ((value?: DataType[] | undefined) => void) | undefined;
+  onChange?: ((value?: DataType[] | undefined) => void) | undefined;
+  onTableChange?: ((pagination: _$antdv_next0.TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: _$antdv_next0.TableSorterResult<DataType> | _$antdv_next0.TableSorterResult<DataType>[], extra: _$antdv_next_dist_table_interface0.TableCurrentDataSource<DataType>) => void) | undefined;
+  recordCreatorProps?: _$_antdv_vue_pro_utils0.WithFalse<RecordCreatorProps<DataType> & _$antdv_next0.ButtonProps & {
+    style?: _$vue.CSSProperties;
+    creatorButtonText?: VueNode$1;
+  }> | undefined;
+  maxLength?: number;
+  onValuesChange?: ((values: DataType[], record: DataType) => void) | undefined;
+  controlled?: boolean;
+  formItemProps?: Omit<_$_antdv_vue_pro_utils0.FormItemProps, "name">;
+} & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, Omit<ProTableProps<DataType, Params, ValueType>, "onChange"> & {
+  defaultValue?: DataType[] | undefined;
+  value?: DataType[] | undefined;
+  'onUpdate:value'?: ((value?: DataType[] | undefined) => void) | undefined;
+  onChange?: ((value?: DataType[] | undefined) => void) | undefined;
+  onTableChange?: ((pagination: _$antdv_next0.TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: _$antdv_next0.TableSorterResult<DataType> | _$antdv_next0.TableSorterResult<DataType>[], extra: _$antdv_next_dist_table_interface0.TableCurrentDataSource<DataType>) => void) | undefined;
+  recordCreatorProps?: _$_antdv_vue_pro_utils0.WithFalse<RecordCreatorProps<DataType> & _$antdv_next0.ButtonProps & {
+    style?: _$vue.CSSProperties;
+    creatorButtonText?: VueNode$1;
+  }> | undefined;
+  maxLength?: number;
+  onValuesChange?: ((values: DataType[], record: DataType) => void) | undefined;
+  controlled?: boolean;
+  formItemProps?: Omit<_$_antdv_vue_pro_utils0.FormItemProps, "name">;
+} & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { RowEditorTable as default };