@tmagic/form 1.8.0-manmanyu.8 → 1.8.0

package/src/containers/Col.vue

@@ -7,11 +7,13 @@
       :config="config"
       :prop="prop"
       :label-width="config.labelWidth || labelWidth"
+      :label-position="config.labelPosition || labelPosition"
       :expand-more="expandMore"
       :size="size"
       :disabled="disabled"
       @change="changeHandler"
       @add-diff-count="onAddDiffCount"
+      :is-in-row="true"
     ></Container>
   </TMagicCol>
 </template>
@@ -36,6 +38,7 @@ const props = defineProps<{
   isCompare?: boolean;
   config: FormItemConfig;
   labelWidth?: string | number;
+  labelPosition?: 'top' | 'left' | 'right';
   expandMore?: boolean;
   span?: number;
   size?: string;

package/src/containers/Container.vue

@@ -5,7 +5,9 @@
     :class="`m-form-container m-container-${type || ''} ${config.className || ''}${config.tip ? ' has-tip' : ''}`"
     :style="config.style"
   >
-    <MHidden v-if="type === 'hidden'" :name="`${name}`" :prop="itemProp" :model="model"></MHidden>
+    <TMagicFormItem v-if="type === 'hidden'" v-bind="formItemProps" style="display: none">
+      <MHidden :name="`${name}`" :prop="itemProp" :model="model"></MHidden>
+    </TMagicFormItem>
 
     <component
       v-else-if="items && !text && type && display"
@@ -17,6 +19,7 @@
       :step-active="stepActive"
       :expand-more="expand"
       :label-width="itemLabelWidth"
+      :label-position="itemLabelPosition"
       :style="config.fieldStyle"
       @change="onChangeHandler"
       @addDiffCount="onAddDiffCount"
@@ -33,7 +36,7 @@
               :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>
@@ -96,6 +99,7 @@
             ></FormLabel>
           </slot>
         </template>
+
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component
             v-bind="fieldsProps"
@@ -139,6 +143,7 @@
               ></FormLabel>
             </slot>
           </template>
+
           <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
             <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
             <template #content>
@@ -179,6 +184,7 @@
               ></FormLabel>
             </slot>
           </template>
+
           <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
             <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
             <template #content>
@@ -212,6 +218,7 @@
           :step-active="stepActive"
           :expand-more="expand"
           :label-width="itemLabelWidth"
+          :label-position="itemLabelPosition"
           :prop="itemProp"
           @change="onChangeHandler"
           @addDiffCount="onAddDiffCount"
@@ -238,7 +245,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, readonly, ref, toRaw, watch, watchEffect } from 'vue';
+import { computed, inject, provide, readonly, ref, toRaw, watch, watchEffect } from 'vue';
 import { ArrowDown, ArrowUp, WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
 
@@ -258,9 +265,17 @@ import type {
   FormValue,
   ToolTipConfigType,
 } from '../schema';
-import { FORM_DIFF_CONFIG_KEY } from '../schema';
-import { getField } from '../utils/config';
-import { createObjectProp, display as displayFunction, filterFunction, getRules } from '../utils/form';
+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';
 
@@ -280,11 +295,14 @@ const props = withDefaults(
     prop?: string;
     disabled?: boolean;
     labelWidth?: string | number;
+    labelPosition?: 'top' | 'left' | 'right';
     expandMore?: boolean;
     stepActive?: string | number;
     size?: string;
     /** 是否开启对比模式 */
     isCompare?: boolean;
+    /** 是否在行容器中 */
+    isInRow?: boolean;
   }>(),
   {
     prop: '',
@@ -305,6 +323,8 @@ const mForm = inject<FormState | undefined>('mForm');
 // 对比相关配置由 MForm 通过 provide 下发，这里直接 inject，无需逐层透传 prop。
 const diffConfig = inject<FormDiffConfig>(FORM_DIFF_CONFIG_KEY, {});
 
+const typeMatchValid = inject(FORM_TYPE_MATCH_VALID_KEY);
+
 const expand = ref(false);
 
 const name = computed(() => props.config.name || '');
@@ -331,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;
-  }
-
-  if (typeof props.prop !== 'undefined' && props.prop !== '') {
-    return `${props.prop}.${n}`;
-  }
+const itemProp = computed(() => getItemProp(props.prop, name.value));
 
-  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;
   }
