@wx-design/components 0.8.16 → 0.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wx-design/components",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "description": "",
   "type": "module",
   "main": "./lib/index.js",
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.6.1",
+    "classnames": "^2.5.1",
     "deepmerge": "^4.3.1",
     "element-plus": "^2.4.2",
     "lodash": "^4.17.21",

package/types/table/column.d.ts

@@ -1,4 +1,4 @@
-import { VxeTableDataRow, VxeColumnProps, VxeColumnSlotTypes } from "vxe-table";
+import { VxeTableDataRow, VxeColumnProps, VxeColumnSlotTypes, VxeTableInstance } from "vxe-table";
 import type {
   InputProps,
   InputNumberProps,
@@ -6,6 +6,7 @@ import type {
   PopoverProps,
   CheckboxProps,
 } from "element-plus";
+import type { SabHeaderFilterProps } from './'
 
 export interface SabColumnSlots<D = VxeTableDataRow> {
   /**
@@ -102,6 +103,17 @@ export type SabCellSelectProps<D = VxeTableDataRow> = {
       keywords?: string
     }
   ) => Promise<any[]>;
+  // 动态获取方法的防抖配置
+  dynamicDebounce?: {
+    // 延迟时间, 毫秒，默认300
+    delay?: number;
+    // 前导, 默认 false
+    leading?: boolean;
+    // 后导, 默认 true
+    trailing?: boolean;
+    // 最大等待时间
+    maxWait?: number;
+  },
   // 渲染选项展示
   renderOption?(option: D): any;
   // 渲染选项的label
@@ -148,8 +160,20 @@ export type SabPopoverParams = Partial<PopoverProps> & {
   hideButton?: boolean;
 };
 
+// 列表头筛选配置
+export type SabColumnFilterParams = SabHeaderFilterProps & {
+  // 默认从 column.sabCellType 继承
+  // 只支持 input, input-number, date-picker
+  // 其他默认当做 input 
+  sabCellType?: string,
+  // 附加给头部筛选的参数
+  editorProps?: Partial<SabCellEditorParams>;
+}
+
 // 表格列设置
 export type SabColumnProps<D = VxeTableDataRow> = VxeColumnProps<D> & {
+  // 字段名
+  field?: keyof D;
   // 单元格类型
   sabCellType?:
     | "input"
@@ -184,6 +208,8 @@ export type SabColumnProps<D = VxeTableDataRow> = VxeColumnProps<D> & {
   enablePopover?: boolean;
   // TODO: 弹出层配置
   popoverConfig?: SabPopoverParams;
-  // 字段名
-  field?: keyof D;
+  // 自定义头部的筛选
+  headerFilterConfig?: SabColumnFilterParams;
+  // vxe-table 实例
+  xTable?: VxeTableInstance
 };

package/types/table/table.d.ts

@@ -1,5 +1,27 @@
-import { VxeTableProps, VxeTableDataRow, VxeTableInstance } from "vxe-table";
-import { SabColumnProps, SabPopoverParams, TableSetProps } from "./";
+import {
+  VxeTableProps,
+  VxeTableDataRow,
+  VxeTableInstance,
+  VxeColumnPropTypes,
+  VxeTableDefines
+} from "vxe-table";
+import {
+  SabColumnProps,
+  SabPopoverParams,
+  TableSetProps,
+  SabCellEditorParams,
+} from "./";
+
+// 头部筛选条，默认不展示
+export type SabHeaderFilterProps = {
+  // 是否启用筛选条，默认 true
+  enable?: boolean;
+  // 触发方式
+  // change - 当筛选项发生变动后立即触发
+  trigger?: "change";
+  // 筛选方法调用
+  filterMethod?: VxeColumnPropTypes.FilterMethod<D>;
+};
 
 export type SabTableProps<D = VxeTableDataRow> = VxeTableProps<D> & {
   // 表名，如果你想保存表格的配置，则 name 必传
@@ -21,6 +43,10 @@ export type SabTableProps<D = VxeTableDataRow> = VxeTableProps<D> & {
   };
   // 带上选项框
   withCheckbox?: boolean;
+  // 头部筛选条，默认不展示
+  headerFilterConfig?: SabHeaderFilterProps;
+  // 头部筛选条数据 model
+  headerFilterModel?: any;
   // 展示工具栏
   showToolbar?: boolean;
   // 点击未选中行的单元格自动取消选择选中行
@@ -39,7 +65,7 @@ export type SabTableProps<D = VxeTableDataRow> = VxeTableProps<D> & {
   rowBorderHighlight?: boolean;
   // 表格设置控件配置
   tableSetConfig?: Partial<TableSetProps>;
-}
+};
 
 // 表格插槽
 export interface TableSlots {
@@ -63,4 +89,6 @@ export interface SabTableInstance<D = VxeTableDataRow> {
   getInstance(): VxeTableInstance<D>;
   // 重新加载某行数据
   reloadRow(row: D | Array<D>): void;
+  // 获取表头筛选数据
+  getCheckedFilters(): VxeTableDefines.FilterCheckedParams<D>;
 }

package/es/core/Table/components/HeaderFilterRender.d.ts

@@ -1,12 +0,0 @@
-import { PropType } from "vue";
-import type { SabColumnProps } from "../../../types/table";
-declare const HeaderFilterRender: import("vue").DefineComponent<{
-    column: PropType<SabColumnProps>;
-    headerFilterModel: any;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    column: PropType<SabColumnProps>;
-    headerFilterModel: any;
-}>>, {
-    headerFilterModel: any;
-}, {}>;
-export default HeaderFilterRender;

package/lib/core/Table/components/HeaderFilterRender.d.ts

@@ -1,12 +0,0 @@
-import { PropType } from "vue";
-import type { SabColumnProps } from "../../../types/table";
-declare const HeaderFilterRender: import("vue").DefineComponent<{
-    column: PropType<SabColumnProps>;
-    headerFilterModel: any;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    column: PropType<SabColumnProps>;
-    headerFilterModel: any;
-}>>, {
-    headerFilterModel: any;
-}, {}>;
-export default HeaderFilterRender;