vue2-excel-grid 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "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

@@ -917,6 +917,7 @@ import EgSelect from './EgSelect.vue'
 import EgTreeSelect from './EgTreeSelect.vue'
 import EgDatePicker from './EgDatePicker.vue'
 import { parseDateValue, formatDate } from '../utils/dateUtils.js'
+import { formatNumber as _formatNumber } from '../utils/numberFormat.js'
 import { Mask, MaskInput } from '../utils/mask.js'
 
 const SIZE_CONFIG = {
@@ -6116,6 +6117,15 @@ export default {
       this.$refs.wrapper && this.$refs.wrapper.focus()
     },
 
+    // Public, ref-callable: formats a number with a custom thousands
+    // separator (decimal point stays '.', no forced/padded decimals). Any
+    // value that isn't a finite number — already-formatted text like
+    // "6 000 000,00", arbitrary strings, etc. — is returned unchanged, so
+    // hosts can call this on raw cell values without checking the type first.
+    formatNumber(value, separator) {
+      return _formatNumber(value, separator)
+    },
+
     toggleLock() {
       this.internalLocked = !this.internalLocked
       this.$emit('update:locked', this.internalLocked)
@@ -6866,6 +6876,13 @@ export default {
 }
 .eg-cell-align-right  { justify-content: flex-end; }
 .eg-cell-align-center { justify-content: center; }
+/* .eg-cell-value is flex:1 (v1.1.126, to shrink/ellipsize correctly), so it
+   always fills the cell's full width — .eg-cell-align-*'s justify-content
+   above has no leftover space left to act on and never visibly moves it.
+   Same root cause .eg-cell-action-wrap already works around below; apply the
+   same fix here via text-align on the value span itself. */
+.eg-cell-align-right  .eg-cell-value { text-align: right; }
+.eg-cell-align-center .eg-cell-value { text-align: center; }
 .eg-cell--has-suffix.eg-cell-select::after { display: none; }
 .eg-cell-select-trigger-wrap {
   flex: 1;
@@ -7661,6 +7678,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

package/src/utils/numberFormat.js

@@ -0,0 +1,15 @@
+// Formats a JS number with a custom thousands separator, keeping the
+// decimal point as '.' and showing only as many decimal digits as the
+// number itself already has (no padding, no rounding). Any input that
+// isn't a finite number — an already-formatted string like "6 000 000,00",
+// arbitrary text, null, NaN, etc. — is returned unchanged, so callers can
+// pass through mixed number/string cell values safely without pre-checking
+// the type themselves.
+export function formatNumber(value, separator) {
+  if (typeof value !== 'number' || !isFinite(value)) return value
+  const sep = separator == null ? '' : String(separator)
+  const sign = value < 0 ? '-' : ''
+  const [intPart, fracPart] = Math.abs(value).toString().split('.')
+  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, sep)
+  return sign + grouped + (fracPart ? '.' + fracPart : '')
+}