@vaadin/vaadin-grid 5.9.1 → 5.9.4

package/package.json

@@ -15,7 +15,7 @@
   "repository": "vaadin/vaadin-grid",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-grid",
-  "version": "5.9.1",
+  "version": "5.9.4",
   "main": "vaadin-grid.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -44,33 +44,34 @@
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
   "resolutions": {
-"@webcomponents/webcomponentsjs": "2.0.0",
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
+    "@webcomponents/webcomponentsjs": "2.0.0",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
     "type-detect": "1.0.0"
   },
-  "scripts": {
-  "generate-typings": "gen-typescript-declarations --outDir . --verify"
-},
-"devDependencies": {
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.1",
+  "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
+    "@polymer/app-localize-behavior": "^3.0.0",
+    "@polymer/iron-ajax": "^3.0.0",
+    "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-image": "^3.0.0",
+    "@polymer/iron-list": "^3.0.0",
+    "@polymer/iron-media-query": "^3.0.0",
     "@polymer/iron-test-helpers": "^3.0.0",
-    "@polymer/paper-input": "^3.0.0",
     "@polymer/paper-checkbox": "^3.0.0",
-    "@polymer/iron-flex-layout": "^3.0.0",
-    "@polymer/iron-image": "^3.0.0",
+    "@polymer/paper-input": "^3.0.0",
     "@polymer/paper-slider": "^3.0.0",
-    "@polymer/iron-media-query": "^3.0.0",
-    "@polymer/iron-component-page": "^4.0.0",
-    "@polymer/iron-ajax": "^3.0.0",
-    "@polymer/app-localize-behavior": "^3.0.0",
-    "@polymer/iron-list": "^3.0.0",
-    "@vaadin/vaadin-demo-helpers": "^3.1.0",
+    "@polymer/test-fixture": "^4.0.0",
     "@vaadin/vaadin-button": "^2.4.0",
-    "@vaadin/vaadin-context-menu": "^4.5.0"
+    "@vaadin/vaadin-context-menu": "^4.5.0",
+    "@vaadin/vaadin-demo-helpers": "^3.1.0",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "wct-browser-legacy": "^1.0.1"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

package/src/vaadin-grid-column-reordering-mixin.js

@@ -8,7 +8,6 @@ import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event
 import { GridHelper } from './vaadin-grid-helpers.js';
 import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
 import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-import { useShadow } from '@polymer/polymer/lib/utils/settings.js';
 
 /**
  * @polymerMixin
@@ -214,15 +213,24 @@ export const ColumnReorderingMixin = superClass => class ColumnReorderingMixin e
     if (!this._draggedColumn) {
       this._toggleAttribute('no-content-pointer-events', true, this.$.scroller);
     }
+    // Workaround a ShadyDOM bug
+    this._reorderGhost.hidden = true;
+
     let cell;
-    if (useShadow) {
+    if (this.shadowRoot.elementFromPoint) {
       cell = this.shadowRoot.elementFromPoint(x, y);
     } else {
       cell = document.elementFromPoint(x, y);
+    }
 
-      // Workaround a FF58 bug
+    this._reorderGhost.hidden = false;
+
+    // Workaround FF58/ShadyDOM bugs
+    while (!cell._column && cell.parentElement) {
       if (cell.localName === 'vaadin-grid-cell-content') {
         cell = cell.assignedSlot.parentNode;
+      } else {
+        cell = cell.parentElement;
       }
 
     }

package/src/vaadin-grid-column.js

@@ -368,7 +368,9 @@ export const ColumnBaseMixin = superClass => class ColumnBaseMixin extends super
   _setFooterTemplateOrRenderer(footerTemplate, footerRenderer, footerCell) {
     if ((footerTemplate || footerRenderer) && footerCell) {
       this.__setColumnTemplateOrRenderer(footerTemplate, footerRenderer, [footerCell]);
-      this._grid.__updateHeaderFooterRowVisibility(footerCell.parentElement);
+      if (this._grid) {
+        this._grid.__updateHeaderFooterRowVisibility(footerCell.parentElement);
+      }
     }
   }
 
@@ -482,7 +484,7 @@ export const ColumnBaseMixin = superClass => class ColumnBaseMixin extends super
       }
     }
 
-    if (headerCell) {
+    if (headerCell && this._grid) {
       this._grid.__updateHeaderFooterRowVisibility(headerCell.parentElement);
     }
   }

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

@@ -0,0 +1,34 @@
+/**
+ * DO NOT EDIT
+ *
+ * This file was automatically generated by
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
+ *
+ * To modify these typings, edit the source file(s):
+ *   src/vaadin-grid-disabled-mixin.js
+ */
+
+
+// tslint:disable:variable-name Describing an API that's defined elsewhere.
+// tslint:disable:no-any describes the API as best we are able today
+
+export {DisabledMixin};
+
+declare function DisabledMixin<T extends new (...args: any[]) => {}>(base: T): T & DisabledMixinConstructor;
+
+interface DisabledMixinConstructor {
+  new(...args: any[]): DisabledMixin;
+}
+
+export {DisabledMixinConstructor};
+
+interface DisabledMixin {
+  disabled: boolean|null|undefined;
+  _disabledChanged(disabled: any): void;
+
+  /**
+   * Overrides the default element `click` method in order to prevent
+   * firing the `click` event when the element is disabled.
+   */
+  click(): void;
+}

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

@@ -0,0 +1,43 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+/**
+ * @polymerMixin
+ */
+export const DisabledMixin = superClass => class DisabledMixin extends superClass {
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        value: false,
+        observer: '_disabledChanged',
+        reflectToAttribute: true
+      }
+    };
+  }
+
+  /** @protected */
+  _disabledChanged(disabled) {
+    if (disabled) {
+      this.setAttribute('tabindex', '-1');
+      this.setAttribute('aria-disabled', 'true');
+    } else {
+      this.removeAttribute('tabindex');
+      this.removeAttribute('aria-disabled');
+    }
+  }
+
+  /**
+   * Overrides the default element `click` method in order to prevent
+   * firing the `click` event when the element is disabled.
+   * @protected
+   * @override
+   */
+  click() {
+    if (!this.disabled) {
+      super.click();
+    }
+  }
+};

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

