stk-table-vue 0.6.12 → 0.6.14

package/lib/stk-table-vue.js

@@ -1061,7 +1061,7 @@ function useVirtualScroll({
   const virtualScroll = ref({
     containerHeight: 0,
     rowHeight: props.rowHeight,
-    pageSize: 10,
+    pageSize: 0,
     startIndex: 0,
     endIndex: 0,
     offsetTop: 0,
@@ -1080,7 +1080,7 @@ function useVirtualScroll({
     return tableHeaderLast.value.some((col) => col.type === "expand");
   });
   const virtual_on = computed(() => {
-    return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
+    return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize;
   });
   const virtual_dataSourcePart = computed(() => {
     if (!virtual_on.value) return dataSourceCopy.value;
@@ -1089,7 +1089,8 @@ function useVirtualScroll({
   });
   const virtual_offsetBottom = computed(() => {
     if (!virtual_on.value) return 0;
-    const { startIndex, rowHeight } = virtualScroll.value;
+    const { startIndex } = virtualScroll.value;
+    const rowHeight = getRowHeightFn.value();
     return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
   });
   const virtualX_on = computed(() => {
@@ -1126,9 +1127,22 @@ function useVirtualScroll({
     }
     return width;
   });
+  const getRowHeightFn = computed(() => {
+    var _a;
+    let rowHeightFn = () => props.rowHeight || DEFAULT_ROW_HEIGHT;
+    if (props.autoRowHeight) {
+      const tempRowHeightFn = rowHeightFn;
+      rowHeightFn = (row) => getAutoRowHeight(row) || tempRowHeightFn(row);
+    }
+    if (hasExpandCol.value) {
+      const expandedRowHeight = (_a = props.expandConfig) == null ? void 0 : _a.height;
+      const tempRowHeightFn = rowHeightFn;
+      rowHeightFn = (row) => row && row.__EXPANDED_ROW__ && expandedRowHeight || tempRowHeightFn(row);
+    }
+    return rowHeightFn;
+  });
   function getTableHeaderHeight() {
-    const { headerRowHeight } = props;
-    return headerRowHeight * tableHeaders.value.length;
+    return props.headerRowHeight * tableHeaders.value.length;
   }
   function initVirtualScroll(height) {
     initVirtualScrollY(height);
@@ -1140,10 +1154,9 @@ function useVirtualScroll({
       console.warn("initVirtualScrollY: height must be a number");
       height = 0;
     }
-    if (!virtual_on.value) return;
     const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
     let scrollTop = ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
-    const { rowHeight } = virtualScroll.value;
+    const rowHeight = getRowHeightFn.value(props.dataSource[0]);
     const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
     const { headless } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -1180,7 +1193,8 @@ function useVirtualScroll({
   }
   function getAutoRowHeight(row) {
     var _a;
-    const rowKey = String(rowKeyGen(row));
+    if (!row) return;
+    const rowKey = rowKeyGen(row);
     const storedHeight = autoRowHeightMap.get(rowKey);
     if (storedHeight) {
       return storedHeight;
@@ -1193,32 +1207,19 @@ function useVirtualScroll({
         return expectedHeight;
       }
     }
-    return props.rowHeight || DEFAULT_ROW_HEIGHT;
-  }
-  function createGetRowHeightFn() {
-    var _a;
-    if (props.autoRowHeight) {
-      return (row) => getAutoRowHeight(row);
-    }
-    if (hasExpandCol.value) {
-      const { rowHeight } = virtualScroll.value;
-      const expandedRowHeight = ((_a = props.expandConfig) == null ? void 0 : _a.height) || rowHeight;
-      return (row) => row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight;
-    }
-    return () => props.rowHeight || DEFAULT_ROW_HEIGHT;
   }
   function updateVirtualScrollY(sTop = 0) {
     var _a;
-    const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
+    const { pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
     virtualScroll.value.scrollTop = sTop;
     if (!virtual_on.value) {
       return;
     }
     const dataSourceCopyTemp = dataSourceCopy.value;
+    const rowHeight = getRowHeightFn.value(dataSourceCopyTemp[0]);
     const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
     let startIndex = 0;
     let autoRowHeightTop = 0;
-    let getRowHeight = null;
     const dataLength = dataSourceCopyTemp.length;
     if (autoRowHeight || hasExpandCol.value) {
       if (autoRowHeight) {
@@ -1228,9 +1229,8 @@ function useVirtualScroll({
           autoRowHeightMap.set(rowKey, tr.offsetHeight);
         });
       }
-      getRowHeight = createGetRowHeightFn();
       for (let i = 0; i < dataLength; i++) {
-        const height = getRowHeight(dataSourceCopyTemp[i]);
+        const height = getRowHeightFn.value(dataSourceCopyTemp[i]);
         autoRowHeightTop += height;
         if (autoRowHeightTop >= sTop) {
           startIndex = i;
@@ -1245,7 +1245,7 @@ function useVirtualScroll({
     if (stripe && startIndex > 0 && startIndex % 2) {
       startIndex -= 1;
       if (autoRowHeight || hasExpandCol.value) {
-        const height = getRowHeight(dataSourceCopyTemp[startIndex]);
+        const height = getRowHeightFn.value(dataSourceCopyTemp[startIndex]);
         autoRowHeightTop -= height;
       }
     }
@@ -1698,6 +1698,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         [TagType.TD]: tdMap
       };
     });
+    function getRowIndex(rowIndex) {
+      return rowIndex + (virtual_on ? virtualScroll.value.startIndex : 0);
+    }
     function getHeaderTitle(col) {
       const colKey = colKeyGen.value(col);
       if (props.hideHeaderTitle === true || Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(colKey)) {
@@ -1758,8 +1761,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emits("sort-change", col, order, toRaw(dataSourceCopy.value), sortConfig);
       }
     }
-    function onRowClick(e, row) {
-      emits("row-click", e, row);
+    function onRowClick(e, row, rowIndex) {
+      emits("row-click", e, row, { rowIndex });
       const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
       if (isCurrentRow) {
         if (!props.rowCurrentRevokable) {
@@ -1773,22 +1776,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       emits("current-change", e, row, { select: !isCurrentRow });
     }
-    function onRowDblclick(e, row) {
-      emits("row-dblclick", e, row);
+    function onRowDblclick(e, row, rowIndex) {
+      emits("row-dblclick", e, row, { rowIndex });
     }
     function onHeaderMenu(e) {
       emits("header-row-menu", e);
     }
-    function onRowMenu(e, row) {
-      emits("row-menu", e, row);
+    function onRowMenu(e, row, rowIndex) {
+      emits("row-menu", e, row, { rowIndex });
     }
-    function onCellClick(e, row, col) {
+    function onCellClick(e, row, col, rowIndex) {
       if (col.type === "expand") {
         toggleExpandRow(row, col);
       }
       if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
-        const result = { row, col, select: false };
+        const result = { row, col, select: false, rowIndex };
         if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
           currentSelectedCellKey.value = void 0;
         } else {
@@ -1797,7 +1800,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         emits("cell-selected", e, result);
       }
-      emits("cell-click", e, row, col);
+      emits("cell-click", e, row, col, { rowIndex });
     }
     function onHeaderCellClick(e, col) {
       emits("header-cell-click", e, col);
@@ -1811,8 +1814,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onCellMouseOver(e, row, col) {
       emits("cell-mouseover", e, row, col);
     }
-    function onCellMouseDown(e, row, col) {
-      emits("cell-mousedown", e, row, col);
+    function onCellMouseDown(e, row, col, rowIndex) {
+      emits("cell-mousedown", e, row, col, { rowIndex });
     }
     function onTableWheel(e) {
       if (props.smoothScroll) {
@@ -2262,27 +2265,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
               var _a, _b;
               return openBlock(), createElementBlock("tr", {
-                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex),
+                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)),
                 ref_for: true,
                 ref_key: "trRef",
                 ref: trRef,
-                key: _ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
-                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
+                key: _ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
+                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
                 class: normalizeClass({
                   active: _ctx.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
                   hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
-                  [_ctx.rowClassName(row, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)]: true,
+                  [_ctx.rowClassName(row, getRowIndex(rowIndex))]: true,
                   expanded: row == null ? void 0 : row.__EXPANDED__,
                   "expanded-row": row && row.__EXPANDED_ROW__
                 }),
                 style: normalizeStyle({
                   "--row-height": row && row.__EXPANDED_ROW__ && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
                 }),
-                onClick: (e) => onRowClick(e, row),
-                onDblclick: (e) => onRowDblclick(e, row),
-                onContextmenu: (e) => onRowMenu(e, row),
+                onClick: (e) => onRowClick(e, row, getRowIndex(rowIndex)),
+                onDblclick: (e) => onRowDblclick(e, row, getRowIndex(rowIndex)),
+                onContextmenu: (e) => onRowMenu(e, row, getRowIndex(rowIndex)),
                 onMouseover: (e) => onTrMouseOver(e, row),
-                onDrop: (e) => unref(onTrDrop)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
+                onDrop: (e) => unref(onTrDrop)(e, getRowIndex(rowIndex))
               }, [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
                 row && row.__EXPANDED_ROW__ ? (openBlock(), createElementBlock("td", {
@@ -2312,12 +2315,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         "seq-column": col.type === "seq",
                         active: currentSelectedCellKey.value === cellKeyGen(row, col),
                         "expand-cell": col.type === "expand",
-                        expanded: col.type === "expand" && colKeyGen.value(row == null ? void 0 : row.__EXPANDED__) === colKeyGen.value(col),
+                        expanded: col.type === "expand" && (row.__EXPANDED__ ? colKeyGen.value(row.__EXPANDED__) === colKeyGen.value(col) : false),
                         "drag-row-cell": col.type === "dragRow"
                       }
                     ]),
-                    onClick: (e) => onCellClick(e, row, col),
-                    onMousedown: (e) => onCellMouseDown(e, row, col),
+                    onClick: (e) => onCellClick(e, row, col, getRowIndex(rowIndex)),
+                    onMousedown: (e) => onCellMouseDown(e, row, col, getRowIndex(rowIndex)),
                     onMouseenter: (e) => onCellMouseEnter(e, row, col),
                     onMouseleave: (e) => onCellMouseLeave(e, row, col),
                     onMouseover: (e) => onCellMouseOver(e, row, col)
@@ -2327,20 +2330,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "table-cell-wrapper",
                       col,
                       row,
-                      rowIndex: (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex,
+                      rowIndex: getRowIndex(rowIndex),
                       colIndex,
-                      cellValue: row == null ? void 0 : row[col.dataIndex],
-                      expanded: (row == null ? void 0 : row.__EXPANDED__) || null
+                      cellValue: row && row[col.dataIndex],
+                      expanded: row && row.__EXPANDED__ || null
                     }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded"])) : (openBlock(), createElementBlock("div", {
                       key: 1,
                       class: normalizeClass(["table-cell-wrapper", { "expanded-cell-wrapper": col.type === "expand" }]),
                       title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
                     }, [
                       col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex + 1), 1)
+                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
                       ], 64)) : col.type === "expand" ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                         createVNode(DragHandle, {
-                          onDragstart: (e) => unref(onTrDragStart)(e, (unref(virtual_on) ? unref(virtualScroll).startIndex : 0) + rowIndex)
+                          onDragstart: (e) => unref(onTrDragStart)(e, getRowIndex(rowIndex))
                         }, null, 8, ["onDragstart"]),
                         createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
                       ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [

package/package.json

@@ -1,75 +1,76 @@
-{
-  "name": "stk-table-vue",
-  "version": "0.6.12",
-  "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@10.7.0",
-  "directories": {
-    "test": "test"
-  },
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "test": "vitest",
-    "docs:dev": "vitepress dev docs-src",
-    "docs:build": "vitepress build docs-src",
-    "docs:preview": "vitepress preview docs-src",
-    "docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs"
-  },
-  "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/mockjs": "^1.0.10",
-    "@types/node": "^20.12.10",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
-    "@vitejs/plugin-vue": "^5.1.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",
-    "mitt": "^3.0.1",
-    "mockjs": "^1.1.0",
-    "postcss": "^8.4.47",
-    "postcss-discard-comments": "^6.0.2",
-    "postcss-preset-env": "^9.5.11",
-    "prettier": "^3.2.5",
-    "typescript": "^5.4.5",
-    "vite": "^5.4.10",
-    "vite-plugin-dts": "3.9.1",
-    "vitepress": "^1.5.0",
-    "vitepress-demo-plugin": "^1.3.1",
-    "vitest": "^2.1.3",
-    "vue": "^3.5.12",
-    "vue-eslint-parser": "^9.4.2"
-  },
-  "dependencies": {
-    "d3-interpolate": "^3.0.1"
-  }
+{
+  "name": "stk-table-vue",
+  "version": "0.6.14",
+  "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@10.7.0",
+  "directories": {
+    "test": "test"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest",
+    "docs:dev": "vitepress dev docs-src",
+    "docs:build": "vitepress build docs-src",
+    "docs:preview": "vitepress preview docs-src",
+    "docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs"
+  },
+  "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/mockjs": "^1.0.10",
+    "@types/node": "^20.12.10",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
+    "@vitejs/plugin-vue": "^5.1.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",
+    "mitt": "^3.0.1",
+    "mockjs": "^1.1.0",
+    "postcss": "^8.4.47",
+    "postcss-discard-comments": "^6.0.2",
+    "postcss-preset-env": "^9.5.11",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "3.9.1",
+    "vitepress": "^1.5.0",
+    "vitepress-demo-plugin": "^1.3.1",
+    "vitepress-plugin-llms": "^1.1.3",
+    "vitest": "^2.1.3",
+    "vue": "^3.5.12",
+    "vue-eslint-parser": "^9.4.2"
+  },
+  "dependencies": {
+    "d3-interpolate": "^3.0.1"
+  }
 }