@tmagic/form 1.8.0-beta.24 → 1.8.0-beta.26

package/src/containers/Container.vue

@@ -19,6 +19,7 @@
       :step-active="stepActive"
       :expand-more="expand"
       :label-width="itemLabelWidth"
+      :label-position="itemLabelPosition"
       :style="config.fieldStyle"
       @change="onChangeHandler"
       @addDiffCount="onAddDiffCount"
@@ -27,15 +28,7 @@
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
         <template #label>
-          <slot
-            v-if="shouldRenderLeafField"
-            name="label"
-            :config="config"
-            :type="type"
-            :text="text"
-            :prop="itemProp"
-            :disabled="disabled"
-          >
+          <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
             <FormLabel
               :tip="config.tip"
               :type="type"
@@ -43,31 +36,14 @@
               :label-title="config.labelTitle"
               :text="text"
             ></FormLabel>
-            <span class="m-form-tip m-form-title-extra" v-if="config.titleExtra && config.labelPosition === 'top'">
+            <span class="m-form-tip m-form-title-extra" v-if="config.titleExtra && itemLabelPosition === 'top'">
               {{ config.titleExtra }}</span
             >
           </slot>
         </template>
 
-        <!-- 静默校验时只保留 FormItem：校验依赖其 prop / rules 与 model 值，与字段组件实例无关 -->
-        <template v-if="shouldRenderLeafField">
-          <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
-            <component
-              v-bind="fieldsProps"
-              :is="tagName"
-              :model="model"
-              :last-values="lastValues"
-              :is-compare="isCompare"
-              @change="onChangeHandler"
-              @addDiffCount="onAddDiffCount"
-            ></component>
-            <template #content>
-              <div v-html="tooltip.text"></div>
-            </template>
-          </TMagicTooltip>
-
+        <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component
-            v-else
             v-bind="fieldsProps"
             :is="tagName"
             :model="model"
@@ -76,13 +52,24 @@
             @change="onChangeHandler"
             @addDiffCount="onAddDiffCount"
           ></component>
-        </template>
+          <template #content>
+            <div v-html="tooltip.text"></div>
+          </template>
+        </TMagicTooltip>
+
+        <component
+          v-else
+          v-bind="fieldsProps"
+          :is="tagName"
+          :model="model"
+          :last-values="lastValues"
+          :is-compare="isCompare"
+          @change="onChangeHandler"
+          @addDiffCount="onAddDiffCount"
+        ></component>
       </TMagicFormItem>
 
-      <TMagicTooltip
-        v-if="shouldRenderLeafField && config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel"
-        placement="top"
-      >
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -102,15 +89,7 @@
         }"
       >
         <template #label>
-          <slot
-            v-if="shouldRenderLeafField"
-            name="label"
-            :config="config"
-            :type="type"
-            :text="text"
-            :prop="itemProp"
-            :disabled="disabled"
-          >
+          <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
             <FormLabel
               :tip="config.tip"
               :type="type"
@@ -120,23 +99,9 @@
             ></FormLabel>
           </slot>
         </template>
-        <template v-if="shouldRenderLeafField">
-          <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
-            <component
-              v-bind="fieldsProps"
-              :is="tagName"
-              :model="model"
-              :last-values="lastValues"
-              :is-compare="isCompare"
-              @change="onChangeHandler"
-            ></component>
-            <template #content>
-              <div v-html="tooltip.text"></div>
-            </template>
-          </TMagicTooltip>
 
+        <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component
-            v-else
             v-bind="fieldsProps"
             :is="tagName"
             :model="model"
@@ -144,7 +109,20 @@
             :is-compare="isCompare"
             @change="onChangeHandler"
           ></component>
