@tmagic/form 1.8.0-beta.2 → 1.8.0-beta.21

package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js

@@ -1,27 +1,31 @@
-import { FORM_DIFF_CONFIG_KEY } from "../schema.js";
+import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "../schema.js";
+import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
 import Hidden_default from "../fields/Hidden.js";
 import { getField } from "../utils/config.js";
-import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
 import FormLabel_default from "./FormLabel.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
 import { isEqual } from "lodash-es";
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from "@tmagic/design";
 import { getValueByKeyPath } from "@tmagic/utils";
-import { WarningFilled } from "@element-plus/icons-vue";
+import { ArrowDown, ArrowUp, WarningFilled } from "@element-plus/icons-vue";
 //#region packages/form/src/containers/Container.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-tmagic-id", "data-tmagic-form-item-prop"];
-var _hoisted_2 = ["innerHTML"];
+var _hoisted_2 = {
+	key: 0,
+	class: "m-form-tip m-form-title-extra"
+};
 var _hoisted_3 = ["innerHTML"];
 var _hoisted_4 = ["innerHTML"];
 var _hoisted_5 = ["innerHTML"];
 var _hoisted_6 = ["innerHTML"];
 var _hoisted_7 = ["innerHTML"];
 var _hoisted_8 = ["innerHTML"];
-var _hoisted_9 = {
+var _hoisted_9 = ["innerHTML"];
+var _hoisted_10 = {
 	key: 5,
-	style: { "text-align": "center" }
+	class: "m-form-container-expand"
 };
-var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormContainer",
 	__name: "Container",
 	props: {
@@ -40,7 +44,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		isCompare: {
 			type: Boolean,
 			default: false
-		}
+		},
+		isInRow: { type: Boolean }
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
@@ -48,12 +53,14 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const emit = __emit;
 		const mForm = inject("mForm");
 		const diffConfig = inject(FORM_DIFF_CONFIG_KEY, {});
+		const typeMatchValid = inject(FORM_TYPE_MATCH_VALID_KEY);
 		const expand = ref(false);
 		const name = computed(() => props.config.name || "");
 		const showDiff = computed(() => {
 			if (!props.isCompare) return false;
-			const curValue = name.value ? props.model[name.value] : props.model;
-			const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+			if (!name.value) return false;
+			const curValue = props.model[name.value];
+			const lastValue = props.lastValues[name.value];
 			const customShowDiff = diffConfig.showDiff;
 			if (typeof customShowDiff === "function") return Boolean(customShowDiff({
 				curValue,
@@ -106,7 +113,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const effectiveSelfDiffFieldTypes = computed(() => {
 			const custom = diffConfig.selfDiffFieldTypes;
 			if (typeof custom === "function") return new Set(custom([...DEFAULT_SELF_DIFF_FIELD_TYPES]));
-			if (Array.isArray(custom)) return new Set([...DEFAULT_SELF_DIFF_FIELD_TYPES, ...custom]);
+			if (Array.isArray(custom)) return /* @__PURE__ */ new Set([...DEFAULT_SELF_DIFF_FIELD_TYPES, ...custom]);
 			return new Set(DEFAULT_SELF_DIFF_FIELD_TYPES);
 		});
 		const isSelfDiffField = computed(() => effectiveSelfDiffFieldTypes.value.has(type.value));
@@ -123,7 +130,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				placement: config?.placement || "top"
 			};
 		});
-		const rule = computed(() => getRules(mForm, props.config.rules, props));
+		const rule = computed(() => getRules(mForm, props.config.rules, props, typeMatchValid));
 		const display$1 = computed(() => {
 			const value = display(mForm, props.config.display, props);
 			if (value === "expand") return expand.value;
@@ -143,7 +150,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			labelWidth: itemLabelWidth.value,
 			labelPosition: props.config.labelPosition,
 			rules: rule.value,
-			extra: filterFunction(mForm, props.config.extra, props)
+			extra: filterFunction(mForm, props.config.extra, props),
+			extraTips: props.config.extraTips
 		}));
 		const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
 		watchEffect(() => {
@@ -154,6 +162,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			if (items.value && !text.value && type.value && display$1.value) return;
 			if (display$1.value && showDiff && type.value) emit("addDiffCount");
 		}, { immediate: true });
+		provide("isInRow", props.isInRow ?? false);
 		const expandHandler = () => expand.value = !expand.value;
 		const key = (config) => config[mForm?.keyProps];
 		const filterHandler = (filter, value) => {
@@ -184,7 +193,10 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			return new Proxy(target, {
 				get: (obj, key) => {
 					const value = obj[key];
-					if (value && typeof value === "object") return createModelProxy(value, setModelFn, pathPrefix ? `${pathPrefix}.${key}` : key);
+					if (value && typeof value === "object") {
+						const newPath = pathPrefix ? `${pathPrefix}.${key}` : key;
+						return createModelProxy(value, setModelFn, newPath);
+					}
 					return value;
 				},
 				set: (obj, key, value) => {
@@ -250,16 +262,18 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"data-tmagic-form-item-prop": itemProp.value,
 				class: normalizeClass(`m-form-container m-container-${type.value || ""} ${__props.config.className || ""}${__props.config.tip ? " has-tip" : ""}`),
 				style: normalizeStyle(__props.config.style)
-			}, [type.value === "hidden" ? (openBlock(), createBlock(Hidden_default, {
-				key: 0,
-				name: `${name.value}`,
-				prop: itemProp.value,
-				model: __props.model
-			}, null, 8, [
-				"name",
-				"prop",
-				"model"
-			])) : items.value && !text.value && type.value && display$1.value ? (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
+			}, [type.value === "hidden" ? (openBlock(), createBlock(unref(TMagicFormItem), mergeProps({ key: 0 }, formItemProps.value, { style: { "display": "none" } }), {
+				default: withCtx(() => [createVNode(Hidden_default, {
+					name: `${name.value}`,
+					prop: itemProp.value,
+					model: __props.model
+				}, null, 8, [
+					"name",
+					"prop",
+					"model"
+				])]),
+				_: 1
+			}, 16)) : items.value && !text.value && type.value && display$1.value ? (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
 				model: __props.model,
 				"last-values": __props.lastValues,
 				"is-compare": __props.isCompare,
@@ -296,12 +310,12 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					"use-label",
 					"label-title",
 					"text"
-				])])]),
+				]), __props.config.titleExtra && __props.config.labelPosition === "top" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.config.titleExtra), 1)) : createCommentVNode("v-if", true)])]),
 				default: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
 					key: 0,
 					placement: tooltip.value.placement
 				}, {
-					content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_2)]),
+					content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_3)]),
 					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
 						model: __props.model,
 						"last-values": __props.lastValues,
