@wx-design/components 0.5.2 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wx-design/components",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "",
   "type": "module",
   "main": "./lib/index.js",

package/types/table/column.d.ts

@@ -3,18 +3,33 @@ import type {
   InputProps,
   InputNumberProps,
   DatePickerProps,
-  PopoverProps
+  PopoverProps,
+  CheckboxProps,
 } from "element-plus";
 
 export interface SabColumnSlots<D = VxeTableDataRow> {
   /**
    * 自定义显示内容模板
    */
-  default: ((params: VxeColumnSlotTypes.DefaultSlotParams<D>) => any) | string;
+  default:
+    | ((
+        params: VxeColumnSlotTypes.DefaultSlotParams<D> & {
+          column: SabColumnProps<D>;
+        },
+        editorProps: SabCellEditorParams
+      ) => any)
+    | string;
   /**
    * 自定义表头内容的模板
    */
-  header: ((params: VxeColumnSlotTypes.HeaderSlotParams<D>) => any) | string;
+  header:
+    | ((
+        params: VxeColumnSlotTypes.HeaderSlotParams<D> & {
+          column: SabColumnProps<D>;
+        },
+        editorProps: SabCellEditorParams
+      ) => any)
+    | string;
   /**
    * 自定义表尾内容的模板
    */
@@ -44,7 +59,9 @@ export interface SabColumnSlots<D = VxeTableDataRow> {
    */
   edit:
     | ((
-        params: VxeColumnSlotTypes.EditSlotParams<D>,
+        params: VxeColumnSlotTypes.EditSlotParams<D> & {
+          column: SabColumnProps<D>;
+        },
         editorProps: SabCellEditorParams
       ) => any)
     | string;
@@ -60,7 +77,7 @@ export interface SabColumnSlots<D = VxeTableDataRow> {
 }
 
 // 单选框属性
-export type SabCellSelectProps<D = any> = {
+export type SabCellSelectProps<D = VxeTableDataRow> = {
   // 禁用状态
   disabled?: boolean;
   // 只读模式
@@ -75,9 +92,28 @@ export type SabCellSelectProps<D = any> = {
   valueKey?: string;
   // 用于禁用状态的字段名，默认 disabled
   disabledKey?: string;
+  // select 变更时影响的 row.value 字段
+  effectValueField?: string;
   // 动态获取单元格选项
-  dynamicOptions?: (params: VxeColumnSlotTypes.DefaultSlotParams) => Promise<any[]>;
+  dynamicOptions?: (
+    params: VxeColumnSlotTypes.DefaultSlotParams
+  ) => Promise<any[]>;
+  // 渲染选项展示
+  renderOption?(option: D): any;
+  // 渲染选项的label
+  renderOptionLabel?(option: D): string;
+};
+
+// 动态单元格配置
+export type DynamicCellProps<D = VxeTableDataRow> = {
+  // 动态设置单元格类型
+  getSabCellType?(
+    scope:
+      | VxeColumnSlotTypes.DefaultSlotParams<D>
+      | VxeColumnSlotTypes.EditSlotParams<D>
+  ): SabCellType;
 };
+
 // 单元格编辑器参数
 export type SabCellEditorParams =
   | Partial<InputProps>
@@ -85,23 +121,34 @@ export type SabCellEditorParams =
   | Partial<DatePickerProps>
   | Partial<SabCellSelectProps>
   | Partial<PopoverProps>
+  | Partial<CheckboxProps>
+  | Partial<SabPopoverParams>
+  | Partial<DynamicCellProps>;
 
 // 弹出层配置
-export type SabPopoverParams = {
-  // 触发弹出的元素，默认icon
-  trigger?: "cell" | 'icon',
+export type SabPopoverParams = Partial<PopoverProps> & {
   // 触发事件，默认 click
-  triggerEvent?: "click" | "hover" | "focus" | "contextmenu",
+  // 如果 popType === dialog 则只支持 click
+  trigger?: "click" | "hover" | "focus" | "contextmenu";
   // 弹出类型
-  popType?: 'popover' | 'dialog',
-  // 是否展示弹出按钮
-  showButton?: boolean
-}
+  popType?: "popover";
+  // 是否隐藏弹出按钮
+  hideButton?: boolean;
+};
 
 // 表格列设置
 export type SabColumnProps<D = VxeTableDataRow> = VxeColumnProps<D> & {
   // 单元格类型
-  sabCellType?: 'input' | 'input-number' | 'select' | 'date-picker' | 'image' | 'color' | 'boolean' | 'popover';
+  sabCellType?:
+    | "input"
+    | "input-number"
+    | "select"
+    | "date-picker"
+    | "image"
+    | "color"
+    | "boolean"
+    | "popover"
+    | "dynamic";
   // 附加的单元格编辑器参数
   editorProps?: Partial<SabCellEditorParams>;
   // 单元格是否可编辑
@@ -118,7 +165,7 @@ export type SabColumnProps<D = VxeTableDataRow> = VxeColumnProps<D> & {
   // 启用弹出层
   enablePopover?: boolean;
   // 弹出层配置
-  popoverConfig?: SabPopoverParams
+  popoverConfig?: SabPopoverParams;
   // 字段名
   field?: keyof D;
 };

package/types/table/table.d.ts

@@ -18,8 +18,6 @@ export type SabTableProps<D = VxeTableDataRow> = VxeTableProps<D> & {
   showToolbar?: boolean;
   // 点击未选中行的单元格自动取消选择选中行
   autoClearSelected?: boolean;
-  // TODO: 单元格弹出层配置
-  popoverConfig?: SabPopoverParams;
   // 自动列宽赋值，允许在column中 width 覆盖
   autoColumnWidth?: boolean;
 }

package/es/demos/table/mock.d.ts

@@ -1,76 +0,0 @@
-export declare const mockData: ({
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    avater: string;
-    color: string;
-    isok: boolean;
-} | {
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    color: string;
-    isok: boolean;
-    avater?: undefined;
-} | {
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    color: string;
-    avater?: undefined;
-    isok?: undefined;
-} | {
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    avater?: undefined;
-    color?: undefined;
-    isok?: undefined;
-} | {
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    avater: string;
-    color?: undefined;
-    isok?: undefined;
-})[];

package/lib/demos/table/mock.d.ts

@@ -1,76 +0,0 @@
-export declare const mockData: ({
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    avater: string;
-    color: string;
-    isok: boolean;
-} | {
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    color: string;
-    isok: boolean;
-    avater?: undefined;
-} | {
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    color: string;
-    avater?: undefined;
-    isok?: undefined;
-} | {
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    avater?: undefined;
-    color?: undefined;
-    isok?: undefined;
-} | {
-    id: number;
-    name: string;
-    nickname: string;
-    role: string;
-    sex: string;
-    sex2: string[];
-    num1: number;
-    age: number;
-    address: string;
-    date12: string;
-    date13: string;
-    avater: string;
-    color?: undefined;
-    isok?: undefined;
-})[];