stk-table-vue 0.3.1 → 0.3.3

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
+import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, nextTick, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 const DEFAULT_COL_WIDTH = "100";
 const DEFAULT_TABLE_HEIGHT = 100;
@@ -81,7 +81,7 @@ function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs
 function isEmptyValue(val, isNumber) {
   let isEmpty = val === null || val === "";
   if (isNumber) {
-    isEmpty || (isEmpty = typeof val === "boolean" || Number.isNaN(+val));
+    isEmpty = isEmpty || typeof val === "boolean" || Number.isNaN(+val);
   }
   return isEmpty;
 }
@@ -260,7 +260,7 @@ function useColResize({
     const { clientX } = e;
     const { scrollLeft, scrollTop } = tableContainerRef.value;
     const { left } = tableContainerRef.value.getBoundingClientRect();
-    let colIndex = tableHeaderLast.value.findIndex((it) => colKeyGen(it) === colKeyGen(col));
+    let colIndex = tableHeaderLast.value.findIndex((it) => colKeyGen.value(it) === colKeyGen.value(col));
     if (isPrev) {
       colIndex -= 1;
       col = tableHeaderLast.value[colIndex];
@@ -307,7 +307,7 @@ function useColResize({
     let width = getCalculatedColWidth(lastCol) + moveX;
     if (width < props.colMinWidth)
       width = props.colMinWidth;
-    const curCol = tableHeaderLast.value.find((it) => colKeyGen(it) === colKeyGen(lastCol));
+    const curCol = tableHeaderLast.value.find((it) => colKeyGen.value(it) === colKeyGen.value(lastCol));
     if (!curCol)
       return;
     curCol.width = width + "px";
@@ -359,7 +359,7 @@ function useFixedCol({ props, colKeyGen, tableHeaders, tableHeaderLast, tableCon
           ["fixed-cell--" + col.fixed]: col.fixed,
           "fixed-cell--shadow": showShadow
         };
-        colMap.set(colKeyGen(col), classObj);
+        colMap.set(colKeyGen.value(col), classObj);
       });
     });
     return colMap;
@@ -453,33 +453,45 @@ function useFixedStyle({
     const { fixed } = col;
     if (tagType === TagType.TD && !fixed)
       return null;
-    const isFixedLeft = fixed === "left";
     const style = {};
     const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
+    let isRelativeMode = true;
+    if (props.cellFixedMode === "sticky") {
+      isRelativeMode = false;
+    }
     if (IS_LEGACY_MODE) {
+      isRelativeMode = true;
+    }
+    const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+    const scrollRight = scrollWidth - containerWidth - scrollLeft;
+    if (virtualScrollX.value.scrollLeft === 0 && fixed === "left" && tagType === TagType.TD) {
+      style.position = void 0;
+    } else if (scrollRight === 0 && fixed === "right" && tagType === TagType.TD) {
+      style.position = void 0;
+    } else if (isRelativeMode) {
       style.position = "relative";
     } else {
       style.position = "sticky";
     }
+    const isFixedLeft = fixed === "left";
     if (tagType === TagType.TH) {
-      if (IS_LEGACY_MODE) {
-        style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + "px";
+      if (isRelativeMode) {
+        style.top = virtualScroll.value.scrollTop + "px";
       } else {
         style.top = depth * props.rowHeight + "px";
       }
       style.zIndex = isFixedLeft ? "3" : "2";
     } else {
-      style.zIndex = isFixedLeft ? "2" : "1";
+      if (isFixedLeft) {
+        style.zIndex = "2";
+      }
     }
     if (fixed === "left" || fixed === "right") {
-      if (IS_LEGACY_MODE) {
+      if (isRelativeMode) {
         if (isFixedLeft) {
-          if (virtualX_on.value)
-            style.left = virtualScrollX.value.scrollLeft - virtualScrollX.value.offsetLeft + "px";
-          else
-            style.left = virtualScrollX.value.scrollLeft + "px";
+          style.left = scrollLeft - (virtualX_on.value ? offsetLeft : 0) + "px";
         } else {
-          style.right = `${virtualX_offsetRight.value}px`;
+          style.right = Math.max(scrollRight - (virtualX_on.value ? virtualX_offsetRight.value : 0), 0) + "px";
         }
       } else {
         const lr = (col.dataIndex ? colKeyStore[col.dataIndex] : refStore.get(col)) + "px";
@@ -552,7 +564,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
         highlightDimRowsJs.forEach((highlightStart, rowKeyValue) => {
           const progress = (nowTs - highlightStart) / highlightDuration;
           let bgc = "";
-          if (0 < progress && progress < 1) {
+          if (0 <= progress && progress <= 1) {
             bgc = highlightInter.value(progress);
           } else {
             highlightDimRowsJs.delete(rowKeyValue);
@@ -599,11 +611,11 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
       ...defaultHighlightDimOption,
       ...option
     };
-    const nowTs = Date.now();
     if (method === "css" || useCss) {
       highlightRowsInCssKeyframe(rowKeyValues, className, duration);
     } else if (method === "animation") {
       if (props.virtual) {
+        const nowTs = Date.now();
         for (let i = 0; i < rowKeyValues.length; i++) {
           const rowKeyValue = rowKeyValues[i];
           const store = { ts: nowTs, visible: false, keyframe, duration };
@@ -620,6 +632,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
         }
       }
     } else if (method === "js") {
+      const nowTs = Date.now();
       for (let i = 0; i < rowKeyValues.length; i++) {
         const rowKeyValue = rowKeyValues[i];
         highlightDimRowsJs.set(rowKeyValue, nowTs);
@@ -836,6 +849,7 @@ function useVirtualScroll({
   });
   const virtualScrollX = ref({
     containerWidth: 0,
+    scrollWidth: 0,
     startIndex: 0,
     endIndex: 0,
     offsetLeft: 0,
@@ -848,7 +862,7 @@ function useVirtualScroll({
     if (!virtual_on.value)
       return dataSourceCopy.value;
     const { startIndex, endIndex } = virtualScroll.value;
-    return dataSourceCopy.value.slice(startIndex, endIndex);
+    return dataSourceCopy.value.slice(startIndex, endIndex + 1);
   });
   const virtual_offsetBottom = computed(() => {
     if (!virtual_on.value)
@@ -912,10 +926,9 @@ function useVirtualScroll({
     updateVirtualScrollY(scrollTop);
   }
   function initVirtualScrollX() {
-    if (!props.virtualX)
-      return;
-    const { offsetWidth, scrollLeft } = tableContainerRef.value || {};
-    virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
+    const { clientWidth, scrollLeft, scrollWidth } = tableContainerRef.value || {};
+    virtualScrollX.value.containerWidth = clientWidth || DEFAULT_TABLE_WIDTH;
+    virtualScrollX.value.scrollWidth = scrollWidth || DEFAULT_TABLE_WIDTH;
     updateVirtualScrollX(scrollLeft);
   }
   function initVirtualScroll(height) {
@@ -926,6 +939,8 @@ function useVirtualScroll({
   function updateVirtualScrollY(sTop = 0) {
     const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
     virtualScroll.value.scrollTop = sTop;
+    if (!virtual_on.value)
+      return;
     let startIndex = Math.floor(sTop / rowHeight);
     if (props.stripe) {
       startIndex -= 1;
@@ -941,14 +956,12 @@ function useVirtualScroll({
         startIndex -= 1;
       }
     }
-    let endIndex = startIndex + pageSize + 1;
+    let endIndex = startIndex + pageSize;
     if (props.stripe) {
-      endIndex += 2;
+      endIndex += 1;
     }
     const offsetTop = startIndex * rowHeight;
-    if (endIndex > dataSourceCopy.value.length) {
-      endIndex = dataSourceCopy.value.length;
-    }
+    endIndex = Math.min(endIndex, dataSourceCopy.value.length);
     if (vue2ScrollYTimeout) {
       window.clearTimeout(vue2ScrollYTimeout);
     }
@@ -968,6 +981,8 @@ function useVirtualScroll({
   let vue2ScrollXTimeout = null;
   function updateVirtualScrollX(sLeft = 0) {
     var _a;
+    if (!props.virtualX)
+      return;
     const headerLength = (_a = tableHeaderLast.value) == null ? void 0 : _a.length;
     const { scrollLeft } = virtualScrollX.value;
     if (!headerLength)
@@ -1002,9 +1017,7 @@ function useVirtualScroll({
         break;
       }
     }
-    if (endIndex > headerLength) {
-      endIndex = headerLength;
-    }
+    endIndex = Math.min(endIndex, headerLength);
     if (vue2ScrollXTimeout) {
       window.clearTimeout(vue2ScrollXTimeout);
     }
@@ -1069,16 +1082,14 @@ const _hoisted_9 = ["onMousedown"];
 const _hoisted_10 = ["onMousedown"];
 const _hoisted_11 = {
   key: 0,
-  class: "virtual-x-left",
-  style: { "padding": "0" }
+  class: "virtual-x-left"
 };
 const _hoisted_12 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
 const _hoisted_13 = {
   key: 0,
-  class: "virtual-x-left",
-  style: { "padding": "0" }
+  class: "virtual-x-left"
 };
-const _hoisted_14 = ["data-index", "onClick"];
+const _hoisted_14 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_15 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
@@ -1105,6 +1116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showHeaderOverflow: { type: Boolean, default: false },
     showOverflow: { type: Boolean, default: false },
     showTrHoverClass: { type: Boolean, default: false },
+    cellHover: { type: Boolean, default: false },
     headerDrag: { type: [Boolean, Function], default: false },
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
@@ -1119,24 +1131,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }) },
     hideHeaderTitle: { type: [Boolean, Array], default: false },
     highlightConfig: { default: () => ({}) },
-    seqConfig: { default: () => ({}) }
+    seqConfig: { default: () => ({}) },
+    cellFixedMode: { default: "sticky" }
   },
-  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"],
+  emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const stkTableId = createStkTableId();
     const props = __props;
     const emits = __emit;
     const tableContainerRef = ref();
     const colResizeIndicatorRef = ref();
-    const currentItem = ref(null);
-    const currentItemKey = ref(null);
-    const currentHover = ref(null);
+    const currentRow = ref(null);
+    const currentRowKey = ref(null);
+    let currentHoverRow = null;
+    const currentHoverRowKey = ref(null);
     let sortCol = ref();
     let sortOrderIndex = ref(0);
     const sortSwitchOrder = [null, "desc", "asc"];
     const tableHeaders = shallowRef([]);
     const tableHeaderLast = shallowRef([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
+    const colKeyGen = computed(() => {
+      if (typeof props.colKey === "function") {
+        return (col) => props.colKey(col);
+      } else {
+        return (col) => col[props.colKey];
+      }
+    });
     const getEmptyCellText = computed(() => {
       if (typeof props.emptyCellText === "string") {
         return () => props.emptyCellText;
@@ -1200,14 +1221,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.columns,
       () => {
         dealColumns();
-        initVirtualScrollX();
+        nextTick(initVirtualScrollX);
       }
     );
     watch(
       () => props.virtualX,
-      () => dealColumns()
+      () => {
+        dealColumns();
+        nextTick(initVirtualScrollX);
+      }
     );
-    dealColumns();
     watch(
       () => props.dataSource,
       (val) => {
@@ -1233,6 +1256,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     watch(() => props.fixedColShadow, dealFixedColShadow);
+    dealColumns();
     onMounted(() => {
       initVirtualScroll();
       updateFixedShadow();
@@ -1304,15 +1328,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return key;
     }
-    function colKeyGen(col) {
-      return typeof props.colKey === "function" ? props.colKey(col) : col[props.colKey];
-    }
     const cellStyleMap = computed(() => {
       const thMap = /* @__PURE__ */ new Map();
       const tdMap = /* @__PURE__ */ new Map();
       tableHeaders.value.forEach((cols, depth) => {
         cols.forEach((col) => {
-          const colKey = colKeyGen(col);
+          const colKey = colKeyGen.value(col);
           const width = props.virtualX ? getCalculatedColWidth(col) + "px" : transformWidthToStr(col.width);
           const style = {
             width
@@ -1377,11 +1398,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function onRowClick(e, row) {
       emits("row-click", e, row);
-      if (props.rowKey ? currentItemKey.value === rowKeyGen(row) : currentItem.value === row)
-        return;
-      currentItem.value = row;
-      currentItemKey.value = rowKeyGen(row);
-      emits("current-change", e, row);
+      if (props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row) {
+        currentRow.value = null;
+        currentRowKey.value = null;
+        emits("current-change", e, row, { select: false });
+      } else {
+        currentRow.value = row;
+        currentRowKey.value = rowKeyGen(row);
+        emits("current-change", e, row, { select: true });
+      }
     }
     function onRowDblclick(e, row) {
       emits("row-dblclick", e, row);
@@ -1398,6 +1423,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onHeaderCellClick(e, col) {
       emits("header-cell-click", e, col);
     }
+    function onCellMouseEnter(e, row, col) {
+      emits("cell-mouseenter", e, row, col);
+    }
+    function onCellMouseLeave(e, row, col) {
+      emits("cell-mouseleave", e, row, col);
+    }
+    function onCellMouseOver(e, row, col) {
+      emits("cell-mouseover", e, row, col);
+    }
     function onTableWheel(e) {
       if (isColResizing.value) {
         e.preventDefault();
@@ -1413,7 +1447,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const { scrollLeft: vScrollLeft } = virtualScrollX.value;
       const isYScroll = scrollTop !== vScrollTop;
       const isXScroll = scrollLeft !== vScrollLeft;
-      if (isYScroll && virtual_on.value) {
+      if (isYScroll) {
         updateVirtualScrollY(scrollTop);
       }
       if (isXScroll) {
@@ -1434,17 +1468,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function onTrMouseOver(_e, row) {
-      if (props.showTrHoverClass) {
-        currentHover.value = rowKeyGen(row);
-      }
+      if (currentHoverRow === row)
+        return;
+      currentHoverRow = row;
+      currentHoverRowKey.value = rowKeyGen(row);
     }
     function setCurrentRow(rowKey, option = { silent: false }) {
       if (!dataSourceCopy.value.length)
         return;
-      currentItem.value = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
-      currentItemKey.value = rowKeyGen(currentItem.value);
+      currentRow.value = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
+      currentRowKey.value = rowKeyGen(currentRow.value);
       if (!option.silent) {
-        emits("current-change", null, currentItem.value);
+        emits(
+          "current-change",
+          /** no Event */
+          null,
+          currentRow.value,
+          { select: Boolean(currentRowKey.value) }
+        );
       }
     }
     function setSorter(dataIndex, order, option = {}) {
@@ -1524,7 +1565,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "border-h": props.bordered === "h",
           "border-v": props.bordered === "v",
           "border-body-v": props.bordered === "body-v",
-          stripe: props.stripe
+          stripe: props.stripe,
+          "cell-hover": props.cellHover,
+          "text-overflow": props.showOverflow,
+          "header-text-overflow": props.showHeaderOverflow
         }]),
         style: normalizeStyle([
           _ctx.virtual && {
@@ -1568,18 +1612,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
                   return openBlock(), createElementBlock("th", {
                     key: col.dataIndex,
-                    "data-col-key": colKeyGen(col),
+                    "data-col-key": colKeyGen.value(col),
                     draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
                     rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
                     colspan: col.colSpan,
-                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TH].get(colKeyGen(col))),
+                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TH].get(colKeyGen.value(col))),
                     title: getHeaderTitle(col),
                     class: normalizeClass([
                       col.sorter ? "sortable" : "",
                       col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
-                      _ctx.showHeaderOverflow ? "text-overflow" : "",
                       col.headerClassName,
-                      unref(fixedColClassMap).get(colKeyGen(col))
+                      unref(fixedColClassMap).get(colKeyGen.value(col))
                     ]),
                     onClick: (e) => {
                       onColumnSort(col);
@@ -1637,7 +1680,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: col.dataIndex,
-                  style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen(col)))
+                  style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
                 }, null, 4);
               }), 128)) : createCommentVNode("", true)
             ], 4)) : createCommentVNode("", true),
@@ -1647,8 +1690,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 key: _ctx.rowKey ? rowKeyGen(row) : rowIndex,
                 "data-row-key": _ctx.rowKey ? rowKeyGen(row) : rowIndex,
                 class: normalizeClass({
-                  active: _ctx.rowKey ? rowKeyGen(row) === rowKeyGen(currentItem.value) : row === currentItem.value,
-                  hover: _ctx.rowKey ? rowKeyGen(row) === currentHover.value : row === currentHover.value,
+                  active: _ctx.rowKey ? rowKeyGen(row) === rowKeyGen(currentRow.value) : row === currentRow.value,
+                  hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
                   [_ctx.rowClassName(row, rowIndex)]: true
                 }),
                 onClick: (e) => onRowClick(e, row),
@@ -1661,14 +1704,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
                     "data-index": col.dataIndex,
-                    class: normalizeClass([
-                      col.className,
-                      unref(fixedColClassMap).get(colKeyGen(col)),
-                      _ctx.showOverflow ? "text-overflow" : "",
-                      col.type === "seq" ? "seq-column" : ""
-                    ]),
-                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen(col))),
-                    onClick: (e) => onCellClick(e, row, col)
+                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col))),
+                    class: normalizeClass([col.className, unref(fixedColClassMap).get(colKeyGen.value(col)), col.type === "seq" ? "seq-column" : ""]),
+                    onClick: (e) => onCellClick(e, row, col),
+                    onMouseenter: (e) => onCellMouseEnter(e, row, col),
+                    onMouseleave: (e) => onCellMouseLeave(e, row, col),
+                    onMouseover: (e) => onCellMouseOver(e, row, col)
                   }, [
                     col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
                       key: 0,
@@ -1688,7 +1729,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         createTextVNode(toDisplayString(row[col.dataIndex] ?? getEmptyCellText.value(col, row)), 1)
                       ], 64))
                     ], 8, _hoisted_15))
-                  ], 14, _hoisted_14);
+                  ], 46, _hoisted_14);
                 }), 128))
               ], 42, _hoisted_12);
             }), 128)),