Merge pull request #29 from PolymerElements/2.0-preview

port to 2.0
PolymerElements · May 12, 2017 · 496c774 · 496c774
2 parents f5d85f8 + df8a099
commit 496c774
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 136 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-bower_components
+bower_components*
+bower-*.json
diff --git a/.travis.yml b/.travis.yml
@@ -1,24 +1,28 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g bower polymer-cli@next
+  - polymer install --variants
+  - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old
+  - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome
 env:
   global:
     - secure: >-
         kwLs1FMf/hBnbxItbOJzbIdGtPDK2R2dngleJPgXLW9ExzpGHPgOmWsvxWL2BzlxlzZgzwpmUhnnJdxHlo8AZtQl1uq6NWl/e3oj9oeenFugF60eIcd01ak4QmhBsk3/20O426QQsz2WckGZRGcudBz5Zj2it3t5cbH3pAi90jo=
     - secure: >-
         hGl3bsjz9dbKTA/bAgfdrFMlT6VawxFljIPqX6zJD556jhpYxtkno278eIW8uLlIGC5nXRTWXQzWrRhN8i9osnqw1RFhW8C9lH+TLHEkYMvDnEOp9sZ8Amv6j8FdNibcDP8IPTo2PmIRwBK1nFp0VqhcQu/Eq7WUFolSns9E27k=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
-      - google-chrome-stable
+      - google-chrome-beta
+  sauce_connect: true
 script:
