@vaadin/vaadin-grid - npm Package Compare versions

Comparing version 5.2.7 to 5.2.8

package.json

@@ -18,3 +18,3 @@ {
   "name": "@vaadin/vaadin-grid",
-  "version": "5.2.7",
+  "version": "5.2.8",
   "main": "vaadin-grid.js",
@@ -34,6 +34,6 @@ "author": "Vaadin Ltd",
     "@polymer/polymer": "^3.0.0",
-    "@polymer/iron-resizable-behavior": "^3.0.0-pre.18",
-    "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.18",
-    "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.18",
-    "@polymer/iron-a11y-announcer": "^3.0.0-pre.18",
+    "@polymer/iron-resizable-behavior": "^3.0.0",
+    "@polymer/iron-scroll-target-behavior": "^3.0.0",
+    "@polymer/iron-a11y-keys-behavior": "^3.0.0",
+    "@polymer/iron-a11y-announcer": "^3.0.0",
     "@vaadin/vaadin-themable-mixin": "^1.2.1",
@@ -56,14 +56,14 @@ "@vaadin/vaadin-checkbox": "^2.2.1",
     "wct-browser-legacy": "^1.0.1",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
-    "@polymer/paper-input": "^3.0.0-pre.18",
-    "@polymer/paper-checkbox": "^3.0.0-pre.18",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
-    "@polymer/iron-flex-layout": "^3.0.0-pre.18",
-    "@polymer/iron-image": "^3.0.0-pre.18",
-    "@polymer/paper-slider": "^3.0.0-pre.18",
-    "@polymer/iron-media-query": "^3.0.0-pre.18",
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-ajax": "^3.0.0-pre.18",
-    "@polymer/app-localize-behavior": "^3.0.0-pre.18",
-    "@polymer/iron-list": "^3.0.0-pre.18",
+    "@polymer/iron-test-helpers": "^3.0.0",
+    "@polymer/paper-input": "^3.0.0",
+    "@polymer/paper-checkbox": "^3.0.0",
+    "@polymer/iron-demo-helpers": "^3.0.0",
+    "@polymer/iron-flex-layout": "^3.0.0",
+    "@polymer/iron-image": "^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": "^2.0.2",
@@ -70,0 +70,0 @@ "@vaadin/vaadin-button": "^2.1.0"

src/vaadin-grid-dynamic-columns-mixin.js

@@ -115,4 +115,6 @@ /**
       'vaadin-grid-filter',
+      'vaadin-grid-filter-column',
       'vaadin-grid-tree-toggle',
       'vaadin-grid-selection-column',
+      'vaadin-grid-sort-column',
       'vaadin-grid-sorter'
@@ -119,0 +121,0 @@ ].forEach(elementName => {

src/vaadin-grid-styles.js

@@ -1,333 +0,329 @@
-const $_documentContainer = document.createElement('template');
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+import '@polymer/polymer/lib/elements/dom-module.js';
 
-$_documentContainer.innerHTML = `<dom-module id="vaadin-grid-styles">
-  <template>
-    <style>
-      @keyframes vaadin-grid-appear {
-        to {
-          opacity: 1;
-        }
-      }
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+const VaadinGridStyles = document.createElement('dom-module');
 
-      :host {
-        display: block;
-        animation: 1ms vaadin-grid-appear;
-        height: 400px;
-        flex: 1 1 auto;
-        align-self: stretch;
-        position: relative;
+// NOTE(web-padawan): https://github.com/vaadin/vaadin-grid/issues/1514
+VaadinGridStyles.appendChild(
+  html`
+  <style>
+    @keyframes vaadin-grid-appear {
+      to {
+        opacity: 1;
       }
+    }
 
-      :host([hidden]) {
-        display: none !important;
-      }
+    :host {
+      display: block;
+      animation: 1ms vaadin-grid-appear;
+      height: 400px;
+      flex: 1 1 auto;
+      align-self: stretch;
+      position: relative;
+    }
 
-      #scroller {
-        display: block;
-        transform: translateY(0);
-        width: auto;
-        height: auto;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
+    :host([hidden]) {
+      display: none !important;
+    }
 
-      :host([height-by-rows]) {
-        height: auto;
-        align-self: flex-start;
-        flex-grow: 0;
-        width: 100%;
-      }
+    #scroller {
+      display: block;
+      transform: translateY(0);
+      width: auto;
+      height: auto;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
 
-      :host([height-by-rows]) #scroller {
-        width: 100%;
-        height: 100%;
-        position: relative;
-      }
+    :host([height-by-rows]) {
+      height: auto;
+      align-self: flex-start;
+      flex-grow: 0;
+      width: 100%;
+    }
 
-      #table {
-        display: block;
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        z-index: -2;
-        position: relative;
-        outline: none;
-      }
+    :host([height-by-rows]) #scroller {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
 
-      /* Avoid jumpy headers on Edge & IE */
-      [wheel-scrolling][edge] #table,
-      [wheel-scrolling][ie] #table {
-        z-index: auto;
-      }
+    #table {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      z-index: -2;
+      position: relative;
+      outline: none;
+    }
 
