@vaadin/vaadin-grid-pro - npm Package Compare versions

Comparing version 21.0.0-alpha5 to 21.0.0-alpha6

package.json

 {
   "name": "@vaadin/vaadin-grid-pro",
-  "version": "21.0.0-alpha5",
+  "version": "21.0.0-alpha6",
   "description": "vaadin-grid-pro",
@@ -29,13 +29,13 @@ "main": "vaadin-grid-pro.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-checkbox": "^21.0.0-alpha5",
-    "@vaadin/vaadin-element-mixin": "^21.0.0-alpha5",
-    "@vaadin/vaadin-grid": "^21.0.0-alpha5",
-    "@vaadin/vaadin-item": "^21.0.0-alpha5",
+    "@vaadin/vaadin-checkbox": "^21.0.0-alpha6",
+    "@vaadin/vaadin-element-mixin": "^21.0.0-alpha6",
+    "@vaadin/vaadin-grid": "^21.0.0-alpha6",
+    "@vaadin/vaadin-item": "^21.0.0-alpha6",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-list-box": "^21.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "^21.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "^21.0.0-alpha5",
-    "@vaadin/vaadin-select": "^21.0.0-alpha5",
-    "@vaadin/vaadin-text-field": "^21.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "^21.0.0-alpha5"
+    "@vaadin/vaadin-list-box": "^21.0.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "^21.0.0-alpha6",
+    "@vaadin/vaadin-material-styles": "^21.0.0-alpha6",
+    "@vaadin/vaadin-select": "^21.0.0-alpha6",
+    "@vaadin/vaadin-text-field": "^21.0.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "^21.0.0-alpha6"
   },
@@ -45,5 +45,5 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-date-picker": "^21.0.0-alpha5",
-    "@vaadin/vaadin-dialog": "^21.0.0-alpha5",
-    "@vaadin/vaadin-template-renderer": "^21.0.0-alpha5",
+    "@vaadin/vaadin-date-picker": "^21.0.0-alpha6",
+    "@vaadin/vaadin-dialog": "^21.0.0-alpha6",
+    "@vaadin/vaadin-template-renderer": "^21.0.0-alpha6",
     "sinon": "^9.2.1"
@@ -54,3 +54,3 @@ },
   },
-  "gitHead": "95df960d783024687399b0225f52b0c23d146877"
+  "gitHead": "70e820ca6ad22d0a85a4b50bfad65276ed36f344"
 }

src/vaadin-grid-pro-edit-column.d.ts

@@ -34,9 +34,10 @@ import { GridColumnElement } from '@vaadin/vaadin-grid/src/vaadin-grid-column.js';
    * - `column` The `<vaadin-grid-pro-edit-column>` element.
-   * - `rowData` The object with the properties related with
+   * - `model` The object with the properties related with
    *   the rendered item, contains:
-   *   - `rowData.index` The index of the item.
-   *   - `rowData.item` The item.
-   *   - `rowData.expanded` Sublevel toggle state.
-   *   - `rowData.level` Level of the tree represented with a horizontal offset of the toggle button.
-   *   - `rowData.selected` Selected state.
+   *   - `model.index` The index of the item.
+   *   - `model.item` The item.
+   *   - `model.expanded` Sublevel toggle state.
+   *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
+   *   - `model.selected` Selected state.
+   *   - `model.detailsOpened` Details opened state.
    */
@@ -57,4 +58,3 @@ editModeRenderer: GridBodyRenderer<TItem> | null | undefined;
    *
-   * Editor type is set to `custom` when either `editModeRenderer` is set,
-   * or editor template provided for the column.
+   * Editor type is set to `custom` when `editModeRenderer` is set.
    * @attr {text|checkbox|select|custom} editor-type
@@ -70,17 +70,2 @@ */
 
-  /**
-   * Override body template preparation to take editor into account.
-   */
-  _prepareBodyTemplate(): HTMLTemplateElement | null;
-
-  /**
-   * Override template filtering to take editor into account.
-   */
-  _selectFirstTemplate(header?: boolean, footer?: boolean, editor?: boolean): HTMLTemplateElement | null;
-
-  /**
-   * Override template search to take editor into account.
-   */
-  _findTemplate(header: boolean, footer: boolean, editor?: boolean): HTMLTemplateElement | null;
-
   _getEditorTagName(cell: HTMLElement): string;
