@vaadin/crud 24.6.0-beta1 → 24.6.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.6.0-beta1",
+  "version": "24.6.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,21 +37,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.6.0-beta1",
-    "@vaadin/button": "24.6.0-beta1",
-    "@vaadin/component-base": "24.6.0-beta1",
-    "@vaadin/confirm-dialog": "24.6.0-beta1",
-    "@vaadin/dialog": "24.6.0-beta1",
-    "@vaadin/form-layout": "24.6.0-beta1",
-    "@vaadin/grid": "24.6.0-beta1",
-    "@vaadin/overlay": "24.6.0-beta1",
-    "@vaadin/text-field": "24.6.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-beta1",
-    "@vaadin/vaadin-material-styles": "24.6.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-beta1"
+    "@vaadin/a11y-base": "24.6.0-rc1",
+    "@vaadin/button": "24.6.0-rc1",
+    "@vaadin/component-base": "24.6.0-rc1",
+    "@vaadin/confirm-dialog": "24.6.0-rc1",
+    "@vaadin/dialog": "24.6.0-rc1",
+    "@vaadin/form-layout": "24.6.0-rc1",
+    "@vaadin/grid": "24.6.0-rc1",
+    "@vaadin/overlay": "24.6.0-rc1",
+    "@vaadin/text-field": "24.6.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.6.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-rc1"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-beta1",
+    "@vaadin/chai-plugins": "24.6.0-rc1",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ab28efb0dcf2cd1ef72100e2e8f32232fa49aacc"
+  "gitHead": "d62ba309e3286777ad3ea7e015d50a2c4976bb42"
 }

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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';
+import type { IncludedMixinClass } from './vaadin-crud-include-mixin.js';
+
+/**
+ * A mixin providing common crud grid functionality.
+ */
+export declare function CrudGridMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<CrudGridMixinClass> & Constructor<IncludedMixinClass> & T;
+
+export declare class CrudGridMixinClass {
+  /**
+   * Disable filtering in the generated columns.
+   * @attr {boolean} no-filter
+   */
+  noFilter: boolean | null | undefined;
+
+  /**
+   * Disable sorting in the generated columns.
+   * @attr {boolean} no-sort
+   */
+  noSort: boolean | null | undefined;
+
+  /**
+   * Do not add headers to columns.
+   * @attr {boolean} no-head
+   */
+  noHead: boolean | null | undefined;
+}

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

