stk-table-vue 0.3.1 → 0.3.3

package/README.md

@@ -32,7 +32,7 @@ repo:
 * [x] 排序
   - [x] 基本表头点击排序。
   - [x] 支持配置 `null` | `undefined` 永远排最后。
-  - [] 支持配置 string 使用 `String.prototype.localCompare` 排序。
+  - [x] 支持配置 string 使用 `String.prototype.localCompare` 排序。
 * [x] 多级表头。
   - [x] 支持最多`2级`表头。
   - [x] 支持更多级表头。
@@ -45,6 +45,7 @@ repo:
 * [x] vue2.7支持（引入源码使用）。
   - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。(`v0.2.0`)
 * [x] 支持配置序号列。`StkTableColumn['type']`。(`v0.3.0`)
+* [x] `props.cellHover`单元格悬浮样式。(`v0.3.2`)
 
 
 
@@ -166,6 +167,8 @@ export type StkProps = {
   showOverflow?: boolean;
   /** 是否增加行hover class */
   showTrHoverClass?: boolean;
+  /** 是否高亮鼠标悬浮的单元格 */
+  cellHover?: boolean;
   /** 表头是否可拖动。支持回调函数。 */
   headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
@@ -228,6 +231,14 @@ export type StkProps = {
     /** 序号列起始下标 用于适配分页 */
     startIndex?: number;
   };
+  /**
+   * 固定头，固定列实现方式。
+   *
+   * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+   * 
+   * 低版本浏览器只能为'relative', 
+   */
+  cellFixedMode?: 'sticky' | 'relative';
 };
 ```
 
@@ -246,9 +257,9 @@ export type StkProps = {
     (e: 'row-click', ev: MouseEvent, row: DT): void;
     /**
      * 选中一行触发。ev返回null表示不是点击事件触发的
-     * ```(ev: MouseEvent | null, row: DT)```
+     * ```(ev: MouseEvent | null, row: DT, data: { select: boolean })```
      */
-    (e: 'current-change', ev: MouseEvent | null, row: DT): void;
+    (e: 'current-change', ev: MouseEvent | null, row: DT, data: { select: boolean }): void;
     /**
      * 行双击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -269,6 +280,21 @@ export type StkProps = {
      * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
      */
     (e: 'cell-click', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格鼠标进入事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseenter', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格鼠标移出事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseleave', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格悬浮事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseover', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
     /**
      * 表头单元格点击事件
      * ```(ev: MouseEvent, col: StkTableColumn<DT>)```
@@ -527,6 +553,9 @@ export type SortConfig<T extends Record<string, any>> = {
 * 在虚拟滚动下高亮强制使用css @keyframes 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{method: 'css'}` 即可。（滚动后动画会中断） 
 * 指定 `{method:'animation'}` 在虚拟滚动下使用animation api实现动画。好处是动画流畅，且滚动后动画不中断。
 * 配置 `props.highlightConfig.fps` 指定高亮帧率。降低帧率有利于性能。
+### 性能
+* 配置 `props.cellFixedMode` 为 `relative` 时，将使用相对定位实现固定列与固定表头，相较于`sticky`的实现，渲染合成层更少，性能更好。
+* 问题：若开启了纵向虚拟滚动，不开启横向虚拟滚动，且不设置某些列宽时。如果纵向滚动导致某些列宽变化，则会导致右侧固定列计算错误。
 
 ## Other
 * `$*$` 兼容注释

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

@@ -1,9 +1,9 @@
-import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
+import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, UniqKey, UniqKeyProp } from './types/index';
 /** Generic stands for DataType */
 type DT = any;
 /**
  * 选中一行，
- * @param {string} rowKey
+ * @param {string} rowKey selected rowKey, null to unselect
  * @param {boolean} option.silent 是否触发回调
  */
 declare function setCurrentRow(rowKey: string, option?: {
@@ -83,6 +83,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showOverflow?: boolean | undefined;
     /** 是否增加行hover class */
     showTrHoverClass?: boolean | undefined;
+    /** 是否高亮鼠标悬浮的单元格 */
+    cellHover?: boolean | undefined;
     /** 表头是否可拖动。支持回调函数。 */
     headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
     /**
@@ -124,6 +126,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightConfig?: HighlightConfig | undefined;
     /** 序号列配置 */
     seqConfig?: SeqConfig | undefined;
+    /**
+     * 固定头，固定列实现方式。
+     *
+     * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+     *
+     * 低版本浏览器只能为'relative',
+     */
+    cellFixedMode?: "sticky" | "relative" | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -147,6 +157,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow: boolean;
     showOverflow: boolean;
     showTrHoverClass: boolean;
+    cellHover: boolean;
     headerDrag: boolean;
     rowClassName: () => "";
     colResizable: boolean;
@@ -162,6 +173,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideHeaderTitle: boolean;
     highlightConfig: () => {};
     seqConfig: () => {};
+    cellFixedMode: string;
 }>, {
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll: (height?: number | undefined) => void;
@@ -179,11 +191,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         duration?: number | undefined;
     }) => void;
     /** 设置高亮渐暗行 */
