@vaadin/crud 24.0.0-alpha1 → 24.0.0-alpha11

package/README.md

@@ -58,7 +58,7 @@ Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overvi
 
 ## License
 
-Commercial Vaadin Developer License 4.0 (CVDLv4). For license terms, see LICENSE.
+This program is available under Vaadin Commercial License and Service Terms. For license terms, see LICENSE.
 
 Vaadin collects usage statistics at development time to improve this product.
 For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/confirm-dialog": "24.0.0-alpha1",
-    "@vaadin/dialog": "24.0.0-alpha1",
-    "@vaadin/form-layout": "24.0.0-alpha1",
-    "@vaadin/grid": "24.0.0-alpha1",
-    "@vaadin/text-field": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/button": "24.0.0-alpha11",
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/confirm-dialog": "24.0.0-alpha11",
+    "@vaadin/dialog": "24.0.0-alpha11",
+    "@vaadin/form-layout": "24.0.0-alpha11",
+    "@vaadin/grid": "24.0.0-alpha11",
+    "@vaadin/text-field": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

package/src/vaadin-crud-dialog.js

@@ -1,10 +1,16 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { Dialog, DialogOverlay } from '@vaadin/dialog/src/vaadin-dialog.js';
+import { Dialog } from '@vaadin/dialog/src/vaadin-dialog.js';
+import { DialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(

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

@@ -1,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
 

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

@@ -1,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 './vaadin-crud-edit.js';
 import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
@@ -36,7 +41,7 @@ class CrudEditColumn extends GridColumn {
        */
       width: {
         type: String,
-        value: '4em',
+        value: '4rem',
       },
 
       /**

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

@@ -1,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 { Button } from '@vaadin/button/src/vaadin-button.js';
 

package/src/vaadin-crud-edit.js

@@ -1,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 { html } from '@polymer/polymer/polymer-element.js';
 import { Button } from '@vaadin/button/src/vaadin-button.js';

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

@@ -1,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';

package/src/vaadin-crud-form.js

@@ -1,10 +1,16 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 '@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';
 
 /**
@@ -57,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);
@@ -82,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,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 { Grid } from '@vaadin/grid/src/vaadin-grid.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';

package/src/vaadin-crud-grid.js

@@ -1,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 '@vaadin/grid/src/vaadin-grid-column.js';
 import '@vaadin/grid/src/vaadin-grid-column-group.js';
@@ -9,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';
 
 /**
@@ -68,13 +74,15 @@ class CrudGrid extends IncludedMixin(Grid) {
 
   /** @private */
   __toggleEditColumn() {
-    const el = this.querySelector('vaadin-crud-edit-column');
+    let editColumn = this.querySelector('vaadin-crud-edit-column');
     if (this.hideEditColumn) {
-      if (el) {
-        this.removeChild(el);
+      if (editColumn) {
+        this.removeChild(editColumn);
       }
-    } else if (!el) {
-      this.appendChild(document.createElement('vaadin-crud-edit-column'));
+    } else if (!editColumn) {
+      editColumn = document.createElement('vaadin-crud-edit-column');
+      editColumn.frozenToEnd = true;
+      this.appendChild(editColumn);
     }
   }
 
@@ -141,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 */
@@ -162,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;
       };
     }
 
@@ -194,7 +202,6 @@ class CrudGrid extends IncludedMixin(Grid) {
 
           const textField = window.document.createElement('vaadin-text-field');
           textField.setAttribute('theme', 'small');
-          textField.setAttribute('slot', 'filter');
           textField.setAttribute('focus-target', true);
           textField.style.width = '100%';
           if (this.noSort) {
@@ -261,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,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 type { Constructor } from '@open-wc/dedupe-mixin';
 

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

@@ -1,8 +1,14 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 { setProperty } from './vaadin-crud-helpers.js';
 
 /**
  * @polymerMixin
@@ -41,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,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * 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 { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -76,7 +81,7 @@ export type CrudNewEvent = CustomEvent<{ item: null }>;
 /**
  * Fired when user wants to edit an existing item.
  */
-export type CrudEditEvent<T> = CustomEvent<{ item: T }>;
+export type CrudEditEvent<T> = CustomEvent<{ item: T; index: number }>;
 
 /**
  * Fired when user wants to delete item.
@@ -124,23 +129,34 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
  *
  * A grid and an editor will be automatically generated and configured based on the data structure provided.
  *
- * #### Example:
  * ```html
- * <vaadin-crud items='[{"name": "John", "surname": "Lennon", "role": "singer"},
- *                      {"name": "Ringo", "surname": "Starr", "role": "drums"}]'></vaadin-crud>
+ * <vaadin-crud></vaadin-crud>
+ * ```
+ *
+ * ```js
+ * const crud = document.querySelector('vaadin-crud');
+ *
+ * crud.items = [
+ *   { name: 'John', surname: 'Lennon', role: 'singer' },
+ *   { name: 'Ringo', surname: 'Starr', role: 'drums' },
+ *   // ... more items
+ * ];
  * ```
  *
  * ### Data Provider Function
  *
  * Otherwise, you can provide a [`dataProvider`](#/elements/vaadin-crud#property-dataProvider) function.
- * #### Example:
- * ```html
- * <vaadin-crud></vaadin-crud>
- * ```
+ *
  * ```js
  * const crud = document.querySelector('vaadin-crud');
- * const users = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'}, ...];
- * crud.dataProvider = function(params, callback) {
+ *
+ * const users = [
+ *   { name: 'John', surname: 'Lennon', role: 'singer' },
+ *   { name: 'Ringo', surname: 'Starr', role: 'drums' },
+ *   // ... more items
+ * ];
+ *
+ * crud.dataProvider = (params, callback) => {
  *   const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);
  *   callback(chunk, people.length);
  * };
@@ -153,20 +169,20 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
  *
  * Alternatively you can fully configure the component by using `slot` names.
  *
- * Slot name | Description
- * ----------------|----------------
- * `grid` | To replace the auto-generated grid with a custom one.
- * `form` | To replace the auto-generated form.
- * `toolbar` | To replace the toolbar content. Add an element with the attribute `new-button` for the new item action.
+ * Slot name      | Description
+ * ---------------|----------------
+ * `grid`         | To replace the auto-generated grid with a custom one.
+ * `form`         | To replace the auto-generated form.
+ * `save-button`  | To replace the "Save" button.
+ * `cancel-button`| To replace the "Cancel" button.
+ * `delete-button`| To replace the "Delete" button.
+ * `toolbar`      | To provide the toolbar content (by default, it's empty).
+ * `new-button`   | To replace the "New item" button.
  *
  * #### Example:
  *
  * ```html
- * <vaadin-crud
- *   id="crud"
- *   items='[{"name": "John", "surname": "Lennon", "role": "singer"},
- *           {"name": "Ringo", "surname": "Starr", "role": "drums"}]'
- * >
+ * <vaadin-crud id="crud">
  *   <vaadin-grid slot="grid">
  *     <vaadin-crud-edit-column></vaadin-crud-edit-column>
  *     <vaadin-grid-column id="column1"></vaadin-grid-column>
@@ -178,10 +194,12 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
  *     <vaadin-text-field label="Surname" path="surname"></vaadin-text-field>
  *   </vaadin-form-layout>
  *
- *   <div slot="toolbar">
- *     Total singers: [[size]]
- *     <button new-button>New singer</button>
- *   </div>
+ *   <div slot="toolbar">Total singers: 2</div>
+ *   <button slot="new-button">New singer</button>
+ *
+ *   <button slot="save-button">Save changes</button>
+ *   <button slot="cancel-button">Discard changes</button>
+ *   <button slot="delete-button">Delete singer</button>
  * </vaadin-crud>
  * ```
  * ```js
@@ -202,6 +220,12 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
  * column2.renderer = (root, column, model) => {
  *   root.textContent = model.item.surname;
  * };
+ *
+ * crud.items = [
+ *   { name: 'John', surname: 'Lennon', role: 'singer' },
+ *   { name: 'Ringo', surname: 'Starr', role: 'drums' },
+ *   // ... more items
+ * ];
  * ```
  *
  * ### Helpers