@@ -330,7 +344,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				key: 0,
 				placement: "top"
 			}, {
-				content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_3)]),
+				content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_4)]),
 				default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
 					"line-height": "40px",
 					"margin-left": "5px"
@@ -369,7 +383,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						key: 0,
 						placement: tooltip.value.placement
 					}, {
-						content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_4)]),
+						content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_5)]),
 						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
 							model: __props.model,
 							"last-values": __props.lastValues,
@@ -422,7 +436,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 							key: 0,
 							placement: tooltip.value.placement
 						}, {
-							content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_5)]),
+							content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_6)]),
 							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
 								model: __props.lastValues,
 								onChange: onChangeHandler
@@ -438,7 +452,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						key: 0,
 						placement: "top"
 					}, {
-						content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_6)]),
+						content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_7)]),
 						default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
 							"line-height": "40px",
 							"margin-left": "5px"
@@ -479,7 +493,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 							key: 0,
 							placement: tooltip.value.placement
 						}, {
-							content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_7)]),
+							content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_8)]),
 							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
 								model: __props.model,
 								onChange: onChangeHandler
@@ -495,7 +509,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						key: 1,
 						placement: "top"
 					}, {
-						content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_8)]),
+						content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_9)]),
 						default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
 							"line-height": "40px",
 							"margin-left": "5px"
@@ -537,16 +551,17 @@ var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					"label-width",
 					"prop"
 				]);
