@tmagic/form 1.8.0-manmanyu.9 → 1.8.0

package/dist/es/containers/table-group-list/TableGroupList.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,13 @@
+import { isGroupListType, toGroupListConfig, toTableConfig } from "../../utils/tableGroupList.js";
 import GroupList_default from "../GroupList.js";
 import Table_default from "../table/Table.js";
 import { useAdd } from "./useAdd.js";
-import { computed, createBlock, createCommentVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
+import { useScrollLastItemIntoView } from "./useScrollLastItemIntoView.js";
+import { computed, createBlock, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
 import { TMagicButton } from "@tmagic/design";
 import { Grid, Plus } from "@element-plus/icons-vue";
 //#region packages/form/src/containers/table-group-list/TableGroupList.vue?vue&type=script&setup=true&lang.ts
-var TableGroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var TableGroupList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormTableGroupList",
 	inheritAttrs: false,
 	__name: "TableGroupList",
@@ -17,6 +19,7 @@ var TableGroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		name: {},
 		prop: {},
 		labelWidth: {},
+		labelPosition: {},
 		disabled: { type: Boolean },
 		size: {},
 		enableToggleMode: { type: Boolean },
@@ -33,63 +36,47 @@ var TableGroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const props = __props;
 		const emit = __emit;
 		const { addable, newHandler } = useAdd(props, emit);
-		const isGroupListType = (type) => type === "groupList" || type === "group-list";
 		const displayMode = ref(isGroupListType(props.config.type) ? "groupList" : "table");
-		const calcLabelWidth = (label) => {
-			if (!label) return "0px";
-			const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
-			const chLength = label.length - zhLength;
-			return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
-		};
-		const tableConfig = computed(() => {
-			if (!isGroupListType(props.config.type)) return props.config;
-			const source = props.config;
-			return {
-				...props.config,
-				type: "table",
-				groupItems: source.items,
-				items: source.tableItems || source.items.map((item) => ({
-					...item,
-					label: item.label || item.text,
-					text: null
-				}))
-			};
-		});
-		const groupListConfig = computed(() => {
-			if (isGroupListType(props.config.type)) return props.config;
-			const source = props.config;
-			return {
-				...props.config,
-				type: "groupList",
-				tableItems: source.items,
-				items: source.groupItems || source.items.map((item) => {
-					const text = item.text || item.label;
-					return {
-						...item,
-						text,
-						labelWidth: calcLabelWidth(text),
-						span: item.span || 12
-					};
-				})
-			};
-		});
+		const tableConfig = computed(() => toTableConfig(props.config));
+		const groupListConfig = computed(() => toGroupListConfig(props.config));
 		const currentConfig = computed(() => displayMode.value === "table" ? tableConfig.value : groupListConfig.value);
 		const addButtonSize = computed(() => {
+			if (currentConfig.value.addButtonConfig?.sticky) return "default";
 			if (displayMode.value === "table") return "small";
 			return props.config.enableToggleMode !== false ? "small" : "default";
 		});
+		const addButtonProps = computed(() => {
+			const custom = currentConfig.value.addButtonConfig?.props;
+			if (custom) return {
+				type: "primary",
+				...custom
+			};
+			if (displayMode.value === "table") return {
+				type: "primary",
+				plain: true
+			};
+			return {
+				type: "primary",
+				text: true
+			};
+		});
 		const toggleDisplayMode = () => {
 			displayMode.value = displayMode.value === "table" ? "groupList" : "table";
 		};
+		const tableGroupListRef = useTemplateRef("tableGroupList");
+		const { scrollLastItemIntoView } = useScrollLastItemIntoView(tableGroupListRef, () => Boolean(currentConfig.value.scrollLastItemIntoView) && displayMode.value === "groupList");
+		const handleAdd = async () => {
+			const expectedCount = await newHandler();
+			if (expectedCount !== null) await scrollLastItemIntoView(expectedCount);
+		};
 		const onChange = (v, eventData) => emit("change", v, eventData);
 		const onSelect = (...args) => emit("select", ...args);
 		const onAddDiffCount = () => emit("addDiffCount");
-		const onAdd = (rows) => {
-			rows.forEach((row) => {
-				newHandler(row);
-			});
+		const onAdd = async (rows) => {
+			let expectedCount = null;
+			for (const row of rows) expectedCount = await newHandler(row) ?? expectedCount;
+			if (expectedCount !== null) await scrollLastItemIntoView(expectedCount);
 		};
-		const tableGroupListRef = useTemplateRef("tableGroupList");
 		__expose({ toggleRowSelection: (row, selected) => tableGroupListRef.value?.toggleRowSelection?.(row, selected) });
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(displayMode.value === "table" ? Table_default : GroupList_default), mergeProps({ ref: "tableGroupList" }, _ctx.$attrs, {
@@ -102,6 +89,7 @@ var TableGroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				"last-values": __props.lastValues,
 				prop: __props.prop,
 				"label-width": __props.labelWidth,
+				"label-position": __props.labelPosition,
 				"show-index": __props.showIndex,
 				"sort-key": __props.sortKey,
 				sort: __props.sort,
@@ -109,39 +97,43 @@ var TableGroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				onSelect,
 				onAddDiffCount,
 				onAdd
-			}), createSlots({
-				"toggle-button": withCtx(() => [__props.config.enableToggleMode || __props.enableToggleMode ? (openBlock(), createBlock(unref(TMagicButton), {
-					key: 0,
-					icon: unref(Grid),
-					size: "small",
-					onClick: toggleDisplayMode
-				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(displayMode.value === "table" ? "展开配置" : "切换为表格"), 1)]),
-					_: 1
-				}, 8, ["icon"])) : createCommentVNode("v-if", true)]),
-				_: 2
-			}, [unref(addable) ? {
-				name: "add-button",
-				fn: withCtx(() => [createVNode(unref(TMagicButton), mergeProps({
-					class: displayMode.value === "table" ? "m-form-table-add-button" : "",
-					size: addButtonSize.value,
-					plain: displayMode.value === "table",
-					icon: unref(Plus),
-					text: "",
-					disabled: __props.disabled
-				}, currentConfig.value.addButtonConfig?.props || { type: "primary" }, { onClick: unref(newHandler) }), {
-					default: withCtx(() => [createTextVNode(toDisplayString(currentConfig.value.addButtonConfig?.text || (displayMode.value === "table" ? "新增一行" : `新增${groupListConfig.value.titlePrefix || ""}`)), 1)]),
-					_: 1
-				}, 16, [
-					"class",
-					"size",
-					"plain",
-					"icon",
-					"disabled",
-					"onClick"
-				])]),
-				key: "0"
-			} : void 0]), 1040, [
+			}), createSlots({ _: 2 }, [
+				__props.config.enableToggleMode || __props.enableToggleMode ? {
+					name: "toggle-button",
+					fn: withCtx(() => [createVNode(unref(TMagicButton), {
+						icon: unref(Grid),
+						size: "small",
+						onClick: toggleDisplayMode
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(displayMode.value === "table" ? "展开配置" : "切换为表格"), 1)]),
+						_: 1
+					}, 8, ["icon"])]),
+					key: "0"
+				} : void 0,
+				unref(addable) ? {
+					name: "add-button",
+					fn: withCtx(() => [createVNode(unref(TMagicButton), mergeProps({
+						class: displayMode.value === "table" ? "m-form-table-add-button" : "",
+						size: addButtonSize.value,
+						icon: unref(Plus),
+						disabled: __props.disabled
+					}, addButtonProps.value, { onClick: handleAdd }), {
+						default: withCtx(() => [createTextVNode(toDisplayString(currentConfig.value.addButtonConfig?.text || (displayMode.value === "table" ? `新增一行${groupListConfig.value.titlePrefix || ""}` : `新增${groupListConfig.value.titlePrefix || ""}`)), 1)]),
+						_: 1
+					}, 16, [
+						"class",
+						"size",
+						"icon",
+						"disabled"
+					])]),
+					key: "1"
+				} : void 0,
+				_ctx.$slots.title ? {
+					name: "title",
+					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps(slotProps)))]),
+					key: "2"
+				} : void 0
+			]), 1040, [
 				"model",
 				"name",
 				"config",
@@ -151,6 +143,7 @@ var TableGroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				"last-values",
 				"prop",
 				"label-width",
+				"label-position",
 				"show-index",
 				"sort-key",
 				"sort"

package/dist/es/containers/table-group-list/useAdd.js

@@ -1,4 +1,5 @@
 import { initValue } from "../../utils/form.js";
+import { applyMountValueEffects } from "../../utils/collectFields.js";
 import { computed, inject } from "vue";
 import { tMagicMessage } from "@tmagic/design";
 //#region packages/form/src/containers/table-group-list/useAdd.ts
@@ -7,39 +8,46 @@ var useAdd = (props, emit) => {
 	const addable = computed(() => {
 		const modelName = props.name || props.config.name || "";
 		if (!modelName) return false;
-		if (!props.model[modelName]?.length) return true;
-		if (typeof props.config.addable === "function") return props.config.addable(mForm, {
+		if (typeof props.config.addable === "function") return Boolean(props.config.addable(mForm, {
 			model: props.model[modelName],
 			formValue: mForm?.values,
 			prop: props.prop,
 			config: props.config
-		});
-		return typeof props.config.addable === "undefined" ? true : props.config.addable;
+		}));
+		if (!props.model[modelName]?.length) return true;
+		return typeof props.config.addable === "undefined" ? true : Boolean(props.config.addable);
 	});
+	/**
+	* 新增一项，返回新增后列表应有的长度；没有新增（超上限 / 被 beforeAddRow 拦下 / enum 用尽）返回 null。
+	*
+	* 只抛 change，不直接改 `props.model`：写回由 `MForm` 按 changeRecords 的 propPath 完成。
+	* 返回长度是给调用方用的——新项要等写回后才出现在 DOM 里，靠它才能判断等到了没有。
+	*/
 	const newHandler = async (row) => {
-		const modelName = props.name || props.config.name || "";
-		if (props.config.max && props.model[modelName].length >= props.config.max) {
+		const modelName = `${props.name || props.config.name || ""}`;
+		const list = Array.isArray(props.model[modelName]) ? props.model[modelName] : [];
+		if (props.config.max && list.length >= props.config.max) {
 			tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
-			return;
+			return null;
 		}
 		if (typeof props.config.beforeAddRow === "function") {
 			if (!await props.config.beforeAddRow(mForm, {
-				model: props.model[modelName],
+				model: list,
 				formValue: mForm?.values,
 				prop: props.prop
-			})) return;
+			})) return null;
 		}
 		const columns = props.config.items;
 		const enumValues = props.config.enum || [];
 		let enumV = [];
-		const { length } = props.model[modelName];
+		const { length } = list;
 		const key = props.config.key || "id";
 		let inputs = {};
 		if (enumValues.length) {
-			if (length >= enumValues.length) return;
+			if (length >= enumValues.length) return null;
 			enumV = enumValues.filter((item) => {
 				let i = 0;
-				for (; i < length; i++) if (item[key] === props.model[modelName][i][key]) break;
+				for (; i < length; i++) if (item[key] === list[i][key]) break;
 				return i === length;
 			});
 			if (enumV.length > 0) inputs = enumV[0];
@@ -48,7 +56,7 @@ var useAdd = (props, emit) => {
 		});
 		else {
 			if (typeof props.config.defaultAdd === "function") inputs = await props.config.defaultAdd(mForm, {
-				model: props.model[modelName],
+				model: list,
 				prop: props.prop,
 				formValue: mForm?.values
 			});
@@ -58,11 +66,13 @@ var useAdd = (props, emit) => {
 				initValues: inputs
 			});
 		}
