stk-table-vue 0.4.1 → 0.4.3

package/package.json

@@ -1,65 +1,65 @@
-{
-    "name": "stk-table-vue",
-    "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",
-    "packageManager": "pnpm@8.14.3",
-    "directories": {
-        "test": "test"
-    },
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "test": "vitest"
-    },
-    "keywords": [
-        "virtual table",
-        "vue",
-        "vue2",
-        "vue3",
-        "highlight",
-        "sticky",
-        "virtual",
-        "table",
-        "list"
-    ],
-    "files": [
-        "lib",
-        "src"
-    ],
-    "author": "japlus",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/ja-plus/stk-table-vue"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@types/d3-interpolate": "^3.0.4",
-        "@types/node": "^20.11.14",
-        "@typescript-eslint/eslint-plugin": "^6.14.0",
-        "@typescript-eslint/parser": "^6.14.0",
-        "@vitejs/plugin-vue": "^5.0.4",
-        "@vue/test-utils": "2.4.4",
-        "eslint": "^8.55.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-html": "^7.1.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "eslint-plugin-vue": "^9.19.2",
-        "happy-dom": "^12.10.3",
-        "less": "^4.2.0",
-        "postcss-discard-comments": "^6.0.1",
-        "postcss-preset-env": "^9.3.0",
-        "prettier": "^3.1.1",
-        "typescript": "^5.3.3",
-        "vite": "^5.2.0",
-        "vite-plugin-dts": "^3.7.3",
-        "vitest": "^1.1.0",
-        "vue": "^3.4.21",
-        "vue-eslint-parser": "^9.3.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1"
-    }
+{
+    "name": "stk-table-vue",
+    "version": "0.4.3",
+    "description": "Simple realtime virtual table for vue3 and vue2.7",
+    "main": "./lib/stk-table-vue.js",
+    "types": "./lib/src/StkTable/index.d.ts",
+    "packageManager": "pnpm@8.14.3",
+    "directories": {
+        "test": "test"
+    },
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test": "vitest"
+    },
+    "keywords": [
+        "virtual table",
+        "vue",
+        "vue2",
+        "vue3",
+        "highlight",
+        "sticky",
+        "virtual",
+        "table",
+        "list"
+    ],
+    "files": [
+        "lib",
+        "src"
+    ],
+    "author": "japlus",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ja-plus/stk-table-vue"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/node": "^20.12.10",
+        "@typescript-eslint/eslint-plugin": "^7.7.0",
+        "@typescript-eslint/parser": "^7.7.0",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "@vue/test-utils": "2.4.4",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-html": "^8.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-vue": "^9.25.0",
+        "happy-dom": "^12.10.3",
+        "less": "^4.2.0",
+        "postcss-discard-comments": "^6.0.2",
+        "postcss-preset-env": "^9.5.11",
+        "prettier": "^3.2.5",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.11",
+        "vite-plugin-dts": "^3.9.1",
+        "vitest": "^1.6.0",
+        "vue": "^3.4.26",
+        "vue-eslint-parser": "^9.4.2"
+    },
+    "dependencies": {
+        "d3-interpolate": "^3.0.1"
+    }
 }

package/src/StkTable/StkTable.vue

@@ -15,6 +15,8 @@
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
             'cell-hover': props.cellHover,
+            'row-hover': props.rowHover,
+            'row-active': props.rowActive,
             'text-overflow': props.showOverflow,
             'header-text-overflow': props.showHeaderOverflow,
             'fixed-relative-mode': isRelativeMode,
@@ -45,7 +47,7 @@
             }"
         >
             <!-- transform: virtualX_on ? `translateX(${virtualScrollX.offsetLeft}px)` : null, 用transform控制虚拟滚动左边距，sticky会有问题 -->
-            <thead v-if="!headless">
+            <thead v-if="!headless" ref="theadRef">
                 <tr v-for="(row, rowIndex) in tableHeaders" :key="rowIndex" @contextmenu="e => onHeaderMenu(e)">
                     <!-- 这个th用于横向虚拟滚动表格左边距,width、maxWidth 用于兼容低版本浏览器 -->
                     <th
@@ -83,7 +85,7 @@
                         @dragover="onThDragOver"
                     >
                         <div class="table-header-cell-wrapper">
