@vaadin/grid 24.4.0-dev.b3e1d14600 → 24.4.0-rc1
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/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.js +4 -2
- 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-group-mixin.d.ts +1 -1
- package/src/vaadin-grid-column-group-mixin.js +1 -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 -5
- package/src/vaadin-grid-column-reordering-mixin.d.ts +1 -1
- package/src/vaadin-grid-column-reordering-mixin.js +18 -5
- 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 +18 -9
- package/src/vaadin-grid-drag-and-drop-mixin.d.ts +1 -1
- package/src/vaadin-grid-drag-and-drop-mixin.js +1 -1
- package/src/vaadin-grid-dynamic-columns-mixin.js +1 -1
- 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 +2 -27
- 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 +3 -11
- 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 +23 -11
- package/src/vaadin-grid-mixin.d.ts +1 -1
- package/src/vaadin-grid-mixin.js +54 -16
- 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 +3 -1
- package/src/vaadin-grid-scroll-mixin.js +21 -9
- package/src/vaadin-grid-selection-column-base-mixin.d.ts +1 -1
- package/src/vaadin-grid-selection-column-base-mixin.js +19 -1
- package/src/vaadin-grid-selection-column-mixin.d.ts +1 -1
- package/src/vaadin-grid-selection-column-mixin.js +1 -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 +1 -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 +1 -1
- package/src/vaadin-grid-sorter.d.ts +1 -1
- package/src/vaadin-grid-sorter.js +1 -1
- package/src/vaadin-grid-styles.js +7 -1
- 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 -1
- 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 +3 -5
- 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 +1 -1
- package/src/vaadin-grid.js +1 -1
- package/src/vaadin-lit-grid-column-group.js +2 -2
- package/src/vaadin-lit-grid-column.js +2 -2
- package/src/vaadin-lit-grid-filter-column.js +2 -2
- package/src/vaadin-lit-grid-filter.js +2 -2
- package/src/vaadin-lit-grid-selection-column.js +2 -2
- package/src/vaadin-lit-grid-sort-column.js +2 -2
- package/src/vaadin-lit-grid-sorter.js +2 -2
- package/src/vaadin-lit-grid-tree-column.js +2 -2
- package/src/vaadin-lit-grid-tree-toggle.js +2 -2
- package/src/vaadin-lit-grid.js +2 -2
- 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 +2579 -0
- package/web-types.lit.json +1091 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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';
|
|
@@ -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;
|
|
@@ -804,10 +814,12 @@ export const KeyboardNavigationMixin = (superClass) =>
|
|
|
804
814
|
const rootTarget = e.composedPath()[0];
|
|
805
815
|
|
|
806
816
|
if (rootTarget === this.$.table || rootTarget === this.$.focusexit) {
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
817
|
+
if (!this._isMousedown) {
|
|
818
|
+
// The focus enters the top (bottom) of the grid, meaning that user has
|
|
819
|
+
// tabbed (shift-tabbed) into the grid. Move the focus to
|
|
820
|
+
// the first (the last) focusable.
|
|
821
|
+
this._predictFocusStepTarget(rootTarget, rootTarget === this.$.table ? 1 : -1).focus();
|
|
822
|
+
}
|
|
811
823
|
this._setInteracting(false);
|
|
812
824
|
} else {
|
|
813
825
|
this._detectInteracting(e);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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';
|
package/src/vaadin-grid-mixin.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
@@ -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)) {
|
|
@@ -432,6 +427,12 @@ export const GridMixin = (superClass) =>
|
|
|
432
427
|
cell.style.position = '';
|
|
433
428
|
}
|
|
434
429
|
});
|
|
430
|
+
|
|
431
|
+
if (autoWidth) {
|
|
432
|
+
this.$.scroller.setAttribute('measuring-auto-width', '');
|
|
433
|
+
} else {
|
|
434
|
+
this.$.scroller.removeAttribute('measuring-auto-width');
|
|
435
|
+
}
|
|
435
436
|
}
|
|
436
437
|
|
|
437
438
|
/**
|
|
@@ -478,17 +479,40 @@ export const GridMixin = (superClass) =>
|
|
|
478
479
|
return;
|
|
479
480
|
}
|
|
480
481
|
const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
|
|
481
|
-
|
|
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
|
+
}
|
|
482
492
|
}
|
|
483
493
|
|
|
484
494
|
/** @private */
|
|
485
495
|
__tryToRecalculateColumnWidthsIfPending() {
|
|
486
|
-
if (
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
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) {
|
|
492
516
|
this.__pendingRecalculateColumnWidths = false;
|
|
493
517
|
this.recalculateColumnWidths();
|
|
494
518
|
}
|
|
@@ -653,17 +677,22 @@ export const GridMixin = (superClass) =>
|
|
|
653
677
|
cell = column._cells.find((cell) => cell._vacant);
|
|
654
678
|
if (!cell) {
|
|
655
679
|
cell = this._createCell('td', column);
|
|
680
|
+
if (column._onCellKeyDown) {
|
|
681
|
+
cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
|
|
682
|
+
}
|
|
656
683
|
column._cells.push(cell);
|
|
657
684
|
}
|
|
658
685
|
cell.setAttribute('part', 'cell body-cell');
|
|
659
686
|
cell.__parentRow = row;
|
|
660
687
|
// Cache the cell reference
|
|
661
688
|
row.__cells.push(cell);
|
|
662
|
-
|
|
689
|
+
|
|
690
|
+
const isSizerRow = row === this.$.sizer;
|
|
691
|
+
if (!column._bodyContentHidden || isSizerRow) {
|
|
663
692
|
row.appendChild(cell);
|
|
664
693
|
}
|
|
665
694
|
|
|
666
|
-
if (
|
|
695
|
+
if (isSizerRow) {
|
|
667
696
|
column._sizerCell = cell;
|
|
668
697
|
}
|
|
669
698
|
|
|
@@ -694,7 +723,13 @@ export const GridMixin = (superClass) =>
|
|
|
694
723
|
// Header & footer
|
|
695
724
|
const tagName = section === 'header' ? 'th' : 'td';
|
|
696
725
|
if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
|
|
697
|
-
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
|
+
}
|
|
698
733
|
cell._column = column;
|
|
699
734
|
row.appendChild(cell);
|
|
700
735
|
column[`_${section}Cell`] = cell;
|
|
@@ -912,6 +947,9 @@ export const GridMixin = (superClass) =>
|
|
|
912
947
|
this._filterDragAndDrop(row, model);
|
|
913
948
|
|
|
914
949
|
iterateChildren(row, (cell) => {
|
|
950
|
+
if (cell._column && !cell._column.isConnected) {
|
|
951
|
+
return;
|
|
952
|
+
}
|
|
915
953
|
if (cell._renderer) {
|
|
916
954
|
const owner = cell._column || this;
|
|
917
955
|
cell._renderer.call(owner, cell._content, owner, model);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 - 2024 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 - 2024 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';
|
|
@@ -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
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { isElementHidden } from '@vaadin/a11y-base';
|
|
@@ -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
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 - 2024 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';
|
|
@@ -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) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 - 2024 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 { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 - 2024 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 - 2024 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 - 2024 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 - 2024 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 - 2024 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 - 2024 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 { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
@@ -152,6 +152,12 @@ export const gridStyles = css`
|
|
|
152
152
|
inset: 0;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
+
/* Switch the focusButtonMode wrapping element to "position: static" temporarily
|
|
156
|
+
when measuring real width of the cells in the auto-width columns. */
|
|
157
|
+
[measuring-auto-width] [part~='cell'] > [tabindex] {
|
|
158
|
+
position: static;
|
|
159
|
+
}
|
|
160
|
+
|
|
155
161
|
[part~='details-cell'] {
|
|
156
162
|
position: absolute;
|
|
157
163
|
bottom: 0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 - 2024 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, updatePart } from './vaadin-grid-helpers.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { get } from '@vaadin/component-base/src/path-utils.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 - 2024 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 - 2024 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 { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
@@ -125,10 +125,8 @@ export const GridTreeToggleMixin = (superClass) =>
|
|
|
125
125
|
};
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
super.ready();
|
|
131
|
-
|
|
128
|
+
constructor() {
|
|
129
|
+
super();
|
|
132
130
|
this.addEventListener('click', (e) => this._onClick(e));
|
|
133
131
|
}
|
|
134
132
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
package/src/vaadin-grid.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2016 -
|
|
3
|
+
* Copyright (c) 2016 - 2024 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 { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|