@vaadin/crud 25.2.0-alpha10 → 25.2.0-alpha12
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 +16 -16
- package/src/vaadin-crud-dialog.js +0 -4
- package/src/vaadin-crud-form.js +0 -2
- package/src/vaadin-crud-grid-mixin.js +0 -4
- package/src/vaadin-crud-grid.js +0 -2
- package/src/vaadin-crud-include-mixin.js +0 -4
- package/src/vaadin-crud-mixin.js +5 -5
- package/src/vaadin-crud.js +0 -4
- package/web-types.json +6 -6
- 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.2.0-
|
|
3
|
+
"version": "25.2.0-alpha12",
|
|
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.2.0-
|
|
39
|
-
"@vaadin/button": "25.2.0-
|
|
40
|
-
"@vaadin/component-base": "25.2.0-
|
|
41
|
-
"@vaadin/confirm-dialog": "25.2.0-
|
|
42
|
-
"@vaadin/dialog": "25.2.0-
|
|
43
|
-
"@vaadin/form-layout": "25.2.0-
|
|
44
|
-
"@vaadin/grid": "25.2.0-
|
|
45
|
-
"@vaadin/overlay": "25.2.0-
|
|
46
|
-
"@vaadin/text-field": "25.2.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.2.0-alpha12",
|
|
39
|
+
"@vaadin/button": "25.2.0-alpha12",
|
|
40
|
+
"@vaadin/component-base": "25.2.0-alpha12",
|
|
41
|
+
"@vaadin/confirm-dialog": "25.2.0-alpha12",
|
|
42
|
+
"@vaadin/dialog": "25.2.0-alpha12",
|
|
43
|
+
"@vaadin/form-layout": "25.2.0-alpha12",
|
|
44
|
+
"@vaadin/grid": "25.2.0-alpha12",
|
|
45
|
+
"@vaadin/overlay": "25.2.0-alpha12",
|
|
46
|
+
"@vaadin/text-field": "25.2.0-alpha12",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha12",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/aura": "25.2.0-
|
|
52
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
51
|
+
"@vaadin/aura": "25.2.0-alpha12",
|
|
52
|
+
"@vaadin/chai-plugins": "25.2.0-alpha12",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha12",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha12",
|
|
56
56
|
"sinon": "^21.0.2"
|
|
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": "ae1e4373aec3653d63a45b6be18eee36f4b245a1"
|
|
65
65
|
}
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
8
|
* license.
|
|
10
9
|
*/
|
|
@@ -25,9 +24,6 @@ import { crudDialogOverlayStyles } from './styles/vaadin-crud-dialog-overlay-bas
|
|
|
25
24
|
*
|
|
26
25
|
* @customElement vaadin-crud-dialog
|
|
27
26
|
* @extends HTMLElement
|
|
28
|
-
* @mixes DirMixin
|
|
29
|
-
* @mixes OverlayMixin
|
|
30
|
-
* @mixes ThemableMixin
|
|
31
27
|
* @private
|
|
32
28
|
*/
|
|
33
29
|
class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
package/src/vaadin-crud-form.js
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
8
|
* license.
|
|
10
9
|
*/
|
|
@@ -19,7 +18,6 @@ import { IncludedMixin } from './vaadin-crud-include-mixin.js';
|
|
|
19
18
|
*
|
|
20
19
|
* @customElement vaadin-crud-form
|
|
21
20
|
* @extends FormLayout
|
|
22
|
-
* @mixes IncludedMixin
|
|
23
21
|
* @private
|
|
24
22
|
*/
|
|
25
23
|
class CrudForm extends IncludedMixin(FormLayout) {
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
8
|
* license.
|
|
10
9
|
*/
|
|
@@ -13,9 +12,6 @@ import { IncludedMixin } from './vaadin-crud-include-mixin.js';
|
|
|
13
12
|
|
|
14
13
|
/**
|
|
15
14
|
* A mixin providing common crud-grid functionality.
|
|
16
|
-
*
|
|
17
|
-
* @polymerMixin
|
|
18
|
-
* @mixes IncludedMixin
|
|
19
15
|
*/
|
|
20
16
|
export const CrudGridMixin = (superClass) =>
|
|
21
17
|
class extends IncludedMixin(superClass) {
|
package/src/vaadin-crud-grid.js
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
8
|
* license.
|
|
10
9
|
*/
|
|
@@ -22,7 +21,6 @@ import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
|
|
|
22
21
|
* An element used internally by `<vaadin-crud>`. Not intended to be used separately.
|
|
23
22
|
*
|
|
24
23
|
* @extends Grid
|
|
25
|
-
* @mixes CrudGridMixin
|
|
26
24
|
* @private
|
|
27
25
|
*/
|
|
28
26
|
class CrudGrid extends CrudGridMixin(Grid) {
|
|
@@ -4,15 +4,11 @@
|
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
8
|
* license.
|
|
10
9
|
*/
|
|
11
10
|
import { setProperty } from './vaadin-crud-helpers.js';
|
|
12
11
|
|
|
13
|
-
/**
|
|
14
|
-
* @polymerMixin
|
|
15
|
-
*/
|
|
16
12
|
export const IncludedMixin = (superClass) =>
|
|
17
13
|
class IncludedMixin extends superClass {
|
|
18
14
|
static get properties() {
|
package/src/vaadin-crud-mixin.js
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
8
|
* license.
|
|
10
9
|
*/
|
|
@@ -44,12 +43,9 @@ const DEFAULT_I18N = {
|
|
|
44
43
|
|
|
45
44
|
/**
|
|
46
45
|
* A mixin providing common crud functionality.
|
|
47
|
-
*
|
|
48
|
-
* @polymerMixin
|
|
49
|
-
* @mixes I18nMixin
|
|
50
46
|
*/
|
|
51
47
|
export const CrudMixin = (superClass) =>
|
|
52
|
-
class extends I18nMixin(
|
|
48
|
+
class extends I18nMixin(superClass) {
|
|
53
49
|
static get properties() {
|
|
54
50
|
return {
|
|
55
51
|
/**
|
|
@@ -304,6 +300,10 @@ export const CrudMixin = (superClass) =>
|
|
|
304
300
|
];
|
|
305
301
|
}
|
|
306
302
|
|
|
303
|
+
static get defaultI18n() {
|
|
304
|
+
return DEFAULT_I18N;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
307
|
/**
|
|
308
308
|
* The object used to localize this component. To change the default
|
|
309
309
|
* localization, replace this with an object that provides all properties, or
|
package/src/vaadin-crud.js
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
8
|
* license.
|
|
10
9
|
*/
|
|
@@ -197,9 +196,6 @@ import { CrudMixin } from './vaadin-crud-mixin.js';
|
|
|
197
196
|
*
|
|
198
197
|
* @customElement vaadin-crud
|
|
199
198
|
* @extends HTMLElement
|
|
200
|
-
* @mixes ElementMixin
|
|
201
|
-
* @mixes ThemableMixin
|
|
202
|
-
* @mixes CrudMixin
|
|
203
199
|
*/
|
|
204
200
|
class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
205
201
|
static get is() {
|
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.2.0-
|
|
4
|
+
"version": "25.2.0-alpha12",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
},
|
|
356
356
|
{
|
|
357
357
|
"name": "vaadin-crud",
|
|
358
|
-
"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.2.0-
|
|
358
|
+
"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.2.0-alpha12/#/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.2.0-alpha12/#/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.2.0-alpha12/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha12/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha12/#/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.",
|
|
359
359
|
"attributes": [
|
|
360
360
|
{
|
|
361
361
|
"name": "edit-on-click",
|
|
@@ -386,7 +386,7 @@
|
|
|
386
386
|
},
|
|
387
387
|
{
|
|
388
388
|
"name": "exclude",
|
|
389
|
-
"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.2.0-
|
|
389
|
+
"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.2.0-alpha12/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
390
390
|
"value": {
|
|
391
391
|
"type": [
|
|
392
392
|
"string"
|
|
@@ -395,7 +395,7 @@
|
|
|
395
395
|
},
|
|
396
396
|
{
|
|
397
397
|
"name": "include",
|
|
398
|
-
"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.2.0-
|
|
398
|
+
"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.2.0-alpha12/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
399
399
|
"value": {
|
|
400
400
|
"type": [
|
|
401
401
|
"string"
|
|
@@ -500,7 +500,7 @@
|
|
|
500
500
|
},
|
|
501
501
|
{
|
|
502
502
|
"name": "exclude",
|
|
503
|
-
"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.2.0-
|
|
503
|
+
"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.2.0-alpha12/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
504
504
|
"value": {
|
|
505
505
|
"type": [
|
|
506
506
|
"string"
|
|
@@ -518,7 +518,7 @@
|
|
|
518
518
|
},
|
|
519
519
|
{
|
|
520
520
|
"name": "include",
|
|
521
|
-
"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.2.0-
|
|
521
|
+
"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.2.0-alpha12/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
522
522
|
"value": {
|
|
523
523
|
"type": [
|
|
524
524
|
"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.2.0-
|
|
4
|
+
"version": "25.2.0-alpha12",
|
|
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.2.0-
|
|
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.2.0-alpha12/#/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.2.0-alpha12/#/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.2.0-alpha12/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha12/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha12/#/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,7 +196,7 @@
|
|
|
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.2.0-
|
|
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.2.0-alpha12/#/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
|
}
|
|
@@ -210,7 +210,7 @@
|
|
|
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.2.0-
|
|
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.2.0-alpha12/#/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
|
}
|