vue2-excel-grid 2.8.6 → 2.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vue2-excel-grid.esm.js +307 -183
- package/dist/vue2-excel-grid.umd.js +2 -2
- package/package.json +1 -1
- package/src/components/ExcelGrid.vue +101 -16
package/package.json
CHANGED
|
@@ -242,7 +242,11 @@
|
|
|
242
242
|
<div
|
|
243
243
|
:key="'fh-' + rowIdx + '-' + (cell.column.key || cell.column.title)"
|
|
244
244
|
class="eg-header-cell"
|
|
245
|
-
:class="
|
|
245
|
+
:class="[
|
|
246
|
+
{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
|
|
247
|
+
cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
|
|
248
|
+
cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
|
|
249
|
+
]"
|
|
246
250
|
:data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
|
|
247
251
|
:data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
|
|
248
252
|
:data-end="cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined"
|
|
@@ -251,10 +255,12 @@
|
|
|
251
255
|
@dblclick="onColHeaderDblClick($event, cell)"
|
|
252
256
|
@contextmenu.prevent="onColHeaderContextMenu($event, cell)"
|
|
253
257
|
>
|
|
254
|
-
<
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
+
<span class="eg-header-title">
|
|
259
|
+
<slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
|
|
260
|
+
{{ cell.column.title }}
|
|
261
|
+
</slot>
|
|
262
|
+
<template v-else>{{ cell.column.title }}</template>
|
|
263
|
+
</span>
|
|
258
264
|
<span
|
|
259
265
|
v-if="!cell.isGroup && isColSortable(cell.column)"
|
|
260
266
|
class="eg-sort-icon"
|
|
@@ -332,7 +338,11 @@
|
|
|
332
338
|
<div
|
|
333
339
|
:key="'sh-' + rowIdx + '-' + (cell.column.key || cell.column.title)"
|
|
334
340
|
class="eg-header-cell"
|
|
335
|
-
:class="
|
|
341
|
+
:class="[
|
|
342
|
+
{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
|
|
343
|
+
cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
|
|
344
|
+
cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
|
|
345
|
+
]"
|
|
336
346
|
:data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
|
|
337
347
|
:data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
|
|
338
348
|
:data-end="cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined"
|
|
@@ -341,10 +351,12 @@
|
|
|
341
351
|
@dblclick="onColHeaderDblClick($event, cell)"
|
|
342
352
|
@contextmenu.prevent="onColHeaderContextMenu($event, cell)"
|
|
343
353
|
>
|
|
344
|
-
<
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
354
|
+
<span class="eg-header-title">
|
|
355
|
+
<slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
|
|
356
|
+
{{ cell.column.title }}
|
|
357
|
+
</slot>
|
|
358
|
+
<template v-else>{{ cell.column.title }}</template>
|
|
359
|
+
</span>
|
|
348
360
|
<span
|
|
349
361
|
v-if="!cell.isGroup && isColSortable(cell.column)"
|
|
350
362
|
class="eg-sort-icon"
|
|
@@ -419,7 +431,11 @@
|
|
|
419
431
|
<div
|
|
420
432
|
:key="'prh-' + rowIdx + '-' + (cell.column.key || cell.column.title)"
|
|
421
433
|
class="eg-header-cell"
|
|
422
|
-
:class="
|
|
434
|
+
:class="[
|
|
435
|
+
{ 'eg-header-group': cell.isGroup, 'eg-header-cell--drag-source': colDrag.active && cell._firstLeafFlatIndex >= colDrag.sourceFirstLeaf && cell._firstLeafFlatIndex < colDrag.sourceFirstLeaf + colDrag.sourceLeafCount },
|
|
436
|
+
cell.column && cell.column.overflowTitle === 'truncate' ? 'eg-header-cell--truncate' : '',
|
|
437
|
+
cell.column && cell.column.overflowTitle === 'wrap' ? 'eg-header-cell--wrap' : ''
|
|
438
|
+
]"
|
|
423
439
|
:data-fi="!cell.isGroup ? cell.column._flatIndex : undefined"
|
|
424
440
|
:data-start="cell.isGroup ? cell._firstLeafFlatIndex : undefined"
|
|
425
441
|
:data-end="cell.isGroup ? cell._firstLeafFlatIndex + cell.colspan - 1 : undefined"
|
|
@@ -428,10 +444,12 @@
|
|
|
428
444
|
@dblclick="onColHeaderDblClick($event, cell)"
|
|
429
445
|
@contextmenu.prevent="onColHeaderContextMenu($event, cell)"
|
|
430
446
|
>
|
|
431
|
-
<
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
447
|
+
<span class="eg-header-title">
|
|
448
|
+
<slot v-if="!cell.isGroup" :name="'header-' + cell.column.key" :column="cell.column">
|
|
449
|
+
{{ cell.column.title }}
|
|
450
|
+
</slot>
|
|
451
|
+
<template v-else>{{ cell.column.title }}</template>
|
|
452
|
+
</span>
|
|
435
453
|
<span
|
|
436
454
|
v-if="!cell.isGroup && isColSortable(cell.column)"
|
|
437
455
|
class="eg-sort-icon"
|
|
@@ -1596,6 +1614,7 @@ const ExcelGridComponent = {
|
|
|
1596
1614
|
|
|
1597
1615
|
data() {
|
|
1598
1616
|
return {
|
|
1617
|
+
calculatedHeaderHeight: null,
|
|
1599
1618
|
// Selection
|
|
1600
1619
|
activeCell: { row: 0, col: 0 },
|
|
1601
1620
|
selectionRanges: [], // [{ startRow, startCol, endRow, endCol }]
|
|
@@ -1878,7 +1897,10 @@ const ExcelGridComponent = {
|
|
|
1878
1897
|
|
|
1879
1898
|
sizeOptions() { return Object.keys(SIZE_CONFIG) },
|
|
1880
1899
|
_rowH() { return this._sizeConf.row },
|
|
1881
|
-
_headerRowH() {
|
|
1900
|
+
_headerRowH() {
|
|
1901
|
+
const baseH = this._sizeConf.header
|
|
1902
|
+
return this.calculatedHeaderHeight && this.calculatedHeaderHeight > baseH ? this.calculatedHeaderHeight : baseH
|
|
1903
|
+
},
|
|
1882
1904
|
_footerRowH() { return this._sizeConf.footer },
|
|
1883
1905
|
_filterRowH() { return this.filterRow ? this._sizeConf.filter : 0 },
|
|
1884
1906
|
|
|
@@ -2538,6 +2560,8 @@ const ExcelGridComponent = {
|
|
|
2538
2560
|
Object.keys(pinFromCols).forEach(key => {
|
|
2539
2561
|
if (!(key in this.internalPinnedColumns)) this.$set(this.internalPinnedColumns, key, pinFromCols[key])
|
|
2540
2562
|
})
|
|
2563
|
+
|
|
2564
|
+
this.$nextTick(() => this._calcHeaderHeight())
|
|
2541
2565
|
}
|
|
2542
2566
|
},
|
|
2543
2567
|
pinnedColumns: {
|
|
@@ -2779,6 +2803,42 @@ const ExcelGridComponent = {
|
|
|
2779
2803
|
},
|
|
2780
2804
|
|
|
2781
2805
|
methods: {
|
|
2806
|
+
_calcHeaderHeight() {
|
|
2807
|
+
if (!this.leafCols) return
|
|
2808
|
+
const wrapCols = this.leafCols.filter(c => c.overflowTitle === 'wrap')
|
|
2809
|
+
if (wrapCols.length === 0) {
|
|
2810
|
+
if (this.calculatedHeaderHeight !== null) this.calculatedHeaderHeight = null
|
|
2811
|
+
return
|
|
2812
|
+
}
|
|
2813
|
+
|
|
2814
|
+
if (!this._measuringDiv) {
|
|
2815
|
+
this._measuringDiv = document.createElement('div')
|
|
2816
|
+
this._measuringDiv.style.position = 'absolute'
|
|
2817
|
+
this._measuringDiv.style.visibility = 'hidden'
|
|
2818
|
+
this._measuringDiv.style.whiteSpace = 'normal'
|
|
2819
|
+
this._measuringDiv.style.wordWrap = 'break-word'
|
|
2820
|
+
this._measuringDiv.style.lineHeight = '1.2'
|
|
2821
|
+
this._measuringDiv.style.fontSize = 'var(--eg-font-size-header, 11px)'
|
|
2822
|
+
this._measuringDiv.style.fontFamily = 'var(--eg-font-family)'
|
|
2823
|
+
this._measuringDiv.style.fontWeight = '600'
|
|
2824
|
+
this._measuringDiv.style.padding = '0 8px'
|
|
2825
|
+
document.body.appendChild(this._measuringDiv)
|
|
2826
|
+
}
|
|
2827
|
+
|
|
2828
|
+
let maxH = 0
|
|
2829
|
+
for (const col of wrapCols) {
|
|
2830
|
+
const width = this.getColW(col._flatIndex)
|
|
2831
|
+
this._measuringDiv.style.width = width + 'px'
|
|
2832
|
+
this._measuringDiv.innerText = col.title || ''
|
|
2833
|
+
const h = this._measuringDiv.offsetHeight
|
|
2834
|
+
if (h > maxH) maxH = h
|
|
2835
|
+
}
|
|
2836
|
+
maxH += 8
|
|
2837
|
+
|
|
2838
|
+
if (this.calculatedHeaderHeight !== maxH) {
|
|
2839
|
+
this.calculatedHeaderHeight = maxH
|
|
2840
|
+
}
|
|
2841
|
+
},
|
|
2782
2842
|
// =========================================================
|
|
2783
2843
|
// VIRTUAL SCROLL
|
|
2784
2844
|
// =========================================================
|
|
@@ -6034,6 +6094,7 @@ const ExcelGridComponent = {
|
|
|
6034
6094
|
const newWidth = Math.max(20, this.resizing.startSize + (e.clientX - this.resizing.startX))
|
|
6035
6095
|
this.$set(this.colWidths, this.resizing.index, newWidth)
|
|
6036
6096
|
this._cellStyleCache = Object.create(null)
|
|
6097
|
+
this._calcHeaderHeight()
|
|
6037
6098
|
} else {
|
|
6038
6099
|
this.resizing.currentPos = e.clientY
|
|
6039
6100
|
this._resizePreviewHeight = Math.max(10, this.resizing.startSize + (e.clientY - this.resizing.startY))
|
|
@@ -6098,6 +6159,7 @@ const ExcelGridComponent = {
|
|
|
6098
6159
|
this.$set(this.colWidths, ci, newWidth)
|
|
6099
6160
|
this.$delete(this.relativeColSpecs, ci)
|
|
6100
6161
|
this._cellStyleCache = Object.create(null)
|
|
6162
|
+
this._calcHeaderHeight()
|
|
6101
6163
|
if (this.fitColumns) {
|
|
6102
6164
|
this.$set(this.fitColumnsOverrides, col.key, true)
|
|
6103
6165
|
this._applyFitColumns()
|
|
@@ -7734,6 +7796,29 @@ export default ExcelGridComponent
|
|
|
7734
7796
|
cursor: pointer;
|
|
7735
7797
|
}
|
|
7736
7798
|
|
|
7799
|
+
.eg-header-title {
|
|
7800
|
+
max-width: 100%;
|
|
7801
|
+
}
|
|
7802
|
+
|
|
7803
|
+
.eg-header-cell--truncate {
|
|
7804
|
+
min-width: 0;
|
|
7805
|
+
}
|
|
7806
|
+
.eg-header-cell--truncate .eg-header-title {
|
|
7807
|
+
overflow: hidden;
|
|
7808
|
+
text-overflow: ellipsis;
|
|
7809
|
+
white-space: nowrap;
|
|
7810
|
+
}
|
|
7811
|
+
|
|
7812
|
+
.eg-header-cell--wrap {
|
|
7813
|
+
white-space: normal;
|
|
7814
|
+
}
|
|
7815
|
+
.eg-header-cell--wrap .eg-header-title {
|
|
7816
|
+
white-space: normal;
|
|
7817
|
+
word-wrap: break-word;
|
|
7818
|
+
line-height: 1.2;
|
|
7819
|
+
text-align: center;
|
|
7820
|
+
}
|
|
7821
|
+
|
|
7737
7822
|
.eg-header-cell:hover { background: var(--eg-color-border-cell, var(--eg-color-border-cell-default)); }
|
|
7738
7823
|
.eg-header-group { background: var(--eg-color-header-group-bg, var(--eg-color-header-group-bg-default)); }
|
|
7739
7824
|
|