stk-table-vue 0.2.0 → 0.2.2

package/README.md

@@ -1,37 +1,41 @@
 # StkTable (Sticky Table)
 
 Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
-js体积(未压缩46kb)
 
+Vue2.7支持引入源码(**ts**)使用。
+
+## Bug TODO:
+* [] props.dataSource 为 shallowRef 时，高亮行不生效。(2024.02.21)
 ## Feature TODO:
 * [x] 高亮行，单元格。
-* [x] 横向虚拟滚动。
+* [x] 虚拟滚动。
+  - [x] 纵向。
+  - [x] 横向（必须设置列宽）。
 * [x] 列固定。
+  - [x] 固定列阴影。
+    - [x] 多级表头固定列阴影。
+    - [] sticky column 动态计算阴影位置。
+* [] 列筛选。
+* [x] 斑马纹。
+  - [] 虚拟滚动斑马纹。
 * [x] 表头拖动更改顺序。
-* [x] 表头列宽拖动调整宽度。
+* [x] 表头拖动调整列宽。
 * [x] 排序
-  - [x] 基本表头点击排序
+  - [x] 基本表头点击排序。
   - [] 支持配置 `null` | `undefined` 永远排最后。
   - [] 支持配置 string 使用 `String.prototype.localCompare` 排序。
 * 多级表头。
   - [x] 支持最多`2级`表头。
-  - [x] 支持更多级表头
-  - [] 多级表头border-left 问题。
-  - [] 多级表头固定列横向滚动
+  - [x] 支持更多级表头。
   - [] 横向虚拟滚动。
 * [x] 支持table-layout: fixed 配置。
 * 鼠标悬浮在表格上，键盘滚动虚拟表格。
   - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` 按键支持。
   - [x] 键盘 `PageUp`/ `PageDown` 按键支持。
-* [x] 斑马纹。
-* [x] 列固定阴影。
-  - [] 多级表头固定列阴影。
-  - [] sticky column 动态计算阴影位置。
 * [] 不传row-key 时，自动按序号生成id。
-* [] 列筛选。
 * [] 非虚拟滚动时，大数据分批加载。
-* [x] vue2支持。
-  - `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
+* [x] vue2.7支持（引入源码使用）。
+  - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
 
 
 ## Usage
@@ -53,13 +57,39 @@ stkTable.value.setHighlightDimCell(rowId, colId) // highlight cell
 
 ```
 
-### Vue2 Usage
-vue2 支持源码引入使用。依赖`less`。
+### Vue2.7 Usage
+vue2.7 支持引入源码使用。依赖`less`。
+```html
+<script>
+  import { StkTable } from 'stk-table-vue/src/StkTable/index';
+</script>
+```
+不要less的话
 ```html
 <script>
-  import { StkTable } from 'stk-table-vue/src/StkTable/index'
+  import { StkTable } from 'stk-table-vue/src/StkTable/StkTable.vue';
+  import 'stk-table-vue/lib/style.css';
 </script>
 ```
+#### webpack TS 配置参考
+##### webpack.config.js
+```js
+ rules:[{ 
+  test: /\.ts$/,
+  loader:'swc-loader'
+ }]
+```
+##### .swcrc
+```json
+{
+  "jsc":{
+    "parser":{
+      "syntax":"typescript",
+    }
+  }
+}
+```
+
 
 
 ## Notice
@@ -115,6 +145,8 @@ export type StkProps = {
   showTrHoverClass?: boolean;
   /** 表头是否可拖动 */
   headerDrag?: boolean;
+  /** 表头是否可拖动。支持回调函数。 */
+  headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
    * 给行附加className<br>
    * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -146,6 +178,11 @@ export type StkProps = {
   fixedColShadow?: boolean;
   /** 优化vue2 滚动 */
   optimizeVue2Scroll?: boolean;
+  /** 排序配置 */
+  sortConfig?: {
+    /** 空值是否排最下面 */
+    emptyToBottom: false,
+  },
 };
 ```
 #### Emits
@@ -155,7 +192,7 @@ export type StkProps = {
      * 排序变更触发
      * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
      */
-    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[]): void;
+    (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig:SortConfig): void;
     /**
      * 一行点击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -238,6 +275,8 @@ defineExpose({
   setHighlightDimRow,
   /** 表格排序列dataIndex */
   sortCol,
+  /** 获取当前排序状态 */
+  getSortColumns,
   /** 设置排序 */
   setSorter,
   /** 重置排序 */

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

@@ -1,4 +1,6 @@
-import { Order, SortOption, StkTableColumn, UniqKey } from './types/index';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKey } from './types/index';
+/** Generic stands for DataType */
+type DT = any;
 /**
  * 选中一行，
  * @param {string} rowKey
@@ -30,6 +32,8 @@ declare function resetSorter(): void;
 declare function scrollTo(top?: number | null, left?: number | null): void;
 /** 获取当前状态的表格数据 */
 declare function getTableData(): any[];
+/** 获取当前排序列的信息 */
+declare function getSortColumns(): SortState<DT>[];
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     width?: string | undefined;
     /** 最小表格宽度 */
@@ -74,8 +78,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showOverflow?: boolean | undefined;
     /** 是否增加行hover class */
     showTrHoverClass?: boolean | undefined;
-    /** 表头是否可拖动 */
-    headerDrag?: boolean | undefined;
+    /** 表头是否可拖动。支持回调函数。 */
+    headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -107,6 +111,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fixedColShadow?: boolean | undefined;
     /** 优化vue2 滚动 */
     optimizeVue2Scroll?: boolean | undefined;
+    /** 排序配置 */
+    sortConfig?: SortConfig | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -138,6 +144,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     autoResize: boolean;
     fixedColShadow: boolean;
     optimizeVue2Scroll: boolean;
