Fixes the v-model behavior

Changes: 1. Fixes the error when `v-model` was passed as `null` and no listener was attached 2. Adds `autocomplete` property support 3. Some changes in tests 4. Added new example to `dev/MaterialModel.vue` Closes #26, closes #25
wemake-services · Nov 11, 2016 · 4096400 · 4096400
1 parent a4ca774
commit 4096400
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/dev/MaterialModel.vue b/dev/MaterialModel.vue
@@ -4,6 +4,8 @@
 
     <p>Hello, {{ username }}</p>
     <MaterialInput name="name" v-model="username">Your name</MaterialInput>
+    <MaterialInput name="email" type="email" v-model="email">Your email</MaterialInput>
+    <p>We will send you a letter, {{ email }}</p>
   </form>
 </template>
 
@@ -14,7 +16,8 @@
     name: 'material-model',
     data: function () {
       return {
-        username: 'admin'
+        username: 'admin',
+        email: ''
       }
     },
     components: {

diff --git a/src/components/MaterialInput.vue b/src/components/MaterialInput.vue
@@ -12,6 +12,7 @@
 
       :readonly="readonly"
       :disabled="disabled"
+      :autocomplete="autocomplete"
 
       :required="required"
     >
@@ -27,6 +28,7 @@
 
       :readonly="readonly"
       :disabled="disabled"
+      :autocomplete="autocomplete"
 
       :required="required"
     >
@@ -42,6 +44,7 @@
 
       :readonly="readonly"
       :disabled="disabled"
+      :autocomplete="autocomplete"
 
       :max="max"
       :min="min"
@@ -62,6 +65,7 @@
 
       :readonly="readonly"
       :disabled="disabled"
+      :autocomplete="autocomplete"
 
       :max="max"
       :min="min"
@@ -80,6 +84,7 @@
 
       :readonly="readonly"
       :disabled="disabled"
+      :autocomplete="autocomplete"
 
       :required="required"
     >
@@ -95,6 +100,7 @@
 
       :readonly="readonly"
       :disabled="disabled"
+      :autocomplete="autocomplete"
 
       :minlength="minlength"
       :maxlength="maxlength"
@@ -116,7 +122,7 @@
       computedClasses () {
         const classes = []
 
-        if (!!this.valueCopy) {
+        if (this.valueCopy) {
           classes.push('material-input--has-value')
         }
 
@@ -135,14 +141,12 @@
     mounted () {
       const input = this.$el.querySelector('input')
 
-      if (this.value) { // value might not be provided
-        // Here we are following the Vue2 convention on custom v-model:
-        // https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
-        this.valueCopy = this.value
-        input.addEventListener(
-          'input', this.handleModelInput, false
-        )
-      }
+      // Here we are following the Vue2 convention on custom v-model:
+      // https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
+      this.valueCopy = this.value
+      input.addEventListener(
+        'input', this.handleModelInput, false
+      )
 
       if (this.pattern) {
         input.addEventListener(
@@ -154,11 +158,9 @@
       // Unbinding events:
       const input = this.$el.querySelector('input')
 
-      if (this.value) {
-        input.removeEventListener(
-          'input', this.handleModelInput
-        )
-      }
+      input.removeEventListener(
+        'input', this.handleModelInput
+      )
 
       if (this.pattern) {
         input.removeEventListener(
@@ -233,6 +235,10 @@
       required: {
         type: Boolean,
         default: true
+      },
+      autocomplete: {
+        type: String,
+        default: null
       }
     }
   }

diff --git a/test/unit/specs/MaterialInput.spec.js b/test/unit/specs/MaterialInput.spec.js
@@ -13,18 +13,12 @@ describe('MaterialInput.vue', () => {
       .to.equal('text')
   })
 
-  it('renders correct input type', () => {
+  it('renders correct custom input type', () => {
     const inst = getComponent(MaterialInput, {type: 'number'})
     expect(inst.$el.querySelector('input').type)
       .to.equal('number')
   })
 
-  it('does not render input for wrong type', () => {
-    const inst = getComponent(MaterialInput, {type: 'doesnotexist'})
-    expect(inst.$el.querySelector('input'))
-      .to.equal(null)
-  })
-
   it('copies the value when provided', () => {
     const inst = getComponent(MaterialInput, {value: 'some'})
     expect(inst.value).to.equal('some')