-			}), 128)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true), __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_9, [createVNode(unref(TMagicButton), {
+			}), 128)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true), __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(unref(TMagicButton), {
 				type: "primary",
 				size: "small",
 				disabled: false,
 				link: "",
-				onClick: expandHandler
+				onClick: expandHandler,
+				icon: expand.value ? unref(ArrowUp) : unref(ArrowDown)
 			}, {
 				default: withCtx(() => [createTextVNode(toDisplayString(expand.value ? "收起配置" : "展开更多配置"), 1)]),
 				_: 1
-			})])) : createCommentVNode("v-if", true)], 14, _hoisted_1);
+			}, 8, ["icon"])])) : createCommentVNode("v-if", true)], 14, _hoisted_1);
 		};
 	}
 });

package/dist/es/containers/Fieldset.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { filterFunction } from "../utils/form.js";
 import Container_default from "./Container.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeStyle, openBlock, renderList, resolveDynamicComponent, unref, withCtx } from "vue";
 import { TMagicCheckbox } from "@tmagic/design";
@@ -13,7 +14,7 @@ var _hoisted_6 = {
 };
 var _hoisted_7 = { style: { "flex": "1" } };
 var _hoisted_8 = ["src"];
-var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Fieldset_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormFieldset",
 	__name: "Fieldset",
 	props: {
@@ -36,6 +37,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const emit = __emit;
 		const mForm = inject("mForm");
 		const name = computed(() => props.config.name || "");
+		const legend = computed(() => filterFunction(mForm, props.config.legend, props));
 		const checkboxName = computed(() => {
 			if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.name === "string") return props.config.checkbox.name;
 			return "value";
@@ -75,7 +77,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"false-value": checkboxFalseValue.value,
 					"onUpdate:modelValue": valueChangeHandler
 				}, {
-					default: withCtx(() => [createElementVNode("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_1), __props.config.extra ? (openBlock(), createElementBlock("span", {
+					default: withCtx(() => [createElementVNode("span", { innerHTML: legend.value }, null, 8, _hoisted_1), __props.config.extra ? (openBlock(), createElementBlock("span", {
 						key: 0,
 						innerHTML: __props.config.extra,
 						class: "m-form-tip"
@@ -88,7 +90,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"false-value"
 				])]),
 				_: 1
-			})) : (openBlock(), createElementBlock("legend", _hoisted_3, [createElementVNode("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_4), __props.config.extra ? (openBlock(), createElementBlock("span", {
+			})) : (openBlock(), createElementBlock("legend", _hoisted_3, [createElementVNode("span", { innerHTML: legend.value }, null, 8, _hoisted_4), __props.config.extra ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				innerHTML: __props.config.extra,
 				class: "m-form-tip"

package/dist/es/containers/FlexLayout.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import Container_default from "./Container.js";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, inject, normalizeStyle, openBlock, renderList, unref } from "vue";
 //#region packages/form/src/containers/FlexLayout.vue?vue&type=script&setup=true&lang.ts
-var FlexLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FlexLayout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormFlexLayout",
 	__name: "FlexLayout",
 	props: {

package/dist/es/containers/FormLabel.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,7 @@ var _hoisted_1 = {
 var _hoisted_2 = ["innerHTML", "title"];
 var _hoisted_3 = ["innerHTML"];
 var _hoisted_4 = ["innerHTML", "title"];
-var FormLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FormLabel",
 	props: {
 		tip: {},

package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import GroupListItem_default from "./GroupListItem.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, renderSlot } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, renderSlot, toDisplayString } from "vue";
 import { cloneDeep } from "lodash-es";
 //#region packages/form/src/containers/GroupList.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-group-list" };
@@ -8,16 +8,17 @@ var _hoisted_3 = {
 	key: 1,
 	class: "el-table__empty-block"
 };
-var _hoisted_4 = {
+var _hoisted_4 = { class: "el-table__empty-text t-table__empty" };
+var _hoisted_5 = {
 	key: 3,
 	class: "m-fields-group-list-footer"
 };
-var _hoisted_5 = { style: {
+var _hoisted_6 = { style: {
 	"display": "flex",
 	"justify-content": "flex-end",
 	"flex": "1"
 } };
-var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var GroupList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormGroupList",
 	__name: "GroupList",
 	props: {
@@ -63,7 +64,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					innerHTML: __props.config.extra,
 					style: { "color": "rgba(0, 0, 0, 0.45)" }
 				}, null, 8, _hoisted_2)) : createCommentVNode("v-if", true),
-				!__props.model[__props.name] || !__props.model[__props.name].length ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "el-table__empty-text t-table__empty" }, "暂无数据", -1)])])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(__props.model[__props.name], (item, index) => {
+				!__props.model[__props.name] || !__props.model[__props.name].length ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("span", _hoisted_4, "暂无" + toDisplayString(__props.config.titlePrefix || "") + "数据", 1)])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(__props.model[__props.name], (item, index) => {
 					return openBlock(), createBlock(GroupListItem_default, {
 						key: index,
 						model: item,
@@ -94,7 +95,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						"group-model"
 					]);
 				}), 128)),
-				!__props.isCompare ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "add-button")])])) : createCommentVNode("v-if", true)
+				!__props.isCompare ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "add-button")])])) : createCommentVNode("v-if", true)
 			]);
 		};
 	}