-  - xvfb-run wct
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+  - xvfb-run polymer test
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
 dist: trusty
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ thing! https://github.com/PolymerLabs/tedium/issues
 _[Demo and API docs](https://elements.polymer-project.org/elements/iron-validatable-behavior)_
 
 
-##Polymer.IronValidatableBehavior
+## Polymer.IronValidatableBehavior
 
 `Use Polymer.IronValidatableBehavior` to implement an element that validates user input.
 Use the related `Polymer.IronValidatorBehavior` to add custom validation logic to an iron-input.
@@ -34,6 +34,10 @@ the protected `_getValidity()` method of this behaviour, rather than `validate()
 See [this](https://github.com/PolymerElements/iron-form/blob/master/demo/simple-element.html)
 for an example.
 
+### Changes in 2.0
+- `validate()` no longer requires a `value` paramer to be passed, and will use the element's `value` property if it exists
+- `validatorType` and `validatorName` were unused and have been removed
+
 ### Accessibility
 
 Changing the `invalid` property, either manually or by calling `validate()` will update the

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-validatable-behavior",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "Provides a behavior for an element that validates user input",
   "authors": "The Polymer Authors",
   "keywords": [
@@ -19,15 +19,33 @@
   "homepage": "https://github.com/PolymerElements/iron-validatable-behavior",
   "ignore": [],
   "dependencies": {
-    "iron-meta": "PolymerElements/iron-meta#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0"
+    "iron-meta": "PolymerElements/iron-meta#2.0-preview",
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
   },
   "devDependencies": {
-    "paper-styles": "PolymerElements/paper-styles#^1.0.4",
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#2.0-preview",
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview",
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "iron-meta": "PolymerElements/iron-meta#^1.0.0",
+        "polymer": "Polymer/polymer#^1.1.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+        "paper-styles": "PolymerElements/paper-styles#^1.0.4",
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "web-component-tester": "^4.0.0"
+      }
+    }
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -19,53 +19,38 @@
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="cats-only.html">
   <link rel="import" href="validatable-input.html">
-
-  <style is="custom-style">
-
-    .valid {
-      color: var(--google-green-500);
-    }
-
-    .invalid {
-      color: var(--google-red-500);
-    }
-
-  </style>
-
+  <custom-style>
+    <style is="custom-style" include="demo-pages-shared-styles"></style>
+  </custom-style>
 </head>
 <body>
-  <div class="vertical-section vertical-section-container centered">
-  <h1>&lt;iron-validatable-behavior&gt;</h1>
-
-  <template is="dom-bind">
-
-    <cats-only></cats-only>
-
-    <section>
-
-      <p>
-        only type <code>cats</code>:
-
-        <input is="validatable-input" invalid="{{invalid}}" validator="cats-only">
-
-        <span class="valid" hidden$="[[invalid]]">valid</span>
-        <span class="invalid" hidden$="[[!invalid]]">invalid</span>
-      </p>
-
-    </section>
-
-  </template>
-
+  <div class="vertical-section-container centered">
+    <h3>The <code>cats-only</code> validator only accepts the string "cats" and
+      its suffixes ("c", "ca", "cat").</h3>
+    <demo-snippet class="centered-demo">
+      <template>
+        <custom-style>
+          <style is="custom-style" include="demo-pages-shared-styles">
+            validatable-input {
+              border: 1px solid var(--google-green-500);
+              color: var(--google-green-500);
+            }
+            validatable-input[invalid] {
+              border: 1px solid var(--google-red-500);
+              color: var(--google-red-500);
+            }
+          </style>
+        </custom-style>
+
+        <cats-only></cats-only>
+        <validatable-input validator="cats-only"></validatable-input>
+      </template>
+    </demo-snippet>
   </div>
-
-  <script>
-
-    document.querySelector('template[is="dom-bind"]').invalid = false;
-
-  </script>
-
 </body>
 </html>
diff --git a/demo/validatable-input.html b/demo/validatable-input.html
@@ -11,36 +11,43 @@
 <link rel="import" href="../../polymer/polymer.html">
 <link rel="import" href="../iron-validatable-behavior.html">
 
-<script>
-
-  Polymer({
-
-    is: 'validatable-input',
-
-    extends: 'input',
-
-    properties: {
-
-      invalid: {
-        notify: true,
-        type: Boolean,
-        value: false
+<dom-module id="validatable-input">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
       }
-
-    },
-
-    behaviors: [
-      Polymer.IronValidatableBehavior
-    ],
-
-    listeners: {
-      'input': '_onInput'
-    },
-
-    _onInput: function(event) {
-      this.invalid = !this.validate(event.target.value);
-    }
-
-  });
-
-</script>
+      input {
+        padding: 0.4em;
+        font-size: 16px;
+        margin: 5px;
+        color: inherit;
+      }
+    </style>
+    <input id="input">
+  </template>
+  <script>
+    Polymer({
+      is: 'validatable-input',
+      properties: {
+        invalid: {
+          reflectToAttribute: true,
+          type: Boolean,
+          value: false
+        }
+      },
+
+      behaviors: [
+        Polymer.IronValidatableBehavior
+      ],
+
+      listeners: {
+        'input': '_onInput'
+      },
+
+      _onInput: function() {
+        this.invalid = !this.validate(this.$.input.value);
+      }
+    });
+  </script>
+</dom-module>
diff --git a/iron-validatable-behavior.html b/iron-validatable-behavior.html
@@ -44,7 +44,6 @@
   Polymer.IronValidatableBehavior = {
 
     properties: {
-
       /**
        * Name of the validator to use.
        */
@@ -59,37 +58,11 @@
         notify: true,
         reflectToAttribute: true,
         type: Boolean,
-        value: false
-      },
-
-      /**
-       * This property is deprecated and should not be used. Use the global
-       * validator meta singleton, `Polymer.IronValidatableBehaviorMeta` instead.
-       */
-      _validatorMeta: {
-        type: Object
+        value: false,
+        observer: '_invalidChanged'
       },
-
-      /**
-       * Namespace for this validator. This property is deprecated and should
-       * not be used. For all intents and purposes, please consider it a
-       * read-only, config-time property.
-       */
-      validatorType: {
-        type: String,
-        value: 'validator'
-      },
-
-      _validator: {
-        type: Object,
-        computed: '__computeValidator(validator)'
-      }
     },
 
-    observers: [
-      '_invalidChanged(invalid)'
-    ],
-
     registered: function() {
       Polymer.IronValidatableBehaviorMeta = new Polymer.IronMeta({type: 'validator'});
     },
@@ -102,6 +75,13 @@
       }
     },
 
+    /* Recompute this every time it's needed, because we don't know if the
+     * underlying IronValidatableBehaviorMeta has changed. */
+    get _validator() {
+      return Polymer.IronValidatableBehaviorMeta &&
+          Polymer.IronValidatableBehaviorMeta.byKey(this.validator);
+    },
+
     /**
      * @return {boolean} True if the validator `validator` exists.
      */
@@ -114,12 +94,19 @@
      * your element to have custom validation logic, do not override this method;
      * override `_getValidity(value)` instead.
 
-     * @param {Object} value The value to be validated. By default, it is passed
-     * to the validator's `validate()` function, if a validator is set.
+     * @param {Object} value Deprecated: The value to be validated. By default,
+     * it is passed to the validator's `validate()` function, if a validator is set.
+     * If this argument is not specified, then the element's `value` property
+     * is used, if it exists.
      * @return {boolean} True if `value` is valid.
      */
     validate: function(value) {
-      this.invalid = !this._getValidity(value);
+      // If this is an element that also has a value property, and there was
+      // no explicit value argument passed, use the element's property instead.
+      if (value === undefined && this.value !== undefined)
+        this.invalid = !this._getValidity(this.value);
+      else
+        this.invalid = !this._getValidity(value);
       return !this.invalid;
     },
 
@@ -138,11 +125,6 @@
         return this._validator.validate(value);
       }
       return true;
-    },
-
-    __computeValidator: function() {
-      return Polymer.IronValidatableBehaviorMeta &&
-          Polymer.IronValidatableBehaviorMeta.byKey(this.validator);
     }
   };
 

diff --git a/test/index.html b/test/index.html
@@ -6,7 +6,9 @@
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
---><html><head>
+-->
+<html>
+<head>
 
     <title>iron-validatable-behavior tests</title>
 
@@ -22,11 +24,10 @@
     <script>
       /* no tests */
       WCT.loadSuites([
-        'iron-validatable-behavior.html',
+        'iron-validatable-behavior.html?wc-shadydom=true&wc-ce=true',
         'iron-validatable-behavior.html?dom=shadow'
       ]);
     </script>
 
-
-
-</body></html>
+</body>
+</html>
diff --git a/test/test-validatable.html b/test/test-validatable.html
@@ -11,7 +11,7 @@
 
 <dom-module id="test-validatable">
   <template>
-    <content></content>
+    <slot></slot>
   </template>
 </dom-module>