@tmagic/form 1.8.0-beta.1 → 1.8.0-beta.10

package/src/schema.ts

@@ -1,5 +1,33 @@
+import type { InjectionKey } from 'vue';
+
+import type { FormItemConfig } from '@tmagic/form-schema';
+
 export * from '@tmagic/form-schema';
 
+/**
+ * 对比模式相关配置，由 `MForm` 通过 `provide` 注入，
+ * 所有层级的 Container（含嵌套在 fieldset / panel 等容器组件内部的 Container）通过 `inject` 获取，
+ * 无需逐层透传 prop。
+ */
+export interface FormDiffConfig {
+  /**
+   * 自定义"是否展示对比内容"的判断函数（仅在对比模式下生效）。
+   *
+   * - 不传：使用默认逻辑 `!isEqual(curValue, lastValue)`；
+   * - 传函数：完全以函数返回值为准，返回 `true` 才展示前后两份对比内容。
+   */
+  showDiff?: (_data: { curValue: any; lastValue: any; config: FormItemConfig }) => boolean;
+  /**
+   * 自定义「自接管对比」的字段类型（仅在对比模式下生效）。
+   *
+   * - 传数组：在内置类型基础上「追加」这些类型；
+   * - 传函数：入参为内置类型数组，返回值作为「最终」完整类型列表（可完全替换内置项）。
+   */
+  selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+}
+
+export const FORM_DIFF_CONFIG_KEY: InjectionKey<FormDiffConfig> = Symbol('mFormDiffConfig');
+
 export interface ValidateError {
   message: string;
   field: string;
@@ -14,3 +42,22 @@ export interface ContainerChangeEventData {
   modifyKey?: string;
   changeRecords?: ChangeRecord[];
 }
+
+/** 自定义 label slot 的作用域参数 */
+export interface FormLabelSlotProps {
+  /** 当前表单项配置 */
+  config: FormItemConfig;
+  /** 经处理后的类型 */
+  type: string;
+  /** 经 filterFunction 处理后的 label 文案 */
+  text?: string;
+  /** 完整字段路径（包含父级前缀） */
+  prop: string;
+  /** 经 filterFunction 处理后的最终禁用状态 */
+  disabled?: boolean;
+}
+
+/** Form / Container 暴露的具名 slot 定义 */
+export interface FormSlots {
+  label(_props: FormLabelSlotProps): any;
+}

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
 /**
@@ -45,9 +45,19 @@ export interface SubmitFormOptions {
   keyProp?: string;
   popperClass?: string;
   preventSubmitDefault?: boolean;
+  /**
+   * 表单校验失败时，错误提示前缀是否使用字段的 text 文案（通过 `getTextByName` 从 config 中查找）。
+   * 默认 `true`，置为 `false` 时直接使用字段 name。
+   */
+  useFieldTextInError?: boolean;
   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 +68,18 @@ export interface SubmitFormOptions {
 }
 // #endregion SubmitFormOptions
 
+// #region SubmitFormResult
+/**
+ * 开启 `returnChangeRecords` 时 submitForm 的返回结果
+ */
+export interface SubmitFormResult {
+  /** 校验通过后的表单值 */
+  values: any;
+  /** 表单变更记录 */
+  changeRecords: ChangeRecord[];
+}
+// #endregion SubmitFormResult
+
 /**
  * 以命令式方式调用 Form.vue 完成一次表单校验/提交。
  *
@@ -78,10 +100,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 +134,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/src/theme/container.scss

@@ -15,7 +15,10 @@
   }
 
   .tmagic-design-form-item {
-    &.show-diff {
+    &.show-after-diff {
+      background: rgb(225, 243, 216);
+    }
+    &.show-before-diff {
       background: #f7dadd;
     }
   }