vue2-excel-grid 2.8.7 → 2.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.8.7",
+  "version": "2.8.9",
   "description": "Excel-style grid component for Vue 2.6.14 with virtual scrolling",
   "license": "MIT",
   "author": "Fozilbek Raimberdiyev",

package/src/components/ExcelGrid.vue

@@ -254,6 +254,8 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
+                    @mouseenter="cell.column && cell.column.overflowTitle === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
                       <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
@@ -350,6 +352,8 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
+                    @mouseenter="cell.column && cell.column.overflowTitle === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
                       <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
@@ -443,6 +447,8 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
+                    @mouseenter="cell.column && cell.column.overflowTitle === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
                       <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
@@ -527,6 +533,7 @@
                     v-if="!isRowHidden(ri)"
                     :key="'srh-' + ri"
                     class="eg-row-header-cell"
+                    :class="{ 'eg-row--active': activeCell && activeCell.row === ri }"
                     :style="getRowHeaderStyle(ri)"
                     :data-row="ri"
                     @mousedown="onRowHeaderMouseDown($event, ri)"
@@ -569,7 +576,7 @@
               <div :style="{ height: totalVirtualHeight + 'px', position: 'relative' }">
                 <div :style="{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }">
                   <template v-for="ri in visibleRowRange">
-                      <div v-if="!isRowHidden(ri)" :key="'fc-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0 }" :style="getRowStyle(ri)" :data-row="ri">
+                      <div v-if="!isRowHidden(ri)" :key="'fc-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0, 'eg-row--active': activeCell && activeCell.row === ri }" :style="getRowStyle(ri)" :data-row="ri">
                         <template v-for="(col, ci) in leafCols">
                           <template v-if="isColumnPinnedLeft(ci) && !isColHidden(ci)">
                             <div
@@ -625,7 +632,7 @@
                         v-if="!isRowHidden(ri)"
                         :key="'row-' + ri"
                         class="eg-row"
-                        :class="{ 'eg-row--even': ri % 2 === 0 }"
+                        :class="{ 'eg-row--even': ri % 2 === 0, 'eg-row--active': activeCell && activeCell.row === ri }"
                         :style="getRowStyle(ri)"
                         :data-row="ri"
                       >
@@ -688,7 +695,7 @@
               <div :style="{ height: totalVirtualHeight + 'px', position: 'relative' }">
                 <div :style="{ transform: 'translateY(' + virtualOffsetTop + 'px)', willChange: 'transform', contain: 'layout style' }">
                   <template v-for="ri in visibleRowRange">
-                      <div v-if="!isRowHidden(ri)" :key="'pr-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0 }" :style="getRowStyle(ri)" :data-row="ri">
+                      <div v-if="!isRowHidden(ri)" :key="'pr-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0, 'eg-row--active': activeCell && activeCell.row === ri }" :style="getRowStyle(ri)" :data-row="ri">
                         <template v-for="col in pinnedRightCols">
                           <div
                             :key="'pr-cell-' + ri + '-' + col._flatIndex"
@@ -966,6 +973,7 @@
     >{{ colDrag.ghostLabel }}</div>
 
   </div>
+    <div v-if="hoverTooltip" class="eg-option-tooltip" :style="hoverTooltipStyle">{{ hoverTooltip.text }}</div>
   </div>
 </template>
 
@@ -1615,6 +1623,8 @@ const ExcelGridComponent = {
   data() {
     return {
       calculatedHeaderHeight: null,
+      hoverTooltip: null,
+      _tooltipTimer: null,
       // Selection
       activeCell: { row: 0, col: 0 },
       selectionRanges: [], // [{ startRow, startCol, endRow, endCol }]
@@ -1812,6 +1822,15 @@ const ExcelGridComponent = {
   },
 
   computed: {
+    hoverTooltipStyle() {
+      if (!this.hoverTooltip) return {}
+      const { rect, text } = this.hoverTooltip
+      const estH = 20 + Math.ceil(text.length / 40) * 16
+      const spaceBelow = window.innerHeight - rect.bottom
+      const top = spaceBelow >= estH + 8 ? rect.bottom + 6 : rect.top - estH - 6
+      const left = Math.min(rect.left, window.innerWidth - 280 - 8)
+      return { position: 'fixed', top: top + 'px', left: Math.max(8, left) + 'px', zIndex: 10000 }
+    },
     t() { return getMessages(this.locale) },
 
     // localSyncKey feature — the actual IndexedDB storage key. idbStore.js
@@ -2803,6 +2822,24 @@ const ExcelGridComponent = {
   },
 
   methods: {
+    _showTooltip(text, el) {
+      this._clearTooltipTimer()
+      if (!text) return
+      const rect = el.getBoundingClientRect()
+      this._tooltipTimer = setTimeout(() => {
+        this.hoverTooltip = { text, rect }
+      }, 400)
+    },
+    _hideTooltip() {
+      this._clearTooltipTimer()
+      this.hoverTooltip = null
+    },
+    _clearTooltipTimer() {
+      if (this._tooltipTimer) {
+        clearTimeout(this._tooltipTimer)
+        this._tooltipTimer = null
+      }
+    },
     _calcHeaderHeight() {
       if (!this.leafCols) return
       const wrapCols = this.leafCols.filter(c => c.overflowTitle === 'wrap')
@@ -8635,11 +8672,13 @@ export default ExcelGridComponent
   background: var(--eg-color-row-stripe, var(--eg-color-row-stripe-default));
 }
 .eg-row:hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview),
-.eg-row.eg-row--hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {
+.eg-row.eg-row--hover .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview),
+.eg-row.eg-row--active .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {
   background: var(--eg-color-row-hover, var(--eg-color-row-hover-default)) !important;
 }
 .eg-row-header-cell:hover,
-.eg-row-header-cell.eg-row--hover {
+.eg-row-header-cell.eg-row--hover,
+.eg-row-header-cell.eg-row--active {
   background: var(--eg-color-row-hover, var(--eg-color-row-hover-default)) !important;
 }