@antdv-vue/pro-utils 0.0.0-stage → 2.1.1

package/dist/useEditableArray/components/CancelEditableAction.js

@@ -0,0 +1,90 @@
+import { useProFormContextInject } from "../../components/ProFormContext/index.js";
+import { createVNode, defineComponent } from "vue";
+import { get, set } from "@v-c/util";
+import { Form } from "antdv-next";
+import { useIntl } from "@antdv-vue/pro-provider";
+//#region src/useEditableArray/components/CancelEditableAction.tsx
+function recordKeyToString(rowKey) {
+	if (Array.isArray(rowKey)) return rowKey.join(",");
+	return rowKey;
+}
+/**
+* Normalize antd Form `NamePath` segments.
+*
+* - Preserve `0` (number) and other falsy-but-valid segments
+* - Flatten nested arrays (e.g. `name={['a','b']}`)
+* - Convert number segments to string to align with `spellNamePath` behavior
+*/
+function normalizeNamePath(...segments) {
+	return segments.flat(1).filter((key) => key !== void 0 && key !== null).map((key) => typeof key === "number" ? key.toString() : key);
+}
+/**
+* 保存按钮的dom
+*/
+const CancelEditableAction = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const intl = useIntl();
+	const context = useProFormContextInject();
+	const form = Form.useFormInstance();
+	const cancel = async () => {
+		const isMapEditor = props.editorType === "Map";
+		const recordKeyStr = recordKeyToString(props.recordKey)?.toString();
+		const namePath = normalizeNamePath(props.tableName, props.formRecordKey ?? props.recordKey);
+		const formattedObject = context?.getFieldFormatValueObject?.(namePath);
+		const fields = formattedObject != null ? get(formattedObject, namePath) : form?.getFieldValue(namePath);
+		const record = isMapEditor ? set({}, namePath, fields) : fields;
+		const cachedPreEditRow = recordKeyStr !== null ? props.preEditRows?.get(recordKeyStr) : void 0;
+		const isNewLineKeyMatch = () => {
+			const newLineKey = props.newLineConfig?.options?.recordKey;
+			if (newLineKey == null || props.recordKey == null) return false;
+			const newLineKeyStr = recordKeyToString(newLineKey)?.toString();
+			const currentKeyStr = recordKeyToString(props.recordKey)?.toString();
+			if (!newLineKeyStr || !currentKeyStr) return false;
+			return newLineKeyStr === currentKeyStr;
+		};
+		const res = await props.onCancel?.(props.recordKey, record, props.row, props.newLineConfig);
+		/** 重置为默认值，不然编辑的行会丢掉 */
+		const restoreRow = cachedPreEditRow ?? props.preEditRow ?? props.row;
+		if (cachedPreEditRow === null || cachedPreEditRow === void 0 && props.preEditRow === null && isNewLineKeyMatch()) await props.onDelete?.(props.recordKey, props.row);
+		else if (restoreRow != null) form.setFieldValue(namePath, restoreRow);
+		await (props.finishEditable ?? props.cancelEditable)?.(props.recordKey);
+		if (recordKeyStr) props.preEditRows?.delete(recordKeyStr);
+		if (props.preEditRow) props["onUpdate:preEditRow"]?.(null);
+		return res;
+	};
+	return () => createVNode("a", {
+		"key": "cancel",
+		"onClick": async (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			await cancel();
+		}
+	}, [slots.default?.() || intl.value.getMessage({
+		id: "editableTable.action.cancel",
+		defaultMessage: "取消"
+	})]);
+}, {
+	name: "CancelEditableAction",
+	inheritAttrs: false,
+	props: [
+		"cancelEditable",
+		"deletePopconfirmMessage",
+		"editableKeys",
+		"editorType",
+		"finishEditable",
+		"formRecordKey",
+		"index",
+		"newLineConfig",
+		"onCancel",
+		"onDelete",
+		"onSave",
+		"onUpdate:preEditRow",
+		"preEditRow",
+		"recordKey",
+		"row",
+		"setEditableRowKeys",
+		"tableName",
+		"preEditRows"
+	]
+});
+//#endregion
+export { CancelEditableAction as default, normalizeNamePath, recordKeyToString };

package/dist/useEditableArray/components/DeleteEditableAction.d.ts

