stk-table-vue 0.8.8 → 0.8.10

package/package.json

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

@@ -20,7 +20,7 @@
             'cell-hover': props.cellHover,
             'cell-active': props.cellActive,
             'row-hover': props.rowHover,
-            'row-active': props.rowActive,
+            'row-active': rowActiveProp.enabled,
             'text-overflow': props.showOverflow,
             'header-text-overflow': props.showHeaderOverflow,
             'fixed-relative-mode': isRelativeMode,
@@ -115,7 +115,7 @@
                         active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
                         [rowClassName(row, getRowIndex(rowIndex)) || '']: true,
-                        expanded: row?.__EXPANDED__,
+                        expanded: row?.__EXP__,
                         'expanded-row': row && row.__EXPANDED_ROW__,
                     }"
                     :style="{
@@ -152,9 +152,8 @@
                                         'cell-active': col.mergeCells && activeMergedCells.has(cellKeyGen(row, col)),
                                         'seq-column': col.type === 'seq',
                                         active: props.cellActive && currentSelectedCellKey === cellKeyGen(row, col),
-                                        expanded:
-                                            col.type === 'expand' && (row.__EXPANDED__ ? colKeyGen(row.__EXPANDED__) === colKeyGen(col) : false),
-                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXPANDED__,
+                                        expanded: col.type === 'expand' && (row.__EXP__ ? colKeyGen(row.__EXP__) === colKeyGen(col) : false),
+                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXP__,
                                         'drag-row-cell': col.type === 'dragRow',
                                     },
                                 ]"
@@ -179,8 +178,8 @@
                                             :rowIndex="getRowIndex(rowIndex)"
                                             :colIndex="colIndex"
                                             :cellValue="row && row[col.dataIndex]"
-                                            :expanded="(row && row.__EXPANDED__) || null"
-                                            :tree-expanded="(row && row.__T_EXPANDED__) || null"
+                                            :expanded="(row && row.__EXP__) || null"
+                                            :tree-expanded="(row && row.__T_EXP__) || null"
                                         >
                                             <template #stkFoldIcon>
                                                 <TriangleIcon></TriangleIcon>