package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,17 @@
 import { filterFunction } from "../utils/form.js";
 import Container_default from "./Container.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, openBlock, ref, unref, vShow, withCtx, withDirectives } from "vue";
-import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover } from "@tmagic/design";
-import { CaretBottom, CaretRight, CaretTop, Delete, DocumentCopy, Position } from "@element-plus/icons-vue";
+import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover, TMagicTooltip } from "@tmagic/design";
+import { ArrowDown, ArrowRight, Bottom, Delete, DocumentCopy, Position, Top } from "@element-plus/icons-vue";
 //#region packages/form/src/containers/GroupListItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["innerHTML"];
-var _hoisted_2 = { style: {
+var _hoisted_1 = { class: "m-fields-group-list-item-header" };
+var _hoisted_2 = ["innerHTML"];
+var _hoisted_3 = { style: {
 	"text-align": "right",
 	"margin-top": "20px"
 } };
-var _hoisted_3 = ["innerHTML"];
-var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_4 = ["innerHTML"];
+var GroupListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormGroupListItem",
 	__name: "GroupListItem",
 	props: {
@@ -46,7 +47,10 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			[mForm?.keyProp || "__key"]: `${props.config[mForm?.keyProp || "__key"]}${String(props.index)}`
 		}));
 		const title = computed(() => {
-			if (props.config.titleKey && props.model[props.config.titleKey]) return props.model[props.config.titleKey];
+			if (props.config.titleKey && 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) return filterFunction(mForm, props.config.title, props);
 			return `${props.config.titlePrefix || "组"} ${String(props.index + 1)}`;
 		});