@@ -80,11 +80,7 @@ export const SelectionMixin = superClass => class SelectionMixin extends superCl
 
   /** @private */
   _selectedItemsChanged(e) {
-    if (this.$.items.children.length && (e.path === 'selectedItems' || e.path === 'selectedItems.splices')) {
-      Array.from(this.$.items.children).forEach(row => {
-        this._updateItem(row, row._item);
-      });
-    }
+    this._assignModels();
   }
 
   /** @private */

package/src/vaadin-grid-styles.js

@@ -31,6 +31,11 @@ VaadinGridStyles.appendChild(
       display: none !important;
     }
 
+    :host([disabled]) {
+      pointer-events: none;
+      animation: none;
+    }
+
     #scroller {
       display: block;
       transform: translateY(0);

package/src/vaadin-grid.d.ts

@@ -13,6 +13,8 @@
 
 import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+import {DisabledMixin} from './vaadin-grid-disabled-mixin.js';
+
 import {ScrollerElement} from './vaadin-grid-scroller.js';
 
 import {A11yMixin} from './vaadin-grid-a11y-mixin.js';
@@ -255,7 +257,7 @@ import {timeOut, animationFrame} from '@polymer/polymer/lib/utils/async.js';
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
- * * `first-column` | First visible cell on a row | cell
+ * `first-column` | First visible cell on a row | cell
  * `last-column` | Last visible cell on a row | cell
  * `selected` | Selected row | row
  * `expanded` | Expanded row | row
@@ -263,6 +265,7 @@ import {timeOut, animationFrame} from '@polymer/polymer/lib/utils/async.js';
  * `loading` | Row that is waiting for data from data provider | row
  * `odd` | Odd row | row
  * `first` | The first body row | row
