@wx-design/components 1.0.0-alpha.1 → 1.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wx-design/components",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.11",
   "description": "",
   "type": "module",
   "main": "./lib/index.js",
@@ -32,15 +32,14 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.6.1",
-    "@vxe-ui/core": "^4.0.16",
+    "@vxe-ui/core": "^4.0.20",
     "classnames": "^2.5.1",
     "deepmerge": "^4.3.1",
     "lodash": "^4.17.21",
     "number-precision": "^1.6.0",
     "vue": "^3.3.7",
-    "vuedraggable": "^4.1.0",
-    "vxe-pc-ui": "4.2.32",
-    "vxe-table": "4.7.95"
+    "vxe-pc-ui": "4.3.22",
+    "vxe-table": "4.9.16"
   },
   "peerDependencies": {
     "@element-plus/icons-vue": "2",

package/types/table/column.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue'
+import { Ref } from "vue";
 import {
   VxeTableDataRow,
   VxeColumnProps,
@@ -14,6 +14,7 @@ import type {
   CheckboxProps,
   SwitchProps,
   PopoverInstance,
+  ImageProps,
 } from "element-plus";
 import type { SabHeaderFilterProps } from "./";
 
@@ -26,7 +27,8 @@ export interface SabColumnSlots<D = VxeTableDataRow> {
         params: VxeColumnSlotTypes.DefaultSlotParams<D> & {
           column: SabColumnProps<D>;
         },
-        editorProps?: SabCellEditorParams
+        editorProps?: SabCellEditorParams,
+        column?: SabColumnProps<D>
       ) => any)
     | string;
   /**
@@ -119,7 +121,7 @@ export type SabCellSelectProps<D = VxeTableDataRow> = {
     }
   ) => Promise<any[]> | any[];
   // 只有配置了 dynamicOptions 才有效,聚焦时重新获取数据
-  revalidateOnFocus?: boolean
+  revalidateOnFocus?: boolean;
   // 动态获取方法的防抖配置
   dynamicDebounce?: {
     // 延迟时间, 毫秒，默认300
@@ -171,6 +173,14 @@ export type BooleanEditorProps<D = VxeTableDataRow> = Partial<SwitchProps> &
     }): void;
   };
 
+// 图片类型参数
+export type ImageViewProps<D = VxeTableDataRow> = Partial<ImageProps> & {
+  // 在表格内直接展示图片
+  showThumb?: boolean
+  // 最多显示几张图片，默认3张, -1则不限制
+  maxCount?: number
+};
+
 // 单元格编辑器参数
 export type SabCellEditorParams =
   | Partial<InputProps>
@@ -180,7 +190,8 @@ export type SabCellEditorParams =
   | Partial<PopoverProps>
   | Partial<SabPopoverParams>
   | Partial<DynamicCellProps>
-  | Partial<BooleanEditorProps>;
+  | Partial<BooleanEditorProps>
+  | Partial<ImageViewProps>;
 
 // 弹出层配置
 export type SabPopoverParams = Partial<PopoverProps & DialogProps> & {
@@ -240,16 +251,29 @@ export type SabColumnProps<D = VxeTableDataRow> = VxeColumnProps<D> & {
   // vxe-table 实例
   xTable?: VxeTableInstance;
 
+  // vxe-table 表格宽度设置 auto 会是默认自适应内容宽度
+  // sab-table 做了处理，把 auto 置为空字符串了
+  // 如果不需要置空，请开始这个开关
+  enableAutoWidth?: boolean
+
   // 其他
-  // 不参与批量操作
-  batchForbidden?: boolean
+  // 参与批量操作, 如果单元格支持编辑的话，默认 true，否则false
+  enableBatchAction?: boolean;
   // 不参与动态表头控制
-  noHeaderSet?: boolean
+  noHeaderSet?: boolean;
   // 参与表格尾部汇总
-  withSummary?: boolean
+  withSummary?: boolean;
   // 自定义表格尾部数据汇总处理
-  footerMethod?(column: SabColumnProps<D>, data: D[]): any
+  footerMethod?(column: SabColumnProps<D>, data: D[]): any;
 
   // 表头分组
-  children?: SabColumnProps<D>[]
+  children?: SabColumnProps<D>[];
+
+  // 在被单元格渲染前转换数据
+  // 测试中，不要滥用，目前只推荐 `Image` 使用
+  transformRowDataToCell?(
+    scope:
+      | VxeColumnSlotTypes.DefaultSlotParams<D>
+      | VxeColumnSlotTypes.EditSlotParams<D>
+  ): any;
 };

package/types/table/table-set.d.ts

@@ -1,7 +1,7 @@
 import type { VxeTableInstance } from "vxe-table";
 import type { SabColumnProps } from "./column";
 
-type PureColumn = Pick<SabColumnProps, "field" | "title" | "visible" | "fixed">;
+type PureColumn = Pick<SabColumnProps, "field" | "title" | "visible" | "fixed" | "enableBatchAction"> & { __table__seq: number };
 
 // 表格配置项存储类型
 export type SabTableSetConfig = {
@@ -40,4 +40,6 @@ export interface TableSetColumnsProps {
   initColumns?: PureColumn[];
   // vxe-table 实例
   tableRef?: VxeTableInstance;
+  // 展示批量操作列
+  showBatchActionColumn?: boolean
 }

package/types/table/table.d.ts

@@ -76,6 +76,12 @@ export type SabTableProps<D = VxeTableDataRow> = VxeTableProps<D> & {
     // 使所有的列都支持排序
     enableAll?: boolean;
   };
+  // 树形表格配置
+  treeConfig?: VxeTablePropTypes.TreeConfig<D> & {
+    // 自动将树形结构数据转成扁平结构转给 vxe-table 的 transform 处理，transform: true
+    // 需要提供 childrenField 字段
+    childTransform?: boolean
+  }
 };
 
 // 表格插槽