@vaadin/crud 23.1.0-alpha2 → 23.1.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -35,22 +35,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.1.0-alpha2",
-    "@vaadin/component-base": "23.1.0-alpha2",
-    "@vaadin/confirm-dialog": "23.1.0-alpha2",
-    "@vaadin/dialog": "23.1.0-alpha2",
-    "@vaadin/form-layout": "23.1.0-alpha2",
-    "@vaadin/grid": "23.1.0-alpha2",
-    "@vaadin/text-field": "23.1.0-alpha2",
+    "@vaadin/button": "23.1.0-alpha3",
+    "@vaadin/component-base": "23.1.0-alpha3",
+    "@vaadin/confirm-dialog": "23.1.0-alpha3",
+    "@vaadin/dialog": "23.1.0-alpha3",
+    "@vaadin/form-layout": "23.1.0-alpha3",
+    "@vaadin/grid": "23.1.0-alpha3",
+    "@vaadin/text-field": "23.1.0-alpha3",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha2"
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.1"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
 }

package/src/vaadin-crud.js

@@ -19,12 +19,6 @@ import { MediaQueryController } from '@vaadin/component-base/src/media-query-con
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-const HOST_PROPS = {
-  save: [{ attr: 'disabled', prop: '__isDirty', parseProp: '__isSaveBtnDisabled' }, { prop: 'i18n.saveItem' }],
-  cancel: [{ prop: 'i18n.cancel' }],
-  delete: [{ attr: 'hidden', prop: '__isNew', parseProp: (prop) => prop }, { prop: 'i18n.deleteItem' }]
-};
-
 /**
  * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
  *
@@ -324,7 +318,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _grid: {
         type: HTMLElement,
-        observer: '__onGridChange'
+        observer: '__gridChanged'
       },
 
       /**
@@ -333,7 +327,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _form: {
         type: HTMLElement,
-        observer: '__onFormChange'
+        observer: '__formChanged'
       },
 
       /**
@@ -342,7 +336,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _saveButton: {
         type: HTMLElement,
-        observer: '__onSaveButtonChange'
+        observer: '__saveButtonChanged'
       },
 
       /**
@@ -351,7 +345,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _deleteButton: {
         type: HTMLElement,
-        observer: '__onDeleteButtonChange'
+        observer: '__deleteButtonChanged'
       },
 
       /**
@@ -360,7 +354,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       _cancelButton: {
         type: HTMLElement,
-        observer: '__onCancelButtonChange'
+        observer: '__cancelButtonChanged'
       },
 
       /**
@@ -378,7 +372,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       items: {
         type: Array,
         notify: true,
-        observer: '__onItemsChange'
+        observer: '__itemsChanged'
       },
 
       /**
@@ -387,7 +381,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       editedItem: {
         type: Object,
-        observer: '__onItemChange',
+        observer: '__editedItemChanged',
         notify: true
       },
 
@@ -405,7 +399,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         type: String,
         value: '',
         reflectToAttribute: true,
-        observer: '__onEditorPositionChange'
+        observer: '__editorPositionChanged'
       },
 
       /**
@@ -434,7 +428,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        */
       dataProvider: {
         type: Function,
-        observer: '__onDataProviderChange'
+        observer: '__dataProviderChanged'
       },
 
       /**
@@ -482,7 +476,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         type: Boolean,
         reflectToAttribute: true,
         notify: true,
-        observer: '__onOpenedChanged'
+        observer: '__editorOpenedChanged'
       },
 
       /**
@@ -607,17 +601,13 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
   static get observers() {
     return [
-      '__headerNodeChanged(_headerNode, __isNew, i18n.newItem, i18n.editItem)',
-      '__formChanged(_form, _theme, include, exclude)',
-      '__onI18Change(i18n, _grid)',
-      '__onEditOnClickChange(editOnClick, _grid)',
-      '__hostPropsChanged(' +
-        HOST_PROPS.save.map(({ prop }) => prop).join(',') +
-        ',' +
-        HOST_PROPS.cancel.map(({ prop }) => prop).join(',') +
-        ',' +
-        HOST_PROPS.delete.map(({ prop }) => prop).join(',') +
-        ')'
+      '__headerPropsChanged(_headerNode, __isNew, i18n.newItem, i18n.editItem)',
+      '__formPropsChanged(_form, _theme, include, exclude)',
+      '__i18nChanged(i18n, _grid)',
+      '__editOnClickChanged(editOnClick, _grid)',
+      '__saveButtonPropsChanged(_saveButton, i18n.saveItem, __isDirty)',
+      '__cancelButtonPropsChanged(_cancelButton, i18n.cancel)',
+      '__deleteButtonPropsChanged(_deleteButton, i18n.deleteItem, __isNew)'
     ];
   }
 
@@ -632,6 +622,11 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
+  /** @private */
+  static _isValidEditorPosition(editorPosition) {
+    return ['bottom', 'aside'].indexOf(editorPosition) != -1;
+  }
+
   /** @protected */
   get slots() {
     // NOTE: order in which the toolbar buttons are listed matters.
@@ -674,18 +669,16 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   /** @protected */
   ready() {
     super.ready();
-    this.__editListener = (e) => this.__onCrudGridEdit(e);
-    this.__changeListener = (e) => this.__onFormChanges(e);
-    this.__saveBound = this.__save.bind(this);
-    this.__cancelBound = this.__cancel.bind(this);
-    this.__deleteBound = this.__delete.bind(this);
-    this.__gridSizeListener = this.__onGridSizeChanges.bind(this);
-    this.__boundEditOnClickListener = this.__editOnClickListener.bind(this);
+    this.__save = this.__save.bind(this);
+    this.__cancel = this.__cancel.bind(this);
+    this.__delete = this.__delete.bind(this);
+    this.__onFormChange = this.__onFormChange.bind(this);
+    this.__onGridEdit = this.__onGridEdit.bind(this);
+    this.__onGridSizeChanged = this.__onGridSizeChanged.bind(this);
+    this.__onGridActiveItemChanged = this.__onGridActiveItemChanged.bind(this);
     this._grid = this.$.grid;
-    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancelBound);
-    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancelBound);
-    // Initialize the default buttons
-    this.__propagateHostAttributes();
+    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancel);
+    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
 
     this.addController(
       new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
@@ -694,31 +687,35 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     );
   }
 
