@vaadin/crud 24.6.5 → 24.7.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.6.5",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,22 +37,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.6.5",
-    "@vaadin/button": "~24.6.5",
-    "@vaadin/component-base": "~24.6.5",
-    "@vaadin/confirm-dialog": "~24.6.5",
-    "@vaadin/dialog": "~24.6.5",
-    "@vaadin/form-layout": "~24.6.5",
-    "@vaadin/grid": "~24.6.5",
-    "@vaadin/overlay": "~24.6.5",
-    "@vaadin/text-field": "~24.6.5",
-    "@vaadin/vaadin-lumo-styles": "~24.6.5",
-    "@vaadin/vaadin-material-styles": "~24.6.5",
-    "@vaadin/vaadin-themable-mixin": "~24.6.5"
+    "@vaadin/a11y-base": "24.7.0-alpha10",
+    "@vaadin/button": "24.7.0-alpha10",
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "@vaadin/confirm-dialog": "24.7.0-alpha10",
+    "@vaadin/dialog": "24.7.0-alpha10",
+    "@vaadin/form-layout": "24.7.0-alpha10",
+    "@vaadin/grid": "24.7.0-alpha10",
+    "@vaadin/overlay": "24.7.0-alpha10",
+    "@vaadin/text-field": "24.7.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.6.5",
-    "@vaadin/test-runner-commands": "~24.6.5",
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -61,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "fc109a4234a1f60e89717ab1c0dc8fb4451aa418"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

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

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

package/src/vaadin-crud-controllers.js

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

package/src/vaadin-crud-dialog.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -11,6 +11,7 @@
 import './vaadin-crud-edit.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
+import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js';
 
 /**
  * `<vaadin-crud-edit-column>` is a helper element for the `<vaadin-grid>`
@@ -69,21 +70,8 @@ class CrudEditColumn extends GridColumn {
    *
    * @override
    */
-  _defaultRenderer(root, _column) {
-    let edit = root.firstElementChild;
-    if (!edit) {
-      edit = document.createElement('vaadin-crud-edit');
-      if (this.hasAttribute('theme')) {
-        edit.setAttribute('theme', this.getAttribute('theme'));
-      }
-      root.appendChild(edit);
-    }
-
-    if (this.ariaLabel) {
-      edit.setAttribute('aria-label', this.ariaLabel);
-    } else {
-      edit.removeAttribute('aria-label');
-    }
+  _defaultRenderer(root, column) {
+    editColumnDefaultRenderer(root, column);
   }
 }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -11,7 +11,7 @@
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
-import { capitalize } from './vaadin-crud-helpers.js';
+import { createField, createFields } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
@@ -64,31 +64,12 @@ class CrudForm extends IncludedMixin(FormLayout) {
 
   /** @private */
   __createField(parent, path) {
-    const field = document.createElement('vaadin-text-field');
-    field.label = capitalize(path);
-    field.path = path;
-    field.required = true;
-    parent.appendChild(field);
-    this._fields.push(field);
-    return field;
+    return createField(this, parent, path);
   }
 
   /** @private */
   __createFields(parent, object, path) {
-    Object.keys(object).forEach((prop) => {
-      if (!this.include && this.exclude && this.exclude.test(prop)) {
-        return;
-      }
-      const newPath = (path ? `${path}.` : '') + prop;
-      if (object[prop] && typeof object[prop] === 'object') {
-        this.__createFields(parent, object[prop], newPath);
-      } else {
-        this.__createField(parent, newPath);
-      }
-    });
-    if (!this._fields.length) {
-      this._fields = undefined;
-    }
+    return createFields(this, parent, object, path);
   }
 }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -36,4 +36,10 @@ export declare class CrudGridMixinClass {
    * @attr {boolean} no-head
    */
   noHead: boolean | null | undefined;
+
+  /**
+   * Determines whether the edit column should be hidden.
+   * @attr {boolean} hide-edit-column
+   */
+  hideEditColumn: boolean | null | undefined;
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -39,8 +39,14 @@ export const CrudGridMixin = (superClass) =>
          */
         noHead: Boolean,
 
-        /** @private */
-        __hideEditColumn: Boolean,
+        /**
+         * Determines whether the edit column should be hidden.
+         * @attr {boolean} hide-edit-column
+         */
+        hideEditColumn: {
+          type: Boolean,
+          sync: true,
+        },
       };
     }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

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

