stk-table-vue 0.4.10 → 0.4.11

package/README.md

@@ -244,6 +244,13 @@ export type StkProps = {
    * 低版本浏览器只能为'relative', 
    */
   cellFixedMode?: 'sticky' | 'relative';
+   /**
+     * 是否平滑滚动
+     * - default: chrome < 85 ? true : false
+     * - false: 使用 wheel 事件滚动。为了防止滚动过快导致白屏。
+     * - true: 不使用 wheel 事件滚动。滚轮滚动时更加平滑。滚动过快时会白屏。
+     */
+  smoothScroll?: boolean;
 };
 ```
 

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

@@ -5,7 +5,7 @@ type DT = any;
 /**
  * 选中一行，
  * @param {string} rowKey selected rowKey, undefined to unselect
- * @param {boolean} option.silent 是否触发回调
+ * @param {boolean} option.silent if emit current-change. default:false(not emit `current-change`)
  */
 declare function setCurrentRow(rowKey: string | undefined, option?: {
     silent: boolean;
@@ -143,6 +143,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
      * 低版本浏览器强制为'relative'，
      */
     cellFixedMode?: "sticky" | "relative" | undefined;
+    /**
+     * 是否平滑滚动。default: chrome < 85 ? true : false
+     * - false: 使用 onwheel 滚动。为了防止滚动过快导致白屏。
+     * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
+     */
+    smoothScroll?: boolean | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -186,6 +192,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     highlightConfig: () => {};
     seqConfig: () => {};
     cellFixedMode: string;
+    smoothScroll: boolean;
 }>, {
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll: (height?: number | undefined) => void;
@@ -196,11 +203,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     /** 设置当前选中行 */
     setCurrentRow: typeof setCurrentRow;
     /** 设置高亮渐暗单元格 */
-    setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
-        className?: string | undefined; /**
-         * 排序变更触发。defaultSort.dataIndex 找不到时，col 将返回null。
-         * ```(col: StkTableColumn<DT> | null, order: Order, data: DT[])```
-         */
+    setHighlightDimCell: (rowKeyValue: import('./types/index').UniqKey, dataIndex: string, option?: {
+        className?: string | undefined;
         method?: "animation" | "css" | undefined;
         keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
         duration?: number | undefined;
@@ -354,6 +358,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
      * 低版本浏览器强制为'relative'，
      */
     cellFixedMode?: "sticky" | "relative" | undefined;
+    /**
+     * 是否平滑滚动。default: chrome < 85 ? true : false
+     * - false: 使用 onwheel 滚动。为了防止滚动过快导致白屏。
+     * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
+     */
+    smoothScroll?: boolean | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -397,6 +407,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     highlightConfig: () => {};
     seqConfig: () => {};
     cellFixedMode: string;
+    smoothScroll: boolean;
 }>>> & {
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -463,6 +474,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     highlightConfig: HighlightConfig;
     seqConfig: SeqConfig;
     cellFixedMode: "sticky" | "relative";
+    smoothScroll: boolean;
 }, {}>, {
     tableHeader?(_: {
         col: StkTableColumn<any>;

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

@@ -23,4 +23,6 @@ export declare const HIGHLIGHT_ROW_CLASS = "highlight-row";
 export declare const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 /** 低版本sticky兼容模式  */
 export declare const IS_LEGACY_MODE: boolean;
+/** 默认props.smoothDefault */
+export declare const DEFAULT_SMOOTH_SCROLL: boolean;
 export declare const STK_ID_PREFIX = "stk";

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

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

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

@@ -105,7 +105,7 @@ export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>,
 /** 排序状态 */
 export type SortState<T> = {
     dataIndex: keyof T;
-    order: null | 'asc' | 'desc';
+    order: Order;
     sortType?: 'number' | 'string';
 };
 /** 唯一键 */

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

@@ -19,7 +19,7 @@ export declare function useHighlight({ props, stkTableId, tableContainerRef }: P
         keyframe?: Parameters<Animatable['animate']>['0'];
         duration?: number;
     }) => void;
-    setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
+    setHighlightDimCell: (rowKeyValue: UniqKey, dataIndex: string, option?: {
         className?: string;
         method?: 'animation' | 'css';
         keyframe?: Parameters<Animatable['animate']>['0'];

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

@@ -2,6 +2,8 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../typ
 
 /**
  * 对有序数组插入新数据
+ *
+ * 注意：不会改变原数组，返回新数组
  * @param sortState
  * @param sortState.dataIndex 排序的列
  * @param sortState.order 排序顺序
@@ -10,7 +12,17 @@ import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../typ
  * @param targetArray 表格数据
  * @return targetArray 的浅拷贝
  */
-export declare function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: any, targetArray: T[], sortConfig?: SortConfig<T>): T[];
+export declare function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: T, targetArray: T[], sortConfig?: SortConfig<T>): T[];
+/**
+ * 字符串比较
+ * @param a
+ * @param b
+ * @param type 类型
+ * @param isNumber 是否是数字类型
+ * @param localeCompare 是否 使用Array.prototyshpe.localeCompare
+ * @return {-1|0|1}
+ */
+export declare function strCompare(a: string, b: string, isNumber: boolean, localeCompare?: boolean): number;
 /**
  * 表格排序抽离
  * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, nextTick, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
+import { watch, onMounted, onBeforeUnmount, ref, shallowRef, computed, defineComponent, nextTick, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 function isEmptyValue(val, isNumber) {
   let isEmpty = val === null || val === "" || val === void 0;
@@ -15,11 +15,11 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
     sortType = typeof newItem[dataIndex];
   const isNumber = sortType === "number";
   const data = [...targetArray];
-  if (!order) {
+  if (!order || !data.length) {
     data.unshift(newItem);
     return data;
   }
-  if (sortConfig.emptyToBottom && isEmptyValue(data)) {
+  if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
     data.push(newItem);
   }
   let sIndex = 0;
@@ -172,6 +172,7 @@ const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 const _chromeVersion = getBrowsersVersion("chrome");
 const _firefoxVersion = getBrowsersVersion("firefox");
 const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
+const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
 const STK_ID_PREFIX = "stk";
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
@@ -180,13 +181,37 @@ var TagType = /* @__PURE__ */ ((TagType2) => {
 })(TagType || {});
 function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs }) {
   let resizeObserver = null;
+  let isObserved = false;
+  watch(
+    () => props.virtual,
+    (v) => {
+      if (v)
+        initResizeObserver();
+      else
+        removeResizeObserver();
+    }
+  );
+  watch(
+    () => props.virtualX,
+    (v) => {
+      if (v)
+        initResizeObserver();
+      else
+        removeResizeObserver();
+    }
+  );
   onMounted(() => {
-    initResizeObserver();
+    if (props.virtual || props.virtualX) {
+      initResizeObserver();
+    }
   });
   onBeforeUnmount(() => {
     removeResizeObserver();
   });
   function initResizeObserver() {
+    if (isObserved) {
+      removeResizeObserver();
+    }
     if (window.ResizeObserver) {
       if (!tableContainerRef.value) {
         const watchDom = watch(
@@ -203,14 +228,18 @@ function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs
     } else {
       window.addEventListener("resize", resizeCallback);
     }
+    isObserved = true;
   }
   function removeResizeObserver() {
+    if (!isObserved)
+      return;
     if (resizeObserver) {
       resizeObserver.disconnect();
       resizeObserver = null;
     } else {
       window.removeEventListener("resize", resizeCallback);
     }
+    isObserved = false;
   }
   let debounceTime = 0;
   function resizeCallback() {
@@ -1194,7 +1223,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hideHeaderTitle: { type: [Boolean, Array], default: false },
     highlightConfig: { default: () => ({}) },
     seqConfig: { default: () => ({}) },
-    cellFixedMode: { default: "sticky" }
+    cellFixedMode: { default: "sticky" },
+    smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL }
   },
   emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1546,6 +1576,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits("cell-mouseover", e, row, col);
     }
     function onTableWheel(e) {
+      if (props.smoothScroll) {
+        return;
+      }
       if (isColResizing.value) {
         e.stopPropagation();
         return;
@@ -1611,14 +1644,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (rowKey === void 0) {
         currentRow.value = void 0;
         currentRowKey.value = void 0;
+      } else {
+        const row = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
+        if (!row) {
+          console.warn("setCurrentRow failed.rowKey:", rowKey);
+          return;
+        }
+        currentRow.value = row;
+        currentRowKey.value = rowKey;
       }
-      const row = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
-      if (!row) {
-        console.warn("setCurrentRow failed.rowKey:", rowKey);
-        return;
-      }
-      currentRow.value = row;
-      currentRowKey.value = rowKey;
       if (!option.silent) {
         emits(
           "current-change",
@@ -1898,5 +1932,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as StkTable,
   insertToOrderedArray,
+  strCompare,
   tableSort
 };

package/lib/style.css

@@ -170,7 +170,6 @@
 }
 .stk-table th.sorter-desc .table-header-sorter{
   display:inline;
-  display:initial;
 }
 .stk-table th.sorter-desc .table-header-sorter .arrow-up{
   fill:var(--sort-arrow-active-sub-color);
@@ -180,7 +179,6 @@
 }
 .stk-table th.sorter-asc .table-header-sorter{
   display:inline;
-  display:initial;
 }
 .stk-table th.sorter-asc .table-header-sorter .arrow-up{
   fill:var(--sort-arrow-active-color);
@@ -270,7 +268,6 @@
 }
 .stk-table .table-header-title{
   overflow:hidden;
-  align-self:flex-start;
 }
 .stk-table .table-header-sorter{
   flex-shrink:0;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.4.10",
+    "version": "0.4.11",
     "description": "Simple realtime virtual table for vue3 and vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -193,7 +193,7 @@
  * [] column.dataIndex 作为唯一键，不能重复
  */
 import { CSSProperties, computed, nextTick, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
-import { DEFAULT_ROW_HEIGHT, IS_LEGACY_MODE } from './const';
+import { DEFAULT_ROW_HEIGHT, IS_LEGACY_MODE, DEFAULT_SMOOTH_SCROLL } from './const';
 import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
@@ -317,6 +317,12 @@ const props = withDefaults(
          * 低版本浏览器强制为'relative'，
          */
         cellFixedMode?: 'sticky' | 'relative';
+        /**
+         * 是否平滑滚动。default: chrome < 85 ? true : false
+         * - false: 使用 onwheel 滚动。为了防止滚动过快导致白屏。
+         * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
+         */
+        smoothScroll?: boolean;
     }>(),
     {
         width: '',
@@ -361,6 +367,7 @@ const props = withDefaults(
         highlightConfig: () => ({}),
         seqConfig: () => ({}),
         cellFixedMode: 'sticky',
+        smoothScroll: DEFAULT_SMOOTH_SCROLL,
     },
 );
 
@@ -944,6 +951,9 @@ function onCellMouseOver(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
  * @param e
  */
 function onTableWheel(e: WheelEvent) {
+    if (props.smoothScroll) {
+        return;
+    }
     if (isColResizing.value) {
         // 正在调整列宽时，不允许用户滚动
         e.stopPropagation();
@@ -1028,21 +1038,22 @@ function onTrMouseOver(_e: MouseEvent, row: DT) {
 /**
  * 选中一行，
  * @param {string} rowKey selected rowKey, undefined to unselect
- * @param {boolean} option.silent 是否触发回调
+ * @param {boolean} option.silent if emit current-change. default:false(not emit `current-change`)
  */
 function setCurrentRow(rowKey: string | undefined, option = { silent: false }) {
     if (!dataSourceCopy.value.length) return;
     if (rowKey === void 0) {
         currentRow.value = void 0;
         currentRowKey.value = void 0;
+    } else {
+        const row = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKey);
+        if (!row) {
+            console.warn('setCurrentRow failed.rowKey:', rowKey);
+            return;
+        }
+        currentRow.value = row;
+        currentRowKey.value = rowKey;
     }
-    const row = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKey);
-    if (!row) {
-        console.warn('setCurrentRow failed.rowKey:', rowKey);
-        return;
-    }
-    currentRow.value = row;
-    currentRowKey.value = rowKey;
     if (!option.silent) {
         emits('current-change', /** no Event */ null, currentRow.value, { select: true });
     }

package/src/StkTable/const.ts

@@ -28,4 +28,7 @@ const _firefoxVersion = getBrowsersVersion('firefox');
 /** 低版本sticky兼容模式  */
 export const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
 
+/** 默认props.smoothDefault */
+export const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
+
 export const STK_ID_PREFIX = 'stk';

package/src/StkTable/index.ts

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

package/src/StkTable/style.less

@@ -254,7 +254,7 @@
         }
 
         &.sorter-desc .table-header-sorter {
-            display: initial;
+            display: inline;
 
             .arrow-up {
                 fill: var(--sort-arrow-active-sub-color);
@@ -266,7 +266,7 @@
         }
 
         &.sorter-asc .table-header-sorter {
-            display: initial;
+            display: inline;
 
             .arrow-up {
                 fill: var(--sort-arrow-active-color);
@@ -388,7 +388,7 @@
 
     .table-header-title {
         overflow: hidden;
-        align-self: flex-start;
+        // align-self: flex-start;
     }
 
     .table-header-sorter {

package/src/StkTable/types/index.ts

@@ -114,7 +114,7 @@ export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>,
 /** 排序状态 */
 export type SortState<T> = {
     dataIndex: keyof T;
-    order: null | 'asc' | 'desc';
+    order: Order;
     sortType?: 'number' | 'string';
 };
 

package/src/StkTable/useAutoResize.ts

@@ -13,9 +13,26 @@ type Options = {
  */
 export function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs }: Options) {
     let resizeObserver: ResizeObserver | null = null;
+    let isObserved = false;
+    watch(
+        () => props.virtual,
+        v => {
+            if (v) initResizeObserver();
+            else removeResizeObserver();
+        },
+    );
+    watch(
+        () => props.virtualX,
+        v => {
+            if (v) initResizeObserver();
+            else removeResizeObserver();
+        },
+    );
 
     onMounted(() => {
-        initResizeObserver();
+        if (props.virtual || props.virtualX) {
+            initResizeObserver();
+        }
     });
 
     onBeforeUnmount(() => {
@@ -23,6 +40,9 @@ export function useAutoResize({ tableContainerRef, initVirtualScroll, props, deb
     });
 
     function initResizeObserver() {
+        if (isObserved) {
+            removeResizeObserver();
+        }
         if (window.ResizeObserver) {
             if (!tableContainerRef.value) {
                 const watchDom = watch(
@@ -39,15 +59,18 @@ export function useAutoResize({ tableContainerRef, initVirtualScroll, props, deb
         } else {
             window.addEventListener('resize', resizeCallback);
         }
+        isObserved = true;
     }
 
     function removeResizeObserver() {
+        if (!isObserved) return;
         if (resizeObserver) {
             resizeObserver.disconnect();
             resizeObserver = null;
         } else {
             window.removeEventListener('resize', resizeCallback);
         }
+        isObserved = false;
     }
 
     let debounceTime = 0;

package/src/StkTable/useHighlight.ts

@@ -153,7 +153,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。
      */
     function setHighlightDimCell(
-        rowKeyValue: string,
+        rowKeyValue: UniqKey,
         dataIndex: string,
         option: { className?: string; method?: 'animation' | 'css'; keyframe?: Parameters<Animatable['animate']>['0']; duration?: number } = {},
     ) {

package/src/StkTable/utils/index.ts

@@ -12,6 +12,8 @@ function isEmptyValue(val: any, isNumber?: boolean) {
 
 /**
  * 对有序数组插入新数据
+ *
+ * 注意：不会改变原数组，返回新数组
  * @param sortState
  * @param sortState.dataIndex 排序的列
  * @param sortState.order 排序顺序
@@ -20,7 +22,7 @@ function isEmptyValue(val: any, isNumber?: boolean) {
  * @param targetArray 表格数据
  * @return targetArray 的浅拷贝
  */
-export function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: any, targetArray: T[], sortConfig: SortConfig<T> = {}) {
+export function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: T, targetArray: T[], sortConfig: SortConfig<T> = {}) {
     const { dataIndex, order } = sortState;
     sortConfig = { emptyToBottom: false, ...sortConfig };
     let { sortType } = sortState;
@@ -28,13 +30,13 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
     const isNumber = sortType === 'number';
     const data = [...targetArray];
 
-    if (!order) {
+    if (!order || !data.length) {
         // 没有排序的情况，插入在最上方
         data.unshift(newItem);
         return data;
     }
 
-    if (sortConfig.emptyToBottom && isEmptyValue(data)) {
+    if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
         // 空值排在最下方
         data.push(newItem);
     }
@@ -42,7 +44,7 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
     // 二分插入
     let sIndex = 0;
     let eIndex = data.length - 1;
-    const targetVal = newItem[dataIndex];
+    const targetVal: any = newItem[dataIndex];
     while (sIndex <= eIndex) {
         // console.log(sIndex, eIndex);
         const midIndex = Math.floor((sIndex + eIndex) / 2);
@@ -71,10 +73,10 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
  * @param b
  * @param type 类型
  * @param isNumber 是否是数字类型
- * @param localeCompare 是否 使用Array.prototype.localeCompare
+ * @param localeCompare 是否 使用Array.prototyshpe.localeCompare
  * @return {-1|0|1}
  */
-function strCompare(a: string, b: string, isNumber: boolean, localeCompare = false): number {
+export function strCompare(a: string, b: string, isNumber: boolean, localeCompare = false): number {
     let _a: number | string = a;
     let _b: number | string = b;
     if (isNumber) {