@@ -85,33 +89,39 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TMagicCard), {
 				class: "m-fields-group-list-item",
+				flat: __props.config.flat,
 				"body-style": { display: expand.value ? "block" : "none" }
 			}, {
-				header: withCtx(() => [createElementVNode("div", null, [
+				header: withCtx(() => [createElementVNode("div", _hoisted_1, [
 					createVNode(unref(TMagicButton), {
 						link: "",
 						disabled: __props.disabled,
-						onClick: expandHandler
+						onClick: expandHandler,
+						class: "expand-button"
 					}, {
 						default: withCtx(() => [createVNode(unref(TMagicIcon), null, {
-							default: withCtx(() => [expand.value ? (openBlock(), createBlock(unref(CaretBottom), { key: 0 })) : (openBlock(), createBlock(unref(CaretRight), { key: 1 }))]),
+							default: withCtx(() => [expand.value ? (openBlock(), createBlock(unref(ArrowDown), { key: 0 })) : (openBlock(), createBlock(unref(ArrowRight), { key: 1 }))]),
 							_: 1
-						}), createElementVNode("span", { innerHTML: title.value }, null, 8, _hoisted_1)]),
+						})]),
 						_: 1
 					}, 8, ["disabled"]),
-					!__props.isCompare ? withDirectives((openBlock(), createBlock(unref(TMagicButton), {
-						key: 0,
-						type: "danger",
-						size: "small",
-						link: "",
-						icon: unref(Delete),
-						disabled: __props.disabled,
-						onClick: removeHandler
-					}, null, 8, ["icon", "disabled"])), [[vShow, showDelete.value]]) : createCommentVNode("v-if", true),
+					createElementVNode("span", { innerHTML: title.value }, null, 8, _hoisted_2),
+					createVNode(unref(TMagicTooltip), { content: `删除 ${title.value}` }, {
+						default: withCtx(() => [!__props.isCompare ? withDirectives((openBlock(), createBlock(unref(TMagicButton), {
+							key: 0,
+							size: "default",
+							link: "",
+							class: "delete-button",
+							icon: unref(Delete),
+							disabled: __props.disabled,
+							onClick: removeHandler
+						}, null, 8, ["icon", "disabled"])), [[vShow, showDelete.value]]) : createCommentVNode("v-if", true)]),
+						_: 1
+					}, 8, ["content"]),
 					copyable.value && !__props.isCompare ? (openBlock(), createBlock(unref(TMagicButton), {
-						key: 1,
+						key: 0,
 						link: "",
-						size: "small",
+						size: "default",
 						type: "primary",
 						icon: unref(DocumentCopy),
 						disabled: __props.disabled,
@@ -120,27 +130,27 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("复制", -1)])]),
 						_: 1
 					}, 8, ["icon", "disabled"])) : createCommentVNode("v-if", true),
-					movable.value && !__props.isCompare ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [withDirectives(createVNode(unref(TMagicButton), {
+					movable.value && !__props.isCompare ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [withDirectives(createVNode(unref(TMagicButton), {
 						link: "",
-						size: "small",
+						size: "default",
 						disabled: __props.disabled,
-						icon: unref(CaretTop),
+						icon: unref(Top),
 						onClick: _cache[0] || (_cache[0] = ($event) => changeOrder(-1))
 					}, {
 						default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("上移", -1)])]),
 						_: 1
 					}, 8, ["disabled", "icon"]), [[vShow, __props.index !== 0]]), withDirectives(createVNode(unref(TMagicButton), {
 						link: "",
-						size: "small",
+						size: "default",
 						disabled: __props.disabled,
-						icon: unref(CaretBottom),
+						icon: unref(Bottom),
 						onClick: _cache[1] || (_cache[1] = ($event) => changeOrder(1))
 					}, {
 						default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode("下移", -1)])]),
 						_: 1
 					}, 8, ["disabled", "icon"]), [[vShow, __props.index !== length.value - 1]])], 64)) : createCommentVNode("v-if", true),
 					__props.config.moveSpecifyLocation && !__props.isCompare ? (openBlock(), createBlock(unref(TMagicPopover), {
-						key: 3,
+						key: 2,
 						trigger: "click",
 						placement: "top",
 						width: "200",
@@ -168,7 +178,7 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 								disabled: __props.disabled
 							}, null, 8, ["modelValue", "disabled"]),
 							_cache[11] || (_cache[11] = createTextVNode("行 ", -1))
-						]), createElementVNode("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+						]), createElementVNode("div", _hoisted_3, [createVNode(unref(TMagicButton), {
 							size: "small",
 							text: "",
 							onClick: _cache[4] || (_cache[4] = ($event) => moveSpecifyLocationVisible.value = false)
@@ -186,10 +196,10 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						_: 1
 					}, 8, ["visible"])) : createCommentVNode("v-if", true),
 					itemExtra.value ? (openBlock(), createElementBlock("span", {
-						key: 4,
+						key: 3,
 						innerHTML: itemExtra.value,
 						class: "m-form-tip"
-					}, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)
+					}, null, 8, _hoisted_4)) : createCommentVNode("v-if", true)
 				])]),
 				default: withCtx(() => [expand.value ? (openBlock(), createBlock(Container_default, {
 					key: 0,
@@ -214,7 +224,7 @@ var GroupListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"disabled"
 				])) : createCommentVNode("v-if", true)]),
 				_: 1
-			}, 8, ["body-style"]);
+			}, 8, ["flat", "body-style"]);
 		};
 	}
 });

