fixed bug where if v-model was not used, value would not reflect prop…

…erly. added type prop to text-input
vuetifyjs · Dec 26, 2016 · 744fe9d · 744fe9d
1 parent 3ed9c88
commit 744fe9d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/src/components/forms/TextInput.vue b/src/components/forms/TextInput.vue
@@ -8,13 +8,13 @@
       v-html="label"
     )
     input(
-      type="text"
-      v-bind:name="name"
       v-bind:id="id"
+      v-bind:name="name"
       v-bind:placeholder="placeholder"
-      v-bind:value="value"
+      v-bind:type="type"
+      v-bind:value="inputValue"
       v-on:blur="focused = false"
-      v-on:input="$emit('input', $event.target.value)"
+      v-on:input="updateValue"
       v-on:focus="focused = true"
       ref="input"
     )
@@ -26,15 +26,16 @@
     
     data () {
       return {
-        focused: false
+        focused: false,
+        inputValue: ''
       }
     },
 
     computed: {
       classes () {
         return {
           'input-group--focused': this.focused,
-          'input-group--dirty': this.value || this.placeholder || (this.$refs.input && this.$refs.input.value)
+          'input-group--dirty': this.inputValue || this.placeholder || (this.$refs.input && this.$refs.input.value)
         }
       }
     },
@@ -48,9 +49,24 @@
 
       placeholder: String,
 
+      type: {
+        default: 'text'
+      },
+
       value: {
         required: false
       }
+    },
+
+    mounted () {
+      this.inputValue = this.value
+    },
+
+    methods: {
+      updateValue (e) {
+        this.inputValue = e.target.value
+        this.$emit('input', this.inputValue)
+      }
     }
   }
 </script>
diff --git a/src/stylus/components/_forms.styl b/src/stylus/components/_forms.styl
@@ -10,14 +10,13 @@
     transition: $primary-transition
 
   input
-    &[type=text]
-      border-bottom: 1px solid #ddd
-      height: 3rem
-      width: 100%
-      position: relative
-
-      &:focus
-        outline: none
+    border-bottom: 1px solid #ddd
+    height: 3rem
+    width: 100%
+    position: relative
+
+    &:focus
+      outline: none
 
     &[type=radio]
       display: none
@@ -177,8 +176,13 @@
             background: transparent
 
   select
-    @extend .input-group input[type=text]
+    border-bottom: 1px solid #ddd
+    height: 3rem
     width: 100%
+    position: relative
+
+    &:focus
+      outline: none
 
     &[multiple]
       border: 1px solid #ddd