@tmagic/form 1.5.0-beta.14 → 1.5.0-beta.16

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.14",
+  "version": "1.5.0-beta.16",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -32,11 +32,13 @@
     "node": ">=18"
   },
   "repository": {
+    "directory": "packages/form",
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@popperjs/core": "^2.11.8",
     "dayjs": "^1.11.11",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.15.2"
@@ -46,17 +48,17 @@
     "@types/node": "^18.19.0",
     "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "^5.1.3",
-    "@vue/compiler-sfc": "^3.5.0",
+    "@vue/compiler-sfc": "^3.5.12",
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
     "sass": "^1.78.0",
-    "vite": "^5.4.3"
+    "vite": "^5.4.10"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
+    "vue": ">=3.5.0",
     "typescript": "*",
-    "@tmagic/design": "1.5.0-beta.14",
-    "@tmagic/utils": "1.5.0-beta.14"
+    "@tmagic/utils": "1.5.0-beta.16",
+    "@tmagic/design": "1.5.0-beta.16"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -28,15 +28,15 @@
 </template>
 
 <script setup lang="ts">
-import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
+import { provide, reactive, ref, shallowRef, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep, isEqual } from 'lodash-es';
 
-import { TMagicForm } from '@tmagic/design';
+import { TMagicForm, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 
 import Container from './containers/Container.vue';
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
-import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
+import type { ChangeRecord, ContainerChangeEventData, FormConfig, FormState, FormValue, ValidateError } from './schema';
 
 defineOptions({
   name: 'MForm',
@@ -81,7 +81,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'error', 'field-input', 'field-change']);
+const emit = defineEmits(['change', 'error', 'field-input', 'field-change', 'update:stepActive']);
 
 const tMagicForm = ref<InstanceType<typeof TMagicForm>>();
 const initialized = ref(false);
@@ -106,6 +106,8 @@ const formState: FormState = reactive<FormState>({
   setField: (prop: string, field: any) => fields.set(prop, field),
   getField: (prop: string) => fields.get(prop),
   deleteField: (prop: string) => fields.delete(prop),
+  $messageBox: tMagicMessageBox,
+  $message: tMagicMessage,
   post: (options: any) => {
     if (requestFuc) {
       return requestFuc({
@@ -135,9 +137,13 @@ watchEffect(async () => {
 
 provide('mForm', formState);
 
+const changeRecords = shallowRef<ChangeRecord[]>([]);
+
 watch(
   [() => props.config, () => props.initValues],
   ([config], [preConfig]) => {
+    changeRecords.value = [];
+
     if (!isEqual(toRaw(config), toRaw(preConfig))) {
       initialized.value = false;
     }
@@ -165,8 +171,11 @@ watch(
   { immediate: true },
 );
 
-const changeHandler = () => {
-  emit('change', values.value);
+const changeHandler = (v: FormValue, eventData: ContainerChangeEventData) => {
+  if (eventData.changeRecords?.length) {
+    changeRecords.value.push(...eventData.changeRecords);
+  }
+  emit('change', values.value, eventData);
 };
 
 const submitHandler = (e: SubmitEvent) => {
@@ -180,10 +189,14 @@ defineExpose({
   lastValuesProcessed,
   formState,
   initialized,
+  changeRecords,
 
   changeHandler,
 
-  resetForm: () => tMagicForm.value?.resetFields(),
+  resetForm: () => {
+    tMagicForm.value?.resetFields();
+    changeRecords.value = [];
+  },
 
   submitForm: async (native?: boolean): Promise<any> => {
     try {

package/src/FormBox.vue

@@ -40,7 +40,7 @@ import { computed, ref, watchEffect } from 'vue';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
 
 import Form from './Form.vue';
-import type { FormConfig } from './schema';
+import type { ContainerChangeEventData, FormConfig, FormValue } from './schema';
 
 defineOptions({
   name: 'MFormBox',
@@ -68,7 +68,11 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['submit', 'change', 'error']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  submit: [v: any, eventData: ContainerChangeEventData];
+  error: [e: any];
+}>();
 
 const footerHeight = 60;
 
@@ -98,14 +102,14 @@ watchEffect(() => {
 const submitHandler = async () => {
   try {
     const values = await form.value?.submitForm();
-    emit('submit', values);
+    emit('submit', values, { changeRecords: form.value?.changeRecords });
   } catch (e) {
     emit('error', e);
   }
 };
 
-const changeHandler = (value: any) => {
-  emit('change', value);
+const changeHandler = (value: FormValue, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
 };
 
 const show = () => {};

package/src/FormDialog.vue

@@ -65,7 +65,7 @@ import { computed, ref } from 'vue';
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
-import { FormConfig, StepConfig } from './schema';
+import { ContainerChangeEventData, FormConfig, FormValue, StepConfig } from './schema';
 
 defineOptions({
   name: 'MFormDialog',
@@ -132,7 +132,7 @@ const closeHandler = () => {
 const save = async () => {
   try {
     const values = await form.value?.submitForm();
-    emit('submit', values);
+    emit('submit', values, { changeRecords: form.value?.changeRecords });
   } catch (e) {
     emit('error', e);
   }
@@ -146,8 +146,8 @@ const nextStep = () => {
   stepActive.value += 1;
 };
 
-const changeHandler = (value: any) => {
-  emit('change', value);
+const changeHandler = (value: FormValue, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
 };
 
 const show = () => {

package/src/FormDrawer.vue

@@ -59,7 +59,7 @@ import { ref, watchEffect } from 'vue';
 import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
-import type { FormConfig } from './schema';
+import type { ContainerChangeEventData, FormConfig, FormValue } from './schema';
 
 defineOptions({
   name: 'MFormDialog',
@@ -110,14 +110,14 @@ watchEffect(() => {
 const submitHandler = async () => {
   try {
     const values = await form.value?.submitForm();
-    emit('submit', values);
+    emit('submit', values, { changeRecords: form.value?.changeRecords });
   } catch (e) {
     emit('error', e);
   }
 };
 
-const changeHandler = (value: any) => {
-  emit('change', value);
+const changeHandler = (value: FormValue, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
 };
 
 const openHandler = () => {

package/src/containers/Col.vue

@@ -21,7 +21,7 @@ import { computed, inject } from 'vue';
 
 import { TMagicCol } from '@tmagic/design';
 
-import { ChildConfig, FormState } from '../schema';
+import type { ChildConfig, ContainerChangeEventData, FormState } from '../schema';
 import { display as displayFunction } from '../utils/form';
 
 import Container from './Container.vue';
@@ -43,10 +43,13 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 const display = computed(() => displayFunction(mForm, props.config.display, props));
-const changeHandler = () => emit('change', props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => emit('change', v, eventData);
 const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Container.vue

@@ -191,12 +191,12 @@
     </template>
 
     <template v-else-if="items && display">
-      <template v-if="name || name === 0 ? model[name] : model">
+      <template v-if="isValidName() ? model[name] : model">
         <Container
           v-for="item in items"
           :key="key(item)"
-          :model="name || name === 0 ? model[name] : model"
-          :last-values="name || name === 0 ? lastValues[name] || {} : lastValues"
+          :model="isValidName() ? model[name] : model"
+          :last-values="isValidName() ? lastValues[name] || {} : lastValues"
           :is-compare="isCompare"
           :config="item"
           :size="size"
@@ -220,13 +220,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch, watchEffect } from 'vue';
+import { computed, inject, ref, toRaw, watch, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
 
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 
-import { ChildConfig, ContainerCommonConfig, FormState, FormValue, TypeFunction } from '../schema';
+import type {
+  ChildConfig,
+  ContainerChangeEventData,
+  ContainerCommonConfig,
+  FormState,
+  FormValue,
+  TypeFunction,
+} from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
 defineOptions({
@@ -258,7 +265,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -285,7 +295,12 @@ const itemProp = computed(() => {
   } else {
     return props.prop;
   }
-  return `${props.prop}${props.prop ? '.' : ''}${n}`;
+
+  if (typeof props.prop !== 'undefined' && props.prop !== '') {
+    return `${props.prop}.${n}`;
+  }
+
+  return `${n}`;
 });
 
 const tagName = computed(() => `m-${items.value ? 'form' : 'fields'}-${type.value}`);
@@ -360,18 +375,6 @@ const filterHandler = (filter: any, value: FormValue | number | string) => {
   return value;
 };
 
-const changeHandler = (onChange: any, value: FormValue | number | string) => {
-  if (typeof onChange === 'function') {
-    return onChange(mForm, value, {
-      model: props.model,
-      values: mForm?.initValues,
-      formValue: mForm?.values,
-      prop: itemProp.value,
-      config: props.config,
-    });
-  }
-};
-
 const trimHandler = (trim: any, value: FormValue | number | string) => {
   if (typeof value === 'string' && trim) {
     return value.replace(/^\s*/, '').replace(/\s*$/, '');
@@ -381,28 +384,80 @@ const trimHandler = (trim: any, value: FormValue | number | string) => {
 // 继续抛出给更高层级的组件
 const onAddDiffCount = () => emit('addDiffCount');
 
-const onChangeHandler = async function (v: FormValue, key?: string) {
-  const { filter, onChange, trim, name, dynamicKey } = props.config as any;
-  let value: FormValue | number | string = v;
+const hasModifyKey = (eventDataItem: ContainerChangeEventData) =>
+  typeof eventDataItem?.modifyKey !== 'undefined' && eventDataItem.modifyKey !== '';
+
+const isValidName = () => {
+  const valueType = typeof name.value;
+  if (valueType !== 'string' && valueType !== 'symbol' && valueType !== 'number') {
+    return false;
+  }
+
+  if (name.value === '') {
+    return false;
+  }
+
+  if (typeof name.value === 'number') {
+    return name.value >= 0;
+  }
+
+  return true;
+};
+
+const onChangeHandler = async function (v: any, eventData: ContainerChangeEventData = {}) {
+  const { filter, onChange, trim, dynamicKey } = props.config as any;
+  let value: FormValue | number | string | any[] = toRaw(v);
+  const changeRecords = eventData.changeRecords || [];
+  const newChangeRecords = [...changeRecords];
 
   try {
     value = filterHandler(filter, v);
-    value = (await changeHandler(onChange, value)) ?? value;
+
+    if (typeof onChange === 'function') {
+      value =
+        (await onChange(mForm, value, {
+          model: props.model,
+          values: mForm?.initValues,
+          formValue: mForm?.values,
+          prop: itemProp.value,
+          config: props.config,
+          changeRecords: newChangeRecords,
+        })) ?? value;
+    }
     value = trimHandler(trim, value) ?? value;
   } catch (e) {
     console.error(e);
   }
 
-  // field内容下包含field-link时，model===value, 这里避免循环引用
-  if ((name || name === 0) && props.model !== value && (v !== value || props.model[name] !== value)) {
+  let valueProp = itemProp.value;
+
+  if (hasModifyKey(eventData)) {
+    if (dynamicKey) {
+      props.model[eventData.modifyKey!] = value;
+    } else if (isValidName()) {
+      props.model[name.value][eventData.modifyKey!] = value;
+    }
+
+    valueProp = valueProp ? `${valueProp}.${eventData.modifyKey}` : eventData.modifyKey!;
+
+    // 需要清除掉modifyKey，不然往上层抛出后还会被认为需要修改
+    delete eventData.modifyKey;
+  } else if (isValidName() && props.model !== value && (v !== value || props.model[name.value] !== value)) {
+    // field内容下包含field-link时，model===value, 这里避免循环引用
     // eslint-disable-next-line vue/no-mutating-props
-    props.model[name] = value;
+    props.model[name.value] = value;
   }
-  // 动态表单类型，根据value和key参数，直接修改model
-  if (key !== undefined && dynamicKey) {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.model[key] = value;
+
+  if (changeRecords.length === 0) {
+    newChangeRecords.push({
+      propPath: valueProp,
+      value,
+    });
   }
-  emit('change', props.model);
+
+  emit('change', props.model, {
+    ...eventData,
+    changeRecords: newChangeRecords,
+  });
 };
 </script>

package/src/containers/Fieldset.vue

@@ -6,7 +6,7 @@
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
         :true-value="1"
         :false-value="0"
-        @update:modelValue="change"
+        @update:modelValue="valueChangeHandler"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></TMagicCheckbox>
     </component>
@@ -29,7 +29,7 @@
           :disabled="disabled"
           :labelWidth="lWidth"
           :size="size"
-          @change="change"
+          @change="changeHandler"
           @add-diff-count="onAddDiffCount()"
         ></Container>
       </div>
@@ -50,7 +50,7 @@
         :labelWidth="lWidth"
         :size="size"
         :disabled="disabled"
-        @change="change"
+        @change="changeHandler"
         @addDiffCount="onAddDiffCount()"
       ></Container>
     </template>
@@ -62,7 +62,7 @@ import { computed, inject } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
 
-import { FieldsetConfig, FormState } from '../schema';
+import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema';
 
 import Container from './Container.vue';
 
@@ -90,7 +90,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -110,10 +113,12 @@ const lWidth = computed(() => {
   return props.config.labelWidth || props.labelWidth || (props.config.text ? undefined : '0');
 });
 
-const change = () => {
-  emit('change', props.model);
+const valueChangeHandler = (value: number | boolean) => {
+  emit('change', value, { modifyKey: 'value' });
 };
 
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => emit('change', v, eventData);
+
 const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
 
 const onAddDiffCount = () => emit('addDiffCount');

package/src/containers/GroupList.vue

@@ -25,7 +25,14 @@
       @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
-    <TMagicButton @click="addHandler" type="primary" :disabled="disabled" v-if="addable">新增</TMagicButton>
+    <TMagicButton
+      v-if="addable"
+      type="primary"
+      :size="config.enableToggleMode ? 'small' : 'default'"
+      :disabled="disabled"
+      @click="addHandler"
+      >新增</TMagicButton
+    >
 
     <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
   </div>
@@ -37,7 +44,7 @@ import { Grid } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
 
-import { FormState, GroupListConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
 import { initValue } from '../utils/form';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
@@ -58,7 +65,10 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -77,10 +87,8 @@ const addable = computed(() => {
   return typeof props.config.addable === 'undefined' ? true : props.config.addable;
 });
 
-const changeHandler = () => {
-  if (!props.name) return false;
-
-  emit('change', props.model[props.name]);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
 };
 
 const addHandler = async () => {
@@ -105,14 +113,22 @@ const addHandler = async () => {
   });
 
   props.model[props.name].push(groupValue);
-  changeHandler();
+
+  emit('change', props.model[props.name], {
+    changeRecords: [
+      {
+        propPath: `${props.prop}.${props.model[props.name].length - 1}`,
+        value: groupValue,
+      },
+    ],
+  });
 };
 
 const removeHandler = (index: number) => {
   if (!props.name) return false;
 
   props.model[props.name].splice(index, 1);
-  changeHandler();
+  emit('change', props.model[props.name]);
 };
 
 const swapHandler = (idx1: number, idx2: number) => {
@@ -120,7 +136,7 @@ const swapHandler = (idx1: number, idx2: number) => {
 
   const [currRow] = props.model[props.name].splice(idx1, 1);
   props.model[props.name].splice(idx2, 0, currRow);
-  changeHandler();
+  emit('change', props.model[props.name]);
 };
 
 const toggleMode = () => {

package/src/containers/GroupListItem.vue

@@ -48,7 +48,7 @@ import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-v
 
 import { TMagicButton, TMagicIcon } from '@tmagic/design';
 
-import { FormState, GroupListConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
@@ -103,7 +103,9 @@ const itemExtra = computed(() => filterFunction(mForm, props.config.itemExtra, p
 
 const removeHandler = () => emit('remove-item', props.index);
 
-const changeHandler = () => emit('change');
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
 
 const expandHandler = () => {
   expand.value = !expand.value;

package/src/containers/Panel.vue

@@ -63,7 +63,7 @@ import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicCard } from '@tmagic/design';
 
-import { FormState, PanelConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, PanelConfig } from '../schema';
 import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
@@ -84,7 +84,10 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -94,6 +97,8 @@ const items = computed(() => props.config.items);
 
 const filter = (config: any) => filterFunction(mForm, config, props);
 
-const changeHandler = () => emit('change', props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
 const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Row.vue

@@ -24,7 +24,7 @@ import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';
 
-import { FormState, RowConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, RowConfig } from '../schema';
 
 import Col from './Col.vue';
 
@@ -45,10 +45,15 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
-const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.name ? props.model[props.name] : props.model, eventData);
+};
 const onAddDiffCount = () => emit('addDiffCount');
 </script>