@vaadin/grid-pro 25.4.0-alpha1 → 25.4.0-dev.c9532cd333
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/custom-elements.json +196 -196
- package/package.json +14 -14
- package/src/vaadin-grid-pro-inline-editing-mixin.js +56 -34
- package/web-types.json +3 -3
- package/web-types.lit.json +2 -2
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-dev.c9532cd333",
|
|
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-dev.c9532cd333",
|
|
41
|
+
"@vaadin/checkbox": "25.4.0-dev.c9532cd333",
|
|
42
|
+
"@vaadin/component-base": "25.4.0-dev.c9532cd333",
|
|
43
|
+
"@vaadin/grid": "25.4.0-dev.c9532cd333",
|
|
44
|
+
"@vaadin/lit-renderer": "25.4.0-dev.c9532cd333",
|
|
45
|
+
"@vaadin/select": "25.4.0-dev.c9532cd333",
|
|
46
|
+
"@vaadin/text-field": "25.4.0-dev.c9532cd333",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.4.0-dev.c9532cd333",
|
|
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-dev.c9532cd333",
|
|
52
|
+
"@vaadin/chai-plugins": "25.4.0-dev.c9532cd333",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.4.0-dev.c9532cd333",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.4.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.4.0-dev.c9532cd333",
|
|
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": "1fbf460cf3602f011721b6ed7d98961d1c1bf85e"
|
|
65
65
|
}
|
|
@@ -14,6 +14,9 @@ import { iterateRowCells, updatePart } from '@vaadin/grid/src/vaadin-grid-helper
|
|
|
14
14
|
|
|
15
15
|
export const InlineEditingMixin = (superClass) =>
|
|
16
16
|
class InlineEditingMixin extends superClass {
|
|
17
|
+
/** @type {boolean} */
|
|
18
|
+
#stoppingEdit = false;
|
|
19
|
+
|
|
17
20
|
static get properties() {
|
|
18
21
|
return {
|
|
19
22
|
/**
|
|
@@ -355,15 +358,27 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
355
358
|
|
|
356
359
|
/** @private */
|
|
357
360
|
_startEdit(cell, column) {
|
|
358
|
-
const isCellEditable = this._isCellEditable(cell);
|
|
359
|
-
|
|
360
361
|
// TODO: remove `_editingDisabled` after Flow counterpart is updated.
|
|
361
|
-
if (this.disabled || this._editingDisabled || !
|
|
362
|
+
if (this.disabled || this._editingDisabled || !this._isCellEditable(cell)) {
|
|
362
363
|
return;
|
|
363
364
|
}
|
|
364
|
-
|
|
365
|
+
|
|
366
|
+
// Unfocusable editors never fire focusout, so no stop was scheduled.
|
|
367
|
+
// Stop the previous edit here.
|
|
368
|
+
if (this.__edited?.cell !== cell) {
|
|
369
|
+
this._stopEdit();
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
// Cancel debouncer enqueued on focusout, including one enqueued by the
|
|
373
|
+
// blur() in the stop above
|
|
365
374
|
this._cancelStopEdit();
|
|
366
375
|
|
|
376
|
+
// Stopping the previous edit runs listeners that may have made this cell
|
|
377
|
+
// non-editable
|
|
378
|
+
if (!this._isCellEditable(cell)) {
|
|
379
|
+
return;
|
|
380
|
+
}
|
|
381
|
+
|
|
367
382
|
// Scroll column into view synchronously, which also triggers lazy column
|
|
368
383
|
// rendering to ensure cells for that column are in the DOM.
|
|
369
384
|
this.scrollToColumn(column);
|
|
@@ -394,42 +409,49 @@ export const InlineEditingMixin = (superClass) =>
|
|
|
394
409
|
if (!this.__edited) {
|
|
395
410
|
return;
|
|
396
411
|
}
|
|
412
|
+
if (this.#stoppingEdit) {
|
|
413
|
+
// `item-property-changed` listeners may re-render and re-enter here
|
|
414
|
+
// before `__edited` is cleared, so ignore nested calls, including cancels
|
|
415
|
+
return;
|
|
416
|
+
}
|
|
397
417
|
const { cell, column, model } = this.__edited;
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
if (editor) {
|
|
402
|
-
const
|
|
403
|
-
if (
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
418
|
+
this.#stoppingEdit = true;
|
|
419
|
+
|
|
420
|
+
try {
|
|
421
|
+
if (!shouldCancel && !this.hasAttribute('loading-editor')) {
|
|
422
|
+
const editor = column._getEditorComponent(cell);
|
|
423
|
+
if (editor) {
|
|
424
|
+
const value = column._getEditorValue(editor);
|
|
425
|
+
if (value !== get(column.path, model.item)) {
|
|
426
|
+
// Some browsers skip the change event when the editor is
|
|
427
|
+
// removed from the DOM, so blur to dispatch it.
|
|
428
|
+
editor.blur();
|
|
429
|
+
|
|
430
|
+
this.dispatchEvent(
|
|
431
|
+
new CustomEvent('item-property-changed', {
|
|
432
|
+
detail: {
|
|
433
|
+
index: model.index,
|
|
434
|
+
item: model.item,
|
|
435
|
+
path: column.path,
|
|
436
|
+
value,
|
|
437
|
+
},
|
|
438
|
+
bubbles: true,
|
|
439
|
+
cancelable: true,
|
|
440
|
+
composed: true,
|
|
441
|
+
}),
|
|
442
|
+
);
|
|
443
|
+
}
|
|
424
444
|
}
|
|
425
445
|
}
|
|
426
|
-
}
|
|
427
446
|
|
|
428
|
-
|
|
447
|
+
column._stopCellEdit(cell, model);
|
|
429
448
|
|
|
430
|
-
|
|
449
|
+
this.__edited = null;
|
|
431
450
|
|
|
432
|
-
|
|
451
|
+
this.removeEventListener('item-property-changed', this.__boundItemPropertyChanged);
|
|
452
|
+
} finally {
|
|
453
|
+
this.#stoppingEdit = false;
|
|
454
|
+
}
|
|
433
455
|
|
|
434
456
|
if (shouldRestoreFocus) {
|
|
435
457
|
cell.focus();
|
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-dev.c9532cd333",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -351,7 +351,7 @@
|
|
|
351
351
|
},
|
|
352
352
|
{
|
|
353
353
|
"name": "vaadin-grid-pro",
|
|
354
|
-
"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-
|
|
354
|
+
"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-dev.c9532cd333/#/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-dev.c9532cd333/#/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-dev.c9532cd333/#/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-dev.c9532cd333/#/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.",
|
|
355
355
|
"attributes": [
|
|
356
356
|
{
|
|
357
357
|
"name": "accessible-name",
|
|
@@ -666,7 +666,7 @@
|
|
|
666
666
|
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
667
667
|
"value": {
|
|
668
668
|
"type": [
|
|
669
|
-
"
|
|
669
|
+
"GridI18n",
|
|
670
670
|
"undefined"
|
|
671
671
|
]
|
|
672
672
|
}
|
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-dev.c9532cd333",
|
|
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-dev.c9532cd333/#/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-dev.c9532cd333/#/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-dev.c9532cd333/#/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-dev.c9532cd333/#/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
|
{
|