@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
|
@@ -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 { isChrome, isSafari } from '@vaadin/component-base/src/browser-utils.js';
|
|
@@ -25,9 +25,6 @@ const DropLocation = {
|
|
|
25
25
|
EMPTY: 'empty',
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
// Detects if the browser doesn't support HTML5 Drag & Drop API (and falls back to the @vaadin/vaadin-mobile-drag-drop polyfill)
|
|
29
|
-
const usesDnDPolyfill = !('draggable' in document.createElement('div'));
|
|
30
|
-
|
|
31
28
|
/**
|
|
32
29
|
* @polymerMixin
|
|
33
30
|
*/
|
|
@@ -178,13 +175,8 @@ export const DragAndDropMixin = (superClass) =>
|
|
|
178
175
|
|
|
179
176
|
const rowRect = row.getBoundingClientRect();
|
|
180
177
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
e.dataTransfer.setDragImage(row);
|
|
184
|
-
} else {
|
|
185
|
-
// The native drag image needs to be shifted manually to compensate for the touch position offset
|
|
186
|
-
e.dataTransfer.setDragImage(row, e.clientX - rowRect.left, e.clientY - rowRect.top);
|
|
187
|
-
}
|
|
178
|
+
// The native drag image needs to be shifted manually to compensate for the touch position offset
|
|
179
|
+
e.dataTransfer.setDragImage(row, e.clientX - rowRect.left, e.clientY - rowRect.top);
|
|
188
180
|
|
|
189
181
|
let rows = [row];
|
|
190
182
|
if (this._isSelected(row._item)) {
|
|
@@ -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';
|
|
@@ -36,7 +36,10 @@ export const DynamicColumnsMixin = (superClass) =>
|
|
|
36
36
|
/**
|
|
37
37
|
* @protected
|
|
38
38
|
*/
|
|
39
|
-
_columnTree:
|
|
39
|
+
_columnTree: {
|
|
40
|
+
type: Object,
|
|
41
|
+
sync: true,
|
|
42
|
+
},
|
|
40
43
|
};
|
|
41
44
|
}
|
|
42
45
|
|
|
@@ -100,15 +103,6 @@ export const DynamicColumnsMixin = (superClass) =>
|
|
|
100
103
|
const columnTree = this._getColumnTree();
|
|
101
104
|
|
|
102
105
|
if (!arrayEquals(columnTree, this._columnTree)) {
|
|
103
|
-
// Request a synchronoys update for each column
|
|
104
|
-
columnTree.forEach((columnArray) => {
|
|
105
|
-
columnArray.forEach((column) => {
|
|
106
|
-
if (column.performUpdate) {
|
|
107
|
-
column.performUpdate();
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
});
|
|
111
|
-
|
|
112
106
|
this._columnTree = columnTree;
|
|
113
107
|
}
|
|
114
108
|
}
|
|
@@ -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 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 { 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 { microTask } 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 { isKeyboardActive } from '@vaadin/a11y-base/src/focus-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 type { Constructor } from '@open-wc/dedupe-mixin';
|
|
@@ -9,6 +9,7 @@ import type { A11yMixinClass } from './vaadin-grid-a11y-mixin.js';
|
|
|
9
9
|
import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
|
|
10
10
|
import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
|
|
11
11
|
import type { GridBodyRenderer, GridColumn, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
|
|
12
|
+
import type { ColumnAutoWidthMixinClass } from './vaadin-grid-column-auto-width-mixin.js';
|
|
12
13
|
import type { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
|
|
13
14
|
import type {
|
|
14
15
|
DataProviderMixinClass,
|
|
@@ -98,6 +99,11 @@ export type GridDataProviderChangedEvent<TItem> = CustomEvent<{ value: GridDataP
|
|
|
98
99
|
*/
|
|
99
100
|
export type GridExpandedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
|
|
100
101
|
|
|
102
|
+
/**
|
|
103
|
+
* Fired when the user selects or deselects an item through the selection column.
|
|
104
|
+
*/
|
|
105
|
+
export type GridItemToggleEvent<TItem> = CustomEvent<{ item: TItem; selected: boolean; shiftKey: boolean }>;
|
|
106
|
+
|
|
101
107
|
/**
|
|
102
108
|
* Fired when starting to drag grid rows.
|
|
103
109
|
*/
|
|
@@ -157,6 +163,8 @@ export interface GridCustomEventMap<TItem> {
|
|
|
157
163
|
'selected-items-changed': GridSelectedItemsChangedEvent<TItem>;
|
|
158
164
|
|
|
159
165
|
'size-changed': GridSizeChangedEvent;
|
|
166
|
+
|
|
167
|
+
'item-toggle': GridItemToggleEvent<TItem>;
|
|
160
168
|
}
|
|
161
169
|
|
|
162
170
|
export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEventMap<TItem> {}
|
|
@@ -165,6 +173,7 @@ export declare function GridMixin<TItem, T extends Constructor<HTMLElement>>(
|
|
|
165
173
|
base: T,
|
|
166
174
|
): Constructor<A11yMixinClass> &
|
|
167
175
|
Constructor<ActiveItemMixinClass<TItem>> &
|
|
176
|
+
Constructor<ColumnAutoWidthMixinClass> &
|
|
168
177
|
Constructor<ArrayDataProviderMixinClass<TItem>> &
|
|
169
178
|
Constructor<ColumnReorderingMixinClass> &
|
|
170
179
|
Constructor<DataProviderMixinClass<TItem>> &
|
|
@@ -184,6 +193,7 @@ export interface GridMixinClass<TItem>
|
|
|
184
193
|
A11yMixinClass,
|
|
185
194
|
ActiveItemMixinClass<TItem>,
|
|
186
195
|
ArrayDataProviderMixinClass<TItem>,
|
|
196
|
+
ColumnAutoWidthMixinClass,
|
|
187
197
|
DataProviderMixinClass<TItem>,
|
|
188
198
|
RowDetailsMixinClass<TItem>,
|
|
189
199
|
ScrollMixinClass,
|
|
@@ -202,11 +212,6 @@ export interface GridMixinClass<TItem>
|
|
|
202
212
|
*/
|
|
203
213
|
allRowsVisible: boolean;
|
|
204
214
|
|
|
205
|
-
/**
|
|
206
|
-
* Updates the `width` of all columns which have `autoWidth` set to `true`.
|
|
207
|
-
*/
|
|
208
|
-
recalculateColumnWidths(): void;
|
|
209
|
-
|
|
210
215
|
/**
|
|
211
216
|
* Requests an update for the content of cells.
|
|
212
217
|
*
|
package/src/vaadin-grid-mixin.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
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
|
-
import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
7
6
|
import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
|
|
8
7
|
import { animationFrame, microTask } from '@vaadin/component-base/src/async.js';
|
|
9
8
|
import {
|
|
@@ -24,6 +23,7 @@ import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
|
|
|
24
23
|
import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
|
|
25
24
|
import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
|
|
26
25
|
import { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';
|
|
26
|
+
import { ColumnAutoWidthMixin } from './vaadin-grid-column-auto-width-mixin.js';
|
|
27
27
|
import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
|
|
28
28
|
import { ColumnResizingMixin } from './vaadin-grid-column-resizing-mixin.js';
|
|
29
29
|
import { DataProviderMixin } from './vaadin-grid-data-provider-mixin.js';
|
|
@@ -67,20 +67,22 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
|
|
|
67
67
|
* @mixes DragAndDropMixin
|
|
68
68
|
*/
|
|
69
69
|
export const GridMixin = (superClass) =>
|
|
70
|
-
class extends
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
70
|
+
class extends ColumnAutoWidthMixin(
|
|
71
|
+
ArrayDataProviderMixin(
|
|
72
|
+
DataProviderMixin(
|
|
73
|
+
DynamicColumnsMixin(
|
|
74
|
+
ActiveItemMixin(
|
|
75
|
+
ScrollMixin(
|
|
76
|
+
SelectionMixin(
|
|
77
|
+
SortMixin(
|
|
78
|
+
RowDetailsMixin(
|
|
79
|
+
KeyboardNavigationMixin(
|
|
80
|
+
A11yMixin(
|
|
81
|
+
FilterMixin(
|
|
82
|
+
ColumnReorderingMixin(
|
|
83
|
+
ColumnResizingMixin(
|
|
84
|
+
EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(superClass)))),
|
|
85
|
+
),
|
|
84
86
|
),
|
|
85
87
|
),
|
|
86
88
|
),
|
|
@@ -144,12 +146,6 @@ export const GridMixin = (superClass) =>
|
|
|
144
146
|
reflectToAttribute: true,
|
|
145
147
|
},
|
|
146
148
|
|
|
147
|
-
/** @private */
|
|
148
|
-
__pendingRecalculateColumnWidths: {
|
|
149
|
-
type: Boolean,
|
|
150
|
-
value: true,
|
|
151
|
-
},
|
|
152
|
-
|
|
153
149
|
/** @private */
|
|
154
150
|
isAttached: {
|
|
155
151
|
value: false,
|
|
@@ -201,7 +197,6 @@ export const GridMixin = (superClass) =>
|
|
|
201
197
|
connectedCallback() {
|
|
202
198
|
super.connectedCallback();
|
|
203
199
|
this.isAttached = true;
|
|
204
|
-
this.recalculateColumnWidths();
|
|
205
200
|
}
|
|
206
201
|
|
|
207
202
|
/** @protected */
|
|
@@ -273,7 +268,6 @@ export const GridMixin = (superClass) =>
|
|
|
273
268
|
new ResizeObserver(() =>
|
|
274
269
|
setTimeout(() => {
|
|
275
270
|
this.__updateColumnsBodyContentHidden();
|
|
276
|
-
this.__tryToRecalculateColumnWidthsIfPending();
|
|
277
271
|
}),
|
|
278
272
|
).observe(this.$.table);
|
|
279
273
|
|
|
@@ -352,222 +346,6 @@ export const GridMixin = (superClass) =>
|
|
|
352
346
|
}
|
|
353
347
|
}
|
|
354
348
|
|
|
355
|
-
/** @private */
|
|
356
|
-
__getIntrinsicWidth(col) {
|
|
357
|
-
if (!this.__intrinsicWidthCache.has(col)) {
|
|
358
|
-
this.__calculateAndCacheIntrinsicWidths([col]);
|
|
359
|
-
}
|
|
360
|
-
return this.__intrinsicWidthCache.get(col);
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
/** @private */
|
|
364
|
-
__getDistributedWidth(col, innerColumn) {
|
|
365
|
-
if (col == null || col === this) {
|
|
366
|
-
return 0;
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
const columnWidth = Math.max(
|
|
370
|
-
this.__getIntrinsicWidth(col),
|
|
371
|
-
this.__getDistributedWidth((col.assignedSlot || col).parentElement, col),
|
|
372
|
-
);
|
|
373
|
-
|
|
374
|
-
// We're processing a regular grid-column and not a grid-column-group
|
|
375
|
-
if (!innerColumn) {
|
|
376
|
-
return columnWidth;
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
// At the end, the width of each vaadin-grid-column-group is determined by the sum of the width of its children.
|
|
380
|
-
// Here we determine how much space the vaadin-grid-column-group actually needs to render properly and then we distribute that space
|
|
381
|
-
// to its children, so when we actually do the summation it will be rendered properly.
|
|
382
|
-
// Check out vaadin-grid-column-group:_updateFlexAndWidth
|
|
383
|
-
const columnGroup = col;
|
|
384
|
-
const columnGroupWidth = columnWidth;
|
|
385
|
-
const sumOfWidthOfAllChildColumns = columnGroup._visibleChildColumns
|
|
386
|
-
.map((col) => this.__getIntrinsicWidth(col))
|
|
387
|
-
.reduce((sum, curr) => sum + curr, 0);
|
|
388
|
-
|
|
389
|
-
const extraNecessarySpaceForGridColumnGroup = Math.max(0, columnGroupWidth - sumOfWidthOfAllChildColumns);
|
|
390
|
-
|
|
391
|
-
// The distribution of the extra necessary space is done according to the intrinsic width of each child column.
|
|
392
|
-
// Lets say we need 100 pixels of extra space for the grid-column-group to render properly
|
|
393
|
-
// it has two grid-column children, |100px|300px| in total 400px
|
|
394
|
-
// the first column gets 25px of the additional space (100/400)*100 = 25
|
|
395
|
-
// the second column gets the 75px of the additional space (300/400)*100 = 75
|
|
396
|
-
const proportionOfExtraSpace = this.__getIntrinsicWidth(innerColumn) / sumOfWidthOfAllChildColumns;
|
|
397
|
-
const shareOfInnerColumnFromNecessaryExtraSpace = proportionOfExtraSpace * extraNecessarySpaceForGridColumnGroup;
|
|
398
|
-
|
|
399
|
-
return this.__getIntrinsicWidth(innerColumn) + shareOfInnerColumnFromNecessaryExtraSpace;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
/**
|
|
403
|
-
* @param {!Array<!GridColumn>} cols the columns to auto size based on their content width
|
|
404
|
-
* @private
|
|
405
|
-
*/
|
|
406
|
-
_recalculateColumnWidths(cols) {
|
|
407
|
-
// Flush to make sure DOM is up-to-date when measuring the column widths
|
|
408
|
-
this.__virtualizer.flush();
|
|
409
|
-
[...this.$.header.children, ...this.$.footer.children].forEach((row) => {
|
|
410
|
-
if (row.__debounceUpdateHeaderFooterRowVisibility) {
|
|
411
|
-
row.__debounceUpdateHeaderFooterRowVisibility.flush();
|
|
412
|
-
}
|
|
413
|
-
});
|
|
414
|
-
|
|
415
|
-
// Flush to account for any changes to the visibility of the columns
|
|
416
|
-
if (this._debouncerHiddenChanged) {
|
|
417
|
-
this._debouncerHiddenChanged.flush();
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
// Flush frozen column updates
|
|
421
|
-
if (this.__debounceUpdateFrozenColumn) {
|
|
422
|
-
this.__debounceUpdateFrozenColumn.flush();
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
this.__intrinsicWidthCache = new Map();
|
|
426
|
-
// Cache the viewport rows to avoid unnecessary reflows while measuring the column widths
|
|
427
|
-
const fvi = this._firstVisibleIndex;
|
|
428
|
-
const lvi = this._lastVisibleIndex;
|
|
429
|
-
this.__viewportRowsCache = this._getRenderedRows().filter((row) => row.index >= fvi && row.index <= lvi);
|
|
430
|
-
|
|
431
|
-
// Pre-cache the intrinsic width of each column
|
|
432
|
-
this.__calculateAndCacheIntrinsicWidths(cols);
|
|
433
|
-
|
|
434
|
-
cols.forEach((col) => {
|
|
435
|
-
col.width = `${this.__getDistributedWidth(col)}px`;
|
|
436
|
-
});
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
/**
|
|
440
|
-
* Toggles the cell content for the given column to use or not use auto width.
|
|
441
|
-
*
|
|
442
|
-
* While content for all the column cells uses auto width (instead of the default 100%),
|
|
443
|
-
* their offsetWidth can be used to calculate the collective intrinsic width of the column.
|
|
444
|
-
*
|
|
445
|
-
* @private
|
|
446
|
-
*/
|
|
447
|
-
__setVisibleCellContentAutoWidth(col, autoWidth) {
|
|
448
|
-
col._allCells
|
|
449
|
-
.filter((cell) => {
|
|
450
|
-
if (this.$.items.contains(cell)) {
|
|
451
|
-
return this.__viewportRowsCache.includes(cell.parentElement);
|
|
452
|
-
}
|
|
453
|
-
return true;
|
|
454
|
-
})
|
|
455
|
-
.forEach((cell) => {
|
|
456
|
-
cell.__measuringAutoWidth = autoWidth;
|
|
457
|
-
|
|
458
|
-
if (cell.__measuringAutoWidth) {
|
|
459
|
-
// Store the original inline width of the cell to restore it later
|
|
460
|
-
cell.__originalWidth = cell.style.width;
|
|
461
|
-
// Prepare the cell for having its intrinsic width measured
|
|
462
|
-
cell.style.width = 'auto';
|
|
463
|
-
cell.style.position = 'absolute';
|
|
464
|
-
} else {
|
|
465
|
-
// Restore the original width
|
|
466
|
-
cell.style.width = cell.__originalWidth;
|
|
467
|
-
delete cell.__originalWidth;
|
|
468
|
-
cell.style.position = '';
|
|
469
|
-
}
|
|
470
|
-
});
|
|
471
|
-
|
|
472
|
-
if (autoWidth) {
|
|
473
|
-
this.$.scroller.setAttribute('measuring-auto-width', '');
|
|
474
|
-
} else {
|
|
475
|
-
this.$.scroller.removeAttribute('measuring-auto-width');
|
|
476
|
-
}
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
/**
|
|
480
|
-
* Returns the maximum intrinsic width of the cell content in the given column.
|
|
481
|
-
* Only cells which are marked for measuring auto width are considered.
|
|
482
|
-
*
|
|
483
|
-
* @private
|
|
484
|
-
*/
|
|
485
|
-
__getAutoWidthCellsMaxWidth(col) {
|
|
486
|
-
// Note: _allCells only contains cells which are currently rendered in DOM
|
|
487
|
-
return col._allCells.reduce((width, cell) => {
|
|
488
|
-
// Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
|
|
489
|
-
return cell.__measuringAutoWidth ? Math.max(width, cell.offsetWidth + 1) : width;
|
|
490
|
-
}, 0);
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
/**
|
|
494
|
-
* Calculates and caches the intrinsic width of each given column.
|
|
495
|
-
*
|
|
496
|
-
* @private
|
|
497
|
-
*/
|
|
498
|
-
__calculateAndCacheIntrinsicWidths(cols) {
|
|
499
|
-
// Make all the columns use auto width at once before measuring to
|
|
500
|
-
// avoid reflows in between the measurements
|
|
501
|
-
cols.forEach((col) => this.__setVisibleCellContentAutoWidth(col, true));
|
|
502
|
-
// Measure and cache
|
|
503
|
-
cols.forEach((col) => {
|
|
504
|
-
const width = this.__getAutoWidthCellsMaxWidth(col);
|
|
505
|
-
this.__intrinsicWidthCache.set(col, width);
|
|
506
|
-
});
|
|
507
|
-
// Reset the columns to use 100% width
|
|
508
|
-
cols.forEach((col) => this.__setVisibleCellContentAutoWidth(col, false));
|
|
509
|
-
}
|
|
510
|
-
|
|
511
|
-
/**
|
|
512
|
-
* Updates the `width` of all columns which have `autoWidth` set to `true`.
|
|
513
|
-
*/
|
|
514
|
-
recalculateColumnWidths() {
|
|
515
|
-
if (!this._columnTree) {
|
|
516
|
-
return; // No columns
|
|
517
|
-
}
|
|
518
|
-
if (isElementHidden(this) || this._dataProviderController.isLoading()) {
|
|
519
|
-
this.__pendingRecalculateColumnWidths = true;
|
|
520
|
-
return;
|
|
521
|
-
}
|
|
522
|
-
const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
|
|
523
|
-
|
|
524
|
-
const undefinedCols = cols.filter((col) => !customElements.get(col.localName));
|
|
525
|
-
if (undefinedCols.length) {
|
|
526
|
-
// Some of the columns are not defined yet, wait for them to be defined before measuring
|
|
527
|
-
Promise.all(undefinedCols.map((col) => customElements.whenDefined(col.localName))).then(() => {
|
|
528
|
-
this._recalculateColumnWidths(cols);
|
|
529
|
-
});
|
|
530
|
-
} else {
|
|
531
|
-
this._recalculateColumnWidths(cols);
|
|
532
|
-
}
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
/** @private */
|
|
536
|
-
__tryToRecalculateColumnWidthsIfPending() {
|
|
537
|
-
if (!this.__pendingRecalculateColumnWidths || isElementHidden(this) || this._dataProviderController.isLoading()) {
|
|
538
|
-
return;
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
// Delay recalculation if any rows are missing an index.
|
|
542
|
-
// This can happen during the grid's initialization if the recalculation is triggered
|
|
543
|
-
// as a result of the data provider responding synchronously to a page request created
|
|
544
|
-
// in the middle of the virtualizer update loop. In this case, rows after the one that
|
|
545
|
-
// triggered the page request may not have an index property yet. The lack of index
|
|
546
|
-
// prevents _onDataProviderPageReceived from requesting children for these rows,
|
|
547
|
-
// resulting in loading state being set to false and the recalculation beginning
|
|
548
|
-
// before all the data is loaded. Note, rows without index get updated in later iterations
|
|
549
|
-
// of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
|
|
550
|
-
const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
|
|
551
|
-
if (hasRowsWithUndefinedIndex) {
|
|
552
|
-
return;
|
|
553
|
-
}
|
|
554
|
-
|
|
555
|
-
const hasRowsWithClientHeight = [...this.$.items.children].some((row) => row.clientHeight > 0);
|
|
556
|
-
if (hasRowsWithClientHeight) {
|
|
557
|
-
this.__pendingRecalculateColumnWidths = false;
|
|
558
|
-
this.recalculateColumnWidths();
|
|
559
|
-
}
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
/**
|
|
563
|
-
* @protected
|
|
564
|
-
* @override
|
|
565
|
-
*/
|
|
566
|
-
_onDataProviderPageLoaded() {
|
|
567
|
-
super._onDataProviderPageLoaded();
|
|
568
|
-
this.__tryToRecalculateColumnWidthsIfPending();
|
|
569
|
-
}
|
|
570
|
-
|
|
571
349
|
/** @private */
|
|
572
350
|
_createScrollerRows(count) {
|
|
573
351
|
const rows = [];
|
|
@@ -595,7 +373,6 @@ export const GridMixin = (superClass) =>
|
|
|
595
373
|
animationFrame,
|
|
596
374
|
() => {
|
|
597
375
|
this._afterScroll();
|
|
598
|
-
this.__tryToRecalculateColumnWidthsIfPending();
|
|
599
376
|
},
|
|
600
377
|
);
|
|
601
378
|
return rows;
|
|
@@ -881,7 +658,6 @@ export const GridMixin = (superClass) =>
|
|
|
881
658
|
/** @private */
|
|
882
659
|
_columnTreeChanged(columnTree) {
|
|
883
660
|
this._renderColumnTree(columnTree);
|
|
884
|
-
this.recalculateColumnWidths();
|
|
885
661
|
this.__updateColumnsBodyContentHidden();
|
|
886
662
|
}
|
|
887
663
|
|
|
@@ -1020,7 +796,6 @@ export const GridMixin = (superClass) =>
|
|
|
1020
796
|
// ShadyCSS applies scoping suffixes to animation names
|
|
1021
797
|
if (e.animationName.indexOf('vaadin-grid-appear') === 0) {
|
|
1022
798
|
e.stopPropagation();
|
|
1023
|
-
this.__tryToRecalculateColumnWidthsIfPending();
|
|
1024
799
|
|
|
1025
800
|
// Ensure header and footer have tabbable elements
|
|
1026
801
|
this._resetKeyboardNavigation();
|
|
@@ -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 } 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';
|
|
@@ -39,6 +39,11 @@ export declare class GridSelectionColumnBaseMixinClass<TItem> {
|
|
|
39
39
|
*/
|
|
40
40
|
dragSelect: boolean;
|
|
41
41
|
|
|
42
|
+
/**
|
|
43
|
+
* Indicates whether the shift key is currently pressed.
|
|
44
|
+
*/
|
|
45
|
+
protected _shiftKeyDown: boolean;
|
|
46
|
+
|
|
42
47
|
/**
|
|
43
48
|
* Override to handle the user selecting all items.
|
|
44
49
|
*/
|