stk-table-vue 0.3.0 → 0.3.2

package/lib/style.css

@@ -11,6 +11,7 @@
   --border-color:#e8e8f4;
   --border-width:1px;
   --td-bgc:#fff;
+  --td-hover-color:#71a2fd;
   --th-bgc:#fafafc;
   --th-color:#272841;
   --tr-active-bgc:#e6f7ff;
@@ -21,7 +22,7 @@
   --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
   --highlight-color:#71a2fd;
   --highlight-duration:2s;
-  --highlight-easing:linear;
+  --highlight-timing-function:linear;
   --stripe-bgc:#fafafc;
   --sort-arrow-color:#757699;
   --sort-arrow-hover-color:#8f90b5;
@@ -44,6 +45,7 @@
   --th-bgc:#202029;
   --th-color:#C0C0D1;
   --td-bgc:#1b1b24;
+  --td-hover-color:#70a6ff;
   --border-color:#292933;
   --tr-active-bgc:#283f63;
   --tr-hover-bgc:#1a2b46;
@@ -98,11 +100,103 @@
 .stk-table.border-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }
-.stk-table.stripe{
-}
 .stk-table.stripe tbody tr:nth-child(odd){
   background-color:var(--stripe-bgc);
 }
+.stk-table.cell-hover tbody td:hover{
+  box-shadow:inset 0 0 0 2px var(--td-hover-color);
+}
+.stk-table.text-overflow .table-cell-wrapper{
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+.stk-table.header-text-overflow .table-header-cell-wrapper{
+  white-space:nowrap;
+  overflow:hidden;
+}
+.stk-table.header-text-overflow .table-header-title{
+  text-overflow:ellipsis;
+  overflow:hidden;
+}
+.stk-table.virtual{
+}
+.stk-table.virtual .table-header-cell-wrapper{
+  overflow:hidden;
+  max-height:var(--header-row-height);
+}
+.stk-table.virtual tbody td{
+  height:var(--row-height);
+  line-height:1;
+}
+.stk-table.virtual tbody td .table-cell-wrapper{
+  max-height:var(--row-height);
+  overflow:hidden;
+}
+.stk-table.virtual .padding-top-tr td{
+  height:0;
+}
+.stk-table.virtual-x .virtual-x-left{
+  padding:0;
+}
+.stk-table th,
+.stk-table td{
+  z-index:1;
+  font-size:14px;
+  box-sizing:border-box;
+  padding:0 var(--cell-padding-x);
+}
+.stk-table th{
+  color:var(--th-color);
+  background-color:inherit;
+}
+.stk-table th.sortable{
+  cursor:pointer;
+}
+.stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
+  fill:var(--sort-arrow-hover-color);
+}
+.stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
+  fill:var(--sort-arrow-hover-color);
+}
+.stk-table th.sorter-desc .table-header-sorter{
+  display:inline;
+  display:initial;
+}
+.stk-table th.sorter-desc .table-header-sorter .arrow-up{
+  fill:var(--sort-arrow-active-sub-color);
+}
+.stk-table th.sorter-desc .table-header-sorter .arrow-down{
+  fill:var(--sort-arrow-active-color);
+}
+.stk-table th.sorter-asc .table-header-sorter{
+  display:inline;
+  display:initial;
+}
+.stk-table th.sorter-asc .table-header-sorter .arrow-up{
+  fill:var(--sort-arrow-active-color);
+}
+.stk-table th.sorter-asc .table-header-sorter .arrow-down{
+  fill:var(--sort-arrow-active-sub-color);
+}
+.stk-table thead tr{
+  background-color:var(--th-bgc);
+  height:var(--header-row-height);
+}
+.stk-table thead tr:first-child th{
+  position:sticky;
+  top:0;
+}
+.stk-table .stk-table-main tbody tr{
+  background-color:var(--td-bgc);
+  height:var(--row-height);
+}
+.stk-table .stk-table-main tbody tr:hover{
+  background-color:var(--tr-hover-bgc);
+}
+.stk-table .stk-table-main tbody tr.active{
+  background-color:var(--tr-active-bgc);
+}
 .stk-table .column-resize-indicator{
   width:0;
   height:100%;
@@ -124,55 +218,29 @@
   min-width:-moz-min-content;
   min-width:min-content;
 }