+ * `last` | The last body row | row
  * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
  * `dragover` | Set when the row is dragged over | row
  * `drag-disabled` | Set to a row that isn't available for dragging | row

package/src/vaadin-grid.js

@@ -6,6 +6,7 @@ This program is available under Apache License Version 2.0, available at https:/
 import '@polymer/polymer/polymer-legacy.js';
 
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DisabledMixin } from './vaadin-grid-disabled-mixin.js';
 import { ScrollerElement } from './vaadin-grid-scroller.js';
 import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
 import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
@@ -239,7 +240,7 @@ const TOUCH_DEVICE = (() => {
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
-* * `first-column` | First visible cell on a row | cell
+ * `first-column` | First visible cell on a row | cell
  * `last-column` | Last visible cell on a row | cell
  * `selected` | Selected row | row
  * `expanded` | Expanded row | row
@@ -247,6 +248,7 @@ const TOUCH_DEVICE = (() => {
  * `loading` | Row that is waiting for data from data provider | row
  * `odd` | Odd row | row
  * `first` | The first body row | row
+ * `last` | The last body row | row
  * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
  * `dragover` | Set when the row is dragged over | row
  * `drag-disabled` | Set to a row that isn't available for dragging | row
@@ -293,7 +295,8 @@ class GridElement extends
                                 EventContextMixin(
                                   DragAndDropMixin(
                                     StylingMixin(
-                                      ScrollerElement)))))))))))))))))) {
+                                      DisabledMixin(
+                                        ScrollerElement))))))))))))))))))) {
   static get template() {
     return html`
     <style include="vaadin-grid-styles"></style>
@@ -322,7 +325,7 @@ class GridElement extends
   }
 
   static get version() {
-    return '5.9.1';
+    return '5.9.4';
   }
 
   static get observers() {
@@ -764,6 +767,7 @@ class GridElement extends
     }
 
     this._toggleAttribute('first', index === 0, row);
+    this._toggleAttribute('last', index === this._effectiveSize - 1, row);
     this._toggleAttribute('odd', index % 2, row);
     this._a11yUpdateRowRowindex(row, index);
     this._getItem(index, row);

package/theme/lumo/vaadin-grid-styles.js

@@ -29,6 +29,10 @@ const $_documentContainer = html`<dom-module id="lumo-grid" theme-for="vaadin-gr
         --_lumo-grid-selected-row-color: var(--lumo-primary-color-10pct);
       }
 
+      :host([disabled]) {
+        opacity: 0.7;
+      }
+
       /* No (outer) border */
 
       :host(:not([theme~="no-border"])) {
@@ -118,6 +122,10 @@ const $_documentContainer = html`<dom-module id="lumo-grid" theme-for="vaadin-gr
         margin-top: -1px;
       }
 
+      :host([all-rows-visible]) [part~="row"][last][dragover="below"] [part~="cell"]::after {
+        height: 1px;
+      }
+
       [part~="row"][dragover="above"] [part~="cell"]::after {
         top: auto;
         bottom: 100%;

package/theme/material/vaadin-grid-styles.js

@@ -13,6 +13,10 @@ const $_documentContainer = html`<dom-module id="material-grid" theme-for="vaadi
         color: var(--material-body-text-color);
       }
 
+      :host([disabled]) {
+        opacity: 0.7;
+      }
+
       [part~="cell"] {
         min-height: 48px;
         -webkit-tap-highlight-color: transparent;
@@ -161,6 +165,10 @@ const $_documentContainer = html`<dom-module id="material-grid" theme-for="vaadi
         margin-top: -1px;
       }
 
+      :host([all-rows-visible]) [part~="row"][last][dragover="below"] [part~="cell"]::after {
+        height: 1px;
+      }
+
       [part~="row"][dragover="above"] [part~="cell"]::after {
         top: auto;
         bottom: 100%;