stk-table-vue 0.0.1-beta.9 → 0.0.2

package/README.md

@@ -8,12 +8,21 @@ js体积(未压缩41kb)
 * [x] 横向虚拟滚动。
 * [x] 列固定。
 * [x] 表头拖动更改顺序。
-* [x] 表头列宽拖动。
-* [x] 多级表头。（不支持横向虚拟滚动）
+* [x] 表头列宽拖动调整宽度。
+* 多级表头。
+  - [x] 支持最多`2级`表头。
+  - [x] 支持更多级表头
+  - [] 多级表头固定列横向滚动
+  - [] 横向虚拟滚动。
 * [x] 支持table-layout: fixed 配置。
-* [x] 鼠标悬浮在表格上，键盘上下左右滚动虚拟表格
-* [] 列固定阴影
-* [] 不传row-key 时，自动按序号生成id
+* 鼠标悬浮在表格上，键盘滚动虚拟表格。
+  - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` 按键支持。
+  - [] 键盘 `PageUp`/ `PageDown` 按键支持。
+* [x] 斑马纹。
+* [] 列固定阴影。
+* [] 不传row-key 时，自动按序号生成id。
+* [] 列筛选。
+* [] 非虚拟滚动时，大数据分批加载。
 
 ## Usage
 > npm install stk-table-vue
@@ -24,8 +33,8 @@ import { StkTable } from 'stk-table-vue'
 import { ref } from 'vue'
 const stkTable = ref<InstanceType<typeof StkTable>>();
 // highlight
-// stkTable.value.setHighlightDimRow([rowId])
-// stkTable.value.setHighlightDimCell(rowId,colId)
+stkTable.value.setHighlightDimRow([rowId]);// highlight row
+stkTable.value.setHighlightDimCell(rowId, colId) // highlight cell
 </script>
 
 <template>
@@ -36,70 +45,78 @@ const stkTable = ref<InstanceType<typeof StkTable>>();
 ## API
 ### StkTable Component Props
 ```ts