@@ -420,7 +424,7 @@ const tooltip = computed(() => {
   };
 });
 
-const rule = computed(() => getRules(mForm, props.config.rules, props));
+const rule = computed(() => getRules(mForm, props.config.rules, props, typeMatchValid));
 
 const display = computed((): boolean => {
   const value = displayFunction(mForm, props.config.display, props);
@@ -444,13 +448,17 @@ 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),
+  extraTips: props.config.extraTips,
 }));
 
 const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
 
+const itemLabelPosition = computed(() => props.config.labelPosition ?? props.labelPosition);
+
 watchEffect(() => {
   expand.value = props.expandMore;
 });
@@ -470,6 +478,8 @@ watch(
   },
 );
 
+provide('isInRow', props.isInRow ?? false);
+
 const expandHandler = () => (expand.value = !expand.value);
 
 const key = (config: any) => config[mForm?.keyProps];
@@ -505,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,48 @@
 <template>
-  <div class="m-fields-group-list">
+  <div
+    class="m-fields-group-list"
+    :class="{
+      'is-header-sticky': Boolean(config.header?.sticky),
+      'is-footer-sticky': isFooterSticky($slots),
+    }"
+    :style="headerVars"
+  >
     <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">
-      <span class="el-table__empty-text t-table__empty">暂无数据</span>
+    <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="hasFooter($slots)"
+    >
       <slot name="toggle-button"></slot>
       <div style="display: flex; justify-content: flex-end; flex: 1">
         <slot name="add-button"></slot>
@@ -36,9 +52,11 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { ContainerChangeEventData, GroupListConfig } from '../schema';
+import { getGroupListHeaderVars } from '../utils/tableGroupList';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
 
