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

package/src/ActionButton.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { defineComponent, h, PropType, vShow, withDirectives } from 'vue';
+
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
+
+import { disabled, formatActionText as formatter } from './actionHelpers';
+import { ColumnActionConfig } from './schema';
+
+export default defineComponent({
+  name: 'MTableActionButton',
+
+  props: {
+    action: {
+      type: Object as PropType<ColumnActionConfig>,
+      required: true,
+    },
+    row: {
+      type: null as unknown as PropType<any>,
+      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: formatter(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,
+      );
+    };
+  },
+});
+</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,69 @@
 <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 ?? true"
+      @clickoutside="popoverVisible = false"
+    >
+      <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="tmagic-table-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"
@@ -39,11 +85,23 @@
   >
 </template>
 
+<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';
 
-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 +125,32 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits<{
-  'after-action': [{ index: number }];
-  'after-action-cancel': [{ index: number }];
-}>();
+const popoverId = Symbol('sub-actions-popover');
+const popoverVisible = ref(false);
 
-const display = (fuc: boolean | Function | undefined, row: any) => {
-  if (typeof fuc === 'function') {
-    return fuc(row);
-  }
-  if (typeof fuc === 'boolean') {
-    return fuc;
+watch(popoverVisible, (visible) => {
+  if (visible) {
+    activePopoverId.value = popoverId;
+  } else if (activePopoverId.value === popoverId) {
+    activePopoverId.value = null;
   }
-  return true;
-};
+});
 
-const disabled = (fuc: boolean | Function | undefined, row: any) => {
-  if (typeof fuc === 'function') {
-    return fuc(row);
-  }
-  if (typeof fuc === 'boolean') {
-    return fuc;
+watch(activePopoverId, (id) => {
+  if (id !== popoverId && popoverVisible.value) {
+    popoverVisible.value = false;
   }
-  return false;
-};
+});
 
-const formatter = (fuc: string | Function | undefined, row: any) => {
-  if (typeof fuc === 'function') {
-    return fuc(row);
-  }
-  return fuc;
+const togglePopover = () => {
+  popoverVisible.value = !popoverVisible.value;
 };
 
+const emit = defineEmits<{
+  'after-action': [{ index: number }];
+  'after-action-cancel': [{ index: number }];
+}>();
+
 const actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {
   await action.before?.(row, index);
   if (action.type === 'edit') {
@@ -106,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) => {
@@ -140,4 +193,10 @@ const cancel = async (index: number, config: ColumnConfig) => {
   }
   emit('after-action-cancel', { index });
 };
+
+defineExpose({
+  actionHandler,
+  save,
+  cancel,
+});
 </script>

package/src/ComponentColumn.vue

@@ -1,19 +1,20 @@
 <template>
   <component
     :is="config.component"
-    v-bind="componentProps(row, index)"
-    v-on="componentListeners(row, index)"
+    v-bind="resolveComponentProps(config, row, index)"
+    v-on="resolveComponentListeners(config, row, index)"
   ></component>
 </template>
 
 <script lang="ts" setup>
+import { resolveComponentListeners, resolveComponentProps } from './componentHelpers';
 import { ColumnConfig } from './schema';
 
 defineOptions({
   name: 'MTableColumn',
 });
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     config: ColumnConfig;
     row: any;
@@ -23,18 +24,4 @@ const props = withDefaults(
     config: () => ({}),
   },
 );
-
-const componentProps = (row: any, index: number) => {
-  if (typeof props.config.props === 'function') {
-    return props.config.props(row, index) || {};
-  }
-  return props.config.props || {};
-};
-
-const componentListeners = (row: any, index: number) => {
-  if (typeof props.config.listeners === 'function') {
-    return props.config.listeners(row, index) || {};
-  }
-  return props.config.listeners || {};
-};
 </script>

package/src/TextColumn.vue

@@ -47,8 +47,8 @@
 import { TMagicButton, TMagicTag, TMagicTooltip } from '@tmagic/design';
 import { type ContainerChangeEventData, MForm } from '@tmagic/form';
 import type { FormItemConfig, FormValue } from '@tmagic/form-schema';
-import { setValueByKeyPath } from '@tmagic/utils';
 
+import { applyInlineEditChange } from './formHelpers';
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';
 
@@ -70,12 +70,6 @@ const props = withDefaults(
 );
 
 const formChangeHandler = (v: FormValue, eventData: ContainerChangeEventData) => {
-  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);
 };
 </script>

package/src/actionHelpers.ts

@@ -0,0 +1,26 @@
+export const display = (fuc: boolean | Function | undefined, row: any) => {
+  if (typeof fuc === 'function') {
+    return fuc(row);
+  }
+  if (typeof fuc === 'boolean') {
+    return fuc;
+  }
+  return true;
+};
+
+export const disabled = (fuc: boolean | Function | undefined, row: any) => {
+  if (typeof fuc === 'function') {
+    return fuc(row);
+  }
+  if (typeof fuc === 'boolean') {
+    return fuc;
+  }
+  return false;
+};
+
+export const formatActionText = (fuc: string | Function | undefined, row: any) => {
+  if (typeof fuc === 'function') {
+    return fuc(row);
+  }
+  return fuc;
+};

package/src/componentHelpers.ts

@@ -0,0 +1,15 @@
+import type { ColumnConfig } from './schema';
+
+export const resolveComponentProps = (config: ColumnConfig, row: any, index: number) => {
+  if (typeof config.props === 'function') {
+    return config.props(row, index) || {};
+  }
+  return config.props || {};
+};
+
+export const resolveComponentListeners = (config: ColumnConfig, row: any, index: number) => {
+  if (typeof config.listeners === 'function') {
+    return config.listeners(row, index) || {};
+  }
+  return config.listeners || {};
+};

package/src/formHelpers.ts

@@ -0,0 +1,12 @@
+import type { ContainerChangeEventData } from '@tmagic/form';
+import { setValueByKeyPath } from '@tmagic/utils';
+
+export const applyInlineEditChange = (target: any, eventData: ContainerChangeEventData) => {
+  if (eventData.changeRecords?.length) {
+    for (const record of eventData.changeRecords) {
+      if (record.propPath) {
+        setValueByKeyPath(record.propPath, record.value, target);
+      }
+    }
+  }
+};

package/src/schema.ts

@@ -18,8 +18,44 @@
 
 import { FormConfig, FormValue } from '@tmagic/form';
 
+export type ColumnActionPlacement =
+  | 'auto'
+  | 'auto-start'
+  | 'auto-end'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end'
+  | 'right-start'
+  | 'right-end';
+
+/** 当 type 为 sub-actions 时，更多菜单（Popover）的配置 */
+export interface ColumnSubActionConfig {
+  /** Popover 的弹出位置，默认 bottom */
+  placement?: ColumnActionPlacement;
+  /** Popover 浮层宽度，数字按 px 处理 */
+  popoverWidth?: string | number;
+  /** 附加到 Popover 浮层上的自定义 class */
+  popoverClass?: string;
+  /** Popover 关闭后是否销毁内容，默认 false */
+  popoverDestroyOnClose?: boolean;
+  /** 更多菜单中的子动作配置 */
+  items?: ColumnActionConfig[];
+}
+
 export interface ColumnActionConfig {
-  type?: 'delete' | 'copy' | 'edit' | string;
+  /**
+   * 动作类型：
+   * - `delete` / `copy` / `edit`：内置语义，`edit` 会进入行内编辑态。
+   * - `sub-actions`：点击后以 Popover 形式展开更多菜单，菜单配置通过 `subActionConfig` 提供。
+   */
+  type?: 'delete' | 'copy' | 'edit' | 'sub-actions' | string;
   buttonType?: string;
   display?: boolean | ((row: any) => boolean);
   disabled?: boolean | ((row: any) => boolean);
@@ -28,10 +64,21 @@ 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;
+  /** 当 type 为 sub-actions 时，更多菜单（Popover）的配置 */
+  subActionConfig?: ColumnSubActionConfig;
   handler?: (row: any, index: number) => Promise<any> | any;
   before?: (row: any, index: number) => Promise<void> | void;
   after?: (row: any, index: number) => Promise<void> | void;
-  action?: (data: { data: any; index: number }) => Promise<void> | void;
+  action?: (data: {
+    data: any;
+    index: number;
+  }) => Promise<{ ret: number; msg?: string } | void> | { ret: number; msg?: string } | void;
   cancel?: (data: { index: number }) => Promise<void> | void;
 }
 

package/src/theme/index.scss

@@ -13,3 +13,22 @@
     color: #999;
   }
 }
