@vaadin/crud 24.6.5 → 24.7.0-alpha10

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

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 { html } from 'lit';
+import { Button } from '@vaadin/button/src/vaadin-lit-button.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-crud-edit>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class CrudEdit extends Button {
+  static get is() {
+    return 'vaadin-crud-edit';
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: block;
+        }
+      `,
+    ];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="icon"></div>
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+    this.addEventListener('click', this.__onClick);
+    this.setAttribute('aria-label', 'Edit');
+  }
+
+  /** @private */
+  __onClick(e) {
+    const tr = e.target.parentElement.assignedSlot.parentElement.parentElement;
+    tr.dispatchEvent(
+      new CustomEvent('edit', { detail: { item: tr._item, index: tr.index }, bubbles: true, composed: true }),
+    );
+  }
+
+  /**
+   * Fired when user on the icon.
+   *
+   * @event edit
+   * @param {Object} detail.item the item to edit
+   * @param {Object} detail.index the index of the item in the data set
+   */
+}
+
+defineCustomElement(CrudEdit);
+
+export { CrudEdit };

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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.
+ */
+export * from './vaadin-crud-form.js';

package/src/vaadin-lit-crud-form.js

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 '@vaadin/text-field/src/vaadin-lit-text-field.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { FormLayout } from '@vaadin/form-layout/src/vaadin-lit-form-layout.js';
+import { createField, createFields } from './vaadin-crud-helpers.js';
+import { IncludedMixin } from './vaadin-crud-include-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
+ *
+ * @extends FormLayout
+ * @mixes IncludedMixin
+ * @private
+ */
+class CrudForm extends IncludedMixin(FormLayout) {
+  static get is() {
+    return 'vaadin-crud-form';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The item being edited.
+       * @type {unknown}
+       */
+      item: {
+        type: Object,
+        sync: true,
+      },
+    };
+  }
+
+  static get observers() {
+    return ['__onItemChange(item)'];
+  }
+
+  /**
+   * Auto-generate form fields based on the JSON structure of the object provided.
+   *
+   * If not called, the method will be executed the first time an item is assigned.
+   * @param {unknown} object
+   * @protected
+   */
+  _configure(object) {
+    this.innerHTML = '';
+    this._fields = [];
+    this.__createFields(this, object);
+    this._updateLayout();
+  }
+
+  /** @private */
+  __onItemChange(item) {
+    if (!this._fields) {
+      this._configure(item);
+    }
+  }
+
+  /** @private */
+  __createField(parent, path) {
+    return createField(this, parent, path);
+  }
+
+  /** @private */
+  __createFields(parent, object, path) {
+    return createFields(this, parent, object, path);
+  }
+}
+
+defineCustomElement(CrudForm);
+
+export { CrudForm };

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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.
+ */
+export * from './vaadin-crud-grid.js';

package/src/vaadin-lit-crud-grid.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 '@vaadin/grid/src/vaadin-lit-grid-column-group.js';
+import '@vaadin/grid/src/vaadin-lit-grid-column.js';
+import '@vaadin/grid/src/vaadin-lit-grid-filter.js';
+import '@vaadin/grid/src/vaadin-lit-grid-sorter.js';
+import './vaadin-lit-crud-edit-column.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { Grid } from '@vaadin/grid/src/vaadin-lit-grid.js';
+import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
+ *
+ * @extends Grid
+ * @mixes CrudGridMixin
+ * @private
+ */
+class CrudGrid extends CrudGridMixin(Grid) {
+  static get is() {
+    return 'vaadin-crud-grid';
+  }
+}
+
+defineCustomElement(CrudGrid);
+
+export { CrudGrid };

package/src/vaadin-lit-crud.js

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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 '@vaadin/button/src/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/src/vaadin-lit-confirm-dialog.js';
+import './vaadin-lit-crud-dialog.js';
+import './vaadin-lit-crud-grid.js';
+import './vaadin-lit-crud-form.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CrudMixin } from './vaadin-crud-mixin.js';
+import { crudStyles } from './vaadin-crud-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-crud>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitMixin(LitElement))))) {
+  static get styles() {
+    return crudStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="container">
+        <div id="main">
+          <slot name="grid"></slot>
+
+          <div id="toolbar" part="toolbar">
+            <slot name="toolbar"></slot>
+            <slot name="new-button"></slot>
+          </div>
+        </div>
+
+        <div
+          part="editor"
+          id="editor"
+          role="group"
+          aria-labelledby="header"
+          ?hidden="${this.__computeEditorHidden(this.editorOpened, this._fullscreen, this.editorPosition)}"
+        >
+          <div part="scroller" id="scroller">
+            <div part="header" id="header">
+              <slot name="header"></slot>
+            </div>
+            <slot name="form"></slot>
+          </div>
+
+          <div part="footer" role="toolbar">
+            <slot name="save-button"></slot>
+            <slot name="cancel-button"></slot>
+            <slot name="delete-button"></slot>
+          </div>
+        </div>
+      </div>
+
+      <vaadin-crud-dialog
+        id="dialog"
+        .opened="${this.__computeDialogOpened(this.editorOpened, this._fullscreen, this.editorPosition)}"
+        .fullscreen="${this._fullscreen}"
+        .ariaLabel="${this.__dialogAriaLabel}"
+        .noCloseOnOutsideClick="${this.__isDirty}"
+        .noCloseOnEsc="${this.__isDirty}"
+        theme="${ifDefined(this._theme)}"
+        @opened-changed="${this.__onDialogOpened}"
+      ></vaadin-crud-dialog>
+
+      <vaadin-confirm-dialog
+        theme="${ifDefined(this._theme)}"
+        id="confirmCancel"
+        @confirm="${this.__confirmCancel}"
+        cancel-button-visible
+        .confirmText="${this.__effectiveI18n.confirm.cancel.button.confirm}"
+        .cancelText="${this.__effectiveI18n.confirm.cancel.button.dismiss}"
+        .header="${this.__effectiveI18n.confirm.cancel.title}"
+        .message="${this.__effectiveI18n.confirm.cancel.content}"
+        confirm-theme="primary"
+      ></vaadin-confirm-dialog>
+
+      <vaadin-confirm-dialog
+        theme="${ifDefined(this._theme)}"
+        id="confirmDelete"
+        @confirm="${this.__confirmDelete}"
+        cancel-button-visible
+        .confirmText="${this.__effectiveI18n.confirm.delete.button.confirm}"
+        .cancelText="${this.__effectiveI18n.confirm.delete.button.dismiss}"
+        .header="${this.__effectiveI18n.confirm.delete.title}"
+        .message="${this.__effectiveI18n.confirm.delete.content}"
+        confirm-theme="primary error"
+      ></vaadin-confirm-dialog>
+    `;
+  }
+
+  static get is() {
+    return 'vaadin-crud';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-crud';
+  }
+}
+
+defineCustomElement(Crud);
+
+export { Crud };

