vue2-excel-grid 1.3.0 → 1.3.1

package/package.json

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

package/src/components/EgSelect.vue

@@ -3,6 +3,7 @@
     :class="dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'"
     :style="dropdownOnly ? overlayStyle : null"
     @mousedown="onRootMouseDown"
+    @scroll.passive="dropdownOnly && _hideTooltip()"
   >
     <!-- Standalone mode: trigger button -->
     <div
@@ -15,7 +16,8 @@
       <span
         class="eg-select-trigger-label"
         :class="{ 'eg-select-placeholder': !selectedOpt }"
-        :title="selectedOpt ? selectedOpt.tooltip : null"
+        @mouseenter="_showTooltip(selectedOpt && selectedOpt.tooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
       >
         {{ selectedOpt ? selectedOpt.label : placeholder }}
       </span>
@@ -46,9 +48,10 @@
           'eg-select-option--active': String(opt.value) === String(value),
           'eg-select-option--highlighted': idx === highlight
         }"
-        :title="opt.tooltip"
         @mousedown.prevent="pickOption(opt)"
         @mouseover="highlight = idx"
+        @mouseenter="_showTooltip(opt.tooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
       >
         <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>
         {{ opt.label }}
@@ -61,6 +64,7 @@
       v-else-if="open"
       class="eg-select-dropdown eg-select-dropdown--floating"
       @mousedown.stop.prevent
+      @scroll.passive="_hideTooltip"
     >
       <div v-if="enableSearch" class="eg-select-search" @mousedown.stop>
         <input
@@ -84,15 +88,18 @@
           'eg-select-option--active': String(opt.value) === String(value),
           'eg-select-option--highlighted': idx === highlight
         }"
-        :title="opt.tooltip"
         @mousedown.prevent="pickOption(opt)"
         @mouseover="highlight = idx"
+        @mouseenter="_showTooltip(opt.tooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
       >
         <span v-if="opt.color" class="eg-select-dot" :style="{ background: opt.color }"></span>
         {{ opt.label }}
       </div>
       <div v-if="!filteredOptions.length" class="eg-select-empty">{{ t.noOptions }}</div>
     </div>
+
+    <div v-if="hoverTooltip" class="eg-option-tooltip" :style="hoverTooltipStyle">{{ hoverTooltip.text }}</div>
   </div>
 </template>
 
@@ -132,7 +139,12 @@ export default {
       // True right after Arrow/Page keyboard navigation — lets Space commit the
       // highlighted option instead of typing a literal space into the search box.
       // Reset on every text edit so normal multi-word search typing is unaffected.
-      _navigatedByKeyboard: false
+      _navigatedByKeyboard: false,
+      // { text, rect } while a themed option tooltip should be visible — see
+      // _showTooltip/_hideTooltip. rect is a snapshot from getBoundingClientRect()
+      // at the moment the hover delay elapsed.
+      hoverTooltip: null,
+      _tooltipTimer: null
     }
   },
   computed: {
@@ -171,6 +183,15 @@ export default {
         maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',
         zIndex: 9999
       }
+    },
+    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 }
     }
   },
   watch: {
@@ -194,6 +215,7 @@ export default {
     }
   },
   beforeDestroy() {
+    this._clearTooltipTimer()
     if (!this.dropdownOnly) {
       document.removeEventListener('click', this._onDocClick)
     }
@@ -218,6 +240,7 @@ export default {
       }
     },
     onSearch(e) {
+      this._hideTooltip()
       this.searchQuery = e.target.value
       this.highlight = 0
       this._navigatedByKeyboard = false
@@ -332,6 +355,27 @@ export default {
       if (!this.open) return
       if (this.$el && this.$el.contains(e.target)) return
       this.open = false
+    },
+    // Shared by option rows and the closed trigger label — shows a themed
+    // popover (see .eg-option-tooltip) after a short hover delay, instead of
+    // the browser's native title tooltip.
+    _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
+      }
     }
   }
 }
@@ -490,4 +534,24 @@ export default {
   display: inline-block;
   margin-top: 3px;
 }
+
+/* Themed option/trigger tooltip — same recipe as .eg-select-dropdown
+   (cell-bg/border/radius) plus .eg-validation-tooltip's shadow, so it reads
+   as part of the grid's own chrome in every built-in theme instead of a
+   generic OS tooltip box. */
+.eg-option-tooltip {
+  position: fixed;
+  max-width: 280px;
+  background: var(--eg-color-cell-bg, var(--eg-color-cell-bg-default));
+  border: 1px solid var(--eg-color-border, var(--eg-color-border-default));
+  border-radius: var(--eg-radius, var(--eg-radius-default));
+  box-shadow: var(--eg-shadow-tooltip, var(--eg-shadow-tooltip-default));
+  color: var(--eg-color-text, var(--eg-color-text-default));
+  font-size: var(--eg-font-size, var(--eg-font-size-default));
+  padding: 6px 10px;
+  pointer-events: none;
+  white-space: normal;
+  word-break: break-word;
+  z-index: 10000;
+}
 </style>

