@tmagic/form 1.7.6 → 1.7.8-beta.1

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

@@ -0,0 +1,439 @@
+import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
+import Hidden_default from "../fields/Hidden.js";
+import { getField } from "../utils/config.js";
+import FormLabel_default from "./FormLabel.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, readonly, ref, renderList, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
+import { isEqual } from "lodash-es";
+import { getValueByKeyPath } from "@tmagic/utils";
+import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from "@tmagic/design";
+import { 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_3 = ["innerHTML"];
+var _hoisted_4 = ["innerHTML"];
+var _hoisted_5 = ["innerHTML"];
+var _hoisted_6 = ["innerHTML"];
+var _hoisted_7 = ["innerHTML"];
+var _hoisted_8 = {
+	key: 5,
+	style: { "text-align": "center" }
+};
+var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormContainer",
+	__name: "Container",
+	props: {
+		model: {},
+		lastValues: { default: () => ({}) },
+		config: {},
+		prop: { default: "" },
+		disabled: { type: Boolean },
+		labelWidth: {},
+		expandMore: {
+			type: Boolean,
+			default: false
+		},
+		stepActive: {},
+		size: { default: "small" },
+		isCompare: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["change", "addDiffCount"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const mForm = inject("mForm");
+		const expand = ref(false);
+		const name = computed(() => props.config.name || "");
+		const showDiff = computed(() => {
+			if (!props.isCompare) return false;
+			return !isEqual(name.value ? props.model[name.value] : props.model, name.value ? props.lastValues[name.value] : props.lastValues);
+		});
+		const items = computed(() => props.config.items);
+		const itemProp = computed(() => {
+			let n = "";
+			if (name.value) n = name.value;
+			else return props.prop;
+			if (typeof props.prop !== "undefined" && props.prop !== "") return `${props.prop}.${n}`;
+			return `${n}`;
+		});
+		const type = computed(() => {
+			let { type } = props.config;
+			type = type && filterFunction(mForm, type, props);
+			if (type === "form") return "";
+			if (type === "container") return "";
+			return type?.replace(/([A-Z])/g, "-$1").toLowerCase() || (items.value ? "" : "text");
+		});
+		const tagName = computed(() => {
+			if (type.value === "component" && props.config.component) return props.config.component;
+			if (!getField(type.value || "container")) console.log(type.value, "type.value");
+			return getField(type.value || "container") || `m-${items.value ? "form" : "fields"}-${type.value}`;
+		});
+		const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
+		const text = computed(() => filterFunction(mForm, props.config.text, props));
+		const tooltip = computed(() => {
+			const config = filterFunction(mForm, props.config.tooltip, props);
+			if (typeof config === "string") return {
+				text: config,
+				placement: "top"
+			};
+			return {
+				text: config?.text,
+				placement: config?.placement || "top"
+			};
+		});
+		const rule = computed(() => getRules(mForm, props.config.rules, props));
+		const display$1 = computed(() => {
+			const value = display(mForm, props.config.display, props);
+			if (value === "expand") return expand.value;
+			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(() => {
+			expand.value = props.expandMore;
+		});
+		watch(showDiff, (showDiff) => {
+			if (type.value === "hidden") return;
+			if (items.value && !text.value && type.value && display$1.value) return;
+			if (display$1.value && showDiff && type.value) emit("addDiffCount");
+		}, { immediate: true });
+		const expandHandler = () => expand.value = !expand.value;
+		const key = (config) => config[mForm?.keyProps];
+		const filterHandler = (filter, value) => {
+			if (typeof filter === "function") return filter(mForm, value, {
+				model: props.model,
+				values: mForm?.initValues,
+				formValue: mForm?.values,
+				prop: itemProp.value,
+				config: props.config,
+				getFormValue: (prop) => getValueByKeyPath(prop, mForm?.values || props.model)
+			});
+			if (filter === "number") return +value;
+			return value;
+		};
+		const trimHandler = (trim, value) => {
+			if (typeof value === "string" && trim) return value.replace(/^\s*/, "").replace(/\s*$/, "");
+		};
+		const onAddDiffCount = () => emit("addDiffCount");
+		const hasModifyKey = (eventDataItem) => 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 createModelProxy = (target, setModelFn, pathPrefix = "") => {
+			return new Proxy(target, {
+				get: (obj, key) => {
+					const value = obj[key];
+					if (value && typeof value === "object") return createModelProxy(value, setModelFn, pathPrefix ? `${pathPrefix}.${key}` : key);
+					return value;
+				},
+				set: (obj, key, value) => {
+					setModelFn(pathPrefix ? `${pathPrefix}.${key}` : key, value);
+					return true;
+				}
+			});
+		};
+		const onChangeHandler = async function(v, eventData = {}) {
+			const { filter, onChange, trim } = props.config;
+			let value = toRaw(v);
+			const changeRecords = eventData.changeRecords || [];
+			const newChangeRecords = [...changeRecords];
+			try {
+				value = filterHandler(filter, v);
+				if (typeof onChange === "function") {
+					const setModel = (key, value) => {
+						newChangeRecords.push({
+							propPath: createObjectProp(itemProp.value, key, props.config.name),
+							value
+						});
+					};
+					const setFormValue = (key, value) => {
+						newChangeRecords.push({
+							propPath: key,
+							value
+						});
+					};
+					value = await onChange(mForm, value, {
+						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,
+						setFormValue,
+						getFormValue: (prop) => getValueByKeyPath(prop, mForm?.values || props.model)
+					}) ?? value;
+				}
+				value = trimHandler(trim, value) ?? value;
+			} catch (e) {
+				console.error(e);
+			}
+			let valueProp = itemProp.value;
+			if (hasModifyKey(eventData)) {
+				valueProp = valueProp ? `${valueProp}.${eventData.modifyKey}` : eventData.modifyKey;
+				delete eventData.modifyKey;
+			}
+			if (changeRecords.length === 0) newChangeRecords.push({
+				propPath: valueProp,
+				value
+			});
+			emit("change", props.model, {
+				...eventData,
+				changeRecords: newChangeRecords
+			});
+		};
+		return (_ctx, _cache) => {
+			const _component_Container = resolveComponent("Container", true);
+			return openBlock(), createElementBlock("div", {
+				"data-tmagic-id": __props.config.id,
+				"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, {
+				model: __props.model,
+				"last-values": __props.lastValues,
+				"is-compare": __props.isCompare,
+				"step-active": __props.stepActive,
+				"expand-more": expand.value,
+				"label-width": itemLabelWidth.value,
+				style: __props.config.fieldStyle,
+				onChange: onChangeHandler,
+				onAddDiffCount
+			}), null, 16, [
+				"model",
+				"last-values",
+				"is-compare",
+				"step-active",
+				"expand-more",
+				"label-width",
+				"style"
+			])) : type.value && display$1.value && !showDiff.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, { class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value } }), {
+				label: withCtx(() => [createVNode(FormLabel_default, {
+					tip: __props.config.tip,
+					type: type.value,
+					"use-label": __props.config.useLabel,
+					"label-title": __props.config.labelTitle,
+					text: text.value
+				}, null, 8, [
+					"tip",
+					"type",
+					"use-label",
+					"label-title",
+					"text"
+				])]),
+				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)]),
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
+						model: __props.model,
+						"last-values": __props.lastValues,
+						"is-compare": __props.isCompare,
+						onChange: onChangeHandler,
+						onAddDiffCount
+					}), null, 16, [
+						"model",
+						"last-values",
+						"is-compare"
+					]))]),
+					_: 1
+				}, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
+					model: __props.model,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
+					onChange: onChangeHandler,
+					onAddDiffCount
+				}), null, 16, [
+					"model",
+					"last-values",
+					"is-compare"
+				]))]),
+				_: 1
+			}, 16, ["class"]), __props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
+				key: 0,
+				placement: "top"
+			}, {
+				content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_3)]),
+				default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
+					"line-height": "40px",
+					"margin-left": "5px"
+				} }, {
+					default: withCtx(() => [createVNode(unref(WarningFilled))]),
+					_: 1
+				})]),
+				_: 1
+			})) : createCommentVNode("v-if", true)], 64)) : type.value && display$1.value && showDiff.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+				createCommentVNode(" 对比 "),
+				createCommentVNode(" 上次内容 "),
+				createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, { class: {
+					"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
+					"show-diff": true
+				} }), {
+					label: withCtx(() => [createVNode(FormLabel_default, {
+						tip: __props.config.tip,
+						type: type.value,
+						"use-label": __props.config.useLabel,
+						"label-title": __props.config.labelTitle,
+						text: text.value
+					}, null, 8, [
+						"tip",
+						"type",
+						"use-label",
+						"label-title",
+						"text"
+					])]),
+					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_4)]),
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
+							model: __props.lastValues,
+							onChange: onChangeHandler
+						}), null, 16, ["model"]))]),
+						_: 1
+					}, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
+						model: __props.lastValues,
+						onChange: onChangeHandler
+					}), null, 16, ["model"]))]),
+					_: 1
+				}, 16, ["class"]),
+				__props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
+					key: 0,
+					placement: "top"
+				}, {
+					content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_5)]),
+					default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
+						"line-height": "40px",
+						"margin-left": "5px"
+					} }, {
+						default: withCtx(() => [createVNode(unref(WarningFilled))]),
+						_: 1
+					})]),
+					_: 1
+				})) : createCommentVNode("v-if", true),
+				createCommentVNode(" 当前内容 "),
+				createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, {
+					style: __props.config.tip ? "flex: 1" : "",
+					class: {
+						"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
+						"show-diff": true
+					}
+				}), {
+					label: withCtx(() => [createVNode(FormLabel_default, {
+						tip: __props.config.tip,
+						type: type.value,
+						"use-label": __props.config.useLabel,
+						"label-title": __props.config.labelTitle,
+						text: text.value
+					}, null, 8, [
+						"tip",
+						"type",
+						"use-label",
+						"label-title",
+						"text"
+					])]),
+					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_6)]),
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
+							model: __props.model,
+							onChange: onChangeHandler
+						}), null, 16, ["model"]))]),
+						_: 1
+					}, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
+						model: __props.model,
+						onChange: onChangeHandler
+					}), null, 16, ["model"]))]),
+					_: 1
+				}, 16, ["style", "class"]),
+				__props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
+					key: 1,
+					placement: "top"
+				}, {
+					content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_7)]),
+					default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
+						"line-height": "40px",
+						"margin-left": "5px"
+					} }, {
+						default: withCtx(() => [createVNode(unref(WarningFilled))]),
+						_: 1
+					})]),
+					_: 1
+				})) : createCommentVNode("v-if", true)
+			], 64)) : items.value && display$1.value ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [(isValidName() ? __props.model[name.value] : __props.model) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(items.value, (item) => {
+				return openBlock(), createBlock(_component_Container, {
+					key: key(item),
+					model: isValidName() ? __props.model[name.value] : __props.model,
+					"last-values": isValidName() ? __props.lastValues[name.value] || {} : __props.lastValues,
+					"is-compare": __props.isCompare,
+					config: item,
+					size: __props.size,
+					disabled: disabled.value,
+					"step-active": __props.stepActive,
+					"expand-more": expand.value,
+					"label-width": itemLabelWidth.value,
+					prop: itemProp.value,
+					onChange: onChangeHandler,
+					onAddDiffCount
+				}, null, 8, [
+					"model",
+					"last-values",
+					"is-compare",
+					"config",
+					"size",
+					"disabled",
+					"step-active",
+					"expand-more",
+					"label-width",
+					"prop"
+				]);
+			}), 128)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true), __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_8, [createVNode(unref(TMagicButton), {
+				type: "primary",
+				size: "small",
+				disabled: false,
+				link: "",
+				onClick: expandHandler
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(expand.value ? "收起配置" : "展开更多配置"), 1)]),
+				_: 1
+			})])) : createCommentVNode("v-if", true)], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { Container_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/containers/Fieldset.js

@@ -0,0 +1,5 @@
+import Fieldset_vue_vue_type_script_setup_true_lang_default from "./Fieldset.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/containers/Fieldset.vue
+var Fieldset_default = Fieldset_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Fieldset_default as default };

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