-    setHighlightDimRow: (rowKeyValues: import("./types/index").UniqKey[], option?: {
+    setHighlightDimRow: (rowKeyValues: UniqKey[], option?: {
         method?: "css" | "animation" | "js" | undefined;
         useCss?: boolean | undefined;
         className?: string | undefined;
-        keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined; /** v-model:columns col resize 时更新宽度*/
+        keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
         duration?: number | undefined;
     }) => void;
     /** 表格排序列dataIndex */
@@ -201,11 +213,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "sort-change": (col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
     "row-click": (ev: MouseEvent, row: any) => void;
-    "current-change": (ev: MouseEvent | null, row: any) => void;
+    "current-change": (ev: MouseEvent | null, row: any, data: {
+        select: boolean;
+    }) => 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;
+    "cell-mouseenter": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
+    "cell-mouseleave": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
+    "cell-mouseover": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
     "header-cell-click": (ev: MouseEvent, col: StkTableColumn<any>) => void;
     scroll: (ev: Event, data: {
         startIndex: number;
@@ -263,6 +280,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showOverflow?: boolean | undefined;
     /** 是否增加行hover class */
     showTrHoverClass?: boolean | undefined;
+    /** 是否高亮鼠标悬浮的单元格 */
+    cellHover?: boolean | undefined;
     /** 表头是否可拖动。支持回调函数。 */
     headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
     /**
@@ -304,6 +323,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightConfig?: HighlightConfig | undefined;
     /** 序号列配置 */
     seqConfig?: SeqConfig | undefined;
+    /**
+     * 固定头，固定列实现方式。
+     *
+     * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+     *
+     * 低版本浏览器只能为'relative',
+     */
+    cellFixedMode?: "sticky" | "relative" | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -327,6 +354,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow: boolean;
     showOverflow: boolean;
     showTrHoverClass: boolean;
+    cellHover: boolean;
     headerDrag: boolean;
     rowClassName: () => "";
     colResizable: boolean;
@@ -342,6 +370,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideHeaderTitle: boolean;
     highlightConfig: () => {};
     seqConfig: () => {};
+    cellFixedMode: string;
 }>>> & {
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -353,11 +382,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onTh-drop"?: ((targetColKey: string) => any) | undefined;
     "onSort-change"?: ((col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig<any>) => any) | undefined;
     "onRow-click"?: ((ev: MouseEvent, row: any) => any) | undefined;
-    "onCurrent-change"?: ((ev: MouseEvent | null, row: any) => any) | undefined;
+    "onCurrent-change"?: ((ev: MouseEvent | null, row: any, data: {
+        select: boolean;
+    }) => 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;
+    "onCell-mouseenter"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
+    "onCell-mouseleave"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
+    "onCell-mouseover"?: ((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;
 }, {
@@ -386,6 +420,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow: boolean;
     showOverflow: boolean;
     showTrHoverClass: boolean;
+    cellHover: boolean;
     headerDrag: boolean | ((col: StkTableColumn<any>) => boolean);
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
@@ -398,6 +433,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideHeaderTitle: boolean | string[];
     highlightConfig: HighlightConfig;
     seqConfig: SeqConfig;
+    cellFixedMode: "sticky" | "relative";
 }, {}>, {
     tableHeader?(_: {
         col: StkTableColumn<any>;

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

@@ -1,12 +1,12 @@
-import { Ref, ShallowRef } from 'vue';
-import { StkTableColumn } from './types';
+import { ComputedRef, Ref, ShallowRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 type Params<DT extends Record<string, any>> = {
     props: any;
     emits: any;
     tableContainerRef: Ref<HTMLElement | undefined>;
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     colResizeIndicatorRef: Ref<HTMLElement | undefined>;
-    colKeyGen: (p: any) => string;
+    colKeyGen: ComputedRef<(p: any) => UniqKey>;
 };
 /** 列宽拖动 */
 export declare function useColResize<DT extends Record<string, any>>({ tableContainerRef, tableHeaderLast, colResizeIndicatorRef, props, emits, colKeyGen, }: Params<DT>): {

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

@@ -1,8 +1,8 @@
-import { Ref, ShallowRef } from 'vue';
-import { StkTableColumn } from './types';
+import { ComputedRef, Ref, ShallowRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 type Params<T extends Record<string, any>> = {
     props: any;
-    colKeyGen: (col: StkTableColumn<T>) => string;
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
     tableHeaderLast: ShallowRef<StkTableColumn<T>[]>;
     tableContainerRef: Ref<HTMLDivElement | undefined>;
@@ -13,7 +13,7 @@ type Params<T extends Record<string, any>> = {
  */
 export declare function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen, tableHeaders, tableHeaderLast, tableContainerRef }: Params<DT>): {
     /** 固定列class */
-    fixedColClassMap: import("vue").ComputedRef<Map<any, any>>;
+    fixedColClassMap: ComputedRef<Map<any, any>>;
     /** 处理固定列阴影 */
     dealFixedColShadow: () => void;
     /** 滚动条变化时，更新需要展示阴影的列 */

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

@@ -26,8 +26,10 @@ export type VirtualScrollStore = {
 };
 /** 暂存横向虚拟滚动的数据 */
 export type VirtualScrollXStore = {
-    /** 容器宽度 */
+    /** 父容器宽度 */
     containerWidth: number;
+    /** 滚动容器的宽度 */
+    scrollWidth: number;
     /** 开始位置 */
     startIndex: number;
     /** 结束始位置 */
@@ -54,6 +56,7 @@ export declare function useVirtualScroll<DT extends Record<string, any>>({ props
     }>;
     virtualScrollX: Ref<{
         containerWidth: number;
+        scrollWidth: number;
         startIndex: number;
         endIndex: number;
         offsetLeft: number;