vue2-excel-grid 2.8.8 → 2.9.0

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -244,8 +244,8 @@
                     class="eg-header-cell"
                     :class="[
                       { 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
-                      cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
-                      cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? 'eg-header-cell--truncate' : '',
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'wrap' ? 'eg-header-cell--wrap' : ''
                     ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
@@ -254,6 +254,8 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
+                    @mouseenter="cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
                       <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
@@ -340,8 +342,8 @@
                     class="eg-header-cell"
                     :class="[
                       { 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
-                      cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
-                      cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? 'eg-header-cell--truncate' : '',
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'wrap' ? 'eg-header-cell--wrap' : ''
                     ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
@@ -350,6 +352,8 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
+                    @mouseenter="cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
                       <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
@@ -433,8 +437,8 @@
                     class="eg-header-cell"
                     :class="[
                       { 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
-                      cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
-                      cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? 'eg-header-cell--truncate' : '',
+                      cell.column && (cell.column.overflowTitle || overflowTitle) === 'wrap' ? 'eg-header-cell--wrap' : ''
                     ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
@@ -443,6 +447,8 @@
                     @mousedown="onColHeaderMouseDown($event, cell)"
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
+                    @mouseenter="cell.column && (cell.column.overflowTitle || overflowTitle) === 'truncate' ? _showTooltip(cell.column.title, $event.currentTarget) : null"
+                    @mouseleave="_hideTooltip"
                   >
                     <span class="eg-header-title">
                       <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
@@ -527,6 +533,7 @@
                     v-if="!isRowHidden(ri)"
                     :key="'srh-' + ri"
                     class="eg-row-header-cell"
+                    :class="{ 'eg-row--active': activeCell && activeCell.row === ri }"
                     :style="getRowHeaderStyle(ri)"
                     :data-row="ri"
                     @mousedown="onRowHeaderMouseDown($event, ri)"
@@ -569,7 +576,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)" :data-row="ri">
+                      <div v-if="!isRowHidden(ri)" :key="'fc-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0, 'eg-row--active': activeCell && activeCell.row === ri }" :style="getRowStyle(ri)" :data-row="ri">
                         <template v-for="(col, ci) in leafCols">
                           <template v-if="isColumnPinnedLeft(ci) && !isColHidden(ci)">
                             <div
@@ -625,7 +632,7 @@
                         v-if="!isRowHidden(ri)"
                         :key="'row-' + ri"
                         class="eg-row"
-                        :class="{ 'eg-row--even': ri % 2 === 0 }"
+                        :class="{ 'eg-row--even': ri % 2 === 0, 'eg-row--active': activeCell && activeCell.row === ri }"
                         :style="getRowStyle(ri)"
                         :data-row="ri"
                       >
@@ -688,7 +695,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)" :data-row="ri">
+                      <div v-if="!isRowHidden(ri)" :key="'pr-row-' + ri" class="eg-row" :class="{ 'eg-row--even': ri % 2 === 0, 'eg-row--active': activeCell && activeCell.row === ri }" :style="getRowStyle(ri)" :data-row="ri">
                         <template v-for="col in pinnedRightCols">
                           <div
                             :key="'pr-cell-' + ri + '-' + col._flatIndex"
@@ -966,6 +973,7 @@
     >{{ colDrag.ghostLabel }}</div>
 
   </div>
+    <div v-if="hoverTooltip" class="eg-option-tooltip" :style="hoverTooltipStyle">{{ hoverTooltip.text }}</div>
   </div>
 </template>
 
@@ -1064,6 +1072,19 @@ const ExcelGridComponent = {
     /** Array of row objects keyed by columns[].key */
     data: { type: Array, default: () => [] },
 
+    /**
+     * Sarlavhalardagi matn sig'may qolganda uning qanday harakatlanishini belgilaydi
+     * (barcha ustunlar uchun umumiy qoida). Ustun (column) sozlamalarida
+     * xuddi shu nomli xususiyat mavjud bo'lsa, ustun sozlamasi inobatga olinadi.
+     * @type {String}
+     * @default 'no-overflow'
+     */
+    overflowTitle: {
+      type: String,
+      default: 'no-overflow',
+      validator: v => ['no-overflow', 'truncate', 'wrap'].includes(v)
+    },
+
     /**
      * Column definitions (may be nested via children[]).
      *
@@ -1615,6 +1636,8 @@ const ExcelGridComponent = {
   data() {
     return {
       calculatedHeaderHeight: null,
+      hoverTooltip: null,
+      _tooltipTimer: null,
       // Selection
       activeCell: { row: 0, col: 0 },
       selectionRanges: [], // [{ startRow, startCol, endRow, endCol }]
@@ -1812,6 +1835,15 @@ const ExcelGridComponent = {
   },
 
   computed: {
+    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 }
+    },
     t() { return getMessages(this.locale) },
 
     // localSyncKey feature — the actual IndexedDB storage key. idbStore.js
@@ -2803,9 +2835,27 @@ const ExcelGridComponent = {
   },
 
   methods: {
+    _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
+      }
+    },
     _calcHeaderHeight() {
       if (!this.leafCols) return
-      const wrapCols = this.leafCols.filter(c => c.overflowTitle === 'wrap')
+      const wrapCols = this.leafCols.filter(c => (c.overflowTitle || this.overflowTitle) === 'wrap')
       if (wrapCols.length === 0) {
         if (this.calculatedHeaderHeight !== null) this.calculatedHeaderHeight = null
         return
@@ -8635,11 +8685,13 @@ export default ExcelGridComponent
   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.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),
+.eg-row.eg-row--active .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)) !important;
 }
 .eg-row-header-cell:hover,
-.eg-row-header-cell.eg-row--hover {
+.eg-row-header-cell.eg-row--hover,
+.eg-row-header-cell.eg-row--active {
   background: var(--eg-color-row-hover, var(--eg-color-row-hover-default)) !important;
 }
 

package/src/index.js

@@ -8,7 +8,19 @@ export { ExcelGrid, EgCheckbox, EgSelect, EgTreeSelect, version }
 
 export default {
   version,
-  install(Vue) {
+  install(Vue, options = {}) {
+    if (options && typeof options === 'object') {
+      Object.keys(options).forEach(key => {
+        if (ExcelGrid.props && ExcelGrid.props[key] !== undefined) {
+          const val = options[key]
+          if (typeof ExcelGrid.props[key] !== 'object') {
+            // Convert to object notation if it was just a constructor like `props: { fitColumns: Boolean }`
+            ExcelGrid.props[key] = { type: ExcelGrid.props[key] }
+          }
+          ExcelGrid.props[key].default = (val !== null && typeof val === 'object') ? () => val : val
+        }
+      })
+    }
     Vue.component('Vue2ExcelGrid', ExcelGrid)
     Vue.component('Vue2EgCheckbox', EgCheckbox)
     Vue.component('Vue2EgSelect', EgSelect)