vue2-excel-grid 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "1.2.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
@@ -12,7 +13,12 @@
       @click.stop="toggle"
     >
       <span v-if="selectedOpt && selectedOpt.color" class="eg-select-dot" :style="{ background: selectedOpt.color }"></span>
-      <span class="eg-select-trigger-label" :class="{ 'eg-select-placeholder': !selectedOpt }">
+      <span
+        class="eg-select-trigger-label"
+        :class="{ 'eg-select-placeholder': !selectedOpt }"
+        @mouseenter="_showTooltip(selectedOpt && selectedOpt.tooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
+      >
         {{ selectedOpt ? selectedOpt.label : placeholder }}
       </span>
       <span class="eg-select-caret">▾</span>
@@ -44,6 +50,8 @@
         }"
         @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 }}
@@ -56,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
@@ -81,12 +90,16 @@
         }"
         @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>
 
@@ -126,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: {
@@ -134,11 +152,11 @@ export default {
     normalizedOptions() {
       const vk = this.valueKey
       const lk = this.labelKey
-      return (this.options || []).map(o =>
-        typeof o === 'string'
-          ? { value: o, label: o }
-          : { value: o[vk], label: o[lk] != null ? o[lk] : String(o[vk]), color: o.color }
-      )
+      return (this.options || []).map(o => {
+        if (typeof o === 'string') return { value: o, label: o, tooltip: o }
+        const label = o[lk] != null ? o[lk] : String(o[vk])
+        return { value: o[vk], label, color: o.color, tooltip: o.tooltip != null ? o.tooltip : label }
+      })
     },
     filteredOptions() {
       if (!this.enableSearch || !this.searchQuery.trim()) return this.normalizedOptions
@@ -165,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: {
@@ -188,6 +215,7 @@ export default {
     }
   },
   beforeDestroy() {
+    this._clearTooltipTimer()
     if (!this.dropdownOnly) {
       document.removeEventListener('click', this._onDocClick)
     }
@@ -212,6 +240,7 @@ export default {
       }
     },
     onSearch(e) {
+      this._hideTooltip()
       this.searchQuery = e.target.value
       this.highlight = 0
       this._navigatedByKeyboard = false
@@ -326,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
+      }
     }
   }
 }
@@ -484,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
@@ -11,7 +12,12 @@
       :class="{ 'eg-select-trigger--disabled': disabled, 'eg-select-trigger--open': open }"
       @click.stop="toggle"
     >
-      <span class="eg-select-trigger-label" :class="{ 'eg-select-placeholder': selectedLabel == null }">
+      <span
+        class="eg-select-trigger-label"
+        :class="{ 'eg-select-placeholder': selectedLabel == null }"
+        @mouseenter="_showTooltip(selectedTooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
+      >
         {{ selectedLabel != null ? selectedLabel : placeholder }}
       </span>
       <span class="eg-select-caret">▾</span>
@@ -44,6 +50,8 @@
         :style="!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null"
         @mousedown.prevent="pickOption(opt)"
         @mouseover="highlight = idx"
+        @mouseenter="_showTooltip(opt.tooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
       >
         <span
           v-if="!searchQuery"
@@ -62,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
@@ -88,6 +97,8 @@
         :style="!searchQuery ? { paddingLeft: (12 + opt.depth * 16) + 'px' } : null"
         @mousedown.prevent="pickOption(opt)"
         @mouseover="highlight = idx"
+        @mouseenter="_showTooltip(opt.tooltip, $event.currentTarget)"
+        @mouseleave="_hideTooltip"
       >
         <span
           v-if="!searchQuery"
@@ -100,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>
 
@@ -138,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: {
@@ -165,6 +183,14 @@ export default {
       const found = this._treeFindLabel(this.options || [], this.keys, v)
       return found != null ? found : null
     },
+    selectedTooltip() {
+      const v = String(this.value == null ? '' : this.value)
+      if (!v) return null
+      const node = this._treeFindNode(this.options || [], this.keys, v)
+      if (!node) return null
+      const label = node[this.keys.labelKey] != null ? node[this.keys.labelKey] : String(node[this.keys.valueKey])
+      return node.tooltip != null ? node.tooltip : label
+    },
     overlayStyle() {
       if (!this.dropdownOnly || !this.triggerRect) return { position: 'fixed', zIndex: 9999 }
       const rect = this.triggerRect
@@ -181,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: {
@@ -202,6 +237,7 @@ export default {
     }
   },
   beforeDestroy() {
+    this._clearTooltipTimer()
     if (!this.dropdownOnly) {
       document.removeEventListener('click', this._onDocClick)
     }
@@ -245,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
@@ -375,7 +412,8 @@ export default {
         const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []
         const hasChildren = children.length > 0
         const expanded = hasChildren && !!expandedMap[id]
-        out.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id, depth, hasChildren, expanded })
+        const label = node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])
+        out.push({ value: node[keys.valueKey], label, color: node.color, tooltip: node.tooltip != null ? node.tooltip : label, id, depth, hasChildren, expanded })
         if (expanded) out = out.concat(this._treeFlatten(children, keys, expandedMap, depth + 1, path))
       })
       return out
@@ -385,7 +423,8 @@ export default {
       const walk = (list) => {
         ;(list || []).forEach(node => {
           const children = Array.isArray(node[keys.childrenKey]) ? node[keys.childrenKey] : []
-          result.push({ value: node[keys.valueKey], label: node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey]), color: node.color, id: String(node[keys.valueKey]), depth: 0, hasChildren: false, expanded: false })
+          const label = node[keys.labelKey] != null ? node[keys.labelKey] : String(node[keys.valueKey])
+          result.push({ value: node[keys.valueKey], label, color: node.color, tooltip: node.tooltip != null ? node.tooltip : label, id: String(node[keys.valueKey]), depth: 0, hasChildren: false, expanded: false })
           if (children.length) walk(children)
         })
       }
@@ -402,6 +441,14 @@ export default {
       }
       return null
     },
+    _treeFindNode(nodes, keys, value) {
+      for (const node of (nodes || [])) {
+        if (String(node[keys.valueKey]) === value) return node
+        const found = this._treeFindNode(node[keys.childrenKey], keys, value)
+        if (found != null) return found
+      }
+      return null
+    },
     _treeFindPath(nodes, keys, value, pathArr) {
       for (let i = 0; i < (nodes || []).length; i++) {
         const node = nodes[i]
@@ -414,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