@tmagic/table 1.8.0-manmanyu.22 → 1.8.0-manmanyu.23

package/dist/es/ActionButton.js

@@ -0,0 +1,5 @@
+import ActionButton_vue_vue_type_script_setup_true_lang_default from "./ActionButton.vue_vue_type_script_setup_true_lang.js";
+//#region packages/table/src/ActionButton.vue
+var ActionButton_default = ActionButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ActionButton_default as default };

package/dist/es/ActionButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { disabled, formatActionText } from "./actionHelpers.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, vShow, withCtx, withDirectives } from "vue";
+import { TMagicButton, TMagicTooltip } from "@tmagic/design";
+//#region packages/table/src/ActionButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var ActionButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MTableActionButton",
+	__name: "ActionButton",
+	props: {
+		action: {},
+		row: {},
+		index: {},
+		btnClass: { default: "action-btn" },
+		visible: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const onClick = () => emit("click", props.action, props.row, props.index);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicTooltip), {
+				placement: __props.action.tooltipPlacement || "top",
+				disabled: !Boolean(__props.action.tooltip),
+				content: __props.action.tooltip
+			}, {
+				default: withCtx(() => [withDirectives(createVNode(unref(TMagicButton), {
+					class: normalizeClass(__props.btnClass),
+					link: "",
+					size: "small",
+					type: __props.action.buttonType || "primary",
+					icon: __props.action.icon,
+					disabled: unref(disabled)(__props.action.disabled, __props.row),
+					onClick
+				}, {
+					default: withCtx(() => [createElementVNode("span", { innerHTML: unref(formatActionText)(__props.action.text, __props.row) }, null, 8, _hoisted_1)]),
+					_: 1
+				}, 8, [
+					"class",
+					"type",
+					"icon",
+					"disabled"
+				]), [[vShow, __props.visible]])]),
+				_: 1
+			}, 8, [
+				"placement",
+				"disabled",
+				"content"
+			]);
+		};
+	}
+});
+//#endregion
+export { ActionButton_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/ActionPopconfirm.js

@@ -0,0 +1,5 @@
+import ActionPopconfirm_vue_vue_type_script_setup_true_lang_default from "./ActionPopconfirm.vue_vue_type_script_setup_true_lang.js";
+//#region packages/table/src/ActionPopconfirm.vue
+var ActionPopconfirm_default = ActionPopconfirm_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ActionPopconfirm_default as default };

package/dist/es/ActionPopconfirm.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,50 @@
+import { formatActionText } from "./actionHelpers.js";
+import ActionButton_default from "./ActionButton.js";
+import { createBlock, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+import { TMagicPopconfirm } from "@tmagic/design";
+//#region packages/table/src/ActionPopconfirm.vue?vue&type=script&setup=true&lang.ts
+var ActionPopconfirm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MTableActionPopconfirm",
+	__name: "ActionPopconfirm",
+	props: {
+		action: {},
+		row: {},
+		index: {},
+		btnClass: { default: "action-btn" },
+		visible: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["confirm"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const onConfirm = () => emit("confirm", props.action, props.row, props.index);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicPopconfirm), {
+				placement: "top",
+				width: __props.action.popconfirmWidth,
+				title: unref(formatActionText)(__props.action.confirmText, __props.row) || "确定执行此操作？",
+				onConfirm
+			}, {
+				reference: withCtx(() => [createVNode(ActionButton_default, {
+					action: __props.action,
+					row: __props.row,
+					index: __props.index,
+					"btn-class": __props.btnClass,
+					visible: __props.visible
+				}, null, 8, [
+					"action",
+					"row",
+					"index",
+					"btn-class",
+					"visible"
+				])]),
+				_: 1
+			}, 8, ["width", "title"]);
+		};
+	}
+});
+//#endregion
+export { ActionPopconfirm_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/ActionsColumn.js

@@ -1,4 +1,5 @@
 import ActionsColumn_vue_vue_type_script_setup_true_lang_default from "./ActionsColumn.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                              */
 //#region packages/table/src/ActionsColumn.vue
 var ActionsColumn_default = ActionsColumn_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/es/ActionsColumn.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,12 @@
-import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, vShow, withCtx, withDirectives } from "vue";
+import { display } from "./actionHelpers.js";
+import ActionButton_default from "./ActionButton.js";
+import ActionPopconfirm_default from "./ActionPopconfirm.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, unref, vShow, withCtx, withDirectives, withModifiers } from "vue";
 import { cloneDeep } from "lodash-es";