-                            <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" />
+                            <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" :colIndex="colIndex" :rowIndex="rowIndex" />
                             <template v-else-if="col.type === 'seq'">
                                 <span class="table-header-title">{{ col.title }}</span>
                             </template>
@@ -142,8 +144,8 @@
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="virtual-x-left"></td>
                     <template v-if="fixedMode && headless">
-                        <td v-for="col in virtualX_columnPart" :key="col.dataIndex" :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"></td
-                    ></template>
+                        <td v-for="col in virtualX_columnPart" :key="col.dataIndex" :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"></td>
+                    </template>
                 </tr>
             </tbody>
             <tbody class="stk-tbody-main">
@@ -182,14 +184,14 @@
                             :row="row"
                             :rowIndex="rowIndex"
                             :colIndex="colIndex"
-                            :cellValue="row[col.dataIndex]"
+                            :cellValue="row?.[col.dataIndex]"
                         />
-                        <div v-else class="table-cell-wrapper" :title="!col.type ? row[col.dataIndex] : ''">
+                        <div v-else class="table-cell-wrapper" :title="!col.type ? row?.[col.dataIndex] : ''">
                             <template v-if="col.type === 'seq'">
                                 {{ (props.seqConfig.startIndex || 0) + rowIndex + 1 }}
                             </template>
                             <template v-else>