-      #header {
-        display: block;
-        position: absolute;
-        top: 0;
-        width: 100%;
-      }
+    /* Avoid jumpy headers on Edge & IE */
+    [wheel-scrolling][edge] #table,
+    [wheel-scrolling][ie] #table {
+      z-index: auto;
+    }
 
-      th {
-        text-align: inherit;
-      }
+    #header {
+      display: block;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
 
-      /* Safari doesn't work with \`inherit\` */
-      [safari] th {
-        text-align: initial;
-      }
+    th {
+      text-align: inherit;
+    }
 
-      #footer {
-        display: block;
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-      }
+    /* Safari doesn't work with "inherit" */
+    [safari] th {
+      text-align: initial;
+    }
 
-      #items {
-        display: block;
-        width: 100%;
-        position: relative;
-        z-index: -1;
-      }
+    #footer {
+      display: block;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+    }
 
-      #items,
-      #outersizer,
-      #fixedsizer {
-        border-top: 0 solid transparent;
-        border-bottom: 0 solid transparent;
-      }
+    #items {
+      display: block;
+      width: 100%;
+      position: relative;
+      z-index: -1;
+    }
 
-      [part~="row"] {
-        display: flex;
-        width: 100%;
-        box-sizing: border-box;
-        margin: 0;
-      }
+    #items,
+    #outersizer,
+    #fixedsizer {
+      border-top: 0 solid transparent;
+      border-bottom: 0 solid transparent;
+    }
 
-      [part~="row"][loading] [part~="body-cell"] ::slotted(vaadin-grid-cell-content) {
-        opacity: 0;
-      }
+    [part~="row"] {
+      display: flex;
+      width: 100%;
+      box-sizing: border-box;
+      margin: 0;
+    }
 
-      #items [part~="row"] {
-        position: absolute;
-      }
+    [part~="row"][loading] [part~="body-cell"] ::slotted(vaadin-grid-cell-content) {
+      opacity: 0;
+    }
 
-      #items [part~="row"]:empty {
-        height: 1em;
-      }
+    #items [part~="row"] {
+      position: absolute;
+    }
 
-      [part~="cell"]:not([part~="details-cell"]) {
-        flex-shrink: 0;
-        flex-grow: 1;
-        box-sizing: border-box;
-        display: flex;
-        width: 100%;
-        position: relative;
-        align-items: center;
-        padding: 0;
-        white-space: nowrap;
-      }
+    #items [part~="row"]:empty {
+      height: 1em;
+    }
 
-      [part~="details-cell"] {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        box-sizing: border-box;
-        padding: 0;
-      }
+    [part~="cell"]:not([part~="details-cell"]) {
+      flex-shrink: 0;
+      flex-grow: 1;
+      box-sizing: border-box;
+      display: flex;
+      width: 100%;
+      position: relative;
+      align-items: center;
+      padding: 0;
+      white-space: nowrap;
+    }
 
-      [part~="cell"] ::slotted(vaadin-grid-cell-content) {
-        display: block;
-        width: 100%;
-        box-sizing: border-box;
-        overflow: hidden;
-      }
+    [part~="details-cell"] {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0;
+    }
 
-      [hidden] {
-        display: none !important;
-      }
+    [part~="cell"] ::slotted(vaadin-grid-cell-content) {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
 
-      [frozen] {
-        z-index: 2;
-        will-change: transform;
-      }
+    [hidden] {
+      display: none !important;
+    }
 
-      #outerscroller {
-        /* Needed (at least) for Android Chrome */
-        z-index: 0;
-      }
+    [frozen] {
+      z-index: 2;
+      will-change: transform;
+    }
 
