vue2-excel-grid 2.8.5 → 2.8.7

package/package.json

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

package/src/components/ExcelGrid.vue

@@ -242,7 +242,11 @@
                   <div
                     :key="'fh-' + rowIdx + '-' + (cell.column.key || cell.column.title)"
                     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 }"
+                    :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' : ''
+                    ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
                     :data-end="cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined"
@@ -251,10 +255,12 @@
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
                   >
-                    <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
-                      {{ cell.column.title }}
-                    </slot>
-                    <span v-else>{{ cell.column.title }}</span>
+                    <span class="eg-header-title">
+                      <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
+                        {{ cell.column.title }}
+                      </slot>
+                      <template v-else>{{ cell.column.title }}</template>
+                    </span>
                     <span
                       v-if="!cell.isGroup && isColSortable(cell.column)"
                       class="eg-sort-icon"
@@ -332,7 +338,11 @@
                   <div
                     :key="'sh-' + rowIdx + '-' + (cell.column.key || cell.column.title)"
                     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 }"
+                    :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' : ''
+                    ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
                     :data-end="cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined"
@@ -341,10 +351,12 @@
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
                   >
-                    <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
-                      {{ cell.column.title }}
-                    </slot>
-                    <span v-else>{{ cell.column.title }}</span>
+                    <span class="eg-header-title">
+                      <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
+                        {{ cell.column.title }}
+                      </slot>
+                      <template v-else>{{ cell.column.title }}</template>
+                    </span>
                     <span
                       v-if="!cell.isGroup && isColSortable(cell.column)"
                       class="eg-sort-icon"
@@ -419,7 +431,11 @@
                   <div
                     :key="'prh-' + rowIdx + '-' + (cell.column.key || cell.column.title)"
                     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 }"
+                    :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' : ''
+                    ]"
                     :data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
                     :data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
                     :data-end="cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined"
@@ -428,10 +444,12 @@
                     @dblclick="onColHeaderDblClick($event, cell)"
                     @contextmenu.prevent="onColHeaderContextMenu($event, cell)"
                   >
-                    <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
-                      {{ cell.column.title }}
-                    </slot>
-                    <span v-else>{{ cell.column.title }}</span>
+                    <span class="eg-header-title">
+                      <slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
+                        {{ cell.column.title }}
+                      </slot>
+                      <template v-else>{{ cell.column.title }}</template>
+                    </span>
                     <span
                       v-if="!cell.isGroup && isColSortable(cell.column)"
                       class="eg-sort-icon"