-export type StkProps = Partial<{
-    width: string;
-    /** 最小表格宽度 */
-    minWidth: string;
-    /** 表格最大宽度*/
-    maxWidth: string;
-    /** 是否使用 table-layout:fixed */
-    fixedMode: boolean;
-    /** 是否隐藏表头 */
-    headless: boolean;
-    /** 主题，亮、暗 */
-    theme: 'light' | 'dark';
-    /** 虚拟滚动 */
-    virtual: boolean;
-    /** x轴虚拟滚动 */
-    virtualX: boolean;
-    /** 表格列配置 */
-    columns: StkTableColumn<any>[];
-    /** 表格数据源 */
-    dataSource: any[];
-    /** 行唯一键 */
-    rowKey: UniqKey;
-    /** 列唯一键 */
-    colKey: UniqKey;
-    /** 空值展示文字 */
-    emptyCellText: string;
-    /** 暂无数据兜底高度是否撑满 */
-    noDataFull: boolean;
-    /** 是否展示暂无数据 */
-    showNoData: boolean;
-    /** 是否服务端排序，true则不排序数据 */
-    sortRemote: boolean;
-    /** 表头是否溢出展示... */
-    showHeaderOverflow: boolean;
-    /** 表体溢出是否展示... */
-    showOverflow: boolean;
-    /** 是否增加行hover class */
-    showTrHoverClass: boolean;
-    /** 表头是否可拖动 */
-    headerDrag: boolean;
-    /**
-     * 给行附加className<br>
-     * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
-     */
-    rowClassName: (row: any, i: number) => string;
-    /**
-     * 列宽是否可拖动<br>
-     * **不要设置**列minWidth，**必须**设置width<br>
-     * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
-     */
-    colResizable: boolean;
-    /** 可拖动至最小的列宽 */
-    colMinWidth: number;
-    /**
-     * 单元格分割线。
-     * 默认横竖都有
-     * "h" - 仅展示横线
-     * "v" - 仅展示竖线
-     * "body-v" - 仅表体展示竖线
-     */
-    bordered: boolean | 'h' | 'v' | 'body-v';
-    /** 自动重新计算虚拟滚动高度宽度。默认true */
-    autoResize: boolean;
-}>;
+export type StkProps = {
+  width?: string;
+  /** 最小表格宽度 */
+  minWidth?: string;
+  /** 表格最大宽度*/
+  maxWidth?: string;
+  /** 斑马线条纹 */
+  stripe?: boolean;
+  /** 是否使用 table-layout:fixed */
+  fixedMode?: boolean;
+  /** 是否隐藏表头 */
+  headless?: boolean;
+  /** 主题，亮、暗 */
+  theme?: 'light' | 'dark';
+  /** 行高 */
+  rowHeight?: number;
+  /** 虚拟滚动 */
+  virtual?: boolean;
+  /** x轴虚拟滚动 */
+  virtualX?: boolean;
+  /** 表格列配置 */
+  columns?: StkTableColumn<any>[];
+  /** 表格数据源 */
+  dataSource?: any[];
+  /** 行唯一键 */
+  rowKey?: UniqKey;
+  /** 列唯一键 */
+  colKey?: UniqKey;
+  /** 空值展示文字 */
+  emptyCellText?: string;
+  /** 暂无数据兜底高度是否撑满 */
+  noDataFull?: boolean;
+  /** 是否展示暂无数据 */
+  showNoData?: boolean;
+  /** 是否服务端排序，true则不排序数据 */
+  sortRemote?: boolean;
+  /** 表头是否溢出展示... */
+  showHeaderOverflow?: boolean;
+  /** 表体溢出是否展示... */
+  showOverflow?: boolean;
+  /** 是否增加行hover class */
+  showTrHoverClass?: boolean;
+  /** 表头是否可拖动 */
+  headerDrag?: boolean;
+  /**
+   * 给行附加className<br>
+   * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
+   */
+  rowClassName?: (row: any, i: number) => string;
+  /**
+   * 列宽是否可拖动<br>
+   * **不要设置**列minWidth，**必须**设置width<br>
+   * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
+   */
+  colResizable?: boolean;
+  /** 可拖动至最小的列宽 */
+  colMinWidth?: number;
+  /**
+   * 单元格分割线。
+   * 默认横竖都有
+   * "h" - 仅展示横线
+   * "v" - 仅展示竖线
+   * "body-v" - 仅表体展示竖线
+   */
+  bordered?: boolean | 'h' | 'v' | 'body-v';
+  /**
+   * 自动重新计算虚拟滚动高度宽度。默认true
+   * [非响应式]
+   * 传入方法表示resize后的回调
+   */
+  autoResize?: boolean | (() => void);
+};
 ```
 
 ### StkTableColumn
@@ -155,6 +172,8 @@ export type StkTableColumn<T extends Record<string, any>> = {
     :style="{height:props.height}"
     theme='dark'
     height='200px'
+    bordered="h"
+    :row-height="28"
     :show-overflow="false"
     :show-header-overflow="false"
     :sort-remote="false"
@@ -163,6 +182,9 @@ export type StkTableColumn<T extends Record<string, any>> = {
     virtual
     virtual-x
     no-data-full
+    col-resizable
+    auto-resize
+    :col-min-width="10"
     :headless="false"
     :data-source="dataSource"
     @current-change="onCurrentChange"

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -1,4 +1,4 @@
-import { SortOption, StkTableColumn, UniqKey } from './types/index';
+import { Order, SortOption, StkTableColumn, UniqKey } from './types/index';
 /**
  * 选中一行，
  * @param {string} rowKey
@@ -36,12 +36,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minWidth?: string | undefined;
     /** 表格最大宽度*/
     maxWidth?: string | undefined;
+    /** 斑马线条纹 */
+    stripe?: boolean | undefined;
     /** 是否使用 table-layout:fixed */
     fixedMode?: boolean | undefined;
     /** 是否隐藏表头 */
     headless?: boolean | undefined;
     /** 主题，亮、暗 */
     theme?: "light" | "dark" | undefined;
+    /** 行高 */
+    rowHeight?: number | undefined;
     /** 虚拟滚动 */
     virtual?: boolean | undefined;
     /** x轴虚拟滚动 */
@@ -94,15 +98,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * 自动重新计算虚拟滚动高度宽度。默认true
      * [非响应式]
+     * 传入方法表示resize后的回调
      */
-    autoResize?: boolean | undefined;
+    autoResize?: boolean | (() => void) | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
+    stripe: boolean;
     minWidth: string;
     maxWidth: string;
     headless: boolean;
     theme: string;
+    rowHeight: number;
     virtual: boolean;
     virtualX: boolean;
     columns: () => never[];
@@ -135,31 +142,39 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     scrollTo: typeof scrollTo;
     getTableData: typeof getTableData;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    scroll: (...args: any[]) => void;
-    "th-drag-start": (...args: any[]) => void;
-    "col-order-change": (...args: any[]) => void;
-    "th-drop": (...args: any[]) => void;
-    columns: (...args: any[]) => void;
-    "sort-change": (...args: any[]) => void;
-    "row-click": (...args: any[]) => void;
-    "current-change": (...args: any[]) => void;
-    "row-dblclick": (...args: any[]) => void;
-    "header-row-menu": (...args: any[]) => void;
-    "row-menu": (...args: any[]) => void;
-    "cell-click": (...args: any[]) => void;
-    "header-cell-click": (...args: any[]) => void;
+    "sort-change": (col: StkTableColumn<any>, order: Order, data: any[]) => void;
+    "row-click": (ev: MouseEvent, row: any) => void;
+    "current-change": (ev: MouseEvent | null, row: any) => void;
+    "row-dblclick": (ev: MouseEvent, row: any) => void;
+    "header-row-menu": (ev: MouseEvent) => void;
+    "row-menu": (ev: MouseEvent, row: any) => void;
+    "cell-click": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
+    "header-cell-click": (ev: MouseEvent, col: StkTableColumn<any>) => void;
+    scroll: (ev: Event, data: {
+        startIndex: number;
+        endIndex: number;
+    }) => void;
+    "scroll-x": (ev: Event) => void;
+    "col-order-change": (dragStartKey: string, targetColKey: string) => void;
+    "th-drag-start": (dragStartKey: string) => void;
+    "th-drop": (targetColKey: string) => void;
+    "update:columns": (cols: StkTableColumn<any>[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     width?: string | undefined;
     /** 最小表格宽度 */
     minWidth?: string | undefined;
     /** 表格最大宽度*/
     maxWidth?: string | undefined;
+    /** 斑马线条纹 */
+    stripe?: boolean | undefined;
     /** 是否使用 table-layout:fixed */
     fixedMode?: boolean | undefined;
     /** 是否隐藏表头 */
     headless?: boolean | undefined;
     /** 主题，亮、暗 */
     theme?: "light" | "dark" | undefined;
+    /** 行高 */
+    rowHeight?: number | undefined;
     /** 虚拟滚动 */
     virtual?: boolean | undefined;
     /** x轴虚拟滚动 */
@@ -212,15 +227,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * 自动重新计算虚拟滚动高度宽度。默认true
      * [非响应式]
+     * 传入方法表示resize后的回调
      */
-    autoResize?: boolean | undefined;
+    autoResize?: boolean | (() => void) | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
+    stripe: boolean;
     minWidth: string;
     maxWidth: string;
     headless: boolean;
     theme: string;
+    rowHeight: number;
     virtual: boolean;
     virtualX: boolean;
     columns: () => never[];
@@ -241,24 +259,30 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     bordered: boolean;
     autoResize: boolean;
 }>>> & {
-    onScroll?: ((...args: any[]) => any) | undefined;
-    "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
-    "onCol-order-change"?: ((...args: any[]) => any) | undefined;
-    "onTh-drop"?: ((...args: any[]) => any) | undefined;
-    onColumns?: ((...args: any[]) => any) | undefined;
-    "onSort-change"?: ((...args: any[]) => any) | undefined;
-    "onRow-click"?: ((...args: any[]) => any) | undefined;
-    "onCurrent-change"?: ((...args: any[]) => any) | undefined;
-    "onRow-dblclick"?: ((...args: any[]) => any) | undefined;
-    "onHeader-row-menu"?: ((...args: any[]) => any) | undefined;
-    "onRow-menu"?: ((...args: any[]) => any) | undefined;
-    "onCell-click"?: ((...args: any[]) => any) | undefined;
-    "onHeader-cell-click"?: ((...args: any[]) => any) | undefined;
+    onScroll?: ((ev: Event, data: {
+        startIndex: number;
+        endIndex: number;
+    }) => any) | undefined;
+    "onUpdate:columns"?: ((cols: StkTableColumn<any>[]) => any) | undefined;
+    "onTh-drag-start"?: ((dragStartKey: string) => any) | undefined;
+    "onCol-order-change"?: ((dragStartKey: string, targetColKey: string) => any) | undefined;
+    "onTh-drop"?: ((targetColKey: string) => any) | undefined;
+    "onSort-change"?: ((col: StkTableColumn<any>, order: Order, data: any[]) => any) | undefined;
+    "onRow-click"?: ((ev: MouseEvent, row: any) => any) | undefined;
+    "onCurrent-change"?: ((ev: MouseEvent | null, row: any) => any) | undefined;
+    "onRow-dblclick"?: ((ev: MouseEvent, row: any) => any) | undefined;
+    "onHeader-row-menu"?: ((ev: MouseEvent) => any) | undefined;
+    "onRow-menu"?: ((ev: MouseEvent, row: any) => any) | undefined;
+    "onCell-click"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
+    "onHeader-cell-click"?: ((ev: MouseEvent, col: StkTableColumn<any>) => any) | undefined;
+    "onScroll-x"?: ((ev: Event) => any) | undefined;
 }, {
     width: string;
     minWidth: string;
     maxWidth: string;
+    rowHeight: number;
     colKey: UniqKey;
+    stripe: boolean;
     fixedMode: boolean;
     headless: boolean;
     theme: "light" | "dark";
@@ -279,7 +303,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
-    autoResize: boolean;
+    autoResize: boolean | (() => void);
 }, {}>, {
     tableHeader?(_: {
         column: StkTableColumn<any>;

package/lib/src/StkTable/useColResize.d.ts

@@ -1,18 +1,18 @@
-import { Ref } from 'vue';
-import { StkTableColumn } from './types';
-type Params = {
-    props: any;
-    emit: any;
-    tableContainer: Ref<HTMLElement | undefined>;
-    tableHeaderLast: Ref<StkTableColumn<any>[]>;
-    colResizeIndicator: Ref<HTMLElement | undefined>;
-    colKeyGen: (p: any) => string;
-};
-/** 列宽拖动 */
-export declare function useColResize({ tableContainer, tableHeaderLast, colResizeIndicator, props, emit, colKeyGen }: Params): {
-    isColResizing: Ref<boolean>;
-    onThResizeMouseDown: (e: MouseEvent, col: StkTableColumn<any>, isPrev?: boolean) => void;
-    onThResizeMouseMove: (e: MouseEvent) => void;
-    onThResizeMouseUp: (e: MouseEvent) => void;
-};
-export {};
+import { Ref } from 'vue';
+import { StkTableColumn } from './types';
+type Params<DT extends Record<string, any>> = {
+    props: any;
+    emits: any;
+    tableContainer: Ref<HTMLElement | undefined>;
+    tableHeaderLast: Ref<StkTableColumn<DT>[]>;
+    colResizeIndicator: Ref<HTMLElement | undefined>;
+    colKeyGen: (p: any) => string;
+};
+/** 列宽拖动 */
+export declare function useColResize<DT extends Record<string, any>>({ tableContainer, tableHeaderLast, colResizeIndicator, props, emits, colKeyGen, }: Params<DT>): {
+    isColResizing: Ref<boolean>;
+    onThResizeMouseDown: (e: MouseEvent, col: StkTableColumn<DT>, isPrev?: boolean) => void;
+    onThResizeMouseMove: (e: MouseEvent) => void;
+    onThResizeMouseUp: (e: MouseEvent) => void;
+};
+export {};

package/lib/src/StkTable/useFixedStyle.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties, Ref } from 'vue';
 import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 type Options = {
+    props: any;
     tableHeaderLast: Ref<StkTableColumn<any>[]>;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
@@ -13,7 +14,7 @@ type Options = {
  * @param param0
  * @returns
  */
-export declare function useFixedStyle({ tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }: Options): {
-    getFixedStyle: (tagType: 1 | 2, col: StkTableColumn<any>) => CSSProperties;
+export declare function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }: Options): {
+    getFixedStyle: (tagType: 1 | 2, col: StkTableColumn<any>, depth?: number) => CSSProperties;
 };
 export {};

package/lib/src/StkTable/useThDrag.d.ts

@@ -1,14 +1,14 @@
-type Params = {
-    emit: any;
-};
-/**
- * 列顺序拖动
- * @param param0
- * @returns
- */
-export declare function useThDrag({ emit }: Params): {
-    onThDragStart: (e: MouseEvent) => void;
-    onThDragOver: (e: MouseEvent) => void;
-    onThDrop: (e: MouseEvent) => void;
-};
-export {};
+type Params = {
+    emits: any;
+};
+/**
+ * 列顺序拖动
+ * @param param0
+ * @returns
+ */
+export declare function useThDrag({ emits }: Params): {
+    onThDragStart: (e: MouseEvent) => void;
+    onThDragOver: (e: MouseEvent) => void;
+    onThDrop: (e: MouseEvent) => void;
+};
+export {};

package/lib/src/StkTable/useVirtualScroll.d.ts

@@ -1,17 +1,21 @@
 import { Ref, ShallowRef } from 'vue';
 import { StkTableColumn } from './types';
-type Option = {
+type Option<DT extends Record<string, any>> = {
     tableContainer: Ref<HTMLElement | undefined>;
     props: any;
-    dataSourceCopy: ShallowRef<any[]>;
-    tableHeaderLast: Ref<StkTableColumn<any>[]>;
+    dataSourceCopy: ShallowRef<DT[]>;
+    tableHeaderLast: Ref<StkTableColumn<DT>[]>;
 };
 /** 暂存纵向虚拟滚动的数据 */
 export type VirtualScrollStore = {
     /** 容器高度 */
     containerHeight: number;
+    /** 一页的大小 */
+    pageSize: number;
     /** 数组开始位置 */
     startIndex: number;
+    /** 数组结束位置 */
+    endIndex: number;
     /** 行高 */
     rowHeight: number;
     /** 表格定位上边距 */
@@ -37,10 +41,12 @@ export type VirtualScrollXStore = {
  * @param param0
  * @returns
  */
-export declare function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast }: Option): {
+export declare function useVirtualScroll<DT extends Record<string, any>>({ tableContainer, props, dataSourceCopy, tableHeaderLast }: Option<DT>): {
     virtualScroll: Ref<{
         containerHeight: number;
+        pageSize: number;
         startIndex: number;
+        endIndex: number;
         rowHeight: number;
         offsetTop: number;
         scrollTop: number;
@@ -53,10 +59,10 @@ export declare function useVirtualScroll({ tableContainer, props, dataSourceCopy
         scrollLeft: number;
     }>;
     virtual_on: import("vue").ComputedRef<any>;
-    virtual_dataSourcePart: import("vue").ComputedRef<any[]>;
+    virtual_dataSourcePart: import("vue").ComputedRef<DT[]>;
     virtual_offsetBottom: import("vue").ComputedRef<number>;
     virtualX_on: import("vue").ComputedRef<any>;
-    virtualX_columnPart: import("vue").ComputedRef<StkTableColumn<any>[]>;
+    virtualX_columnPart: import("vue").ComputedRef<StkTableColumn<DT>[]>;
     virtualX_offsetRight: import("vue").ComputedRef<number>;
     initVirtualScroll: (height?: number) => void;
     initVirtualScrollY: (height?: number) => void;

package/lib/src/StkTable/utils.d.ts

@@ -1,23 +1,23 @@
-import { Order, SortOption, SortState, StkTableColumn } from './types';
-/**
- * 对有序数组插入新数据
- * @param sortState
- * @param sortState.dataIndex 排序的列
- * @param sortState.order 排序顺序
- * @param sortState.sortType 排序方式
- * @param newItem 要插入的数据
- * @param targetArray 表格数据
- */
-export declare function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[]): T[];
-/**
- * 表格排序抽离
- * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
- * 使用者在@sort-change事件中自行更改table props 'dataSource'完成排序。
- * TODO: key 唯一值，排序字段相同时，根据唯一值排序。
- * @param sortOption 列配置
- * @param order 排序方式
- * @param dataSource 排序的数组
- */
-export declare function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[];
-/** column 的层级 */
-export declare function howDeepTheColumn(arr: StkTableColumn<any>[], level?: number): number;
+import { Order, SortOption, SortState, StkTableColumn } from './types';
+/**
+ * 对有序数组插入新数据
+ * @param sortState
+ * @param sortState.dataIndex 排序的列
+ * @param sortState.order 排序顺序
+ * @param sortState.sortType 排序方式
+ * @param newItem 要插入的数据
+ * @param targetArray 表格数据
+ */
+export declare function insertToOrderedArray<T extends object>(sortState: SortState<keyof T>, newItem: any, targetArray: T[]): T[];
+/**
+ * 表格排序抽离
+ * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
+ * 使用者在@sort-change事件中自行更改table props 'dataSource'完成排序。
+ * TODO: key 唯一值，排序字段相同时，根据唯一值排序。
+ * @param sortOption 列配置
+ * @param order 排序方式
+ * @param dataSource 排序的数组
+ */
+export declare function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[];
+/** 表头column配置的层级 */
+export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: number): number;