@tmagic/form 1.7.10 → 1.7.12

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

@@ -1,9 +1,6 @@
-import { initValue } from "../utils/form.js";
 import GroupListItem_default from "./GroupListItem.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeProps, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, renderSlot } from "vue";
 import { cloneDeep } from "lodash-es";
-import { TMagicButton } from "@tmagic/design";
-import { Grid, Plus } from "@element-plus/icons-vue";
 //#region packages/form/src/containers/GroupList.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-group-list" };
 var _hoisted_2 = ["innerHTML"];
@@ -29,46 +26,16 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		labelWidth: {},
 		prop: {},
 		size: {},
-		disabled: { type: Boolean }
+		disabled: { type: Boolean },
+		showIndex: { type: Boolean }
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const mForm = inject("mForm");
-		const addable = computed(() => {
-			if (!props.name) return false;
-			if (typeof props.config.addable === "function") return props.config.addable(mForm, {
-				model: props.model[props.name],
-				formValue: mForm?.values,
-				prop: props.prop,
-				config: props.config
-			});
-			return typeof props.config.addable === "undefined" ? true : props.config.addable;
-		});
 		const changeHandler = (v, eventData) => {
 			emit("change", props.model, eventData);
 		};
-		const addHandler = async () => {
-			if (!props.name) return false;
-			let initValues = {};
-			if (typeof props.config.defaultAdd === "function") initValues = await props.config.defaultAdd(mForm, {
-				model: props.model[props.name],
-				formValue: mForm?.values,
-				prop: props.prop,
-				config: props.config
-			});
-			else if (props.config.defaultAdd) initValues = props.config.defaultAdd;
-			const groupValue = await initValue(mForm, {
-				config: props.config.items,
-				initValues
-			});
-			props.model[props.name].push(groupValue);
-			emit("change", props.model[props.name], { changeRecords: [{
-				propPath: `${props.prop}.${props.model[props.name].length - 1}`,
-				value: groupValue
-			}] });
-		};
 		const removeHandler = (index) => {
 			if (!props.name) return false;
 			props.model[props.name].splice(index, 1);
@@ -84,15 +51,6 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			props.model[props.name].splice(Math.min(Math.max(idx2, 0), length - 1), 0, currRow);
 			emit("change", props.model[props.name]);
 		};
-		const toggleMode = () => {
-			props.config.type = "table";
-			props.config.groupItems = props.config.items;
-			props.config.items = props.config.tableItems || props.config.items.map((item) => ({
-				...item,
-				label: item.label || item.text,
-				text: null
-			}));
-		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		const getLastValues = (item, index) => item?.[index] || {};
 		return (_ctx, _cache) => {
@@ -106,7 +64,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					return openBlock(), createBlock(GroupListItem_default, {
 						key: index,
 						model: item,
-						lastValues: getLastValues(__props.lastValues[__props.name], Number(index)),
+						lastValues: getLastValues(__props.lastValues?.[__props.name], Number(index)),
 						"is-compare": __props.isCompare,
 						config: __props.config,
 						prop: __props.prop,
@@ -133,29 +91,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						"group-model"
 					]);
 				}), 128)),
-				createElementVNode("div", _hoisted_4, [__props.config.enableToggleMode ? (openBlock(), createBlock(unref(TMagicButton), {
-					key: 0,
-					icon: unref(Grid),
-					size: "small",
-					onClick: toggleMode
-				}, {
-					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("切换为表格", -1)])]),
-					_: 1
-				}, 8, ["icon"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [addable.value ? (openBlock(), createBlock(unref(TMagicButton), mergeProps({
-					key: 0,
-					size: __props.config.enableToggleMode ? "small" : "default",
-					icon: unref(Plus)
-				}, __props.config.addButtonConfig?.props || { type: "primary" }, {
-					disabled: __props.disabled,
-					onClick: addHandler
-				}), {
-					default: withCtx(() => [createTextVNode(toDisplayString(__props.config.addButtonConfig?.text || "新增"), 1)]),
-					_: 1
-				}, 16, [
-					"size",
-					"icon",
-					"disabled"
-				])) : createCommentVNode("v-if", true)])])
+				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "add-button")])])
 			]);
 		};
 	}

