stk-table-vue 0.8.8 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "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,
@@ -253,7 +253,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 +271,7 @@ import {
     Order,
     PrivateRowDT,
     PrivateStkTableColumn,
+    RowActiveOption,
     SeqConfig,
     SortConfig,
     SortOption,
@@ -328,8 +336,10 @@ const props = withDefaults(
         /** 是否高亮鼠标悬浮的行 */
         rowHover?: boolean;
         /** 是否高亮选中的行 */
-        rowActive?: boolean;
-        /** 当前行再次点击否可以取消 (rowActive=true)*/
+        rowActive?: boolean | RowActiveOption<DT>;
+        /**
+         * @deprecated
+         */
         rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
         headerRowHeight?: number | string | null;
@@ -706,6 +716,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,
+            revokable: Boolean(props.rowCurrentRevokable),
+        };
+    } else {
+        return { ...DEFAULT_ROW_ACTIVE_CONFIG, ...rowActive };
+    }
+});
+
 const dataSourceCopy = shallowRef<DT[]>([]);
 
 const rowKeyGenComputed = computed(() => {
@@ -786,7 +809,7 @@ const {
     updateHoverMergedCells,
     activeMergedCells,
     updateActiveMergedCells,
-} = useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
+} = useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
 
 const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
 
@@ -1164,7 +1187,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 +1195,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 });
 }
@@ -1393,12 +1411,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 +1435,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

@@ -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 {