@@ -53,6 +71,7 @@ const props = defineProps<{
   config: GroupListConfig;
   name: string;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   disabled?: boolean;
@@ -91,5 +110,37 @@ 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 headerVars = computed(() => getGroupListHeaderVars(props.config.header));
+
+/**
+ * 取 `$slots` 而不是 `useSlots()`：宿主切换 `addable` 时插槽会增删，
+ * computed 缓存不随插槽变化失效，只有在渲染期读才拿得到最新的。
+ */
+const hasFooter = (slots: Record<string, unknown>) =>
+  !props.isCompare && Boolean(slots['toggle-button'] || slots['add-button']);
+
+/** 只有真的渲染出吸底 footer，内层列表才需要为它让位 */
+const isFooterSticky = (slots: Record<string, unknown>) =>
+  hasFooter(slots) && Boolean(props.config.addButtonConfig?.sticky);
+
+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>

package/src/containers/GroupListItem.vue

@@ -6,88 +6,95 @@
           <TMagicIcon><ArrowDown v-if="expand" /><ArrowRight v-else /></TMagicIcon>
         </TMagicButton>
 
-        <span v-html="title"></span>
-
-        <TMagicButton
-          v-if="!isCompare"
-          v-show="showDelete"
-          size="default"
-          link
-          class="delete-button"
-          :icon="Delete"
-          :disabled="disabled"
-          @click="removeHandler"
-        ></TMagicButton>
-
-        <TMagicButton
-          v-if="copyable && !isCompare"
-          link
-          size="default"
-          type="primary"
-          :icon="DocumentCopy"
-          :disabled="disabled"
-          @click="copyHandler"
-          >复制</TMagicButton
-        >
-
-        <template v-if="movable && !isCompare">
+        <div class="m-fields-group-list-item-title">
+          <slot name="title" :model="model" :index="index" :last-values="lastValues" :prop="rowProp" :title="title">
+            <span v-html="title"></span>
+          </slot>
+        </div>
+        <div class="m-fields-group-list-item-actions">
           <TMagicButton
-            v-show="index !== 0"
+            v-if="copyable && !isCompare"
             link
             size="default"
+            type="primary"
+            :icon="DocumentCopy"
             :disabled="disabled"
-            :icon="Top"
-            @click="changeOrder(-1)"
-            >上移</TMagicButton
+            @click="copyHandler"
+            >复制</TMagicButton
           >
-          <TMagicButton
-            v-show="index !== length - 1"
-            link
-            size="default"
-            :disabled="disabled"
-            :icon="Bottom"
-            @click="changeOrder(1)"
-            >下移</TMagicButton
-          >
-        </template>
-
-        <TMagicPopover
-          v-if="config.moveSpecifyLocation && !isCompare"
-          trigger="click"
-          placement="top"
-          width="200"
-          :visible="moveSpecifyLocationVisible"
-        >
-          <template #reference>
+
+          <template v-if="movable && !isCompare">
+            <TMagicButton
+              v-show="index !== 0"
+              link
+              size="default"
+              :disabled="disabled"
+              :icon="Top"
+              @click="changeOrder(-1)"
+              >上移</TMagicButton
+            >
             <TMagicButton
+              v-show="index !== length - 1"
               link
-              size="small"
-              type="primary"
-              :icon="Position"
+              size="default"
               :disabled="disabled"
-              @click="moveSpecifyLocationVisible = true"
-              >移动至</TMagicButton
+              :icon="Bottom"
+              @click="changeOrder(1)"
+              >下移</TMagicButton
             >
           </template>
-          <div>
-            <div>
-              第<TMagicInputNumber
-                style="margin: 0 5px"
-                v-model="moveSpecifyLocationIndex"
+
+          <TMagicPopover
+            v-if="config.moveSpecifyLocation && !isCompare"
+            trigger="click"
+            placement="top"
+            width="200"
+            :visible="moveSpecifyLocationVisible"
+          >
+            <template #reference>
+              <TMagicButton
+                link
                 size="small"
-                :min="1"
+                type="primary"
+                :icon="Position"
                 :disabled="disabled"
-              ></TMagicInputNumber
-              >行
-            </div>
-            <div style="text-align: right; margin-top: 20px">
-              <TMagicButton size="small" text @click="moveSpecifyLocationVisible = false">取消</TMagicButton>
-              <TMagicButton size="small" type="primary" @click="moveSpecifyLocationHandler">确认</TMagicButton>
+                @click="moveSpecifyLocationVisible = true"
+                >移动至</TMagicButton
+              >
+            </template>
+            <div>
+              <div>
+                第<TMagicInputNumber
+                  style="margin: 0 5px"
+                  v-model="moveSpecifyLocationIndex"
+                  size="small"
+                  :min="1"
+                  :disabled="disabled"
+                ></TMagicInputNumber
+                >行
+              </div>
+              <div style="text-align: right; margin-top: 20px">
+                <TMagicButton size="small" text @click="moveSpecifyLocationVisible = false">取消</TMagicButton>
+                <TMagicButton size="small" type="primary" @click="moveSpecifyLocationHandler">确认</TMagicButton>
+              </div>
             </div>
-          </div>
-        </TMagicPopover>
+          </TMagicPopover>
 
-        <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
+          <!-- v-if 必须挂在 Tooltip 上：子节点为 false 时 ElOnlyChild 会报 no valid child node found -->
+          <TMagicTooltip v-if="!isCompare" :content="`删除 ${title}`">
+            <TMagicButton
+              v-show="showDelete"
+              size="default"
+              link
+              class="delete-button"
+              :icon="Delete"
+              :disabled="disabled"
+              @click="removeHandler"
+            ></TMagicButton>
+          </TMagicTooltip>
+
+          <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
+        </div>
       </div>
     </template>
 
@@ -98,7 +105,8 @@
       :lastValues="lastValues"
       :is-compare="isCompare"
       :labelWidth="labelWidth"
-      :prop="`${prop}${prop ? '.' : ''}${String(index)}`"
+      :labelPosition="labelPosition"
+      :prop="rowProp"
       :size="size"
       :disabled="disabled"
       @change="changeHandler"
@@ -111,10 +119,11 @@
 import { computed, inject, ref } from 'vue';
 import { ArrowDown, ArrowRight, Bottom, Delete, DocumentCopy, Position, Top } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover } from '@tmagic/design';