@@ -1425,7 +1443,7 @@ const ExcelGridComponent = {
      * without `:theme.sync` — `.sync` is only needed to reflect the current
      * theme back into the host's own state.
      */
-    theme: { type: String, default: 'excel' },
+    theme: { type: String, default: 'antd' },
 
     /**
      * Shows a filter row directly beneath the column headers (inside the
@@ -1596,6 +1614,7 @@ const ExcelGridComponent = {
 
   data() {
     return {
+      calculatedHeaderHeight: null,
       // Selection
       activeCell: { row: 0, col: 0 },
       selectionRanges: [], // [{ startRow, startCol, endRow, endCol }]
@@ -1878,7 +1897,10 @@ const ExcelGridComponent = {
 
     sizeOptions() { return Object.keys(SIZE_CONFIG) },
     _rowH()     { return this._sizeConf.row },
-    _headerRowH() { return this._sizeConf.header },
+    _headerRowH() { 
+      const baseH = this._sizeConf.header
+      return this.calculatedHeaderHeight && this.calculatedHeaderHeight > baseH ? this.calculatedHeaderHeight : baseH 
+    },
     _footerRowH() { return this._sizeConf.footer },
     _filterRowH() { return this.filterRow ? this._sizeConf.filter : 0 },
 
@@ -2417,7 +2439,7 @@ const ExcelGridComponent = {
 
     theme: {
       immediate: true,
-      handler(v) { this.internalTheme = v || 'excel' }
+      handler(v) { this.internalTheme = v || 'antd' }
     },
 
     // Runs before the `columns`/`data` watchers below (both call
@@ -2538,6 +2560,8 @@ const ExcelGridComponent = {
         Object.keys(pinFromCols).forEach(key => {
           if (!(key in this.internalPinnedColumns)) this.$set(this.internalPinnedColumns, key, pinFromCols[key])
         })
+        
+        this.$nextTick(() => this._calcHeaderHeight())
       }
     },
     pinnedColumns: {
@@ -2779,6 +2803,42 @@ const ExcelGridComponent = {
   },
 
   methods: {
+    _calcHeaderHeight() {
+      if (!this.leafCols) return
+      const wrapCols = this.leafCols.filter(c => c.overflowTitle === 'wrap')
+      if (wrapCols.length === 0) {
+        if (this.calculatedHeaderHeight !== null) this.calculatedHeaderHeight = null
+        return
+      }
+      
+      if (!this._measuringDiv) {
+        this._measuringDiv = document.createElement('div')
+        this._measuringDiv.style.position = 'absolute'
+        this._measuringDiv.style.visibility = 'hidden'
+        this._measuringDiv.style.whiteSpace = 'normal'
+        this._measuringDiv.style.wordWrap = 'break-word'
+        this._measuringDiv.style.lineHeight = '1.2'
+        this._measuringDiv.style.fontSize = 'var(--eg-font-size-header, 11px)'
+        this._measuringDiv.style.fontFamily = 'var(--eg-font-family)'
+        this._measuringDiv.style.fontWeight = '600'
+        this._measuringDiv.style.padding = '0 8px'
+        document.body.appendChild(this._measuringDiv)
+      }
+      
+      let maxH = 0
+      for (const col of wrapCols) {
+        const width = this.getColW(col._flatIndex)
+        this._measuringDiv.style.width = width + 'px'
+        this._measuringDiv.innerText = col.title || ''
+        const h = this._measuringDiv.offsetHeight
+        if (h > maxH) maxH = h
+      }
+      maxH += 8
+      
+      if (this.calculatedHeaderHeight !== maxH) {
+        this.calculatedHeaderHeight = maxH
+      }
+    },
     // =========================================================
     // VIRTUAL SCROLL
     // =========================================================
@@ -6034,6 +6094,7 @@ const ExcelGridComponent = {
         const newWidth = Math.max(20, this.resizing.startSize + (e.clientX - this.resizing.startX))
         this.$set(this.colWidths, this.resizing.index, newWidth)
         this._cellStyleCache = Object.create(null)
+        this._calcHeaderHeight()
       } else {
         this.resizing.currentPos = e.clientY
         this._resizePreviewHeight = Math.max(10, this.resizing.startSize + (e.clientY - this.resizing.startY))
@@ -6098,6 +6159,7 @@ const ExcelGridComponent = {
       this.$set(this.colWidths, ci, newWidth)
       this.$delete(this.relativeColSpecs, ci)
       this._cellStyleCache = Object.create(null)
+      this._calcHeaderHeight()
       if (this.fitColumns) {
         this.$set(this.fitColumnsOverrides, col.key, true)
         this._applyFitColumns()
@@ -7734,6 +7796,29 @@ export default ExcelGridComponent
   cursor: pointer;
 }
 
+.eg-header-title {
+  max-width: 100%;
+}
+
+.eg-header-cell--truncate {
+  min-width: 0; 
+}
+.eg-header-cell--truncate .eg-header-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eg-header-cell--wrap {
+  white-space: normal;
+}
+.eg-header-cell--wrap .eg-header-title {
+  white-space: normal;
+  word-wrap: break-word;
+  line-height: 1.2;
+  text-align: center;
+}
+
 .eg-header-cell:hover { background: var(--eg-color-border-cell, var(--eg-color-border-cell-default)); }
 .eg-header-group { background: var(--eg-color-header-group-bg, var(--eg-color-header-group-bg-default)); }