-import { TMagicButton, TMagicPopconfirm, TMagicTooltip, tMagicMessage } from "@tmagic/design";
+import { TMagicButton, TMagicPopover, tMagicMessage } from "@tmagic/design";
+import { ArrowDown, ArrowRight } from "@element-plus/icons-vue";
 //#region packages/table/src/ActionsColumn.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["innerHTML"];
-var _hoisted_2 = ["innerHTML"];
+var _hoisted_1 = { class: "sub-actions" };
 var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTableActionsColumn",
 	__name: "ActionsColumn",
@@ -16,23 +19,13 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		index: {}
 	},
 	emits: ["after-action", "after-action-cancel"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
-		const emit = __emit;
-		const display = (fuc, row) => {
-			if (typeof fuc === "function") return fuc(row);
-			if (typeof fuc === "boolean") return fuc;
-			return true;
-		};
-		const disabled = (fuc, row) => {
-			if (typeof fuc === "function") return fuc(row);
-			if (typeof fuc === "boolean") return fuc;
-			return false;
-		};
-		const formatter = (fuc, row) => {
-			if (typeof fuc === "function") return fuc(row);
-			return fuc;
+		const popoverVisible = ref(false);
+		const togglePopover = () => {
+			popoverVisible.value = !popoverVisible.value;
 		};
+		const emit = __emit;
 		const actionHandler = async (action, row, index) => {
 			await action.before?.(row, index);
 			if (action.type === "edit") props.editState[index] = cloneDeep(row);
@@ -62,64 +55,92 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			if (cancel) await cancel({ index });
 			emit("after-action-cancel", { index });
 		};
+		__expose({
+			actionHandler,
+			save,
+			cancel
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.actions, (action, actionIndex) => {
-					return openBlock(), createElementBlock(Fragment, { key: actionIndex }, [action.popconfirm ? (openBlock(), createBlock(unref(TMagicPopconfirm), {
+					return openBlock(), createElementBlock(Fragment, { key: actionIndex }, [action.popconfirm ? (openBlock(), createBlock(ActionPopconfirm_default, {
 						key: 0,
-						placement: "top",
-						width: action.popconfirmWidth,
-						title: formatter(action.confirmText, __props.row) || "确定执行此操作？",
-						onConfirm: ($event) => actionHandler(action, __props.row, __props.index)
-					}, {
-						reference: withCtx(() => [withDirectives(createVNode(unref(TMagicButton), {
-							class: "action-btn",
-							link: "",
-							size: "small",
-							type: action.buttonType || "primary",
-							icon: action.icon,
-							disabled: disabled(action.disabled, __props.row)
-						}, {
-							default: withCtx(() => [createElementVNode("span", { innerHTML: formatter(action.text, __props.row) }, null, 8, _hoisted_1)]),
-							_: 2
-						}, 1032, [
-							"type",
-							"icon",
-							"disabled"
-						]), [[vShow, display(action.display, __props.row) && !__props.editState[__props.index]]])]),
-						_: 2
-					}, 1032, [
-						"width",
-						"title",
-						"onConfirm"
-					])) : (openBlock(), createBlock(unref(TMagicTooltip), {
+						action,
+						row: __props.row,
+						index: __props.index,
+						visible: unref(display)(action.display, __props.row) && !__props.editState[__props.index],
+						onConfirm: actionHandler
+					}, null, 8, [
+						"action",
+						"row",
+						"index",
+						"visible"
+					])) : action.type === "sub-actions" ? (openBlock(), createBlock(unref(TMagicPopover), {
 						key: 1,
-						placement: action.tooltipPlacement || "top",
-						disabled: !Boolean(action.tooltip),
-						content: action.tooltip
+						visible: popoverVisible.value,
+						"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => popoverVisible.value = $event),
+						trigger: "click",
+						placement: action.subActionConfig?.placement || "bottom",
+						width: action.subActionConfig?.popoverWidth,
+						"popper-class": action.subActionConfig?.popoverClass,
+						"destroy-on-close": action.subActionConfig?.popoverDestroyOnClose
 					}, {
-						default: withCtx(() => [withDirectives(createVNode(unref(TMagicButton), {
+						reference: withCtx(() => [withDirectives(createVNode(unref(TMagicButton), {
 							class: "action-btn",
 							link: "",
 							size: "small",
 							type: action.buttonType || "primary",
-							icon: action.icon,
-							disabled: disabled(action.disabled, __props.row),
-							onClick: ($event) => actionHandler(action, __props.row, __props.index)
-						}, {
-							default: withCtx(() => [createElementVNode("span", { innerHTML: formatter(action.text, __props.row) }, null, 8, _hoisted_2)]),
-							_: 2
-						}, 1032, [
-							"type",
-							"icon",
-							"disabled",
-							"onClick"
-						]), [[vShow, display(action.display, __props.row) && !__props.editState[__props.index]]])]),
+							icon: popoverVisible.value ? unref(ArrowDown) : unref(ArrowRight),
+							onClick: withModifiers(togglePopover, ["stop"])
+						}, null, 8, ["type", "icon"]), [[vShow, action.subActionConfig?.items?.length && unref(display)(action.display, __props.row) && !__props.editState[__props.index]]])]),
+						default: withCtx(() => [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(action.subActionConfig?.items, (subAction, subIndex) => {
+							return openBlock(), createElementBlock(Fragment, { key: subIndex }, [subAction.popconfirm ? (openBlock(), createBlock(ActionPopconfirm_default, {
+								key: 0,
+								action: subAction,
+								row: __props.row,
+								index: __props.index,
+								"btn-class": "sub-action-btn",
+								visible: unref(display)(subAction.display, __props.row),
+								onConfirm: actionHandler
+							}, null, 8, [
+								"action",
+								"row",
+								"index",
+								"visible"
+							])) : (openBlock(), createBlock(ActionButton_default, {
+								key: 1,
+								action: subAction,
+								row: __props.row,
+								index: __props.index,
+								"btn-class": "sub-action-btn",
+								visible: unref(display)(subAction.display, __props.row),
+								onClick: actionHandler
+							}, null, 8, [
+								"action",
+								"row",
+								"index",
+								"visible"
+							]))], 64);
+						}), 128))])]),
 						_: 2
 					}, 1032, [
+						"visible",
 						"placement",
-						"disabled",
-						"content"
+						"width",
+						"popper-class",
+						"destroy-on-close"
+					])) : (openBlock(), createBlock(ActionButton_default, {
+						key: 2,
+						action,
+						row: __props.row,
+						index: __props.index,
+						visible: unref(display)(action.display, __props.row) && !__props.editState[__props.index],
+						onClick: actionHandler
+					}, null, 8, [
+						"action",
+						"row",
+						"index",
+						"visible"
 					]))], 64);
 				}), 128)),
 				withDirectives(createVNode(unref(TMagicButton), {
@@ -127,9 +148,9 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					link: "",
 					type: "primary",
 					size: "small",
-					onClick: _cache[0] || (_cache[0] = ($event) => save(__props.index, __props.config))
+					onClick: _cache[1] || (_cache[1] = ($event) => save(__props.index, __props.config))
 				}, {
-					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("保存", -1)])]),
+					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("保存", -1)])]),
 					_: 1
 				}, 512), [[vShow, __props.editState[__props.index]]]),
 				withDirectives(createVNode(unref(TMagicButton), {
@@ -137,9 +158,9 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					link: "",
 					type: "danger",
 					size: "small",
-					onClick: _cache[1] || (_cache[1] = ($event) => cancel(__props.index, __props.config))
+					onClick: _cache[2] || (_cache[2] = ($event) => cancel(__props.index, __props.config))
 				}, {
-					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("取消", -1)])]),
+					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("取消", -1)])]),
 					_: 1
 				}, 512), [[vShow, __props.editState[__props.index]]])
 			], 64);

