stk-table-vue 0.3.1 → 0.3.2

package/README.md

@@ -32,7 +32,7 @@ repo:
 * [x] 排序
   - [x] 基本表头点击排序。
   - [x] 支持配置 `null` | `undefined` 永远排最后。
-  - [] 支持配置 string 使用 `String.prototype.localCompare` 排序。
+  - [x] 支持配置 string 使用 `String.prototype.localCompare` 排序。
 * [x] 多级表头。
   - [x] 支持最多`2级`表头。
   - [x] 支持更多级表头。
@@ -45,6 +45,7 @@ repo:
 * [x] vue2.7支持（引入源码使用）。
   - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。(`v0.2.0`)
 * [x] 支持配置序号列。`StkTableColumn['type']`。(`v0.3.0`)
+* [x] `props.cellHover`单元格悬浮样式。(`v0.3.2`)
 
 
 
@@ -166,6 +167,8 @@ export type StkProps = {
   showOverflow?: boolean;
   /** 是否增加行hover class */
   showTrHoverClass?: boolean;
+  /** 是否高亮鼠标悬浮的单元格 */
+  cellHover?: boolean;
   /** 表头是否可拖动。支持回调函数。 */
   headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
@@ -246,9 +249,9 @@ export type StkProps = {
     (e: 'row-click', ev: MouseEvent, row: DT): void;
     /**
      * 选中一行触发。ev返回null表示不是点击事件触发的
-     * ```(ev: MouseEvent | null, row: DT)```
+     * ```(ev: MouseEvent | null, row: DT, data: { select: boolean })```
      */
-    (e: 'current-change', ev: MouseEvent | null, row: DT): void;
+    (e: 'current-change', ev: MouseEvent | null, row: DT, data: { select: boolean }): void;
     /**
      * 行双击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -269,6 +272,21 @@ export type StkProps = {
      * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
      */
     (e: 'cell-click', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格鼠标进入事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseenter', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格鼠标移出事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseleave', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格悬浮事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseover', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
     /**
      * 表头单元格点击事件
      * ```(ev: MouseEvent, col: StkTableColumn<DT>)```

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

@@ -3,7 +3,7 @@ import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, S
 type DT = any;
 /**
  * 选中一行，
- * @param {string} rowKey
+ * @param {string} rowKey selected rowKey, null to unselect
  * @param {boolean} option.silent 是否触发回调
  */
 declare function setCurrentRow(rowKey: string, option?: {
@@ -83,6 +83,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showOverflow?: boolean | undefined;
     /** 是否增加行hover class */
     showTrHoverClass?: boolean | undefined;
+    /** 是否高亮鼠标悬浮的单元格 */
+    cellHover?: boolean | undefined;
     /** 表头是否可拖动。支持回调函数。 */
     headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
     /**
@@ -147,6 +149,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow: boolean;
     showOverflow: boolean;
     showTrHoverClass: boolean;
+    cellHover: boolean;
     headerDrag: boolean;
     rowClassName: () => "";
     colResizable: boolean;
@@ -183,7 +186,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         method?: "css" | "animation" | "js" | undefined;
         useCss?: boolean | undefined;
         className?: string | undefined;
-        keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined; /** v-model:columns col resize 时更新宽度*/
+        keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
         duration?: number | undefined;
     }) => void;
     /** 表格排序列dataIndex */
@@ -201,11 +204,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "sort-change": (col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
     "row-click": (ev: MouseEvent, row: any) => void;
-    "current-change": (ev: MouseEvent | null, row: any) => void;
+    "current-change": (ev: MouseEvent | null, row: any, data: {
+        select: boolean;
+    }) => void;
     "row-dblclick": (ev: MouseEvent, row: any) => void;
     "header-row-menu": (ev: MouseEvent) => void;
     "row-menu": (ev: MouseEvent, row: any) => void;
     "cell-click": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
+    "cell-mouseenter": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
+    "cell-mouseleave": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
+    "cell-mouseover": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
     "header-cell-click": (ev: MouseEvent, col: StkTableColumn<any>) => void;
     scroll: (ev: Event, data: {
         startIndex: number;
@@ -263,6 +271,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showOverflow?: boolean | undefined;
     /** 是否增加行hover class */
     showTrHoverClass?: boolean | undefined;
+    /** 是否高亮鼠标悬浮的单元格 */
+    cellHover?: boolean | undefined;
     /** 表头是否可拖动。支持回调函数。 */
     headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
     /**
@@ -327,6 +337,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow: boolean;
     showOverflow: boolean;
     showTrHoverClass: boolean;
+    cellHover: boolean;
     headerDrag: boolean;
     rowClassName: () => "";
     colResizable: boolean;
@@ -353,11 +364,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onTh-drop"?: ((targetColKey: string) => any) | undefined;
     "onSort-change"?: ((col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig<any>) => any) | undefined;
     "onRow-click"?: ((ev: MouseEvent, row: any) => any) | undefined;
-    "onCurrent-change"?: ((ev: MouseEvent | null, row: any) => any) | undefined;
+    "onCurrent-change"?: ((ev: MouseEvent | null, row: any, data: {
+        select: boolean;
+    }) => any) | undefined;
     "onRow-dblclick"?: ((ev: MouseEvent, row: any) => any) | undefined;
     "onHeader-row-menu"?: ((ev: MouseEvent) => any) | undefined;
     "onRow-menu"?: ((ev: MouseEvent, row: any) => any) | undefined;
     "onCell-click"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
+    "onCell-mouseenter"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
+    "onCell-mouseleave"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
+    "onCell-mouseover"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
     "onHeader-cell-click"?: ((ev: MouseEvent, col: StkTableColumn<any>) => any) | undefined;
     "onScroll-x"?: ((ev: Event) => any) | undefined;
 }, {
@@ -386,6 +402,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow: boolean;
     showOverflow: boolean;
     showTrHoverClass: boolean;
+    cellHover: boolean;
     headerDrag: boolean | ((col: StkTableColumn<any>) => boolean);
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;

package/lib/stk-table-vue.js

@@ -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;
 }
@@ -463,7 +463,7 @@ function useFixedStyle({
     }
     if (tagType === TagType.TH) {
       if (IS_LEGACY_MODE) {
-        style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + "px";
+        style.top = virtualScroll.value.scrollTop + "px";
       } else {
         style.top = depth * props.rowHeight + "px";
       }
@@ -552,7 +552,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 +599,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 +620,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);
@@ -848,7 +849,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)
@@ -926,6 +927,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 +944,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);
     }
@@ -1002,9 +1003,7 @@ function useVirtualScroll({
         break;
       }
     }
-    if (endIndex > headerLength) {
-      endIndex = headerLength;
-    }
+    endIndex = Math.min(endIndex, headerLength);
     if (vue2ScrollXTimeout) {
       window.clearTimeout(vue2ScrollXTimeout);
     }
@@ -1078,7 +1077,7 @@ const _hoisted_13 = {
   class: "virtual-x-left",
   style: { "padding": "0" }
 };
-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 +1104,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 },
@@ -1121,16 +1121,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     highlightConfig: { default: () => ({}) },
     seqConfig: { default: () => ({}) }
   },
-  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"];
@@ -1377,11 +1378,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 +1403,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 +1427,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 +1448,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 +1545,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 && {
@@ -1577,7 +1601,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     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))
                     ]),
@@ -1647,8 +1670,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 +1684,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)
+                    class: normalizeClass([col.className, unref(fixedColClassMap).get(colKeyGen(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 +1709,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)),