@@ -0,0 +1,33 @@
+import { ActionRenderConfig } from "../typing.js";
+import * as _$vue from "vue";
+
+//#region src/useEditableArray/components/DeleteEditableAction.d.ts
+interface DeleteEditableActionProps<T> {
+  editableKeys?: ActionRenderConfig<T>['editableKeys'];
+  recordKey?: ActionRenderConfig<T>['recordKey'];
+  preEditRow?: ActionRenderConfig<T>['preEditRow'];
+  preEditRows?: ActionRenderConfig<T>['preEditRows'];
+  'onUpdate:preEditRow'?: ActionRenderConfig<T>['onUpdate:preEditRow'];
+  index?: ActionRenderConfig<T>['index'];
+  cancelEditable?: ActionRenderConfig<T>['cancelEditable'];
+  editorType?: ActionRenderConfig<T>['editorType'];
+  onDelete?: ActionRenderConfig<T>['onDelete'];
+  deletePopconfirmMessage?: ActionRenderConfig<T>['deletePopconfirmMessage'];
+  setEditableRowKeys?: ActionRenderConfig<T>['setEditableRowKeys'];
+  newLineConfig?: ActionRenderConfig<T>['newLineConfig'];
+  tableName?: ActionRenderConfig<T>['tableName'];
+  row?: T;
+}
+/**
+ * 删除按钮的dom
+ */
+declare const DeleteEditableAction: new <T extends Record<string, any>>(props: DeleteEditableActionProps<T> & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<DeleteEditableActionProps<T> & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, DeleteEditableActionProps<T> & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { DeleteEditableActionProps, DeleteEditableAction as default };

package/dist/useEditableArray/components/DeleteEditableAction.js

@@ -0,0 +1,63 @@
+import { useMountMergeState } from "../../useMountMergeState/index.js";
+import { recordKeyToString } from "./CancelEditableAction.js";
+import { createVNode, defineComponent } from "vue";
+import { Popconfirm } from "antdv-next";
+import { useIntl } from "@antdv-vue/pro-provider";
+import { LoadingOutlined } from "@antdv-next/icons";
+//#region src/useEditableArray/components/DeleteEditableAction.tsx
+/**
+* 删除按钮的dom
+*/
+const DeleteEditableAction = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
+	const intl = useIntl();
+	const [loading, setLoading] = useMountMergeState(false);
+	const onConfirm = async () => {
+		try {
+			setLoading(true);
+			const res = await props.onDelete?.(props.recordKey, props.row);
+			setLoading(false);
+			if (res === false) return false;
+			return res;
+		} catch {
+			setLoading(false);
+			return null;
+		} finally {
+			const recordKeyStr = recordKeyToString(props.recordKey)?.toString();
+			if (recordKeyStr) props.preEditRows?.delete(recordKeyStr);
+			if (props.preEditRow) props["onUpdate:preEditRow"]?.(null);
+		}
+	};
+	expose({});
+	return () => {
+		const { deletePopconfirmMessage } = props;
+		return slots.default?.() ? createVNode(Popconfirm, {
+			"key": "delete",
+			"title": deletePopconfirmMessage,
+			"onConfirm": onConfirm
+		}, { default: () => [createVNode("a", null, [loading.value ? createVNode(LoadingOutlined, { "style": { marginInlineEnd: "8px" } }, null) : null, slots.default?.() || intl.value.getMessage({
+			id: "editableTable.action.delete",
+			defaultMessage: "删除"
+		})])] }) : null;
+	};
+}, {
+	name: "DeleteEditableAction",
+	inheritAttrs: false,
+	props: [
+		"cancelEditable",
+		"deletePopconfirmMessage",
+		"editableKeys",
+		"editorType",
+		"index",
+		"newLineConfig",
+		"onDelete",
+		"onUpdate:preEditRow",
+		"preEditRow",
+		"recordKey",
+		"row",
+		"setEditableRowKeys",
+		"tableName",
+		"preEditRows"
+	]
+});
+//#endregion
+export { DeleteEditableAction as default };

package/dist/useEditableArray/components/SaveEditableAction.d.ts