@@ -87,0 +72,0 @@

src/vaadin-grid-pro-edit-column.js

@@ -7,3 +7,2 @@ /**
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { get, set } from '@polymer/polymer/lib/utils/path.js';
@@ -45,9 +44,10 @@ import { GridColumnElement } from '@vaadin/vaadin-grid/src/vaadin-grid-column.js';
        * - `column` The `<vaadin-grid-pro-edit-column>` element.
-       * - `rowData` The object with the properties related with
+       * - `model` The object with the properties related with
        *   the rendered item, contains:
-       *   - `rowData.index` The index of the item.
-       *   - `rowData.item` The item.
-       *   - `rowData.expanded` Sublevel toggle state.
-       *   - `rowData.level` Level of the tree represented with a horizontal offset of the toggle button.
-       *   - `rowData.selected` Selected state.
+       *   - `model.index` The index of the item.
+       *   - `model.item` The item.
+       *   - `model.expanded` Sublevel toggle state.
+       *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
+       *   - `model.selected` Selected state.
+       *   - `model.detailsOpened` Details opened state.
        * @type {!GridBodyRenderer | null | undefined}
@@ -73,4 +73,3 @@ */
        *
-       * Editor type is set to `custom` when either `editModeRenderer` is set,
-       * or editor template provided for the column.
+       * Editor type is set to `custom` when `editModeRenderer` is set.
        * @attr {text|checkbox|select|custom} editor-type
@@ -104,5 +103,2 @@ * @type {!GridProEditorType}
       /** @private */
-      _oldTemplate: Object,
-
-      /** @private */
       _oldRenderer: Function
@@ -113,3 +109,3 @@ };
   static get observers() {
-    return ['_editModeTemplateOrRendererChanged(_editModeTemplate, editModeRenderer)', '_cellsChanged(_cells.*)'];
+    return ['_editModeRendererChanged(editModeRenderer, __initialized)', '_cellsChanged(_cells.*)'];
   }
@@ -120,6 +116,2 @@
 
-    this._editTemplateObserver = new FlattenedNodesObserver(this, () => {
-      this._editModeTemplate = this._prepareEditModeTemplate();
-    });
-
     this.__editModeRenderer = function (root, column) {
@@ -137,9 +129,2 @@ const cell = root.assignedSlot.parentNode;
 
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._editTemplateObserver.flush();
-  }
-
   /** @private */