package/src/vaadin-crud-helpers.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -66,3 +66,47 @@ export function setProperty(path, value, obj) {
 export function isValidEditorPosition(editorPosition) {
   return ['bottom', 'aside'].includes(editorPosition);
 }
+
+export function editColumnDefaultRenderer(root, column) {
+  let edit = root.firstElementChild;
+  if (!edit) {
+    edit = document.createElement('vaadin-crud-edit');
+    if (column.hasAttribute('theme')) {
+      edit.setAttribute('theme', column.getAttribute('theme'));
+    }
+    root.appendChild(edit);
+  }
+
+  if (column.ariaLabel) {
+    edit.setAttribute('aria-label', column.ariaLabel);
+  } else {
+    edit.removeAttribute('aria-label');
+  }
+}
+
+export function createField(crudForm, parent, path) {
+  const field = document.createElement('vaadin-text-field');
+  field.label = capitalize(path);
+  field.path = path;
+  field.required = true;
+  parent.appendChild(field);
+  crudForm._fields.push(field);
+  return field;
+}
+
+export function createFields(crudForm, parent, object, path) {
+  Object.keys(object).forEach((prop) => {
+    if (!crudForm.include && crudForm.exclude && crudForm.exclude.test(prop)) {
+      return;
+    }
+    const newPath = (path ? `${path}.` : '') + prop;
+    if (object[prop] && typeof object[prop] === 'object') {
+      createFields(crudForm, parent, object[prop], newPath);
+    } else {
+      createField(crudForm, parent, newPath);
+    }
+  });
+  if (!crudForm._fields.length) {
+    crudForm._fields = undefined;
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 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 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -29,6 +29,7 @@ export const IncludedMixin = (superClass) =>
         exclude: {
           value: '^_',
           observer: '__onExcludeChange',
+          sync: true,
         },
 
         /**
@@ -40,6 +41,7 @@ export const IncludedMixin = (superClass) =>
          */
         include: {
           observer: '__onIncludeChange',
+          sync: true,
         },
       };
     }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -9,6 +9,7 @@
  * license.
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { I18nMixinClass, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
 import type { GridFilterDefinition, GridSorterDefinition } from '@vaadin/grid/src/vaadin-grid.js';
 
 export type CrudDataProviderCallback<T> = (items: T[], size?: number) => void;
@@ -24,7 +25,7 @@ export type CrudDataProvider<T> = (params: CrudDataProviderParams, callback: Cru
 
 export type CrudEditorPosition = '' | 'aside' | 'bottom';
 
-export interface CrudI18n {
+export type CrudI18n = PartialI18n<{
   newItem: string;
   editItem: string;
   saveItem: string;
@@ -49,7 +50,7 @@ export interface CrudI18n {
       };
     };
   };
-}
+}>;
 
 /**
  * Fired when the `editorOpened` property changes.
@@ -123,7 +124,7 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
  */
 export declare function CrudMixin<Item, T extends Constructor<HTMLElement> = Constructor<HTMLElement>>(
   base: T,
-): Constructor<CrudMixinClass<Item>> & T;
+): Constructor<CrudMixinClass<Item>> & Constructor<I18nMixinClass<CrudI18n>> & T;
 
 export declare class CrudMixinClass<Item> {
   /**
@@ -225,9 +226,9 @@ export declare class CrudMixinClass<Item> {
   noToolbar: boolean;
 
   /**
-   * The object used to localize this component.
-   * For changing the default localization, change the entire
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
    *