stk-table-vue 0.4.0 → 0.4.1

package/README.md

@@ -8,8 +8,11 @@ repo:
 - [Github](https://github.com/ja-plus/stk-table-vue)
 - [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
 
+[<span style="font-size: 16px;font-weight: bold;">Online Demo</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
+
 ## Bug TODO:
 * [x] props.dataSource 为 shallowRef 时，高亮行不生效。(bug:2024.02.21)(resolved:0.2.3)
+* [] 固定列列宽拖动目标。
 
 ## Feature TODO:
 * [x] 高亮行，单元格。使用css @keyframes实现。
@@ -217,7 +220,7 @@ export type StkProps = {
      */
     stringLocaleCompare?: boolean;
   },
-  /** 隐藏头部title。可传入dataIndex数组 */
+  /** 隐藏头部鼠标悬浮title。可传入dataIndex数组 */
   hideHeaderTitle?: boolean | string[];
   /** 高亮配置 */
   highlightConfig?: {
@@ -232,8 +235,8 @@ export type StkProps = {
     startIndex?: number;
   };
   /**
-   * 固定头，固定列实现方式。(非响应式)
-   *
+   * 固定头，固定列实现方式。
+   * [非响应式]
    * relative：固定列只能放在props.columns的两侧。
    * - 如果列宽会变动则谨慎使用。
    * - 多级表头固定列慎用
@@ -464,20 +467,20 @@ export type SortConfig<T extends Record<string, any>> = {
   )
 ```
 #### option
-| key |value| desc |
-| ---- | ---- | ---- |
-| method | `css` `animation` `js` | 设置高亮方式。虚拟滚动默认js。否则css |
-| ~~useCss~~  `deprecated` | `boolean`| ~~是否使用css~~ |
-| className | `string` | 设置高亮样式。method == 'css' 生效 |
-| keyframe | `Parameters<Animatable['animate']>['0']` | 设置高亮动画。method == 'animation' 生效。 |
-| duration | `number` | 设置高亮动画持续时间。 method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。|
+| key |value| default |desc |
+| ---- | ---- | ---- | ---- |
+| method | `css` `animation` `js` | `animation` | 设置高亮方式。 |
+| ~~useCss~~  `deprecated` | `boolean`| false | ~~是否使用css~~ |
+| className | `string` | `highlight-row`/`highlight-cell` | 自定义 css 动画。method == 'css' 生效 |
+| keyframe | `Parameters<Animatable['animate']>['0']` | ... | 自定义高亮动画。method == 'animation' 生效。 |
+| duration | `number` | 2000 | 设置高亮动画持续时间ms。 method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。|
 
 ##### option.method
 | `option.method`| desc |
 | ---- | ---- |
-| css | 使用css class 实现高亮。 |
-| animation | 使用 animation api 实现高亮。 |
-| js | 使用 js 循环计算颜色实现高亮。虚拟滚动默认使用js。 |
+| animation | animation api 实现高亮。(default) |
+| css | css @keyframes 实现高亮。 |
+| js | js 循环计算颜色实现高亮。 |
 
 ### Example
 ```vue

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

@@ -21,6 +21,6 @@ export declare const HIGHLIGHT_FREQ: number;
 export declare const HIGHLIGHT_ROW_CLASS = "highlight-row";
 /** 高连单元格class */
 export declare const HIGHLIGHT_CELL_CLASS = "highlight-cell";
-/** 是否兼容低版本模式 */
+/** 低版本sticky兼容模式  */
 export declare const IS_LEGACY_MODE: boolean;
 export declare const STK_ID_PREFIX = "stk";

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

@@ -35,3 +35,4 @@ export declare function getCalculatedColWidth(col: StkTableColumn<any> | null):
 export declare function transformWidthToStr(width?: string | number): string | undefined;
 /** 创建组件唯一标识 */
 export declare function createStkTableId(): string;
+export declare function getBrowsersVersion(browserName: string): number;

package/lib/stk-table-vue.js

@@ -1,83 +1,5 @@
 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 { interpolateRgb } from "d3-interpolate";
-const DEFAULT_COL_WIDTH = "100";
-const DEFAULT_TABLE_HEIGHT = 100;
-const DEFAULT_TABLE_WIDTH = 200;
-const DEFAULT_ROW_HEIGHT = 28;
-const HIGHLIGHT_COLOR = {
-  light: { from: "#71a2fd", to: "#fff" },
-  dark: { from: "#1e4c99", to: "#181c21" }
-};
-const HIGHLIGHT_DURATION = 2e3;
-const HIGHLIGHT_FREQ = 1e3 / 30;
-const HIGHLIGHT_ROW_CLASS = "highlight-row";
-const HIGHLIGHT_CELL_CLASS = "highlight-cell";
-let _chromeVersion = 0;
-try {
-  const userAgent = navigator.userAgent.match(/chrome\/\d+/i);
-  if (userAgent) {
-    _chromeVersion = +userAgent[0].split("/")[1];
-  }
-} catch (e) {
-  console.error("Cannot get Chrome version", e);
-}
-const IS_LEGACY_MODE = _chromeVersion < 56;
-const STK_ID_PREFIX = "stk";
-var TagType = /* @__PURE__ */ ((TagType2) => {
-  TagType2[TagType2["TH"] = 0] = "TH";
-  TagType2[TagType2["TD"] = 1] = "TD";
-  return TagType2;
-})(TagType || {});
-function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs }) {
-  let resizeObserver = null;
-  onMounted(() => {
-    initResizeObserver();
-  });
-  onBeforeUnmount(() => {
-    removeResizeObserver();
-  });
-  function initResizeObserver() {
-    if (window.ResizeObserver) {
-      if (!tableContainerRef.value) {
-        const watchDom = watch(
-          () => tableContainerRef,
-          () => {
-            initResizeObserver();
-            watchDom();
-          }
-        );
-        return;
-      }
-      resizeObserver = new ResizeObserver(resizeCallback);
-      resizeObserver.observe(tableContainerRef.value);
-    } else {
-      window.addEventListener("resize", resizeCallback);
-    }
-  }
-  function removeResizeObserver() {
-    if (resizeObserver) {
-      resizeObserver.disconnect();
-      resizeObserver = null;
-    } else {
-      window.removeEventListener("resize", resizeCallback);
-    }
-  }
-  let debounceTime = 0;
-  function resizeCallback() {
-    if (debounceTime) {
-      window.clearTimeout(debounceTime);
-    }
-    debounceTime = window.setTimeout(() => {
-      if (props.autoResize) {
-        initVirtualScroll();
-        if (typeof props.autoResize === "function") {
-          props.autoResize();
-        }
-      }
-      debounceTime = 0;
-    }, debounceMs);
-  }
-}
 function isEmptyValue(val, isNumber) {
   let isEmpty = val === null || val === "";
   if (isNumber) {
@@ -216,11 +138,95 @@ function transformWidthToStr(width) {
   return width;
 }
 function createStkTableId() {
-  if (!window.__STK_TB_ID_COUNT__) {
-    window.__STK_TB_ID_COUNT__ = 0;
+  let id = window.__STK_TB_ID_COUNT__;
+  if (!id)
+    id = 0;
+  id += 1;
+  window.__STK_TB_ID_COUNT__ = id;
+  return STK_ID_PREFIX + id.toString(36);
+}
+function getBrowsersVersion(browserName) {
+  try {
+    const reg = new RegExp(`${browserName}/\\d+`, "i");
+    const userAgent = navigator.userAgent.match(reg);
+    if (userAgent) {
+      return +userAgent[0].split("/")[1];
+    }
+  } catch (e) {
+    console.error("Cannot get version", e);
+  }
+  return 100;
+}
+const DEFAULT_COL_WIDTH = "100";
+const DEFAULT_TABLE_HEIGHT = 100;
+const DEFAULT_TABLE_WIDTH = 200;
+const DEFAULT_ROW_HEIGHT = 28;
+const HIGHLIGHT_COLOR = {
+  light: { from: "#71a2fd", to: "#fff" },
+  dark: { from: "#1e4c99", to: "#181c21" }
+};
+const HIGHLIGHT_DURATION = 2e3;
+const HIGHLIGHT_FREQ = 1e3 / 30;
+const HIGHLIGHT_ROW_CLASS = "highlight-row";
+const HIGHLIGHT_CELL_CLASS = "highlight-cell";
+const _chromeVersion = getBrowsersVersion("chrome");
+const _firefoxVersion = getBrowsersVersion("firefox");
+const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
+const STK_ID_PREFIX = "stk";
+var TagType = /* @__PURE__ */ ((TagType2) => {
+  TagType2[TagType2["TH"] = 0] = "TH";
+  TagType2[TagType2["TD"] = 1] = "TD";
+  return TagType2;
+})(TagType || {});
+function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs }) {
+  let resizeObserver = null;
+  onMounted(() => {
+    initResizeObserver();
+  });
+  onBeforeUnmount(() => {
+    removeResizeObserver();
+  });
+  function initResizeObserver() {
+    if (window.ResizeObserver) {
+      if (!tableContainerRef.value) {
+        const watchDom = watch(
+          () => tableContainerRef,
+          () => {
+            initResizeObserver();
+            watchDom();
+          }
+        );
+        return;
+      }
+      resizeObserver = new ResizeObserver(resizeCallback);
+      resizeObserver.observe(tableContainerRef.value);
+    } else {
+      window.addEventListener("resize", resizeCallback);
+    }
+  }
+  function removeResizeObserver() {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    } else {
+      window.removeEventListener("resize", resizeCallback);
+    }
+  }
+  let debounceTime = 0;
+  function resizeCallback() {
+    if (debounceTime) {
+      window.clearTimeout(debounceTime);
+    }
+    debounceTime = window.setTimeout(() => {
+      if (props.autoResize) {
+        initVirtualScroll();
+        if (typeof props.autoResize === "function") {
+          props.autoResize();
+        }
+      }
+      debounceTime = 0;
+    }, debounceMs);
   }
-  window.__STK_TB_ID_COUNT__ += 1;
-  return STK_ID_PREFIX + window.__STK_TB_ID_COUNT__.toString(36);
 }
 function useColResize({
   tableContainerRef,
@@ -1477,11 +1483,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits("cell-mouseover", e, row, col);
     }
     function onTableWheel(e) {
+      e.preventDefault();
       if (isColResizing.value) {
-        e.preventDefault();
         e.stopPropagation();
         return;
       }
+      const dom = tableContainerRef.value;
+      if (!dom)
+        return;
+      const { deltaY, deltaX } = e;
+      if (deltaY)
+        dom.scrollTop += deltaY;
+      if (deltaX)
+        dom.scrollLeft += deltaX;
     }
     function onTableScroll(e) {
       if (!(e == null ? void 0 : e.target))

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "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

@@ -920,21 +920,28 @@ function onCellMouseOver(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
 }
 
 /**
- * 鼠标滚轮事件监听
- * @param {MouseEvent} e
+ * 鼠标滚轮事件监听。代理滚轮事件，防止滚动过快出现白屏。
+ * @param e
  */
-function onTableWheel(e: MouseEvent) {
+function onTableWheel(e: WheelEvent) {
+    e.preventDefault();
     if (isColResizing.value) {
         // 正在调整列宽时，不允许用户滚动
-        e.preventDefault();
         e.stopPropagation();
         return;
     }
+    // #region ---- 控制滚动，防止出现白屏--
+    const dom = tableContainerRef.value;
+    if (!dom) return;
+    const { deltaY, deltaX } = e;
+    if (deltaY) dom.scrollTop += deltaY;
+    if (deltaX) dom.scrollLeft += deltaX;
+    //#endregion
 }
 
 /**
  * 滚动条监听
- * @param {Event} e scrollEvent
+ * @param e scrollEvent
  */
 function onTableScroll(e: Event) {
     if (!e?.target) return;

package/src/StkTable/const.ts

@@ -1,3 +1,5 @@
+import { getBrowsersVersion } from './utils';
+
 export const DEFAULT_COL_WIDTH = '100';
 
 export const DEFAULT_TABLE_HEIGHT = 100;
@@ -20,16 +22,10 @@ export const HIGHLIGHT_ROW_CLASS = 'highlight-row';
 /** 高连单元格class */
 export const HIGHLIGHT_CELL_CLASS = 'highlight-cell';
 
-let _chromeVersion = 0;
-try {
-    const userAgent = navigator.userAgent.match(/chrome\/\d+/i);
-    if (userAgent) {
-        _chromeVersion = +userAgent[0].split('/')[1];
-    }
-} catch (e) {
-    console.error('Cannot get Chrome version', e);
-}
-/** 是否兼容低版本模式 */
-export const IS_LEGACY_MODE = _chromeVersion < 56;
+const _chromeVersion = getBrowsersVersion('chrome');
+const _firefoxVersion = getBrowsersVersion('firefox');
+
+/** 低版本sticky兼容模式  */
+export const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
 
 export const STK_ID_PREFIX = 'stk';

package/src/StkTable/utils/index.ts

@@ -210,10 +210,22 @@ export function transformWidthToStr(width?: string | number) {
 
 /** 创建组件唯一标识 */
 export function createStkTableId() {
-    if (!window.__STK_TB_ID_COUNT__) {
-        window.__STK_TB_ID_COUNT__ = 0;
-    }
-    window.__STK_TB_ID_COUNT__ += 1;
+    let id = window.__STK_TB_ID_COUNT__;
+    if (!id) id = 0;
+    id += 1;
+    window.__STK_TB_ID_COUNT__ = id;
+    return STK_ID_PREFIX + id.toString(36);
+}
 
-    return STK_ID_PREFIX + window.__STK_TB_ID_COUNT__.toString(36);
+export function getBrowsersVersion(browserName: string) {
+    try {
+        const reg = new RegExp(`${browserName}/\\d+`, 'i');
+        const userAgent = navigator.userAgent.match(reg);
+        if (userAgent) {
+            return +userAgent[0].split('/')[1];
+        }
+    } catch (e) {
+        console.error('Cannot get version', e);
+    }
+    return 100;
 }