@@ -163,25 +148,9 @@ _pathChanged(path) {
   /** @private */
-  _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
-    if (template !== oldTemplate) {
-      this._editModeTemplate = undefined;
-    } else if (renderer !== oldRenderer) {
-      this.editModeRenderer = undefined;
-    }
-  }
-
-  /** @private */
-  _editModeTemplateOrRendererChanged(template, renderer) {
-    if (template === undefined && renderer === undefined && !this._oldTemplate && !this._oldRenderer) {
-      return;
-    }
-    if (template && renderer) {
-      this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);
-      throw new Error('You should only use either a renderer or a template');
-    }
-    if (template || renderer) {
+  _editModeRendererChanged(renderer) {
+    if (renderer) {
       this.editorType = 'custom';
-    } else if (this._oldRenderer || this._oldTemplate) {
+    } else if (this._oldRenderer) {
       this.editorType = 'text';
     }
-    this._oldTemplate = template;
+
     this._oldRenderer = renderer;
@@ -191,53 +160,2 @@ }
   /**
-   * Override body template preparation to take editor into account.
-   * @return {HTMLTemplateElement}
-   * @protected
-   */
-  _prepareBodyTemplate() {
-    return this._prepareTemplatizer(this._findTemplate(false, false, false) || null);
-  }
-
-  /**
-   * Override template filtering to take editor into account.
-   * @param {boolean} header
-   * @param {boolean} footer
-   * @param {boolean} editor
-   * @return {HTMLTemplateElement}
-   * @protected
-   */
-  _selectFirstTemplate(header = false, footer = false, editor = false) {
-    return FlattenedNodesObserver.getFlattenedNodes(this).filter(
-      (node) =>
-        node.localName === 'template' &&
-        node.classList.contains('header') === header &&
-        node.classList.contains('footer') === footer &&
-        node.classList.contains('editor') === editor
-    )[0];
-  }
-
-  /**
-   * Override template search to take editor into account.
-   * @param {boolean} header
-   * @param {boolean} footer
-   * @param {boolean=} editor
-   * @return {HTMLTemplateElement}
-   * @protected
-   */
-  _findTemplate(header, footer, editor) {
-    const template = this._selectFirstTemplate(header, footer, editor);
-    if (template) {
-      if (this.dataHost) {
-        // set dataHost to the context where template has been defined
-        template._rootDataHost = this.dataHost._rootDataHost || this.dataHost;
-      }
-    }
-    return template;
-  }
-
-  /** @private */
-  _prepareEditModeTemplate() {
-    return this._prepareTemplatizer(this._findTemplate(false, false, true) || null, {});
-  }
-
-  /**
    * @param {!HTMLElement} cell
@@ -304,29 +222,18 @@ * @return {string}
   _renderEditor(cell, model) {
-    if (cell._template) {
-      cell.__savedTemplate = cell._template;
-      cell._template = undefined;
-    } else {
-      // fallback to the path renderer stored on the cell
-      cell.__savedRenderer = this.renderer || cell._renderer;
-      cell._renderer = undefined;
-    }
-
-    if (this._editModeTemplate) {
-      this._stampTemplateToCell(cell, this._editModeTemplate, model);
-    } else {
-      this._stampRendererToCell(cell, this.editModeRenderer || this.__editModeRenderer, model);
-    }
+    cell.__savedRenderer = this._renderer || cell._renderer;
+    cell._content.innerHTML = '';
+    cell._renderer = this.editModeRenderer || this.__editModeRenderer;
+    this.__runRenderer(cell._renderer, cell, model);
   }
 
   /** @private */
-  _removeEditor(cell, model) {
-    if (cell.__savedTemplate) {
-      this._stampTemplateToCell(cell, cell.__savedTemplate, model);
-      cell._renderer = undefined;
-      cell.__savedTemplate = undefined;
-    } else if (cell.__savedRenderer) {
-      this._stampRendererToCell(cell, cell.__savedRenderer, model);
-      cell._template = undefined;
-      cell.__savedRenderer = undefined;
-    }
+  _removeEditor(cell, _model) {
+    if (!cell.__savedRenderer) return;
+
+    cell._content.innerHTML = '';
+    cell._renderer = cell.__savedRenderer;
+    cell.__savedRenderer = undefined;
+
+    const row = cell.parentElement;
+    this._grid._updateItem(row, row._item);
   }
@@ -369,21 +276,2 @@
 
-  /** @private */
-  _stampTemplateToCell(cell, template, model) {
-    cell._template = template;
-    cell._content.innerHTML = '';
-    template.templatizer._grid = this._grid;
-
-    const inst = template.templatizer.createInstance();
-    cell._content.appendChild(inst.root);
-    cell._instance = inst;
-    cell._instance.setProperties(model);
-  }
-
-  /** @private */
-  _stampRendererToCell(cell, renderer, model) {
-    cell._content.innerHTML = '';
-    cell._renderer = renderer;
-    this.__runRenderer(renderer, cell, model);
-  }
-
   /**
@@ -390,0 +278,0 @@ * @param {!HTMLElement} cell

src/vaadin-grid-pro.js

@@ -53,3 +53,3 @@ /**
   static get version() {
-    return '21.0.0-alpha5';
+    return '21.0.0-alpha6';
   }
@@ -56,0 +56,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

65255

decreased by-5.9%

Lines of code

1256

decreased by-8.32%

Dependency changes

• Updated@vaadin/vaadin-checkbox@^21.0.0-alpha6

• Updated@vaadin/vaadin-element-mixin@^21.0.0-alpha6

• Updated@vaadin/vaadin-grid@^21.0.0-alpha6

• Updated@vaadin/vaadin-item@^21.0.0-alpha6

• Updated@vaadin/vaadin-list-box@^21.0.0-alpha6

• Updated@vaadin/vaadin-lumo-styles@^21.0.0-alpha6

• Updated@vaadin/vaadin-material-styles@^21.0.0-alpha6

• Updated@vaadin/vaadin-select@^21.0.0-alpha6

• Updated@vaadin/vaadin-text-field@^21.0.0-alpha6

• Updated@vaadin/vaadin-themable-mixin@^21.0.0-alpha6