@vaadin/crud 24.0.0-alpha6 → 24.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha6",
-    "@vaadin/component-base": "24.0.0-alpha6",
-    "@vaadin/confirm-dialog": "24.0.0-alpha6",
-    "@vaadin/dialog": "24.0.0-alpha6",
-    "@vaadin/form-layout": "24.0.0-alpha6",
-    "@vaadin/grid": "24.0.0-alpha6",
-    "@vaadin/text-field": "24.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha6"
+    "@vaadin/button": "24.0.0-alpha8",
+    "@vaadin/component-base": "24.0.0-alpha8",
+    "@vaadin/confirm-dialog": "24.0.0-alpha8",
+    "@vaadin/dialog": "24.0.0-alpha8",
+    "@vaadin/form-layout": "24.0.0-alpha8",
+    "@vaadin/grid": "24.0.0-alpha8",
+    "@vaadin/text-field": "24.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
+  "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
 }

package/src/vaadin-crud-dialog.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-edit-column.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-edit-column.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-edit.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-edit.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-form.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-form.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -10,6 +10,7 @@
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
+import { capitalize } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
@@ -62,7 +63,7 @@ class CrudForm extends IncludedMixin(FormLayout) {
   /** @private */
   __createField(parent, path) {
     const field = document.createElement('vaadin-text-field');
-    field.label = this.__capitalize(path);
+    field.label = capitalize(path);
     field.path = path;
     field.required = true;
     parent.appendChild(field);
@@ -87,29 +88,6 @@ class CrudForm extends IncludedMixin(FormLayout) {
       this._fields = undefined;
     }
   }
-
-  /** @private */
-  __capitalize(path) {
-    return path
-      .toLowerCase()
-      .replace(/([^\w]+)/g, ' ')
-      .trim()
-      .replace(/^./, (c) => c.toUpperCase());
-  }
-
-  /** @private */
-  __set(path, val, obj) {
-    if (obj && path) {
-      path
-        .split('.')
-        .slice(0, -1)
-        .reduce((o, p) => {
-          o[p] = o[p] || {};
-          return o[p];
-        }, obj);
-      this.set(path, val, obj);
-    }
-  }
 }
 
 customElements.define(CrudForm.is, CrudForm);

package/src/vaadin-crud-grid.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-grid.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -14,6 +14,7 @@ import '@vaadin/grid/src/vaadin-grid-sorter.js';
 import '@vaadin/grid/src/vaadin-grid-filter.js';
 import './vaadin-crud-edit-column.js';
 import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
