@tmagic/form 1.6.0 → 1.7.0-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.7.0-beta.0",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -49,11 +49,11 @@
     "@vue/test-utils": "^2.4.6"
   },
   "peerDependencies": {
-    "vue": "^3.5.20",
-    "typescript": "^5.9.2",
-    "@tmagic/form-schema": "1.6.0",
-    "@tmagic/design": "1.6.0",
-    "@tmagic/utils": "1.6.0"
+    "vue": "^3.5.22",
+    "typescript": "^5.9.3",
+    "@tmagic/design": "1.7.0-beta.0",
+    "@tmagic/form-schema": "1.7.0-beta.0",
+    "@tmagic/utils": "1.7.0-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -28,10 +28,11 @@
 </template>
 
 <script setup lang="ts">
-import { provide, reactive, ref, shallowRef, toRaw, watch, watchEffect } from 'vue';
+import { provide, reactive, ref, shallowRef, toRaw, useTemplateRef, watch, watchEffect } from 'vue';
 import { cloneDeep, isEqual } from 'lodash-es';
 
 import { TMagicForm, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import { setValueByKeyPath } from '@tmagic/utils';
 
 import Container from './containers/Container.vue';
 import { getConfig } from './utils/config';
@@ -83,7 +84,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['change', 'error', 'field-input', 'field-change', 'update:stepActive']);
 
-const tMagicForm = ref<InstanceType<typeof TMagicForm>>();
+const tMagicFormRef = useTemplateRef('tMagicForm');
 const initialized = ref(false);
 const values = ref<FormValue>({});
 const lastValuesProcessed = ref<FormValue>({});
@@ -173,7 +174,18 @@ watch(
 
 const changeHandler = (v: FormValue, eventData: ContainerChangeEventData) => {
   if (eventData.changeRecords?.length) {
-    changeRecords.value.push(...eventData.changeRecords);
+    for (const record of eventData.changeRecords) {
+      if (record.propPath) {
+        const index = changeRecords.value.findIndex((item) => item.propPath === record.propPath);
+        if (index > -1) {
+          changeRecords.value[index] = record;
+        } else {
+          changeRecords.value.push(record);
+        }
+
+        setValueByKeyPath(record.propPath, record.value, values.value);
+      }
+    }
   }
   emit('change', values.value, eventData);
 };
@@ -194,13 +206,14 @@ defineExpose({
   changeHandler,
 
   resetForm: () => {
-    tMagicForm.value?.resetFields();
+    tMagicFormRef.value?.resetFields();
     changeRecords.value = [];
   },
 
   submitForm: async (native?: boolean): Promise<any> => {
     try {
-      await tMagicForm.value?.validate();
+      await tMagicFormRef.value?.validate();
+      changeRecords.value = [];
       return native ? values.value : cloneDeep(toRaw(values.value));
     } catch (invalidFields: any) {
       emit('error', invalidFields);

package/src/containers/Container.vue

@@ -1,84 +1,55 @@
 <template>
   <div
-    v-if="config"
     :data-tmagic-id="config.id"
     :data-tmagic-form-item-prop="itemProp"
-    :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
-    :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
+    :class="`m-form-container m-container-${type || ''} ${config.className || ''}${config.tip ? ' has-tip' : ''}`"
+    :style="config.style"
   >
-    <m-fields-hidden
-      v-if="type === 'hidden'"
-      :model="model"
-      :config="config"
-      :name="config.name"
-      :disabled="disabled"
-      :prop="itemProp"
-    ></m-fields-hidden>
+    <m-fields-hidden v-if="type === 'hidden'" v-bind="fieldsProps" :model="model"></m-fields-hidden>
 
     <component
       v-else-if="items && !text && type && display"
-      :key="key(config)"
-      :size="size"
+      v-bind="fieldsProps"
       :is="tagName"
       :model="model"
       :last-values="lastValues"
       :is-compare="isCompare"
-      :config="config"
-      :disabled="disabled"
-      :name="name"
-      :prop="itemProp"
       :step-active="stepActive"
       :expand-more="expand"
       :label-width="itemLabelWidth"
+      :style="config.fieldStyle"
       @change="onChangeHandler"
       @addDiffCount="onAddDiffCount"
     ></component>
 
     <template v-else-if="type && display && !showDiff">
-      <TMagicFormItem
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :label-position="config.labelPosition"
-        :rules="rule"
-      >
-        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
-        <TMagicTooltip v-if="tooltip">
+      <TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
+        <template #label
+          ><span v-html="type === 'checkbox' && !config.useLabel ? '' : text" :title="config.labelTitle"></span
+        ></template>
+        <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component
-            :key="key(config)"
-            :size="size"
+            v-bind="fieldsProps"
             :is="tagName"
             :model="model"
             :last-values="lastValues"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
             @change="onChangeHandler"
             @addDiffCount="onAddDiffCount"
           ></component>
           <template #content>
-            <div v-html="tooltip"></div>
+            <div v-html="tooltip.text"></div>
           </template>
         </TMagicTooltip>
 
         <component
           v-else
-          :key="key(config)"
-          :size="size"
+          v-bind="fieldsProps"
           :is="tagName"
           :model="model"
           :last-values="lastValues"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
           @change="onChangeHandler"
           @addDiffCount="onAddDiffCount"
         ></component>
-
-        <div v-if="extra && type !== 'table'" v-html="extra" class="m-form-tip"></div>
       </TMagicFormItem>
 
       <TMagicTooltip v-if="config.tip" placement="left">
@@ -93,46 +64,18 @@
     <template v-else-if="type && display && showDiff">
       <!-- 上次内容 -->
       <TMagicFormItem
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :label-position="config.labelPosition"
-        :rules="rule"
-        style="background: #f7dadd"
+        v-bind="formItemProps"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
-        <TMagicTooltip v-if="tooltip">
-          <component
-            :key="key(config)"
-            :size="size"
-            :is="tagName"
-            :model="lastValues"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
-            @change="onChangeHandler"
-          ></component>
+        <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
+          <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
           <template #content>
-            <div v-html="tooltip"></div>
+            <div v-html="tooltip.text"></div>
           </template>
         </TMagicTooltip>
 
-        <component
-          v-else
-          :key="key(config)"
-          :size="size"
-          :is="tagName"
-          :model="lastValues"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
-          @change="onChangeHandler"
-        ></component>
-
-        <div v-if="extra" v-html="extra" class="m-form-tip"></div>
+        <component v-else v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
       </TMagicFormItem>
 
       <TMagicTooltip v-if="config.tip" placement="left">
@@ -141,48 +84,22 @@
           <div v-html="config.tip"></div>
         </template>
       </TMagicTooltip>
+
       <!-- 当前内容 -->
       <TMagicFormItem
+        v-bind="formItemProps"
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :label-position="config.labelPosition"
-        :rules="rule"
-        style="background: #def7da"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
-        <TMagicTooltip v-if="tooltip">
-          <component
-            :key="key(config)"
-            :size="size"
-            :is="tagName"
-            :model="model"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
-            @change="onChangeHandler"
-          ></component>
+        <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
+          <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
           <template #content>
-            <div v-html="tooltip"></div>
+            <div v-html="tooltip.text"></div>
           </template>
         </TMagicTooltip>
 
-        <component
-          v-else
-          :key="key(config)"
-          :size="size"
-          :is="tagName"
-          :model="model"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
-          @change="onChangeHandler"
-        ></component>
-
-        <div v-if="extra" v-html="extra" class="m-form-tip"></div>
+        <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
       </TMagicFormItem>
 
       <TMagicTooltip v-if="config.tip" placement="left">
@@ -223,14 +140,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, toRaw, watch, watchEffect } from 'vue';
+import { computed, inject, readonly, 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 { setValueByKeyPath } from '@tmagic/utils';
-
-import type { ChildConfig, ContainerChangeEventData, ContainerCommonConfig, FormState, FormValue } from '../schema';
+import { getValueByKeyPath } from '@tmagic/utils';
+
+import type {
+  ChildConfig,
+  ContainerChangeEventData,
+  ContainerCommonConfig,
+  FormState,
+  FormValue,
+  ToolTipConfigType,
+} from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
 defineOptions({
@@ -311,9 +235,20 @@ const disabled = computed(() => props.disabled || filterFunction(mForm, props.co
 
 const text = computed(() => filterFunction(mForm, props.config.text, props));
 
-const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
+const tooltip = computed(() => {
+  const config = filterFunction<ToolTipConfigType>(mForm, props.config.tooltip, props);
+  if (typeof config === 'string') {
+    return {
+      text: config,
+      placement: 'top',
+    };
+  }
 
-const extra = computed(() => filterFunction(mForm, props.config.extra, props));
+  return {
+    text: config?.text,
+    placement: config?.placement || 'top',
+  };
+});
 
 const rule = computed(() => getRules(mForm, props.config.rules, props));
 
@@ -334,6 +269,24 @@ const display = computed((): boolean => {
   return value;
 });
 
+const fieldsProps = computed(() => ({
+  size: props.size,
+  config: props.config,
+  name: name.value,
+  disabled: disabled.value,
+  prop: itemProp.value,
+  key: props.config[mForm?.keyProps],
+  style: props.config.fieldStyle,
+}));
+
+const formItemProps = computed(() => ({
+  prop: itemProp.value,
+  labelWidth: itemLabelWidth.value,
+  labelPosition: props.config.labelPosition,
+  rules: rule.value,
+  extra: filterFunction(mForm, props.config.extra, props),
+}));
+
 const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
 
 watchEffect(() => {
@@ -367,6 +320,7 @@ const filterHandler = (filter: any, value: FormValue | number | string) => {
       formValue: mForm?.values,
       prop: itemProp.value,
       config: props.config,
+      getFormValue: (prop: string) => getValueByKeyPath(prop, mForm?.values || props.model),
     });
   }
 
@@ -406,8 +360,29 @@ const isValidName = () => {
   return true;
 };
 
+const createModelProxy = (
+  target: any,
+  setModelFn: (_key: string, _value: any) => void,
+  pathPrefix: string = '',
+): any => {
+  return new Proxy(target, {
+    get: (obj, key: string) => {
+      const value = obj[key];
+      if (value && typeof value === 'object') {
+        const newPath = pathPrefix ? `${pathPrefix}.${key}` : key;
+        return createModelProxy(value, setModelFn, newPath);
+      }
+      return value;
+    },
+    set: (obj, key: string, value) => {
+      setModelFn(pathPrefix ? `${pathPrefix}.${key}` : key, value);
+      return true;
+    },
+  });
+};
+
 const onChangeHandler = async function (v: any, eventData: ContainerChangeEventData = {}) {
-  const { filter, onChange, trim, dynamicKey } = props.config as any;
+  const { filter, onChange, trim } = props.config as any;
   let value: FormValue | number | string | any[] = toRaw(v);
   const changeRecords = eventData.changeRecords || [];
   const newChangeRecords = [...changeRecords];
@@ -416,20 +391,29 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
     value = filterHandler(filter, v);
 
     if (typeof onChange === 'function') {
+      const setModel = (key: string, value: any) => {
+        if (props.config.name) {
+          newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key), value });
+        } else {
+          newChangeRecords.push({ propPath: itemProp.value, value });
+        }
+      };
+
+      const setFormValue = (key: string, value: any) => {
+        newChangeRecords.push({ propPath: key, value });
+      };
+
       value =
         (await onChange(mForm, value, {
-          model: props.model,
-          values: mForm?.initValues,
-          formValue: mForm?.values,
+          model: createModelProxy(props.model, setModel),
+          values: mForm ? readonly(mForm.initValues) : null,
+          formValue: createModelProxy(mForm?.values || {}, setFormValue),
           prop: itemProp.value,
           config: props.config,
           changeRecords: newChangeRecords,
-          setModel: (key: string, value: any) => {
-            setValueByKeyPath(key, value, props.model);
-            if (props.config.name) {
-              newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key), value });
-            }
-          },
+          setModel,
+          setFormValue,
+          getFormValue: (prop: string) => getValueByKeyPath(prop, mForm?.values || props.model),
         })) ?? value;
     }
     value = trimHandler(trim, value) ?? value;
@@ -440,19 +424,10 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
   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, 这里避免循环引用
-    props.model[name.value] = value;
   }
 
   if (changeRecords.length === 0) {

package/src/containers/Fieldset.vue

@@ -2,10 +2,10 @@
   <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"
+        :model-value="(name ? model[name] : model)[checkboxName]"
+        :prop="`${prop}${prop ? '.' : ''}${config.name}.${checkboxName}`"
+        :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
       ></TMagicCheckbox>
@@ -99,9 +99,33 @@ const mForm = inject<FormState | undefined>('mForm');
 
 const name = computed(() => props.config.name || '');
 
+const checkboxName = computed(() => {
+  if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') {
+    return props.config.checkbox.name;
+  }
+
+  return 'value';
+});
+
+const checkboxTrueValue = computed(() => {
+  if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.trueValue !== 'undefined') {
+    return props.config.checkbox.trueValue;
+  }
+
+  return 1;
+});
+
+const checkboxFalseValue = computed(() => {
+  if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.falseValue !== 'undefined') {
+    return props.config.checkbox.falseValue;
+  }
+
+  return 0;
+});
+
 const show = computed(() => {
-  if (props.config.expand && name.value) {
-    return props.model[name.value]?.value;
+  if (props.config.expand && checkboxName.value) {
+    return (name.value ? props.model[name.value] : props.model)?.[checkboxName.value] === checkboxTrueValue.value;
   }
   return true;
 });
@@ -114,7 +138,7 @@ const lWidth = computed(() => {
 });
 
 const valueChangeHandler = (value: number | boolean) => {
-  emit('change', value, { modifyKey: 'value' });
+  emit('change', value, { modifyKey: checkboxName.value });
 };
 
 const changeHandler = (v: any, eventData: ContainerChangeEventData) => emit('change', v, eventData);

package/src/containers/FlexLayout.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="m-form-flex-layout" :style="{ display: 'flex', flexWrap: 'wrap', gap }">
+    <Container
+      v-for="(item, index) in config.items"
+      :key="(item as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
+      :config="item"
+      :model="name ? model[name] : model"
+      :lastValues="name ? lastValues[name] : lastValues"
+      :is-compare="isCompare"
+      :prop="prop"
+      :size="size"
+      :disabled="disabled"
+      :label-width="config.labelWidth || labelWidth"
+      @change="changeHandler"
+      @addDiffCount="onAddDiffCount()"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import type { FlexLayoutConfig } from '@tmagic/form-schema';
+
+import type { ContainerChangeEventData, FormState } from '../schema';
+
+import Container from './Container.vue';
+
+defineOptions({
+  name: 'MFormFlexLayout',
+});
+
+const props = defineProps<{
+  model: any;
+  lastValues?: any;
+  isCompare?: boolean;
+  config: FlexLayoutConfig;
+  name?: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const gap = computed(() => props.config.gap || '16px');
+
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
+
+const onAddDiffCount = () => emit('addDiffCount');
+</script>

package/src/containers/Tabs.vue

@@ -167,7 +167,17 @@ watchEffect(() => {
 
 const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items);
 
-const tabClickHandler = (tab: any) => tabClick(mForm, tab, props);
+const tabClickHandler = (tab: any) => {
+  if (typeof tab === 'object') {
+    tabClick(mForm, tab, props);
+  } else {
+    let item = tabs.value.find((tab: any) => tab.status === tab);
+    if (!item) {
+      item = tabs.value[tab];
+    }
+    tabClick(mForm, item, props);
+  }
+};
 
 const onTabAdd = async () => {
   if (!props.name) throw new Error('dynamic tab 必须配置name');

package/src/fields/Cascader.vue

@@ -1,6 +1,6 @@
 <template>
   <TMagicCascader
-    v-model="value"
+    :model-value="value"
     ref="tMagicCascader"
     style="width: 100%"
     clearable
@@ -15,6 +15,7 @@
       emitPath: config.emitPath ?? true,
       checkStrictly: checkStrictly ?? false,
     }"
+    @update:model-value="updateModelValueHandler"
     @change="changeHandler"
   ></TMagicCascader>
 </template>
@@ -51,22 +52,31 @@ const remoteData = ref<any>(null);
 const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
 const valueSeparator = computed(() => filterFunction<string>(mForm, props.config.valueSeparator, props));
 
-const value = computed({
-  get() {
-    if (typeof props.model[props.name] === 'string' && valueSeparator.value) {
-      return props.model[props.name].split(valueSeparator.value);
-    }
-    return props.model[props.name];
-  },
-  set(value) {
-    let result = value;
-    if (valueSeparator.value) {
-      result = value.join(valueSeparator.value);
-    }
-    props.model[props.name] = result;
-  },
+const value = computed(() => {
+  if (typeof props.model[props.name] === 'string' && valueSeparator.value) {
+    return props.model[props.name].split(valueSeparator.value);
+  }
+  return props.model[props.name];
 });
 
+const updateModelValueHandler = (value: string[] | number[] | any) => {
+  let result = value;
+  if (valueSeparator.value) {
+    result = value.join(valueSeparator.value);
+  }
+
+  if (typeof result === 'undefined') {
+    if (Array.isArray(props.model[props.name])) {
+      emit('change', []);
+    } else if (typeof props.model[props.name] === 'string') {
+      emit('change', '');
+    } else if (typeof props.model[props.name] === 'object') {
+      emit('change', null);
+    }
+  }
+  emit('change', result);
+};
+
 const setRemoteOptions = async function () {
   const { config } = props;
   const { option } = config;
@@ -126,6 +136,5 @@ const changeHandler = () => {
   if (!tMagicCascader.value) return;
   tMagicCascader.value.setQuery('');
   tMagicCascader.value.setPreviousQuery(null);
-  emit('change', props.model[props.name]);
 };
 </script>