-                                {{ row[col.dataIndex] ?? getEmptyCellText(col, row) }}
+                                {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
                             </template>
                         </div>
                     </td>
@@ -208,11 +210,8 @@
 <script setup lang="ts">
 /**
  * @author JA+
- * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
  * TODO:存在的问题：
  * [] column.dataIndex 作为唯一键，不能重复
- * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
- * [] highlight-row 颜色不能恢复到active的颜色
  */
 import { CSSProperties, computed, nextTick, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { DEFAULT_ROW_HEIGHT, IS_LEGACY_MODE } from './const';
@@ -229,7 +228,7 @@ import { useVirtualScroll } from './useVirtualScroll';
 import { createStkTableId, getCalculatedColWidth, getColWidth, howDeepTheHeader, tableSort, transformWidthToStr } from './utils/index';
 
 /** Generic stands for DataType */
-type DT = any;
+type DT = Record<string | number, any>;
 /** 自己生成实例id */
 const stkTableId = createStkTableId();
 /**
@@ -244,7 +243,7 @@ const props = withDefaults(
         maxWidth?: string;
         /** 斑马线条纹 */
         stripe?: boolean;
-        /** 是否使用 table-layout:fixed */
+        /** 是否使用 table-layout:fixed(低版本浏览器需要设置table) */
         fixedMode?: boolean;
         /** 是否隐藏表头 */
         headless?: boolean;
@@ -252,6 +251,12 @@ const props = withDefaults(
         theme?: 'light' | 'dark';
         /** 行高 */
         rowHeight?: number;
+        /** 是否高亮鼠标悬浮的行 */
+        rowHover?: boolean;
+        /** 是否高亮选中的行 */
+        rowActive?: boolean;
+        /** 当前行再次点击否可以取消 */
+        rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
         headerRowHeight?: number | null;
         /** 虚拟滚动 */
@@ -262,7 +267,7 @@ const props = withDefaults(
         columns?: StkTableColumn<DT>[];
         /** 表格数据源 */
         dataSource?: DT[];
-        /** 行唯一键 */
+        /** 行唯一键 （行唯一值不能为undefined） */
         rowKey?: UniqKeyProp;
         /** 列唯一键 */
         colKey?: UniqKeyProp;
@@ -278,7 +283,7 @@ const props = withDefaults(
         showHeaderOverflow?: boolean;
         /** 表体溢出是否展示... */
         showOverflow?: boolean;
-        /** 是否增加行hover class */
+        /** 是否增加行hover class $*$ rename*/
         showTrHoverClass?: boolean;
         /** 是否高亮鼠标悬浮的单元格 */
         cellHover?: boolean;
@@ -343,6 +348,9 @@ const props = withDefaults(
         headless: false,
         theme: 'light',
         rowHeight: DEFAULT_ROW_HEIGHT,
+        rowHover: true,
+        rowActive: true,
+        rowCurrentRevokable: true,
         headerRowHeight: null,
         virtual: false,
         virtualX: false,
@@ -390,9 +398,9 @@ const emits = defineEmits<{
     (e: 'row-click', ev: MouseEvent, row: DT): void;
     /**
      * 选中一行触发。ev返回null表示不是点击事件触发的
-     * ```(ev: MouseEvent | null, row: DT, data: { select: boolean })```
+     * ```(ev: MouseEvent | null, row: DT | undefined, data: { select: boolean })```
      */
-    (e: 'current-change', ev: MouseEvent | null, row: DT, data: { select: boolean }): void;
+    (e: 'current-change', ev: MouseEvent | null, row: DT | undefined, data: { select: boolean }): void;
     /**
      * 行双击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -471,27 +479,31 @@ const emits = defineEmits<{
 // }>();
 
 const tableContainerRef = ref<HTMLDivElement>();
+const theadRef = ref<HTMLElement>();
 const colResizeIndicatorRef = ref<HTMLDivElement>();
 
 /** 是否使用 relative 固定头和列 */
 const isRelativeMode = ref(IS_LEGACY_MODE ? true : props.cellFixedMode === 'relative');
 
-/** 当前选中的一行*/
-const currentRow = ref<DT | null>(null);
+/**
+ * 当前选中的一行
+ * - shallowRef： 使 currentRow.value === row 地址相同。防止rowKeyGen 的WeakMap key不一致。
+ */
+const currentRow = shallowRef<DT>();
 /**
  * 保存当前选中行的key<br>
  * 原因：vue3 不用ref包dataSource时，row为原始对象，与currentItem（Ref）相比会不相等。
  */
 const currentRowKey = ref<any>(null);
 /** 当前hover行 */
-let currentHoverRow: DT = null;
+let currentHoverRow: DT | null = null;
 /** 当前hover的行的key */
 const currentHoverRowKey = ref(null);
 /** 当前hover的列的key */
 // const currentColHoverKey = ref(null);
 
 /** 排序的列dataIndex*/
-let sortCol = ref<string | null>();
+let sortCol = ref<keyof DT>();
 let sortOrderIndex = ref(0);
 
 /** 排序切换顺序 */
@@ -566,7 +578,7 @@ const {
     initVirtualScrollX,
     updateVirtualScrollY,
     updateVirtualScrollX,
-} = useVirtualScroll({ tableContainerRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
+} = useVirtualScroll({ tableContainerRef, theadRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
 
 /** 获取固定列的位置 */
 const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeaders });
@@ -640,21 +652,23 @@ watch(
             console.warn('invalid dataSource');
             return;
         }
+        /** 是否需要更新ScrollY，这里由于watch newValue与oldValue 的长度一样，因此需要这样使用 */
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
             needInitVirtualScrollY = true;
         }
         dataSourceCopy.value = [...val];
         // 数据长度没变则不计算虚拟滚动
-        if (needInitVirtualScrollY) initVirtualScrollY();
+        if (needInitVirtualScrollY) {
+            // 表格渲染后再执行。initVirtualScrollY 中有获取dom的操作。
+            nextTick(() => initVirtualScrollY());
+        }
 
         if (sortCol.value) {
             // 排序
             const column = tableHeaderLast.value.find(it => it.dataIndex === sortCol.value);
             onColumnSort(column, false);
         }
-        // 是否需要
-        // updateFixedShadow();
     },
     {
         deep: false,
@@ -771,11 +785,16 @@ function dealColumns() {
 /**
  * 行唯一值生成
  */
-function rowKeyGen(row: DT) {
-    if (!row) return;
+function rowKeyGen(row: DT | null | undefined) {
+    if (!row) return row;
     let key = rowKeyGenStore.get(row);
     if (!key) {
         key = typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey];
+
+        if (key === void 0) {
+            // key为undefined时，不应该高亮行。因此重新生成key
+            key = Math.random().toString();
+        }
         rowKeyGenStore.set(row, key);
     }
     return key;
@@ -866,10 +885,15 @@ function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?:
 
 function onRowClick(e: MouseEvent, row: DT) {
     emits('row-click', e, row);
-    // 选中同一行，取消当前选中行。
-    if (props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row) {
-        currentRow.value = null;
-        currentRowKey.value = null;
+    const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
+    if (isCurrentRow) {
+        if (!props.rowCurrentRevokable) {
+            // 不可取消
+            return;
+        }
+        // 点击同一行，取消当前选中行。
+        currentRow.value = void 0;
+        currentRowKey.value = void 0;
         emits('current-change', e, row, { select: false });
     } else {
         currentRow.value = row;
@@ -924,7 +948,6 @@ function onCellMouseOver(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
  * @param e
  */
 function onTableWheel(e: WheelEvent) {
-    e.preventDefault();
     if (isColResizing.value) {
         // 正在调整列宽时，不允许用户滚动
         e.stopPropagation();
@@ -933,9 +956,30 @@ function onTableWheel(e: WheelEvent) {
     // #region ---- 控制滚动，防止出现白屏--
     const dom = tableContainerRef.value;
     if (!dom) return;
+    const { containerHeight, scrollTop, scrollHeight, rowHeight } = virtualScroll.value;
+    const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
+    /** 是否滚动在下面 */
+    const isScrollBottom = scrollHeight - containerHeight - scrollTop < rowHeight;
+    /** 是否滚动在右侧 */
+    const isScrollRight = scrollWidth - containerWidth - scrollLeft < 100;
     const { deltaY, deltaX } = e;
-    if (deltaY) dom.scrollTop += deltaY;
-    if (deltaX) dom.scrollLeft += deltaX;
+
+    /**
+     * 只有虚拟滚动时，才要用 wheel 代理scroll，防止滚动过快导致的白屏。
+     * 滚动条在边界情况时，not preventDefault 。因为会阻塞父级滚动条滚动。
+     */
+    if (virtual_on && deltaY) {
+        if ((deltaY > 0 && !isScrollBottom) || (deltaY < 0 && scrollTop > 0)) {
+            e.preventDefault();
+        }
+        dom.scrollTop += deltaY;
+    }
+    if (virtualX_on && deltaX) {
+        if ((deltaX > 0 && !isScrollRight) || (deltaX < 0 && scrollLeft > 0)) {
+            e.preventDefault();
+        }
+        dom.scrollLeft += deltaX;
+    }
     //#endregion
 }
 
@@ -1024,7 +1068,7 @@ function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortO
 
 /** 重置排序 */
 function resetSorter() {
-    sortCol.value = null;
+    sortCol.value = void 0;
     sortOrderIndex.value = 0;
     dataSourceCopy.value = [...props.dataSource];
 }
@@ -1046,7 +1090,7 @@ function getTableData() {
 }
 
 /** 获取当前排序列的信息 */
-function getSortColumns(): SortState<DT>[] {
+function getSortColumns(): Partial<SortState<DT>>[] {
     const sortOrder = sortSwitchOrder[sortOrderIndex.value];
     if (!sortOrder) return [];
     return [{ dataIndex: sortCol.value, order: sortOrder }];

package/src/StkTable/style.less

@@ -45,7 +45,13 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    /* border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left*/
+    /** 
+     * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
+     * - box-shadow inset 方案不生效，且占用属性。
+     * - outline 方案绘制在图形外
+     * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
+     * - sticky 定位方案需要占用位置。高度为0。
+     */
     border-left: 1px solid var(--border-color);
     /* 下面border用于表格内容不满高度时，绘制表格边界线 */
     background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
@@ -135,6 +141,15 @@
         }
     }
 
+    &.row-hover tbody tr:hover {
+        background-color: var(--tr-hover-bgc);
+    }
+
+
+    &.row-active tbody tr.active {
+        background-color: var(--tr-active-bgc);
+    }
+
     /* 单元格悬浮 */
     &.cell-hover tbody td:hover {
         box-shadow: inset 0 0 0 2px var(--td-hover-color);
@@ -252,29 +267,18 @@
 
     }
 
-    thead {
-        tr {
-            background-color: var(--th-bgc);
-            height: var(--header-row-height);
-        }
+    thead tr {
+        background-color: var(--th-bgc);
+        height: var(--header-row-height);
     }
 
-    /* stk-table-main 这层为了增加选择器优先级，防止被斑马纹颜色覆盖*/
-    .stk-table-main tbody tr {
+
+    tbody tr {
         background-color: var(--td-bgc);
         height: var(--row-height);
-        /** 一行分层，有利于高亮行重绘
-        transform: translateZ(0);*/
-
-        &:hover {
-            background-color: var(--tr-hover-bgc);
-        }
-
-        &.active {
-            background-color: var(--tr-active-bgc);
-        }
     }
 
+
     .virtual-x-left,
     .virtual-x-right {
         padding: 0;

package/src/StkTable/types/index.ts

@@ -5,16 +5,32 @@ export type Order = null | 'asc' | 'desc';
 
 type Sorter<T> = boolean | ((data: T[], option: { order: Order; column: any }) => T[]);
 
-export type CustomCellFunc<T extends Record<string, any>> = (props: {
+export type CustomCellProps<T extends Record<string, any>> = {
     row: T;
     col: StkTableColumn<T>;
     /** row[col.dataIndex] 的值 */
     cellValue: any;
     rowIndex: number;
     colIndex: number;
-}) => VNode;
+};
+
+/**
+ * $*$自定义单元格渲染函数
+ * @deprecated
+ */
+export type CustomCellFunc<T extends Record<string, any>> = (props: CustomCellProps<T>) => VNode;
+
+export type CustomHeaderCellProps<T extends Record<string, any>> = {
+    col: StkTableColumn<T>;
+    rowIndex: number;
+    colIndex: number;
+};
 
-export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: { col: StkTableColumn<T> }) => VNode;
+/**
+ * $*$自定义表头渲染函数
+ * @deprecated
+ */
+export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: CustomHeaderCellProps<T>) => VNode;
 
 /** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
@@ -55,17 +71,22 @@ export type StkTableColumn<T extends Record<string, any>> = {
      * 自定义 td 渲染内容。
      *
      * 组件prop入参:
-     * - props.row 一行的记录。
-     * - props.col 列配置
+     * @param props.row 一行的记录。
+     * @param props.col 列配置
+     * @param props.cellValue row[col.dataIndex] 的值
+     * @param props.rowIndex 行索引
+     * @param props.colIndex 列索引
      */
-    customCell?: Component | VNode | CustomCellFunc<T>;
+    customCell?: Component<CustomCellProps<T>> | string;
     /**
      * 自定义 th 渲染内容
      *
      * 组件prop入参:
-     * - props.col 列配置
+     * @param props.col 列配置
+     * @param props.rowIndex 行索引
+     * @param props.colIndex 列索引
      */
-    customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
+    customHeaderCell?: Component<CustomHeaderCellProps<T>> | string;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
     /** 父节点引用 */
@@ -78,7 +99,7 @@ export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>,
 
 /** 排序状态 */
 export type SortState<T> = {
-    dataIndex: T;
+    dataIndex: keyof T;
     order: null | 'asc' | 'desc';
     sortType?: 'number' | 'string';
 };
@@ -104,7 +125,7 @@ export type SortConfig<T extends Record<string, any>> = {
     };
     /**
      * string排序是否使用 String.prototype.localCompare
-     * 默认true (&$&应该false)
+     * 默认true ($*$应该false)
      */
     stringLocaleCompare?: boolean;
 };

package/src/StkTable/useFixedCol.ts

@@ -76,17 +76,17 @@ export function useFixedCol<DT extends Record<string, any>>({
         if (!props.fixedColShadow) return;
         const fixedColsTemp: StkTableColumn<DT>[] = [];
         const fixedShadowColsTemp: (StkTableColumn<DT> | null)[] = [];
-        let clientWidth, scrollWidth, scrollLeft;
+        let clientWidth, /* scrollWidth, */ scrollLeft;
 
         if (virtualScrollX?.value) {
-            const { containerWidth: cw, scrollWidth: sw, scrollLeft: sl } = virtualScrollX.value;
+            const { containerWidth: cw, /* scrollWidth: sw, */ scrollLeft: sl } = virtualScrollX.value;
             clientWidth = cw;
-            scrollWidth = sw;
+            // scrollWidth = sw;
             scrollLeft = sl;
         } else {
-            const { clientWidth: cw, scrollWidth: sw, scrollLeft: sl } = tableContainerRef.value as HTMLDivElement;
+            const { clientWidth: cw, /* scrollWidth: sw, */ scrollLeft: sl } = tableContainerRef.value as HTMLDivElement;
             clientWidth = cw;
-            scrollWidth = sw;
+            // scrollWidth = sw;
             scrollLeft = sl;
         }