+import { capitalize, getProperty } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
@@ -148,10 +149,10 @@ class CrudGrid extends IncludedMixin(Grid) {
   _generateHeader(path) {
     return path
       .substr(path.lastIndexOf('.') + 1)
-      .replace(/([A-Z])/g, '-$1')
+      .replace(/([A-Z])/gu, '-$1')
       .toLowerCase()
-      .replace(/-/g, ' ')
-      .replace(/^./, (match) => match.toUpperCase());
+      .replace(/-/gu, ' ')
+      .replace(/^./u, (match) => match.toUpperCase());
   }
 
   /** @private */
@@ -169,7 +170,7 @@ class CrudGrid extends IncludedMixin(Grid) {
       col = document.createElement('vaadin-grid-column');
       parent.appendChild(col);
       col.renderer = (root, _column, model) => {
-        root.textContent = path ? this.get(path, model.item) : model.item;
+        root.textContent = path ? getProperty(path, model.item) : model.item;
       };
     }
 
@@ -267,34 +268,11 @@ class CrudGrid extends IncludedMixin(Grid) {
   __createGroup(parent, header) {
     const grp = document.createElement('vaadin-grid-column-group');
     if (header) {
-      grp.header = this.__capitalize(header);
+      grp.header = capitalize(header);
     }
     parent.appendChild(grp);
     return grp;
   }
-
-  /** @private */
-  __capitalize(path) {
-    return path
-      .toLowerCase()
-      .replace(/([^\w]+)/g, ' ')
-      .trim()
-      .replace(/^./, (c) => c.toUpperCase());
-  }
-
-  /** @private */
-  __set(path, val, obj) {
-    if (obj && path) {
-      path
-        .split('.')
-        .slice(0, -1)
-        .reduce((o, p) => {
-          o[p] = o[p] || {};
-          return o[p];
-        }, obj);
-      this.set(path, val, obj);
-    }
-  }
 }
 
 customElements.define(CrudGrid.is, CrudGrid);

package/src/vaadin-crud-helpers.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+
+/**
+ * Convenience utility for capitalizing a string, with
+ * replacing non-alphanumeric characters with spaces.
+ */
+export function capitalize(path: string): string;
+
+/**
+ * Convenience method for reading a value from a path.
+ */
+export function getProperty(path: string, obj: Record<string, unknown>): unknown;
+
+/**
+ * Convenience utility for setting a value to a path.
+ *
+ * Note, if any part in the path is undefined, this
+ * function initializes it with an empty object.
+ */
+export function setProperty(path: string, value: unknown, obj: Record<string, unknown>): void;

package/src/vaadin-crud-helpers.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { get, set } from '@polymer/polymer/lib/utils/path.js';
+
+/**
+ * Convenience utility for capitalizing a string, with
+ * replacing non-alphanumeric characters with spaces.
+ *
+ * @param {string} path
+ * @return {string}
+ */
+export function capitalize(path) {
+  return path
+    .toLowerCase()
+    .replace(/([^\w]+)/gu, ' ')
+    .trim()
+    .replace(/^./u, (c) => c.toUpperCase());
+}
+
+/**
+ * Convenience utility for reading a value from a path.
+ *
+ * @param {string} path
+ * @param {Object} obj
+ * @return {*}
+ */
+export function getProperty(path, obj) {
+  return get(obj, path);
+}
+
+/**
+ * Convenience utility for setting a value to a path.
+ *
+ * Note, if any part in the path is undefined, this
+ * function initializes it with an empty object.
+ *
+ * @param {string} path
+ * @param {*} value
+ * @param {Object} obj
+ */
+export function setProperty(path, value, obj) {
+  if (obj && path) {
+    path
+      .split('.')
+      .slice(0, -1)
+      .reduce((o, p) => {
+        // Create an object
+        if (!o[p]) {
+          o[p] = {};
+        }
+        return o[p];
+      }, obj);
+
+    set(obj, path, value);
+  }
+}

package/src/vaadin-crud-include-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud-include-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -8,6 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
+import { setProperty } from './vaadin-crud-helpers.js';
 
 /**
  * @polymerMixin
@@ -46,17 +47,19 @@ export const IncludedMixin = (superClass) =>
     /** @private */
     __onExcludeChange(exclude) {
       if (typeof exclude === 'string') {
-        this.exclude = exclude ? RegExp(exclude.replace(/, */g, '|'), 'i') : undefined;
+        this.exclude = exclude ? RegExp(exclude.replace(/, */gu, '|'), 'iu') : undefined;
       }
     }
 
     /** @private */
     __onIncludeChange(include) {
       if (typeof include === 'string') {
-        this.include = include ? include.split(/, */) : undefined;
+        this.include = include ? include.split(/, */u) : undefined;
       } else if (!this._fields && Array.isArray(include)) {
         const item = {};
-        this.include.forEach((path) => this.__set(path, null, item));
+        this.include.forEach((path) => {
+          setProperty(path, null, item);
+        });
         this._configure(item);
       }
     }

package/src/vaadin-crud.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-crud.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2022 Vaadin Ltd.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -22,6 +22,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { getProperty, setProperty } from './vaadin-crud-helpers.js';
 
 /**
  * @private
@@ -308,7 +309,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
         theme$="[[_theme]]"
         id="confirmCancel"
         on-confirm="__confirmCancel"
-        cancel
+        cancel-button-visible
         confirm-text="[[i18n.confirm.cancel.button.confirm]]"
         cancel-text="[[i18n.confirm.cancel.button.dismiss]]"
         header="[[i18n.confirm.cancel.title]]"
@@ -320,7 +321,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
         theme$="[[_theme]]"
         id="confirmDelete"
         on-confirm="__confirmDelete"
-        cancel
+        cancel-button-visible
         confirm-text="[[i18n.confirm.delete.button.confirm]]"
         cancel-text="[[i18n.confirm.delete.button.dismiss]]"
         header="[[i18n.confirm.delete.title]]"
@@ -1171,7 +1172,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
       this._fields.forEach((e) => {
         const path = e.path || e.getAttribute('path');
         if (path) {
-          e.value = this.get(path, item);
+          e.value = getProperty(path, item);
         }
       });
 
@@ -1252,7 +1253,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
     this._fields.forEach((e) => {
       const path = e.path || e.getAttribute('path');
       if (path) {
-        this.__set(path, e.value, item);
+        setProperty(path, e.value, item);
       }
     });
     const evt = this.dispatchEvent(new CustomEvent('save', { detail: { item }, cancelable: true }));
@@ -1264,7 +1265,9 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
           this.items.push(item);
         }
       } else {
-        this.editedItem = this.editedItem || {};
+        if (!this.editedItem) {
+          this.editedItem = {};
+        }
         Object.assign(this.editedItem, item);
       }
       this._grid.clearCache();
@@ -1306,23 +1309,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
     }
   }
 
-  /**
-   * Utility method for setting nested values in JSON objects but initializing empty keys unless `Polymer.Base.set`
-   * @private
-   */
-  __set(path, val, obj) {
-    if (obj && path) {
-      path
-        .split('.')
-        .slice(0, -1)
-        .reduce((o, p) => {
-          o[p] = o[p] || {};
-          return o[p];
-        }, obj);
-      this.set(path, val, obj);
-    }
-  }
-
   /**
    * Fired when user wants to edit an existing item. If the default is prevented, then
    * a new item is not assigned to the form, giving that responsibility to the app, though

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -295,7 +295,7 @@
         },
         {
           "name": "vaadin-crud",
-          "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/24.0.0-alpha6/#/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/24.0.0-alpha6/#/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/24.0.0-alpha6/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha6/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha6/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\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/custom-theme/styling-components) documentation.",
+          "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/24.0.0-alpha8/#/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/24.0.0-alpha8/#/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/24.0.0-alpha8/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\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/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "editor-position",
@@ -350,7 +350,7 @@
             },
             {
               "name": "include",
-              "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/24.0.0-alpha6/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+              "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/24.0.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
               "value": {
                 "type": [
                   "string",
@@ -361,7 +361,7 @@
             },
             {
               "name": "exclude",
-              "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/24.0.0-alpha6/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+              "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/24.0.0-alpha8/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
               "value": {
                 "type": [
                   "string",
@@ -488,7 +488,7 @@
               },
               {
                 "name": "include",
-                "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/24.0.0-alpha6/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+                "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/24.0.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
                 "value": {
                   "type": [
                     "string",
@@ -499,7 +499,7 @@
               },
               {
                 "name": "exclude",
-                "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/24.0.0-alpha6/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+                "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/24.0.0-alpha8/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -121,7 +121,7 @@
         },
         {
           "name": "vaadin-crud",
-          "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/24.0.0-alpha6/#/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/24.0.0-alpha6/#/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/24.0.0-alpha6/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha6/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha6/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\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/custom-theme/styling-components) documentation.",
+          "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/24.0.0-alpha8/#/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/24.0.0-alpha8/#/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/24.0.0-alpha8/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\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/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -196,14 +196,14 @@
             },
             {
               "name": ".include",
-              "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/24.0.0-alpha6/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+              "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/24.0.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".exclude",
-              "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/24.0.0-alpha6/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+              "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/24.0.0-alpha8/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
               "value": {
                 "kind": "expression"
               }