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

package/dist/es/ActionsColumn.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
 import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, vShow, withCtx, withDirectives } from "vue";
 import { cloneDeep } from "lodash-es";
-import { TMagicButton, TMagicTooltip, tMagicMessage } from "@tmagic/design";
+import { TMagicButton, TMagicPopconfirm, TMagicTooltip, tMagicMessage } from "@tmagic/design";
 //#region packages/table/src/ActionsColumn.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
 var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MTableActionsColumn",
 	__name: "ActionsColumn",
@@ -64,9 +65,36 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.actions, (action, actionIndex) => {
-					return openBlock(), createBlock(unref(TMagicTooltip), {
+					return openBlock(), createElementBlock(Fragment, { key: actionIndex }, [action.popconfirm ? (openBlock(), createBlock(unref(TMagicPopconfirm), {
+						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), {
+						key: 1,
 						placement: action.tooltipPlacement || "top",
-						key: actionIndex,
 						disabled: !Boolean(action.tooltip),
 						content: action.tooltip
 					}, {
@@ -79,7 +107,7 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 							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)]),
+							default: withCtx(() => [createElementVNode("span", { innerHTML: formatter(action.text, __props.row) }, null, 8, _hoisted_2)]),
 							_: 2
 						}, 1032, [
 							"type",
@@ -92,7 +120,7 @@ var ActionsColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						"placement",
 						"disabled",
 						"content"
-					]);
+					]))], 64);
 				}), 128)),
 				withDirectives(createVNode(unref(TMagicButton), {
 					class: "action-btn",

package/dist/tmagic-table.umd.cjs

@@ -1921,6 +1921,7 @@
 	//#endregion
 	//#region packages/table/src/ActionsColumn.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$2 = ["innerHTML"];
+	var _hoisted_2$1 = ["innerHTML"];
 	//#endregion
 	//#region packages/table/src/ActionsColumn.vue
 	var ActionsColumn_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1984,9 +1985,36 @@
 			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), {
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: actionIndex }, [action.popconfirm ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicPopconfirm), {
+							key: 0,
+							placement: "top",
+							width: action.popconfirmWidth,
+							title: formatter(action.confirmText, __props.row) || "确定执行此操作？",
+							onConfirm: ($event) => actionHandler(action, __props.row, __props.index)
+						}, {
+							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)
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: formatter(action.text, __props.row) }, null, 8, _hoisted_1$2)]),
+								_: 2
+							}, 1032, [
+								"type",
+								"icon",
+								"disabled"
+							]), [[vue.vShow, display(action.display, __props.row) && !__props.editState[__props.index]]])]),
+							_: 2
+						}, 1032, [
+							"width",
+							"title",
+							"onConfirm"
+						])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+							key: 1,
 							placement: action.tooltipPlacement || "top",
-							key: actionIndex,
 							disabled: !Boolean(action.tooltip),
 							content: action.tooltip
 						}, {
@@ -1999,7 +2027,7 @@
 								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)]),
+								default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: formatter(action.text, __props.row) }, null, 8, _hoisted_2$1)]),
 								_: 2
 							}, 1032, [
 								"type",
@@ -2012,7 +2040,7 @@
 							"placement",
 							"disabled",
 							"content"
-						]);
+						]))], 64);
 					}), 128)),
 					(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 						class: "action-btn",

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-manmanyu.21",
+  "version": "1.8.0-manmanyu.22",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [
@@ -46,9 +46,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.22",
+    "@tmagic/form": "1.8.0-manmanyu.22",
+    "@tmagic/utils": "1.8.0-manmanyu.22"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionsColumn.vue

@@ -1,23 +1,46 @@
 <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">
+    <TMagicPopconfirm
+      v-if="action.popconfirm"
+      placement="top"
+      :width="action.popconfirmWidth"
+      :title="formatter(action.confirmText, row) || '确定执行此操作？'"
+      @confirm="actionHandler(action, row, index)"
+    >
+      <template #reference>
+        <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)"
+        >
+          <span v-html="formatter(action.text, row)"></span>
+        </TMagicButton>
+      </template>
+    </TMagicPopconfirm>
+
+    <TMagicTooltip
+      v-else
+      :placement="action.tooltipPlacement || 'top'"
+      :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>
 
   <TMagicButton
     class="action-btn"
@@ -42,7 +65,7 @@
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash-es';
 
-import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicPopconfirm, TMagicTooltip } from '@tmagic/design';
 
 import { ColumnActionConfig, ColumnConfig } from './schema';
 

package/src/schema.ts

@@ -28,6 +28,12 @@ export interface ColumnActionConfig {
   tooltip?: string;
   tooltipPlacement?: string;
   icon?: any;
+  /** 为 true 时用 Popconfirm 包裹按钮，点击后需二次确认才会触发 handler */
+  popconfirm?: boolean;
+  /** Popconfirm 的确认提示文案，支持函数动态生成 */
+  confirmText?: string | ((row: any) => string);
+  /** Popconfirm 浮层宽度，数字按 px 处理 */
+  popconfirmWidth?: string | number;
   handler?: (row: any, index: number) => Promise<any> | any;
   before?: (row: any, index: number) => Promise<void> | void;
   after?: (row: any, index: number) => Promise<void> | void;

package/types/index.d.ts

@@ -12,6 +12,12 @@ interface ColumnActionConfig {
   tooltip?: string;
   tooltipPlacement?: string;
   icon?: any;
+  /** 为 true 时用 Popconfirm 包裹按钮，点击后需二次确认才会触发 handler */
+  popconfirm?: boolean;
+  /** Popconfirm 的确认提示文案，支持函数动态生成 */
+  confirmText?: string | ((row: any) => string);
+  /** Popconfirm 浮层宽度，数字按 px 处理 */
+  popconfirmWidth?: string | number;
   handler?: (row: any, index: number) => Promise<any> | any;
   before?: (row: any, index: number) => Promise<void> | void;
   after?: (row: any, index: number) => Promise<void> | void;
@@ -94,18 +100,18 @@ declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Pr
   "sort-change": (...args: any[]) => void;
   "expand-change": (...args: any[]) => void;
   "cell-click": (...args: any[]) => void;
+  "select-all": (...args: any[]) => void;
   "after-action": (...args: any[]) => void;
   "after-action-cancel": (...args: any[]) => void;
-  "select-all": (...args: any[]) => void;
   "selection-change": (...args: any[]) => void;
 }, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{
   onSelect?: ((...args: any[]) => any) | undefined;
   "onSort-change"?: ((...args: any[]) => any) | undefined;
   "onExpand-change"?: ((...args: any[]) => any) | undefined;
   "onCell-click"?: ((...args: any[]) => any) | undefined;
+  "onSelect-all"?: ((...args: any[]) => any) | undefined;
   "onAfter-action"?: ((...args: any[]) => any) | undefined;
   "onAfter-action-cancel"?: ((...args: any[]) => any) | undefined;
-  "onSelect-all"?: ((...args: any[]) => any) | undefined;
   "onSelection-change"?: ((...args: any[]) => any) | undefined;
 }>, {
   loading: boolean;