@@ -0,0 +1,153 @@
+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";
+//#region packages/form/src/containers/Fieldset.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+var _hoisted_3 = { key: 1 };
+var _hoisted_4 = ["innerHTML"];
+var _hoisted_5 = ["innerHTML"];
+var _hoisted_6 = {
+	key: 2,
+	style: { "display": "flex" }
+};
+var _hoisted_7 = { style: { "flex": "1" } };
+var _hoisted_8 = ["src"];
+var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormFieldset",
+	__name: "Fieldset",
+	props: {
+		labelWidth: {},
+		prop: { default: "" },
+		size: {},
+		model: {},
+		lastValues: { default: () => ({}) },
+		isCompare: {
+			type: Boolean,
+			default: false
+		},
+		config: {},
+		rules: { default: {} },
+		disabled: { type: Boolean }
+	},
+	emits: ["change", "addDiffCount"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const mForm = inject("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 && checkboxName.value) return (name.value ? props.model[name.value] : props.model)?.[checkboxName.value] === checkboxTrueValue.value;
+			return true;
+		});
+		const lWidth = computed(() => {
+			if (props.config.items) return props.config.labelWidth || props.labelWidth;
+			return props.config.labelWidth || props.labelWidth || (props.config.text ? void 0 : "0");
+		});
+		const valueChangeHandler = (value) => {
+			emit("change", value, { modifyKey: checkboxName.value });
+		};
+		const changeHandler = (v, eventData) => emit("change", v, eventData);
+		const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
+		const onAddDiffCount = () => emit("addDiffCount");
+		return (_ctx, _cache) => {
+			return (name.value ? __props.model[name.value] : __props.model) ? (openBlock(), createElementBlock("fieldset", {
+				key: 0,
+				class: "m-fieldset",
+				style: normalizeStyle(show.value ? "padding: 15px" : "border: 0")
+			}, [name.value && __props.config.checkbox ? (openBlock(), createBlock(resolveDynamicComponent(!show.value ? "div" : "legend"), { key: 0 }, {
+				default: withCtx(() => [createVNode(unref(TMagicCheckbox), {
+					"model-value": (name.value ? __props.model[name.value] : __props.model)[checkboxName.value],
+					prop: `${__props.prop}${__props.prop ? "." : ""}${__props.config.name}.${checkboxName.value}`,
+					"true-value": checkboxTrueValue.value,
+					"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", {
+						key: 0,
+						innerHTML: __props.config.extra,
+						class: "m-form-tip"
+					}, null, 8, _hoisted_2)) : createCommentVNode("v-if", true)]),
+					_: 1
+				}, 8, [
+					"model-value",
+					"prop",
+					"true-value",
+					"false-value"
+				])]),
+				_: 1
+			})) : (openBlock(), createElementBlock("legend", _hoisted_3, [createElementVNode("span", { innerHTML: __props.config.legend }, null, 8, _hoisted_4), __props.config.extra ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				innerHTML: __props.config.extra,
+				class: "m-form-tip"
+			}, null, 8, _hoisted_5)) : createCommentVNode("v-if", true)])), __props.config.schematic && show.value ? (openBlock(), createElementBlock("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.items, (item, index) => {
+				return openBlock(), createBlock(Container_default, {
+					key: key(item, index),
+					model: name.value ? __props.model[name.value] : __props.model,
+					lastValues: name.value ? __props.lastValues[name.value] : __props.lastValues,
+					"is-compare": __props.isCompare,
+					rules: name.value ? __props.rules[name.value] : [],
+					config: item,
+					prop: __props.prop,
+					disabled: __props.disabled,
+					labelWidth: lWidth.value,
+					size: __props.size,
+					onChange: changeHandler,
+					onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
+				}, null, 8, [
+					"model",
+					"lastValues",
+					"is-compare",
+					"rules",
+					"config",
+					"prop",
+					"disabled",
+					"labelWidth",
+					"size"
+				]);
+			}), 128))]), createElementVNode("img", {
+				class: "m-form-schematic",
+				src: __props.config.schematic
+			}, null, 8, _hoisted_8)])) : show.value ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(__props.config.items, (item, index) => {
+				return openBlock(), createBlock(Container_default, {
+					key: key(item, index),
+					model: name.value ? __props.model[name.value] : __props.model,
+					lastValues: name.value ? __props.lastValues[name.value] : __props.lastValues,
+					"is-compare": __props.isCompare,
+					rules: name.value ? __props.rules[name.value] : [],
+					config: item,
+					prop: __props.prop,
+					labelWidth: lWidth.value,
+					size: __props.size,
+					disabled: __props.disabled,
+					onChange: changeHandler,
+					onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+				}, null, 8, [
+					"model",
+					"lastValues",
+					"is-compare",
+					"rules",
+					"config",
+					"prop",
+					"labelWidth",
+					"size",
+					"disabled"
+				]);
+			}), 128)) : createCommentVNode("v-if", true)], 4)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { Fieldset_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/containers/FlexLayout.js

@@ -0,0 +1,5 @@
+import FlexLayout_vue_vue_type_script_setup_true_lang_default from "./FlexLayout.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/containers/FlexLayout.vue
+var FlexLayout_default = FlexLayout_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FlexLayout_default as default };

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

