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

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/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 };