package/dist/es/{table → containers/table}/ActionsColumn.js

@@ -1,5 +1,5 @@
 import ActionsColumn_vue_vue_type_script_setup_true_lang_default from "./ActionsColumn.vue_vue_type_script_setup_true_lang.js";
-//#region packages/form/src/table/ActionsColumn.vue
+//#region packages/form/src/containers/table/ActionsColumn.vue
 var ActionsColumn_default = ActionsColumn_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { ActionsColumn_default as default };

package/dist/es/{table → containers/table}/ActionsColumn.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { Fragment, createBlock, createCommentVNode, createElementBlock, createVN
 import { cloneDeep } from "lodash-es";
 import { TMagicButton, TMagicTooltip } from "@tmagic/design";
 import { Delete, DocumentCopy, Sort } from "@element-plus/icons-vue";
-//#region packages/form/src/table/ActionsColumn.vue?vue&type=script&setup=true&lang.ts
+//#region packages/form/src/containers/table/ActionsColumn.vue?vue&type=script&setup=true&lang.ts
 var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ActionsColumn",
 	props: {

package/dist/es/{table → containers/table}/SortColumn.js

@@ -1,5 +1,5 @@
 import SortColumn_vue_vue_type_script_setup_true_lang_default from "./SortColumn.vue_vue_type_script_setup_true_lang.js";
-//#region packages/form/src/table/SortColumn.vue
+//#region packages/form/src/containers/table/SortColumn.vue
 var SortColumn_default = SortColumn_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { SortColumn_default as default };

package/dist/es/{table → containers/table}/SortColumn.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
 import { TMagicButton, TMagicTooltip } from "@tmagic/design";
 import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
-//#region packages/form/src/table/SortColumn.vue?vue&type=script&setup=true&lang.ts
+//#region packages/form/src/containers/table/SortColumn.vue?vue&type=script&setup=true&lang.ts
 var SortColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "SortColumn",
 	props: {

package/dist/es/{table → containers/table}/Table.js

@@ -1,5 +1,5 @@
 import Table_vue_vue_type_script_setup_true_lang_default from "./Table.vue_vue_type_script_setup_true_lang.js";
-//#region packages/form/src/table/Table.vue
+//#region packages/form/src/containers/table/Table.vue
 var Table_default = Table_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { Table_default as default };

package/dist/es/{table → containers/table}/Table.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,4 @@
-import { sortChange } from "../utils/form.js";
-import { useAdd } from "./useAdd.js";
+import { sortChange } from "../../utils/form.js";
 import { useFullscreen } from "./useFullscreen.js";
 import { useImport } from "./useImport.js";
 import { usePagination } from "./usePagination.js";
@@ -7,9 +6,9 @@ import { useSelection } from "./useSelection.js";
 import { useSortable } from "./useSortable.js";
 import { useTableColumns } from "./useTableColumns.js";
 import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
-import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from "@tmagic/design";
-import { FullScreen, Grid, Plus } from "@element-plus/icons-vue";
-//#region packages/form/src/table/Table.vue?vue&type=script&setup=true&lang.ts
+import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload } from "@tmagic/design";
+import { FullScreen } from "@element-plus/icons-vue";
+//#region packages/form/src/containers/table/Table.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["innerHTML"];
 var _hoisted_2 = { style: {
 	"display": "flex",
@@ -41,10 +40,6 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		sortKey: { default: "" },
 		text: {},
 		size: {},
-		enableToggleMode: {
-			type: Boolean,
-			default: true
-		},
 		showIndex: {
 			type: Boolean,
 			default: true
@@ -53,7 +48,8 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	emits: [
 		"change",
 		"select",
-		"addDiffCount"
+		"addDiffCount",
+		"add"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
@@ -61,36 +57,13 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const modelName = computed(() => props.name || props.config.name || "");
 		const tMagicTableRef = useTemplateRef("tMagicTable");
 		const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentChange } = usePagination(props, modelName);
-		const { nextZIndex } = useZIndex();
 		const updateKey = ref(1);
-		const { addable, newHandler } = useAdd(props, emit);
 		const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
 		useSortable(props, emit, tMagicTableRef, modelName, updateKey);
-		const { isFullscreen, toggleFullscreen } = useFullscreen();
-		const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
+		const { isFullscreen, fullscreenZIndex, toggleFullscreen } = useFullscreen();
+		const { importable, excelHandler, clearHandler } = useImport(props, emit);
 		const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
 		const data = computed(() => props.config.pagination ? paginationData.value : props.model[modelName.value]);
-		const toggleMode = () => {
-			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`;
-			};
-			props.config.type = "groupList";
-			props.config.enableToggleMode = true;
-			props.config.tableItems = props.config.items;
-			props.config.items = props.config.groupItems || props.config.items.map((item) => {
-				const text = item.text || item.label;
-				const labelWidth = calcLabelWidth(text);
-				return {
-					...item,
-					text,
-					labelWidth,
-					span: item.span || 12
-				};
-			});
-		};
 		const sortChangeHandler = (sortOptions) => {
 			const modelName = props.name || props.config.name || "";
 			sortChange(props.model[modelName], sortOptions);
@@ -102,7 +75,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				disabled: !unref(isFullscreen)
 			}, [createElementVNode("div", mergeProps(_ctx.$attrs, {
 				class: ["m-fields-table-wrap", { fixed: unref(isFullscreen) }],
-				style: unref(isFullscreen) ? `z-index: ${unref(nextZIndex)()}` : ""
+				style: unref(isFullscreen) ? `z-index: ${unref(fullscreenZIndex)}` : ""
 			}), [createElementVNode("div", { class: normalizeClass(["m-fields-table", { "m-fields-table-item-extra": __props.config.itemExtra }]) }, [
 				__props.config.extra ? (openBlock(), createElementBlock("span", {
 					key: 0,
@@ -139,15 +112,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				}, 8, ["disabled"]),
 				renderSlot(_ctx.$slots, "default"),
 				createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
-					__props.enableToggleMode && __props.config.enableToggleMode !== false && !unref(isFullscreen) ? (openBlock(), createBlock(unref(TMagicButton), {
-						key: 0,
-						icon: unref(Grid),
-						size: "small",
-						onClick: toggleMode
-					}, {
-						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("展开配置", -1)])]),
-						_: 1
-					}, 8, ["icon"])) : createCommentVNode("v-if", true),
+					!unref(isFullscreen) ? renderSlot(_ctx.$slots, "toggle-button", { key: 0 }) : createCommentVNode("v-if", true),
 					__props.config.enableFullscreen !== false ? (openBlock(), createBlock(unref(TMagicButton), {
 						key: 1,
 						icon: unref(FullScreen),
@@ -172,7 +137,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 							disabled: __props.disabled,
 							plain: ""
 						}, {
-							default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("导入EXCEL", -1)])]),
+							default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("导入EXCEL", -1)])]),
 							_: 1
 						}, 8, ["disabled"])]),
 						_: 1
@@ -185,22 +150,10 @@ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						plain: "",
 						onClick: unref(clearHandler)
 					}, {
-						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("清空", -1)])]),
+						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("清空", -1)])]),
 						_: 1
 					}, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true)
-				]), unref(addable) ? (openBlock(), createBlock(unref(TMagicButton), mergeProps({
-					key: 0,
-					class: "m-form-table-add-button",
-					size: "small",
-					plain: "",
-					icon: unref(Plus)
-				}, __props.config.addButtonConfig?.props || { type: "primary" }, {
-					disabled: __props.disabled,
-					onClick: _cache[0] || (_cache[0] = ($event) => unref(newHandler)())
-				}), {
-					default: withCtx(() => [createTextVNode(toDisplayString(__props.config.addButtonConfig?.text || "新增一行"), 1)]),
-					_: 1
-				}, 16, ["icon", "disabled"])) : createCommentVNode("v-if", true)]),
+				]), renderSlot(_ctx.$slots, "add-button")]),
 				__props.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(TMagicPagination), {
 					layout: "total, sizes, prev, pager, next, jumper",
 					"hide-on-single-page": __props.model[modelName.value].length < unref(pageSize),

package/dist/es/containers/table/useFullscreen.js

@@ -0,0 +1,22 @@
+import { ref, watch } from "vue";
+import { useZIndex } from "@tmagic/design";
+//#region packages/form/src/containers/table/useFullscreen.ts
+var useFullscreen = () => {
+	const { nextZIndex } = useZIndex();
+	const fullscreenZIndex = ref(nextZIndex());
+	const isFullscreen = ref(false);
+	const toggleFullscreen = () => {
+		if (isFullscreen.value) isFullscreen.value = false;
+		else isFullscreen.value = true;
+	};
+	watch(isFullscreen, (value) => {
+		if (value) fullscreenZIndex.value = nextZIndex();
+	});
+	return {
+		isFullscreen,
+		fullscreenZIndex,
+		toggleFullscreen
+	};
+};
+//#endregion
+export { useFullscreen };

package/dist/es/{table → containers/table}/useImport.js

@@ -1,7 +1,7 @@
 import { computed, inject, useTemplateRef } from "vue";
 import { asyncLoadJs } from "@tmagic/utils";
-//#region packages/form/src/table/useImport.ts
-var useImport = (props, emit, newHandler) => {
+//#region packages/form/src/containers/table/useImport.ts
+var useImport = (props, emit) => {
 	const mForm = inject("mForm");
 	const modelName = computed(() => props.name || props.config.name || "");
 	const importable = computed(() => {
@@ -21,9 +21,7 @@ var useImport = (props, emit, newHandler) => {
 			const pdata = globalThis.XLSX.read(data, { type: "array" });
 			pdata.SheetNames.forEach((sheetName) => {
 				const arr = globalThis.XLSX.utils.sheet_to_json(pdata.Sheets[sheetName], { header: 1 });
-				if (arr?.[0]) arr.forEach((row) => {
-					newHandler(row);
-				});
+				if (arr?.[0]) emit("add", arr);
 				setTimeout(() => {
 					excelBtn.value?.clearFiles();
 				}, 300);

package/dist/es/{table → containers/table}/usePagination.js

@@ -1,6 +1,6 @@
-import { getDataByPage } from "../utils/form.js";
+import { getDataByPage } from "../../utils/form.js";
 import { computed, ref } from "vue";
-//#region packages/form/src/table/usePagination.ts
+//#region packages/form/src/containers/table/usePagination.ts
 var usePagination = (props, modelName) => {
 	const pageSize = ref(10);
 	/**

package/dist/es/{table → containers/table}/useSelection.js

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-//#region packages/form/src/table/useSelection.ts
+//#region packages/form/src/containers/table/useSelection.ts
 var useSelection = (props, emit, tMagicTableRef) => {
 	const mForm = inject("mForm");
 	const selectHandle = (selection, row) => {

package/dist/es/{table → containers/table}/useSortable.js

@@ -1,6 +1,6 @@
-import { sortArray } from "../utils/form.js";
+import { sortArray } from "../../utils/form.js";
 import { inject, nextTick, watchEffect } from "vue";
-//#region packages/form/src/table/useSortable.ts
+//#region packages/form/src/containers/table/useSortable.ts
 var SortablePromise;
 var loadSortable = () => SortablePromise ??= import("sortablejs").then((m) => m.default);
 var useSortable = (props, emit, tMagicTableRef, modelName, updateKey) => {

package/dist/es/{table → containers/table}/useTableColumns.js

@@ -1,12 +1,12 @@
-import { display, getDataByPage, sortArray } from "../utils/form.js";
-import Container_default from "../containers/Container.js";
+import { display, getDataByPage, sortArray } from "../../utils/form.js";
+import Container_default from "../Container.js";
 import ActionsColumn_default from "./ActionsColumn.js";
 import SortColumn_default from "./SortColumn.js";
 import { computed, h, inject } from "vue";
 import { cloneDeep } from "lodash-es";
 import { TMagicIcon, TMagicTooltip } from "@tmagic/design";
 import { WarningFilled } from "@element-plus/icons-vue";
-//#region packages/form/src/table/useTableColumns.ts
+//#region packages/form/src/containers/table/useTableColumns.ts
 var useTableColumns = (props, emit, currentPage, pageSize, modelName) => {
 	const mForm = inject("mForm");
 	const display$1 = (fuc) => display(mForm, fuc, props);
@@ -123,7 +123,7 @@ var useTableColumns = (props, emit, currentPage, pageSize, modelName) => {
 			columns.push({
 				props: {
 					prop: column.name,
-					label: column.label,
+					label: column.label || column.text,
 					width: column.width,
 					sortable: column.sortable,
 					sortOrders: ["ascending", "descending"],
@@ -147,7 +147,7 @@ var useTableColumns = (props, emit, currentPage, pageSize, modelName) => {
 						display: "inline-flex",
 						alignItems: "center",
 						gap: "5px"
-					} }, [h("span", column.label), h(TMagicIcon, {}, { default: () => h(WarningFilled) })]),
+					} }, [h("span", column.label || column.text), h(TMagicIcon, {}, { default: () => h(WarningFilled) })]),
 					content: () => h("div", { innerHTML: titleTipValue })
 				}) : void 0
 			});

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

@@ -0,0 +1,5 @@
+import TableGroupList_vue_vue_type_script_setup_true_lang_default from "./TableGroupList.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/containers/table-group-list/TableGroupList.vue
+var TableGroupList_default = TableGroupList_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TableGroupList_default as default };

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

@@ -0,0 +1,161 @@
+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 { 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({
+	name: "MFormTableGroupList",
+	inheritAttrs: false,
+	__name: "TableGroupList",
+	props: {
+		model: {},
+		lastValues: {},
+		isCompare: { type: Boolean },
+		config: {},
+		name: {},
+		prop: {},
+		labelWidth: {},
+		disabled: { type: Boolean },
+		size: {},
+		enableToggleMode: { type: Boolean },
+		showIndex: { type: Boolean },
+		sortKey: {},
+		sort: { type: Boolean }
+	},
+	emits: [
+		"change",
+		"select",
+		"addDiffCount"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		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 currentConfig = computed(() => displayMode.value === "table" ? tableConfig.value : groupListConfig.value);
+		const addButtonSize = computed(() => {
+			if (displayMode.value === "table") return "small";
+			return props.config.enableToggleMode !== false ? "small" : "default";
+		});
+		const toggleDisplayMode = () => {
+			displayMode.value = displayMode.value === "table" ? "groupList" : "table";
+		};
+		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 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, {
+				model: __props.model,
+				name: `${__props.name}`,
+				config: currentConfig.value,
+				disabled: __props.disabled,
+				size: __props.size,
+				"is-compare": __props.isCompare,
+				"last-values": __props.lastValues,
+				prop: __props.prop,
+				"label-width": __props.labelWidth,
+				"show-index": __props.showIndex,
+				"sort-key": __props.sortKey,
+				sort: __props.sort,
+				onChange,
+				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),
+					disabled: __props.disabled
+				}, currentConfig.value.addButtonConfig?.props || { type: "primary" }, { onClick: unref(newHandler) }), {
+					default: withCtx(() => [createTextVNode(toDisplayString(currentConfig.value.addButtonConfig?.text || (displayMode.value === "table" ? "新增一行" : "新增")), 1)]),
+					_: 1
+				}, 16, [
+					"class",
+					"size",
+					"plain",
+					"icon",
+					"disabled",
+					"onClick"
+				])]),
+				key: "0"
+			} : void 0]), 1040, [
+				"model",
+				"name",
+				"config",
+				"disabled",
+				"size",
+				"is-compare",
+				"last-values",
+				"prop",
+				"label-width",
+				"show-index",
+				"sort-key",
+				"sort"
+			]);
+		};
+	}
+});
+//#endregion
+export { TableGroupList_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -1,16 +1,18 @@
-import { initValue } from "../utils/form.js";
+import { initValue } from "../../utils/form.js";
 import { computed, inject } from "vue";
 import { tMagicMessage } from "@tmagic/design";
-//#region packages/form/src/table/useAdd.ts
+//#region packages/form/src/containers/table-group-list/useAdd.ts
 var useAdd = (props, emit) => {
 	const mForm = inject("mForm");
 	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, {
 			model: props.model[modelName],
 			formValue: mForm?.values,
-			prop: props.prop
+			prop: props.prop,
+			config: props.config
 		});
 		return typeof props.config.addable === "undefined" ? true : props.config.addable;
 	});
@@ -21,7 +23,7 @@ var useAdd = (props, emit) => {
 			return;
 		}
 		if (typeof props.config.beforeAddRow === "function") {
-			if (!props.config.beforeAddRow(mForm, {
+			if (!await props.config.beforeAddRow(mForm, {
 				model: props.model[modelName],
 				formValue: mForm?.values,
 				prop: props.prop

package/dist/es/index.js

@@ -13,8 +13,7 @@ import FlexLayout_default from "./containers/FlexLayout.js";
 import Panel_default from "./containers/Panel.js";
 import Row_default from "./containers/Row.js";
 import Tabs_default from "./containers/Tabs.js";
-import Table_default from "./table/Table.js";
-import GroupList_default from "./containers/GroupList.js";
+import TableGroupList_default from "./containers/table-group-list/TableGroupList.js";
 import Text_default from "./fields/Text.js";
 import Number_default from "./fields/Number.js";
 import NumberRange_default from "./fields/NumberRange.js";
@@ -38,4 +37,4 @@ import plugin_default from "./plugin.js";
 export * from "@tmagic/form-schema";
 var createForm = (config) => config;
 //#endregion
-export { Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, GroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, Table_default as MTable, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, useAddField };
+export { Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, useAddField };

package/dist/es/plugin.js

@@ -8,8 +8,7 @@ import FlexLayout_default from "./containers/FlexLayout.js";
 import Panel_default from "./containers/Panel.js";
 import Row_default from "./containers/Row.js";
 import Tabs_default from "./containers/Tabs.js";
-import Table_default from "./table/Table.js";
-import GroupList_default from "./containers/GroupList.js";
+import TableGroupList_default from "./containers/table-group-list/TableGroupList.js";
 import Text_default from "./fields/Text.js";
 import Number_default from "./fields/Number.js";
 import NumberRange_default from "./fields/NumberRange.js";
@@ -41,11 +40,11 @@ var plugin_default = { install(app, opt = {}) {
 	app.component("m-form-dialog", FormDialog_default);
 	app.component("m-form-container", Container_default);
 	app.component("m-form-fieldset", Fieldset_default);
-	app.component("m-form-group-list", GroupList_default);
+	app.component("m-form-group-list", TableGroupList_default);
 	app.component("m-form-panel", Panel_default);
 	app.component("m-form-row", Row_default);
 	app.component("m-form-step", Step_default);
-	app.component("m-form-table", Table_default);
+	app.component("m-form-table", TableGroupList_default);
 	app.component("m-form-tab", Tabs_default);
 	app.component("m-form-flex-layout", FlexLayout_default);
 	app.component("m-fields-text", Text_default);