@vaadin/grid 24.6.5 → 24.7.0-alpha10
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/package.json +12 -12
- package/src/all-imports.js +1 -1
- package/src/lit/column-renderer-directives.d.ts +1 -1
- package/src/lit/column-renderer-directives.js +1 -1
- package/src/lit/renderer-directives.d.ts +1 -1
- package/src/lit/renderer-directives.js +1 -1
- package/src/lit-all-imports.js +1 -1
- package/src/vaadin-grid-a11y-mixin.d.ts +1 -1
- package/src/vaadin-grid-a11y-mixin.js +1 -1
- package/src/vaadin-grid-active-item-mixin.d.ts +1 -1
- package/src/vaadin-grid-active-item-mixin.js +1 -1
- package/src/vaadin-grid-array-data-provider-mixin.d.ts +1 -1
- package/src/vaadin-grid-array-data-provider-mixin.js +1 -1
- package/src/vaadin-grid-column-auto-width-mixin.d.ts +17 -0
- package/src/vaadin-grid-column-auto-width-mixin.js +307 -0
- package/src/vaadin-grid-column-group-mixin.d.ts +1 -1
- package/src/vaadin-grid-column-group-mixin.js +2 -1
- package/src/vaadin-grid-column-group.d.ts +1 -1
- package/src/vaadin-grid-column-group.js +1 -1
- package/src/vaadin-grid-column-mixin.d.ts +1 -1
- package/src/vaadin-grid-column-mixin.js +9 -6
- package/src/vaadin-grid-column-reordering-mixin.d.ts +1 -1
- package/src/vaadin-grid-column-reordering-mixin.js +1 -1
- package/src/vaadin-grid-column-resizing-mixin.js +1 -1
- package/src/vaadin-grid-column.d.ts +1 -1
- package/src/vaadin-grid-column.js +1 -1
- package/src/vaadin-grid-data-provider-mixin.d.ts +1 -1
- package/src/vaadin-grid-data-provider-mixin.js +1 -1
- package/src/vaadin-grid-drag-and-drop-mixin.d.ts +1 -1
- package/src/vaadin-grid-drag-and-drop-mixin.js +3 -11
- package/src/vaadin-grid-dynamic-columns-mixin.js +5 -11
- package/src/vaadin-grid-event-context-mixin.d.ts +1 -1
- package/src/vaadin-grid-event-context-mixin.js +1 -1
- package/src/vaadin-grid-filter-column-mixin.d.ts +1 -1
- package/src/vaadin-grid-filter-column-mixin.js +1 -1
- package/src/vaadin-grid-filter-column.d.ts +1 -1
- package/src/vaadin-grid-filter-column.js +1 -1
- package/src/vaadin-grid-filter-element-mixin.d.ts +1 -1
- package/src/vaadin-grid-filter-element-mixin.js +1 -1
- package/src/vaadin-grid-filter-mixin.js +1 -1
- package/src/vaadin-grid-filter.d.ts +1 -1
- package/src/vaadin-grid-filter.js +1 -1
- package/src/vaadin-grid-helpers.js +1 -1
- package/src/vaadin-grid-keyboard-navigation-mixin.js +1 -1
- package/src/vaadin-grid-mixin.d.ts +11 -6
- package/src/vaadin-grid-mixin.js +18 -243
- package/src/vaadin-grid-row-details-mixin.d.ts +1 -1
- package/src/vaadin-grid-row-details-mixin.js +1 -1
- package/src/vaadin-grid-scroll-mixin.d.ts +1 -1
- package/src/vaadin-grid-scroll-mixin.js +1 -1
- package/src/vaadin-grid-selection-column-base-mixin.d.ts +6 -1
- package/src/vaadin-grid-selection-column-base-mixin.js +32 -1
- package/src/vaadin-grid-selection-column-mixin.d.ts +1 -1
- package/src/vaadin-grid-selection-column-mixin.js +19 -1
- package/src/vaadin-grid-selection-column.d.ts +1 -1
- package/src/vaadin-grid-selection-column.js +1 -1
- package/src/vaadin-grid-selection-mixin.d.ts +1 -1
- package/src/vaadin-grid-selection-mixin.js +11 -1
- package/src/vaadin-grid-sort-column-mixin.d.ts +1 -1
- package/src/vaadin-grid-sort-column-mixin.js +1 -1
- package/src/vaadin-grid-sort-column.d.ts +1 -1
- package/src/vaadin-grid-sort-column.js +1 -1
- package/src/vaadin-grid-sort-mixin.d.ts +1 -1
- package/src/vaadin-grid-sort-mixin.js +1 -1
- package/src/vaadin-grid-sorter-mixin.d.ts +1 -1
- package/src/vaadin-grid-sorter-mixin.js +2 -1
- package/src/vaadin-grid-sorter.d.ts +1 -1
- package/src/vaadin-grid-sorter.js +1 -1
- package/src/vaadin-grid-styles.js +3 -5
- package/src/vaadin-grid-styling-mixin.d.ts +1 -1
- package/src/vaadin-grid-styling-mixin.js +1 -1
- package/src/vaadin-grid-tree-column-mixin.d.ts +1 -1
- package/src/vaadin-grid-tree-column-mixin.js +1 -5
- package/src/vaadin-grid-tree-column.d.ts +1 -1
- package/src/vaadin-grid-tree-column.js +1 -1
- package/src/vaadin-grid-tree-toggle-mixin.d.ts +1 -1
- package/src/vaadin-grid-tree-toggle-mixin.js +1 -1
- package/src/vaadin-grid-tree-toggle.d.ts +1 -1
- package/src/vaadin-grid-tree-toggle.js +1 -1
- package/src/vaadin-grid.d.ts +2 -1
- package/src/vaadin-grid.js +1 -1
- package/src/vaadin-lit-grid-column-group.js +1 -1
- package/src/vaadin-lit-grid-column.js +1 -1
- package/src/vaadin-lit-grid-filter-column.js +1 -1
- package/src/vaadin-lit-grid-filter.js +1 -1
- package/src/vaadin-lit-grid-selection-column.js +1 -1
- package/src/vaadin-lit-grid-sort-column.js +1 -1
- package/src/vaadin-lit-grid-sorter.js +1 -1
- package/src/vaadin-lit-grid-tree-column.js +1 -1
- package/src/vaadin-lit-grid-tree-toggle.js +1 -1
- package/src/vaadin-lit-grid.js +4 -4
- package/theme/lumo/vaadin-grid-sorter-styles.js +0 -1
- package/theme/material/vaadin-grid-sorter-styles.js +0 -1
- package/web-types.json +8 -4
- package/web-types.lit.json +11 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/grid",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.7.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,19 +46,19 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
48
48
|
"@polymer/polymer": "^3.0.0",
|
|
49
|
-
"@vaadin/a11y-base": "
|
|
50
|
-
"@vaadin/checkbox": "
|
|
51
|
-
"@vaadin/component-base": "
|
|
52
|
-
"@vaadin/lit-renderer": "
|
|
53
|
-
"@vaadin/text-field": "
|
|
54
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
55
|
-
"@vaadin/vaadin-material-styles": "
|
|
56
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
49
|
+
"@vaadin/a11y-base": "24.7.0-alpha10",
|
|
50
|
+
"@vaadin/checkbox": "24.7.0-alpha10",
|
|
51
|
+
"@vaadin/component-base": "24.7.0-alpha10",
|
|
52
|
+
"@vaadin/lit-renderer": "24.7.0-alpha10",
|
|
53
|
+
"@vaadin/text-field": "24.7.0-alpha10",
|
|
54
|
+
"@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
|
|
55
|
+
"@vaadin/vaadin-material-styles": "24.7.0-alpha10",
|
|
56
|
+
"@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
|
|
57
57
|
"lit": "^3.0.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@vaadin/chai-plugins": "
|
|
61
|
-
"@vaadin/test-runner-commands": "
|
|
60
|
+
"@vaadin/chai-plugins": "24.7.0-alpha10",
|
|
61
|
+
"@vaadin/test-runner-commands": "24.7.0-alpha10",
|
|
62
62
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
63
63
|
"sinon": "^18.0.0"
|
|
64
64
|
},
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"web-types.json",
|
|
67
67
|
"web-types.lit.json"
|
|
68
68
|
],
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
|
|
70
70
|
}
|
package/src/all-imports.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2017 -
|
|
3
|
+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { DirectiveResult } from 'lit/directive.js';
|
package/src/lit-all-imports.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { createArrayDataProvider } from './array-data-provider.js';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
|
+
|
|
8
|
+
export declare function ColumnAutoWidthMixin<T extends Constructor<HTMLElement>>(
|
|
9
|
+
base: T,
|
|
10
|
+
): Constructor<ColumnAutoWidthMixinClass> & T;
|
|
11
|
+
|
|
12
|
+
export declare class ColumnAutoWidthMixinClass {
|
|
13
|
+
/**
|
|
14
|
+
* Updates the `width` of all columns which have `autoWidth` set to `true`.
|
|
15
|
+
*/
|
|
16
|
+
recalculateColumnWidths(): void;
|
|
17
|
+
}
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* A mixin providing grid column auto-width functionality.
|
|
10
|
+
*
|
|
11
|
+
* @polymerMixin
|
|
12
|
+
*/
|
|
13
|
+
export const ColumnAutoWidthMixin = (superClass) =>
|
|
14
|
+
class extends superClass {
|
|
15
|
+
static get properties() {
|
|
16
|
+
return {
|
|
17
|
+
/** @private */
|
|
18
|
+
__pendingRecalculateColumnWidths: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
value: true,
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
static get observers() {
|
|
26
|
+
return [
|
|
27
|
+
'__dataProviderChangedAutoWidth(dataProvider)',
|
|
28
|
+
'__columnTreeChangedAutoWidth(_columnTree)',
|
|
29
|
+
'__flatSizeChangedAutoWidth(_flatSize)',
|
|
30
|
+
];
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
constructor() {
|
|
34
|
+
super();
|
|
35
|
+
this.addEventListener('animationend', this.__onAnimationEndAutoWidth);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/** @private */
|
|
39
|
+
__onAnimationEndAutoWidth(e) {
|
|
40
|
+
if (e.animationName.indexOf('vaadin-grid-appear') === 0) {
|
|
41
|
+
this.__tryToRecalculateColumnWidthsIfPending();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/** @private */
|
|
46
|
+
__dataProviderChangedAutoWidth(_dataProvider) {
|
|
47
|
+
if (this.__hasHadRenderedRowsForColumnWidthCalculation) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
// Recalculate column widths when the data provider changes if the grid has not yet had any rendered rows
|
|
51
|
+
// during previous column width calculations
|
|
52
|
+
this.recalculateColumnWidths();
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/** @private */
|
|
56
|
+
__columnTreeChangedAutoWidth(_columnTree) {
|
|
57
|
+
// Column tree changed, recalculate column widths
|
|
58
|
+
queueMicrotask(() => this.recalculateColumnWidths());
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/** @private */
|
|
62
|
+
__flatSizeChangedAutoWidth() {
|
|
63
|
+
// Flat size changed, recalculate column widths if pending (asynchronously, to allow grid to render row elements first)
|
|
64
|
+
requestAnimationFrame(() => this.__tryToRecalculateColumnWidthsIfPending());
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* @protected
|
|
69
|
+
* @override
|
|
70
|
+
*/
|
|
71
|
+
_onDataProviderPageLoaded() {
|
|
72
|
+
super._onDataProviderPageLoaded();
|
|
73
|
+
// Data provider page loaded, recalculate column widths if there's a pending recalculation
|
|
74
|
+
this.__tryToRecalculateColumnWidthsIfPending();
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* @protected
|
|
79
|
+
* @override
|
|
80
|
+
*/
|
|
81
|
+
_updateFrozenColumn() {
|
|
82
|
+
super._updateFrozenColumn();
|
|
83
|
+
// Frozen columns updated, recalculate column widths if there's a pending recalculation
|
|
84
|
+
this.__tryToRecalculateColumnWidthsIfPending();
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/** @private */
|
|
88
|
+
__getIntrinsicWidth(col) {
|
|
89
|
+
if (!this.__intrinsicWidthCache.has(col)) {
|
|
90
|
+
this.__calculateAndCacheIntrinsicWidths([col]);
|
|
91
|
+
}
|
|
92
|
+
return this.__intrinsicWidthCache.get(col);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/** @private */
|
|
96
|
+
__getDistributedWidth(col, innerColumn) {
|
|
97
|
+
if (col == null || col === this) {
|
|
98
|
+
return 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
const columnWidth = Math.max(
|
|
102
|
+
this.__getIntrinsicWidth(col),
|
|
103
|
+
this.__getDistributedWidth((col.assignedSlot || col).parentElement, col),
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
// We're processing a regular grid-column and not a grid-column-group
|
|
107
|
+
if (!innerColumn) {
|
|
108
|
+
return columnWidth;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// At the end, the width of each vaadin-grid-column-group is determined by the sum of the width of its children.
|
|
112
|
+
// Here we determine how much space the vaadin-grid-column-group actually needs to render properly and then we distribute that space
|
|
113
|
+
// to its children, so when we actually do the summation it will be rendered properly.
|
|
114
|
+
// Check out vaadin-grid-column-group:_updateFlexAndWidth
|
|
115
|
+
const columnGroup = col;
|
|
116
|
+
const columnGroupWidth = columnWidth;
|
|
117
|
+
const sumOfWidthOfAllChildColumns = columnGroup._visibleChildColumns
|
|
118
|
+
.map((col) => this.__getIntrinsicWidth(col))
|
|
119
|
+
.reduce((sum, curr) => sum + curr, 0);
|
|
120
|
+
|
|
121
|
+
const extraNecessarySpaceForGridColumnGroup = Math.max(0, columnGroupWidth - sumOfWidthOfAllChildColumns);
|
|
122
|
+
|
|
123
|
+
// The distribution of the extra necessary space is done according to the intrinsic width of each child column.
|
|
124
|
+
// Lets say we need 100 pixels of extra space for the grid-column-group to render properly
|
|
125
|
+
// it has two grid-column children, |100px|300px| in total 400px
|
|
126
|
+
// the first column gets 25px of the additional space (100/400)*100 = 25
|
|
127
|
+
// the second column gets the 75px of the additional space (300/400)*100 = 75
|
|
128
|
+
const proportionOfExtraSpace = this.__getIntrinsicWidth(innerColumn) / sumOfWidthOfAllChildColumns;
|
|
129
|
+
const shareOfInnerColumnFromNecessaryExtraSpace = proportionOfExtraSpace * extraNecessarySpaceForGridColumnGroup;
|
|
130
|
+
|
|
131
|
+
return this.__getIntrinsicWidth(innerColumn) + shareOfInnerColumnFromNecessaryExtraSpace;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/**
|
|
135
|
+
* @param {!Array<!GridColumn>} cols the columns to auto size based on their content width
|
|
136
|
+
* @private
|
|
137
|
+
*/
|
|
138
|
+
_recalculateColumnWidths() {
|
|
139
|
+
// Flush to make sure DOM is up-to-date when measuring the column widths
|
|
140
|
+
this.__virtualizer.flush();
|
|
141
|
+
[...this.$.header.children, ...this.$.footer.children].forEach((row) => {
|
|
142
|
+
if (row.__debounceUpdateHeaderFooterRowVisibility) {
|
|
143
|
+
row.__debounceUpdateHeaderFooterRowVisibility.flush();
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
this.__hasHadRenderedRowsForColumnWidthCalculation ||= this._getRenderedRows().length > 0;
|
|
148
|
+
|
|
149
|
+
this.__intrinsicWidthCache = new Map();
|
|
150
|
+
// Cache the viewport rows to avoid unnecessary reflows while measuring the column widths
|
|
151
|
+
const fvi = this._firstVisibleIndex;
|
|
152
|
+
const lvi = this._lastVisibleIndex;
|
|
153
|
+
this.__viewportRowsCache = this._getRenderedRows().filter((row) => row.index >= fvi && row.index <= lvi);
|
|
154
|
+
|
|
155
|
+
// Pre-cache the intrinsic width of each column
|
|
156
|
+
const cols = this.__getAutoWidthColumns();
|
|
157
|
+
this.__calculateAndCacheIntrinsicWidths(cols);
|
|
158
|
+
|
|
159
|
+
cols.forEach((col) => {
|
|
160
|
+
col.width = `${this.__getDistributedWidth(col)}px`;
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* Toggles the cell content for the given column to use or not use auto width.
|
|
166
|
+
*
|
|
167
|
+
* While content for all the column cells uses auto width (instead of the default 100%),
|
|
168
|
+
* their offsetWidth can be used to calculate the collective intrinsic width of the column.
|
|
169
|
+
*
|
|
170
|
+
* @private
|
|
171
|
+
*/
|
|
172
|
+
__setVisibleCellContentAutoWidth(col, autoWidth) {
|
|
173
|
+
col._allCells
|
|
174
|
+
.filter((cell) => {
|
|
175
|
+
if (this.$.items.contains(cell)) {
|
|
176
|
+
return this.__viewportRowsCache.includes(cell.parentElement);
|
|
177
|
+
}
|
|
178
|
+
return true;
|
|
179
|
+
})
|
|
180
|
+
.forEach((cell) => {
|
|
181
|
+
cell.__measuringAutoWidth = autoWidth;
|
|
182
|
+
|
|
183
|
+
if (cell.__measuringAutoWidth) {
|
|
184
|
+
// Store the original inline width of the cell to restore it later
|
|
185
|
+
cell.__originalWidth = cell.style.width;
|
|
186
|
+
// Prepare the cell for having its intrinsic width measured
|
|
187
|
+
cell.style.width = 'auto';
|
|
188
|
+
cell.style.position = 'absolute';
|
|
189
|
+
} else {
|
|
190
|
+
// Restore the original width
|
|
191
|
+
cell.style.width = cell.__originalWidth;
|
|
192
|
+
delete cell.__originalWidth;
|
|
193
|
+
cell.style.position = '';
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
if (autoWidth) {
|
|
198
|
+
this.$.scroller.setAttribute('measuring-auto-width', '');
|
|
199
|
+
} else {
|
|
200
|
+
this.$.scroller.removeAttribute('measuring-auto-width');
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/**
|
|
205
|
+
* Returns the maximum intrinsic width of the cell content in the given column.
|
|
206
|
+
* Only cells which are marked for measuring auto width are considered.
|
|
207
|
+
*
|
|
208
|
+
* @private
|
|
209
|
+
*/
|
|
210
|
+
__getAutoWidthCellsMaxWidth(col) {
|
|
211
|
+
// Note: _allCells only contains cells which are currently rendered in DOM
|
|
212
|
+
return col._allCells.reduce((width, cell) => {
|
|
213
|
+
// Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
|
|
214
|
+
return cell.__measuringAutoWidth ? Math.max(width, cell.offsetWidth + 1) : width;
|
|
215
|
+
}, 0);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/**
|
|
219
|
+
* Calculates and caches the intrinsic width of each given column.
|
|
220
|
+
*
|
|
221
|
+
* @private
|
|
222
|
+
*/
|
|
223
|
+
__calculateAndCacheIntrinsicWidths(cols) {
|
|
224
|
+
// Make all the columns use auto width at once before measuring to
|
|
225
|
+
// avoid reflows in between the measurements
|
|
226
|
+
cols.forEach((col) => this.__setVisibleCellContentAutoWidth(col, true));
|
|
227
|
+
// Measure and cache
|
|
228
|
+
cols.forEach((col) => {
|
|
229
|
+
const width = this.__getAutoWidthCellsMaxWidth(col);
|
|
230
|
+
this.__intrinsicWidthCache.set(col, width);
|
|
231
|
+
});
|
|
232
|
+
// Reset the columns to use 100% width
|
|
233
|
+
cols.forEach((col) => this.__setVisibleCellContentAutoWidth(col, false));
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* Updates the `width` of all columns which have `autoWidth` set to `true`.
|
|
238
|
+
*/
|
|
239
|
+
recalculateColumnWidths() {
|
|
240
|
+
if (!this.__isReadyForColumnWidthCalculation()) {
|
|
241
|
+
this.__pendingRecalculateColumnWidths = true;
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
this._recalculateColumnWidths();
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/**
|
|
248
|
+
* This internal method should be called whenever a condition that may have prevented
|
|
249
|
+
* previous column width calculation is resolved.
|
|
250
|
+
* @private
|
|
251
|
+
*/
|
|
252
|
+
__tryToRecalculateColumnWidthsIfPending() {
|
|
253
|
+
if (!this.__pendingRecalculateColumnWidths) {
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
this.__pendingRecalculateColumnWidths = false;
|
|
257
|
+
this.recalculateColumnWidths();
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/** @private */
|
|
261
|
+
__getAutoWidthColumns() {
|
|
262
|
+
return this._getColumns().filter((col) => !col.hidden && col.autoWidth);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/**
|
|
266
|
+
* Returns true if the grid is ready for column width calculation, false otherwise.
|
|
267
|
+
* @private
|
|
268
|
+
*/
|
|
269
|
+
__isReadyForColumnWidthCalculation() {
|
|
270
|
+
if (!this._columnTree) {
|
|
271
|
+
return false;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
const undefinedCols = this.__getAutoWidthColumns().filter((col) => !customElements.get(col.localName));
|
|
275
|
+
if (undefinedCols.length) {
|
|
276
|
+
// Some of the columns are not defined yet, wait for them to be defined before measuring
|
|
277
|
+
Promise.all(undefinedCols.map((col) => customElements.whenDefined(col.localName))).then(() => {
|
|
278
|
+
this.__tryToRecalculateColumnWidthsIfPending();
|
|
279
|
+
});
|
|
280
|
+
return false;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
// Delay recalculation if any rows are missing an index.
|
|
284
|
+
// This can happen during the grid's initialization if the recalculation is triggered
|
|
285
|
+
// as a result of the data provider responding synchronously to a page request created
|
|
286
|
+
// in the middle of the virtualizer update loop. In this case, rows after the one that
|
|
287
|
+
// triggered the page request may not have an index property yet. The lack of index
|
|
288
|
+
// prevents _onDataProviderPageReceived from requesting children for these rows,
|
|
289
|
+
// resulting in loading state being set to false and the recalculation beginning
|
|
290
|
+
// before all the data is loaded. Note, rows without index get updated in later iterations
|
|
291
|
+
// of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
|
|
292
|
+
const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
|
|
293
|
+
|
|
294
|
+
const debouncingHiddenChanged = this._debouncerHiddenChanged && this._debouncerHiddenChanged.isActive();
|
|
295
|
+
|
|
296
|
+
const debouncingUpdateFrozenColumn =
|
|
297
|
+
this.__debounceUpdateFrozenColumn && this.__debounceUpdateFrozenColumn.isActive();
|
|
298
|
+
|
|
299
|
+
return (
|
|
300
|
+
!this._dataProviderController.isLoading() &&
|
|
301
|
+
!hasRowsWithUndefinedIndex &&
|
|
302
|
+
!isElementHidden(this) &&
|
|
303
|
+
!debouncingHiddenChanged &&
|
|
304
|
+
!debouncingUpdateFrozenColumn
|
|
305
|
+
);
|
|
306
|
+
}
|
|
307
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { ColumnBaseMixinClass } from './vaadin-grid-column.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { animationFrame } from '@vaadin/component-base/src/async.js';
|
|
@@ -41,6 +41,7 @@ export const GridColumnGroupMixin = (superClass) =>
|
|
|
41
41
|
width: {
|
|
42
42
|
type: String,
|
|
43
43
|
readOnly: true,
|
|
44
|
+
sync: true,
|
|
44
45
|
},
|
|
45
46
|
|
|
46
47
|
/** @private */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { GridDefaultItem } from './vaadin-grid.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { animationFrame } from '@vaadin/component-base/src/async.js';
|
|
@@ -177,10 +177,16 @@ export const ColumnBaseMixin = (superClass) =>
|
|
|
177
177
|
_emptyCells: Array,
|
|
178
178
|
|
|
179
179
|
/** @private */
|
|
180
|
-
_headerCell:
|
|
180
|
+
_headerCell: {
|
|
181
|
+
type: Object,
|
|
182
|
+
sync: true,
|
|
183
|
+
},
|
|
181
184
|
|
|
182
185
|
/** @private */
|
|
183
|
-
_footerCell:
|
|
186
|
+
_footerCell: {
|
|
187
|
+
type: Object,
|
|
188
|
+
sync: true,
|
|
189
|
+
},
|
|
184
190
|
|
|
185
191
|
/** @protected */
|
|
186
192
|
_grid: Object,
|
|
@@ -222,7 +228,6 @@ export const ColumnBaseMixin = (superClass) =>
|
|
|
222
228
|
_headerRenderer: {
|
|
223
229
|
type: Function,
|
|
224
230
|
computed: '_computeHeaderRenderer(headerRenderer, header, __initialized)',
|
|
225
|
-
sync: true,
|
|
226
231
|
},
|
|
227
232
|
|
|
228
233
|
/**
|
|
@@ -249,7 +254,6 @@ export const ColumnBaseMixin = (superClass) =>
|
|
|
249
254
|
_footerRenderer: {
|
|
250
255
|
type: Function,
|
|
251
256
|
computed: '_computeFooterRenderer(footerRenderer, __initialized)',
|
|
252
|
-
sync: true,
|
|
253
257
|
},
|
|
254
258
|
|
|
255
259
|
/**
|
|
@@ -907,7 +911,6 @@ export const GridColumnMixin = (superClass) =>
|
|
|
907
911
|
_renderer: {
|
|
908
912
|
type: Function,
|
|
909
913
|
computed: '_computeRenderer(renderer, __initialized)',
|
|
910
|
-
sync: true,
|
|
911
914
|
},
|
|
912
915
|
|
|
913
916
|
/**
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { addListener } from '@vaadin/component-base/src/gestures.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|