@tmagic/table 1.8.0-beta.2 → 1.8.0-beta.20

package/dist/es/ActionButton.js

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

package/dist/es/ActionButton.vue_vue_type_script_lang.js

@@ -0,0 +1,51 @@
+import { disabled, formatActionText } from "./actionHelpers.js";
+import { defineComponent, h, vShow, withDirectives } from "vue";
+import { TMagicButton, TMagicTooltip } from "@tmagic/design";
+//#region packages/table/src/ActionButton.vue?vue&type=script&lang.ts
+var ActionButton_vue_vue_type_script_lang_default = defineComponent({
+	name: "MTableActionButton",
+	props: {
+		action: {
+			type: Object,
+			required: true
+		},
+		row: {
+			type: null,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		},
+		btnClass: {
+			type: String,
+			default: "action-btn"
+		},
+		visible: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["click"],
+	setup(props, { emit }) {
+		const onClick = () => emit("click", props.action, props.row, props.index);
+		return () => {
+			const button = withDirectives(h(TMagicButton, {
+				class: props.btnClass,
+				link: true,
+				size: "small",
+				type: props.action.buttonType || "primary",
+				icon: props.action.icon,
+				disabled: disabled(props.action.disabled, props.row),
+				onClick
+			}, () => h("span", { innerHTML: formatActionText(props.action.text, props.row) })), [[vShow, props.visible]]);
+			if (!props.action.tooltip) return button;
+			return h(TMagicTooltip, {
+				placement: props.action.tooltipPlacement || "top",
+				content: props.action.tooltip
+			}, () => button);
+		};
+	}
+});
+//#endregion
+export { ActionButton_vue_vue_type_script_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.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,14 @@
-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, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { cloneDeep } from "lodash-es";
-import { TMagicButton, 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 ActionsColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_1 = { class: "tmagic-table-sub-actions" };
+var activePopoverId = ref(null);
+var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTableActionsColumn",
 	__name: "ActionsColumn",
 	props: {
@@ -15,28 +20,27 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		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 popoverId = Symbol("sub-actions-popover");
+		const popoverVisible = ref(false);
+		watch(popoverVisible, (visible) => {
+			if (visible) activePopoverId.value = popoverId;
+			else if (activePopoverId.value === popoverId) activePopoverId.value = null;
+		});
+		watch(activePopoverId, (id) => {
+			if (id !== popoverId && popoverVisible.value) popoverVisible.value = 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);
 			else await action.handler?.(row, index);
-			action.after?.(row, index);
+			await action.after?.(row, index);
+			popoverVisible.value = false;
 		};
 		const save = async (index, config) => {
 			const action = config.actions?.find((item) => item.type === "edit")?.action;
@@ -61,47 +65,103 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			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(), createBlock(unref(TMagicTooltip), {
-						placement: action.tooltipPlacement || "top",
-						key: actionIndex,
-						disabled: !Boolean(action.tooltip),
-						content: action.tooltip
+					return openBlock(), createElementBlock(Fragment, { key: actionIndex }, [action.popconfirm ? (openBlock(), createBlock(ActionPopconfirm_default, {
+						key: 0,
+						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,
+						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 ?? true,
+						onClickoutside: _cache[1] || (_cache[1] = ($event) => popoverVisible.value = false)
 					}, {
-						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_1)]),
-							_: 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), {
 					class: "action-btn",
 					link: "",
 					type: "primary",
 					size: "small",
-					onClick: _cache[0] || (_cache[0] = ($event) => save(__props.index, __props.config))
+					onClick: _cache[2] || (_cache[2] = ($event) => save(__props.index, __props.config))
 				}, {
-					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("保存", -1)])]),
+					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("保存", -1)])]),
 					_: 1
 				}, 512), [[vShow, __props.editState[__props.index]]]),
 				withDirectives(createVNode(unref(TMagicButton), {
@@ -109,9 +169,9 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					link: "",
 					type: "danger",
 					size: "small",
-					onClick: _cache[1] || (_cache[1] = ($event) => cancel(__props.index, __props.config))
+					onClick: _cache[3] || (_cache[3] = ($event) => cancel(__props.index, __props.config))
 				}, {
-					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("取消", -1)])]),
+					default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("取消", -1)])]),
 					_: 1
 				}, 512), [[vShow, __props.editState[__props.index]]])
 			], 64);

package/dist/es/ComponentColumn.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-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({
+var ComponentColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTableColumn",
 	__name: "ComponentColumn",
 	props: {
@@ -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/ExpandColumn.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { Fragment, createBlock, createCommentVNode, createElementBlock, defineCo
 import { MForm } from "@tmagic/form";
 //#region packages/table/src/ExpandColumn.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["innerHTML"];
-var ExpandColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ExpandColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTableExpandColumn",
 	__name: "ExpandColumn",
 	props: {

package/dist/es/PopoverColumn.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import Table_default from "./Table.js";
 import { createBlock, createCommentVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { TMagicButton, TMagicPopover } from "@tmagic/design";
 //#region packages/table/src/PopoverColumn.vue?vue&type=script&setup=true&lang.ts
-var PopoverColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PopoverColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTablePopoverColumn",
 	__name: "PopoverColumn",
 	props: {

package/dist/es/Table.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { computed, createBlock, defineComponent, h, openBlock, ref, resolveDirec
 import { cloneDeep } from "lodash-es";
 import { TMagicTable } from "@tmagic/design";
 //#region packages/table/src/Table.vue?vue&type=script&setup=true&lang.ts
-var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTable",
 	__name: "Table",
 	props: {

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"];
@@ -10,7 +10,7 @@ var _hoisted_3 = ["href"];
 var _hoisted_4 = ["src"];
 var _hoisted_5 = ["href"];
 var _hoisted_6 = ["innerHTML"];
-var TextColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var TextColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTableColumn",
 	__name: "TextColumn",
 	props: {
@@ -22,9 +22,7 @@ var TextColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 	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

@@ -10,4 +10,20 @@
 }
 .m-table .el-table__row.el-table__row--level-1 {
   color: #999;
+}
+
+.tmagic-table-sub-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.tmagic-table-sub-actions .sub-action-btn {
+  width: 100%;
+}
+.tmagic-table-sub-actions .tmagic-design-button + .tmagic-design-button {
+  margin-left: 0;
+}
+.tmagic-table-sub-actions .tmagic-design-button {
+  justify-content: flex-start;
 }/*$vite$:1*/

package/dist/style.css

@@ -10,4 +10,20 @@
 }
 .m-table .el-table__row.el-table__row--level-1 {
   color: #999;
+}
+
+.tmagic-table-sub-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.tmagic-table-sub-actions .sub-action-btn {
+  width: 100%;
+}
+.tmagic-table-sub-actions .tmagic-design-button + .tmagic-design-button {
+  margin-left: 0;
+}
+.tmagic-table-sub-actions .tmagic-design-button {
+  justify-content: flex-start;
 }/*$vite$:1*/