+
+.tmagic-table-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;
+  }
+}

package/types/index.d.ts

@@ -2,8 +2,27 @@ import { App } from "vue";
 import { FormConfig, FormValue } from "@tmagic/form";
 
 //#region temp/packages/table/src/schema.d.ts
+type ColumnActionPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+/** 当 type 为 sub-actions 时，更多菜单（Popover）的配置 */
+interface ColumnSubActionConfig {
+  /** Popover 的弹出位置，默认 bottom */
+  placement?: ColumnActionPlacement;
+  /** Popover 浮层宽度，数字按 px 处理 */
+  popoverWidth?: string | number;
+  /** 附加到 Popover 浮层上的自定义 class */
+  popoverClass?: string;
+  /** Popover 关闭后是否销毁内容，默认 false */
+  popoverDestroyOnClose?: boolean;
+  /** 更多菜单中的子动作配置 */
+  items?: ColumnActionConfig[];
+}
 interface ColumnActionConfig {
-  type?: 'delete' | 'copy' | 'edit' | string;
+  /**
+   * 动作类型：
+   * - `delete` / `copy` / `edit`：内置语义，`edit` 会进入行内编辑态。
+   * - `sub-actions`：点击后以 Popover 形式展开更多菜单，菜单配置通过 `subActionConfig` 提供。
+   */
+  type?: 'delete' | 'copy' | 'edit' | 'sub-actions' | string;
   buttonType?: string;
   display?: boolean | ((row: any) => boolean);
   disabled?: boolean | ((row: any) => boolean);
@@ -12,13 +31,27 @@ interface ColumnActionConfig {
   tooltip?: string;
   tooltipPlacement?: string;
   icon?: any;
+  /** 为 true 时用 Popconfirm 包裹按钮，点击后需二次确认才会触发 handler */
+  popconfirm?: boolean;
+  /** Popconfirm 的确认提示文案，支持函数动态生成 */
+  confirmText?: string | ((row: any) => string);
+  /** Popconfirm 浮层宽度，数字按 px 处理 */
+  popconfirmWidth?: string | number;
+  /** 当 type 为 sub-actions 时，更多菜单（Popover）的配置 */
+  subActionConfig?: ColumnSubActionConfig;
   handler?: (row: any, index: number) => Promise<any> | any;
   before?: (row: any, index: number) => Promise<void> | void;
   after?: (row: any, index: number) => Promise<void> | void;
   action?: (data: {
     data: any;
     index: number;
-  }) => Promise<void> | void;
+  }) => Promise<{
+    ret: number;
+    msg?: string;
+  } | void> | {
+    ret: number;
+    msg?: string;
+  } | void;
   cancel?: (data: {
     index: number;
   }) => Promise<void> | void;
@@ -94,18 +127,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;
@@ -127,4 +160,4 @@ declare const _default$1: {
   install(app: App): void;
 };
 //#endregion
-export { ColumnActionConfig, ColumnConfig, _default as MagicTable, createColumns, _default$1 as default, formatter };
+export { ColumnActionConfig, ColumnActionPlacement, ColumnConfig, ColumnSubActionConfig, _default as MagicTable, createColumns, _default$1 as default, formatter };