-.stk-table .stk-table-main th,
-.stk-table .stk-table-main td{
-  z-index:1;
-  font-size:14px;
-  box-sizing:border-box;
-  padding:0 var(--cell-padding-x);
-}
-.stk-table .stk-table-main th{
-  color:var(--th-color);
-  background-color:var(--th-bgc);
-}
-.stk-table .stk-table-main th.sortable{
-  cursor:pointer;
-}
-.stk-table .stk-table-main th.text-overflow .table-header-cell-wrapper{
-  white-space:nowrap;
-  overflow:hidden;
-}
-.stk-table .stk-table-main th.text-overflow .table-header-title{
-  text-overflow:ellipsis;
-  overflow:hidden;
-}
-.stk-table .stk-table-main td.fixed-cell{
+.stk-table .fixed-cell{
   background-color:inherit;
 }
-.stk-table .stk-table-main td.highlight-cell{
-  animation:stk-table-dim var(--highlight-duration) var(--highlight-easing);
+.stk-table .highlight-cell{
+  animation:stk-table-dim var(--highlight-duration);
+  animation-timing-function:var(--highlight-timing-function);
 }
-.stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-}
-.stk-table .stk-table-main td.seq-column{
+.stk-table .seq-column{
   text-align:center;
 }
-.stk-table .stk-table-main .fixed-cell--left{
+.stk-table .fixed-cell--left{
   --shadow-rotate:90deg;
 }
-.stk-table .stk-table-main .fixed-cell--left.fixed-cell--shadow::after{
+.stk-table .fixed-cell--left.fixed-cell--shadow::after{
   right:-10px;
 }
-.stk-table .stk-table-main .fixed-cell--right{
+.stk-table .fixed-cell--right{
   --shadow-rotate:-90deg;
 }
-.stk-table .stk-table-main .fixed-cell--right.fixed-cell--shadow::after{
+.stk-table .fixed-cell--right.fixed-cell--shadow::after{
   left:-10px;
 }
-.stk-table .stk-table-main .fixed-cell--shadow::after{
+.stk-table .fixed-cell--shadow::after{
   content:'';
   width:10px;
   height:100%;
@@ -181,86 +249,42 @@
   pointer-events:none;
   background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
 }
-.stk-table .stk-table-main thead tr{
-  height:var(--header-row-height);
-}
-.stk-table .stk-table-main thead tr:first-child th{
-  position:sticky;
-  top:0;
-}
-.stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
-  fill:var(--sort-arrow-hover-color);
-}
-.stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
-  fill:var(--sort-arrow-hover-color);
-}
-.stk-table .stk-table-main th.sorter-desc .table-header-sorter{
-  display:inline;
-  display:initial;
-}
-.stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-up{
-  fill:var(--sort-arrow-active-sub-color);
-}
-.stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-down{
-  fill:var(--sort-arrow-active-color);
-}
-.stk-table .stk-table-main th.sorter-asc .table-header-sorter{
-  display:inline;
-  display:initial;
-}
-.stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-up{
-  fill:var(--sort-arrow-active-color);
-}
-.stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-down{
-  fill:var(--sort-arrow-active-sub-color);
-}
-.stk-table .stk-table-main .table-header-cell-wrapper{
+.stk-table .table-header-cell-wrapper{
   max-width:100%;
   display:inline-flex;
   align-items:center;
 }
-.stk-table .stk-table-main .table-header-title{
+.stk-table .table-header-title{
   overflow:hidden;
   align-self:flex-start;
 }
-.stk-table .stk-table-main .table-header-sorter{
+.stk-table .table-header-sorter{
   flex-shrink:0;
   margin-left:4px;
   width:16px;
   height:16px;
   display:none;
 }
-.stk-table .stk-table-main .table-header-sorter .arrow-up,
-.stk-table .stk-table-main .table-header-sorter .arrow-down{
+.stk-table .table-header-sorter .arrow-up,
+.stk-table .table-header-sorter .arrow-down{
   fill:var(--sort-arrow-color);
 }
-.stk-table .stk-table-main .table-header-resizer{
+.stk-table .table-header-resizer{
   position:absolute;
   top:0;
   bottom:0;
   cursor:col-resize;
   width:var(--resize-handle-width);
 }
-.stk-table .stk-table-main .table-header-resizer.left{
+.stk-table .table-header-resizer.left{
   left:0;
 }
-.stk-table .stk-table-main .table-header-resizer.right{
+.stk-table .table-header-resizer.right{
   right:0;
 }
-.stk-table .stk-table-main tbody tr{
-  background-color:var(--td-bgc);
-  height:var(--row-height);
-  transform:translateZ(0);
-}
-.stk-table .stk-table-main tbody tr.highlight-row{
-  animation:stk-table-dim var(--highlight-duration) var(--highlight-easing);
-}
-.stk-table .stk-table-main tbody tr.hover,
-.stk-table .stk-table-main tbody tr:hover{
-  background-color:var(--tr-hover-bgc);
-}
-.stk-table .stk-table-main tbody tr.active{
-  background-color:var(--tr-active-bgc);
+.stk-table .highlight-row{
+  animation:stk-table-dim var(--highlight-duration);
+  animation-timing-function:var(--highlight-timing-function);
 }
 .stk-table .stk-table-no-data{
   background-color:var(--table-bgc);
@@ -279,26 +303,3 @@
 .stk-table .stk-table-no-data.no-data-full{
   flex:1;
 }
-.stk-table.virtual{
-}
-.stk-table.virtual .table-header-cell-wrapper{
-  overflow:hidden;
-  max-height:var(--header-row-height);
-}
-.stk-table.virtual tbody{
-  position:relative;
-}
-.stk-table.virtual tbody tr td{
-  height:var(--row-height);
-  line-height:1;
-}
-.stk-table.virtual tbody tr td .table-cell-wrapper{
-  max-height:var(--row-height);
-  overflow:hidden;
-}
-.stk-table.virtual .padding-top-tr td{
-  height:0;
-}
-.stk-table.virtual-x .virtual-x-left{
-  padding:0;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.3.0",
+    "version": "0.3.2",
     "description": "Simple realtime virtual table for vue3&vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -14,6 +14,9 @@
             'border-v': props.bordered === 'v',
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
+            'cell-hover': props.cellHover,
+            'text-overflow': props.showOverflow,
+            'header-text-overflow': props.showHeaderOverflow,
         }"
         :style="[
             virtual && {
@@ -22,7 +25,7 @@
             },
             {
                 '--highlight-duration': props.highlightConfig.duration && props.highlightConfig.duration + 's',
-                '--highlight-easing': highlightSteps ? `steps(${highlightSteps})` : '',
+                '--highlight-timing-function': highlightSteps ? `steps(${highlightSteps})` : '',
             },
         ]"
         @scroll="onTableScroll"
@@ -69,7 +72,6 @@
                         :class="[
                             col.sorter ? 'sortable' : '',
                             col.dataIndex === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
-                            showHeaderOverflow ? 'text-overflow' : '',
                             col.headerClassName,
                             fixedColClassMap.get(colKeyGen(col)),
                         ]"
@@ -151,8 +153,8 @@
                     :key="rowKey ? rowKeyGen(row) : rowIndex"
                     :data-row-key="rowKey ? rowKeyGen(row) : rowIndex"
                     :class="{
-                        active: rowKey ? rowKeyGen(row) === rowKeyGen(currentItem) : row === currentItem,
-                        hover: rowKey ? rowKeyGen(row) === currentHover : row === currentHover,
+                        active: rowKey ? rowKeyGen(row) === rowKeyGen(currentRow) : row === currentRow,
+                        hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
                         [rowClassName(row, rowIndex)]: true,
                     }"
                     @click="e => onRowClick(e, row)"
@@ -166,14 +168,12 @@
                         v-for="(col, colIndex) in virtualX_columnPart"
                         :key="col.dataIndex"
                         :data-index="col.dataIndex"
-                        :class="[
-                            col.className,
-                            fixedColClassMap.get(colKeyGen(col)),
-                            showOverflow ? 'text-overflow' : '',
-                            col.type === 'seq' ? 'seq-column' : '',
-                        ]"
                         :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
+                        :class="[col.className, fixedColClassMap.get(colKeyGen(col)), col.type === 'seq' ? 'seq-column' : '']"
                         @click="e => onCellClick(e, row, col)"
+                        @mouseenter="e => onCellMouseEnter(e, row, col)"
+                        @mouseleave="e => onCellMouseLeave(e, row, col)"
+                        @mouseover="e => onCellMouseOver(e, row, col)"
                     >
                         <component
                             :is="col.customCell"
@@ -223,7 +223,7 @@ import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
 import { useThDrag } from './useThDrag';
 import { useVirtualScroll } from './useVirtualScroll';
-import { createStkTableId, getCalculatedColWidth, getColWidth, transformWidthToStr, howDeepTheHeader, tableSort } from './utils';
+import { createStkTableId, getCalculatedColWidth, getColWidth, howDeepTheHeader, tableSort, transformWidthToStr } from './utils';
 
 /** Generic stands for DataType */
 type DT = any;
@@ -277,6 +277,8 @@ const props = withDefaults(
         showOverflow?: boolean;
         /** 是否增加行hover class */
         showTrHoverClass?: boolean;
+        /** 是否高亮鼠标悬浮的单元格 */
+        cellHover?: boolean;
         /** 表头是否可拖动。支持回调函数。 */
         headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
         /**
@@ -342,6 +344,7 @@ const props = withDefaults(
         showHeaderOverflow: false,
         showOverflow: false,
         showTrHoverClass: false,
+        cellHover: false,
         headerDrag: false,
         rowClassName: () => '',
         colResizable: false,
@@ -373,9 +376,9 @@ const emits = defineEmits<{
     (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)```
@@ -396,6 +399,21 @@ const emits = defineEmits<{
      * ```(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>)```
@@ -441,14 +459,18 @@ const emits = defineEmits<{
 const tableContainerRef = ref<HTMLDivElement>();
 const colResizeIndicatorRef = ref<HTMLDivElement>();
 /** 当前选中的一行*/
-const currentItem = ref<DT | null>(null);
+const currentRow = ref<DT | null>(null);
 /**
  * 保存当前选中行的key<br>
  * 原因：vue3 不用ref包dataSource时，row为原始对象，与currentItem（Ref）相比会不相等。
  */
-const currentItemKey = ref<any>(null);
-/** 当前hover的行 */
-const currentHover = ref<any | null>(null);
+const currentRowKey = ref<any>(null);
+/** 当前hover行 */
+let currentHoverRow: DT = null;
+/** 当前hover的行的key */
+const currentHoverRowKey = ref(null);
+/** 当前hover的列的key */
+// const currentColHoverKey = ref(null);
 
 /** 排序的列dataIndex*/
 let sortCol = ref<string | null>();
@@ -791,11 +813,16 @@ function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?:
 
 function onRowClick(e: MouseEvent, row: DT) {
     emits('row-click', e, row);
-    // 选中同一行不触发current-change 事件
-    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: MouseEvent, row: DT) {
@@ -822,6 +849,23 @@ function onHeaderCellClick(e: MouseEvent, col: StkTableColumn<DT>) {
     emits('header-cell-click', e, col);
 }
 
+/** td mouseenter */
+function onCellMouseEnter(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    // currentColHoverKey.value = colKeyGen(col);
+    emits('cell-mouseenter', e, row, col);
+}
+
+/** td mouseleave */
+function onCellMouseLeave(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    // currentColHoverKey.value = null;
+    emits('cell-mouseleave', e, row, col);
+}
+
+/** td mouseover event */
+function onCellMouseOver(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    emits('cell-mouseover', e, row, col);
+}
+
 /**
  * 鼠标滚轮事件监听
  * @param {MouseEvent} e
@@ -849,7 +893,7 @@ function onTableScroll(e: Event) {
     const isXScroll = scrollLeft !== vScrollLeft;
 
     // 纵向滚动有变化
-    if (isYScroll && virtual_on.value) {
+    if (isYScroll) {
         updateVirtualScrollY(scrollTop);
     }
 
@@ -876,22 +920,22 @@ function onTableScroll(e: Event) {
 
 /** tr hover事件 */
 function onTrMouseOver(_e: MouseEvent, row: DT) {
-    if (props.showTrHoverClass) {
-        currentHover.value = rowKeyGen(row);
-    }
+    if (currentHoverRow === row) return;
+    currentHoverRow = row;
+    currentHoverRowKey.value = rowKeyGen(row);
 }
 
 /**
  * 选中一行，
- * @param {string} rowKey
+ * @param {string} rowKey selected rowKey, null to unselect
  * @param {boolean} option.silent 是否触发回调
  */
 function setCurrentRow(rowKey: string, 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) });
     }
 }