@@ -0,0 +1,33 @@
+import { ActionRenderConfig } from "../typing.js";
+import * as _$vue from "vue";
+
+//#region src/useEditableArray/components/SaveEditableAction.d.ts
+interface SaveEditableActionProps<T> {
+  editableKeys?: ActionRenderConfig<T>['editableKeys'];
+  recordKey?: ActionRenderConfig<T>['recordKey'];
+  formRecordKey?: ActionRenderConfig<T>['formRecordKey'];
+  preEditRow?: ActionRenderConfig<T>['preEditRow'];
+  preEditRows?: ActionRenderConfig<T>['preEditRows'];
+  'onUpdate:preEditRow'?: ActionRenderConfig<T>['onUpdate:preEditRow'];
+  index?: ActionRenderConfig<T>['index'];
+  cancelEditable?: ActionRenderConfig<T>['cancelEditable'];
+  onSave?: ActionRenderConfig<T>['onSave'];
+  editorType?: ActionRenderConfig<T>['editorType'];
+  setEditableRowKeys?: ActionRenderConfig<T>['setEditableRowKeys'];
+  newLineConfig?: ActionRenderConfig<T>['newLineConfig'];
+  tableName?: ActionRenderConfig<T>['tableName'];
+  row: T;
+}
+/**
+ * 保存按钮的dom
+ */
+declare const SaveEditableAction: new <T extends Record<string, any>>(props: SaveEditableActionProps<T> & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<SaveEditableActionProps<T> & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, SaveEditableActionProps<T> & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { SaveEditableActionProps, SaveEditableAction as default };

package/dist/useEditableArray/components/SaveEditableAction.js

@@ -0,0 +1,79 @@
+import { useMountMergeState } from "../../useMountMergeState/index.js";
+import { merge } from "../../merge/index.js";
+import { useProFormContextInject } from "../../components/ProFormContext/index.js";
+import { normalizeNamePath } from "./CancelEditableAction.js";
+import { createVNode, defineComponent } from "vue";
+import { get, set } from "@v-c/util";
+import { Form } from "antdv-next";
+import { useIntl } from "@antdv-vue/pro-provider";
+import { LoadingOutlined } from "@antdv-next/icons";
+import { getValue } from "antdv-next/dist/form/utils/valueUtil";
+//#region src/useEditableArray/components/SaveEditableAction.tsx
+/**
+* 保存按钮的dom
+*/
+const SaveEditableAction = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
+	const intl = useIntl();
+	const form = Form.useFormInstance();
+	const context = useProFormContextInject();
+	const [loading, setLoading] = useMountMergeState(false);
+	const save = async () => {
+		try {
+			const isMapEditor = props.editorType === "Map";
+			const fieldRecordKey = props.formRecordKey ?? props.recordKey;
+			const namePath = normalizeNamePath(props.tableName, Array.isArray(fieldRecordKey) ? fieldRecordKey[0] : fieldRecordKey);
+			setLoading(true);
+			try {
+				await form.validateFields(namePath, { recursive: true });
+			} catch (error) {
+				setLoading(false);
+				throw error;
+			}
+			const formattedObject = context?.getFieldFormatValueObject?.(namePath);
+			const fields = formattedObject != null ? get(formattedObject, namePath) : form.getFieldValue(namePath);
+			if (Array.isArray(props.recordKey) && props.recordKey.length > 1) {
+				const [, ...recordKeyPath] = props.recordKey;
+				set(fields, recordKeyPath, getValue(fields, recordKeyPath));
+			}
+			const data = isMapEditor ? set({}, namePath, fields) : fields;
+			const res = await props.onSave?.(props.recordKey, merge({}, props.row, data), props.row, props.newLineConfig);
+			setLoading(false);
+			return res;
+		} catch (error) {
+			setLoading(false);
+			throw error;
+		}
+	};
+	expose({ save });
+	return () => createVNode("a", {
+		"key": "save",
+		"onClick": async (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			await save();
+		}
+	}, [loading.value ? createVNode(LoadingOutlined, { "style": { marginInlineEnd: "8px" } }, null) : null, slots.default?.() || intl.value.getMessage({
+		id: "editableTable.action.save",
+		defaultMessage: "保存"
+	})]);
+}, {
+	name: "SaveEditableAction",
+	inheritAttrs: false,
+	props: [
+		"cancelEditable",
+		"editableKeys",
+		"editorType",
+		"formRecordKey",
+		"index",
+		"newLineConfig",
+		"onSave",
+		"onUpdate:preEditRow",
+		"preEditRow",
+		"recordKey",
+		"row",
+		"setEditableRowKeys",
+		"tableName"
+	]
+});
+//#endregion
+export { SaveEditableAction as default };