package/dist/es/ComponentColumn.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
-import { createBlock, defineComponent, mergeProps, openBlock, resolveDynamicComponent, toHandlers } from "vue";
+import { resolveComponentListeners, resolveComponentProps } from "./componentHelpers.js";
+import { createBlock, defineComponent, mergeProps, openBlock, resolveDynamicComponent, toHandlers, unref } from "vue";
 //#region packages/table/src/ComponentColumn.vue?vue&type=script&setup=true&lang.ts
 var ComponentColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTableColumn",
@@ -9,17 +10,8 @@ var ComponentColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		index: {}
 	},
 	setup(__props) {
-		const props = __props;
-		const componentProps = (row, index) => {
-			if (typeof props.config.props === "function") return props.config.props(row, index) || {};
-			return props.config.props || {};
-		};
-		const componentListeners = (row, index) => {
-			if (typeof props.config.listeners === "function") return props.config.listeners(row, index) || {};
-			return props.config.listeners || {};
-		};
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.config.component), mergeProps(componentProps(__props.row, __props.index), toHandlers(componentListeners(__props.row, __props.index))), null, 16);
+			return openBlock(), createBlock(resolveDynamicComponent(__props.config.component), mergeProps(unref(resolveComponentProps)(__props.config, __props.row, __props.index), toHandlers(unref(resolveComponentListeners)(__props.config, __props.row, __props.index))), null, 16);
 		};
 	}
 });