-		if (props.sortKey && length) inputs[props.sortKey] = props.model[modelName][length - 1][props.sortKey] - 1;
-		emit("change", [...props.model[modelName], inputs], { changeRecords: [{
-			propPath: `${props.prop}.${props.model[modelName].length}`,
+		applyMountValueEffects(mForm, columns, inputs);
+		if (props.sortKey && length) inputs[props.sortKey] = list[length - 1][props.sortKey] - 1;
+		emit("change", [...list, inputs], { changeRecords: [{
+			propPath: `${props.prop}.${length}`,
 			value: inputs
 		}] });
+		return length + 1;
 	};
 	return {
 		addable,

package/dist/es/containers/table-group-list/useScrollLastItemIntoView.js

@@ -0,0 +1,72 @@
+import { nextTick } from "vue";
+//#region packages/form/src/containers/table-group-list/useScrollLastItemIntoView.ts
+var nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+/** 滚动要用的列表根与最后一项；组件已卸载（宿主重建了整棵表单）时返回 null */
+var resolveScrollTarget = (listRef) => {
+	const inst = listRef.value;
+	const root = inst instanceof HTMLElement ? inst : inst?.$el;
+	if (!(root instanceof HTMLElement)) return null;
+	const items = root.querySelectorAll(":scope > .m-fields-group-list-item");
+	const last = items[items.length - 1];
+	return {
+		root,
+		last: last instanceof HTMLElement ? last : null,
+		count: items.length
+	};
+};
+/** 吸顶标题自身的高度：滚动后新项的标题不能被上一层标题压住 */
+var getStickyHeaderOffset = (item) => {
+	const header = item.querySelector(":scope > .el-card__header, :scope > .t-card__header");
+	if (!(header instanceof HTMLElement)) return 0;
+	return Number.parseFloat(getComputedStyle(header).top) || 0;
+};
+/** 吸底「新增」按钮盖住的高度；嵌套列表的 footer 还用 bottom 给外层按钮留了位 */
+var getStickyFooterOffset = (root) => {
+	const footer = root.querySelector(":scope > .m-fields-group-list-footer.is-sticky-full");
+	if (!(footer instanceof HTMLElement)) return 0;
+	return footer.getBoundingClientRect().height + (Number.parseFloat(getComputedStyle(footer).bottom) || 0);
+};
+/**
+* 等列表渲染出至少 `expectedCount` 项、且最后一项的 DOM 节点连续两帧不变再返回。
+*
+* 新增只抛 change，写回要经过宿主（如编辑器属性面板）的异步校验与表单值重建，
+* 新项不一定当帧就出现；期间宿主还可能自己再追加项，末尾节点会换掉。
+* 只判「节点不变」会滚到旧的最后一项上，所以先等够数量再等稳定。
+*/
+var waitForStableTarget = async (listRef, expectedCount, timeout = 600) => {
+	const deadline = Date.now() + timeout;
+	let previous = null;
+	while (Date.now() < deadline) {
+		const target = resolveScrollTarget(listRef);
+		if (!target) return null;
+		if (target.count >= expectedCount && target.last && target.last === previous) return target;
+		previous = target.last;
+		await nextFrame();
+	}
+	return resolveScrollTarget(listRef);
+};
+/**
+* 新增后把最后一项滚进视口，避开吸顶标题与吸底按钮。
+*
+* `enabled` 为 false（未开配置、或不在 group-list 形态）时直接返回。
+*/
+var useScrollLastItemIntoView = (listRef, enabled) => {
+	const scrollLastItemIntoView = async (expectedCount) => {
+		if (!enabled()) return;
+		await nextTick();
+		const target = await waitForStableTarget(listRef, expectedCount);
+		if (!target?.last) return;
+		const { root, last } = target;
+		const top = getStickyHeaderOffset(last);
+		const bottom = getStickyFooterOffset(root);
+		last.style.scrollMarginTop = top ? `${top}px` : "";
+		last.style.scrollMarginBottom = bottom ? `${bottom}px` : "";
+		last.scrollIntoView({
+			behavior: "auto",
+			block: "nearest"
+		});
+	};
+	return { scrollLastItemIntoView };
+};
+//#endregion
+export { useScrollLastItemIntoView };

package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
-import { useAddField } from "../utils/useAddField.js";
 import { getConfig } from "../utils/config.js";
 import { filterFunction } from "../utils/form.js";
+import { useAddField } from "../utils/useAddField.js";
 import { computed, createBlock, defineComponent, inject, openBlock, ref, unref, watchEffect } from "vue";
 import { TMagicCascader } from "@tmagic/design";
 //#region packages/form/src/fields/Cascader.vue?vue&type=script&setup=true&lang.ts
-var Cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Cascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormCascader",
 	__name: "Cascader",
 	props: {

package/dist/es/fields/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { useAddField } from "../utils/useAddField.js";
 import { computed, createBlock, createSlots, createTextVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { TMagicCheckbox } from "@tmagic/design";
 //#region packages/form/src/fields/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Checkbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormCheckbox",
 	__name: "Checkbox",
 	props: {

package/dist/es/fields/CheckboxGroup/Index.js

@@ -0,0 +1,5 @@
+import Index_vue_vue_type_script_setup_true_lang_default from "./Index.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/fields/CheckboxGroup/Index.vue
+var Index_default = Index_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Index_default as default };

package/dist/es/fields/{CheckboxGroup.vue_vue_type_script_setup_true_lang.js → CheckboxGroup/Index.vue_vue_type_script_setup_true_lang.js}

@@ -1,11 +1,11 @@
-import { useAddField } from "../utils/useAddField.js";
-import { filterFunction } from "../utils/form.js";
+import { filterFunction } from "../../utils/form.js";
+import { useAddField } from "../../utils/useAddField.js";
 import { Fragment, computed, createBlock, createElementBlock, createTextVNode, defineComponent, inject, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { TMagicCheckbox, TMagicCheckboxGroup } from "@tmagic/design";
-//#region packages/form/src/fields/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
-var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+//#region packages/form/src/fields/CheckboxGroup/Index.vue?vue&type=script&setup=true&lang.ts
+var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormCheckGroup",
-	__name: "CheckboxGroup",
+	__name: "Index",
 	props: {
 		config: {},
 		model: {},
@@ -26,7 +26,6 @@ var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const props = __props;
 		const emit = __emit;
 		useAddField(props.prop);
-		if (props.model && !props.model[props.name]) props.model[props.name] = [];
 		const changeHandler = (v) => {
 			emit("change", v);
 		};
@@ -63,4 +62,4 @@ var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	}
 });
 //#endregion
-export { CheckboxGroup_vue_vue_type_script_setup_true_lang_default as default };
+export { Index_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/CheckboxGroup/effect.js

@@ -0,0 +1,8 @@
+//#region packages/form/src/fields/CheckboxGroup/effect.ts
+/** 空值初始化为空数组。 */
+var effect = ({ config, model }) => {
+	const { name } = config;
+	if (model && !model[name]) model[name] = [];
+};
+//#endregion
+export { effect };

package/dist/es/fields/ColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { useAddField } from "../utils/useAddField.js";
 import { createBlock, defineComponent, openBlock, unref } from "vue";
 import { TMagicColorPicker } from "@tmagic/design";
 //#region packages/form/src/fields/ColorPicker.vue?vue&type=script&setup=true&lang.ts
-var ColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormColorPicker",
 	__name: "ColorPicker",
 	props: {

package/dist/es/fields/Date/Index.js

@@ -0,0 +1,5 @@
+import Index_vue_vue_type_script_setup_true_lang_default from "./Index.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/fields/Date/Index.vue
+var Index_default = Index_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Index_default as default };

package/dist/es/fields/{Date.vue_vue_type_script_setup_true_lang.js → Date/Index.vue_vue_type_script_setup_true_lang.js}

@@ -1,11 +1,10 @@
-import { useAddField } from "../utils/useAddField.js";
-import { datetimeFormatter } from "../utils/form.js";
+import { useAddField } from "../../utils/useAddField.js";
 import { createBlock, defineComponent, openBlock, unref } from "vue";
 import { TMagicDatePicker } from "@tmagic/design";
-//#region packages/form/src/fields/Date.vue?vue&type=script&setup=true&lang.ts
-var Date_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+//#region packages/form/src/fields/Date/Index.vue?vue&type=script&setup=true&lang.ts
+var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormDate",
-	__name: "Date",
+	__name: "Index",
 	props: {
 		config: {},
 		model: {},
@@ -26,7 +25,6 @@ var Date_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		const props = __props;
 		const emit = __emit;
 		useAddField(props.prop);
-		props.model[props.name] = datetimeFormatter(props.model[props.name], "", props.config.valueFormat || "YYYY/MM/DD");
 		const changeHandler = (v) => {
 			emit("change", v);
 		};
@@ -52,4 +50,4 @@ var Date_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 	}
 });
 //#endregion
-export { Date_vue_vue_type_script_setup_true_lang_default as default };
+export { Index_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Date/effect.js

@@ -0,0 +1,10 @@
+import { datetimeFormatter } from "../../utils/form.js";
+//#region packages/form/src/fields/Date/effect.ts
+/** 按 `valueFormat` 归一化日期值。 */
+var effect = ({ config, model }) => {
+	if (!model) return;
+	const { name, valueFormat } = config;
+	model[name] = datetimeFormatter(model[name], "", valueFormat || "YYYY/MM/DD");
+};
+//#endregion
+export { effect };

package/dist/es/fields/DateTime/Index.js

@@ -0,0 +1,5 @@
+import Index_vue_vue_type_script_setup_true_lang_default from "./Index.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/fields/DateTime/Index.vue
+var Index_default = Index_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Index_default as default };

package/dist/es/fields/{DateTime.vue_vue_type_script_setup_true_lang.js → DateTime/Index.vue_vue_type_script_setup_true_lang.js}

@@ -1,11 +1,10 @@
-import { useAddField } from "../utils/useAddField.js";
-import { datetimeFormatter } from "../utils/form.js";
+import { useAddField } from "../../utils/useAddField.js";
 import { createBlock, defineComponent, openBlock, unref } from "vue";
 import { TMagicDatePicker } from "@tmagic/design";
-//#region packages/form/src/fields/DateTime.vue?vue&type=script&setup=true&lang.ts
-var DateTime_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+//#region packages/form/src/fields/DateTime/Index.vue?vue&type=script&setup=true&lang.ts
+var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormDateTime",
-	__name: "DateTime",
+	__name: "Index",
 	props: {
 		config: {},
 		model: {},
@@ -26,9 +25,6 @@ var DateTime_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const props = __props;
 		const emit = __emit;
 		useAddField(props.prop);
-		const value = props.model?.[props.name]?.toString();
-		if (props.model) if (!value || value === "Invalid Date") props.model[props.name] = "";
-		else props.model[props.name] = datetimeFormatter(props.model[props.name], "", props.config.valueFormat || "YYYY/MM/DD HH:mm:ss");
 		const changeHandler = (v) => {
 			emit("change", v);
 		};
@@ -57,4 +53,4 @@ var DateTime_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	}
 });
 //#endregion
-export { DateTime_vue_vue_type_script_setup_true_lang_default as default };
+export { Index_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/DateTime/effect.js

@@ -0,0 +1,15 @@
+import { datetimeFormatter } from "../../utils/form.js";
+//#region packages/form/src/fields/DateTime/effect.ts
+/** 按 `valueFormat` 归一化日期时间值，空值与非法值统一为空字符串。 */
+var effect = ({ config, model }) => {
+	if (!model) return;
+	const { name, valueFormat } = config;
+	const value = model[name]?.toString();
+	if (!value || value === "Invalid Date") {
+		model[name] = "";
+		return;
+	}
+	model[name] = datetimeFormatter(model[name], "", valueFormat || "YYYY/MM/DD HH:mm:ss");
+};
+//#endregion
+export { effect };

package/dist/es/fields/Daterange.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
-import { useAddField } from "../utils/useAddField.js";
 import { datetimeFormatter } from "../utils/form.js";
+import { useAddField } from "../utils/useAddField.js";
 import { createBlock, defineComponent, onUnmounted, openBlock, ref, unref, watch } from "vue";
 import { TMagicDatePicker } from "@tmagic/design";
 //#region packages/form/src/fields/Daterange.vue?vue&type=script&setup=true&lang.ts
-var Daterange_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Daterange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormDateRange",
 	__name: "Daterange",
 	props: {

package/dist/es/fields/Display/Index.js

@@ -0,0 +1,5 @@
+import Index_vue_vue_type_script_setup_true_lang_default from "./Index.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/fields/Display/Index.vue
+var Index_default = Index_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Index_default as default };

package/dist/es/fields/{Display.vue_vue_type_script_setup_true_lang.js → Display/Index.vue_vue_type_script_setup_true_lang.js}

@@ -1,11 +1,11 @@
-import { useAddField } from "../utils/useAddField.js";
-import { filterFunction } from "../utils/form.js";
+import { filterFunction } from "../../utils/form.js";
+import { useAddField } from "../../utils/useAddField.js";
 import { computed, createCommentVNode, createElementBlock, defineComponent, inject, openBlock, toDisplayString } from "vue";
-//#region packages/form/src/fields/Display.vue?vue&type=script&setup=true&lang.ts
+//#region packages/form/src/fields/Display/Index.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 0 };
-var Display_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormDisplay",
-	__name: "Display",
+	__name: "Index",
 	props: {
 		config: {},
 		model: {},
@@ -24,7 +24,6 @@ var Display_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	setup(__props) {
 		const props = __props;
 		const mForm = inject("mForm");
-		if (props.config.initValue && props.model) props.model[props.name] = props.config.initValue;
 		const text = computed(() => {
 			if (props.config.displayText) return filterFunction(mForm, props.config.displayText, props);
 			return props.model[props.name];
@@ -36,4 +35,4 @@ var Display_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	}
 });
 //#endregion
-export { Display_vue_vue_type_script_setup_true_lang_default as default };
+export { Index_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Display/effect.js

@@ -0,0 +1,8 @@
+//#region packages/form/src/fields/Display/effect.ts
+/** 把 `initValue` 写入 model。 */
+var effect = ({ config, model }) => {
+	const { initValue, name } = config;
+	if (initValue && model) model[name] = initValue;
+};
+//#endregion
+export { effect };

package/dist/es/fields/DynamicField/Index.js

@@ -0,0 +1,5 @@
+import Index_vue_vue_type_script_setup_true_lang_default from "./Index.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/fields/DynamicField/Index.vue
+var Index_default = Index_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Index_default as default };