stk-table-vue 0.8.12 → 0.8.13

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

@@ -157,7 +157,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * "v" - 仅展示竖线
      * "body-v" - 仅表体展示竖线
      */
-    bordered?: boolean | "h" | "v" | "body-v";
+    bordered?: boolean | "h" | "v" | "body-v" | "body-h";
     /**
      * 自动重新计算虚拟滚动高度宽度。默认true
      * [非响应式]
@@ -526,7 +526,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * "v" - 仅展示竖线
      * "body-v" - 仅表体展示竖线
      */
-    bordered?: boolean | "h" | "v" | "body-v";
+    bordered?: boolean | "h" | "v" | "body-v" | "body-h";
     /**
      * 自动重新计算虚拟滚动高度宽度。默认true
      * [非响应式]
@@ -714,7 +714,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowClassName: (row: DT, i: number) => string | undefined;
     colResizable: boolean | ColResizableConfig<DT>;
     colMinWidth: number;
-    bordered: boolean | "h" | "v" | "body-v";
+    bordered: boolean | "h" | "v" | "body-v" | "body-h";
     autoResize: boolean | (() => void);
     fixedColShadow: boolean;
     hideHeaderTitle: boolean | string[];

package/lib/stk-table-vue.js

@@ -227,9 +227,9 @@ const DEFAULT_SORT_CONFIG = {
   sortChildren: false
 };
 const DEFAULT_ROW_ACTIVE_CONFIG = {
-  enabled: false,
+  enabled: true,
   disabled: () => false,
-  revokable: false
+  revokable: true
 };
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
@@ -917,17 +917,21 @@ function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, v
     hiddenCellMap.value = {};
     hoverRowMap.value = {};
   });
-  function hideCells(rowKey, startIndex, count, isSelfRow = false, mergeCellKey) {
-    for (let i = startIndex; i < startIndex + count; i++) {
-      if (!isSelfRow || i !== startIndex) {
-        const nextCol = tableHeaderLast.value[i];
-        if (!nextCol) break;
-        const nextColKey = colKeyGen.value(nextCol);
-        if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = /* @__PURE__ */ new Set();
-        hiddenCellMap.value[rowKey].add(nextColKey);
+  function hideCells(rowKey, colKey, colspan, isSelfRow = false, mergeCellKey) {
+    const startIndex = tableHeaderLast.value.findIndex((item) => colKeyGen.value(item) === colKey);
+    for (let i = startIndex; i < startIndex + colspan; i++) {
+      if (!isSelfRow) {
+        if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
+        hoverRowMap.value[rowKey].add(mergeCellKey);
+      }
+      if (isSelfRow && i === startIndex) {
+        continue;
       }
-      if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
-      hoverRowMap.value[rowKey].add(mergeCellKey);
+      const nextCol = tableHeaderLast.value[i];
+      if (!nextCol) break;
+      const nextColKey = colKeyGen.value(nextCol);
+      if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = /* @__PURE__ */ new Set();
+      hiddenCellMap.value[rowKey].add(nextColKey);
     }
   }
   function mergeCellsWrapper(row, col, rowIndex, colIndex) {
@@ -937,21 +941,20 @@ function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, v
     rowspan = rowspan || 1;
     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;
+    const colKey = colKeyGen.value(col);
+    const mergedCellKey = pureCellKeyGen(rowKey, colKey);
     for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
       const row2 = virtual_dataSourcePart.value[i];
       if (!row2) break;
-      hideCells(rowKeyGen(row2), curColIndex, colspan, i === curRowIndex, mergedCellKey);
+      hideCells(rowKeyGen(row2), colKey, colspan, i === curRowIndex, mergedCellKey);
     }
     return { colspan, rowspan };
   }