-        </template>
+          <template #content>
+            <div v-html="tooltip.text"></div>
+          </template>
+        </TMagicTooltip>
+
+        <component
+          v-else
+          v-bind="fieldsProps"
+          :is="tagName"
+          :model="model"
+          :last-values="lastValues"
+          :is-compare="isCompare"
+          @change="onChangeHandler"
+        ></component>
       </TMagicFormItem>
 
       <!-- 普通字段：渲染前后两份独立的组件用于对比 -->
@@ -155,15 +133,7 @@
           :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-before-diff': true }"
         >
           <template #label>
-            <slot
-              v-if="shouldRenderLeafField"
-              name="label"
-              :config="config"
-              :type="type"
-              :text="text"
-              :prop="itemProp"
-              :disabled="disabled"
-            >
+            <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
               <FormLabel
                 :tip="config.tip"
                 :type="type"
@@ -173,28 +143,24 @@
               ></FormLabel>
             </slot>
           </template>
-          <template v-if="shouldRenderLeafField">
-            <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.text"></div>
-              </template>
-            </TMagicTooltip>
-
-            <component
-              v-else
-              v-bind="fieldsProps"
-              :is="tagName"
-              :model="lastValues"
-              @change="onChangeHandler"
-            ></component>
-          </template>
+
+          <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.text"></div>
+            </template>
+          </TMagicTooltip>
+
+          <component
+            v-else
+            v-bind="fieldsProps"
+            :is="tagName"
+            :model="lastValues"
+            @change="onChangeHandler"
+          ></component>
         </TMagicFormItem>
 
-        <TMagicTooltip
-          v-if="shouldRenderLeafField && config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel"
-          placement="top"
-        >
+        <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
           <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
           <template #content>
             <div v-html="config.tip"></div>
@@ -208,15 +174,7 @@
           :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-after-diff': true }"
         >
           <template #label>
-            <slot
-              v-if="shouldRenderLeafField"
-              name="label"
-              :config="config"
-              :type="type"
-              :text="text"
-              :prop="itemProp"
-              :disabled="disabled"
-            >
+            <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
               <FormLabel
                 :tip="config.tip"
                 :type="type"
@@ -226,22 +184,18 @@
               ></FormLabel>
             </slot>
           </template>
-          <template v-if="shouldRenderLeafField">
-            <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.text"></div>
-              </template>
-            </TMagicTooltip>
-
-            <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
-          </template>
+
+          <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.text"></div>
+            </template>
+          </TMagicTooltip>
+
+          <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
         </TMagicFormItem>
 
-        <TMagicTooltip
-          v-if="shouldRenderLeafField && config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel"
-          placement="top"
-        >
+        <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
           <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
           <template #content>
             <div v-html="config.tip"></div>
@@ -264,6 +218,7 @@
           :step-active="stepActive"
           :expand-more="expand"
           :label-width="itemLabelWidth"
+          :label-position="itemLabelPosition"
           :prop="itemProp"
           @change="onChangeHandler"
           @addDiffCount="onAddDiffCount"
@@ -310,10 +265,17 @@ import type {
   FormValue,
   ToolTipConfigType,
 } from '../schema';
-import { FORM_DIFF_CONFIG_KEY, FORM_SILENT_MODE_KEY, FORM_TYPE_MATCH_VALID_KEY } from '../schema';
-import { getField } from '../utils/config';
-import { createObjectProp, display as displayFunction, filterFunction, getRules } from '../utils/form';
-import { getSilentLeafFieldTypes } from '../utils/silentLeafFieldTypes';
+import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from '../schema';
+import {
+  createObjectProp,
+  display as displayFunction,
+  filterFunction,
+  getItemProp,
+  getRules,
+  isValidName as isValidNameOf,
+  resolveItemType,
+} from '../utils/form';
+import { getField } from '../utils/registerField';
 
 import FormLabel from './FormLabel.vue';
 
@@ -333,6 +295,7 @@ const props = withDefaults(
     prop?: string;
     disabled?: boolean;
     labelWidth?: string | number;
+    labelPosition?: 'top' | 'left' | 'right';
     expandMore?: boolean;
     stepActive?: string | number;
     size?: string;
@@ -388,30 +351,14 @@ const showDiff = computed(() => {
 
 const items = computed(() => (props.config as ContainerCommonConfig).items);
 
-const itemProp = computed(() => {
-  let n: string | number = '';
-  if (name.value) {
-    n = name.value;
-  } else {
-    return props.prop;
-  }
+const itemProp = computed(() => getItemProp(props.prop, name.value));
 
-  if (typeof props.prop !== 'undefined' && props.prop !== '') {
-    return `${props.prop}.${n}`;
-  }
-
-  return `${n}`;
-});
-
-const type = computed((): string => {
-  let type = 'type' in props.config ? props.config.type : '';
-  type = type && filterFunction<string>(mForm, type, props);
-  if (type === 'form') return '';
-  if (type === 'container') return '';
-  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
-});
+const type = computed((): string => resolveItemType(mForm, props.config, props));
 
 const tagName = computed(() => {
+  // `type: 'component'` 把任意 Vue 组件当字段渲染。无渲染校验把它当叶子、不遍历内部结构，
+  // 因此该组件不得再向父表单注册 FormItem（不要在内部挂会 addField 的 MContainer）。
+  // 需要嵌套表单项时，应对该具体组件 registerField(type, { innerConfig })。
   if (type.value === 'component' && (props.config as ComponentConfig).component) {
     return (props.config as ComponentConfig).component;
   }
@@ -458,11 +405,6 @@ const effectiveSelfDiffFieldTypes = computed<Set<string>>(() => {
 
 const isSelfDiffField = computed(() => effectiveSelfDiffFieldTypes.value.has(type.value));
 
-// 静默模式下仅白名单叶子字段跳过渲染；扩展字段通过 registerSilentLeafFieldTypes 注册
-const silentMode = inject(FORM_SILENT_MODE_KEY, false);
-
-const shouldRenderLeafField = computed(() => !silentMode || !getSilentLeafFieldTypes().has(type.value));
-
 const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 
 const text = computed(() => filterFunction(mForm, props.config.text, props));
@@ -506,7 +448,7 @@ const fieldsProps = computed(() => ({
 const formItemProps = computed(() => ({
   prop: itemProp.value,
   labelWidth: itemLabelWidth.value,
-  labelPosition: props.config.labelPosition,
+  labelPosition: itemLabelPosition.value,
 
   rules: rule.value,
   extra: filterFunction(mForm, props.config.extra, props),
@@ -515,6 +457,8 @@ const formItemProps = computed(() => ({
 
 const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
 
+const itemLabelPosition = computed(() => props.config.labelPosition ?? props.labelPosition);
+
 watchEffect(() => {
   expand.value = props.expandMore;
 });
@@ -571,22 +515,7 @@ const onAddDiffCount = () => emit('addDiffCount');
 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 isValidName = () => isValidNameOf(name.value);
 
 const createModelProxy = (
   target: any,

package/src/containers/Fieldset.vue

@@ -28,6 +28,7 @@
           :prop="prop"
           :disabled="disabled"
           :labelWidth="lWidth"
+          :labelPosition="lPosition"
           :size="size"
           @change="changeHandler"
           @add-diff-count="onAddDiffCount()"
@@ -48,6 +49,7 @@
         :config="item"
         :prop="prop"
         :labelWidth="lWidth"
+        :labelPosition="lPosition"
         :size="size"
         :disabled="disabled"
         @change="changeHandler"
@@ -74,6 +76,7 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     labelWidth?: string;
+    labelPosition?: 'top' | 'left' | 'right';
     prop: string;
     size?: string;
     model: Record<string, any>;
@@ -140,6 +143,8 @@ const lWidth = computed(() => {
   return props.config.labelWidth || props.labelWidth || (props.config.text ? undefined : '0');
 });
 
+const lPosition = computed(() => props.config.labelPosition || props.labelPosition);
+
 const valueChangeHandler = (value: number | boolean) => {
   emit('change', value, { modifyKey: checkboxName.value });
 };

package/src/containers/FlexLayout.vue

@@ -11,6 +11,7 @@
       :size="size"
       :disabled="disabled"
       :label-width="config.labelWidth || labelWidth"
+      :label-position="config.labelPosition || labelPosition"
       @change="changeHandler"
       @addDiffCount="onAddDiffCount()"
     />
@@ -37,6 +38,7 @@ const props = defineProps<{
   config: FlexLayoutConfig;
   name?: string;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   disabled?: boolean;

package/src/containers/GroupList.vue

@@ -1,32 +1,41 @@
 <template>
   <div class="m-fields-group-list">
     <div v-if="config.extra" v-html="config.extra" style="color: rgba(0, 0, 0, 0.45)"></div>
-    <div v-if="!model[name] || !model[name].length" class="el-table__empty-block">
+    <div v-if="!displayItems.length" class="el-table__empty-block">
       <span class="el-table__empty-text t-table__empty">暂无{{ config.titlePrefix || '' }}数据</span>
     </div>
 
     <MFieldsGroupListItem
       v-else
-      v-for="(item, index) in model[name]"
-      :key="index"
-      :model="item"
-      :lastValues="getLastValues(lastValues?.[name], Number(index))"
+      v-for="entry in displayItems"
+      :key="entry.index"
+      :model="entry.item"
+      :lastValues="entry.last"
       :is-compare="isCompare"
       :config="config"
       :prop="prop"
-      :index="Number(index)"
+      :index="entry.index"
       :label-width="labelWidth"
+      :label-position="labelPosition"
       :size="size"
       :disabled="disabled"
-      :group-model="model[name]"
+      :group-model="currentList"
       @remove-item="removeHandler"
       @copy-item="copyHandler"
       @swap-item="swapHandler"
       @change="changeHandler"
       @addDiffCount="onAddDiffCount()"
-    ></MFieldsGroupListItem>
-
-    <div class="m-fields-group-list-footer" v-if="!isCompare">
+    >
+      <template #title="slotProps" v-if="$slots.title">
+        <slot name="title" v-bind="slotProps"></slot>
+      </template>
+    </MFieldsGroupListItem>
+
+    <div
+      class="m-fields-group-list-footer"
+      :class="{ 'is-sticky-full': Boolean(config.addButtonConfig?.sticky) }"
+      v-if="!isCompare && ($slots['toggle-button'] || $slots['add-button'])"
+    >
       <slot name="toggle-button"></slot>
       <div style="display: flex; justify-content: flex-end; flex: 1">
         <slot name="add-button"></slot>
@@ -36,6 +45,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { ContainerChangeEventData, GroupListConfig } from '../schema';
@@ -53,6 +63,7 @@ const props = defineProps<{
   config: GroupListConfig;
   name: string;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   disabled?: boolean;
@@ -91,5 +102,24 @@ const swapHandler = (idx1: number, idx2: number) => {
 
 const onAddDiffCount = () => emit('addDiffCount');
 
-const getLastValues = (item: any, index: number) => item?.[index] || {};
+const asList = (value: unknown): any[] => (Array.isArray(value) ? value : []);
+
+const currentList = computed(() => asList(props.model[props.name]));
+
+/** 对比时按当前/历史较长一侧对齐，已删除的项也能渲染出来 */
+const displayItems = computed(() => {
+  const current = currentList.value;
+
+  if (!props.isCompare) {
+    return current.map((item, index) => ({ item: item ?? {}, last: {}, index }));
+  }
+
+  const last = asList(props.lastValues?.[props.name]);
+
+  return Array.from({ length: Math.max(current.length, last.length) }, (_, index) => ({
+    item: current[index] ?? {},
+    last: last[index] ?? {},
+    index,
+  }));
+});
 </script>