@vaadin/crud 25.3.2 → 25.4.0-alpha2
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 +8 -8
- package/package.json +16 -16
- package/src/vaadin-crud-controllers.js +1 -5
- package/src/vaadin-crud-mixin.d.ts +4 -2
- package/src/vaadin-crud-mixin.js +4 -2
- package/web-types.json +9 -8
- package/web-types.lit.json +5 -5
package/custom-elements.json
CHANGED
|
@@ -1049,9 +1049,9 @@
|
|
|
1049
1049
|
"name": "i18n",
|
|
1050
1050
|
"privacy": "public",
|
|
1051
1051
|
"type": {
|
|
1052
|
-
"text": "Object"
|
|
1052
|
+
"text": "Object | undefined"
|
|
1053
1053
|
},
|
|
1054
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
1054
|
+
"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\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```",
|
|
1055
1055
|
"attribute": "i18n",
|
|
1056
1056
|
"inheritedFrom": {
|
|
1057
1057
|
"name": "I18nMixin",
|
|
@@ -1174,9 +1174,9 @@
|
|
|
1174
1174
|
{
|
|
1175
1175
|
"name": "i18n",
|
|
1176
1176
|
"type": {
|
|
1177
|
-
"text": "Object"
|
|
1177
|
+
"text": "Object | undefined"
|
|
1178
1178
|
},
|
|
1179
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
1179
|
+
"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.",
|
|
1180
1180
|
"fieldName": "i18n",
|
|
1181
1181
|
"inheritedFrom": {
|
|
1182
1182
|
"name": "I18nMixin",
|
|
@@ -1362,9 +1362,9 @@
|
|
|
1362
1362
|
"name": "i18n",
|
|
1363
1363
|
"privacy": "public",
|
|
1364
1364
|
"type": {
|
|
1365
|
-
"text": "Object"
|
|
1365
|
+
"text": "Object | undefined"
|
|
1366
1366
|
},
|
|
1367
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
1367
|
+
"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\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```",
|
|
1368
1368
|
"attribute": "i18n",
|
|
1369
1369
|
"inheritedFrom": {
|
|
1370
1370
|
"name": "I18nMixin",
|
|
@@ -1600,9 +1600,9 @@
|
|
|
1600
1600
|
{
|
|
1601
1601
|
"name": "i18n",
|
|
1602
1602
|
"type": {
|
|
1603
|
-
"text": "Object"
|
|
1603
|
+
"text": "Object | undefined"
|
|
1604
1604
|
},
|
|
1605
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
1605
|
+
"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.",
|
|
1606
1606
|
"fieldName": "i18n",
|
|
1607
1607
|
"inheritedFrom": {
|
|
1608
1608
|
"name": "I18nMixin",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.4.0-alpha2",
|
|
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": "
|
|
39
|
-
"@vaadin/button": "
|
|
40
|
-
"@vaadin/component-base": "
|
|
41
|
-
"@vaadin/confirm-dialog": "
|
|
42
|
-
"@vaadin/dialog": "
|
|
43
|
-
"@vaadin/form-layout": "
|
|
44
|
-
"@vaadin/grid": "
|
|
45
|
-
"@vaadin/overlay": "
|
|
46
|
-
"@vaadin/text-field": "
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
38
|
+
"@vaadin/a11y-base": "25.4.0-alpha2",
|
|
39
|
+
"@vaadin/button": "25.4.0-alpha2",
|
|
40
|
+
"@vaadin/component-base": "25.4.0-alpha2",
|
|
41
|
+
"@vaadin/confirm-dialog": "25.4.0-alpha2",
|
|
42
|
+
"@vaadin/dialog": "25.4.0-alpha2",
|
|
43
|
+
"@vaadin/form-layout": "25.4.0-alpha2",
|
|
44
|
+
"@vaadin/grid": "25.4.0-alpha2",
|
|
45
|
+
"@vaadin/overlay": "25.4.0-alpha2",
|
|
46
|
+
"@vaadin/text-field": "25.4.0-alpha2",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.4.0-alpha2",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/aura": "
|
|
52
|
-
"@vaadin/chai-plugins": "
|
|
53
|
-
"@vaadin/test-runner-commands": "
|
|
51
|
+
"@vaadin/aura": "25.4.0-alpha2",
|
|
52
|
+
"@vaadin/chai-plugins": "25.4.0-alpha2",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.4.0-alpha2",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.4.0-alpha2",
|
|
56
56
|
"sinon": "^22.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": "213f8b55112558d2f976d8730fe44370ca868333"
|
|
65
65
|
}
|
|
@@ -73,7 +73,7 @@ export class FormSlotController extends SlotController {
|
|
|
73
73
|
|
|
74
74
|
/**
|
|
75
75
|
* Override method inherited from `SlotController`
|
|
76
|
-
* to
|
|
76
|
+
* to store a reference to the slotted form.
|
|
77
77
|
*
|
|
78
78
|
* @param {Node} node
|
|
79
79
|
* @protected
|
|
@@ -81,10 +81,6 @@ export class FormSlotController extends SlotController {
|
|
|
81
81
|
*/
|
|
82
82
|
initNode(node) {
|
|
83
83
|
this.host._form = node;
|
|
84
|
-
|
|
85
|
-
if (this.host.editorOpened) {
|
|
86
|
-
this.host.__ensureChildren();
|
|
87
|
-
}
|
|
88
84
|
}
|
|
89
85
|
}
|
|
90
86
|
|
|
@@ -227,9 +227,11 @@ export declare class CrudMixinClass<Item> {
|
|
|
227
227
|
|
|
228
228
|
/**
|
|
229
229
|
* The object used to localize this component. To change the default
|
|
230
|
-
* localization,
|
|
230
|
+
* localization, set this to an object that provides all properties, or
|
|
231
231
|
* just the individual properties you want to change.
|
|
232
232
|
*
|
|
233
|
+
* When not set, defaults to `undefined`.
|
|
234
|
+
*
|
|
233
235
|
* The object has the following JSON structure and default values:
|
|
234
236
|
*
|
|
235
237
|
* ```js
|
|
@@ -261,7 +263,7 @@ export declare class CrudMixinClass<Item> {
|
|
|
261
263
|
* }
|
|
262
264
|
* ```
|
|
263
265
|
*/
|
|
264
|
-
i18n: CrudI18n;
|
|
266
|
+
i18n: CrudI18n | undefined;
|
|
265
267
|
|
|
266
268
|
/**
|
|
267
269
|
* A reference to all fields inside the [`_form`](#/elements/vaadin-crud#property-_form) element
|
package/src/vaadin-crud-mixin.js
CHANGED
|
@@ -307,9 +307,11 @@ export const CrudMixin = (superClass) =>
|
|
|
307
307
|
|
|
308
308
|
/**
|
|
309
309
|
* The object used to localize this component. To change the default
|
|
310
|
-
* localization,
|
|
310
|
+
* localization, set this to an object that provides all properties, or
|
|
311
311
|
* just the individual properties you want to change.
|
|
312
312
|
*
|
|
313
|
+
* When not set, defaults to `undefined`.
|
|
314
|
+
*
|
|
313
315
|
* The object has the following JSON structure and default values:
|
|
314
316
|
*
|
|
315
317
|
* ```js
|
|
@@ -340,7 +342,7 @@ export const CrudMixin = (superClass) =>
|
|
|
340
342
|
* }
|
|
341
343
|
* }
|
|
342
344
|
* ```
|
|
343
|
-
* @type {
|
|
345
|
+
* @type {CrudI18n | undefined}
|
|
344
346
|
*/
|
|
345
347
|
get i18n() {
|
|
346
348
|
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.
|
|
4
|
+
"version": "25.4.0-alpha2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -342,7 +342,7 @@
|
|
|
342
342
|
},
|
|
343
343
|
{
|
|
344
344
|
"name": "vaadin-crud",
|
|
345
|
-
"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.
|
|
345
|
+
"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.4.0-alpha2/#/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.4.0-alpha2/#/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.4.0-alpha2/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha2/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha2/#/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 CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------|\n| `--vaadin-crud-background` |\n| `--vaadin-crud-border-color` |\n| `--vaadin-crud-border-radius` |\n| `--vaadin-crud-border-width` |\n| `--vaadin-crud-editor-max-height` |\n| `--vaadin-crud-editor-max-width` |\n| `--vaadin-crud-footer-background` |\n| `--vaadin-crud-footer-gap` |\n| `--vaadin-crud-footer-padding` |\n| `--vaadin-crud-form-padding` |\n| `--vaadin-crud-header-color` |\n| `--vaadin-crud-header-font-size` |\n| `--vaadin-crud-header-font-weight` |\n| `--vaadin-crud-header-line-height` |\n| `--vaadin-crud-header-padding` |\n| `--vaadin-crud-toolbar-background` |\n| `--vaadin-crud-toolbar-padding` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
346
346
|
"attributes": [
|
|
347
347
|
{
|
|
348
348
|
"name": "edit-on-click",
|
|
@@ -373,7 +373,7 @@
|
|
|
373
373
|
},
|
|
374
374
|
{
|
|
375
375
|
"name": "exclude",
|
|
376
|
-
"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.
|
|
376
|
+
"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.4.0-alpha2/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
377
377
|
"value": {
|
|
378
378
|
"type": [
|
|
379
379
|
"string"
|
|
@@ -382,7 +382,7 @@
|
|
|
382
382
|
},
|
|
383
383
|
{
|
|
384
384
|
"name": "include",
|
|
385
|
-
"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.
|
|
385
|
+
"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.4.0-alpha2/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
386
386
|
"value": {
|
|
387
387
|
"type": [
|
|
388
388
|
"string"
|
|
@@ -485,7 +485,7 @@
|
|
|
485
485
|
},
|
|
486
486
|
{
|
|
487
487
|
"name": "exclude",
|
|
488
|
-
"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.
|
|
488
|
+
"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.4.0-alpha2/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
489
489
|
"value": {
|
|
490
490
|
"type": [
|
|
491
491
|
"string"
|
|
@@ -494,16 +494,17 @@
|
|
|
494
494
|
},
|
|
495
495
|
{
|
|
496
496
|
"name": "i18n",
|
|
497
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
497
|
+
"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\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```",
|
|
498
498
|
"value": {
|
|
499
499
|
"type": [
|
|
500
|
-
"Object"
|
|
500
|
+
"Object",
|
|
501
|
+
"undefined"
|
|
501
502
|
]
|
|
502
503
|
}
|
|
503
504
|
},
|
|
504
505
|
{
|
|
505
506
|
"name": "include",
|
|
506
|
-
"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.
|
|
507
|
+
"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.4.0-alpha2/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
507
508
|
"value": {
|
|
508
509
|
"type": [
|
|
509
510
|
"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.
|
|
4
|
+
"version": "25.4.0-alpha2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"name": "vaadin-crud",
|
|
159
|
-
"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.
|
|
159
|
+
"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.4.0-alpha2/#/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.4.0-alpha2/#/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.4.0-alpha2/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha2/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha2/#/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 CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------|\n| `--vaadin-crud-background` |\n| `--vaadin-crud-border-color` |\n| `--vaadin-crud-border-radius` |\n| `--vaadin-crud-border-width` |\n| `--vaadin-crud-editor-max-height` |\n| `--vaadin-crud-editor-max-width` |\n| `--vaadin-crud-footer-background` |\n| `--vaadin-crud-footer-gap` |\n| `--vaadin-crud-footer-padding` |\n| `--vaadin-crud-form-padding` |\n| `--vaadin-crud-header-color` |\n| `--vaadin-crud-header-font-size` |\n| `--vaadin-crud-header-font-weight` |\n| `--vaadin-crud-header-line-height` |\n| `--vaadin-crud-header-padding` |\n| `--vaadin-crud-toolbar-background` |\n| `--vaadin-crud-toolbar-padding` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
160
160
|
"extension": true,
|
|
161
161
|
"attributes": [
|
|
162
162
|
{
|
|
@@ -196,21 +196,21 @@
|
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
198
|
"name": ".exclude",
|
|
199
|
-
"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.
|
|
199
|
+
"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.4.0-alpha2/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
200
200
|
"value": {
|
|
201
201
|
"kind": "expression"
|
|
202
202
|
}
|
|
203
203
|
},
|
|
204
204
|
{
|
|
205
205
|
"name": ".i18n",
|
|
206
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
206
|
+
"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\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```",
|
|
207
207
|
"value": {
|
|
208
208
|
"kind": "expression"
|
|
209
209
|
}
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
212
|
"name": ".include",
|
|
213
|
-
"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.
|
|
213
|
+
"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.4.0-alpha2/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
214
214
|
"value": {
|
|
215
215
|
"kind": "expression"
|
|
216
216
|
}
|