@vaadin/grid-pro 25.4.0-alpha4 → 25.4.0-alpha6
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/grid-pro",
|
|
3
|
-
"version": "25.4.0-
|
|
3
|
+
"version": "25.4.0-alpha6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,22 +37,22 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.4.0-
|
|
41
|
-
"@vaadin/checkbox": "25.4.0-
|
|
42
|
-
"@vaadin/component-base": "25.4.0-
|
|
43
|
-
"@vaadin/grid": "25.4.0-
|
|
44
|
-
"@vaadin/lit-renderer": "25.4.0-
|
|
45
|
-
"@vaadin/select": "25.4.0-
|
|
46
|
-
"@vaadin/text-field": "25.4.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "25.4.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.4.0-alpha6",
|
|
41
|
+
"@vaadin/checkbox": "25.4.0-alpha6",
|
|
42
|
+
"@vaadin/component-base": "25.4.0-alpha6",
|
|
43
|
+
"@vaadin/grid": "25.4.0-alpha6",
|
|
44
|
+
"@vaadin/lit-renderer": "25.4.0-alpha6",
|
|
45
|
+
"@vaadin/select": "25.4.0-alpha6",
|
|
46
|
+
"@vaadin/text-field": "25.4.0-alpha6",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.4.0-alpha6",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/aura": "25.4.0-
|
|
52
|
-
"@vaadin/chai-plugins": "25.4.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.4.0-
|
|
51
|
+
"@vaadin/aura": "25.4.0-alpha6",
|
|
52
|
+
"@vaadin/chai-plugins": "25.4.0-alpha6",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.4.0-alpha6",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.4.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.4.0-alpha6",
|
|
56
56
|
"sinon": "^22.0.0"
|
|
57
57
|
},
|
|
58
58
|
"cvdlName": "vaadin-grid-pro",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"web-types.json",
|
|
62
62
|
"web-types.lit.json"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "4ead7de23a27c47e5ef4cb172481f8c54e86691a"
|
|
65
65
|
}
|
|
@@ -254,6 +254,18 @@ export const GridProEditColumnMixin = (superClass) =>
|
|
|
254
254
|
}
|
|
255
255
|
}
|
|
256
256
|
|
|
257
|
+
/** @private */
|
|
258
|
+
__setEditorAccessibleName(editor) {
|
|
259
|
+
if (this.editorType === 'custom') {
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
const name = this._headerCell?._content.textContent.trim();
|
|
264
|
+
if (name) {
|
|
265
|
+
editor.accessibleName = name;
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
257
269
|
/** @private */
|
|
258
270
|
_setEditorValue(editor, value) {
|
|
259
271
|
const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
|
|
@@ -278,6 +290,7 @@ export const GridProEditColumnMixin = (superClass) =>
|
|
|
278
290
|
editor.addEventListener('focusin', this._grid.__boundEditorFocusIn);
|
|
279
291
|
this._setEditorOptions(editor);
|
|
280
292
|
this._setEditorValue(editor, get(this.path, model.item));
|
|
293
|
+
this.__setEditorAccessibleName(editor);
|
|
281
294
|
editor._grid = this._grid;
|
|
282
295
|
|
|
283
296
|
if (editor.updateComplete) {
|
|
@@ -231,7 +231,7 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
231
231
|
return;
|
|
232
232
|
}
|
|
233
233
|
|
|
234
|
-
if (!this._isCellEditable(cell)) {
|
|
234
|
+
if (!this._isCellEditable(cell._column, cell.__parentRow)) {
|
|
235
235
|
return;
|
|
236
236
|
}
|
|
237
237
|
|
|
@@ -359,7 +359,7 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
359
359
|
/** @private */
|
|
360
360
|
_startEdit(cell, column) {
|
|
361
361
|
// TODO: remove `_editingDisabled` after Flow counterpart is updated.
|
|
362
|
-
if (this.disabled || this._editingDisabled || !this._isCellEditable(cell)) {
|
|
362
|
+
if (this.disabled || this._editingDisabled || !this._isCellEditable(cell._column, cell.__parentRow)) {
|
|
363
363
|
return;
|
|
364
364
|
}
|
|
365
365
|
|
|
@@ -375,7 +375,7 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
375
375
|
|
|
376
376
|
// Stopping the previous edit runs listeners that may have made this cell
|
|
377
377
|
// non-editable
|
|
378
|
-
if (!this._isCellEditable(cell)) {
|
|
378
|
+
if (!this._isCellEditable(cell._column, cell.__parentRow)) {
|
|
379
379
|
return;
|
|
380
380
|
}
|
|
381
381
|
|
|
@@ -504,7 +504,8 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
504
504
|
// Try to find the next editable cell
|
|
505
505
|
let nextIndex = model.index;
|
|
506
506
|
let nextColumn = column;
|
|
507
|
-
let
|
|
507
|
+
let nextRow = cell.__parentRow;
|
|
508
|
+
let found = false;
|
|
508
509
|
let directionX = 0;
|
|
509
510
|
let directionY = 0;
|
|
510
511
|
|
|
@@ -519,7 +520,7 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
519
520
|
}
|
|
520
521
|
|
|
521
522
|
if (directionX || directionY) {
|
|
522
|
-
while (
|
|
523
|
+
while (nextRow) {
|
|
523
524
|
if (directionX) {
|
|
524
525
|
// Move horizontally
|
|
525
526
|
nextColumn = editableColumns[editableColumns.indexOf(nextColumn) + directionX];
|
|
@@ -534,21 +535,28 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
534
535
|
nextIndex += directionY;
|
|
535
536
|
}
|
|
536
537
|
// Stop looking if the next cell is editable
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
if (nextCell && this._isCellEditable(nextCell)) {
|
|
538
|
+
nextRow = this._getRowByIndex(nextIndex);
|
|
539
|
+
if (nextRow && this._isCellEditable(nextColumn, nextRow)) {
|
|
540
|
+
found = true;
|
|
541
541
|
break;
|
|
542
542
|
}
|
|
543
543
|
}
|
|
544
544
|
}
|
|
545
545
|
|
|
546
546
|
// Focus current cell as fallback
|
|
547
|
-
if (!
|
|
548
|
-
|
|
547
|
+
if (!found) {
|
|
548
|
+
nextColumn = column;
|
|
549
|
+
nextRow = cell.__parentRow;
|
|
549
550
|
nextIndex = model.index;
|
|
550
551
|
}
|
|
551
552
|
|
|
553
|
+
if (this._lazyColumns) {
|
|
554
|
+
// Make sure the cells of the target column are rendered
|
|
555
|
+
this.scrollToColumn(nextColumn);
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
const nextCell = nextRow.__cells.find((cell) => cell._column === nextColumn);
|
|
559
|
+
|
|
552
560
|
if (!this.singleCellEdit && nextCell !== cell) {
|
|
553
561
|
this._startEdit(nextCell, nextColumn);
|
|
554
562
|
} else {
|
|
@@ -565,7 +573,7 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
565
573
|
const item = this.__getRowItem(row);
|
|
566
574
|
if (this.__edited) {
|
|
567
575
|
const { cell, model } = this.__edited;
|
|
568
|
-
if (!this._isCellEditable(cell)) {
|
|
576
|
+
if (!this._isCellEditable(cell._column, cell.__parentRow)) {
|
|
569
577
|
// Cell is no longer editable, cancel edit
|
|
570
578
|
this._stopEdit(true, true);
|
|
571
579
|
} else if (cell.__parentRow === row && item && this.getItemId(model.item) !== this.getItemId(item)) {
|
|
@@ -586,15 +594,20 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
586
594
|
super._generateCellPartNames(row, model);
|
|
587
595
|
|
|
588
596
|
iterateRowCells(row, (cell) => {
|
|
589
|
-
const isEditable = !row.hasAttribute('loading') && this._isCellEditable(cell);
|
|
597
|
+
const isEditable = !row.hasAttribute('loading') && this._isCellEditable(cell._column, row);
|
|
590
598
|
const target = cell._focusButton || cell;
|
|
591
599
|
updatePart(target, 'editable-cell', isEditable);
|
|
592
600
|
});
|
|
593
601
|
}
|
|
594
602
|
|
|
595
|
-
/**
|
|
596
|
-
|
|
597
|
-
|
|
603
|
+
/**
|
|
604
|
+
* Returns true if the cell of the given column in the given row is editable.
|
|
605
|
+
*
|
|
606
|
+
* @param {!GridColumn} column
|
|
607
|
+
* @param {!HTMLElement} row
|
|
608
|
+
* @private
|
|
609
|
+
*/
|
|
610
|
+
_isCellEditable(column, row) {
|
|
598
611
|
// Not editable if the column is not an edit column
|
|
599
612
|
if (!this._isEditColumn(column)) {
|
|
600
613
|
return false;
|
|
@@ -604,7 +617,7 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
604
617
|
return true;
|
|
605
618
|
}
|
|
606
619
|
// Otherwise, check isCellEditable function
|
|
607
|
-
const model = this.__getRowModel(
|
|
620
|
+
const model = this.__getRowModel(row);
|
|
608
621
|
return column.isCellEditable(model);
|
|
609
622
|
}
|
|
610
623
|
};
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/grid-pro",
|
|
4
|
-
"version": "25.4.0-
|
|
4
|
+
"version": "25.4.0-alpha6",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -353,7 +353,7 @@
|
|
|
353
353
|
},
|
|
354
354
|
{
|
|
355
355
|
"name": "vaadin-grid-pro",
|
|
356
|
-
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-
|
|
356
|
+
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-grid) documentation for details.\n\n```html\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-select).\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------------------|\n| `--vaadin-grid-background` |\n| `--vaadin-grid-border-color` |\n| `--vaadin-grid-border-radius` |\n| `--vaadin-grid-border-width` |\n| `--vaadin-grid-cell-background-color` |\n| `--vaadin-grid-cell-padding` |\n| `--vaadin-grid-cell-text-overflow` |\n| `--vaadin-grid-column-border-width` |\n| `--vaadin-grid-column-resize-handle-color` |\n| `--vaadin-grid-header-font-size` |\n| `--vaadin-grid-header-font-weight` |\n| `--vaadin-grid-header-text-color` |\n| `--vaadin-grid-pro-editable-cell-background-color` |\n| `--vaadin-grid-row-background-color` |\n| `--vaadin-grid-row-border-width` |\n| `--vaadin-grid-row-highlight-background-color` |\n| `--vaadin-grid-row-hover-background-color` |\n| `--vaadin-grid-row-odd-background-color` |\n| `--vaadin-grid-row-selected-background-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
357
357
|
"attributes": [
|
|
358
358
|
{
|
|
359
359
|
"name": "accessible-name",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/grid-pro",
|
|
4
|
-
"version": "25.4.0-
|
|
4
|
+
"version": "25.4.0-alpha6",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
},
|
|
171
171
|
{
|
|
172
172
|
"name": "vaadin-grid-pro",
|
|
173
|
-
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-
|
|
173
|
+
"description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-grid) documentation for details.\n\n```html\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-select).\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------------------|\n| `--vaadin-grid-background` |\n| `--vaadin-grid-border-color` |\n| `--vaadin-grid-border-radius` |\n| `--vaadin-grid-border-width` |\n| `--vaadin-grid-cell-background-color` |\n| `--vaadin-grid-cell-padding` |\n| `--vaadin-grid-cell-text-overflow` |\n| `--vaadin-grid-column-border-width` |\n| `--vaadin-grid-column-resize-handle-color` |\n| `--vaadin-grid-header-font-size` |\n| `--vaadin-grid-header-font-weight` |\n| `--vaadin-grid-header-text-color` |\n| `--vaadin-grid-pro-editable-cell-background-color` |\n| `--vaadin-grid-row-background-color` |\n| `--vaadin-grid-row-border-width` |\n| `--vaadin-grid-row-highlight-background-color` |\n| `--vaadin-grid-row-hover-background-color` |\n| `--vaadin-grid-row-odd-background-color` |\n| `--vaadin-grid-row-selected-background-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
174
174
|
"extension": true,
|
|
175
175
|
"attributes": [
|
|
176
176
|
{
|