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

package/dist/tmagic-table.umd.cjs

@@ -1,12 +1,13 @@
 (function(global, factory) {
-	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@tmagic/design"), require("@tmagic/form"), require("@tmagic/utils")) : typeof define === "function" && define.amd ? define([
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@tmagic/design"), require("@element-plus/icons-vue"), require("@tmagic/form"), require("@tmagic/utils")) : typeof define === "function" && define.amd ? define([
 		"exports",
 		"vue",
 		"@tmagic/design",
+		"@element-plus/icons-vue",
 		"@tmagic/form",
 		"@tmagic/utils"
-	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.TMagicTable = {}, global.Vue, global._tmagic_design, global._tmagic_form, global._tmagic_utils));
-})(this, function(exports, vue, _tmagic_design, _tmagic_form, _tmagic_utils) {
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.TMagicTable = {}, global.Vue, global._tmagic_design, global._element_plus_icons_vue, global._tmagic_form, global._tmagic_utils));
+})(this, function(exports, vue, _tmagic_design, _element_plus_icons_vue, _tmagic_form, _tmagic_utils) {
 	Object.defineProperties(exports, {
 		__esModule: { value: true },
 		[Symbol.toStringTag]: { value: "Module" }
@@ -1919,8 +1920,124 @@
 		return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
 	}
 	//#endregion
+	//#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
+	//#region packages/table/src/ActionButton.vue?vue&type=script&setup=true&lang.ts
+	var _hoisted_1$3 = ["innerHTML"];
+	//#endregion
+	//#region packages/table/src/ActionButton.vue
+	var ActionButton_default = /* @__PURE__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+					placement: __props.action.tooltipPlacement || "top",
+					disabled: !Boolean(__props.action.tooltip),
+					content: __props.action.tooltip
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						class: (0, vue.normalizeClass)(__props.btnClass),
+						link: "",
+						size: "small",
+						type: __props.action.buttonType || "primary",
+						icon: __props.action.icon,
+						disabled: (0, vue.unref)(disabled)(__props.action.disabled, __props.row),
+						onClick
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: (0, vue.unref)(formatActionText)(__props.action.text, __props.row) }, null, 8, _hoisted_1$3)]),
+						_: 1
+					}, 8, [
+						"class",
+						"type",
+						"icon",
+						"disabled"
+					]), [[vue.vShow, __props.visible]])]),
+					_: 1
+				}, 8, [
+					"placement",
+					"disabled",
+					"content"
+				]);
+			};
+		}
+	});
+	//#endregion
+	//#region packages/table/src/ActionPopconfirm.vue
+	var ActionPopconfirm_default = /* @__PURE__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicPopconfirm), {
+					placement: "top",
+					width: __props.action.popconfirmWidth,
+					title: (0, vue.unref)(formatActionText)(__props.action.confirmText, __props.row) || "确定执行此操作？",
+					onConfirm
+				}, {
+					reference: (0, vue.withCtx)(() => [(0, vue.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
 	//#region packages/table/src/ActionsColumn.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$2 = ["innerHTML"];
+	var _hoisted_1$2 = { class: "sub-actions" };
 	//#endregion
 	//#region packages/table/src/ActionsColumn.vue
 	var ActionsColumn_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1935,23 +2052,13 @@
 			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 = (0, vue.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);
@@ -1981,47 +2088,102 @@
 				if (cancel) await cancel({ index });
 				emit("after-action-cancel", { index });
 			};
+			__expose({
+				actionHandler,
+				save,
+				cancel
+			});
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
 					((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.config.actions, (action, actionIndex) => {
-						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
-							placement: action.tooltipPlacement || "top",
-							key: actionIndex,
-							disabled: !Boolean(action.tooltip),
-							content: action.tooltip
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: actionIndex }, [action.popconfirm ? ((0, vue.openBlock)(), (0, vue.createBlock)(ActionPopconfirm_default, {
+							key: 0,
+							action,
+							row: __props.row,
+							index: __props.index,
+							visible: (0, vue.unref)(display)(action.display, __props.row) && !__props.editState[__props.index],
+							onConfirm: actionHandler
+						}, null, 8, [
+							"action",
+							"row",
+							"index",
+							"visible"
+						])) : action.type === "sub-actions" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.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
 						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+							reference: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.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: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: formatter(action.text, __props.row) }, null, 8, _hoisted_1$2)]),
-								_: 2
-							}, 1032, [
-								"type",
-								"icon",
-								"disabled",
-								"onClick"
-							]), [[vue.vShow, display(action.display, __props.row) && !__props.editState[__props.index]]])]),
+								icon: popoverVisible.value ? (0, vue.unref)(_element_plus_icons_vue.ArrowDown) : (0, vue.unref)(_element_plus_icons_vue.ArrowRight),
+								onClick: (0, vue.withModifiers)(togglePopover, ["stop"])
+							}, null, 8, ["type", "icon"]), [[vue.vShow, action.subActionConfig?.items?.length && (0, vue.unref)(display)(action.display, __props.row) && !__props.editState[__props.index]]])]),
+							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(action.subActionConfig?.items, (subAction, subIndex) => {
+								return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: subIndex }, [subAction.popconfirm ? ((0, vue.openBlock)(), (0, vue.createBlock)(ActionPopconfirm_default, {
+									key: 0,
+									action: subAction,
+									row: __props.row,
+									index: __props.index,
+									"btn-class": "sub-action-btn",
+									visible: (0, vue.unref)(display)(subAction.display, __props.row),
+									onConfirm: actionHandler
+								}, null, 8, [
+									"action",
+									"row",
+									"index",
+									"visible"
+								])) : ((0, vue.openBlock)(), (0, vue.createBlock)(ActionButton_default, {
+									key: 1,
+									action: subAction,
+									row: __props.row,
+									index: __props.index,
+									"btn-class": "sub-action-btn",
+									visible: (0, vue.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"
+						])) : ((0, vue.openBlock)(), (0, vue.createBlock)(ActionButton_default, {
+							key: 2,
+							action,
+							row: __props.row,
+							index: __props.index,
+							visible: (0, vue.unref)(display)(action.display, __props.row) && !__props.editState[__props.index],
+							onClick: actionHandler
+						}, null, 8, [
+							"action",
+							"row",
+							"index",
+							"visible"
+						]))], 64);
 					}), 128)),
 					(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 						class: "action-btn",
 						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: (0, vue.withCtx)(() => [..._cache[2] || (_cache[2] = [(0, vue.createTextVNode)("保存", -1)])]),
+						default: (0, vue.withCtx)(() => [..._cache[3] || (_cache[3] = [(0, vue.createTextVNode)("保存", -1)])]),
 						_: 1
 					}, 512), [[vue.vShow, __props.editState[__props.index]]]),
 					(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
@@ -2029,9 +2191,9 @@
 						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: (0, vue.withCtx)(() => [..._cache[3] || (_cache[3] = [(0, vue.createTextVNode)("取消", -1)])]),
+						default: (0, vue.withCtx)(() => [..._cache[4] || (_cache[4] = [(0, vue.createTextVNode)("取消", -1)])]),
 						_: 1
 					}, 512), [[vue.vShow, __props.editState[__props.index]]])
 				], 64);
@@ -2039,6 +2201,16 @@
 		}
 	});
 	//#endregion
+	//#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
 	//#region packages/table/src/ComponentColumn.vue
 	var ComponentColumn_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MTableColumn",
@@ -2049,17 +2221,8 @@
 			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 (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.config.component), (0, vue.mergeProps)(componentProps(__props.row, __props.index), (0, vue.toHandlers)(componentListeners(__props.row, __props.index))), null, 16);
+				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.config.component), (0, vue.mergeProps)((0, vue.unref)(resolveComponentProps)(__props.config, __props.row, __props.index), (0, vue.toHandlers)((0, vue.unref)(resolveComponentListeners)(__props.config, __props.row, __props.index))), null, 16);
 			};
 		}
 	});
@@ -2165,6 +2328,13 @@
 		}
 	});
 	//#endregion
+	//#region packages/table/src/formHelpers.ts
+	var applyInlineEditChange = (target, eventData) => {
+		if (eventData.changeRecords?.length) {
+			for (const record of eventData.changeRecords) if (record.propPath) (0, _tmagic_utils.setValueByKeyPath)(record.propPath, record.value, target);
+		}
+	};
+	//#endregion
 	//#region packages/table/src/TextColumn.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1 = { key: 0 };
 	var _hoisted_2 = ["innerHTML"];
@@ -2186,9 +2356,7 @@
 		setup(__props) {
 			const props = __props;
 			const formChangeHandler = (v, eventData) => {
-				if (eventData.changeRecords?.length) {
-					for (const record of eventData.changeRecords) if (record.propPath) (0, _tmagic_utils.setValueByKeyPath)(record.propPath, record.value, props.editState[props.index]);
-				}
+				applyInlineEditChange(props.editState[props.index], eventData);
 			};
 			return (_ctx, _cache) => {
 				return __props.config.type === "index" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, (0, vue.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] ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MForm), {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-manmanyu.21",
+  "version": "1.8.0-manmanyu.23",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [
@@ -37,6 +37,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
@@ -46,9 +47,9 @@
   "peerDependencies": {
     "vue": "^3.5.38",
     "typescript": "^6.0.3",
-    "@tmagic/design": "1.8.0-manmanyu.21",
-    "@tmagic/form": "1.8.0-manmanyu.21",
-    "@tmagic/utils": "1.8.0-manmanyu.21"
+    "@tmagic/design": "1.8.0-manmanyu.23",
+    "@tmagic/form": "1.8.0-manmanyu.23",
+    "@tmagic/utils": "1.8.0-manmanyu.23"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionButton.vue

@@ -0,0 +1,51 @@
+<template>
+  <TMagicTooltip
+    :placement="action.tooltipPlacement || 'top'"
+    :disabled="!Boolean(action.tooltip)"
+    :content="action.tooltip"
+  >
+    <TMagicButton
+      v-show="visible"
+      :class="btnClass"
+      link
+      size="small"
+      :type="action.buttonType || 'primary'"
+      :icon="action.icon"
+      :disabled="disabled(action.disabled, row)"
+      @click="onClick"
+    >
+      <span v-html="formatter(action.text, row)"></span>
+    </TMagicButton>
+  </TMagicTooltip>
+</template>
+
+<script lang="ts" setup>
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
+
+import { disabled, formatActionText as formatter } from './actionHelpers';
+import { ColumnActionConfig } from './schema';
+
+defineOptions({
+  name: 'MTableActionButton',
+});
+
+const props = withDefaults(
+  defineProps<{
+    action: ColumnActionConfig;
+    row: any;
+    index: number;
+    btnClass?: string;
+    visible?: boolean;
+  }>(),
+  {
+    btnClass: 'action-btn',
+    visible: true,
+  },
+);
+
+const emit = defineEmits<{
+  click: [action: ColumnActionConfig, row: any, index: number];
+}>();
+
+const onClick = () => emit('click', props.action, props.row, props.index);
+</script>

package/src/ActionPopconfirm.vue

@@ -0,0 +1,44 @@
+<template>
+  <TMagicPopconfirm
+    placement="top"
+    :width="action.popconfirmWidth"
+    :title="formatter(action.confirmText, row) || '确定执行此操作？'"
+    @confirm="onConfirm"
+  >
+    <template #reference>
+      <ActionButton :action="action" :row="row" :index="index" :btn-class="btnClass" :visible="visible" />
+    </template>
+  </TMagicPopconfirm>
+</template>
+
+<script lang="ts" setup>
+import { TMagicPopconfirm } from '@tmagic/design';
+
+import ActionButton from './ActionButton.vue';
+import { formatActionText as formatter } from './actionHelpers';
+import { ColumnActionConfig } from './schema';
+
+defineOptions({
+  name: 'MTableActionPopconfirm',
+});
+
+const props = withDefaults(
+  defineProps<{
+    action: ColumnActionConfig;
+    row: any;
+    index: number;
+    btnClass?: string;
+    visible?: boolean;
+  }>(),
+  {
+    btnClass: 'action-btn',
+    visible: true,
+  },
+);
+
+const emit = defineEmits<{
+  confirm: [action: ColumnActionConfig, row: any, index: number];
+}>();
+
+const onConfirm = () => emit('confirm', props.action, props.row, props.index);
+</script>

package/src/ActionsColumn.vue

@@ -1,23 +1,68 @@
 <template>
-  <TMagicTooltip
-    v-for="(action, actionIndex) in config.actions"
-    :placement="action.tooltipPlacement || 'top'"
-    :key="actionIndex"
-    :disabled="!Boolean(action.tooltip)"
-    :content="action.tooltip"
-  >
-    <TMagicButton
-      v-show="display(action.display, row) && !editState[index]"
-      class="action-btn"
-      link
-      size="small"
-      :type="action.buttonType || 'primary'"
-      :icon="action.icon"
-      :disabled="disabled(action.disabled, row)"
-      @click="actionHandler(action, row, index)"
-      ><span v-html="formatter(action.text, row)"></span
-    ></TMagicButton>
-  </TMagicTooltip>
+  <template v-for="(action, actionIndex) in config.actions" :key="actionIndex">
+    <ActionPopconfirm
+      v-if="action.popconfirm"
+      :action="action"
+      :row="row"
+      :index="index"
+      :visible="display(action.display, row) && !editState[index]"
+      @confirm="actionHandler"
+    />
+
+    <TMagicPopover
+      v-else-if="action.type === 'sub-actions'"
+      v-model:visible="popoverVisible"
+      trigger="click"
+      :placement="action.subActionConfig?.placement || 'bottom'"
+      :width="action.subActionConfig?.popoverWidth"
+      :popper-class="action.subActionConfig?.popoverClass"
+      :destroy-on-close="action.subActionConfig?.popoverDestroyOnClose"
+    >
+      <template #reference>
+        <TMagicButton
+          v-show="action.subActionConfig?.items?.length && display(action.display, row) && !editState[index]"
+          class="action-btn"
+          link
+          size="small"
+          :type="action.buttonType || 'primary'"
+          :icon="popoverVisible ? ArrowDown : ArrowRight"
+          @click.stop="togglePopover"
+        ></TMagicButton>
+      </template>
+      <div class="sub-actions">
+        <template v-for="(subAction, subIndex) in action.subActionConfig?.items" :key="subIndex">
+          <ActionPopconfirm
+            v-if="subAction.popconfirm"
+            :action="subAction"
+            :row="row"
+            :index="index"
+            btn-class="sub-action-btn"
+            :visible="display(subAction.display, row)"
+            @confirm="actionHandler"
+          />
+
+          <ActionButton
+            v-else
+            :action="subAction"
+            :row="row"
+            :index="index"
+            btn-class="sub-action-btn"
+            :visible="display(subAction.display, row)"
+            @click="actionHandler"
+          />
+        </template>
+      </div>
+    </TMagicPopover>
+
+    <ActionButton
+      v-else
+      :action="action"
+      :row="row"
+      :index="index"
+      :visible="display(action.display, row) && !editState[index]"
+      @click="actionHandler"
+    />
+  </template>
 
   <TMagicButton
     class="action-btn"
@@ -40,10 +85,15 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
-import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicPopover } from '@tmagic/design';
 
+import ActionButton from './ActionButton.vue';
+import { display } from './actionHelpers';
+import ActionPopconfirm from './ActionPopconfirm.vue';
 import { ColumnActionConfig, ColumnConfig } from './schema';
 
 defineOptions({
@@ -67,38 +117,16 @@ const props = withDefaults(
   },
 );
 
+const popoverVisible = ref(false);
+const togglePopover = () => {
+  popoverVisible.value = !popoverVisible.value;
+};
+
 const emit = defineEmits<{
   'after-action': [{ index: number }];
   'after-action-cancel': [{ index: number }];
 }>();
 
-const display = (fuc: boolean | Function | undefined, row: any) => {
-  if (typeof fuc === 'function') {
-    return fuc(row);
-  }
-  if (typeof fuc === 'boolean') {
-    return fuc;
-  }
-  return true;
-};
-
-const disabled = (fuc: boolean | Function | undefined, row: any) => {
-  if (typeof fuc === 'function') {
-    return fuc(row);
-  }
-  if (typeof fuc === 'boolean') {
-    return fuc;
-  }
-  return false;
-};
-
-const formatter = (fuc: string | Function | undefined, row: any) => {
-  if (typeof fuc === 'function') {
-    return fuc(row);
-  }
-  return fuc;
-};
-
 const actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {
   await action.before?.(row, index);
   if (action.type === 'edit') {
@@ -140,4 +168,31 @@ const cancel = async (index: number, config: ColumnConfig) => {
   }
   emit('after-action-cancel', { index });
 };
+
+defineExpose({
+  actionHandler,
+  save,
+  cancel,
+});
 </script>
+
+<style lang="scss">
+.sub-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+
+  .sub-action-btn {
+    width: 100%;
+  }
+
+  .tmagic-design-button + .tmagic-design-button {
+    margin-left: 0;
+  }
+
+  .tmagic-design-button {
+    justify-content: flex-start;
+  }
+}
+</style>