@@ -0,0 +1,266 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 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 { capitalize, getProperty } from './vaadin-crud-helpers.js';
+import { IncludedMixin } from './vaadin-crud-include-mixin.js';
+
+/**
+ * A mixin providing common crud-grid functionality.
+ *
+ * @polymerMixin
+ * @mixes IncludedMixin
+ */
+export const CrudGridMixin = (superClass) =>
+  class extends IncludedMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * Disable filtering in the generated columns.
+         * @attr {boolean} no-filter
+         */
+        noFilter: Boolean,
+
+        /**
+         * Disable sorting in the generated columns.
+         * @attr {boolean} no-sort
+         */
+        noSort: Boolean,
+
+        /**
+         * Do not add headers to columns.
+         * @attr {boolean} no-head
+         */
+        noHead: Boolean,
+
+        /** @private */
+        __hideEditColumn: Boolean,
+      };
+    }
+
+    static get observers() {
+      return ['__onItemsChange(items)', '__onHideEditColumnChange(hideEditColumn)'];
+    }
+
+    /** @private */
+    __onItemsChange(items) {
+      if ((!this.dataProvider || this.dataProvider === this._arrayDataProvider) && !this.include && items && items[0]) {
+        this._configure(items[0]);
+      }
+    }
+
+    /** @private */
+    __onHideEditColumnChange() {
+      if (this.firstChild) {
+        this.__toggleEditColumn();
+      }
+    }
+
+    /** @private */
+    __toggleEditColumn() {
+      let editColumn = this.querySelector('vaadin-crud-edit-column');
+      if (this.hideEditColumn) {
+        if (editColumn) {
+          this.removeChild(editColumn);
+        }
+      } else if (!editColumn) {
+        editColumn = document.createElement('vaadin-crud-edit-column');
+        editColumn.frozenToEnd = true;
+        this.appendChild(editColumn);
+      }
+    }
+
+    /** @private */
+    __dataProviderWrapper(params, callback) {
+      this.__dataProvider(params, (items, size) => {
+        if (this.innerHTML === '' && !this.include && items[0]) {
+          this._configure(items[0]);
+        }
+        callback(items, size);
+      });
+    }
+
+    /**
+     * @override
+     * @private
+     */
+    _dataProviderChanged(dataProvider, oldDataProvider) {
+      if (this._arrayDataProvider === dataProvider) {
+        super._dataProviderChanged(dataProvider, oldDataProvider);
+      } else if (this.__dataProviderWrapper !== dataProvider) {
+        this.innerHTML = '';
+        this.__dataProvider = dataProvider;
+        this.dataProvider = this.__dataProviderWrapper;
+        super._dataProviderChanged(this.__dataProviderWrapper, oldDataProvider);
+      }
+    }
+
+    /**
+     * Auto-generate grid columns based on the JSON structure of the object provided.
+     *
+     * Method will be executed when items or dataProvider is assigned.
+     * @private
+     */
+    _configure(item) {
+      this.innerHTML = '';
+      this.__createColumns(this, item, undefined, this.__getPropertyDepth(item));
+      this.__toggleEditColumn();
+    }
+
+    /**
+     * Return the deepest property depth of the object
+     * @private
+     */
+    __getPropertyDepth(object) {
+      if (!object || typeof object !== 'object') {
+        return 0;
+      }
+
+      return Object.keys(object).reduce((deepest, prop) => {
+        if (this.exclude && this.exclude.test(prop)) {
+          return deepest;
+        }
+        return Math.max(deepest, 1 + this.__getPropertyDepth(object[prop]));
+      }, 0);
+    }
+
+    /**
+     * Parse the camelCase column names into sentence case headers.
+     * @param {string} path
+     * @return {string}
+     * @protected
+     */
+    _generateHeader(path) {
+      return path
+        .substr(path.lastIndexOf('.') + 1)
+        .replace(/([A-Z])/gu, '-$1')
+        .toLowerCase()
+        .replace(/-/gu, ' ')
+        .replace(/^./u, (match) => match.toUpperCase());
+    }
+
+    /** @private */
+    __createColumn(parent, path) {
+      let col;
+      if (!this.noFilter && !this.noSort && !parent.__sortColumnGroup) {
+        // This crud-grid has both a sorter and a filter, but neither has yet been
+        // created => col should become the sorter group column
+        col = this.__createGroup(parent);
+        col.__sortColumnGroup = true;
+        // Create the filter column under this sorter group column
+        this.__createColumn(col, path);
+      } else {
+        // In all other cases, col should be a regular column with a renderer
+        col = document.createElement('vaadin-grid-column');
+        parent.appendChild(col);
+        col.renderer = (root, _column, model) => {
+          root.textContent = path ? getProperty(path, model.item) : model.item;
+        };
+      }
+
+      if (!this.noHead && path) {
+        // Create a header renderer for the column (or column group)
+        col.headerRenderer = (root) => {
+          if (root.firstElementChild) {
+            return;
+          }
+
+          const label = this._generateHeader(path);
+
+          if (col.__sortColumnGroup || (this.noFilter && !this.noSort)) {
+            // The column is either the sorter group column or the root level
+            // sort column (in case a filter isn't used at all) => add the sort indicator
+            const sorter = document.createElement('vaadin-grid-sorter');
+            sorter.setAttribute('path', path);
+            // TODO: Localize aria labels
+            sorter.setAttribute('aria-label', `Sort by ${label}`);
+            sorter.textContent = label;
+            root.appendChild(sorter);
+          } else if (!this.noFilter) {
+            // Filtering is enabled in this crud-grid, create the filter element
+            const filter = document.createElement('vaadin-grid-filter');
+            filter.setAttribute('path', path);
+            // TODO: Localize aria labels
+            filter.setAttribute('aria-label', `Filter by ${label}`);
+            filter.style.display = 'flex';
+
+            const textField = window.document.createElement('vaadin-text-field');
+            textField.setAttribute('theme', 'small');
+            textField.setAttribute('focus-target', true);
+            textField.style.width = '100%';
+            if (this.noSort) {
+              textField.placeholder = label;
+            }
+            textField.addEventListener('value-changed', (event) => {
+              filter.value = event.detail.value;
+            });
+
+            filter.appendChild(textField);
+            root.appendChild(filter);
+          } else if (this.noSort && this.noFilter) {
+            // Neither sorter nor filter are enabled, just add the label
+            root.textContent = label;
+          }
+        };
+      }
+    }
+
+    /**
+     * Creates the column structure for the (sub)object.
+     *
+     * @param {HTMLElement} parent May be the crud-grid or a column group.
+     * @param {Object} object The object to create the sub-columns for.
+     * @param {string} path The property path from the root item to the object.
+     * @param {number} depth The depth of the object in the object hierarchy.
+     * @private
+     */
+    __createColumns(parent, object, path, depth) {
+      if (object && typeof object === 'object') {
+        // Iterate over the object properties
+        Object.keys(object).forEach((prop) => {
+          if (!this.include && this.exclude && this.exclude.test(prop)) {
+            return;
+          }
+          // Sub-object of the current object
+          const subObject = object[prop];
+          // Full path to the sub-object
+          const subObjectPath = path ? `${path}.${prop}` : prop;
+
+          // The column element for the sub-object
+          let subObjectColumn = parent;
+          if (!this.noHead && depth > 1) {
+            const isSubObject = subObject && typeof subObject === 'object';
+            // If the sub-object is an actual object, create a column group with the property
+            // name as the header text, otherwise create a group without a header
+            subObjectColumn = this.__createGroup(parent, isSubObject ? prop : undefined);
+          }
+
+          // Run recursively for the sub-object level
+          this.__createColumns(subObjectColumn, subObject, subObjectPath, depth - 1);
+        });
+      } else if (depth > 1) {
+        // The object has been fully traversed, but empty wrapping column
+        // groups are still needed to complete the full object depth
+        this.__createColumns(this.__createGroup(parent), undefined, path, depth - 1);
+      } else {
+        // The column group depth is complete, create the actual leaf column
+        this.__createColumn(parent, path);
+      }
+    }
+
+    /** @private */
+    __createGroup(parent, header) {
+      const grp = document.createElement('vaadin-grid-column-group');
+      if (header) {
+        grp.header = capitalize(header);
+      }
+      parent.appendChild(grp);
+      return grp;
+    }
+  };

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