package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { filterFunction } from "../utils/form.js";
 import Container_default from "./Container.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
 import { TMagicButton, TMagicCard } from "@tmagic/design";
-import { CaretBottom, CaretRight } from "@element-plus/icons-vue";
+import { ArrowDown, ArrowRight } from "@element-plus/icons-vue";
 //#region packages/form/src/containers/Panel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { style: {
 	"width": "100%",
@@ -16,7 +16,7 @@ var _hoisted_3 = {
 };
 var _hoisted_4 = { style: { "flex": "1" } };
 var _hoisted_5 = ["src"];
-var Panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormPanel",
 	__name: "Panel",
 	props: {
@@ -28,7 +28,8 @@ var Panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		labelWidth: {},
 		prop: {},
 		size: {},
-		disabled: { type: Boolean }
+		disabled: { type: Boolean },
+		hideExpand: { type: Boolean }
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -52,21 +53,26 @@ var Panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			return items.value && items.value.length ? (openBlock(), createBlock(unref(TMagicCard), {
 				key: 0,
 				class: "box-card m-form-panel",
-				"body-style": { display: expand.value ? "block" : "none" }
+				"body-style": { display: expand.value ? "block" : "none" },
+				flat: __props.config.flat
 			}, {
 				header: withCtx(() => [createElementVNode("div", _hoisted_1, [
-					createVNode(unref(TMagicButton), {
-						style: { "padding": "0" },
+					!__props.hideExpand ? (openBlock(), createBlock(unref(TMagicButton), {
+						key: 0,
+						style: {
+							"padding": "0",
+							"margin-right": "10px"
+						},
 						link: "",
-						icon: expand.value ? unref(CaretBottom) : unref(CaretRight),
+						icon: expand.value ? unref(ArrowDown) : unref(ArrowRight),
 						onClick: _cache[0] || (_cache[0] = ($event) => expand.value = !expand.value)
-					}, null, 8, ["icon"]),
+					}, null, 8, ["icon"])) : createCommentVNode("v-if", true),
 					renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("span", {
 						style: { "cursor": "pointer" },
 						onClick: _cache[1] || (_cache[1] = ($event) => expand.value = !expand.value)
 					}, toDisplayString(filter(__props.config.title)), 1)]),
 					__props.config && __props.config.extra ? (openBlock(), createElementBlock("span", {
-						key: 0,
+						key: 1,
 						innerHTML: __props.config.extra,
 						class: "m-form-tip"
 					}, null, 8, _hoisted_2)) : createCommentVNode("v-if", true)
@@ -122,7 +128,7 @@ var Panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					]);
 				}), 128))])]),
 				_: 3
-			}, 8, ["body-style"])) : createCommentVNode("v-if", true);
+			}, 8, ["body-style", "flat"])) : createCommentVNode("v-if", true);
 		};
 	}
 });

package/dist/es/containers/Row.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import Col_default from "./Col.js";
 import { Fragment, createBlock, createElementBlock, defineComponent, inject, openBlock, renderList, unref, withCtx } from "vue";
 import { TMagicRow } from "@tmagic/design";
 //#region packages/form/src/containers/Row.vue?vue&type=script&setup=true&lang.ts
-var Row_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Row_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormRow",
 	__name: "Row",
 	props: {

package/dist/es/containers/Step.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import Container_default from "./Container.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, ref, renderList, unref, vShow, watchEffect, withCtx, withDirectives } from "vue";
 import { TMagicStep, TMagicSteps } from "@tmagic/design";
 //#region packages/form/src/containers/Step.vue?vue&type=script&setup=true&lang.ts
-var Step_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Step_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormStep",
 	__name: "Step",
 	props: {

package/dist/es/containers/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { Fragment, computed, createBlock, createElementBlock, createElementVNode
 import { isEmpty } from "lodash-es";
 import { TMagicBadge, getDesignConfig } from "@tmagic/design";
 //#region packages/form/src/containers/Tabs.vue?vue&type=script&setup=true&lang.ts
-var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Tabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormTabs",
 	__name: "Tabs",
 	props: {