package/dist/useEditableArray/index.d.ts

@@ -0,0 +1,66 @@
+import { ActionRenderConfig, ActionRenderFunction, ActionTypeText, AddLineOptions, NewLineConfig, RecordKey, RowEditableConfig, RowEditableType, SaveEditableActionRef } from "./typing.js";
+import { recordKeyToString } from "./components/CancelEditableAction.js";
+import { Key, VueNode as VueNode$1 } from "../typing.js";
+import { ComputedRef, Ref, ShallowRef, VNode } from "vue";
+import { AnyObject } from "antdv-next/dist/_util/type";
+import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
+import { GetRowKey } from "antdv-next/dist/table/interface";
+
+//#region src/useEditableArray/index.d.ts
+/**
+ * 使用map 来删除数据，性能一般 但是准确率比较高
+ *
+ */
+declare function editableRowByKey<RecordType>(keyProps: {
+  data?: RecordType[];
+  childrenColumnName?: string;
+  getRowKey?: GetRowKey<RecordType>;
+  key?: RecordKey;
+  row?: RecordType;
+}, action: 'update' | 'top' | 'delete'): RecordType[];
+declare function defaultActionRender<T extends Record<string, any>>(row: T, config: ActionRenderConfig<T, NewLineConfig<T>>): {
+  save: _$vue_jsx_runtime0.JSX.Element;
+  delete: _$vue_jsx_runtime0.JSX.Element | undefined;
+  cancel: _$vue_jsx_runtime0.JSX.Element;
+  saveRef: ShallowRef<SaveEditableActionRef<T> | undefined, SaveEditableActionRef<T> | undefined>;
+};
+/**
+ * 一个方便的hooks 用于维护编辑的状态
+ *
+ * @param props
+ */
+declare function useEditableArray<RecordType extends AnyObject>(props: Omit<RowEditableConfig<RecordType>, 'editableKeys' | 'type'> & {
+  type?: ComputedRef<RowEditableConfig<RecordType>['type']>;
+  editableKeys: ComputedRef<RowEditableConfig<RecordType>['editableKeys']>;
+  getRowKey: ComputedRef<GetRowKey<RecordType>>;
+  dataSource: ComputedRef<RecordType[]>;
+  onValuesChange?: (record: RecordType, dataSource: RecordType[]) => void;
+  childrenColumnName?: ComputedRef<string | undefined>;
+  setDataSource: (dataSource: RecordType[]) => void;
+}): UseEditableUtilType<RecordType>;
+type UseEditableType = typeof useEditableArray;
+interface UseEditableUtilType<T> {
+  messageContextHolder?: () => VNode;
+  editableKeys?: Ref<Key[] | undefined, Key[] | undefined>;
+  setEditableRowKeys?: (val: Key[] | undefined) => void;
+  isEditable?: (row: T & {
+    index: number;
+  }) => {
+    recordKey: string;
+    isEditable: boolean;
+    preIsEditable: boolean;
+  };
+  actionRender?: (row: T & {
+    index: number;
+  }) => void | VueNode$1[];
+  startEditable?: (recordKey: Key, record?: T) => Promise<boolean>;
+  cancelEditable?: (recordKey: RecordKey, needReTry?: boolean) => Promise<boolean | undefined>;
+  addEditRecord?: (row: T, options?: AddLineOptions | undefined) => Promise<boolean>;
+  saveEditable?: (recordKey: RecordKey, needReTry?: boolean) => Promise<boolean>;
+  newLineRecord?: ShallowRef<NewLineConfig<T> | undefined>;
+  preEditableKeys?: Ref<Key[] | undefined>;
+  onValuesChange?: (value: T, values: T) => void;
+  getRealIndex: ((record: T) => number) | undefined;
+}
+//#endregion
+export { ActionRenderConfig, ActionRenderFunction, ActionTypeText, AddLineOptions, NewLineConfig, RecordKey, RowEditableConfig, RowEditableType, SaveEditableActionRef, UseEditableType, UseEditableUtilType, defaultActionRender, editableRowByKey, recordKeyToString, useEditableArray };