vue2-excel-grid 2.8.0 → 2.8.2

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -144,6 +144,8 @@
     tabindex="0"
     @keydown="onKeyDown"
     @keypress="onKeyPress"
+    @mousemove="onGridMouseMove"
+    @mouseleave="onGridMouseLeave"
     ref="wrapper"
   >
     <!-- Context menu -->
@@ -508,6 +510,7 @@
                     :key="'srh-' + ri"
                     class="eg-row-header-cell"
                     :style="getRowHeaderStyle(ri)"
+                    :data-row="ri"
                     @mousedown="onRowHeaderMouseDown($event, ri)"
                     @contextmenu.prevent="onRowContextMenu($event, ri)"
                   >
@@ -548,7 +551,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)">
+                      <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">
                         <template v-for="(col, ci) in leafCols">
                           <template v-if="isColumnPinnedLeft(ci) && !isColHidden(ci)">
                             <div
@@ -667,7 +670,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)">
+                      <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">
                         <template v-for="col in pinnedRightCols">
                           <div
                             :key="'pr-cell-' + ri + '-' + col._flatIndex"
@@ -2622,6 +2625,7 @@ const ExcelGridComponent = {
     // iterating all 50,000 rows each time. With 1200 cells per render that's
     // 60 million iterations per render (~600ms). _dataRaw bypasses this.
     this._dataRaw = this.data || []
+    this._hoveredRi = -1
 
     // Non-reactive caches: same (w,h) → same style object → Vue 2 skips DOM style writes
     this._cellStyleCache = Object.create(null)
@@ -3824,6 +3828,45 @@ const ExcelGridComponent = {
       this.hideSortMenu()
     },
 
+
+    // =========================================================
+    // HOVER HIGHLIGHT
+    // =========================================================
+    onGridMouseMove(e) {
+      const rowNode = e.target.closest('[data-row]')
+      const newRi = rowNode ? parseInt(rowNode.getAttribute('data-row'), 10) : -1
+
+      if (this._hoveredRi !== newRi) {
+        if (this._hoveredRi >= 0) {
+          const oldEls = this.$refs.wrapper.querySelectorAll(`[data-row="${this._hoveredRi}"]`)
+          for (let i = 0; i < oldEls.length; i++) {
+            oldEls[i].classList.remove('eg-row--hover')
+          }
+        }
+        
+        this._hoveredRi = newRi
+
+        if (this._hoveredRi >= 0) {
+          const newEls = this.$refs.wrapper.querySelectorAll(`[data-row="${this._hoveredRi}"]`)
+          for (let i = 0; i < newEls.length; i++) {
+            newEls[i].classList.add('eg-row--hover')
+          }
+        }
+      }
+    },
+    
+    onGridMouseLeave() {
+      if (this._hoveredRi >= 0) {
+        if (this.$refs.wrapper) {
+          const oldEls = this.$refs.wrapper.querySelectorAll(`[data-row="${this._hoveredRi}"]`)
+          for (let i = 0; i < oldEls.length; i++) {
+            oldEls[i].classList.remove('eg-row--hover')
+          }
+        }
+        this._hoveredRi = -1
+      }
+    },
+
     // =========================================================
     // KEYBOARD NAVIGATION (3.2)
     // =========================================================
@@ -7232,7 +7275,7 @@ export default ExcelGridComponent
   --eg-color-checkbox-disabled-checked-default: #bfbfbf;
 
   /* --- Row effects (off by default) --- */
-  --eg-color-row-hover-default: transparent;
+  --eg-color-row-hover-default: #F1F1F1;
   --eg-color-row-stripe-default: transparent;
 
   box-sizing: border-box;
@@ -8506,7 +8549,12 @@ export default ExcelGridComponent
 .eg-row--even .eg-cell:not(.eg-cell-selected):not(.eg-cell-active):not(.eg-cell-fill-preview) {
   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: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) {
+  background: var(--eg-color-row-hover, var(--eg-color-row-hover-default));
+}
+.eg-row-header-cell:hover,
+.eg-row-header-cell.eg-row--hover {
   background: var(--eg-color-row-hover, var(--eg-color-row-hover-default));
 }