stk-table-vue 0.1.0 → 0.2.1

package/README.md

@@ -1,30 +1,42 @@
 # StkTable (Sticky Table)
 
 Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
-js体积(未压缩44kb)
 
+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] 基本表头点击排序。
+  - [] 支持配置 `null` | `undefined` 永远排最后。
+  - [] 支持配置 string 使用 `String.prototype.localCompare` 排序。
 * 多级表头。
   - [x] 支持最多`2级`表头。
-  - [x] 支持更多级表头
-  - [] 多级表头固定列横向滚动
+  - [x] 支持更多级表头。
   - [] 横向虚拟滚动。
 * [x] 支持table-layout: fixed 配置。
 * 鼠标悬浮在表格上，键盘滚动虚拟表格。
   - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` 按键支持。
   - [x] 键盘 `PageUp`/ `PageDown` 按键支持。
-* [x] 斑马纹。
-* [x] 列固定阴影。
-  - [] 多级表头固定列阴影。
-  - [] sticky column 动态计算阴影位置。
 * [] 不传row-key 时，自动按序号生成id。
-* [] 列筛选。
 * [] 非虚拟滚动时，大数据分批加载。
+* [x] vue2.7支持（引入源码使用）。
+  - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
+
 
 ## Usage
 > npm install stk-table-vue
@@ -45,6 +57,41 @@ stkTable.value.setHighlightDimCell(rowId, colId) // highlight cell
 
 ```
 
+### 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/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
 注意，组件会改动 `props.columns` 中的对象。如果多个组件 `columns` 数组元素存在引用同一个 `StkTableColumn` 对象。则考虑赋值 `columns` 前进行深拷贝。
 
@@ -98,6 +145,8 @@ export type StkProps = {
   showTrHoverClass?: boolean;
   /** 表头是否可拖动 */
   headerDrag?: boolean;
+  /** 表头是否可拖动。支持回调函数。 */
+  headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
    * 给行附加className<br>
    * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -127,6 +176,8 @@ export type StkProps = {
   autoResize?: boolean | (() => void);
   /** 是否展示固定列阴影。默认不展示。 */
   fixedColShadow?: boolean;
+  /** 优化vue2 滚动 */
+  optimizeVue2Scroll?: boolean;
 };
 ```
 #### Emits
@@ -219,6 +270,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, 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会使表格行一直执行空函数，是否有影响
@@ -105,6 +109,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     autoResize?: boolean | (() => void) | undefined;
     /** 是否展示固定列阴影。默认不展示。 */
     fixedColShadow?: boolean | undefined;
+    /** 优化vue2 滚动 */
+    optimizeVue2Scroll?: boolean | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -135,6 +141,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     bordered: boolean;
     autoResize: boolean;
     fixedColShadow: boolean;
+    optimizeVue2Scroll: boolean;
 }>, {
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll: (height?: number | undefined) => void;
@@ -150,6 +157,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;
     /** 重置排序 */
@@ -176,7 +185,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;
@@ -220,8 +229,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会使表格行一直执行空函数，是否有影响
@@ -251,6 +260,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     autoResize?: boolean | (() => void) | undefined;
     /** 是否展示固定列阴影。默认不展示。 */
     fixedColShadow?: boolean | undefined;
+    /** 优化vue2 滚动 */
+    optimizeVue2Scroll?: boolean | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -281,6 +292,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     bordered: boolean;
     autoResize: boolean;
     fixedColShadow: boolean;
+    optimizeVue2Scroll: boolean;
 }>>> & {
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -306,7 +318,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";
@@ -315,6 +326,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     columns: StkTableColumn<any>[];
     dataSource: any[];
     rowKey: UniqKey;
+    colKey: UniqKey;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -322,13 +334,14 @@ 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;
     bordered: boolean | "h" | "v" | "body-v";
     autoResize: boolean | (() => void);
     fixedColShadow: boolean;
+    optimizeVue2Scroll: boolean;
 }, {}>, {
     tableHeader?(_: {
         col: StkTableColumn<any>;

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

@@ -1,3 +1,3 @@
-export { default as StkTable } from './StkTable.vue';
-export { tableSort, insertToOrderedArray } from './utils';
-export type { StkTableColumn } from './types/index';
+export { default as StkTable } from './StkTable.vue';
+export { tableSort, insertToOrderedArray } from './utils';
+export type { StkTableColumn } from './types/index';

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 */

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

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

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

@@ -0,0 +1,20 @@
+import { Ref } from 'vue';
+import { StkTableColumn } from './types';
+type Params<T extends Record<string, any>> = {
+    props: any;
+    tableHeaderLast: Ref<StkTableColumn<T>[]>;
+    tableContainer: Ref<HTMLDivElement | undefined>;
+};
+/**
+ * 固定列处理
+ * @returns
+ */
+export declare function useFixedCol<DT extends Record<string, any>>({ props, tableHeaderLast, tableContainer }: Params<DT>): {
+    /** 固定列class */
+    getFixedColClass: (col: StkTableColumn<DT>) => Record<string, boolean>;
+    /** 处理固定列阴影 */
+    dealFixedColShadow: () => void;
+    /** 滚动条变化时，更新需要展示阴影的列 */
+    updateFixedShadow: () => void;
+};
+export {};

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

@@ -1,19 +1,19 @@
-import { Ref } from 'vue';
-type Params = {
-    props: {
-        theme: 'light' | 'dark';
-        virtual: boolean;
-        dataSource: any[];
-    };
-    tableContainer: Ref<HTMLElement | undefined>;
-    rowKeyGen: (p: any) => string;
-};
-/**
- * 高亮单元格，行
- * row中新增_bgc_progress_ms 属性控制高亮状态,_bgc控制颜色
- */
-export declare function useHighlight({ props, tableContainer, rowKeyGen }: Params): {
-    setHighlightDimRow: (rowKeyValues: Array<string | number>) => void;
-    setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
-};
-export {};
+import { Ref } from 'vue';
+type Params = {
+    props: {
+        theme: 'light' | 'dark';
+        virtual: boolean;
+        dataSource: any[];
+    };
+    tableContainer: Ref<HTMLElement | undefined>;
+    rowKeyGen: (p: any) => string;
+};
+/**
+ * 高亮单元格，行
+ * row中新增_bgc_progress_ms 属性控制高亮状态,_bgc控制颜色
+ */
+export declare function useHighlight({ props, tableContainer, rowKeyGen }: Params): {
+    setHighlightDimRow: (rowKeyValues: Array<string | number>) => void;
+    setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => 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/useVirtualScroll.d.ts

@@ -41,7 +41,7 @@ export type VirtualScrollXStore = {
  * @param param0
  * @returns
  */
-export declare function useVirtualScroll<DT extends Record<string, any>>({ tableContainer, props, dataSourceCopy, tableHeaderLast }: Option<DT>): {
+export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast }: Option<DT>): {
     virtualScroll: Ref<{
         containerHeight: number;
         pageSize: number;

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

@@ -21,3 +21,5 @@ export declare function insertToOrderedArray<T extends object>(sortState: SortSt
 export declare function tableSort(sortOption: SortOption, order: Order, dataSource: any[]): any[];
 /** 表头column配置的层级 */
 export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: number): number;
+/** 获取列宽 */
+export declare function getColWidth(col: StkTableColumn<any> | null): number;