@vaadin/crud 25.1.0-alpha9 → 25.1.0-beta2
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 +217 -1834
- package/package.json +16 -16
- package/src/vaadin-crud-mixin.js +1 -4
- package/web-types.json +37 -17
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,24 +35,24 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
39
|
-
"@vaadin/button": "25.1.0-
|
|
40
|
-
"@vaadin/component-base": "25.1.0-
|
|
41
|
-
"@vaadin/confirm-dialog": "25.1.0-
|
|
42
|
-
"@vaadin/dialog": "25.1.0-
|
|
43
|
-
"@vaadin/form-layout": "25.1.0-
|
|
44
|
-
"@vaadin/grid": "25.1.0-
|
|
45
|
-
"@vaadin/overlay": "25.1.0-
|
|
46
|
-
"@vaadin/text-field": "25.1.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.1.0-beta2",
|
|
39
|
+
"@vaadin/button": "25.1.0-beta2",
|
|
40
|
+
"@vaadin/component-base": "25.1.0-beta2",
|
|
41
|
+
"@vaadin/confirm-dialog": "25.1.0-beta2",
|
|
42
|
+
"@vaadin/dialog": "25.1.0-beta2",
|
|
43
|
+
"@vaadin/form-layout": "25.1.0-beta2",
|
|
44
|
+
"@vaadin/grid": "25.1.0-beta2",
|
|
45
|
+
"@vaadin/overlay": "25.1.0-beta2",
|
|
46
|
+
"@vaadin/text-field": "25.1.0-beta2",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta2",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/aura": "25.1.0-
|
|
52
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
51
|
+
"@vaadin/aura": "25.1.0-beta2",
|
|
52
|
+
"@vaadin/chai-plugins": "25.1.0-beta2",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.1.0-beta2",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta2",
|
|
56
56
|
"sinon": "^21.0.0"
|
|
57
57
|
},
|
|
58
58
|
"cvdlName": "vaadin-crud",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"web-types.json",
|
|
62
62
|
"web-types.lit.json"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "ffbedbae08a5160d13bcd1c6fcaa328df5103a05"
|
|
65
65
|
}
|
package/src/vaadin-crud-mixin.js
CHANGED
|
@@ -154,7 +154,6 @@ export const CrudMixin = (superClass) =>
|
|
|
154
154
|
* Enables user to click on row to edit it.
|
|
155
155
|
* Note: When enabled, auto-generated grid won't show the edit column.
|
|
156
156
|
* @attr {boolean} edit-on-click
|
|
157
|
-
* @type {boolean}
|
|
158
157
|
*/
|
|
159
158
|
editOnClick: {
|
|
160
159
|
type: Boolean,
|
|
@@ -267,7 +266,6 @@ export const CrudMixin = (superClass) =>
|
|
|
267
266
|
__isNew: Boolean,
|
|
268
267
|
|
|
269
268
|
/**
|
|
270
|
-
* @type {boolean}
|
|
271
269
|
* @protected
|
|
272
270
|
*/
|
|
273
271
|
_fullscreen: {
|
|
@@ -277,7 +275,6 @@ export const CrudMixin = (superClass) =>
|
|
|
277
275
|
},
|
|
278
276
|
|
|
279
277
|
/**
|
|
280
|
-
* @type {string}
|
|
281
278
|
* @protected
|
|
282
279
|
*/
|
|
283
280
|
_fullscreenMediaQuery: {
|
|
@@ -335,7 +332,7 @@ export const CrudMixin = (superClass) =>
|
|
|
335
332
|
* }
|
|
336
333
|
* }
|
|
337
334
|
* ```
|
|
338
|
-
* @
|
|
335
|
+
* @type {!CrudI18n}
|
|
339
336
|
*/
|
|
340
337
|
get i18n() {
|
|
341
338
|
return super.i18n;
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/crud",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -75,7 +75,9 @@
|
|
|
75
75
|
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
76
76
|
"value": {
|
|
77
77
|
"type": [
|
|
78
|
-
"boolean"
|
|
78
|
+
"boolean",
|
|
79
|
+
"null",
|
|
80
|
+
"undefined"
|
|
79
81
|
]
|
|
80
82
|
}
|
|
81
83
|
},
|
|
@@ -84,7 +86,9 @@
|
|
|
84
86
|
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
85
87
|
"value": {
|
|
86
88
|
"type": [
|
|
87
|
-
"number"
|
|
89
|
+
"number",
|
|
90
|
+
"null",
|
|
91
|
+
"undefined"
|
|
88
92
|
]
|
|
89
93
|
}
|
|
90
94
|
},
|
|
@@ -104,7 +108,9 @@
|
|
|
104
108
|
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
105
109
|
"value": {
|
|
106
110
|
"type": [
|
|
107
|
-
"boolean"
|
|
111
|
+
"boolean",
|
|
112
|
+
"null",
|
|
113
|
+
"undefined"
|
|
108
114
|
]
|
|
109
115
|
}
|
|
110
116
|
},
|
|
@@ -113,7 +119,9 @@
|
|
|
113
119
|
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
114
120
|
"value": {
|
|
115
121
|
"type": [
|
|
116
|
-
"boolean"
|
|
122
|
+
"boolean",
|
|
123
|
+
"null",
|
|
124
|
+
"undefined"
|
|
117
125
|
]
|
|
118
126
|
}
|
|
119
127
|
},
|
|
@@ -177,7 +185,9 @@
|
|
|
177
185
|
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
178
186
|
"value": {
|
|
179
187
|
"type": [
|
|
180
|
-
"boolean"
|
|
188
|
+
"boolean",
|
|
189
|
+
"null",
|
|
190
|
+
"undefined"
|
|
181
191
|
]
|
|
182
192
|
}
|
|
183
193
|
},
|
|
@@ -255,7 +265,9 @@
|
|
|
255
265
|
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
256
266
|
"value": {
|
|
257
267
|
"type": [
|
|
258
|
-
"boolean"
|
|
268
|
+
"boolean",
|
|
269
|
+
"null",
|
|
270
|
+
"undefined"
|
|
259
271
|
]
|
|
260
272
|
}
|
|
261
273
|
},
|
|
@@ -264,7 +276,9 @@
|
|
|
264
276
|
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
265
277
|
"value": {
|
|
266
278
|
"type": [
|
|
267
|
-
"boolean"
|
|
279
|
+
"boolean",
|
|
280
|
+
"null",
|
|
281
|
+
"undefined"
|
|
268
282
|
]
|
|
269
283
|
}
|
|
270
284
|
},
|
|
@@ -350,7 +364,9 @@
|
|
|
350
364
|
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
351
365
|
"value": {
|
|
352
366
|
"type": [
|
|
353
|
-
"boolean"
|
|
367
|
+
"boolean",
|
|
368
|
+
"null",
|
|
369
|
+
"undefined"
|
|
354
370
|
]
|
|
355
371
|
}
|
|
356
372
|
},
|
|
@@ -382,14 +398,16 @@
|
|
|
382
398
|
},
|
|
383
399
|
{
|
|
384
400
|
"name": "vaadin-crud",
|
|
385
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
401
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name | Description\n---------------|----------------\n`grid` | To replace the auto-generated grid with a custom one.\n`form` | To replace the auto-generated form.\n`save-button` | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar` | To provide the toolbar content (by default, it's empty).\n`new-button` | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n <vaadin-grid slot=\"grid\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n </vaadin-grid>\n\n <vaadin-form-layout slot=\"form\">\n <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n </vaadin-form-layout>\n\n <div slot=\"toolbar\">Total singers: 2</div>\n <button slot=\"new-button\">New singer</button>\n\n <button slot=\"save-button\">Save changes</button>\n <button slot=\"cancel-button\">Discard changes</button>\n <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n root.textContent = model.item.surname;\n};\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor` | The editor container\n`scroller` | The wrapper for the header and the form\n`header` | The header of the editor\n`footer` | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay` | The dialog overlay\n`backdrop` | The dialog backdrop\n`header` | The header of the dialog\n`footer` | The footer of the dialog\n`content` | The wrapper for the form\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
386
402
|
"attributes": [
|
|
387
403
|
{
|
|
388
404
|
"name": "edit-on-click",
|
|
389
405
|
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
390
406
|
"value": {
|
|
391
407
|
"type": [
|
|
392
|
-
"boolean"
|
|
408
|
+
"boolean",
|
|
409
|
+
"null",
|
|
410
|
+
"undefined"
|
|
393
411
|
]
|
|
394
412
|
}
|
|
395
413
|
},
|
|
@@ -415,7 +433,7 @@
|
|
|
415
433
|
},
|
|
416
434
|
{
|
|
417
435
|
"name": "exclude",
|
|
418
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
436
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
419
437
|
"value": {
|
|
420
438
|
"type": [
|
|
421
439
|
"string",
|
|
@@ -426,7 +444,7 @@
|
|
|
426
444
|
},
|
|
427
445
|
{
|
|
428
446
|
"name": "include",
|
|
429
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
447
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
430
448
|
"value": {
|
|
431
449
|
"type": [
|
|
432
450
|
"string",
|
|
@@ -517,7 +535,9 @@
|
|
|
517
535
|
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
518
536
|
"value": {
|
|
519
537
|
"type": [
|
|
520
|
-
"boolean"
|
|
538
|
+
"boolean",
|
|
539
|
+
"null",
|
|
540
|
+
"undefined"
|
|
521
541
|
]
|
|
522
542
|
}
|
|
523
543
|
},
|
|
@@ -543,7 +563,7 @@
|
|
|
543
563
|
},
|
|
544
564
|
{
|
|
545
565
|
"name": "exclude",
|
|
546
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
566
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
547
567
|
"value": {
|
|
548
568
|
"type": [
|
|
549
569
|
"string",
|
|
@@ -557,13 +577,13 @@
|
|
|
557
577
|
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n newItem: 'New item',\n editItem: 'Edit item',\n saveItem: 'Save',\n cancel: 'Cancel',\n deleteItem: 'Delete...',\n editLabel: 'Edit',\n confirm: {\n delete: {\n title: 'Confirm delete',\n content: 'Are you sure you want to delete the selected item? This action cannot be undone.',\n button: {\n confirm: 'Delete',\n dismiss: 'Cancel'\n }\n },\n cancel: {\n title: 'Unsaved changes',\n content: 'There are unsaved modifications to the item.',\n button: {\n confirm: 'Discard',\n dismiss: 'Continue editing'\n }\n }\n }\n}\n```",
|
|
558
578
|
"value": {
|
|
559
579
|
"type": [
|
|
560
|
-
"
|
|
580
|
+
"?"
|
|
561
581
|
]
|
|
562
582
|
}
|
|
563
583
|
},
|
|
564
584
|
{
|
|
565
585
|
"name": "include",
|
|
566
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
586
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
567
587
|
"value": {
|
|
568
588
|
"type": [
|
|
569
589
|
"string",
|
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/crud",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
},
|
|
150
150
|
{
|
|
151
151
|
"name": "vaadin-crud",
|
|
152
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
152
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name | Description\n---------------|----------------\n`grid` | To replace the auto-generated grid with a custom one.\n`form` | To replace the auto-generated form.\n`save-button` | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar` | To provide the toolbar content (by default, it's empty).\n`new-button` | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n <vaadin-grid slot=\"grid\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n </vaadin-grid>\n\n <vaadin-form-layout slot=\"form\">\n <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n </vaadin-form-layout>\n\n <div slot=\"toolbar\">Total singers: 2</div>\n <button slot=\"new-button\">New singer</button>\n\n <button slot=\"save-button\">Save changes</button>\n <button slot=\"cancel-button\">Discard changes</button>\n <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n root.textContent = model.item.surname;\n};\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor` | The editor container\n`scroller` | The wrapper for the header and the form\n`header` | The header of the editor\n`footer` | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay` | The dialog overlay\n`backdrop` | The dialog backdrop\n`header` | The header of the dialog\n`footer` | The footer of the dialog\n`content` | The wrapper for the form\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
153
153
|
"extension": true,
|
|
154
154
|
"attributes": [
|
|
155
155
|
{
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
},
|
|
218
218
|
{
|
|
219
219
|
"name": ".exclude",
|
|
220
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
220
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
221
221
|
"value": {
|
|
222
222
|
"kind": "expression"
|
|
223
223
|
}
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
},
|
|
232
232
|
{
|
|
233
233
|
"name": ".include",
|
|
234
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
234
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
235
235
|
"value": {
|
|
236
236
|
"kind": "expression"
|
|
237
237
|
}
|