@vaadin/crud 24.7.0-alpha1 → 24.7.0-alpha10

package/src/vaadin-crud-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.
  *
@@ -10,18 +10,47 @@
  */
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ButtonSlotController, FormSlotController, GridSlotController } from './vaadin-crud-controllers.js';
 import { getProperty, isValidEditorPosition, setProperty } from './vaadin-crud-helpers.js';
 
+const DEFAULT_I18N = {
+  newItem: 'New item',
+  editItem: 'Edit item',
+  saveItem: 'Save',
+  cancel: 'Cancel',
+  deleteItem: 'Delete...',
+  editLabel: 'Edit',
+  confirm: {
+    delete: {
+      title: 'Delete item',
+      content: 'Are you sure you want to delete this item? This action cannot be undone.',
+      button: {
+        confirm: 'Delete',
+        dismiss: 'Cancel',
+      },
+    },
+    cancel: {
+      title: 'Discard changes',
+      content: 'There are unsaved changes to this item.',
+      button: {
+        confirm: 'Discard',
+        dismiss: 'Cancel',
+      },
+    },
+  },
+};
+
 /**
  * A mixin providing common crud functionality.
  *
  * @polymerMixin
+ * @mixes I18nMixin
  */
 export const CrudMixin = (superClass) =>
-  class extends superClass {
+  class extends I18nMixin(DEFAULT_I18N, superClass) {
     static get properties() {
       return {
         /**
@@ -100,6 +129,7 @@ export const CrudMixin = (superClass) =>
           type: Object,
           observer: '__editedItemChanged',
           notify: true,
+          sync: true,
         },
 
         /**
@@ -117,6 +147,7 @@ export const CrudMixin = (superClass) =>
           value: '',
           reflectToAttribute: true,
           observer: '__editorPositionChanged',
+          sync: true,
         },
 
         /**
@@ -128,6 +159,7 @@ export const CrudMixin = (superClass) =>
         editOnClick: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -194,6 +226,7 @@ export const CrudMixin = (superClass) =>
           reflectToAttribute: true,
           notify: true,
           observer: '__editorOpenedChanged',
+          sync: true,
         },
 
         /**
@@ -218,84 +251,17 @@ export const CrudMixin = (superClass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
-        },
-
-        /**
-         * 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 has the following JSON structure and default values:
-         *
-         * ```
-         * {
-         *   newItem: 'New item',
-         *   editItem: 'Edit item',
-         *   saveItem: 'Save',
-         *   cancel: 'Cancel',
-         *   deleteItem: 'Delete...',
-         *   editLabel: 'Edit',
-         *   confirm: {
-         *     delete: {
-         *       title: 'Confirm delete',
-         *       content: 'Are you sure you want to delete the selected item? This action cannot be undone.',
-         *       button: {
-         *         confirm: 'Delete',
-         *         dismiss: 'Cancel'
-         *       }
-         *     },
-         *     cancel: {
-         *       title: 'Unsaved changes',
-         *       content: 'There are unsaved modifications to the item.',
-         *       button: {
-         *         confirm: 'Discard',
-         *         dismiss: 'Continue editing'
-         *       }
-         *     }
-         *   }
-         * }
-         * ```
-         *
-         * @type {!CrudI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          value() {
-            return {
-              newItem: 'New item',
-              editItem: 'Edit item',
-              saveItem: 'Save',
-              cancel: 'Cancel',
-              deleteItem: 'Delete...',
-              editLabel: 'Edit',
-              confirm: {
-                delete: {
-                  title: 'Delete item',
-                  content: 'Are you sure you want to delete this item? This action cannot be undone.',
-                  button: {
-                    confirm: 'Delete',
-                    dismiss: 'Cancel',
-                  },
-                },
-                cancel: {
-                  title: 'Discard changes',
-                  content: 'There are unsaved changes to this item.',
-                  button: {
-                    confirm: 'Discard',
-                    dismiss: 'Cancel',
-                  },
-                },
-              },
-            };
-          },
+          sync: true,
         },
 
         /** @private */
         __dialogAriaLabel: String,
 
         /** @private */
-        __isDirty: Boolean,
+        __isDirty: {
+          type: Boolean,
+          sync: true,
+        },
 
         /** @private */
         __isNew: Boolean,
@@ -307,6 +273,7 @@ export const CrudMixin = (superClass) =>
         _fullscreen: {
           type: Boolean,
           observer: '__fullscreenChanged',
+          sync: true,
         },
 
         /**
@@ -321,18 +288,63 @@ export const CrudMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__headerPropsChanged(_defaultHeader, __isNew, i18n)',
+        '__headerPropsChanged(_defaultHeader, __isNew, __effectiveI18n)',
         '__formPropsChanged(_form, _theme, include, exclude)',
         '__gridPropsChanged(_grid, _theme, include, exclude, noFilter, noHead, noSort, items)',
-        '__i18nChanged(i18n, _grid)',
+        '__i18nChanged(__effectiveI18n, _grid)',
         '__editOnClickChanged(editOnClick, _grid)',
-        '__saveButtonPropsChanged(_saveButton, i18n, __isDirty)',
-        '__cancelButtonPropsChanged(_cancelButton, i18n)',
-        '__deleteButtonPropsChanged(_deleteButton, i18n, __isNew)',
-        '__newButtonPropsChanged(_newButton, i18n)',
+        '__saveButtonPropsChanged(_saveButton, __effectiveI18n, __isDirty)',
+        '__cancelButtonPropsChanged(_cancelButton, __effectiveI18n)',
+        '__deleteButtonPropsChanged(_deleteButton, __effectiveI18n, __isNew)',
+        '__newButtonPropsChanged(_newButton, __effectiveI18n)',
       ];
     }
 
+    /**
+     * 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:
+     *
+     * ```
+     * {
+     *   newItem: 'New item',
+     *   editItem: 'Edit item',
+     *   saveItem: 'Save',
+     *   cancel: 'Cancel',
+     *   deleteItem: 'Delete...',
+     *   editLabel: 'Edit',
+     *   confirm: {
+     *     delete: {
+     *       title: 'Confirm delete',
+     *       content: 'Are you sure you want to delete the selected item? This action cannot be undone.',
+     *       button: {
+     *         confirm: 'Delete',
+     *         dismiss: 'Cancel'
+     *       }
+     *     },
+     *     cancel: {
+     *       title: 'Unsaved changes',
+     *       content: 'There are unsaved modifications to the item.',
+     *       button: {
+     *         confirm: 'Discard',
+     *         dismiss: 'Continue editing'
+     *       }
+     *     }
+     *   }
+     * }
+     * ```
+     * @return {!CrudI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     constructor() {
       super();
 
@@ -419,29 +431,28 @@ export const CrudMixin = (superClass) =>
     /**
      * @param {HTMLElement | undefined} headerNode
      * @param {boolean} isNew
-     * @param {string} i18nNewItem
-     * @param {string} i18nEditItem
+     * @param {CrudI18n} effectiveI18n
      * @private
      */
-    __headerPropsChanged(headerNode, isNew, i18n) {
+    __headerPropsChanged(headerNode, isNew, effectiveI18n) {
       if (headerNode) {
-        headerNode.textContent = isNew ? i18n.newItem : i18n.editItem;
+        headerNode.textContent = isNew ? effectiveI18n.newItem : effectiveI18n.editItem;
       }
     }
 
     /**
-     * @param {CrudI18n} i18n
+     * @param {CrudI18n} effectiveI18n
      * @param {CrudGrid | Grid} grid
      * @private
      */
-    __i18nChanged(i18n, grid) {
+    __i18nChanged(effectiveI18n, grid) {
       if (!grid) {
         return;
       }
 
       afterNextRender(grid, () => {
         Array.from(grid.querySelectorAll('vaadin-crud-edit-column')).forEach((column) => {
-          column.ariaLabel = i18n.editLabel;
+          column.ariaLabel = effectiveI18n.editLabel;
         });
       });
     }
@@ -502,14 +513,15 @@ export const CrudMixin = (superClass) =>
 
     /** @private */
     __moveChildNodes(target) {
-      const nodes = [this._headerNode, this._form, this._saveButton, this._cancelButton, this._deleteButton];
+      const nodes = [this._headerNode, this._form];
+      const buttons = [this._saveButton, this._cancelButton, this._deleteButton].filter(Boolean);
       if (!nodes.every((node) => node instanceof HTMLElement)) {
         return;
       }
 
       // Teleport header node, form, and the buttons to corresponding slots.
       // NOTE: order in which buttons are moved matches the order of slots.
-      nodes.forEach((node) => {
+      [...nodes, ...buttons].forEach((node) => {
         target.appendChild(node);
       });
 
@@ -673,55 +685,55 @@ export const CrudMixin = (superClass) =>
 
     /**
      * @param {HTMLElement | undefined} saveButton
-     * @param {string} i18nLabel
+     * @param {CrudI18n} effectiveI18n
      * @param {boolean} isDirty
      * @private
      */
-    __saveButtonPropsChanged(saveButton, i18n, isDirty) {
+    __saveButtonPropsChanged(saveButton, effectiveI18n, isDirty) {
       if (saveButton) {
         saveButton.toggleAttribute('disabled', this.__isSaveBtnDisabled(isDirty));
 
         if (saveButton === this._saveButtonController.defaultNode) {
-          saveButton.textContent = i18n.saveItem;
+          saveButton.textContent = effectiveI18n.saveItem;
         }
       }
     }
 
     /**
      * @param {HTMLElement | undefined} deleteButton
-     * @param {string} i18nLabel
+     * @param {CrudI18n} effectiveI18n
      * @param {boolean} isNew
      * @private
      */
-    __deleteButtonPropsChanged(deleteButton, i18n, isNew) {
+    __deleteButtonPropsChanged(deleteButton, effectiveI18n, isNew) {
       if (deleteButton) {
         deleteButton.toggleAttribute('hidden', isNew);
 
         if (deleteButton === this._deleteButtonController.defaultNode) {
-          deleteButton.textContent = i18n.deleteItem;
+          deleteButton.textContent = effectiveI18n.deleteItem;
         }
       }
     }
 
     /**
      * @param {HTMLElement | undefined} cancelButton
-     * @param {string} i18nLabel
+     * @param {CrudI18n} effectiveI18n
      * @private
      */
-    __cancelButtonPropsChanged(cancelButton, i18n) {
+    __cancelButtonPropsChanged(cancelButton, effectiveI18n) {
       if (cancelButton && cancelButton === this._cancelButtonController.defaultNode) {
-        cancelButton.textContent = i18n.cancel;
+        cancelButton.textContent = effectiveI18n.cancel;
       }
     }
 
     /**
      * @param {HTMLElement | undefined} newButton
-     * @param {string} i18nNewItem
+     * @param {CrudI18n} effectiveI18n
      * @private
      */
-    __newButtonPropsChanged(newButton, i18n) {
+    __newButtonPropsChanged(newButton, effectiveI18n) {
       if (newButton && newButton === this._newButtonController.defaultNode) {
-        newButton.textContent = i18n.newItem;
+        newButton.textContent = effectiveI18n.newItem;
       }
     }
 

package/src/vaadin-crud-styles.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-styles.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.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.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.
  *
@@ -223,10 +223,10 @@ class Crud extends CrudMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         id="confirmCancel"
         on-confirm="__confirmCancel"
         cancel-button-visible
-        confirm-text="[[i18n.confirm.cancel.button.confirm]]"
-        cancel-text="[[i18n.confirm.cancel.button.dismiss]]"
-        header="[[i18n.confirm.cancel.title]]"
-        message="[[i18n.confirm.cancel.content]]"
+        confirm-text="[[__effectiveI18n.confirm.cancel.button.confirm]]"
+        cancel-text="[[__effectiveI18n.confirm.cancel.button.dismiss]]"
+        header="[[__effectiveI18n.confirm.cancel.title]]"
+        message="[[__effectiveI18n.confirm.cancel.content]]"
         confirm-theme="primary"
       ></vaadin-confirm-dialog>
 
@@ -235,10 +235,10 @@ class Crud extends CrudMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         id="confirmDelete"
         on-confirm="__confirmDelete"
         cancel-button-visible
-        confirm-text="[[i18n.confirm.delete.button.confirm]]"
-        cancel-text="[[i18n.confirm.delete.button.dismiss]]"
-        header="[[i18n.confirm.delete.title]]"
-        message="[[i18n.confirm.delete.content]]"
+        confirm-text="[[__effectiveI18n.confirm.delete.button.confirm]]"
+        cancel-text="[[__effectiveI18n.confirm.delete.button.dismiss]]"
+        header="[[__effectiveI18n.confirm.delete.title]]"
+        message="[[__effectiveI18n.confirm.delete.content]]"
         confirm-theme="primary error"
       ></vaadin-confirm-dialog>
     `;

package/src/vaadin-lit-crud-dialog.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-dialog.js';

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

@@ -0,0 +1,128 @@
+/**
+ * @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 { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
+import { dialogOverlay, resizableOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import { crudDialogOverlayStyles } from './vaadin-crud-styles.js';
+
+/**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-crud-dialog-overlay';
+  }
+
+  static get styles() {
+    return [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
+      <div part="overlay" id="overlay" tabindex="0">
+        <section id="resizerContainer" class="resizer-container">
+          <header part="header"><slot name="header"></slot></header>
+          <div part="content" id="content">
+            <slot name="form"></slot>
+          </div>
+          <footer part="footer" role="toolbar">
+            <slot name="save-button"></slot>
+            <slot name="cancel-button"></slot>
+            <slot name="delete-button"></slot>
+          </footer>
+        </section>
+      </div>
+    `;
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  ready() {
+    super.ready();
+
+    // CRUD has header and footer but does not use renderers
+    this.setAttribute('has-header', '');
+    this.setAttribute('has-footer', '');
+  }
+}
+
+defineCustomElement(CrudDialogOverlay);
+
+/**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
+ * @private
+ */
+class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-crud-dialog';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: none;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      ariaLabel: {
+        type: String,
+      },
+
+      fullscreen: {
+        type: Boolean,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <vaadin-crud-dialog-overlay
+        id="overlay"
+        .opened="${this.opened}"
+        aria-label="${ifDefined(this.ariaLabel)}"
+        @opened-changed="${this._onOverlayOpened}"
+        @mousedown="${this._bringOverlayToFront}"
+        @touchstart="${this._bringOverlayToFront}"
+        theme="${ifDefined(this._theme)}"
+        .modeless="${this.modeless}"
+        .withBackdrop="${!this.modeless}"
+        ?fullscreen="${this.fullscreen}"
+        role="dialog"
+        focus-trap
+      ></vaadin-crud-dialog-overlay>
+    `;
+  }
+}
+
+defineCustomElement(CrudDialog);

package/src/vaadin-lit-crud-edit-column.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-edit-column.js';

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

@@ -0,0 +1,70 @@
+/**
+ * @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-lit-crud-edit.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { GridColumn } from '@vaadin/grid/src/vaadin-lit-grid-column.js';
+import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js';
+
+/**
+ * LitElement based version of `<vaadin-crud-edit-column>` 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 CrudEditColumn extends GridColumn {
+  static get is() {
+    return 'vaadin-crud-edit-column';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Width of the cells for this column.
+       * @private
+       */
+      width: {
+        type: String,
+        value: '4rem',
+      },
+
+      /**
+       * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
+       * @private
+       */
+      flexGrow: {
+        type: Number,
+        value: 0,
+      },
+
+      /** The arial-label for the edit button */
+      ariaLabel: String,
+    };
+  }
+
+  static get observers() {
+    return ['_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, _cells.*, path, ariaLabel)'];
+  }
+
+  /**
+   * Renders the crud edit element to the body cell.
+   *
+   * @override
+   */
+  _defaultRenderer(root, column) {
+    editColumnDefaultRenderer(root, column);
+  }
+}
+
+defineCustomElement(CrudEditColumn);
+
+export { CrudEditColumn };

package/src/vaadin-lit-crud-edit.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-edit.js';