@@ -0,0 +1,64 @@
+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({
+	name: "MFormFlexLayout",
+	__name: "FlexLayout",
+	props: {
+		model: {},
+		lastValues: {},
+		isCompare: { type: Boolean },
+		config: {},
+		name: {},
+		labelWidth: {},
+		prop: {},
+		size: {},
+		disabled: { type: Boolean }
+	},
+	emits: ["change", "addDiffCount"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const mForm = inject("mForm");
+		const gap = computed(() => props.config.gap || "16px");
+		const changeHandler = (v, eventData) => {
+			emit("change", props.model, eventData);
+		};
+		const onAddDiffCount = () => emit("addDiffCount");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "m-form-flex-layout",
+				style: normalizeStyle({
+					display: "flex",
+					flexWrap: "wrap",
+					gap: gap.value
+				})
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.items, (item, index) => {
+				return openBlock(), createBlock(Container_default, {
+					key: item[unref(mForm)?.keyProp || "__key"] ?? index,
+					config: item,
+					model: __props.name ? __props.model[__props.name] : __props.model,
+					lastValues: __props.name ? __props.lastValues[__props.name] : __props.lastValues,
+					"is-compare": __props.isCompare,
+					prop: __props.prop,
+					size: __props.size,
+					disabled: __props.disabled,
+					"label-width": __props.config.labelWidth || __props.labelWidth,
+					onChange: changeHandler,
+					onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
+				}, null, 8, [
+					"config",
+					"model",
+					"lastValues",
+					"is-compare",
+					"prop",
+					"size",
+					"disabled",
+					"label-width"
+				]);
+			}), 128))], 4);
+		};
+	}
+});
+//#endregion
+export { FlexLayout_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/containers/FormLabel.js

@@ -0,0 +1,5 @@
+import FormLabel_vue_vue_type_script_setup_true_lang_default from "./FormLabel.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/containers/FormLabel.vue
+var FormLabel_default = FormLabel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FormLabel_default as default };