@vaadin/crud - npm Package Compare versions

Comparing version 23.1.0-alpha2 to 23.1.0-alpha3

package.json

 {
   "name": "@vaadin/crud",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-alpha3",
   "publishConfig": {
@@ -38,13 +38,13 @@ "access": "public"
     "@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"
   },
@@ -54,5 +54,5 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.1"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
 }

src/vaadin-crud.js

@@ -22,8 +22,2 @@ /**
 
-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' }]
-};
-
 /**
@@ -328,3 +322,3 @@ * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
         type: HTMLElement,
-        observer: '__onGridChange'
+        observer: '__gridChanged'
       },
@@ -338,3 +332,3 @@
         type: HTMLElement,
-        observer: '__onFormChange'
+        observer: '__formChanged'
       },
@@ -348,3 +342,3 @@
         type: HTMLElement,
-        observer: '__onSaveButtonChange'
+        observer: '__saveButtonChanged'
       },
@@ -358,3 +352,3 @@
         type: HTMLElement,
-        observer: '__onDeleteButtonChange'
+        observer: '__deleteButtonChanged'
       },
@@ -368,3 +362,3 @@
         type: HTMLElement,
-        observer: '__onCancelButtonChange'
+        observer: '__cancelButtonChanged'
       },
@@ -387,3 +381,3 @@
         notify: true,
-        observer: '__onItemsChange'
+        observer: '__itemsChanged'
       },
@@ -397,3 +391,3 @@
         type: Object,
-        observer: '__onItemChange',
+        observer: '__editedItemChanged',
         notify: true
@@ -416,3 +410,3 @@ },
         reflectToAttribute: true,
-        observer: '__onEditorPositionChange'
+        observer: '__editorPositionChanged'
       },
@@ -446,3 +440,3 @@
         type: Function,
-        observer: '__onDataProviderChange'
+        observer: '__dataProviderChanged'
       },
@@ -495,3 +489,3 @@
         notify: true,
-        observer: '__onOpenedChanged'
+        observer: '__editorOpenedChanged'
       },
@@ -621,13 +615,9 @@
     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)'
     ];
@@ -647,2 +637,7 @@ }
 
+  /** @private */
+  static _isValidEditorPosition(editorPosition) {
+    return ['bottom', 'aside'].indexOf(editorPosition) != -1;
+  }
+
   /** @protected */
@@ -690,14 +685,12 @@ get slots() {
     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);
 
