@vaadin/vaadin-checkbox - npm Package Compare versions

Comparing version 2.2.0-alpha3 to 2.2.0-beta1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-checkbox",
-  "version": "2.2.0-alpha3",
+  "version": "2.2.0-beta1",
   "main": "vaadin-checkbox.js",
@@ -29,18 +29,18 @@ "author": "Vaadin Ltd",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-control-state-mixin": "^2.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "^1.2.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "^1.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "^1.1.0-alpha2",
-    "@vaadin/vaadin-element-mixin": "^1.1.0-alpha1"
+    "@vaadin/vaadin-control-state-mixin": "^2.1.1",
+    "@vaadin/vaadin-themable-mixin": "^1.2.1",
+    "@vaadin/vaadin-lumo-styles": "^1.1.0-beta1",
+    "@vaadin/vaadin-material-styles": "^1.1.0-beta1",
+    "@vaadin/vaadin-element-mixin": "^1.1.2"
   },
   "devDependencies": {
-    "@polymer/iron-component-page": "^3.0.0-pre.12",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.12",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.12",
-    "@webcomponents/webcomponentsjs": "^1.0.0",
-    "wct-browser-legacy": "0.0.1-pre.11",
-    "@vaadin/vaadin-demo-helpers": "^2.0.0-alpha2",
-    "@polymer/iron-form": "^3.0.0-pre.12",
-    "@vaadin/vaadin-button": "^2.1.0-alpha2"
+    "@polymer/iron-component-page": "^3.0.0-pre.18",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "wct-browser-legacy": "^1.0.1",
+    "@vaadin/vaadin-demo-helpers": "^2.0.1",
+    "@polymer/iron-form": "^3.0.0-pre.18",
+    "@vaadin/vaadin-button": "^2.1.0-beta1"
   }
 }

README.md

@@ -77,15 +77,17 @@ [![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-checkbox.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-checkbox)
 
+To use the Material theme, import the correspondent file from the `theme/material` folder.
+
 ## The file structure for Vaadin components
 
-- `src/vaadin-checkbox.html`
+- The component with the Lumo theme:
 
-  Unstyled component.
+  `theme/lumo/vaadin-checkbox.html`
 
-- `theme/lumo/vaadin-checkbox.html`
+- The component with the Material theme:
 
-  Component with Lumo theme.
+  `theme/material/vaadin-checkbox.html`
 
-- `vaadin-checkbox.html`
+- Alias for `theme/lumo/vaadin-checkbox.html`:
 
-  Alias for theme/lumo/vaadin-checkbox.html
+  `vaadin-checkbox.html`
 
@@ -118,8 +120,5 @@ ## Running demos and tests in browser
 
-## Creating a pull request
+## Contributing
 
-  - Make sure your code is compliant with our code linters: `gulp lint`
-  - Check that tests are passing: `polymer test`
-  - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
-  - Wait for response from one of Vaadin components team members
+  To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
 
@@ -126,0 +125,0 @@

src/vaadin-checkbox-group.js

@@ -0,2 +1,8 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
@@ -100,4 +106,4 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
       /**
-      * String used for the label element.
-      */
+       * String used for the label element.
+       */
       label: {
@@ -111,2 +117,5 @@ type: String,
        * Value of the checkbox group.
+       * Note: toggling the checkboxes modifies the value by creating new
+       * array each time, to override Polymer dirty-checking for arrays.
+       * You can still use Polymer array mutation methods to update the value.
        */
@@ -150,3 +159,3 @@ value: {
     return [
-      '_valueChanged(value, value.splices)'
+      '_updateValue(value, value.splices)'
     ];
@@ -165,5 +174,6 @@ }
 
-    this._observer = new FlattenedNodesObserver(this, (info) => {
+    this._observer = new FlattenedNodesObserver(this, info => {
+      const addedCheckboxes = this._filterCheckboxes(info.addedNodes);
 
-      this._filterCheckboxes(info.addedNodes).forEach(checkbox => {
+      addedCheckboxes.forEach(checkbox => {
         checkbox.addEventListener('checked-changed', checkedChangedListener);
@@ -185,5 +195,3 @@ if (this.disabled) {
 
-      const checkboxWithoutValue = this._filterCheckboxes(info.addedNodes).filter(checkbox => !checkbox
-        .getAttribute('value'));
-      if (checkboxWithoutValue.length) {
+      if (addedCheckboxes.some(checkbox => !checkbox.hasAttribute('value'))) {
         console.warn('Please add value attribute to all checkboxes in checkbox group');
@@ -227,8 +235,12 @@ }
   _addCheckboxToValue(value) {
-    this.push('value', value);
+    const update = this.value.slice(0);
+    update.push(value);
+    this.value = update;
   }
 
   _removeCheckboxFromValue(value) {
-    const index = this.value.indexOf(value);
-    this.splice('value', index, 1);
+    const update = this.value.slice(0);
+    const index = update.indexOf(value);
+    update.splice(index, 1);
+    this.value = update;
   }
@@ -246,10 +258,10 @@
     }
-
   }
 
-  _valueChanged(newV, oldV) {
-    // setting initial value to empty string, skip validation
-    if (newV.length === 0 && oldV === undefined) {
+  _updateValue(value, splices) {
+    // setting initial value to empty array, skip validation
+    if (value.length === 0 && this._oldValue === undefined) {
       return;
     }
+    this._oldValue = value;
     // set a flag to avoid updating loop
@@ -259,3 +271,3 @@ this._updatingValue = true;
     this._checkboxes.forEach(checkbox => {
-      checkbox.checked = newV.indexOf(checkbox.value) > -1;
+      checkbox.checked = value.indexOf(checkbox.value) > -1;
     });
@@ -262,0 +274,0 @@ this._updatingValue = false;

src/vaadin-checkbox.js

@@ -0,2 +1,8 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
@@ -102,3 +108,3 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
   static get version() {
-    return '2.2.0-alpha3';
+    return '2.2.0-beta1';
   }
@@ -105,0 +111,0 @@

theme/lumo/vaadin-checkbox-group-styles.js

@@ -1,3 +0,2 @@
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -94,2 +93,2 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-checkbox-group" theme-for="vaadin-checkbox-group">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/lumo/vaadin-checkbox-styles.js

 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -175,2 +174,2 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-checkbox" theme-for="vaadin-checkbox">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/material/vaadin-checkbox-group-styles.js

@@ -1,3 +0,2 @@
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -95,2 +94,2 @@ $_documentContainer.innerHTML = `<dom-module id="material-checkbox-group" theme-for="vaadin-checkbox-group">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/material/vaadin-checkbox-styles.js

 import '@vaadin/vaadin-material-styles/color.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -141,2 +140,2 @@ $_documentContainer.innerHTML = `<dom-module id="material-checkbox" theme-for="vaadin-checkbox">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

71325

decreased by-83.33%

Number of package files

20

decreased by-31.03%

Lines of code

935

decreased by-33.21%

Number of lines in readme file

129

decreased by-0.77%

Dependency changes

• Updated@vaadin/vaadin-control-state-mixin@^2.1.1

• Updated@vaadin/vaadin-element-mixin@^1.1.2

• Updated@vaadin/vaadin-lumo-styles@^1.1.0-beta1

• Updated@vaadin/vaadin-material-styles@^1.1.0-beta1

• Updated@vaadin/vaadin-themable-mixin@^1.2.1