feat(textfield): pass event-listeners and attributes to input element

closes #242
stasson · Feb 11, 2018 · 8cc88e2 · 8cc88e2
1 parent 5f0527d
commit 8cc88e2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 33 deletions.
diff --git a/components/textfield/README.md b/components/textfield/README.md
@@ -98,9 +98,7 @@ var vm = new Vue({
 |-------|------|---------|-------------|
 |`v-model`| String || binds textfield value |
 |`disabled`| [Number, String] | | binds to disabled state  |
-|`type`|String|| input type attribute  |
-|`name`|String|| input name attribute  |
-|`readonly`|String|| input is readonly  |
+|`type`|String| text | input type attribute  |
 |`label`| String | | hint text |
 |`dense`| Boolean | | compresses the textfield to make it slightly smaller |
 |`outline`| Boolean | | whether the textfield is outlined  |
@@ -120,11 +118,9 @@ var vm = new Vue({
 |`trailing-icon`|[String, Array, Object ] | | trailing icon _*_|
 |`leading-icon`| [String, Array, Object ] | | leading icon _*_ |
 
-(*) icon prop usage: 
-- use `String` for material icons
-- use `Array` to specify icon classList
-- use `{className: String, textContent: String}` for custom class and/or content
-- use `trailing-icon` or `leading-icon` slots for  custom icon markup (svg, ...).
+> other attributes (`name`, `readonly`, ... ) are being passed down to the rendered input element.
+
+> (*) icon prop usage: use `String` for material icons, `Array` to specify icon classList,  `{className: String, textContent: String}` for custom class and/or content, or use `trailing-icon` or `leading-icon` slots for  custom icon markup (svg, ...).
 
 ### events
 
@@ -133,6 +129,15 @@ var vm = new Vue({
 |`@focus`| - |emitted on focus gained |
 |`@blur`| - |emitted on focus lost |
 |`@icon-action`| - |emitted on icon action |
+|`@[listener]`| - |emitted on icon action |
+
+> Other bound listeners are being passsed down to the rendered input element
+
+```html
+<mdc-textfield v-model="text" label="Hint text" 
+  @keypress.enter="handleEnterKey"/>
+```
+
 
 ### methods
 

diff --git a/components/textfield/mdc-textfield.vue b/components/textfield/mdc-textfield.vue
@@ -11,28 +11,30 @@
       </i>
 
       <textarea ref="input" v-if="multiline"
+        v-on="$listeners"
+        v-bind="$attrs"
         :class="inputClasses"
         :value="value" 
         @input="updateValue($event.target.value)"
-        :name="name"
         :minlength="minlength" :maxlength="maxlength"
         :placeholder="inputPlaceHolder"
-        :readonly="readonly"
         :aria-label="inputPlaceHolder"
         :aria-controls="inputAriaControls"
-        :rows="rows" :cols="cols" ></textarea>
+        :rows="rows" :cols="cols" 
+        ></textarea>
 
       <input ref="input" v-else
+        v-on="$listeners" 
+        v-bind="$attrs"
         :class="inputClasses"
         :value="value" 
         @input="updateValue($event.target.value)"
         :type="type"
-        :name="name"
         :minlength="minlength" :maxlength="maxlength"
-        :readonly="readonly"
         :placeholder="inputPlaceHolder"
         :aria-label="inputPlaceHolder"
-        :aria-controls="inputAriaControls" />
+        :aria-controls="inputAriaControls" 
+        />
 
       <label ref="label" :class="labelClassesUpgraded" :for="_uid"  v-if="hasLabel">
         {{ label }}
@@ -79,6 +81,11 @@ import {RippleBase} from '../ripple'
 export default {
   name: 'mdc-textfield',
   mixins: [CustomElementMixin, DispatchFocusMixin],
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'model'
+  },
   props: {
     value: String,
     type: {
@@ -89,7 +96,6 @@ export default {
           .indexOf(value) !== -1
       }
     },
-    name: String,
     dense: Boolean,
     label: String,
     helptext: String,
@@ -99,7 +105,6 @@ export default {
     outline: Boolean,
     disabled: Boolean,
     required: Boolean,
-    readonly: Boolean,
     valid: {type: Boolean, default: undefined}, 
     minlength: { type: [Number, String], default: undefined },
     maxlength: { type: [Number, String], default: undefined },
@@ -168,7 +173,7 @@ export default {
   },
   methods: {
     updateValue (value) {
-      this.$emit('input', value)
+      this.$emit('model', value)
     },
     focus () {
       this.$refs.input && this.$refs.input.focus() 
@@ -234,12 +239,6 @@ export default {
         deregisterEventHandler: (evtType, handler) => {
           this.$refs.bottom.removeEventListener(evtType, handler)
         },
-        // notifyAnimationEnd: () => {
-        //   emitCustomEvent(
-        //     this.$refs.bottom,
-        //     MDCLineRippleFoundation.strings.ANIMATION_END_EVENT,
-        //     {});
-        // },
       })
       this.bottomLineFoundation.init()
     }
@@ -336,16 +335,6 @@ export default {
       deregisterTextFieldInteractionHandler: (evtType, handler) => {
         this.$refs.root.removeEventListener(evtType, handler)
       },
-      // registerBottomLineEventHandler: (evtType, handler) => {
-      //   if (this.$refs.bottom) {
-      //     this.$refs.bottom.addEventListener(evtType, handler);
-      //   }
-      // },
-      // deregisterBottomLineEventHandler: (evtType, handler) => {
-      //   if (this.$refs.bottom) {
-      //     this.$refs.bottom.removeEventListener(evtType, handler);
-      //   }
-      // },
       isFocused: () => {
         return document.activeElement === this.$refs.input
       },