+import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover, TMagicTooltip } from '@tmagic/design';
 
 import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
-import { filterFunction } from '../utils/form';
+import { appendProp, filterFunction } from '../utils/form';
+import { getGroupListRowConfig } from '../utils/tableGroupList';
 
 import Container from './Container.vue';
 
@@ -129,6 +138,7 @@ const props = defineProps<{
   groupModel: any[];
   config: GroupListConfig;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   index: number;
@@ -142,19 +152,16 @@ const mForm = inject<FormState | undefined>('mForm');
 const defaultExpandQuantity = props.config.defaultExpandQuantity ?? 7;
 const expand = ref(props.config.expandAll || defaultExpandQuantity > props.index);
 
-const rowConfig = computed(() => ({
-  type: 'row',
-  span: props.config.span || 24,
-  items: props.config.items,
-  labelWidth: props.config.labelWidth,
-  [mForm?.keyProp || '__key']: `${(props.config as Record<string, any>)[mForm?.keyProp || '__key']}${String(
-    props.index,
-  )}`,
-}));
+const rowConfig = computed(() => getGroupListRowConfig(props.config, props.index, mForm?.keyProp));
+
+const rowProp = computed(() => appendProp(props.prop, props.index));
 
 const title = computed(() => {
   if (props.config.titleKey && props.model[props.config.titleKey]) {
-    return props.model[props.config.titleKey];
+    const { titlePrefix } = props.config;
+    return titlePrefix
+      ? `${titlePrefix} ${String(props.index + 1)}: ${props.model[props.config.titleKey]}`
+      : `${props.model[props.config.titleKey]}`;
   }
 
   if (props.config.title) {

package/src/containers/Panel.vue

@@ -39,6 +39,7 @@
             :size="size"
             :disabled="disabled"
             :label-width="config.labelWidth || labelWidth"
+            :label-position="config.labelPosition || labelPosition"
             @change="changeHandler"
             @addDiffCount="onAddDiffCount()"
           ></Container>
@@ -59,6 +60,7 @@
           :size="size"
           :disabled="disabled"
           :label-width="config.labelWidth || labelWidth"
+          :label-position="config.labelPosition || labelPosition"
           @change="changeHandler"
           @addDiffCount="onAddDiffCount()"
         ></Container>
@@ -89,6 +91,7 @@ const props = defineProps<{
   config: PanelConfig;
   name?: string;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   disabled?: boolean;

package/src/containers/Row.vue

@@ -6,6 +6,7 @@
       :span="col.span || config.span || 24 / config.items.length"
       :config="col"
       :labelWidth="config.labelWidth || labelWidth"
+      :labelPosition="config.labelPosition || labelPosition"
       :expandMore="expandMore"
       :model="name ? model[name] : model"
       :lastValues="name ? lastValues[name] : lastValues"
@@ -39,6 +40,7 @@ const props = defineProps<{
   config: RowConfig;
   name: string;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   expandMore?: boolean;

package/src/containers/Step.vue

@@ -24,6 +24,7 @@
           :size="size"
           :disabled="disabled"
           :label-width="config.labelWidth || labelWidth"
+          :label-position="config.labelPosition || labelPosition"
           @change="changeHandler"
           @addDiffCount="onAddDiffCount()"
         ></Container>
@@ -54,6 +55,7 @@ const props = withDefaults(
     config: StepConfig;
     stepActive?: number;
     labelWidth?: string;
+    labelPosition?: 'top' | 'left' | 'right';
     size?: string;
     disabled?: boolean;
   }>(),