+    sortConfig: () => {
+        emptyToBottom: boolean;
+    };
 }>, {
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll: (height?: number | undefined) => void;
@@ -153,6 +162,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     setHighlightDimRow: (rowKeyValues: (string | number)[]) => void;
     /** 表格排序列dataIndex */
     sortCol: import("vue").Ref<string | null | undefined>;
+    /** 获取当前排序状态 */
+    getSortColumns: typeof getSortColumns;
     /** 设置排序 */
     setSorter: typeof setSorter;
     /** 重置排序 */
@@ -162,7 +173,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 获取表格数据 */
     getTableData: typeof getTableData;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "sort-change": (col: StkTableColumn<any>, order: Order, data: any[]) => void;
+    "sort-change": (col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig) => void;
     "row-click": (ev: MouseEvent, row: any) => void;
     "current-change": (ev: MouseEvent | null, row: any) => void;
     "row-dblclick": (ev: MouseEvent, row: any) => void;
@@ -179,7 +190,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "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<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     width?: string | undefined;
     /** 最小表格宽度 */
     minWidth?: string | undefined;
@@ -223,8 +234,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showOverflow?: boolean | undefined;
     /** 是否增加行hover class */
     showTrHoverClass?: boolean | undefined;
-    /** 表头是否可拖动 */
-    headerDrag?: boolean | undefined;
+    /** 表头是否可拖动。支持回调函数。 */
+    headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -256,6 +267,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fixedColShadow?: boolean | undefined;
     /** 优化vue2 滚动 */
     optimizeVue2Scroll?: boolean | undefined;
+    /** 排序配置 */
+    sortConfig?: SortConfig | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -287,6 +300,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     autoResize: boolean;
     fixedColShadow: boolean;
     optimizeVue2Scroll: boolean;
+    sortConfig: () => {
+        emptyToBottom: boolean;
+    };
 }>>> & {
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -296,7 +312,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "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;
+    "onSort-change"?: ((col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig) => 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;
@@ -312,7 +328,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowHeight: number;
     headless: boolean;
     headerRowHeight: number | null;
-    colKey: UniqKey;
     stripe: boolean;
     fixedMode: boolean;
     theme: "light" | "dark";
@@ -321,6 +336,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     columns: StkTableColumn<any>[];
     dataSource: any[];
     rowKey: UniqKey;
+    colKey: UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -328,7 +344,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow: boolean;
     showOverflow: boolean;
     showTrHoverClass: boolean;
-    headerDrag: boolean;
+    headerDrag: boolean | ((col: StkTableColumn<any>) => boolean);
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
@@ -336,6 +352,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     autoResize: boolean | (() => void);
     fixedColShadow: boolean;
     optimizeVue2Scroll: boolean;
+    sortConfig: SortConfig;
 }, {}>, {
     tableHeader?(_: {
         col: StkTableColumn<any>;

package/lib/src/StkTable/types/index.d.ts

@@ -26,11 +26,11 @@ export type StkTableColumn<T extends Record<string, any>> = {
     /** 筛选 */
     sorter?: Sorter<T>;
     /** 列宽。横向虚拟滚动时必须设置。 */
-    width?: string;
+    width?: string | number;
     /** 最小列宽。非x虚拟滚动生效。 */
-    minWidth?: string;
+    minWidth?: string | number;
     /** 最大列宽。非x虚拟滚动生效。 */
-    maxWidth?: string;
+    maxWidth?: string | number;
     /**th class */
     headerClassName?: string;
     /** td class */
@@ -70,4 +70,9 @@ export type SortState<T> = {
     sortType?: 'number' | 'string';
 };
 export type UniqKey = string | ((param: any) => string);
+/** 排序配置 */
+export type SortConfig = {
+    /** 空值始终排在列表末尾 */
+    emptyToBottom?: boolean;
+};
 export {};

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

@@ -1,9 +1,8 @@
 import { Ref } from 'vue';
 type Options = {
+    props: any;
     tableContainer: Ref<HTMLElement | undefined>;
     initVirtualScroll: () => void;
-    scrollTo: () => void;
-    props: any;
     /** 防抖延时 */
     debounceMs: number;
 };
@@ -11,5 +10,5 @@ type Options = {
  * 窗口变化自动重置虚拟滚动
  * @param param0
  */
-export declare function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, debounceMs }: Options): void;
+export declare function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs }: Options): void;
 export {};

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

@@ -1,4 +1,6 @@
+import { StkTableColumn } from './types';
 type Params = {
+    props: any;
     emits: any;
 };
 /**
@@ -6,9 +8,10 @@ type Params = {
  * @param param0
  * @returns
  */
-export declare function useThDrag({ emits }: Params): {
+export declare function useThDrag<DT extends Record<string, any>>({ props, emits }: Params): {
     onThDragStart: (e: MouseEvent) => void;
     onThDragOver: (e: MouseEvent) => void;
     onThDrop: (e: MouseEvent) => void;
+    isHeaderDraggable: (col: StkTableColumn<DT>) => any;
 };
 export {};

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

@@ -1,4 +1,4 @@
-import { Order, SortOption, SortState, StkTableColumn } from './types';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn } from './types';
 /**
  * 对有序数组插入新数据
  * @param sortState
@@ -18,6 +18,8 @@ export declare function insertToOrderedArray<T extends object>(sortState: SortSt
  * @param order 排序方式
  * @param dataSource 排序的数组
  */
-export declare function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[];
+export declare function tableSort(sortOption: SortOption, order: Order, dataSource: any[], sortConfig?: SortConfig): any[];
 /** 表头column配置的层级 */
 export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: number): number;
+/** 获取列宽 */
+export declare function getColWidth(col: StkTableColumn<any> | null): number;