-  /** @private */
+  /**
+   * @param {boolean} isDirty
+   * @private
+   */
   __isSaveBtnDisabled(isDirty) {
     // Used instead of isDirty property binding in order to enable overriding of the behavior
     // by overriding the method (i.e. from Flow component)
     return !isDirty;
   }
 
-  /** @private */
-  __headerNodeChanged(headerNode, isNew, newItem, editItem) {
+  /**
+   * @param {HTMLElement | undefined} headerNode
+   * @param {boolean} isNew
+   * @param {string} i18nNewItem
+   * @param {string} i18nEditItem
+   * @private
+   */
+  __headerPropsChanged(headerNode, isNew, i18nNewItem, i18nEditItem) {
     if (headerNode) {
-      headerNode.textContent = isNew ? newItem : editItem;
+      headerNode.textContent = isNew ? i18nNewItem : i18nEditItem;
     }
   }
 
-  /** @private */
-  __formChanged(form, theme, include, exclude) {
-    if (form) {
-      form.include = include;
-      form.exclude = exclude;
-      form.setAttribute('theme', theme);
-    }
-  }
-
-  /** @private */
-  __onI18Change(i18n, grid) {
+  /**
+   * @param {CrudI18n} i18n
+   * @param {CrudGrid | Grid} grid
+   * @private
+   */
+  __i18nChanged(i18n, grid) {
     if (!grid) {
       return;
     }
@@ -731,7 +728,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __onEditorPositionChange(editorPosition) {
+  __editorPositionChanged(editorPosition) {
     if (Crud._isValidEditorPosition(editorPosition)) {
       return;
     }
@@ -739,16 +736,11 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  static _isValidEditorPosition(editorPosition) {
-    return ['bottom', 'aside'].indexOf(editorPosition) != -1;
-  }
-
-  /** @private */
-  __onOpenedChanged(opened, old) {
-    if (!opened && old) {
+  __editorOpenedChanged(opened, oldOpened) {
+    if (!opened && oldOpened) {
       this.__closeEditor();
     } else {
-      this.__onFormChange(this._form);
+      this.__formChanged(this._form);
     }
 
     if (opened) {
@@ -851,9 +843,9 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
         if (slotAttributeValue == 'grid') {
           // Force to remove listener on previous grid first
-          this.__onEditOnClickChange(false, this._grid);
+          this.__editOnClickChanged(false, this._grid);
           this._grid = node;
-          this.__onEditOnClickChange(this.editOnClick, this._grid);
+          this.__editOnClickChanged(this.editOnClick, this._grid);
         } else if (slotAttributeValue == 'form') {
           this._form = node;
         } else if (slotAttributeValue.indexOf('button') >= 0) {
@@ -863,155 +855,191 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
           this._headerNode = node;
         }
       });
+
+    if (this.editorOpened) {
+      this.__ensureChildren();
+    }
   }
 
   /** @private */
-  __onCrudGridEdit(e) {
-    e.stopPropagation();
-    this.__confirmBeforeChangingEditedItem(e.detail.item);
+  __onGridEdit(event) {
+    event.stopPropagation();
+    this.__confirmBeforeChangingEditedItem(event.detail.item);
   }
 
   /** @private */
-  __onFormChanges() {
+  __onFormChange() {
     this.__isDirty = true;
   }
 
   /** @private */
-  __onGridSizeChanges() {
+  __onGridSizeChanged() {
     this._setSize(this._grid.size);
   }
 
-  /** @private */
-  __onGridChange(grid, old) {
-    if (old) {
-      old.removeEventListener('edit', this.__editListener);
-      old.removeEventListener('size-changed', this.__gridSizeListener);
+  /**
+   * @param {CrudGrid | Grid} grid
+   * @param {CrudGrid | Grid | undefined} oldGrid
+   * @private
+   */
+  __gridChanged(grid, oldGrid) {
+    if (oldGrid) {
+      oldGrid.removeEventListener('edit', this.__onGridEdit);
+      oldGrid.removeEventListener('size-changed', this.__onGridSizeChanged);
     }
     if (this.dataProvider) {
-      this.__onDataProviderChange(this.dataProvider);
+      this.__dataProviderChanged(this.dataProvider);
     }
     if (this.items) {
-      this.__onItemsChange(this.items);
+      this.__itemsChanged(this.items);
     }
     if (this.editedItem) {
-      this.__onItemChange(this.editedItem);
+      this.__editedItemChanged(this.editedItem);
     }
-    grid.addEventListener('edit', this.__editListener);
-    grid.addEventListener('size-changed', this.__gridSizeListener);
-    this.__onGridSizeChanges();
+    grid.addEventListener('edit', this.__onGridEdit);
+    grid.addEventListener('size-changed', this.__onGridSizeChanged);
+    this.__onGridSizeChanged();
   }
 
-  /** @private */
-  __onFormChange(form, old) {
-    if (old && old.parentElement) {
-      old.parentElement && old.parentElement.removeChild(old);
-      old.removeEventListener('change', this.__changeListener);
-      old.removeEventListener('input', this.__changeListener);
+  /**
+   * @param {HTMLElement | undefined | null} form
+   * @param {HTMLElement | undefined | null} oldForm
+   * @private
+   */
+  __formChanged(form, oldForm) {
+    if (oldForm && oldForm.parentElement) {
+      oldForm.parentElement.removeChild(oldForm);
+      oldForm.removeEventListener('change', this.__onFormChange);
+      oldForm.removeEventListener('input', this.__onFormChange);
     }
     if (!form) {
       return;
     }
     if (this.items) {
-      this.__onItemsChange(this.items);
+      this.__itemsChanged(this.items);
     }
     if (this.editedItem) {
-      this.__onItemChange(this.editedItem);
+      this.__editedItemChanged(this.editedItem);
     }
-    form.addEventListener('change', this.__changeListener);
-    form.addEventListener('input', this.__changeListener);
-  }
-
-  /** @private */
-  __onSaveButtonChange(save, old) {
-    this.__setupSlottedButton(save, old, this.__saveBound);
+    form.addEventListener('change', this.__onFormChange);
+    form.addEventListener('input', this.__onFormChange);
   }
 
-  /** @private */
-  __onDeleteButtonChange(deleteButton, old) {
-    this.__setupSlottedButton(deleteButton, old, this.__deleteBound);
+  /**
+   * @param {HTMLElement | undefined} form
+   * @param {string} theme
+   * @param {string | string[] | undefined} include
+   * @param {string | RegExp} exclude
+   * @private
+   */
+  __formPropsChanged(form, theme, include, exclude) {
+    if (form) {
+      form.include = include;
+      form.exclude = exclude;
+      form.setAttribute('theme', theme);
+    }
   }
 
-  /** @private */
-  __onCancelButtonChange(cancel, old) {
-    this.__setupSlottedButton(cancel, old, this.__cancelBound);
+  /**
+   * @param {HTMLElement} saveButton
+   * @param {HTMLElement | undefined} oldSaveButton
+   * @private
+   */
+  __saveButtonChanged(saveButton, oldSaveButton) {
+    this.__setupSlottedButton(saveButton, oldSaveButton, this.__save);
   }
 
-  /** @private */
-  __setupSlottedButton(slottedButton, currentButton, clickListener) {
-    if (currentButton && currentButton.parentElement) {
-      currentButton.parentElement.removeChild(currentButton);
+  /**
+   * @param {HTMLElement | undefined} saveButton
+   * @param {string} i18nLabel
+   * @param {boolean} isDirty
+   * @private
+   */
+  __saveButtonPropsChanged(saveButton, i18nLabel, isDirty) {
+    if (saveButton) {
+      saveButton.toggleAttribute('disabled', this.__isSaveBtnDisabled(isDirty));
+      saveButton.textContent = i18nLabel;
     }
-
-    slottedButton.addEventListener('click', clickListener);
   }
 
-  /** @private */
-  __hostPropsChanged() {
-    this.__propagateHostAttributes();
+  /**
+   * @param {HTMLElement} deleteButton
+   * @param {HTMLElement | undefined} oldDeleteButton
+   * @private
+   */
+  __deleteButtonChanged(deleteButton, oldDeleteButton) {
+    this.__setupSlottedButton(deleteButton, oldDeleteButton, this.__delete);
   }
 
-  /** @private */
-  __propagateHostAttributes() {
-    this.__propagateHostAttributesToButton(this._saveButton, HOST_PROPS.save);
-    this.__propagateHostAttributesToButton(this._cancelButton, HOST_PROPS.cancel);
-    this.__propagateHostAttributesToButton(this._deleteButton, HOST_PROPS.delete);
+  /**
+   * @param {HTMLElement | undefined} deleteButton
+   * @param {string} i18nLabel
+   * @param {boolean} isNew
+   * @private
+   */
+  __deleteButtonPropsChanged(deleteButton, i18nLabel, isNew) {
+    if (deleteButton) {
+      deleteButton.textContent = i18nLabel;
+      deleteButton.toggleAttribute('hidden', isNew);
+    }
   }
 
-  /** @private */
-  __propagateHostAttributesToButton(button, props) {
-    // Ensure the slotted button element is present in the DOM.
-    // This is needed because the observer runs before `ready`.
-    if (button) {
-      props.forEach(({ attr, prop, parseProp }) => {
-        if (prop.indexOf('i18n') >= 0) {
-          button.textContent = this.i18n[prop.split('.')[1]];
-        } else {
-          if (typeof parseProp === 'string') {
-            this._setOrToggleAttribute(attr, this[parseProp](this[prop]), button);
-            return;
-          }
+  /**
+   * @param {HTMLElement} cancelButton
+   * @param {HTMLElement | undefined} oldCancelButton
+   * @private
+   */
+  __cancelButtonChanged(cancelButton, oldCancelButton) {
+    this.__setupSlottedButton(cancelButton, oldCancelButton, this.__cancel);
+  }
 
-          this._setOrToggleAttribute(attr, parseProp(this[prop]), button);
-        }
-      });
+  /**
+   * @param {HTMLElement | undefined} saveButton
+   * @param {string} i18nLabel
+   * @private
+   */
+  __cancelButtonPropsChanged(cancelButton, i18nLabel) {
+    if (cancelButton) {
+      cancelButton.textContent = i18nLabel;
     }
   }
 
-  /** @private */
-  _setOrToggleAttribute(name, value, node) {
-    if (!name || !node) {
-      return;
+  /**
+   * @param {HTMLElement} newButton
+   * @param {HTMLElement | undefined | null} oldButton
+   * @param {Function} clickListener
+   * @private
+   */
+  __setupSlottedButton(newButton, oldButton, clickListener) {
+    if (oldButton && oldButton.parentElement) {
+      oldButton.parentElement.removeChild(oldButton);
     }
 
-    if (value) {
-      node.setAttribute(name, typeof value === 'boolean' ? '' : value);
-    } else {
-      node.removeAttribute(name);
-    }
+    newButton.addEventListener('click', clickListener);
   }
 
   /** @private */
-  __onDataProviderChange(dataProvider) {
+  __dataProviderChanged(dataProvider) {
     if (this._grid) {
       this._grid.dataProvider = this.__createDataProviderProxy(dataProvider);
     }
   }
 
   /** @private */
-  __onEditOnClickChange(rowToEditChange, _grid) {
+  __editOnClickChanged(editOnClick, _grid) {
     if (!_grid) {
       return;
     }
 
-    if (rowToEditChange) {
-      _grid.addEventListener('active-item-changed', this.__boundEditOnClickListener);
+    if (editOnClick) {
+      _grid.addEventListener('active-item-changed', this.__onGridActiveItemChanged);
     } else {
-      _grid.removeEventListener('active-item-changed', this.__boundEditOnClickListener);
+      _grid.removeEventListener('active-item-changed', this.__onGridActiveItemChanged);
     }
   }
 
   /** @private */
-  __editOnClickListener(event) {
+  __onGridActiveItemChanged(event) {
     const item = event.detail.value;
     if (this.editorOpened && this.__isDirty) {
       this.__confirmBeforeChangingEditedItem(item);
@@ -1075,7 +1103,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __onItemsChange(items) {
+  __itemsChanged(items) {
     if (this.items && this.items[0]) {
       this.__model = items[0];
     }
@@ -1086,7 +1114,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __onItemChange(item) {
+  __editedItemChanged(item) {
     if (!this._form) {
       return;
     }