package/theme/lumo/vaadin-lit-crud.d.ts

@@ -0,0 +1,8 @@
+import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/theme/lumo/vaadin-lit-confirm-dialog.js';
+import '@vaadin/form-layout/theme/lumo/vaadin-lit-form-layout.js';
+import '@vaadin/grid/theme/lumo/vaadin-lit-grid.js';
+import '@vaadin/grid/theme/lumo/vaadin-lit-grid-sorter.js';
+import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
+import './vaadin-crud-styles.js';
+import '../../src/vaadin-lit-crud.js';

package/theme/lumo/vaadin-lit-crud.js

@@ -0,0 +1,8 @@
+import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/theme/lumo/vaadin-lit-confirm-dialog.js';
+import '@vaadin/form-layout/theme/lumo/vaadin-lit-form-layout.js';
+import '@vaadin/grid/theme/lumo/vaadin-lit-grid.js';
+import '@vaadin/grid/theme/lumo/vaadin-lit-grid-sorter.js';
+import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
+import './vaadin-crud-styles.js';
+import '../../src/vaadin-lit-crud.js';

package/theme/material/vaadin-lit-crud.d.ts

@@ -0,0 +1,8 @@
+import '@vaadin/button/theme/material/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/theme/material/vaadin-lit-confirm-dialog.js';
+import '@vaadin/form-layout/theme/material/vaadin-lit-form-layout.js';
+import '@vaadin/grid/theme/material/vaadin-lit-grid.js';
+import '@vaadin/grid/theme/material/vaadin-lit-grid-sorter.js';
+import '@vaadin/text-field/theme/material/vaadin-lit-text-field.js';
+import './vaadin-crud-styles.js';
+import '../../src/vaadin-lit-crud.js';

package/theme/material/vaadin-lit-crud.js

@@ -0,0 +1,8 @@
+import '@vaadin/button/theme/material/vaadin-lit-button.js';
+import '@vaadin/confirm-dialog/theme/material/vaadin-lit-confirm-dialog.js';
+import '@vaadin/form-layout/theme/material/vaadin-lit-form-layout.js';
+import '@vaadin/grid/theme/material/vaadin-lit-grid.js';
+import '@vaadin/grid/theme/material/vaadin-lit-grid-sorter.js';
+import '@vaadin/text-field/theme/material/vaadin-lit-text-field.js';
+import './vaadin-crud-styles.js';
+import '../../src/vaadin-lit-crud.js';

package/vaadin-lit-crud-edit .js

@@ -0,0 +1 @@
+export * from './src/vaadin-lit-crud-edit.js';

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

@@ -0,0 +1 @@
+export * from './src/vaadin-lit-crud-edit-column.js';

package/vaadin-lit-crud.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-crud.js';
+export * from './src/vaadin-lit-crud.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -357,7 +357,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.6.5/#/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.6.5/#/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.6.5/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.6.5/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.6.5/#/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/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.7.0-alpha10/#/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.7.0-alpha10/#/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.7.0-alpha10/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/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/styling-components) documentation.",
           "attributes": [
             {
               "name": "editor-position",
@@ -412,7 +412,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.6.5/#/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.7.0-alpha10/#/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",
@@ -423,7 +423,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.6.5/#/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.7.0-alpha10/#/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",
@@ -468,6 +468,15 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```\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```",
+                "value": {
+                  "type": [
+                    "CrudI18n"
+                  ]
+                }
+              },
               {
                 "name": "items",
                 "description": "An array containing the items which will be stamped to the column template instances.",
@@ -550,7 +559,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.6.5/#/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.7.0-alpha10/#/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",
@@ -561,7 +570,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.6.5/#/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.7.0-alpha10/#/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",
@@ -591,15 +600,6 @@
                     "undefined"
                   ]
                 }
-              },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\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```",
-                "value": {
-                  "type": [
-                    "CrudI18n"
-                  ]
-                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -142,7 +142,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.6.5/#/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.6.5/#/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.6.5/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.6.5/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.6.5/#/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/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.7.0-alpha10/#/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.7.0-alpha10/#/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.7.0-alpha10/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/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/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -187,6 +187,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```\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```",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".items",
               "description": "An array containing the items which will be stamped to the column template instances.",
@@ -217,21 +224,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.6.5/#/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.7.0-alpha10/#/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.6.5/#/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"
-              }
-            },
-            {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\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```",
+              "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.7.0-alpha10/#/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"
               }