@@ -9,30 +9,12 @@
  * license.
  */
 import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
-import { IncludedMixin } from './vaadin-crud-include-mixin.js';
+import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
 
 /**
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  */
-declare class CrudGrid extends IncludedMixin(Grid) {
-  /**
-   * Disable filtering in the generated columns.
-   * @attr {boolean} no-filter
-   */
-  noFilter: boolean | null | undefined;
-
-  /**
-   * Disable sorting in the generated columns.
-   * @attr {boolean} no-sort
-   */
-  noSort: boolean | null | undefined;
-
-  /**
-   * Do not add headers to columns.
-   * @attr {boolean} no-head
-   */
-  noHead: boolean | null | undefined;
-}
+declare class CrudGrid extends CrudGridMixin(Grid) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-crud-grid.js

@@ -15,265 +15,19 @@ import '@vaadin/grid/src/vaadin-grid-sorter.js';
 import './vaadin-crud-edit-column.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.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';
+import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
 
 /**
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  *
  * @extends Grid
- * @mixes IncludedMixin
+ * @mixes CrudGridMixin
  * @private
  */
-class CrudGrid extends IncludedMixin(Grid) {
+class CrudGrid extends CrudGridMixin(Grid) {
   static get is() {
     return 'vaadin-crud-grid';
   }
-
-  static get properties() {
-    return {
-      /**
-       * Disable filtering in the generated columns.
-       * @attr {boolean} no-filter
-       */
-      noFilter: Boolean,
-
-      /**
-       * Disable sorting in the generated columns.
-       * @attr {boolean} no-sort
-       */
-      noSort: Boolean,
-
-      /**
-       * Do not add headers to columns.
-       * @attr {boolean} no-head
-       */
-      noHead: Boolean,
-
-      /** @private */
-      __hideEditColumn: Boolean,
-    };
-  }
-
-  static get observers() {
-    return ['__onItemsChange(items)', '__onHideEditColumnChange(hideEditColumn)'];
-  }
-
-  /** @private */
-  __onItemsChange(items) {
-    if ((!this.dataProvider || this.dataProvider === this._arrayDataProvider) && !this.include && items && items[0]) {
-      this._configure(items[0]);
-    }
-  }
-
-  /** @private */
-  __onHideEditColumnChange() {
-    if (this.firstChild) {
-      this.__toggleEditColumn();
-    }
-  }
-
-  /** @private */
-  __toggleEditColumn() {
-    let editColumn = this.querySelector('vaadin-crud-edit-column');
-    if (this.hideEditColumn) {
-      if (editColumn) {
-        this.removeChild(editColumn);
-      }
-    } else if (!editColumn) {
-      editColumn = document.createElement('vaadin-crud-edit-column');
-      editColumn.frozenToEnd = true;
-      this.appendChild(editColumn);
-    }
-  }
-
-  /** @private */
-  __dataProviderWrapper(params, callback) {
-    this.__dataProvider(params, (items, size) => {
-      if (this.innerHTML === '' && !this.include && items[0]) {
-        this._configure(items[0]);
-      }
-      callback(items, size);
-    });
-  }
-
-  /**
-   * @override
-   * @private
-   */
-  _dataProviderChanged(dataProvider, oldDataProvider) {
-    if (this._arrayDataProvider === dataProvider) {
-      super._dataProviderChanged(dataProvider, oldDataProvider);
-    } else if (this.__dataProviderWrapper !== dataProvider) {
-      this.innerHTML = '';
-      this.__dataProvider = dataProvider;
-      this.dataProvider = this.__dataProviderWrapper;
-      super._dataProviderChanged(this.__dataProviderWrapper, oldDataProvider);
-    }
-  }
-
-  /**
-   * Auto-generate grid columns based on the JSON structure of the object provided.
-   *
-   * Method will be executed when items or dataProvider is assigned.
-   * @private
-   */
-  _configure(item) {
-    this.innerHTML = '';
-    this.__createColumns(this, item, undefined, this.__getPropertyDepth(item));
-    this.__toggleEditColumn();
-  }
-
-  /**
-   * Return the deepest property depth of the object
-   * @private
-   */
-  __getPropertyDepth(object) {
-    if (!object || typeof object !== 'object') {
-      return 0;
-    }
-
-    return Object.keys(object).reduce((deepest, prop) => {
-      if (this.exclude && this.exclude.test(prop)) {
-        return deepest;
-      }
-      return Math.max(deepest, 1 + this.__getPropertyDepth(object[prop]));
-    }, 0);
-  }
-
-  /**
-   * Parse the camelCase column names into sentence case headers.
-   * @param {string} path
-   * @return {string}
-   * @protected
-   */
-  _generateHeader(path) {
-    return path
-      .substr(path.lastIndexOf('.') + 1)
-      .replace(/([A-Z])/gu, '-$1')
-      .toLowerCase()
-      .replace(/-/gu, ' ')
-      .replace(/^./u, (match) => match.toUpperCase());
-  }
-
-  /** @private */
-  __createColumn(parent, path) {
-    let col;
-    if (!this.noFilter && !this.noSort && !parent.__sortColumnGroup) {
-      // This crud-grid has both a sorter and a filter, but neither has yet been
-      // created => col should become the sorter group column
-      col = this.__createGroup(parent);
-      col.__sortColumnGroup = true;
-      // Create the filter column under this sorter group column
-      this.__createColumn(col, path);
-    } else {
-      // In all other cases, col should be a regular column with a renderer
-      col = document.createElement('vaadin-grid-column');
-      parent.appendChild(col);
-      col.renderer = (root, _column, model) => {
-        root.textContent = path ? getProperty(path, model.item) : model.item;
-      };
-    }
-
-    if (!this.noHead && path) {
-      // Create a header renderer for the column (or column group)
-      col.headerRenderer = (root) => {
-        if (root.firstElementChild) {
-          return;
-        }
-
-        const label = this._generateHeader(path);
-
-        if (col.__sortColumnGroup || (this.noFilter && !this.noSort)) {
-          // The column is either the sorter group column or the root level
-          // sort column (in case a filter isn't used at all) => add the sort indicator
-          const sorter = document.createElement('vaadin-grid-sorter');
-          sorter.setAttribute('path', path);
-          // TODO: Localize aria labels
-          sorter.setAttribute('aria-label', `Sort by ${label}`);
-          sorter.textContent = label;
-          root.appendChild(sorter);
-        } else if (!this.noFilter) {
-          // Filtering is enabled in this crud-grid, create the filter element
-          const filter = document.createElement('vaadin-grid-filter');
-          filter.setAttribute('path', path);
-          // TODO: Localize aria labels
-          filter.setAttribute('aria-label', `Filter by ${label}`);
-          filter.style.display = 'flex';
-
-          const textField = window.document.createElement('vaadin-text-field');
-          textField.setAttribute('theme', 'small');
-          textField.setAttribute('focus-target', true);
-          textField.style.width = '100%';
-          if (this.noSort) {
-            textField.placeholder = label;
-          }
-          textField.addEventListener('value-changed', (event) => {
-            filter.value = event.detail.value;
-          });
-
-          filter.appendChild(textField);
-          root.appendChild(filter);
-        } else if (this.noSort && this.noFilter) {
-          // Neither sorter nor filter are enabled, just add the label
-          root.textContent = label;
-        }
-      };
-    }
-  }
-
-  /**
-   * Creates the column structure for the (sub)object.
-   *
-   * @param {HTMLElement} parent May be the crud-grid or a column group.
-   * @param {Object} object The object to create the sub-columns for.
-   * @param {string} path The property path from the root item to the object.
-   * @param {number} depth The depth of the object in the object hierarchy.
-   * @private
-   */
-  __createColumns(parent, object, path, depth) {
-    if (object && typeof object === 'object') {
-      // Iterate over the object properties
-      Object.keys(object).forEach((prop) => {
-        if (!this.include && this.exclude && this.exclude.test(prop)) {
-          return;
-        }
-        // Sub-object of the current object
-        const subObject = object[prop];
-        // Full path to the sub-object
-        const subObjectPath = path ? `${path}.${prop}` : prop;
-
-        // The column element for the sub-object
-        let subObjectColumn = parent;
-        if (!this.noHead && depth > 1) {
-          const isSubObject = subObject && typeof subObject === 'object';
-          // If the sub-object is an actual object, create a column group with the property
-          // name as the header text, otherwise create a group without a header
-          subObjectColumn = this.__createGroup(parent, isSubObject ? prop : undefined);
-        }
-
-        // Run recursively for the sub-object level
-        this.__createColumns(subObjectColumn, subObject, subObjectPath, depth - 1);
-      });
-    } else if (depth > 1) {
-      // The object has been fully traversed, but empty wrapping column
-      // groups are still needed to complete the full object depth
-      this.__createColumns(this.__createGroup(parent), undefined, path, depth - 1);
-    } else {
-      // The column group depth is complete, create the actual leaf column
-      this.__createColumn(parent, path);
-    }
-  }
-
-  /** @private */
-  __createGroup(parent, header) {
-    const grp = document.createElement('vaadin-grid-column-group');
-    if (header) {
-      grp.header = capitalize(header);
-    }
-    parent.appendChild(grp);
-    return grp;
-  }
 }
 
 defineCustomElement(CrudGrid);

package/src/vaadin-crud-helpers.js

@@ -62,3 +62,7 @@ export function setProperty(path, value, obj) {
     set(obj, path, value);
   }
 }
+
+export function isValidEditorPosition(editorPosition) {
+  return ['bottom', 'aside'].includes(editorPosition);
+}