-      #scroller:not([safari]) #outerscroller {
-        /* Needed for Android Chrome (#1020). Can't be applied to Safari
-        since it would re-introduce the sub-pixel overflow bug (#853) */
-        will-change: transform;
-      }
+    #outerscroller {
+      /* Needed (at least) for Android Chrome */
+      z-index: 0;
+    }
 
-      [no-scrollbars]:not([safari]):not([firefox]) #outerscroller,
-      [no-scrollbars][safari] #table,
-      [no-scrollbars][firefox] #table {
-        overflow: hidden;
-      }
+    #scroller:not([safari]) #outerscroller {
+      /* Needed for Android Chrome (#1020). Can't be applied to Safari
+      since it would re-introduce the sub-pixel overflow bug (#853) */
+      will-change: transform;
+    }
 
-      [no-scrollbars]:not([safari]):not([firefox]) #outerscroller {
-        pointer-events: none;
-      }
+    [no-scrollbars]:not([safari]):not([firefox]) #outerscroller,
+    [no-scrollbars][safari] #table,
+    [no-scrollbars][firefox] #table {
+      overflow: hidden;
+    }
 
-      [scrolling][safari] #outerscroller,
-      [scrolling][firefox] #outerscroller {
-        pointer-events: auto;
-      }
+    [no-scrollbars]:not([safari]):not([firefox]) #outerscroller {
+      pointer-events: none;
+    }
 
-      [ios] #outerscroller {
-        pointer-events: auto;
-        z-index: -3;
-      }
+    [scrolling][safari] #outerscroller,
+    [scrolling][firefox] #outerscroller {
+      pointer-events: auto;
+    }
 
-      [ios][scrolling] #outerscroller {
-        z-index: 0;
-      }
+    [ios] #outerscroller {
+      pointer-events: auto;
+      z-index: -3;
+    }
 
-      /* Reordering styles */
-      :host([reordering]) [part~="cell"] ::slotted(vaadin-grid-cell-content),
-      :host([reordering]) [part~="resize-handle"],
-      #scroller[no-content-pointer-events] [part~="cell"] ::slotted(vaadin-grid-cell-content) {
-        pointer-events: none;
-      }
+    [ios][scrolling] #outerscroller {
+      z-index: 0;
+    }
 
-      [part~="reorder-ghost"] {
-        visibility: hidden;
-        position: fixed;
-        pointer-events: none;
-        opacity: 0.5;
+    /* Reordering styles */
+    :host([reordering]) [part~="cell"] ::slotted(vaadin-grid-cell-content),
+    :host([reordering]) [part~="resize-handle"],
+    #scroller[no-content-pointer-events] [part~="cell"] ::slotted(vaadin-grid-cell-content) {
+      pointer-events: none;
+    }
 
-        /* Prevent overflowing the grid in Firefox */
-        top: 0;
-        left: 0;
-      }
+    [part~="reorder-ghost"] {
+      visibility: hidden;
+      position: fixed;
+      pointer-events: none;
+      opacity: 0.5;
 
-      :host([reordering]) {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        user-select: none;
-      }
+      /* Prevent overflowing the grid in Firefox */
+      top: 0;
+      left: 0;
+    }
 
-      #scroller[ie][column-reordering-allowed] [part~="header-cell"] {
-        -ms-user-select: none;
-      }
+    :host([reordering]) {
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
 
-      :host([reordering]) #outerscroller {
-        -webkit-overflow-scrolling: auto !important;
-      }
+    #scroller[ie][column-reordering-allowed] [part~="header-cell"] {
+      -ms-user-select: none;
+    }
 
-      /* Resizing styles */
-      [part~="resize-handle"] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        height: 100%;
-        cursor: col-resize;
-        z-index: 1;
-      }
+    :host([reordering]) #outerscroller {
+      -webkit-overflow-scrolling: auto !important;
+    }
 
-      [part~="resize-handle"]::before {
-        position: absolute;
-        content: "";
-        height: 100%;
-        width: 35px;
-        transform: translateX(-50%);
-      }
+    /* Resizing styles */
+    [part~="resize-handle"] {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      cursor: col-resize;
+      z-index: 1;
+    }
 
-      [last-column] [part~="resize-handle"]::before,
-      [last-frozen] [part~="resize-handle"]::before {
-        width: 18px;
-        transform: translateX(-100%);
-      }
+    [part~="resize-handle"]::before {
+      position: absolute;
+      content: "";
+      height: 100%;
+      width: 35px;
+      transform: translateX(-50%);
+    }
 