@@ -253,7 +252,14 @@ import { CSSProperties, computed, nextTick, onMounted, ref, shallowRef, toRaw, w
 import DragHandle from './components/DragHandle.vue';
 import SortIcon from './components/SortIcon.vue';
 import TriangleIcon from './components/TriangleIcon.vue';
-import { CELL_KEY_SEPARATE, DEFAULT_ROW_HEIGHT, DEFAULT_SMOOTH_SCROLL, DEFAULT_SORT_CONFIG, IS_LEGACY_MODE } from './const';
+import {
+    CELL_KEY_SEPARATE,
+    DEFAULT_ROW_ACTIVE_CONFIG,
+    DEFAULT_ROW_HEIGHT,
+    DEFAULT_SMOOTH_SCROLL,
+    DEFAULT_SORT_CONFIG,
+    IS_LEGACY_MODE,
+} from './const';
 import {
     AutoRowHeightConfig,
     ColResizableConfig,
@@ -264,6 +270,7 @@ import {
     Order,
     PrivateRowDT,
     PrivateStkTableColumn,
+    RowActiveOption,
     SeqConfig,
     SortConfig,
     SortOption,
@@ -328,8 +335,10 @@ const props = withDefaults(
         /** 是否高亮鼠标悬浮的行 */
         rowHover?: boolean;
         /** 是否高亮选中的行 */
-        rowActive?: boolean;
-        /** 当前行再次点击否可以取消 (rowActive=true)*/
+        rowActive?: boolean | RowActiveOption<DT>;
+        /**
+         * @deprecated
+         */
         rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
         headerRowHeight?: number | string | null;
@@ -446,7 +455,7 @@ const props = withDefaults(
         rowHeight: DEFAULT_ROW_HEIGHT,
         autoRowHeight: false,
         rowHover: true,
-        rowActive: true,
+        rowActive: () => DEFAULT_ROW_ACTIVE_CONFIG,
         rowCurrentRevokable: true,
         headerRowHeight: DEFAULT_ROW_HEIGHT,
         virtual: false,
@@ -706,6 +715,19 @@ const isTreeData = computed(() => {
     return props.columns.some(col => col.type === 'tree-node');
 });
 
+const rowActiveProp = computed<Required<RowActiveOption<DT>>>(() => {
+    const { rowActive } = props;
+    if (typeof rowActive === 'boolean') {
+        return {
+            ...DEFAULT_ROW_ACTIVE_CONFIG,
+            enabled: rowActive ?? true,
+            revokable: Boolean(props.rowCurrentRevokable),
+        };
+    } else {
+        return { ...DEFAULT_ROW_ACTIVE_CONFIG, ...rowActive };
+    }
+});
+
 const dataSourceCopy = shallowRef<DT[]>([]);
 
 const rowKeyGenComputed = computed(() => {
@@ -786,7 +808,7 @@ const {
     updateHoverMergedCells,
     activeMergedCells,
     updateActiveMergedCells,
-} = useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
+} = useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
 
 const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
 
@@ -1040,7 +1062,7 @@ function dealColumns() {
  */
 function rowKeyGen(row: DT | null | undefined) {
     if (!row) return row;
-    let key = rowKeyGenCache.get(row) || (row as PrivateRowDT).__ROW_KEY__;
+    let key = rowKeyGenCache.get(row) || (row as PrivateRowDT).__ROW_K__;
     if (!key) {
         key = rowKeyGenComputed.value(row);
 
@@ -1164,7 +1186,7 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
             dataSourceCopy.value = isTreeData.value ? flatTreeData(dataSourceTemp) : dataSourceTemp;
         }
     }
-    // 只有点击才触发事件 en: only emit sort-change event when click
+    // only emit sort-change event when click
     if (click || options.emit) {
         emits('sort-change', col, order, toRaw(dataSourceTemp), sortConfig);
     }
@@ -1172,20 +1194,15 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
 
 function onRowClick(e: MouseEvent, row: DT, rowIndex: number) {
     emits('row-click', e, row, { rowIndex });
+    if (rowActiveProp.value.disabled?.(row)) return;
     const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
     if (isCurrentRow) {
-        if (!props.rowCurrentRevokable) {
-            // 不可取消
+        if (!rowActiveProp.value.revokable) {
             return;
         }
-        // 点击同一行，取消当前选中行。
-        currentRow.value = void 0;
-        currentRowKey.value = void 0;
-        updateActiveMergedCells(true);
+        setCurrentRow(void 0, { silent: true });
     } else {
-        currentRow.value = row;
-        currentRowKey.value = rowKeyGen(row);
-        updateActiveMergedCells();
+        setCurrentRow(row, { silent: true });
     }
     emits('current-change', e, row, { select: !isCurrentRow });
 }
@@ -1283,50 +1300,47 @@ function onCellMouseDown(e: MouseEvent, row: DT, col: StkTableColumn<DT>, rowInd
 }
 
 /**
- * 鼠标滚轮事件监听。代理滚轮事件，防止滚动过快出现白屏。
+ * proxy scroll, prevent white screen
  * @param e
  */
 function onTableWheel(e: WheelEvent) {
     if (props.smoothScroll) {
         return;
     }
+    // if is resizing, not allow scroll
     if (isColResizing.value) {
-        // 正在调整列宽时，不允许用户滚动
         e.stopPropagation();
         return;
     }
-    // #region ---- 控制滚动，防止出现白屏--
     const dom = tableContainerRef.value;
     if (!dom) return;
+    if (!virtual_on.value && !virtualX_on.value) return;
+
     const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
     const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
-    /** 是否滚动在下面 */
     const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
-    /** 是否滚动在右侧 */
     const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
-    const { deltaY, deltaX } = e;
+    const { deltaY, deltaX, shiftKey } = e;
 
-    /**
-     * 只有虚拟滚动时，才要用 wheel 代理scroll，防止滚动过快导致的白屏。
-     * 滚动条在边界情况时，not preventDefault 。因为会阻塞父级滚动条滚动。
-     */
-    if (virtual_on.value && deltaY) {
+    if (virtual_on.value && deltaY && !shiftKey) {
         if ((deltaY > 0 && !isScrollBottom) || (deltaY < 0 && scrollTop > 0)) {
-            e.preventDefault();
+            e.preventDefault(); // parent element scroll
         }
         dom.scrollTop += deltaY;
     }
-    if (virtualX_on.value && deltaX) {
-        if ((deltaX > 0 && !isScrollRight) || (deltaX < 0 && scrollLeft > 0)) {
+    if (virtualX_on.value) {
+        let distance = deltaX;
+        if (shiftKey && deltaY) {
+            distance = deltaY;
+        }
+        if ((distance > 0 && !isScrollRight) || (distance < 0 && scrollLeft > 0)) {
             e.preventDefault();
         }
-        dom.scrollLeft += deltaX;
+        dom.scrollLeft += distance;
     }
-    //#endregion
 }
 
 /**
- * 滚动条监听
  * @param e scrollEvent
  */
 function onTableScroll(e: Event) {
@@ -1393,12 +1407,13 @@ function onTrMouseLeave(e: MouseEvent) {
  * @param {boolean} option.silent if set true not emit `current-change`. default:false
  * @param {boolean} option.deep if set true, deep search in children. default:false
  */
-function setCurrentRow(rowKeyOrRow: string | undefined | DT, option = { silent: false, deep: false }) {
-    if (!dataSourceCopy.value.length) return;
+function setCurrentRow(rowKeyOrRow: string | undefined | DT, option: { silent?: boolean; deep?: boolean } = { silent: false, deep: false }) {
     const select = rowKeyOrRow !== void 0;
+    const currentRowTemp = currentRow.value;
     if (!select) {
         currentRow.value = void 0;
         currentRowKey.value = void 0;
+        updateActiveMergedCells(true);
     } else if (typeof rowKeyOrRow === 'string') {
         const findRowByKey = (data: DT[], key: string): DT | null => {
             for (let i = 0; i < data.length; i++) {
@@ -1416,19 +1431,21 @@ function setCurrentRow(rowKeyOrRow: string | undefined | DT, option = { silent:
             return null;
         };
 
-        const row = findRowByKey(dataSourceCopy.value, rowKeyOrRow);
+        currentRowKey.value = rowKeyOrRow;
+        updateActiveMergedCells(false, currentRowKey.value);
+        const row = findRowByKey(dataSourceCopy.value || [], rowKeyOrRow);
         if (!row) {
             console.warn('setCurrentRow failed.rowKey:', rowKeyOrRow);
             return;
         }
         currentRow.value = row;
-        currentRowKey.value = rowKeyOrRow;
     } else {
         currentRow.value = rowKeyOrRow;
         currentRowKey.value = rowKeyGen(rowKeyOrRow);
+        updateActiveMergedCells(false, currentRowKey.value);
     }
     if (!option.silent) {
-        emits('current-change', /** no Event */ null, currentRow.value, { select });
+        emits('current-change', /** no Event */ null, select ? currentRow.value : currentRowTemp, { select });
     }
 }
 

package/src/StkTable/const.ts

@@ -1,4 +1,4 @@
-import { SortConfig } from './types';
+import { RowActiveOption, SortConfig } from './types';
 import { getBrowsersVersion } from './utils';
 
 export const DEFAULT_COL_WIDTH = '100';
@@ -42,3 +42,9 @@ export const DEFAULT_SORT_CONFIG = {
     stringLocaleCompare: false,
     sortChildren: false,
 } satisfies SortConfig<any>;
+
+export const DEFAULT_ROW_ACTIVE_CONFIG: Required<RowActiveOption<any>> = {
+    enabled: false,
+    disabled: () => false,
+    revokable: false,
+};

package/src/StkTable/types/index.ts

@@ -17,7 +17,7 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 不展开: null
      * - 展开: 返回column配置
      */
-    expanded?: PrivateRowDT['__EXPANDED__'];
+    expanded?: PrivateRowDT['__EXP__'];
 };
 
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
@@ -139,25 +139,25 @@ export type PrivateRowDT = {
     /**
      * Only expanded row will add this key
      *
-     * If user define the `__ROW_KEY__` in table data, this value will be used as the row key
+     * If user define the `__ROW_K__` in table data, this value will be used as the row key
      * @private
      */
-    __ROW_KEY__?: string;
+    __ROW_K__?: string;
     /**
      * if row expanded
      * @private
      */
-    __EXPANDED__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any> | null;
     /**
      * if tree node row expanded
      * @private
      */
-    __T_EXPANDED__?: boolean;
+    __T_EXP__?: boolean;
     /**
      * tree parent key
      * @private
      */
-    __T_PARENT_K__?: UniqKey;
+    __T_P_K__?: UniqKey;
     /**
      * tree level
      * @private
@@ -284,3 +284,11 @@ export type RowKeyGen = (row: any) => UniqKey;
 export type ColKeyGen = ComputedRef<(col: StkTableColumn<any>) => UniqKey>;
 
 export type CellKeyGen = (row: any, col: StkTableColumn<any>) => string;
+
+export type RowActiveOption<DT> = {
+    enabled?: boolean;
+    /** disabled row active */
+    disabled?: (row: DT) => boolean;
+    /** current row again click can revoke active */
+    revokable?: boolean;
+};

package/src/StkTable/useMergeCells.ts

@@ -1,20 +1,14 @@
-import { ref, ShallowRef, watch } from 'vue';
-import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+import { Ref, ref, ShallowRef, watch } from 'vue';
+import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowActiveOption, RowKeyGen, UniqKey } from './types';
 import { pureCellKeyGen } from './utils';
 type Options = {
-    props: any;
+    rowActiveProp: Ref<RowActiveOption<any>>;
     tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
     rowKeyGen: RowKeyGen;
     colKeyGen: ColKeyGen;
     virtual_dataSourcePart: ShallowRef<any[]>;
-}
-export function useMergeCells({
-    props,
-    tableHeaderLast,
-    rowKeyGen,
-    colKeyGen,
-    virtual_dataSourcePart,
-}:Options ) {
+};
+export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart }: Options) {
     /**
      * which cell need be hidden
      * - key: rowKey
@@ -33,13 +27,12 @@ export function useMergeCells({
     /** click current row , which rowspan cells should be highlight */
     const activeMergedCells = ref(new Set<string>());
 
-
     watch([virtual_dataSourcePart, tableHeaderLast], () => {
         hiddenCellMap.value = {};
         hoverRowMap.value = {};
     });
 
-    /** 
+    /**
      * abstract the logic of hiding cells
      */
     function hideCells(rowKey: UniqKey, startIndex: number, count: number, isSelfRow = false, mergeCellKey: string) {
@@ -84,14 +77,14 @@ export function useMergeCells({
         if (colspan === 1 && rowspan === 1) return;
 
         const rowKey = rowKeyGen(row);
-        
+
         const colKey = colKeyGen.value(col);
         const curColIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
         const curRowIndex = virtual_dataSourcePart.value.findIndex(item => rowKeyGen(item) === rowKey);
         const mergedCellKey = pureCellKeyGen(rowKey, colKey);
 
         if (curRowIndex === -1) return;
- 
+
         for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
             const row = virtual_dataSourcePart.value[i];
             if (!row) break;
@@ -106,13 +99,13 @@ export function useMergeCells({
         hoverMergedCells.value = set || new Set();
     }
 
-    function updateActiveMergedCells(clear?: boolean) {
-        if (!props.rowActive) return;
+    function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {
+        if (!rowActiveProp.value.enabled) return;
         if (clear) {
             activeMergedCells.value.clear();
-        } else {
-            activeMergedCells.value = new Set(hoverMergedCells.value);
+            return;
         }
+        activeMergedCells.value = (rowKey !== void 0 && hoverRowMap.value[rowKey]) || new Set(hoverMergedCells.value);
     }
 
     return {

package/src/StkTable/useRowExpand.ts

@@ -9,7 +9,7 @@ type Option<DT extends Record<string, any>> = {
 };
 
 export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
-    const expandedKey = '__EXPANDED__';
+    const expandedKey = '__EXP__';
 
     function isExpanded(row: DT, col?: StkTableColumn<DT> | null) {
         return row?.[expandedKey] === col ? !row?.[expandedKey] : true;
@@ -45,7 +45,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         // delete other expanded row below the target row
         for (let i = index + 1; i < tempData.length; i++) {
             const item: PrivateRowDT = tempData[i];
-            const rowKey = item.__ROW_KEY__;
+            const rowKey = item.__ROW_K__;
             if (rowKey?.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
                 tempData.splice(i, 1);
                 i--;
@@ -64,7 +64,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         if (expand) {
             // insert new expanded row
             const newExpandRow: ExpandedRow = {
-                __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+                __ROW_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
                 __EXPANDED_ROW__: row,
                 __EXPANDED_COL__: col,
             };
@@ -72,7 +72,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         }
 
         if (row) {
-            row.__EXPANDED__ = expand ? col : null;
+            row.__EXP__ = expand ? col : null;
         }
 
         dataSourceCopy.value = tempData;

package/src/StkTable/useTree.ts

@@ -14,7 +14,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
 
     /** click expended icon to toggle expand row */
     function toggleTreeNode(row: DT, col: any) {
-        const expand = row ? !row.__T_EXPANDED__ : false;
+        const expand = row ? !row.__T_EXP__ : false;
         privateSetTreeExpand(row, { expand, col, isClick: true });
     }
 
@@ -47,7 +47,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             const level = row.__T_LV__ || 0;
             let expanded = option?.expand;
             if (expanded === void 0) {
-                expanded = !row.__T_EXPANDED__;
+                expanded = !row.__T_EXP__;
             }
             if (expanded) {
                 const children = expandNode(row, level);
@@ -73,13 +73,13 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
     }
 
     function setNodeExpanded(row: DT, expanded: boolean, level?: number, parent?: DT) {
-        row.__T_EXPANDED__ = expanded;
+        row.__T_EXP__ = expanded;
         if (level !== void 0) {
             row.__T_LV__ = level;
         }
-        if (parent) {
-            row.__T_PARENT_K__ = rowKeyGen(parent);
-        }
+        // if (parent) {
+        //     row.__T_P_K__ = rowKeyGen(parent);
+        // }
     }
 
     /**
@@ -94,23 +94,19 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             for (let i = 0; i < data.length; i++) {
                 const item = data[i];
                 result.push(item);
-                const isExpanded = Boolean(item.__T_EXPANDED__);
+                const isExpanded = Boolean(item.__T_EXP__);
                 setNodeExpanded(item, isExpanded, level, parent);
                 if (!isExpanded) {
                     if (defaultExpandAll) {
                         setNodeExpanded(item, true);
                     } else {
-                        if (defaultExpandLevel) {
-                            if (level < defaultExpandLevel) {
-                                setNodeExpanded(item, true);
-                            }
+                        if (defaultExpandLevel && level < defaultExpandLevel) {
+                            setNodeExpanded(item, true);
                         }
-                        if (defaultExpandKeys) {
-                            if (defaultExpandKeys.includes(rowKeyGen(item))) {
-                                setNodeExpanded(item, true);
-                            }
+                        if (defaultExpandKeys?.includes(rowKeyGen(item))) {
+                            setNodeExpanded(item, true);
                         }
-                        if (!item.__T_EXPANDED__) {
+                        if (!item.__T_EXP__) {
                             continue;
                         }
                     }
@@ -127,7 +123,7 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
             row.children.forEach((child: DT) => {
                 result.push(child);
                 const childLv = level + 1;
-                if (child.__T_EXPANDED__ && child.children) {
+                if (child.__T_EXP__ && child.children) {
                     const res = expandNode(child, childLv);
                     result = result.concat(res);
                 } else {