@@ -711,3 +704,6 @@ this.addController(
 
-  /** @private */
+  /**
+   * @param {boolean} isDirty
+   * @private
+   */
   __isSaveBtnDisabled(isDirty) {
@@ -719,20 +715,21 @@ // Used instead of isDirty property binding in order to enable overriding of the behavior
 
-  /** @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) {
@@ -750,3 +747,3 @@ return;
   /** @private */
-  __onEditorPositionChange(editorPosition) {
+  __editorPositionChanged(editorPosition) {
     if (Crud._isValidEditorPosition(editorPosition)) {
@@ -759,12 +756,7 @@ return;
   /** @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);
     }
@@ -872,5 +864,5 @@
           // 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') {
@@ -885,12 +877,16 @@ this._form = 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;
@@ -900,32 +896,40 @@ }
   /** @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);
     }
@@ -936,82 +940,106 @@ if (!form) {
     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);
+    form.addEventListener('change', this.__onFormChange);
+    form.addEventListener('input', this.__onFormChange);
   }
 
-  /** @private */
-  __onSaveButtonChange(save, old) {
-    this.__setupSlottedButton(save, old, this.__saveBound);
+  /**
+   * @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 */
-  __onDeleteButtonChange(deleteButton, old) {
-    this.__setupSlottedButton(deleteButton, old, this.__deleteBound);
+  /**
+   * @param {HTMLElement} saveButton
+   * @param {HTMLElement | undefined} oldSaveButton
+   * @private
+   */
+  __saveButtonChanged(saveButton, oldSaveButton) {
+    this.__setupSlottedButton(saveButton, oldSaveButton, this.__save);
   }
 
-  /** @private */
-  __onCancelButtonChange(cancel, old) {
-    this.__setupSlottedButton(cancel, old, this.__cancelBound);
+  /**
+   * @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;
+    }
   }
 
-  /** @private */
-  __setupSlottedButton(slottedButton, currentButton, clickListener) {
-    if (currentButton && currentButton.parentElement) {
-      currentButton.parentElement.removeChild(currentButton);
-    }
-
-    slottedButton.addEventListener('click', clickListener);
+  /**
+   * @param {HTMLElement} deleteButton
+   * @param {HTMLElement | undefined} oldDeleteButton
+   * @private
+   */
+  __deleteButtonChanged(deleteButton, oldDeleteButton) {
+    this.__setupSlottedButton(deleteButton, oldDeleteButton, this.__delete);
   }
 
-  /** @private */
-  __hostPropsChanged() {
-    this.__propagateHostAttributes();
+  /**
+   * @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 */
-  __propagateHostAttributes() {
-    this.__propagateHostAttributesToButton(this._saveButton, HOST_PROPS.save);
-    this.__propagateHostAttributesToButton(this._cancelButton, HOST_PROPS.cancel);
-    this.__propagateHostAttributesToButton(this._deleteButton, HOST_PROPS.delete);
+  /**
+   * @param {HTMLElement} cancelButton
+   * @param {HTMLElement | undefined} oldCancelButton
+   * @private
+   */
+  __cancelButtonChanged(cancelButton, oldCancelButton) {
+    this.__setupSlottedButton(cancelButton, oldCancelButton, this.__cancel);
   }
 
-  /** @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;
-          }
-
-          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) {
@@ -1023,3 +1051,3 @@ this._grid.dataProvider = this.__createDataProviderProxy(dataProvider);
   /** @private */
-  __onEditOnClickChange(rowToEditChange, _grid) {
+  __editOnClickChanged(editOnClick, _grid) {
     if (!_grid) {
@@ -1029,6 +1057,6 @@ 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);
     }
@@ -1038,3 +1066,3 @@ }
   /** @private */
-  __editOnClickListener(event) {
+  __onGridActiveItemChanged(event) {
     const item = event.detail.value;
@@ -1103,3 +1131,3 @@ if (this.editorOpened && this.__isDirty) {
   /** @private */
-  __onItemsChange(items) {
+  __itemsChanged(items) {
     if (this.items && this.items[0]) {
@@ -1115,3 +1143,3 @@ this.__model = items[0];
   /** @private */
-  __onItemChange(item) {
+  __editedItemChanged(item) {
     if (!this._form) {
@@ -1118,0 +1146,0 @@ return;

No alert changes

Improved metrics

Total package byte prevSize

100653

increased by0.44%

Lines of code

2582

increased by1.22%

Dependency changes

• + Added@vaadin/button@23.1.0-alpha3(transitive)

• + Added@vaadin/checkbox@23.1.0-alpha3(transitive)

• + Added@vaadin/component-base@23.1.0-alpha3(transitive)

• + Added@vaadin/confirm-dialog@23.1.0-alpha3(transitive)

• + Added@vaadin/dialog@23.1.0-alpha3(transitive)

• + Added@vaadin/field-base@23.1.0-alpha3(transitive)

• + Added@vaadin/form-layout@23.1.0-alpha3(transitive)

• + Added@vaadin/grid@23.1.0-alpha3(transitive)

• + Added@vaadin/icon@23.1.0-alpha3(transitive)

• + Added@vaadin/input-container@23.1.0-alpha3(transitive)

• + Added@vaadin/text-field@23.1.0-alpha3(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.1.0-alpha3(transitive)

• + Added@vaadin/vaadin-material-styles@23.1.0-alpha3(transitive)

• + Added@vaadin/vaadin-overlay@23.1.0-alpha3(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.1.0-alpha3(transitive)

• - Removed@vaadin/button@23.1.0-alpha2(transitive)

• - Removed@vaadin/checkbox@23.1.0-alpha2(transitive)

• - Removed@vaadin/component-base@23.1.0-alpha2(transitive)

• - Removed@vaadin/confirm-dialog@23.1.0-alpha2(transitive)

• - Removed@vaadin/dialog@23.1.0-alpha2(transitive)

• - Removed@vaadin/field-base@23.1.0-alpha2(transitive)

• - Removed@vaadin/form-layout@23.1.0-alpha2(transitive)

• - Removed@vaadin/grid@23.1.0-alpha2(transitive)

• - Removed@vaadin/icon@23.1.0-alpha2(transitive)

• - Removed@vaadin/input-container@23.1.0-alpha2(transitive)

• - Removed@vaadin/text-field@23.1.0-alpha2(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.1.0-alpha2(transitive)

• - Removed@vaadin/vaadin-material-styles@23.1.0-alpha2(transitive)

• - Removed@vaadin/vaadin-overlay@23.1.0-alpha2(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.1.0-alpha2(transitive)

• Updated@vaadin/button@23.1.0-alpha3

• Updated@vaadin/component-base@23.1.0-alpha3

• Updated@vaadin/confirm-dialog@23.1.0-alpha3

• Updated@vaadin/dialog@23.1.0-alpha3

• Updated@vaadin/form-layout@23.1.0-alpha3

• Updated@vaadin/grid@23.1.0-alpha3

• Updated@vaadin/text-field@23.1.0-alpha3

• Updated@vaadin/vaadin-lumo-styles@23.1.0-alpha3

• Updated@vaadin/vaadin-material-styles@23.1.0-alpha3

• Updated@vaadin/vaadin-themable-mixin@23.1.0-alpha3