@vaadin/grid 24.4.0-alpha2 → 24.4.0-alpha20
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/README.md +0 -1
- package/package.json +10 -10
- package/src/vaadin-grid-a11y-mixin.js +3 -1
- package/src/vaadin-grid-column-mixin.js +8 -4
- package/src/vaadin-grid-column-reordering-mixin.js +17 -4
- package/src/vaadin-grid-data-provider-mixin.js +1 -5
- package/src/vaadin-grid-filter-column-mixin.js +1 -26
- package/src/vaadin-grid-filter-element-mixin.js +2 -10
- package/src/vaadin-grid-keyboard-navigation-mixin.js +16 -6
- package/src/vaadin-grid-mixin.js +44 -15
- package/src/vaadin-grid-scroll-mixin.d.ts +2 -0
- package/src/vaadin-grid-scroll-mixin.js +20 -8
- package/src/vaadin-grid-selection-column-base-mixin.js +18 -0
- package/src/vaadin-grid-tree-toggle-mixin.js +2 -4
- 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 +1 -1
- package/theme/lumo/all-imports.d.ts +11 -0
- package/theme/lumo/lit-all-imports.d.ts +11 -0
- package/theme/lumo/vaadin-grid-column-group.d.ts +1 -0
- package/theme/lumo/vaadin-grid-column.d.ts +1 -0
- package/theme/lumo/vaadin-grid-filter-column.d.ts +2 -0
- package/theme/lumo/vaadin-grid-filter.d.ts +2 -0
- package/theme/lumo/vaadin-grid-selection-column.d.ts +2 -0
- package/theme/lumo/vaadin-grid-sort-column.d.ts +2 -0
- package/theme/lumo/vaadin-grid-sorter-styles.d.ts +3 -0
- package/theme/lumo/vaadin-grid-sorter.d.ts +2 -0
- package/theme/lumo/vaadin-grid-styles.d.ts +6 -0
- package/theme/lumo/vaadin-grid-styles.js +0 -1
- package/theme/lumo/vaadin-grid-tree-column.d.ts +2 -0
- package/theme/lumo/vaadin-grid-tree-toggle-styles.d.ts +3 -0
- package/theme/lumo/vaadin-grid-tree-toggle.d.ts +2 -0
- package/theme/lumo/vaadin-grid.d.ts +2 -0
- package/theme/lumo/vaadin-lit-grid-column-group.d.ts +1 -0
- package/theme/lumo/vaadin-lit-grid-column.d.ts +1 -0
- package/theme/lumo/vaadin-lit-grid-filter-column.d.ts +2 -0
- package/theme/lumo/vaadin-lit-grid-filter.d.ts +2 -0
- package/theme/lumo/vaadin-lit-grid-filter.js +1 -2
- package/theme/lumo/vaadin-lit-grid-selection-column.d.ts +2 -0
- package/theme/lumo/vaadin-lit-grid-selection-column.js +1 -1
- package/theme/lumo/vaadin-lit-grid-sort-column.d.ts +2 -0
- package/theme/lumo/vaadin-lit-grid-sorter.d.ts +2 -0
- package/theme/lumo/vaadin-lit-grid-tree-column.d.ts +2 -0
- package/theme/lumo/vaadin-lit-grid-tree-toggle.d.ts +2 -0
- package/theme/lumo/vaadin-lit-grid.d.ts +2 -0
- package/theme/material/all-imports.d.ts +11 -0
- package/theme/material/lit-all-imports.d.ts +11 -0
- package/theme/material/vaadin-grid-column-group.d.ts +1 -0
- package/theme/material/vaadin-grid-column.d.ts +1 -0
- package/theme/material/vaadin-grid-filter-column.d.ts +2 -0
- package/theme/material/vaadin-grid-filter.d.ts +2 -0
- package/theme/material/vaadin-grid-selection-column.d.ts +2 -0
- package/theme/material/vaadin-grid-sort-column.d.ts +2 -0
- package/theme/material/vaadin-grid-sorter-styles.d.ts +2 -0
- package/theme/material/vaadin-grid-sorter.d.ts +2 -0
- package/theme/material/vaadin-grid-styles.d.ts +2 -0
- package/theme/material/vaadin-grid-tree-column.d.ts +2 -0
- package/theme/material/vaadin-grid-tree-toggle-styles.d.ts +3 -0
- package/theme/material/vaadin-grid-tree-toggle.d.ts +2 -0
- package/theme/material/vaadin-grid.d.ts +2 -0
- package/theme/material/vaadin-lit-grid-column-group.d.ts +1 -0
- package/theme/material/vaadin-lit-grid-column.d.ts +1 -0
- package/theme/material/vaadin-lit-grid-filter-column.d.ts +2 -0
- package/theme/material/vaadin-lit-grid-filter.d.ts +2 -0
- package/theme/material/vaadin-lit-grid-filter.js +1 -2
- package/theme/material/vaadin-lit-grid-selection-column.d.ts +2 -0
- package/theme/material/vaadin-lit-grid-selection-column.js +1 -1
- package/theme/material/vaadin-lit-grid-sort-column.d.ts +2 -0
- package/theme/material/vaadin-lit-grid-sorter.d.ts +2 -0
- package/theme/material/vaadin-lit-grid-tree-column.d.ts +2 -0
- package/theme/material/vaadin-lit-grid-tree-toggle.d.ts +2 -0
- package/theme/material/vaadin-lit-grid.d.ts +2 -0
- package/vaadin-grid.d.ts +0 -1
- package/vaadin-grid.js +0 -1
- package/vaadin-lit-grid.d.ts +0 -1
- package/vaadin-lit-grid.js +0 -1
- package/web-types.json +12 -8
- package/web-types.lit.json +5 -5
package/README.md
CHANGED
|
@@ -5,7 +5,6 @@ A web component for showing tabular data.
|
|
|
5
5
|
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/grid)
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@vaadin/grid)
|
|
8
|
-
[](https://discord.gg/PHmkCKC)
|
|
9
8
|
|
|
10
9
|
```html
|
|
11
10
|
<vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/grid",
|
|
3
|
-
"version": "24.4.0-
|
|
3
|
+
"version": "24.4.0-alpha20",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
48
48
|
"@polymer/polymer": "^3.0.0",
|
|
49
|
-
"@vaadin/a11y-base": "24.4.0-
|
|
50
|
-
"@vaadin/checkbox": "24.4.0-
|
|
51
|
-
"@vaadin/component-base": "24.4.0-
|
|
52
|
-
"@vaadin/lit-renderer": "24.4.0-
|
|
53
|
-
"@vaadin/text-field": "24.4.0-
|
|
54
|
-
"@vaadin/vaadin-lumo-styles": "24.4.0-
|
|
55
|
-
"@vaadin/vaadin-material-styles": "24.4.0-
|
|
56
|
-
"@vaadin/vaadin-themable-mixin": "24.4.0-
|
|
49
|
+
"@vaadin/a11y-base": "24.4.0-alpha20",
|
|
50
|
+
"@vaadin/checkbox": "24.4.0-alpha20",
|
|
51
|
+
"@vaadin/component-base": "24.4.0-alpha20",
|
|
52
|
+
"@vaadin/lit-renderer": "24.4.0-alpha20",
|
|
53
|
+
"@vaadin/text-field": "24.4.0-alpha20",
|
|
54
|
+
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha20",
|
|
55
|
+
"@vaadin/vaadin-material-styles": "24.4.0-alpha20",
|
|
56
|
+
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha20",
|
|
57
57
|
"lit": "^3.0.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"web-types.json",
|
|
66
66
|
"web-types.lit.json"
|
|
67
67
|
],
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "9d2eacc494eb27658ba9298be6656815912637be"
|
|
69
69
|
}
|
|
@@ -16,7 +16,9 @@ export const A11yMixin = (superClass) =>
|
|
|
16
16
|
|
|
17
17
|
/** @private */
|
|
18
18
|
_a11yGetHeaderRowCount(_columnTree) {
|
|
19
|
-
return _columnTree.filter((level) =>
|
|
19
|
+
return _columnTree.filter((level) =>
|
|
20
|
+
level.some((col) => col.headerRenderer || (col.path && col.header !== null) || col.header),
|
|
21
|
+
).length;
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
/** @private */
|
|
@@ -598,8 +598,14 @@ export const ColumnBaseMixin = (superClass) =>
|
|
|
598
598
|
|
|
599
599
|
/** @protected */
|
|
600
600
|
_runRenderer(renderer, cell, model) {
|
|
601
|
+
const isVisibleBodyCell = model && model.item && !cell.parentElement.hidden;
|
|
602
|
+
const shouldRender = isVisibleBodyCell || renderer === this._headerRenderer || renderer === this._footerRenderer;
|
|
603
|
+
if (!shouldRender) {
|
|
604
|
+
return;
|
|
605
|
+
}
|
|
606
|
+
|
|
601
607
|
const args = [cell._content, this];
|
|
602
|
-
if (
|
|
608
|
+
if (isVisibleBodyCell) {
|
|
603
609
|
args.push(model);
|
|
604
610
|
}
|
|
605
611
|
|
|
@@ -634,9 +640,7 @@ export const ColumnBaseMixin = (superClass) =>
|
|
|
634
640
|
|
|
635
641
|
cell._renderer = renderer;
|
|
636
642
|
|
|
637
|
-
|
|
638
|
-
this._runRenderer(renderer, cell, model);
|
|
639
|
-
}
|
|
643
|
+
this._runRenderer(renderer, cell, model);
|
|
640
644
|
});
|
|
641
645
|
}
|
|
642
646
|
|
|
@@ -237,13 +237,26 @@ export const ColumnReorderingMixin = (superClass) =>
|
|
|
237
237
|
if (!this._draggedColumn) {
|
|
238
238
|
this.$.scroller.toggleAttribute('no-content-pointer-events', true);
|
|
239
239
|
}
|
|
240
|
-
const
|
|
240
|
+
const elementFromPoint = this.shadowRoot.elementFromPoint(x, y);
|
|
241
241
|
this.$.scroller.toggleAttribute('no-content-pointer-events', false);
|
|
242
242
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
243
|
+
return this._getCellFromElement(elementFromPoint);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/** @private */
|
|
247
|
+
_getCellFromElement(element) {
|
|
248
|
+
if (element) {
|
|
249
|
+
// Check if element is a cell
|
|
250
|
+
if (element._column) {
|
|
251
|
+
return element;
|
|
252
|
+
}
|
|
253
|
+
// Check if element is the cell of a focus button mode column
|
|
254
|
+
const { parentElement } = element;
|
|
255
|
+
if (parentElement && parentElement._focusButton === element) {
|
|
256
|
+
return parentElement;
|
|
257
|
+
}
|
|
246
258
|
}
|
|
259
|
+
return null;
|
|
247
260
|
}
|
|
248
261
|
|
|
249
262
|
/**
|
|
@@ -206,10 +206,6 @@ export const DataProviderMixin = (superClass) =>
|
|
|
206
206
|
* @protected
|
|
207
207
|
*/
|
|
208
208
|
_getItem(index, el) {
|
|
209
|
-
if (index >= this._flatSize) {
|
|
210
|
-
return;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
209
|
el.index = index;
|
|
214
210
|
|
|
215
211
|
const { item } = this._dataProviderController.getFlatIndexContext(index);
|
|
@@ -374,7 +370,7 @@ export const DataProviderMixin = (superClass) =>
|
|
|
374
370
|
this._hasData = false;
|
|
375
371
|
this.__updateVisibleRows();
|
|
376
372
|
|
|
377
|
-
if (!this.__virtualizer.size) {
|
|
373
|
+
if (!this.__virtualizer || !this.__virtualizer.size) {
|
|
378
374
|
this._dataProviderController.loadFirstPage();
|
|
379
375
|
}
|
|
380
376
|
}
|
|
@@ -30,13 +30,7 @@ export const GridFilterColumnMixin = (superClass) =>
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
static get observers() {
|
|
33
|
-
return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
constructor() {
|
|
37
|
-
super();
|
|
38
|
-
|
|
39
|
-
this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
|
|
33
|
+
return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)'];
|
|
40
34
|
}
|
|
41
35
|
|
|
42
36
|
/**
|
|
@@ -54,16 +48,12 @@ export const GridFilterColumnMixin = (superClass) =>
|
|
|
54
48
|
textField.setAttribute('theme', 'small');
|
|
55
49
|
textField.setAttribute('style', 'max-width: 100%;');
|
|
56
50
|
textField.setAttribute('focus-target', '');
|
|
57
|
-
textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
|
|
58
51
|
filter.appendChild(textField);
|
|
59
52
|
root.appendChild(filter);
|
|
60
53
|
}
|
|
61
54
|
|
|
62
55
|
filter.path = this.path;
|
|
63
|
-
filter.value = this._filterValue;
|
|
64
56
|
|
|
65
|
-
textField.__rendererValue = this._filterValue;
|
|
66
|
-
textField.value = this._filterValue;
|
|
67
57
|
textField.label = this.__getHeader(this.header, this.path);
|
|
68
58
|
}
|
|
69
59
|
|
|
@@ -78,21 +68,6 @@ export const GridFilterColumnMixin = (superClass) =>
|
|
|
78
68
|
return this._defaultHeaderRenderer;
|
|
79
69
|
}
|
|
80
70
|
|
|
81
|
-
/**
|
|
82
|
-
* Updates the internal filter value once the filter text field is changed.
|
|
83
|
-
* The listener handles only user-fired events.
|
|
84
|
-
*
|
|
85
|
-
* @private
|
|
86
|
-
*/
|
|
87
|
-
__onFilterValueChanged(e) {
|
|
88
|
-
// Skip if the value is changed by the renderer.
|
|
89
|
-
if (e.detail.value === e.target.__rendererValue) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
this._filterValue = e.detail.value;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
71
|
/** @private */
|
|
97
72
|
__getHeader(header, path) {
|
|
98
73
|
if (header) {
|
|
@@ -69,12 +69,8 @@ export const GridFilterElementMixin = (superClass) =>
|
|
|
69
69
|
|
|
70
70
|
this._filterController = new SlotController(this, '', 'vaadin-text-field', {
|
|
71
71
|
initializer: (field) => {
|
|
72
|
-
field.addEventListener('
|
|
73
|
-
|
|
74
|
-
field.__previousValue = e.detail.value;
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
this.value = e.detail.value;
|
|
72
|
+
field.addEventListener('input', (e) => {
|
|
73
|
+
this.value = e.target.value;
|
|
78
74
|
});
|
|
79
75
|
|
|
80
76
|
this._textField = field;
|
|
@@ -88,12 +84,8 @@ export const GridFilterElementMixin = (superClass) =>
|
|
|
88
84
|
if (path === undefined || value === undefined || !textField) {
|
|
89
85
|
return;
|
|
90
86
|
}
|
|
91
|
-
if (this._previousValue === undefined && value === '') {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
87
|
|
|
95
88
|
textField.value = value;
|
|
96
|
-
this._previousValue = value;
|
|
97
89
|
|
|
98
90
|
this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
|
|
99
91
|
this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
|
|
@@ -109,6 +109,11 @@ export const KeyboardNavigationMixin = (superClass) =>
|
|
|
109
109
|
});
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
/** @private */
|
|
113
|
+
get _visibleItemsCount() {
|
|
114
|
+
return this._lastVisibleIndex - this._firstVisibleIndex - 1;
|
|
115
|
+
}
|
|
116
|
+
|
|
112
117
|
/** @protected */
|
|
113
118
|
ready() {
|
|
114
119
|
super.ready();
|
|
@@ -304,8 +309,9 @@ export const KeyboardNavigationMixin = (superClass) =>
|
|
|
304
309
|
_onNavigationKeyDown(e, key) {
|
|
305
310
|
e.preventDefault();
|
|
306
311
|
|
|
307
|
-
const visibleItemsCount = this._lastVisibleIndex - this._firstVisibleIndex - 1;
|
|
308
312
|
const isRTL = this.__isRTL;
|
|
313
|
+
const activeRow = e.composedPath().find((el) => this.__isRow(el));
|
|
314
|
+
const activeCell = e.composedPath().find((el) => this.__isCell(el));
|
|
309
315
|
|
|
310
316
|
// Handle keyboard interaction as defined in:
|
|
311
317
|
// https://w3c.github.io/aria-practices/#keyboard-interaction-24
|
|
@@ -350,18 +356,22 @@ export const KeyboardNavigationMixin = (superClass) =>
|
|
|
350
356
|
dy = -1;
|
|
351
357
|
break;
|
|
352
358
|
case 'PageDown':
|
|
353
|
-
|
|
359
|
+
// Check if the active group is body
|
|
360
|
+
if (this.$.items.contains(activeRow)) {
|
|
361
|
+
const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
|
|
362
|
+
// Scroll the current row to the top...
|
|
363
|
+
this._scrollToFlatIndex(currentRowIndex);
|
|
364
|
+
}
|
|
365
|
+
// ...only then measure the visible items count
|
|
366
|
+
dy = this._visibleItemsCount;
|
|
354
367
|
break;
|
|
355
368
|
case 'PageUp':
|
|
356
|
-
dy = -
|
|
369
|
+
dy = -this._visibleItemsCount;
|
|
357
370
|
break;
|
|
358
371
|
default:
|
|
359
372
|
break;
|
|
360
373
|
}
|
|
361
374
|
|
|
362
|
-
const activeRow = e.composedPath().find((el) => this.__isRow(el));
|
|
363
|
-
const activeCell = e.composedPath().find((el) => this.__isCell(el));
|
|
364
|
-
|
|
365
375
|
if ((this.__rowFocusMode && !activeRow) || (!this.__rowFocusMode && !activeCell)) {
|
|
366
376
|
// When using a screen reader, it's possible that neither a cell nor a row is focused.
|
|
367
377
|
return;
|
package/src/vaadin-grid-mixin.js
CHANGED
|
@@ -316,11 +316,6 @@ export const GridMixin = (superClass) =>
|
|
|
316
316
|
}
|
|
317
317
|
}
|
|
318
318
|
|
|
319
|
-
/** @private */
|
|
320
|
-
__hasRowsWithClientHeight() {
|
|
321
|
-
return !!Array.from(this.$.items.children).filter((row) => row.clientHeight).length;
|
|
322
|
-
}
|
|
323
|
-
|
|
324
319
|
/** @private */
|
|
325
320
|
__getIntrinsicWidth(col) {
|
|
326
321
|
if (!this.__intrinsicWidthCache.has(col)) {
|
|
@@ -484,17 +479,40 @@ export const GridMixin = (superClass) =>
|
|
|
484
479
|
return;
|
|
485
480
|
}
|
|
486
481
|
const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
|
|
487
|
-
|
|
482
|
+
|
|
483
|
+
const undefinedCols = cols.filter((col) => !customElements.get(col.localName));
|
|
484
|
+
if (undefinedCols.length) {
|
|
485
|
+
// Some of the columns are not defined yet, wait for them to be defined before measuring
|
|
486
|
+
Promise.all(undefinedCols.map((col) => customElements.whenDefined(col.localName))).then(() => {
|
|
487
|
+
this._recalculateColumnWidths(cols);
|
|
488
|
+
});
|
|
489
|
+
} else {
|
|
490
|
+
this._recalculateColumnWidths(cols);
|
|
491
|
+
}
|
|
488
492
|
}
|
|
489
493
|
|
|
490
494
|
/** @private */
|
|
491
495
|
__tryToRecalculateColumnWidthsIfPending() {
|
|
492
|
-
if (
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
496
|
+
if (!this.__pendingRecalculateColumnWidths || isElementHidden(this) || this._dataProviderController.isLoading()) {
|
|
497
|
+
return;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
// Delay recalculation if any rows are missing an index.
|
|
501
|
+
// This can happen during the grid's initialization if the recalculation is triggered
|
|
502
|
+
// as a result of the data provider responding synchronously to a page request created
|
|
503
|
+
// in the middle of the virtualizer update loop. In this case, rows after the one that
|
|
504
|
+
// triggered the page request may not have an index property yet. The lack of index
|
|
505
|
+
// prevents _onDataProviderPageReceived from requesting children for these rows,
|
|
506
|
+
// resulting in loading state being set to false and the recalculation beginning
|
|
507
|
+
// before all the data is loaded. Note, rows without index get updated in later iterations
|
|
508
|
+
// of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
|
|
509
|
+
const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
|
|
510
|
+
if (hasRowsWithUndefinedIndex) {
|
|
511
|
+
return;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
const hasRowsWithClientHeight = [...this.$.items.children].some((row) => row.clientHeight > 0);
|
|
515
|
+
if (hasRowsWithClientHeight) {
|
|
498
516
|
this.__pendingRecalculateColumnWidths = false;
|
|
499
517
|
this.recalculateColumnWidths();
|
|
500
518
|
}
|
|
@@ -659,17 +677,22 @@ export const GridMixin = (superClass) =>
|
|
|
659
677
|
cell = column._cells.find((cell) => cell._vacant);
|
|
660
678
|
if (!cell) {
|
|
661
679
|
cell = this._createCell('td', column);
|
|
680
|
+
if (column._onCellKeyDown) {
|
|
681
|
+
cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
|
|
682
|
+
}
|
|
662
683
|
column._cells.push(cell);
|
|
663
684
|
}
|
|
664
685
|
cell.setAttribute('part', 'cell body-cell');
|
|
665
686
|
cell.__parentRow = row;
|
|
666
687
|
// Cache the cell reference
|
|
667
688
|
row.__cells.push(cell);
|
|
668
|
-
|
|
689
|
+
|
|
690
|
+
const isSizerRow = row === this.$.sizer;
|
|
691
|
+
if (!column._bodyContentHidden || isSizerRow) {
|
|
669
692
|
row.appendChild(cell);
|
|
670
693
|
}
|
|
671
694
|
|
|
672
|
-
if (
|
|
695
|
+
if (isSizerRow) {
|
|
673
696
|
column._sizerCell = cell;
|
|
674
697
|
}
|
|
675
698
|
|
|
@@ -700,7 +723,13 @@ export const GridMixin = (superClass) =>
|
|
|
700
723
|
// Header & footer
|
|
701
724
|
const tagName = section === 'header' ? 'th' : 'td';
|
|
702
725
|
if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
|
|
703
|
-
cell = column[`_${section}Cell`]
|
|
726
|
+
cell = column[`_${section}Cell`];
|
|
727
|
+
if (!cell) {
|
|
728
|
+
cell = this._createCell(tagName);
|
|
729
|
+
if (column._onCellKeyDown) {
|
|
730
|
+
cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
|
|
731
|
+
}
|
|
732
|
+
}
|
|
704
733
|
cell._column = column;
|
|
705
734
|
row.appendChild(cell);
|
|
706
735
|
column[`_${section}Cell`] = cell;
|
|
@@ -43,6 +43,8 @@ export declare class ScrollMixinClass {
|
|
|
43
43
|
* - Keyboard Navigation: Tabbing through focusable elements inside the grid body may not work as expected because
|
|
44
44
|
* some of the columns that would include focusable elements in the body cells may be outside the visible viewport
|
|
45
45
|
* and thus not rendered.
|
|
46
|
+
*
|
|
47
|
+
* @attr {eager|lazy} column-rendering
|
|
46
48
|
*/
|
|
47
49
|
columnRendering: ColumnRendering;
|
|
48
50
|
|
|
@@ -123,6 +123,19 @@ export const ScrollMixin = (superClass) =>
|
|
|
123
123
|
this.$.items.addEventListener('focusin', (e) => {
|
|
124
124
|
const itemsIndex = e.composedPath().indexOf(this.$.items);
|
|
125
125
|
this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];
|
|
126
|
+
|
|
127
|
+
if (this._rowWithFocusedElement) {
|
|
128
|
+
// Make sure the row with the focused element is fully inside the visible viewport
|
|
129
|
+
this.__scrollIntoViewport(this._rowWithFocusedElement.index);
|
|
130
|
+
|
|
131
|
+
if (!this.$.table.contains(e.relatedTarget)) {
|
|
132
|
+
// Virtualizer can't catch the event because if orginates from the light DOM.
|
|
133
|
+
// Dispatch a virtualizer-element-focused event for virtualizer to catch.
|
|
134
|
+
this.$.table.dispatchEvent(
|
|
135
|
+
new CustomEvent('virtualizer-element-focused', { detail: { element: this._rowWithFocusedElement } }),
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
126
139
|
});
|
|
127
140
|
this.$.items.addEventListener('focusout', () => {
|
|
128
141
|
this._rowWithFocusedElement = undefined;
|
|
@@ -235,17 +248,11 @@ export const ScrollMixin = (superClass) =>
|
|
|
235
248
|
|
|
236
249
|
/** @private */
|
|
237
250
|
__updateColumnsBodyContentHidden() {
|
|
238
|
-
if (!this._columnTree) {
|
|
251
|
+
if (!this._columnTree || !this._areSizerCellsAssigned()) {
|
|
239
252
|
return;
|
|
240
253
|
}
|
|
241
254
|
|
|
242
255
|
const columnsInOrder = this._getColumnsInOrder();
|
|
243
|
-
|
|
244
|
-
// Return if sizer cells are not yet assigned to columns
|
|
245
|
-
if (!columnsInOrder[0] || !columnsInOrder[0]._sizerCell) {
|
|
246
|
-
return;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
256
|
let bodyContentHiddenChanged = false;
|
|
250
257
|
|
|
251
258
|
// Remove the column cells from the DOM if the column is outside the viewport.
|
|
@@ -485,7 +492,7 @@ export const ScrollMixin = (superClass) =>
|
|
|
485
492
|
|
|
486
493
|
let transformFrozenToEndBody = transformFrozenToEnd;
|
|
487
494
|
|
|
488
|
-
if (this._lazyColumns) {
|
|
495
|
+
if (this._lazyColumns && this._areSizerCellsAssigned()) {
|
|
489
496
|
// Lazy column rendering is used, calculate the offset to apply to the frozen to end cells
|
|
490
497
|
const columnsInOrder = this._getColumnsInOrder();
|
|
491
498
|
|
|
@@ -515,4 +522,9 @@ export const ScrollMixin = (superClass) =>
|
|
|
515
522
|
this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${-x}px`);
|
|
516
523
|
}
|
|
517
524
|
}
|
|
525
|
+
|
|
526
|
+
/** @private */
|
|
527
|
+
_areSizerCellsAssigned() {
|
|
528
|
+
return this._getColumnsInOrder().every((column) => column._sizerCell);
|
|
529
|
+
}
|
|
518
530
|
};
|
|
@@ -31,6 +31,14 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
|
|
|
31
31
|
sync: true,
|
|
32
32
|
},
|
|
33
33
|
|
|
34
|
+
/**
|
|
35
|
+
* Override `autoWidth` to enable auto-width
|
|
36
|
+
*/
|
|
37
|
+
autoWidth: {
|
|
38
|
+
type: Boolean,
|
|
39
|
+
value: true,
|
|
40
|
+
},
|
|
41
|
+
|
|
34
42
|
/**
|
|
35
43
|
* Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
|
|
36
44
|
* @attr {number} flex-grow
|
|
@@ -233,6 +241,16 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
|
|
|
233
241
|
}
|
|
234
242
|
}
|
|
235
243
|
|
|
244
|
+
/** @private */
|
|
245
|
+
_onCellKeyDown(e) {
|
|
246
|
+
const target = e.composedPath()[0];
|
|
247
|
+
// Toggle on Space without having to enter interaction mode first
|
|
248
|
+
if (e.keyCode === 32 && (target === this._headerCell || (this._cells.includes(target) && !this.autoSelect))) {
|
|
249
|
+
const checkbox = target._content.firstElementChild;
|
|
250
|
+
checkbox.checked = !checkbox.checked;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
236
254
|
/** @private */
|
|
237
255
|
__dragAutoScroller() {
|
|
238
256
|
if (this.__dragStartIndex === undefined) {
|
|
@@ -13,7 +13,7 @@ import { GridColumnGroupMixin } from './vaadin-grid-column-group-mixin.js';
|
|
|
13
13
|
*
|
|
14
14
|
* ## Disclaimer
|
|
15
15
|
*
|
|
16
|
-
* This component is an experiment not
|
|
16
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
17
17
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
18
18
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
19
19
|
*/
|
|
@@ -13,7 +13,7 @@ import { GridColumnMixin } from './vaadin-grid-column-mixin.js';
|
|
|
13
13
|
*
|
|
14
14
|
* ## Disclaimer
|
|
15
15
|
*
|
|
16
|
-
* This component is an experiment not
|
|
16
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
17
17
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
18
18
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
19
19
|
*/
|
|
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
|
|
|
13
13
|
*
|
|
14
14
|
* ## Disclaimer
|
|
15
15
|
*
|
|
16
|
-
* This component is an experiment not
|
|
16
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
17
17
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
18
18
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
19
19
|
*/
|
|
@@ -15,7 +15,7 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
|
|
|
15
15
|
*
|
|
16
16
|
* ## Disclaimer
|
|
17
17
|
*
|
|
18
|
-
* This component is an experiment not
|
|
18
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
19
19
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
20
20
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
21
21
|
*/
|
|
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
|
|
|
13
13
|
*
|
|
14
14
|
* ## Disclaimer
|
|
15
15
|
*
|
|
16
|
-
* This component is an experiment not
|
|
16
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
17
17
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
18
18
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
19
19
|
*/
|
|
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
|
|
|
13
13
|
*
|
|
14
14
|
* ## Disclaimer
|
|
15
15
|
*
|
|
16
|
-
* This component is an experiment not
|
|
16
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
17
17
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
18
18
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
19
19
|
*/
|
|
@@ -15,7 +15,7 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
|
|
|
15
15
|
*
|
|
16
16
|
* ## Disclaimer
|
|
17
17
|
*
|
|
18
|
-
* This component is an experiment not
|
|
18
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
19
19
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
20
20
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
21
21
|
*/
|
|
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
|
|
|
13
13
|
*
|
|
14
14
|
* ## Disclaimer
|
|
15
15
|
*
|
|
16
|
-
* This component is an experiment not
|
|
16
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
17
17
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
18
18
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
19
19
|
*/
|
|
@@ -15,7 +15,7 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
|
|
|
15
15
|
*
|
|
16
16
|
* ## Disclaimer
|
|
17
17
|
*
|
|
18
|
-
* This component is an experiment not
|
|
18
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
19
19
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
20
20
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
21
21
|
*/
|
package/src/vaadin-lit-grid.js
CHANGED
|
@@ -18,7 +18,7 @@ import { gridStyles } from './vaadin-grid-styles.js';
|
|
|
18
18
|
*
|
|
19
19
|
* ## Disclaimer
|
|
20
20
|
*
|
|
21
|
-
* This component is an experiment not
|
|
21
|
+
* This component is an experiment and not yet a part of Vaadin platform.
|
|
22
22
|
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
23
23
|
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
24
24
|
*/
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import './vaadin-grid-column-group.js';
|
|
2
|
+
import './vaadin-grid-column.js';
|
|
3
|
+
import './vaadin-grid-filter.js';
|
|
4
|
+
import './vaadin-grid-filter-column.js';
|
|
5
|
+
import './vaadin-grid-selection-column.js';
|
|
6
|
+
import './vaadin-grid-sorter.js';
|
|
7
|
+
import './vaadin-grid-sort-column.js';
|
|
8
|
+
import './vaadin-grid-tree-toggle.js';
|
|
9
|
+
import './vaadin-grid-tree-column.js';
|
|
10
|
+
import './vaadin-grid.js';
|
|
11
|
+
import '../../src/all-imports.js';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import './vaadin-lit-grid-column-group.js';
|
|
2
|
+
import './vaadin-lit-grid-column.js';
|
|
3
|
+
import './vaadin-lit-grid-filter.js';
|
|
4
|
+
import './vaadin-lit-grid-filter-column.js';
|
|
5
|
+
import './vaadin-lit-grid-selection-column.js';
|
|
6
|
+
import './vaadin-lit-grid-sorter.js';
|
|
7
|
+
import './vaadin-lit-grid-sort-column.js';
|
|
8
|
+
import './vaadin-lit-grid-tree-toggle.js';
|
|
9
|
+
import './vaadin-lit-grid-tree-column.js';
|
|
10
|
+
import './vaadin-lit-grid.js';
|
|
11
|
+
import '../../src/lit-all-imports.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../../src/vaadin-grid-column-group.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../../src/vaadin-grid-column.js';
|