vue2-excel-grid 1.2.0 → 1.3.0

package/package.json

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

package/src/components/EgSelect.vue

@@ -12,7 +12,11 @@
       @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 }"
+        :title="selectedOpt ? selectedOpt.tooltip : null"
+      >
         {{ selectedOpt ? selectedOpt.label : placeholder }}
       </span>
       <span class="eg-select-caret">▾</span>
@@ -42,6 +46,7 @@
           '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"
       >
@@ -79,6 +84,7 @@
           '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"
       >
@@ -134,11 +140,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

package/src/components/EgTreeSelect.vue

@@ -11,7 +11,11 @@
       :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 }"
+        :title="selectedTooltip"
+      >
         {{ selectedLabel != null ? selectedLabel : placeholder }}
       </span>
       <span class="eg-select-caret">▾</span>
@@ -42,6 +46,7 @@
           '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"
       >
@@ -86,6 +91,7 @@
           '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"
       >
@@ -165,6 +171,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
@@ -375,7 +389,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 +400,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 +418,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]