@tmagic/form 1.8.0-beta.2 → 1.8.0-beta.4

package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js

@@ -52,8 +52,9 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const name = computed(() => props.config.name || "");
 		const showDiff = computed(() => {
 			if (!props.isCompare) return false;
-			const curValue = name.value ? props.model[name.value] : props.model;
-			const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+			if (!name.value) return false;
+			const curValue = props.model[name.value];
+			const lastValue = props.lastValues[name.value];
 			const customShowDiff = diffConfig.showDiff;
 			if (typeof customShowDiff === "function") return Boolean(customShowDiff({
 				curValue,

package/dist/es/containers/Fieldset.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { filterFunction } from "../utils/form.js";
 import Container_default from "./Container.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeStyle, openBlock, renderList, resolveDynamicComponent, unref, withCtx } from "vue";
 import { TMagicCheckbox } from "@tmagic/design";
@@ -36,6 +37,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const emit = __emit;
 		const mForm = inject("mForm");
 		const name = computed(() => props.config.name || "");
+		const legend = computed(() => filterFunction(mForm, props.config.legend, props));
 		const checkboxName = computed(() => {
 			if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.name === "string") return props.config.checkbox.name;
 			return "value";
@@ -75,7 +77,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"false-value": checkboxFalseValue.value,
 					"onUpdate:modelValue": valueChangeHandler
 				}, {
-					default: withCtx(() => [createElementVNode("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_1), __props.config.extra ? (openBlock(), createElementBlock("span", {
+					default: withCtx(() => [createElementVNode("span", { innerHTML: legend.value }, null, 8, _hoisted_1), __props.config.extra ? (openBlock(), createElementBlock("span", {
 						key: 0,
 						innerHTML: __props.config.extra,
 						class: "m-form-tip"
@@ -88,7 +90,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"false-value"
 				])]),
 				_: 1
-			})) : (openBlock(), createElementBlock("legend", _hoisted_3, [createElementVNode("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_4), __props.config.extra ? (openBlock(), createElementBlock("span", {
+			})) : (openBlock(), createElementBlock("legend", _hoisted_3, [createElementVNode("span", { innerHTML: legend.value }, null, 8, _hoisted_4), __props.config.extra ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				innerHTML: __props.config.extra,
 				class: "m-form-tip"

package/dist/es/submitForm.js

@@ -21,10 +21,17 @@ import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
 * } catch (e) {
 *   console.error(e);
 * }
+*
+* // 需要同时获取变更记录时：
+* const { values, changeRecords } = await submitForm({
+*   config: [...],
+*   initValues: { name: 'foo' },
+*   returnChangeRecords: true,
+* });
 * ```
 */
 var submitForm = (options) => {
-	const { native, appContext, timeout = 1e4, ...formProps } = options;
+	const { native, appContext, timeout = 1e4, returnChangeRecords, ...formProps } = options;
 	return new Promise((resolve, reject) => {
 		const container = document.createElement("div");
 		container.style.display = "none";
@@ -40,7 +47,12 @@ var submitForm = (options) => {
 					stop();
 					try {
 						await nextTick();
-						resolve(await formRef.value.submitForm(native));
+						const changeRecords = [...formRef.value.changeRecords ?? []];
+						const result = await formRef.value.submitForm(native);
+						resolve(returnChangeRecords ? {
+							values: result,
+							changeRecords
+						} : result);
 					} catch (err) {
 						reject(err);
 					} finally {

package/dist/tmagic-form.umd.cjs

@@ -2930,8 +2930,9 @@
 			const name = (0, vue.computed)(() => props.config.name || "");
 			const showDiff = (0, vue.computed)(() => {
 				if (!props.isCompare) return false;
-				const curValue = name.value ? props.model[name.value] : props.model;
-				const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+				if (!name.value) return false;
+				const curValue = props.model[name.value];
+				const lastValue = props.lastValues[name.value];
 				const customShowDiff = diffConfig.showDiff;
 				if (typeof customShowDiff === "function") return Boolean(customShowDiff({
 					curValue,
@@ -3748,10 +3749,17 @@
 	* } catch (e) {
 	*   console.error(e);
 	* }
+	*
+	* // 需要同时获取变更记录时：
+	* const { values, changeRecords } = await submitForm({
+	*   config: [...],
+	*   initValues: { name: 'foo' },
+	*   returnChangeRecords: true,
+	* });
 	* ```
 	*/
 	var submitForm = (options) => {
-		const { native, appContext, timeout = 1e4, ...formProps } = options;
+		const { native, appContext, timeout = 1e4, returnChangeRecords, ...formProps } = options;
 		return new Promise((resolve, reject) => {
 			const container = document.createElement("div");
 			container.style.display = "none";
@@ -3767,7 +3775,12 @@
 						stop();
 						try {
 							await (0, vue.nextTick)();
-							resolve(await formRef.value.submitForm(native));
+							const changeRecords = [...formRef.value.changeRecords ?? []];
+							const result = await formRef.value.submitForm(native);
+							resolve(returnChangeRecords ? {
+								values: result,
+								changeRecords
+							} : result);
 						} catch (err) {
 							reject(err);
 						} finally {
@@ -4366,6 +4379,7 @@
 			const emit = __emit;
 			const mForm = (0, vue.inject)("mForm");
 			const name = (0, vue.computed)(() => props.config.name || "");
+			const legend = (0, vue.computed)(() => filterFunction(mForm, props.config.legend, props));
 			const checkboxName = (0, vue.computed)(() => {
 				if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.name === "string") return props.config.checkbox.name;
 				return "value";
@@ -4405,7 +4419,7 @@
 						"false-value": checkboxFalseValue.value,
 						"onUpdate:modelValue": valueChangeHandler
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_1$11), __props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: legend.value }, null, 8, _hoisted_1$11), __props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 							key: 0,
 							innerHTML: __props.config.extra,
 							class: "m-form-tip"
@@ -4418,7 +4432,7 @@
 						"false-value"
 					])]),
 					_: 1
-				})) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("legend", _hoisted_3$5, [(0, vue.createElementVNode)("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_4$3), __props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				})) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("legend", _hoisted_3$5, [(0, vue.createElementVNode)("span", { innerHTML: legend.value }, null, 8, _hoisted_4$3), __props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					innerHTML: __props.config.extra,
 					class: "m-form-tip"

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.2",
+  "version": "1.8.0-beta.4",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -52,9 +52,9 @@
   "peerDependencies": {
     "vue": "^3.5.34",
     "typescript": "^6.0.3",
-    "@tmagic/design": "1.8.0-beta.2",
-    "@tmagic/form-schema": "1.8.0-beta.2",
-    "@tmagic/utils": "1.8.0-beta.2"
+    "@tmagic/design": "1.8.0-beta.4",
+    "@tmagic/form-schema": "1.8.0-beta.4",
+    "@tmagic/utils": "1.8.0-beta.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/Container.vue

@@ -307,8 +307,10 @@ const name = computed(() => props.config.name || '');
 // 便于业务侧自定义"语义上相等"的特殊场景（例如空字符串与空 hook 结构）。
 const showDiff = computed(() => {
   if (!props.isCompare) return false;
-  const curValue = name.value ? props.model[name.value] : props.model;
-  const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+  if (!name.value) return false;
+
+  const curValue = props.model[name.value];
+  const lastValue = props.lastValues[name.value];
 
   const customShowDiff = diffConfig.showDiff;
   if (typeof customShowDiff === 'function') {

package/src/containers/Fieldset.vue

@@ -7,11 +7,11 @@
         :true-value="checkboxTrueValue"
         :false-value="checkboxFalseValue"
         @update:modelValue="valueChangeHandler"
-        ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
+        ><span v-html="legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></TMagicCheckbox>
     </component>
     <legend v-else>
-      <span v-html="config.legend"></span>
+      <span v-html="legend"></span>
       <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
     </legend>
 
@@ -63,6 +63,7 @@ import { computed, inject } from 'vue';
 import { TMagicCheckbox } from '@tmagic/design';
 
 import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
@@ -99,6 +100,8 @@ const mForm = inject<FormState | undefined>('mForm');
 
 const name = computed(() => props.config.name || '');
 
+const legend = computed(() => filterFunction<string>(mForm, props.config.legend, props));
+
 const checkboxName = computed(() => {
   if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') {
     return props.config.checkbox.name;

package/src/submitForm.ts

@@ -19,7 +19,7 @@
 import { type AppContext, type Component, createApp, defineComponent, h, nextTick, ref, watch } from 'vue';
 
 import Form from './Form.vue';
-import type { FormConfig, FormState } from './schema';
+import type { ChangeRecord, FormConfig, FormState } from './schema';
 
 // #region SubmitFormOptions
 /**
@@ -48,6 +48,11 @@ export interface SubmitFormOptions {
   extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 透传给 Form.submitForm 的参数：是否直接返回原始响应式 values */
   native?: boolean;
+  /**
+   * 是否在 resolve 结果中携带 changeRecords（变更记录）。
+   * 开启后 resolve 的结果为 `{ values, changeRecords }`，否则仅 resolve values。
+   */
+  returnChangeRecords?: boolean;
   /**
    * 父级应用上下文，用于继承全局组件、指令、provide 等。
    * 通常通过 `app._context` 或 `getCurrentInstance()?.appContext` 获取。
@@ -58,6 +63,18 @@ export interface SubmitFormOptions {
 }
 // #endregion SubmitFormOptions
 
+// #region SubmitFormResult
+/**
+ * 开启 `returnChangeRecords` 时 submitForm 的返回结果
+ */
+export interface SubmitFormResult {
+  /** 校验通过后的表单值 */
+  values: any;
+  /** 表单变更记录 */
+  changeRecords: ChangeRecord[];
+}
+// #endregion SubmitFormResult
+
 /**
  * 以命令式方式调用 Form.vue 完成一次表单校验/提交。
  *
@@ -78,10 +95,17 @@ export interface SubmitFormOptions {
  * } catch (e) {
  *   console.error(e);
  * }
+ *
+ * // 需要同时获取变更记录时：
+ * const { values, changeRecords } = await submitForm({
+ *   config: [...],
+ *   initValues: { name: 'foo' },
+ *   returnChangeRecords: true,
+ * });
  * ```
  */
 export const submitForm = (options: SubmitFormOptions): Promise<any> => {
-  const { native, appContext, timeout = 10000, ...formProps } = options;
+  const { native, appContext, timeout = 10000, returnChangeRecords, ...formProps } = options;
 
   return new Promise((resolve, reject) => {
     const container = document.createElement('div');
@@ -105,8 +129,10 @@ export const submitForm = (options: SubmitFormOptions): Promise<any> => {
             try {
               // 等待子组件（FormItem 等）完成首次渲染，确保 validate 能拿到所有字段
               await nextTick();
+              // submitForm 校验通过后会清空 changeRecords，需在调用前先做快照
+              const changeRecords: ChangeRecord[] = [...(formRef.value.changeRecords ?? [])];
               const result = await formRef.value.submitForm(native);
-              resolve(result);
+              resolve(returnChangeRecords ? { values: result, changeRecords } : result);
             } catch (err) {
               reject(err);
             } finally {

package/types/index.d.ts

@@ -90,6 +90,11 @@ interface SubmitFormOptions {
   extendState?: (_state: schema_d_exports.FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 透传给 Form.submitForm 的参数：是否直接返回原始响应式 values */
   native?: boolean;
+  /**
+   * 是否在 resolve 结果中携带 changeRecords（变更记录）。
+   * 开启后 resolve 的结果为 `{ values, changeRecords }`，否则仅 resolve values。
+   */
+  returnChangeRecords?: boolean;
   /**
    * 父级应用上下文，用于继承全局组件、指令、provide 等。
    * 通常通过 `app._context` 或 `getCurrentInstance()?.appContext` 获取。
@@ -98,6 +103,15 @@ interface SubmitFormOptions {
   /** 等待表单初始化的最长时间（毫秒），超时将以错误 reject。默认 10000ms */
   timeout?: number;
 }
+/**
+ * 开启 `returnChangeRecords` 时 submitForm 的返回结果
+ */
+interface SubmitFormResult {
+  /** 校验通过后的表单值 */
+  values: any;
+  /** 表单变更记录 */
+  changeRecords: ChangeRecord[];
+}
 /**
  * 以命令式方式调用 Form.vue 完成一次表单校验/提交。
  *
@@ -118,6 +132,13 @@ interface SubmitFormOptions {
  * } catch (e) {
  *   console.error(e);
  * }
+ *
+ * // 需要同时获取变更记录时：
+ * const { values, changeRecords } = await submitForm({
+ *   config: [...],
+ *   initValues: { name: 'foo' },
+ *   returnChangeRecords: true,
+ * });
  * ```
  */
 declare const submitForm: (options: SubmitFormOptions) => Promise<any>;
@@ -1897,8 +1918,8 @@ declare const _default$31: {
   install(app: App, opt?: FormInstallOptions): void;
 };
 declare namespace index_d_exports {
-  export { ChangeRecord, ContainerChangeEventData, FORM_DIFF_CONFIG_KEY, FormDiffConfig, FormInstallOptions, FormLabelSlotProps, FormSlots, _default as MCascader, _default$1 as MCheckbox, _default$2 as MCheckboxGroup, _default$3 as MColorPicker, _default$4 as MContainer, _default$5 as MDate, _default$6 as MDateTime, _default$7 as MDaterange, _default$8 as MDisplay, _default$9 as MDynamicField, _default$10 as MFieldset, _default$11 as MFlexLayout, _default$12 as MForm, _default$13 as MFormBox, _default$14 as MFormDialog, _default$15 as MFormDrawer, _default$16 as MGroupList, _default$17 as MHidden, _default$18 as MLink, _default$19 as MNumber, _default$20 as MNumberRange, _default$21 as MPanel, _default$22 as MRadioGroup, _default$23 as MRow, _default$24 as MSelect, _default$25 as MSwitch, _default$16 as MTable, _default$16 as MTableGroupList, _default$26 as MTabs, _default$27 as MText, _default$28 as MTextarea, _default$29 as MTime, _default$30 as MTimerange, SubmitFormOptions, ValidateError, createForm, createObjectProp, createValues, datetimeFormatter, _default$31 as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };
+  export { ChangeRecord, ContainerChangeEventData, FORM_DIFF_CONFIG_KEY, FormDiffConfig, FormInstallOptions, FormLabelSlotProps, FormSlots, _default as MCascader, _default$1 as MCheckbox, _default$2 as MCheckboxGroup, _default$3 as MColorPicker, _default$4 as MContainer, _default$5 as MDate, _default$6 as MDateTime, _default$7 as MDaterange, _default$8 as MDisplay, _default$9 as MDynamicField, _default$10 as MFieldset, _default$11 as MFlexLayout, _default$12 as MForm, _default$13 as MFormBox, _default$14 as MFormDialog, _default$15 as MFormDrawer, _default$16 as MGroupList, _default$17 as MHidden, _default$18 as MLink, _default$19 as MNumber, _default$20 as MNumberRange, _default$21 as MPanel, _default$22 as MRadioGroup, _default$23 as MRow, _default$24 as MSelect, _default$25 as MSwitch, _default$16 as MTable, _default$16 as MTableGroupList, _default$26 as MTabs, _default$27 as MText, _default$28 as MTextarea, _default$29 as MTime, _default$30 as MTimerange, SubmitFormOptions, SubmitFormResult, ValidateError, createForm, createObjectProp, createValues, datetimeFormatter, _default$31 as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };
 }
 declare const createForm: <T extends [] = []>(config: schema_d_exports.FormConfig | T) => schema_d_exports.FormConfig | T;
 //#endregion
-export { ChangeRecord, ContainerChangeEventData, FORM_DIFF_CONFIG_KEY, FormDiffConfig, type FormInstallOptions, FormLabelSlotProps, FormSlots, _default as MCascader, _default$1 as MCheckbox, _default$2 as MCheckboxGroup, _default$3 as MColorPicker, _default$4 as MContainer, _default$5 as MDate, _default$6 as MDateTime, _default$7 as MDaterange, _default$8 as MDisplay, _default$9 as MDynamicField, _default$10 as MFieldset, _default$11 as MFlexLayout, _default$12 as MForm, _default$13 as MFormBox, _default$14 as MFormDialog, _default$15 as MFormDrawer, _default$16 as MGroupList, _default$16 as MTable, _default$16 as MTableGroupList, _default$17 as MHidden, _default$18 as MLink, _default$19 as MNumber, _default$20 as MNumberRange, _default$21 as MPanel, _default$22 as MRadioGroup, _default$23 as MRow, _default$24 as MSelect, _default$25 as MSwitch, _default$26 as MTabs, _default$27 as MText, _default$28 as MTextarea, _default$29 as MTime, _default$30 as MTimerange, SubmitFormOptions, ValidateError, createForm, createObjectProp, createValues, datetimeFormatter, _default$31 as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };
+export { ChangeRecord, ContainerChangeEventData, FORM_DIFF_CONFIG_KEY, FormDiffConfig, type FormInstallOptions, FormLabelSlotProps, FormSlots, _default as MCascader, _default$1 as MCheckbox, _default$2 as MCheckboxGroup, _default$3 as MColorPicker, _default$4 as MContainer, _default$5 as MDate, _default$6 as MDateTime, _default$7 as MDaterange, _default$8 as MDisplay, _default$9 as MDynamicField, _default$10 as MFieldset, _default$11 as MFlexLayout, _default$12 as MForm, _default$13 as MFormBox, _default$14 as MFormDialog, _default$15 as MFormDrawer, _default$16 as MGroupList, _default$16 as MTable, _default$16 as MTableGroupList, _default$17 as MHidden, _default$18 as MLink, _default$19 as MNumber, _default$20 as MNumberRange, _default$21 as MPanel, _default$22 as MRadioGroup, _default$23 as MRow, _default$24 as MSelect, _default$25 as MSwitch, _default$26 as MTabs, _default$27 as MText, _default$28 as MTextarea, _default$29 as MTime, _default$30 as MTimerange, SubmitFormOptions, SubmitFormResult, ValidateError, createForm, createObjectProp, createValues, datetimeFormatter, _default$31 as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };