stk-table-vue 0.2.3 → 0.2.6

package/lib/stk-table-vue.js

@@ -70,23 +70,35 @@ function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs })
     }, debounceMs);
   }
 }
-function insertToOrderedArray(sortState, newItem, targetArray) {
+function isEmptyValue(val, isNumber) {
+  let isEmpty = val === null || val === "";
+  if (isNumber) {
+    isEmpty || (isEmpty = typeof val === "boolean" || Number.isNaN(+val));
+  }
+  return isEmpty;
+}
+function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {}) {
   const { dataIndex, order } = sortState;
+  sortConfig = { emptyToBottom: false, ...sortConfig };
   let { sortType } = sortState;
   if (!sortType)
     sortType = typeof newItem[dataIndex];
+  const isNumber = sortType === "number";
   const data = [...targetArray];
   if (!order) {
     data.unshift(newItem);
     return data;
   }
+  if (sortConfig.emptyToBottom && isEmptyValue(data)) {
+    data.push(newItem);
+  }
   let sIndex = 0;
   let eIndex = data.length - 1;
   const targetVal = newItem[dataIndex];
   while (sIndex <= eIndex) {
     const midIndex = Math.floor((sIndex + eIndex) / 2);
     const midVal = data[midIndex][dataIndex];
-    const compareRes = strCompare(midVal, targetVal, sortType);
+    const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
     if (compareRes === 0) {
       sIndex = midIndex;
       break;
@@ -105,17 +117,21 @@ function insertToOrderedArray(sortState, newItem, targetArray) {
   data.splice(sIndex, 0, newItem);
   return data;
 }
-function strCompare(a, b, type) {
-  if (type === "number") {
-    if (+a > +b)
-      return 1;
-    else if (+a === +b)
-      return 0;
-    else
-      return -1;
-  } else {
+function strCompare(a, b, isNumber, localeCompare = false) {
+  let _a = a;
+  let _b = b;
+  if (isNumber) {
+    _a = +a;
+    _b = +b;
+  } else if (localeCompare) {
     return String(a).localeCompare(b);
   }
+  if (_a > _b)
+    return 1;
+  else if (_a === _b)
+    return 0;
+  else
+    return -1;
 }
 function separatedData(sortOption, targetDataSource, isNumber) {
   const emptyArr = [];
@@ -123,10 +139,7 @@ function separatedData(sortOption, targetDataSource, isNumber) {
   for (let i = 0; i < targetDataSource.length; i++) {
     const row = targetDataSource[i];
     const sortField = sortOption.sortField || sortOption.dataIndex;
-    let isEmpty = row[sortField] === null || row[sortField] === "";
-    if (isNumber) {
-      isEmpty || (isEmpty = typeof row[sortField] === "boolean" || Number.isNaN(+row[sortField]));
-    }
+    const isEmpty = isEmptyValue(row[sortField], isNumber);
     if (isEmpty) {
       emptyArr.push(row);
     } else {
@@ -154,25 +167,16 @@ function tableSort(sortOption, order, dataSource, sortConfig = {}) {
     if (!sortType)
       sortType = typeof dataSource[0][sortField];
     const [valueArr, emptyArr] = separatedData(sortOption, targetDataSource, sortType === "number");
-    if (sortType === "number") {
-      if (order === "asc") {
-        valueArr.sort((a, b) => +a[sortField] - +b[sortField]);
-        targetDataSource = [...emptyArr, ...valueArr];
-      } else {
-        valueArr.sort((a, b) => +b[sortField] - +a[sortField]);
-        targetDataSource = [...valueArr, ...emptyArr];
-      }
+    const isNumber = sortType === "number";
+    if (order === "asc") {
+      valueArr.sort((a, b) => strCompare(a[sortField], b[sortField], isNumber, sortConfig.stringLocaleCompare));
     } else {
-      if (order === "asc") {
-        valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
-        targetDataSource = [...emptyArr, ...valueArr];
-      } else {
-        valueArr.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
-        targetDataSource = [...valueArr, ...emptyArr];
-      }
+      valueArr.sort((a, b) => strCompare(b[sortField], a[sortField], isNumber, sortConfig.stringLocaleCompare));
     }
-    if (sortConfig.emptyToBottom) {
+    if (order === "desc" || sortConfig.emptyToBottom) {
       targetDataSource = [...valueArr, ...emptyArr];
+    } else {
+      targetDataSource = [...emptyArr, ...valueArr];
     }
   }
   return targetDataSource;
@@ -188,10 +192,18 @@ function howDeepTheHeader(arr, level = 1) {
   return Math.max(...levels);
 }
 function getColWidth(col) {
-  if (typeof (col == null ? void 0 : col.width) === "number") {
-    return Math.floor(col.width ?? Default_Col_Width);
+  const val = (col == null ? void 0 : col.width) ?? Default_Col_Width;
+  if (typeof val === "number") {
+    return Math.floor(val);
+  }
+  return parseInt(val);
+}
+function getColWidthStr(col, key = "width") {
+  const val = col == null ? void 0 : col[key];
+  if (typeof val === "number") {
+    return val + "px";
   }
-  return parseInt((col == null ? void 0 : col.width) ?? Default_Col_Width);
+  return val;
 }
 function useColResize({
   tableContainer,
@@ -371,36 +383,54 @@ function useFixedCol({ props, tableHeaderLast, tableContainer }) {
     updateFixedShadow
   };
 }
-function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }) {
+function useFixedStyle({
+  props,
+  tableHeaders,
+  virtualScroll,
+  virtualScrollX,
+  virtualX_on,
+  virtualX_offsetRight
+}) {
   const fixedColumnsPositionStore = computed(() => {
-    const store = {};
-    const cols = [...tableHeaderLast.value];
-    let left = 0;
-    let rightStartIndex = 0;
-    for (let i = 0; i < cols.length; i++) {
-      const item = cols[i];
-      if (item.fixed === "left") {
-        store[item.dataIndex] = left;
-        left += getColWidth(item);
-      }
-      if (!rightStartIndex && item.fixed === "right") {
-        rightStartIndex = i;
+    const colKeyStore = {};
+    const refStore = /* @__PURE__ */ new WeakMap();
+    tableHeaders.value.forEach((cols) => {
+      let left = 0;
+      let rightStartIndex = 0;
+      for (let i = 0; i < cols.length; i++) {
+        const item = cols[i];
+        if (item.fixed === "left") {
+          if (item.dataIndex) {
+            colKeyStore[item.dataIndex] = left;
+          } else {
+            refStore.set(item, left);
+          }
+          left += getColWidth(item);
+        }
+        if (!rightStartIndex && item.fixed === "right") {
+          rightStartIndex = i;
+        }
       }
-    }
-    let right = 0;
-    for (let i = cols.length - 1; i >= rightStartIndex; i--) {
-      const item = cols[i];
-      if (item.fixed === "right") {
-        store[item.dataIndex] = right;
-        right += getColWidth(item);
+      let right = 0;
+      for (let i = cols.length - 1; i >= rightStartIndex; i--) {
+        const item = cols[i];
+        if (item.fixed === "right") {
+          if (item.dataIndex) {
+            colKeyStore[item.dataIndex] = right;
+          } else {
+            refStore.set(item, right);
+          }
+          right += getColWidth(item);
+        }
       }
-    }
-    return store;
+    });
+    return { refStore, colKeyStore };
   });
   function getFixedStyle(tagType, col, depth = 0) {
-    const { fixed, dataIndex } = col;
+    const { fixed } = col;
     const isFixedLeft = fixed === "left";
     const style = {};
+    const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
     if (Is_Legacy_Mode) {
       style.position = "relative";
     } else {
@@ -427,10 +457,11 @@ function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX,
           style.right = `${virtualX_offsetRight.value}px`;
         }
       } else {
+        const lr = (col.dataIndex ? colKeyStore[col.dataIndex] : refStore.get(col)) + "px";
         if (isFixedLeft) {
-          style.left = fixedColumnsPositionStore.value[dataIndex] + "px";
+          style.left = lr;
         } else {
-          style.right = fixedColumnsPositionStore.value[dataIndex] + "px";
+          style.right = lr;
         }
       }
     }
@@ -444,9 +475,9 @@ const HIGHLIGHT_ROW_CLASS = "highlight-row";
 const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 function useHighlight({ props, tableContainer }) {
   const highlightRowStore = ref({});
-  const highlightFrom = Highlight_Color[props.theme].from;
-  const highlightTo = Highlight_Color[props.theme].to;
-  const highlightInter = computed(() => interpolateRgb(highlightFrom, highlightTo));
+  const highlightFrom = computed(() => Highlight_Color[props.theme].from);
+  const highlightTo = computed(() => Highlight_Color[props.theme].to);
+  const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
   const highlightDimRowKeys = /* @__PURE__ */ new Set();
   const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
   const highlightDimCellsTimeout = /* @__PURE__ */ new Map();
@@ -468,6 +499,7 @@ function useHighlight({ props, tableContainer }) {
             highlightDimRowKeys.delete(rowKeyValue);
           }
         });
+        highlightRowStore.value = { ...highlightRowStore.value };
         if (highlightDimRowKeys.size > 0) {
           recursion();
         } else {
@@ -569,10 +601,11 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     if (!isMouseOver)
       return;
     e.preventDefault();
-    const { scrollTop, rowHeight, pageSize } = virtualScroll.value;
+    const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
     const { scrollLeft } = virtualScrollX.value;
     const { headless, headerRowHeight } = props;
     const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+    const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
     if (e.code === SCROLL_CODES[0]) {
       scrollTo(scrollTop - rowHeight, null);
     } else if (e.code === SCROLL_CODES[1]) {
@@ -582,9 +615,9 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     } else if (e.code === SCROLL_CODES[3]) {
       scrollTo(null, scrollLeft - rowHeight);
     } else if (e.code === SCROLL_CODES[4]) {
-      scrollTo(scrollTop - rowHeight * pageSize - headerHeight, null);
+      scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
     } else if (e.code === SCROLL_CODES[5]) {
-      scrollTo(scrollTop + rowHeight * pageSize - headerHeight, null);
+      scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
     }
   }
   function handleMouseEnter() {
@@ -650,7 +683,13 @@ function useThDrag({ props, emits }) {
   };
 }
 const VUE2_SCROLL_TIMEOUT_MS = 200;
-function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLast }) {
+function useVirtualScroll({
+  props,
+  tableContainer,
+  dataSourceCopy,
+  tableHeaderLast,
+  tableHeaders
+}) {
   const virtualScroll = ref({
     containerHeight: 0,
     rowHeight: props.rowHeight,
@@ -728,11 +767,13 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
     } else {
       containerHeight = offsetHeight || Default_Table_Height;
     }
-    Object.assign(virtualScroll.value, {
-      containerHeight,
-      pageSize: Math.ceil(containerHeight / rowHeight) + 1
-      // 这里最终+1，因为headless=true无头时，需要上下各预渲染一行。
-    });
+    const { headless, headerRowHeight } = props;
+    let pageSize = Math.ceil(containerHeight / rowHeight);
+    if (!headless) {
+      const headerToBodyRowHeightCount = Math.floor(tableHeaders.value.length * (headerRowHeight || rowHeight) / rowHeight);
+      pageSize -= headerToBodyRowHeightCount;
+    }
+    Object.assign(virtualScroll.value, { containerHeight, pageSize });
     updateVirtualScrollY(scrollTop);
   }
   function initVirtualScrollX() {
@@ -749,9 +790,27 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
   let vue2ScrollYTimeout = null;
   function updateVirtualScrollY(sTop = 0) {
     const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
-    const startIndex = Math.floor(sTop / rowHeight);
-    const offsetTop = startIndex * rowHeight;
+    virtualScroll.value.scrollTop = sTop;
+    let startIndex = Math.floor(sTop / rowHeight);
+    if (props.stripe) {
+      startIndex -= 1;
+    }
+    if (startIndex < 0) {
+      startIndex = 0;
+    }
+    if (props.stripe && startIndex !== 0) {
+      const scrollRows = Math.abs(oldStartIndex - startIndex);
+      if (scrollRows < 2) {
+        return;
+      } else if (scrollRows % 2) {
+        startIndex -= 1;
+      }
+    }
     let endIndex = startIndex + pageSize;
+    if (props.stripe) {
+      endIndex += 2;
+    }
+    const offsetTop = startIndex * rowHeight;
     if (endIndex > dataSourceCopy.value.length) {
       endIndex = dataSourceCopy.value.length;
     }
@@ -761,12 +820,11 @@ function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLa
     if (!props.optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
       Object.assign(virtualScroll.value, {
         startIndex,
-        offsetTop,
         endIndex,
-        scrollTop: sTop
+        offsetTop
       });
     } else {
-      Object.assign(virtualScroll.value, { endIndex, scrollTop: sTop });
+      virtualScroll.value.endIndex = endIndex;
       vue2ScrollYTimeout = window.setTimeout(() => {
         Object.assign(virtualScroll.value, { startIndex, offsetTop });
       }, VUE2_SCROLL_TIMEOUT_MS);
@@ -897,7 +955,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dataSource: { default: () => [] },
     rowKey: { type: [String, Number, Function], default: "" },
     colKey: { type: [String, Number, Function], default: "dataIndex" },
-    emptyCellText: { default: "--" },
+    emptyCellText: { type: [String, Function], default: "--" },
     noDataFull: { type: Boolean, default: false },
     showNoData: { type: Boolean, default: true },
     sortRemote: { type: Boolean, default: false },
@@ -913,8 +971,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     fixedColShadow: { type: Boolean, default: false },
     optimizeVue2Scroll: { type: Boolean, default: false },
     sortConfig: { default: () => ({
-      emptyToBottom: false
-    }) }
+      emptyToBottom: false,
+      stringLocaleCompare: true
+    }) },
+    hideHeaderTitle: { type: [Boolean, Array], default: false }
   },
   emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -931,6 +991,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableHeaders = ref([]);
     const tableHeaderLast = ref([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
+    const getEmptyCellText = computed(() => {
+      if (typeof props.emptyCellText === "string") {
+        return () => props.emptyCellText;
+      } else {
+        return (col, row) => props.emptyCellText({ row, col });
+      }
+    });
     const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
     const { isColResizing, onThResizeMouseDown } = useColResize({
       props,
@@ -955,10 +1022,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       initVirtualScrollX,
       updateVirtualScrollY,
       updateVirtualScrollX
-    } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
+    } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast, tableHeaders });
     const { getFixedStyle } = useFixedStyle({
       props,
-      tableHeaderLast,
+      tableHeaders,
       virtualScroll,
       virtualScrollX,
       virtualX_on,
@@ -1021,8 +1088,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function dealDefaultSorter() {
       if (!props.sortConfig.defaultSort)
         return;
-      const { dataIndex, order } = props.sortConfig.defaultSort;
-      setSorter(dataIndex, order);
+      const { dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+      setSorter(dataIndex, order, { force: false, silent });
     }
     function dealColumns() {
       tableHeaders.value = [];
@@ -1038,17 +1105,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           tableHeaders.value[depth] = [];
         }
         let allChildrenLen = 0;
+        let allChildrenWidthSum = 0;
         arr.forEach((col) => {
           col.__PARENT__ = parent;
           let colChildrenLen = 1;
+          let colWidth = 0;
           if (col.children) {
-            colChildrenLen = flat(
+            const [len, widthSum] = flat(
               col.children,
               col,
               depth + 1
               /* , col.fixed */
             );
+            colChildrenLen = len;
+            colWidth = widthSum;
           } else {
+            colWidth = getColWidth(col);
             tempHeaderLast.push(col);
           }
           tableHeaders.value[depth].push(col);
@@ -1060,9 +1132,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (colSpan !== 1) {
             col.colSpan = colSpan;
           }
+          if (!props.fixedMode && col.width === void 0) {
+            col.width = colWidth + "px";
+          }
           allChildrenLen += colChildrenLen;
+          allChildrenWidthSum += colWidth;
         });
-        return allChildrenLen;
+        return [allChildrenLen, allChildrenWidthSum];
       }
       flat(copyColumn, null);
       tableHeaderLast.value = tempHeaderLast;
@@ -1082,17 +1158,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return typeof props.colKey === "function" ? props.colKey(col) : col[props.colKey];
     }
     function getColWidthStyle(col) {
+      const width = getColWidthStr(col);
+      const minWidth = getColWidthStr(col, "minWidth");
+      const maxWidth = getColWidthStr(col, "maxWidth");
       const style = {
-        width: col.width,
-        minWidth: col.minWidth,
-        maxWidth: col.maxWidth
+        width,
+        minWidth: minWidth ?? width,
+        maxWidth: maxWidth ?? width
       };
       if (props.colResizable) {
-        style.minWidth = col.width;
-        style.maxWidth = col.width;
-      } else {
-        style.minWidth = col.minWidth === void 0 ? col.width : col.minWidth;
-        style.maxWidth = col.maxWidth === void 0 ? col.width : col.maxWidth;
+        style.minWidth = width;
+        style.maxWidth = width;
       }
       return style;
     }
@@ -1108,6 +1184,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return style;
     }
+    function getHeaderTitle(col) {
+      if (props.hideHeaderTitle === true || Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(col.dataIndex)) {
+        return "";
+      }
+      return col.title || "";
+    }
     function onColumnSort(col, click = true, options = {}) {
       if (!(col == null ? void 0 : col.sorter))
         return;
@@ -1214,7 +1296,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
         const column = newOption.sortOption || tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
         if (column)
-          onColumnSort(column, false, { force: true, emit: !newOption.silent });
+          onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else
           console.warn("Can not find column by dataIndex:", sortCol.value);
       }
@@ -1329,7 +1411,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
                     colspan: col.colSpan,
                     style: normalizeStyle(getCellStyle(1, col, rowIndex)),
-                    title: col.title,
+                    title: getHeaderTitle(col),
                     class: normalizeClass([
                       col.sorter ? "sortable" : "",
                       col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
@@ -1433,7 +1515,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       key: 1,
                       class: "table-cell-wrapper",
                       title: row[col.dataIndex]
-                    }, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))
+                    }, toDisplayString(row[col.dataIndex] ?? getEmptyCellText.value(col, row)), 9, _hoisted_14))
                   ], 14, _hoisted_13);
                 }), 128))
               ], 46, _hoisted_11);

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "stk-table-vue",
-    "version": "0.2.3",
+    "version": "0.2.6",
     "description": "Simple realtime virtual table for vue3&vue2.7",
     "main": "./lib/stk-table-vue.js",
-    "types": "./lib/StkTable/index.d.ts",
+    "types": "./lib/src/StkTable/index.d.ts",
     "packageManager": "pnpm@8.14.3",
     "directories": {
         "test": "test"
@@ -49,10 +49,10 @@
         "postcss-preset-env": "^9.3.0",
         "prettier": "^3.1.1",
         "typescript": "^5.3.3",
-        "vite": "^5.0.12",
-        "vite-plugin-dts": "^3.6.4",
+        "vite": "^5.1.4",
+        "vite-plugin-dts": "^3.7.3",
         "vitest": "^1.1.0",
-        "vue": "^3.3.9",
+        "vue": "^3.4.19",
         "vue-eslint-parser": "^9.3.2"
     },
     "dependencies": {