package/dist/es/TextColumn.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { formatter } from "./utils.js";
+import { applyInlineEditChange } from "./formHelpers.js";
 import { createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { TMagicButton, TMagicTag, TMagicTooltip } from "@tmagic/design";
 import { MForm } from "@tmagic/form";
-import { setValueByKeyPath } from "@tmagic/utils";
 //#region packages/table/src/TextColumn.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 0 };
 var _hoisted_2 = ["innerHTML"];
@@ -22,9 +22,7 @@ var TextColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	setup(__props) {
 		const props = __props;
 		const formChangeHandler = (v, eventData) => {
-			if (eventData.changeRecords?.length) {
-				for (const record of eventData.changeRecords) if (record.propPath) setValueByKeyPath(record.propPath, record.value, props.editState[props.index]);
-			}
+			applyInlineEditChange(props.editState[props.index], eventData);
 		};
 		return (_ctx, _cache) => {
 			return __props.config.type === "index" ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.config.pageIndex && __props.config.pageSize ? __props.config.pageIndex * __props.config.pageSize + __props.index + 1 : __props.index + 1), 1)) : (__props.config.type || __props.config.editInlineFormConfig) && __props.editState[__props.index] ? (openBlock(), createBlock(unref(MForm), {

package/dist/es/actionHelpers.js

@@ -0,0 +1,17 @@
+//#region packages/table/src/actionHelpers.ts
+var display = (fuc, row) => {
+	if (typeof fuc === "function") return fuc(row);
+	if (typeof fuc === "boolean") return fuc;
+	return true;
+};
+var disabled = (fuc, row) => {
+	if (typeof fuc === "function") return fuc(row);
+	if (typeof fuc === "boolean") return fuc;
+	return false;
+};
+var formatActionText = (fuc, row) => {
+	if (typeof fuc === "function") return fuc(row);
+	return fuc;
+};
+//#endregion
+export { disabled, display, formatActionText };

package/dist/es/componentHelpers.js

@@ -0,0 +1,11 @@
+//#region packages/table/src/componentHelpers.ts
+var resolveComponentProps = (config, row, index) => {
+	if (typeof config.props === "function") return config.props(row, index) || {};
+	return config.props || {};
+};
+var resolveComponentListeners = (config, row, index) => {
+	if (typeof config.listeners === "function") return config.listeners(row, index) || {};
+	return config.listeners || {};
+};
+//#endregion
+export { resolveComponentListeners, resolveComponentProps };

package/dist/es/formHelpers.js

@@ -0,0 +1,9 @@
+import { setValueByKeyPath } from "@tmagic/utils";
+//#region packages/table/src/formHelpers.ts
+var applyInlineEditChange = (target, eventData) => {
+	if (eventData.changeRecords?.length) {
+		for (const record of eventData.changeRecords) if (record.propPath) setValueByKeyPath(record.propPath, record.value, target);
+	}
+};
+//#endregion
+export { applyInlineEditChange };

package/dist/es/style.css

@@ -1,4 +1,18 @@
-.m-table .el-button.action-btn + .el-button.action-btn {
+.sub-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.sub-actions .sub-action-btn {
+  width: 100%;
+}
+.sub-actions .tmagic-design-button + .tmagic-design-button {
+  margin-left: 0;
+}
+.sub-actions .tmagic-design-button {
+  justify-content: flex-start;
+}.m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }
 .m-table .keep-all {

package/dist/style.css

@@ -1,4 +1,18 @@
-.m-table .el-button.action-btn + .el-button.action-btn {
+.sub-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.sub-actions .sub-action-btn {
+  width: 100%;
+}
+.sub-actions .tmagic-design-button + .tmagic-design-button {
+  margin-left: 0;
+}
+.sub-actions .tmagic-design-button {
+  justify-content: flex-start;
+}.m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }
 .m-table .keep-all {