@tmagic/form 1.5.0-beta.9 → 1.5.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.9",
+  "version": "1.5.0",
   "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.9",
-    "@tmagic/utils": "1.5.0-beta.9"
+    "@tmagic/design": "1.5.0",
+    "@tmagic/utils": "1.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -7,6 +7,7 @@
     :style="`height: ${height}`"
     :inline="inline"
     :label-position="labelPosition"
+    @submit="submitHandler"
   >
     <template v-if="initialized && Array.isArray(config)">
       <Container
@@ -27,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',
@@ -61,6 +62,7 @@ const props = withDefaults(
     labelPosition?: string;
     keyProp?: string;
     popperClass?: string;
+    preventSubmitDefault?: boolean;
     extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
@@ -79,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);
@@ -104,11 +106,13 @@ 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({
-        ...options,
         method: 'POST',
+        ...options,
       });
     }
   },
@@ -133,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;
     }
@@ -163,8 +171,17 @@ 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) => {
+  if (props.preventSubmitDefault) {
+    e.preventDefault();
+  }
 };
 
 defineExpose({
@@ -172,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

@@ -12,6 +12,7 @@
           :label-width="labelWidth"
           :label-position="labelPosition"
           :inline="inline"
+          :prevent-submit-default="preventSubmitDefault"
           @change="changeHandler"
         ></Form>
         <slot></slot>
@@ -39,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',
@@ -58,6 +59,7 @@ const props = withDefaults(
     confirmText?: string;
     inline?: boolean;
     labelPosition?: string;
+    preventSubmitDefault?: boolean;
   }>(),
   {
     config: () => [],
@@ -66,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;
 
@@ -96,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

@@ -27,6 +27,7 @@
         :label-width="labelWidth"
         :label-position="labelPosition"
         :inline="inline"
+        :prevent-submit-default="preventSubmitDefault"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -64,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',
@@ -85,6 +86,7 @@ const props = withDefaults(
     zIndex?: number;
     size?: 'small' | 'default' | 'large';
     confirmText?: string;
+    preventSubmitDefault?: boolean;
   }>(),
   {
     config: () => [],
@@ -130,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);
   }
@@ -144,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

@@ -27,6 +27,7 @@
         :label-width="labelWidth"
         :label-position="labelPosition"
         :inline="inline"
+        :prevent-submit-default="preventSubmitDefault"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -58,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',
@@ -79,6 +80,7 @@ withDefaults(
     confirmText?: string;
     inline?: boolean;
     labelPosition?: string;
+    preventSubmitDefault?: boolean;
     /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
     beforeClose?: (done: (cancel?: boolean) => void) => void;
   }>(),
@@ -108,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

@@ -37,7 +37,7 @@
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
@@ -93,7 +93,7 @@
       <!-- 上次内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
@@ -142,7 +142,7 @@
       <!-- 当前内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
@@ -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

@@ -1,16 +1,12 @@
 <template>
-  <fieldset
-    v-if="name ? model[name] : model"
-    class="m-fieldset"
-    :style="show ? 'padding: 15px 15px 0 5px;' : 'border: 0'"
-  >
+  <fieldset v-if="name ? model[name] : model" class="m-fieldset" :style="show ? 'padding: 15px' : 'border: 0'">
     <component v-if="name && config.checkbox" :is="!show ? 'div' : 'legend'">
       <TMagicCheckbox
         v-model="model[name].value"
         :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>
@@ -33,7 +29,7 @@
           :disabled="disabled"
           :labelWidth="lWidth"
           :size="size"
-          @change="change"
+          @change="changeHandler"
           @add-diff-count="onAddDiffCount()"
         ></Container>
       </div>
@@ -54,7 +50,7 @@
         :labelWidth="lWidth"
         :size="size"
         :disabled="disabled"
-        @change="change"
+        @change="changeHandler"
         @addDiffCount="onAddDiffCount()"
       ></Container>
     </template>
@@ -66,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';
 
@@ -94,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');
 
@@ -114,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" size="small" :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 = () => {