@tmagic/table 1.8.0-beta.16 → 1.8.0-beta.17

package/dist/es/ActionsColumn.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,13 @@
 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 { 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, 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 = { 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",
@@ -21,7 +22,15 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	emits: ["after-action", "after-action-cancel"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
+		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;
 		};
@@ -30,7 +39,8 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			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;
@@ -83,7 +93,8 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						placement: action.subActionConfig?.placement || "bottom",
 						width: action.subActionConfig?.popoverWidth,
 						"popper-class": action.subActionConfig?.popoverClass,
-						"destroy-on-close": action.subActionConfig?.popoverDestroyOnClose ?? true
+						"destroy-on-close": action.subActionConfig?.popoverDestroyOnClose ?? true,
+						onClickoutside: _cache[1] || (_cache[1] = ($event) => popoverVisible.value = false)
 					}, {
 						reference: withCtx(() => [withDirectives(createVNode(unref(TMagicButton), {
 							class: "action-btn",
@@ -148,9 +159,9 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					link: "",
 					type: "primary",
 					size: "small",
-					onClick: _cache[1] || (_cache[1] = ($event) => save(__props.index, __props.config))
+					onClick: _cache[2] || (_cache[2] = ($event) => save(__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]]]),
 				withDirectives(createVNode(unref(TMagicButton), {
@@ -158,9 +169,9 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					link: "",
 					type: "danger",
 					size: "small",
-					onClick: _cache[2] || (_cache[2] = ($event) => cancel(__props.index, __props.config))
+					onClick: _cache[3] || (_cache[3] = ($event) => cancel(__props.index, __props.config))
 				}, {
-					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("取消", -1)])]),
+					default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("取消", -1)])]),
 					_: 1
 				}, 512), [[vShow, __props.editState[__props.index]]])
 			], 64);

package/dist/tmagic-table.umd.cjs

@@ -24,7 +24,7 @@
 	//#endregion
 	//#region node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_Symbol.js
 	/** Built-in value references. */
-	var Symbol = root.Symbol;
+	var Symbol$1 = root.Symbol;
 	//#endregion
 	//#region node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_getRawTag.js
 	/** Used for built-in method references. */
@@ -38,7 +38,7 @@
 	*/
 	var nativeObjectToString$1 = objectProto$3.toString;
 	/** Built-in value references. */
-	var symToStringTag$1 = Symbol ? Symbol.toStringTag : void 0;
+	var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : void 0;
 	/**
 	* A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
 	*
@@ -81,7 +81,7 @@
 	var nullTag = "[object Null]";
 	var undefinedTag = "[object Undefined]";
 	/** Built-in value references. */
-	var symToStringTag = Symbol ? Symbol.toStringTag : void 0;
+	var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : void 0;
 	/**
 	* The base implementation of `getTag` without fallbacks for buggy environments.
 	*
@@ -1715,7 +1715,7 @@
 	//#endregion
 	//#region node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_cloneSymbol.js
 	/** Used to convert symbols to primitives and strings. */
-	var symbolProto = Symbol ? Symbol.prototype : void 0;
+	var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0;
 	var symbolValueOf = symbolProto ? symbolProto.valueOf : void 0;
 	/**
 	* Creates a clone of the `symbol` object.
@@ -2111,6 +2111,7 @@
 	//#endregion
 	//#region packages/table/src/ActionsColumn.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$2 = { class: "tmagic-table-sub-actions" };
+	var activePopoverId = (0, vue.ref)(null);
 	//#endregion
 	//#region packages/table/src/ActionsColumn.vue
 	var ActionsColumn_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2127,7 +2128,15 @@
 		emits: ["after-action", "after-action-cancel"],
 		setup(__props, { expose: __expose, emit: __emit }) {
 			const props = __props;
+			const popoverId = Symbol("sub-actions-popover");
 			const popoverVisible = (0, vue.ref)(false);
+			(0, vue.watch)(popoverVisible, (visible) => {
+				if (visible) activePopoverId.value = popoverId;
+				else if (activePopoverId.value === popoverId) activePopoverId.value = null;
+			});
+			(0, vue.watch)(activePopoverId, (id) => {
+				if (id !== popoverId && popoverVisible.value) popoverVisible.value = false;
+			});
 			const togglePopover = () => {
 				popoverVisible.value = !popoverVisible.value;
 			};
@@ -2136,7 +2145,8 @@
 				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;
@@ -2189,7 +2199,8 @@
 							placement: action.subActionConfig?.placement || "bottom",
 							width: action.subActionConfig?.popoverWidth,
 							"popper-class": action.subActionConfig?.popoverClass,
-							"destroy-on-close": action.subActionConfig?.popoverDestroyOnClose ?? true
+							"destroy-on-close": action.subActionConfig?.popoverDestroyOnClose ?? true,
+							onClickoutside: _cache[1] || (_cache[1] = ($event) => popoverVisible.value = false)
 						}, {
 							reference: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 								class: "action-btn",
@@ -2254,9 +2265,9 @@
 						link: "",
 						type: "primary",
 						size: "small",
-						onClick: _cache[1] || (_cache[1] = ($event) => save(__props.index, __props.config))
+						onClick: _cache[2] || (_cache[2] = ($event) => save(__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]]]),
 					(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
@@ -2264,9 +2275,9 @@
 						link: "",
 						type: "danger",
 						size: "small",
-						onClick: _cache[2] || (_cache[2] = ($event) => cancel(__props.index, __props.config))
+						onClick: _cache[3] || (_cache[3] = ($event) => cancel(__props.index, __props.config))
 					}, {
-						default: (0, vue.withCtx)(() => [..._cache[4] || (_cache[4] = [(0, vue.createTextVNode)("取消", -1)])]),
+						default: (0, vue.withCtx)(() => [..._cache[5] || (_cache[5] = [(0, vue.createTextVNode)("取消", -1)])]),
 						_: 1
 					}, 512), [[vue.vShow, __props.editState[__props.index]]])
 				], 64);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.16",
+  "version": "1.8.0-beta.17",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [
@@ -47,9 +47,9 @@
   "peerDependencies": {
     "vue": "^3.5.40",
     "typescript": "^6.0.3",
-    "@tmagic/design": "1.8.0-beta.16",
-    "@tmagic/utils": "1.8.0-beta.16",
-    "@tmagic/form": "1.8.0-beta.16"
+    "@tmagic/form": "1.8.0-beta.17",
+    "@tmagic/utils": "1.8.0-beta.17",
+    "@tmagic/design": "1.8.0-beta.17"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionsColumn.vue

@@ -17,6 +17,7 @@
       :width="action.subActionConfig?.popoverWidth"
       :popper-class="action.subActionConfig?.popoverClass"
       :destroy-on-close="action.subActionConfig?.popoverDestroyOnClose ?? true"
+      @clickoutside="popoverVisible = false"
     >
       <template #reference>
         <TMagicButton
@@ -84,8 +85,15 @@
   >
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
 import { ref } from 'vue';
+
+// 所有行共享：同一时间仅允许一个 sub-actions 气泡展开，激活新的会自动关闭上一个
+const activePopoverId = ref<symbol | null>(null);
+</script>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
 import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -117,7 +125,23 @@ const props = withDefaults(
   },
 );
 
+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;
 };
@@ -134,7 +158,8 @@ const actionHandler = async (action: ColumnActionConfig, row: any, index: number
   } else {
     await action.handler?.(row, index);
   }
-  action.after?.(row, index);
+  await action.after?.(row, index);
+  popoverVisible.value = false;
 };
 
 const save = async (index: number, config: ColumnConfig) => {