-      #scroller[column-resizing] {
-        -ms-user-select: none;
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        user-select: none;
-      }
+    [last-column] [part~="resize-handle"]::before,
+    [last-frozen] [part~="resize-handle"]::before {
+      width: 18px;
+      transform: translateX(-100%);
+    }
 
-      /* Sizer styles */
-      .sizer {
-        display: flex;
-        position: relative;
-        width: 100%;
-        visibility: hidden;
-      }
+    #scroller[column-resizing] {
+      -ms-user-select: none;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
 
-      .sizer [part~="details-cell"] {
-        display: none !important;
-      }
+    /* Sizer styles */
+    .sizer {
+      display: flex;
+      position: relative;
+      width: 100%;
+      visibility: hidden;
+    }
 
-      .sizer [part~="cell"][hidden] {
-        display: none !important;
-      }
+    .sizer [part~="details-cell"] {
+      display: none !important;
+    }
 
-      .sizer [part~="cell"] {
-        display: block;
-        flex-shrink: 0;
-        line-height: 0;
-        margin-top: -1em;
-        height: 0 !important;
-        min-height: 0 !important;
-        max-height: 0 !important;
-        padding: 0 !important;
-      }
+    .sizer [part~="cell"][hidden] {
+      display: none !important;
+    }
 
-      .sizer [part~="cell"]::before {
-        content: "-";
-      }
+    .sizer [part~="cell"] {
+      display: block;
+      flex-shrink: 0;
+      line-height: 0;
+      margin-top: -1em;
+      height: 0 !important;
+      min-height: 0 !important;
+      max-height: 0 !important;
+      padding: 0 !important;
+    }
 
-      .sizer [part~="cell"] ::slotted(vaadin-grid-cell-content) {
-        display: none !important;
-      }
+    .sizer [part~="cell"]::before {
+      content: "-";
+    }
 
-      /* Fixed mode (Tablet Edge) */
-      #fixedsizer {
-        position: absolute;
-      }
+    .sizer [part~="cell"] ::slotted(vaadin-grid-cell-content) {
+      display: none !important;
+    }
 
-      :not([edge][no-scrollbars]) #fixedsizer {
-        display: none;
-      }
+    /* Fixed mode (Tablet Edge) */
+    #fixedsizer {
+      position: absolute;
+    }
 
-      [edge][no-scrollbars] {
-        /* Any value other than ‘none’ for the transform results in the creation of both a stacking context and
-        a containing block. The object acts as a containing block for fixed positioned descendants. */
-        transform: translateZ(0);
-        overflow: hidden;
-      }
+    :not([edge][no-scrollbars]) #fixedsizer {
+      display: none;
+    }
 
-      [edge][no-scrollbars] #header,
-      [edge][no-scrollbars] #footer {
-        position: fixed;
-      }
+    [edge][no-scrollbars] {
+      /* Any value other than ‘none’ for the transform results in the creation of both a stacking context and
+      a containing block. The object acts as a containing block for fixed positioned descendants. */
+      transform: translateZ(0);
+      overflow: hidden;
+    }
 
-      [edge][no-scrollbars] #items {
-        position: fixed;
-        width: 100%;
-        will-change: transform;
-      }
-    </style>
-  </template>
-</dom-module>`;
+    [edge][no-scrollbars] #header,
+    [edge][no-scrollbars] #footer {
+      position: fixed;
+    }
 
-document.head.appendChild($_documentContainer.content);
+    [edge][no-scrollbars] #items {
+      position: fixed;
+      width: 100%;
+      will-change: transform;
+    }
+  </style>
+`);
 
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+VaadinGridStyles.register('vaadin-grid-styles');

src/vaadin-grid.js

@@ -313,3 +313,3 @@ /**
   static get version() {
-    return '5.2.7';
+    return '5.2.8';
   }
@@ -397,3 +397,3 @@
     if (this._columnTree) {
-      this._columnTree[this._columnTree.length - 1].forEach(c => c.notifyPath('_cells.*', c._cells));
+      this._columnTree[this._columnTree.length - 1].forEach(c => c.notifyPath && c.notifyPath('_cells.*', c._cells));
     }
@@ -400,0 +400,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

254540

decreased by-0.24%

Lines of code

6715

decreased by-0.03%

Dependency changes

• Updated@polymer/iron-a11y-announcer@^3.0.0

• Updated@polymer/iron-a11y-keys-behavior@^3.0.0

• Updated@polymer/iron-resizable-behavior@^3.0.0

• Updated@polymer/iron-scroll-target-behavior@^3.0.0