package/src/components/EgTreeSelect.vue

@@ -3,6 +3,7 @@
     :class="dropdownOnly ? 'eg-select-dropdown' : 'eg-select-wrapper'"
     :style="dropdownOnly ? overlayStyle : null"
     @mousedown="onRootMouseDown"
+    @scroll.passive="dropdownOnly && _hideTooltip()"
   >
     <!-- Standalone mode: trigger button -->
     <div
@@ -14,7 +15,8 @@
       <span
         class="eg-select-trigger-label"
         :class="{ 'eg-select-placeholder': selectedLabel == null }"
-        :title="selectedTooltip"
+        @mouseenter="_showTooltip(selectedTooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
       >
         {{ selectedLabel != null ? selectedLabel : placeholder }}
       </span>
@@ -46,9 +48,10 @@
           'eg-select-option--highlighted': idx === highlight
         }"
         :style="!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null"
-        :title="opt.tooltip"
         @mousedown.prevent="pickOption(opt)"
         @mouseover="highlight = idx"
+        @mouseenter="_showTooltip(opt.tooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
       >
         <span
           v-if="!searchQuery"
@@ -67,6 +70,7 @@
       v-else-if="open"
       class="eg-select-dropdown eg-select-dropdown--floating"
       @mousedown.stop.prevent
+      @scroll.passive="_hideTooltip"
     >
       <div v-if="enableSearch" class="eg-select-search" @mousedown.stop>
         <input
@@ -91,9 +95,10 @@
           'eg-select-option--highlighted': idx === highlight
         }"
         :style="!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null"
-        :title="opt.tooltip"
         @mousedown.prevent="pickOption(opt)"
         @mouseover="highlight = idx"
+        @mouseenter="_showTooltip(opt.tooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
       >
         <span
           v-if="!searchQuery"
@@ -106,6 +111,8 @@
       </div>
       <div v-if="!filteredOptions.length" class="eg-select-empty">{{ t.noOptions }}</div>
     </div>
+
+    <div v-if="hoverTooltip" class="eg-option-tooltip" :style="hoverTooltipStyle">{{ hoverTooltip.text }}</div>
   </div>
 </template>
 
@@ -144,7 +151,12 @@ export default {
       // True right after Arrow/Page keyboard navigation — lets Space commit the
       // highlighted option instead of typing a literal space into the search box.
       // Reset on every text edit so normal multi-word search typing is unaffected.
-      _navigatedByKeyboard: false
+      _navigatedByKeyboard: false,
+      // { text, rect } while a themed option tooltip should be visible — see
+      // _showTooltip/_hideTooltip. rect is a snapshot from getBoundingClientRect()
+      // at the moment the hover delay elapsed.
+      hoverTooltip: null,
+      _tooltipTimer: null
     }
   },
   computed: {
@@ -195,6 +207,15 @@ export default {
         maxWidth: Math.min(360, window.innerWidth - rect.left - 16) + 'px',
         zIndex: 9999
       }
+    },
+    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 }
     }
   },
   watch: {
@@ -216,6 +237,7 @@ export default {
     }
   },
   beforeDestroy() {
+    this._clearTooltipTimer()
     if (!this.dropdownOnly) {
       document.removeEventListener('click', this._onDocClick)
     }
@@ -259,6 +281,7 @@ export default {
       this.highlight = newIdx >= 0 ? newIdx : this.highlight
     },
     onSearch(e) {
+      this._hideTooltip()
       this.searchQuery = e.target.value
       this.highlight = 0
       this._navigatedByKeyboard = false
@@ -438,6 +461,27 @@ export default {
         }
       }
       return null
+    },
+    // Shared by option rows and the closed trigger label — shows a themed
+    // popover (see .eg-option-tooltip) after a short hover delay, instead of
+    // the browser's native title tooltip.
+    _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
+      }
     }
   }
 }

package/src/components/ExcelGrid.vue

@@ -7661,6 +7661,21 @@ export default {
   color: var(--eg-color-text-muted, var(--eg-color-text-muted-default));
   user-select: none;
 }
+.eg-option-tooltip {
+  position: fixed;
+  max-width: 280px;
+  background: var(--eg-color-cell-bg, var(--eg-color-cell-bg-default));
+  border: 1px solid var(--eg-color-border, var(--eg-color-border-default));
+  border-radius: var(--eg-radius, var(--eg-radius-default));
+  box-shadow: var(--eg-shadow-tooltip, var(--eg-shadow-tooltip-default));
+  color: var(--eg-color-text, var(--eg-color-text-default));
+  font-size: var(--eg-font-size, var(--eg-font-size-default));
+  padding: 6px 10px;
+  pointer-events: none;
+  white-space: normal;
+  word-break: break-word;
+  z-index: 10000;
+}
 /* Grid `size` overrides — must live in this *unscoped* style block, not the
    scoped one above: .eg-select-option is rendered by the separate EgSelect /
    EgTreeSelect components, so Vue's scoped-CSS attribute (added only to this