+  const emptySet = /* @__PURE__ */ new Set();
   function updateHoverMergedCells(rowKey) {
-    const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
-    hoverMergedCells.value = set || /* @__PURE__ */ new Set();
+    hoverMergedCells.value = rowKey === void 0 ? emptySet : hoverRowMap.value[rowKey] || emptySet;
   }
   function updateActiveMergedCells(clear, rowKey) {
     if (!rowActiveProp.value.enabled) return;
@@ -1721,7 +1724,7 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = ["colspan"];
 const _hoisted_10 = { class: "table-cell-wrapper" };
-const _hoisted_11 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_11 = ["onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_12 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
@@ -2123,6 +2126,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return col.title || "";
     }
+    function getTDProps(row, col) {
+      const colKey = colKeyGen.value(col);
+      if (!row) {
+        return {
+          style: cellStyleMap.value[TagType.TD].get(colKey)
+        };
+      }
+      const cellKey = cellKeyGen(row, col);
+      const classList = [col.className, fixedColClassMap.value.get(colKeyGen.value(col))];
+      if (col.mergeCells) {
+        if (hoverMergedCells.value.has(cellKey)) {
+          classList.push("cell-hover");
+        }
+        if (activeMergedCells.value.has(cellKey)) {
+          classList.push("cell-active");
+        }
+      }
+      if (props.cellActive && currentSelectedCellKey.value === cellKey) {
+        classList.push("active");
+      }
+      if (col.type === "seq") {
+        classList.push("seq-column");
+      } else if (col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKeyGen.value(col) : false)) {
+        classList.push("expanded");
+      } else if (col.type === "tree-node" && row.__T_EXP__) {
+        classList.push("tree-expanded");
+      } else if (col.type === "dragRow") {
+        classList.push("drag-row-cell");
+      }
+      return {
+        "data-cell-key": cellKey,
+        style: cellStyleMap.value[TagType.TD].get(colKey),
+        class: classList
+      };
+    }
     function onColumnSort(col, click = true, options = {}) {
       if (!col) {
         console.warn("onColumnSort: not found col:", col);
@@ -2726,23 +2764,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   var _a2;
                   return openBlock(), createElementBlock(Fragment, null, [
                     !((_a2 = unref(hiddenCellMap)[rowKeyGen(row)]) == null ? void 0 : _a2.has(colKeyGen.value(col))) ? (openBlock(), createElementBlock("td", mergeProps({
-                      key: colKeyGen.value(col),
-                      "data-cell-key": cellKeyGen(row, col),
-                      style: cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)),
-                      class: [
-                        col.className,
-                        unref(fixedColClassMap).get(colKeyGen.value(col)),
-                        {
-                          "cell-hover": col.mergeCells && unref(hoverMergedCells).has(cellKeyGen(row, col)),
-                          "cell-active": col.mergeCells && unref(activeMergedCells).has(cellKeyGen(row, col)),
-                          "seq-column": col.type === "seq",
-                          active: props.cellActive && currentSelectedCellKey.value === cellKeyGen(row, col),
-                          expanded: col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKeyGen.value(col) : false),
-                          "tree-expanded": col.type === "tree-node" && row.__T_EXP__,
-                          "drag-row-cell": col.type === "dragRow"
-                        }
-                      ]
-                    }, { ref_for: true }, unref(mergeCellsWrapper)(row, col, rowIndex, colIndex), {
+                      key: colKeyGen.value(col)
+                    }, { ref_for: true }, {
+                      ...getTDProps(row, col),
+                      ...unref(mergeCellsWrapper)(row, col, rowIndex, colIndex)
+                    }, {
                       onClick: ($event) => onCellClick($event, row, col, getRowIndex(rowIndex)),
                       onMousedown: ($event) => onCellMouseDown($event, row, col, getRowIndex(rowIndex)),
                       onMouseenter: ($event) => onCellMouseEnter($event, row, col),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.12",
+  "version": "0.8.13",
   "description": "High performance 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

@@ -139,22 +139,10 @@
                             <td
                                 v-if="!hiddenCellMap[rowKeyGen(row)]?.has(colKeyGen(col))"
                                 :key="colKeyGen(col)"
-                                :data-cell-key="cellKeyGen(row, col)"
-                                :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
-                                :class="[
-                                    col.className,
-                                    fixedColClassMap.get(colKeyGen(col)),
-                                    {
-                                        'cell-hover': col.mergeCells && hoverMergedCells.has(cellKeyGen(row, col)),
-                                        '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.__EXP__ ? colKeyGen(row.__EXP__) === colKeyGen(col) : false),
-                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXP__,
-                                        'drag-row-cell': col.type === 'dragRow',
-                                    },
-                                ]"
-                                v-bind="mergeCellsWrapper(row, col, rowIndex, colIndex)"
+                                v-bind="{
+                                    ...getTDProps(row, col),
+                                    ...mergeCellsWrapper(row, col, rowIndex, colIndex),
+                                }"
                                 @click="onCellClick($event, row, col, getRowIndex(rowIndex))"
                                 @mousedown="onCellMouseDown($event, row, col, getRowIndex(rowIndex))"
                                 @mouseenter="onCellMouseEnter($event, row, col)"
@@ -376,7 +364,7 @@ const props = withDefaults(
          * "v" - 仅展示竖线
          * "body-v" - 仅表体展示竖线
          */
-        bordered?: boolean | 'h' | 'v' | 'body-v';
+        bordered?: boolean | 'h' | 'v' | 'body-v' | 'body-h';
         /**
          * 自动重新计算虚拟滚动高度宽度。默认true
          * [非响应式]
@@ -1105,6 +1093,47 @@ function getHeaderTitle(col: StkTableColumn<DT>): string {
     return col.title || '';
 }
 
+function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<PrivateRowDT>) {
+    const colKey = colKeyGen.value(col);
+    if (!row) {
+        return {
+            style: cellStyleMap.value[TagType.TD].get(colKey),
+        };
+    }
+
+    const cellKey = cellKeyGen(row, col);
+
+    const classList = [col.className, fixedColClassMap.value.get(colKeyGen.value(col))];
+    if (col.mergeCells) {
+        if (hoverMergedCells.value.has(cellKey)) {
+            classList.push('cell-hover');
+        }
+        if (activeMergedCells.value.has(cellKey)) {
+            classList.push('cell-active');
+        }
+    }
+
+    if (props.cellActive && currentSelectedCellKey.value === cellKey) {
+        classList.push('active');
+    }
+
+    if (col.type === 'seq') {
+        classList.push('seq-column');
+    } else if (col.type === 'expand' && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKeyGen.value(col) : false)) {
+        classList.push('expanded');
+    } else if (col.type === 'tree-node' && row.__T_EXP__) {
+        classList.push('tree-expanded');
+    } else if (col.type === 'dragRow') {
+        classList.push('drag-row-cell');
+    }
+
+    return {
+        'data-cell-key': cellKey,
+        style: cellStyleMap.value[TagType.TD].get(colKey),
+        class: classList,
+    };
+}
+
 /**
  * 表头点击排序
  * @param click 是否为点击表头触发

package/src/StkTable/const.ts

@@ -44,7 +44,7 @@ export const DEFAULT_SORT_CONFIG = {
 } satisfies SortConfig<any>;
 
 export const DEFAULT_ROW_ACTIVE_CONFIG: Required<RowActiveOption<any>> = {
-    enabled: false,
+    enabled: true,
     disabled: () => false,
-    revokable: false,
+    revokable: true,
 };

package/src/StkTable/useMergeCells.ts

@@ -35,20 +35,25 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
     /**
      * abstract the logic of hiding cells
      */
-    function hideCells(rowKey: UniqKey, startIndex: number, count: number, isSelfRow = false, mergeCellKey: string) {
-        for (let i = startIndex; i < startIndex + count; i++) {
-            if (!isSelfRow || i !== startIndex) {
-                // self row does not need to be hidden
-                const nextCol = tableHeaderLast.value[i];
-                if (!nextCol) break;
-                const nextColKey = colKeyGen.value(nextCol);
-                if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
-                hiddenCellMap.value[rowKey].add(nextColKey);
+    function hideCells(rowKey: UniqKey, colKey: UniqKey, colspan: number, isSelfRow = false, mergeCellKey: string) {
+        const startIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
+
+        for (let i = startIndex; i < startIndex + colspan; i++) {
+            if(!isSelfRow) {
+                // if other row hovered, the rowspan cell need to be highlight
+                if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
+                hoverRowMap.value[rowKey].add(mergeCellKey);
             }
+            if (isSelfRow && i === startIndex) {
+                // self row start cell does not need to be hidden
+                continue;
+            }
+            const nextCol = tableHeaderLast.value[i];
+            if (!nextCol) break;
+            const nextColKey = colKeyGen.value(nextCol);
+            if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
+            hiddenCellMap.value[rowKey].add(nextColKey);
 
-            // if other row hovered, the rowspan cell need to be highlight
-            if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
-            hoverRowMap.value[rowKey].add(mergeCellKey);
         }
     }
 
@@ -78,25 +83,24 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
 
         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;
 
+        const colKey = colKeyGen.value(col);
+        const mergedCellKey = pureCellKeyGen(rowKey, colKey);
+
         for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
             const row = virtual_dataSourcePart.value[i];
             if (!row) break;
-            hideCells(rowKeyGen(row), curColIndex, colspan, i === curRowIndex, mergedCellKey);
+            hideCells(rowKeyGen(row), colKey, colspan, i === curRowIndex, mergedCellKey);
         }
 
         return { colspan, rowspan };
     }
 
+    const emptySet = new Set<string>();
     function updateHoverMergedCells(rowKey: UniqKey | undefined) {
-        const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
-        hoverMergedCells.value = set || new Set();
+        hoverMergedCells.value = rowKey === void 0 ? emptySet : hoverRowMap.value[rowKey] || emptySet;
     }
 
     function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {