fix(textfield): add missing type attribute

also fix required and add custom validation property

closes #210

components/textfield/README.md

@@ -12,7 +12,6 @@ var vm = new Vue({
     text: ""
   }
 })
-
 ```
 
 ### Help text
@@ -57,6 +56,9 @@ var vm = new Vue({
 ```
 
 ### Validation
+
+- Native validation: use `type`, `required`, `minlength` and `maxlength` properties
+
 ```html
 <mdc-textfield type="password" label="Password"
   required minlength=8 maxlength=10
@@ -65,6 +67,31 @@ var vm = new Vue({
   v-model="password" />
 ```
 
+- Custom Validation: use `:valid` property:
+
+```html
+<mdc-textfield
+  :valid="isValid"
+  helptext="custom check"
+  helptext-persistent helptext-validation
+  v-model="value" />
+```
+
+```javascript
+var vm = new Vue({
+  data: {
+    text: ""
+  }
+  computed: {
+    isValid () {
+      return myCustomCheck(this.text)
+    }
+  }
+})
+```
+
+> Once set, native validition is ignored.
+
 ### props
 
 | props | Type | default | Description |
@@ -81,6 +108,7 @@ var vm = new Vue({
 |`required`| Boolean | |  validation: whether this field is required|
 |`minlength`| [Number, String] | |  validation: minimal length|
 |`maxlength`| [Number, String] | |  validation: max length|
+|`valid`| [Number, String] | |  validation: custom validation property |
 |`size`| [Number, String] | 20 |  textfield size (chars) |
 |`fullwidth`| Boolean | | whether the textfield is full width |
 |`multiline`| Boolean | | whether the textfield is multiline  |

components/textfield/mdc-textfield.vue

@@ -12,10 +12,11 @@
 
       <custom-element ref="input"
         :tag="inputTag"
+        :type="inputType"
         :rows="inputRows" 
         :cols="inputCols"
         :value="value" @input="updateValue($event.target.value)"
-        :class="inputClasses" :required="required"
+        :class="inputClasses"
         :minlength="minlength" :maxlength="maxlength"
         :placeholder="inputPlaceHolder"
         :aria-label="inputPlaceHolder"
@@ -86,6 +87,7 @@ export default {
     outline: Boolean,
     disabled: Boolean,
     required: Boolean,
+    valid: {type: Boolean, default: undefined}, 
     minlength: { type: [Number, String], default: undefined },
     maxlength: { type: [Number, String], default: undefined },
     size: { type: [Number, String], default: 20 },
@@ -130,6 +132,14 @@ export default {
   watch:  {
     disabled () {
       this.foundation && this.foundation.setDisabled(this.disabled)
+    },
+    required () {
+      this.foundation && this.foundation.setRequired(this.disabled)
+    },
+    valid () {
+      if (typeof this.valid !== "undefined") {
+        this.foundation && this.foundation.setValid(this.valid)
+      }
     }
   },
   methods: {
@@ -141,6 +151,9 @@ export default {
     inputTag () {
       return this.multiline ? 'textarea' : 'input'
     },
+    inputType () {
+      return !this.multiline ? this.type : undefined
+    },
     inputRows () {
       return this.multiline ? this.rows : undefined
     },
@@ -336,7 +349,10 @@ export default {
 
     this.foundation.init()
     this.foundation.setDisabled(this.disabled)
-
+    this.foundation.setRequired(this.required)
+    if (typeof this.valid !== "undefined") {
+      this.foundation.setValid(this.valid)
+    }
 
     if (this.textbox) {
       this.ripple = new RippleBase(this)

components/unit-test/polyfills.js

@@ -75,3 +75,10 @@
 }).call(this);
 
 
+(function() {
+  // global HTMLInputElement
+  HTMLInputElement.prototype.validity = {
+    badInput: false,
+    valid: true,
+  }
+}).call(this);