feat(text-field): Synchronise with mdc-web (closes #47)

Breaking-Change: TextFieldMultiline is removed. m-textfield is renamed to m-text-field.
matsp · Jan 24, 2018 · 7eb23d3 · 7eb23d3
1 parent 2e33220
commit 7eb23d3
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 172 deletions.
diff --git a/components/Textfield/README.md b/components/Textfield/README.md
@@ -3,22 +3,23 @@
 ### Markup
 
 ```html
-<m-textfield v-model="text" bottomLine>Textfield</m-textfield>
-<m-textfield-multiline v-model="text">Textfield</m-textfield-multiline>
-<m-textfield bottomLine required minlength=8 aria-controls="pw-validation">
-    Password
-</m-textfield>
-<m-textfield-helptext id="pw-validation">
-    Password must be at least 8 characters long.
-</m-textfield-helptext>
+<m-text-field v-model="text" bottomLine>
+  Textfield
+</m-text-field>
+<m-text-field v-model="pw" type="password" bottom-line required minlength="8" aria-controls="pw-validation">
+  Password
+</m-text-field>
+<m-text-field-helptext id="pw-validation">
+  Password must be at least 8 characters long.
+</m-text-field-helptext>
 ```
 
 ### Script
 
 ```javascript
 data() {
     return {
-        text: ''
+        text: 'I am a text-field!'
     }
 }
 ```
@@ -27,13 +28,20 @@ data() {
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
-| value | String | - | false | textfield value |
-| disabled | Boolean | - | false |  whether the textfield should be disabled |
-| upgraded | Boolean | - | false | whether the textfield should be upgraded when it already has a value (FOUC) |
-| fullWidth | Boolean | - | false | expand the textfield to max width |
-| box | Boolean | - | false | draws a box around the textfield |
-| labelFloat | - | false | whether the label should float above the input field that already has a value (FOUC) |
-| bottomLine | Boolean | - | false | draws the bottom line in primary theme color |
+| value | String | '' | false | textfield value |
+| disabled | Boolean | false | false |  whether the textfield should be disabled |
+| upgraded | Boolean | false | false | whether the textfield should be upgraded when it already has a value (FOUC) |
+| fullWidth | Boolean | false | false | expand the textfield to max width |
+| box | Boolean | false | false | draws a box around the textfield |
+| labelFloat | false | false | whether the label should float above the input field that already has a value (FOUC) |
+| bottomLine | Boolean | false | false | draws the bottom line in primary theme color |
+| leadingIcon | String | '' | false | display a leading material icon in the input field |
+| trailingIcon | String | '' | false | display a trailing material icon in the input field |
+| outlined | Boolean | false | false | draws an outer line around input field |
+| dense | Boolean | false | false | whether the textfield should be dense |
+| focused | Boolean | false | false | whether the textfield should be in focus |
+| textarea | Boolean | false | false | whether the textfield should be a textarea |
+| shake | Boolean | false | false | whether the textfield label should shake |
 
 ### Slots
 
@@ -43,27 +51,6 @@ data() {
 
 Non prop attributes are mapped to the inner input element.
 
-## TextfieldMultiline
-
-### Props
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| value | String | - | false | multiline textfield value |
-| disabled | Boolean | - | false |  whether the multiline textfield should be disabled |
-| upgraded | Boolean | - | false | whether the multiline textfield should be upgraded when it already has a value (FOUC) |
-| fullWidth | Boolean | - | false | expand the multiline textfield to max width |
-| box | Boolean | - | false | draws a box around the multiline textfield |
-| labelFloat | - | false | whether the label should float above the input field that already has a value (FOUC) |
-
-### Slots
-
-| Slot | Prop dependencies | Description |
-|------|-------------------|-------------|
-| default | - | multiline textfield label |
-
-Non prop attributes are mapped to the inner textarea element.
-
 ## TextfieldHelptext
 
 ### Props

diff --git a/components/Textfield/Textfield.vue b/components/Textfield/Textfield.vue
@@ -1,12 +1,48 @@
 <template>
-  <div class="mdc-text-field" :class="classes">
-    <i v-if="leadingIcon" class="material-icons mdc-text-field__icon">{{ leadingIcon }}</i>
-    <input class="mdc-text-field__input" :value="value" @input="onInput" v-bind="$attrs" >
-    <label class="mdc-text-field__label" :class="classesLabel" v-if="$slots['default'] && !fullWidth">
+  <div
+    class="mdc-text-field"
+    :class="classes">
+    <i
+      v-if="leadingIcon"
+      class="material-icons mdc-text-field__icon">
+      {{ leadingIcon }}
+    </i>
+    <input
+      class="mdc-text-field__input"
+      :value="value"
+      @input="onInput"
+      v-bind="$attrs"
+      v-if="!textarea">
+    <textarea
+      class="mdc-text-field__input"
+      :value="value"
+      @input="onInput"
+      v-bind="$attrs"
+      v-if="textarea"/>
+    <label
+      class="mdc-text-field__label"
+      :class="classesLabel"
+      v-if="$slots['default'] && !fullWidth">
       <slot />
     </label>
-    <i v-if="trailingIcon" class="material-icons mdc-text-field__icon">{{ trailingIcon }}</i>
-    <div v-if="bottomLine" class="mdc-text-field__bottom-line"/>
+    <div
+      v-if="outlined"
+      class="mdc-text-field__outline">
+      <svg>
+        <path class="mdc-text-field__outline-path"/>
+      </svg>
+    </div>
+    <div
+      v-if="outlined"
+      class="mdc-text-field__idle-outline"/>
+    <i
+      v-if="trailingIcon"
+      class="material-icons mdc-text-field__icon">
+      {{ trailingIcon }}
+    </i>
+    <div
+      v-if="bottomLine"
+      class="mdc-text-field__bottom-line"/>
   </div>
 </template>
 
@@ -18,39 +54,73 @@ export default {
   props: {
     value: {
       type: String,
-      required: false
+      required: false,
+      default: ''
     },
     disabled: {
       type: Boolean,
-      required: false
+      required: false,
+      default: false
     },
     upgraded: {
       type: Boolean,
-      required: false
+      required: false,
+      default: false
     },
     fullWidth: {
       type: Boolean,
-      required: false
+      required: false,
+      default: false
     },
     box: {
       type: Boolean,
-      required: false
+      required: false,
+      default: false
     },
     labelFloat: {
       type: Boolean,
-      required: false
+      required: false,
+      default: false
     },
     bottomLine: {
       type: Boolean,
-      required: false
+      required: false,
+      default: false
     },
     leadingIcon: {
       type: String,
-      required: false
+      required: false,
+      default: ''
     },
     trailingIcon: {
       type: String,
-      required: false
+      required: false,
+      default: ''
+    },
+    outlined: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dense: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    focused: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    textarea: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    shake: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
@@ -60,15 +130,6 @@ export default {
       float: false
     }
   },
-  mounted () {
-    this.mdcTextField = MDCTextField.attachTo(this.$el)
-    this.float = this.labelFloat
-  },
-  beforeDestroy () {
-    this.mdcTextField.destroy()
-
-    if (this.interactive && this.box) { this.mdcRipple.destroy() }
-  },
   computed: {
     classes () {
       return {
@@ -77,24 +138,38 @@ export default {
         'mdc-text-field--fullwidth': this.fullWidth,
         'mdc-text-field--box': this.box,
         'mdc-text-field--with-leading-icon': this.leadingIcon,
-        'mdc-text-field--with-trailing-icon': this.trailingIcon
+        'mdc-text-field--with-trailing-icon': this.trailingIcon,
+        'mdc-text-field--outlined': this.outlined,
+        'mdc-text-field--dense': this.dense,
+        'mdc-text-field--focused': this.focused,
+        'mdc-text-field--textarea': this.textarea
       }
     },
     classesLabel () {
       return {
-        'mdc-text-field__label--float-above': this.float
+        'mdc-text-field__label--float-above': this.float,
+        'mdc-text-field__label--shake': this.shake
       }
     }
   },
-  methods: {
-    onInput (event) {
-      debounce(this.$emit('input', event.target.value))
-    }
-  },
   watch: {
     value () {
       this.value === '' ? this.float = false : this.float = true
     }
+  },
+  mounted () {
+    this.mdcTextField = MDCTextField.attachTo(this.$el)
+    this.float = this.labelFloat
+  },
+  beforeDestroy () {
+    this.mdcTextField.destroy()
+
+    if (this.interactive && this.box) { this.mdcRipple.destroy() }
+  },
+  methods: {
+    onInput (event) {
+      debounce(this.$emit('input', event.target.value))
+    }
   }
 }
 </script>

diff --git a/components/Textfield/TextfieldMultiline.vue b/components/Textfield/TextfieldMultiline.vue
diff --git a/components/Textfield/index.js b/components/Textfield/index.js
@@ -1,11 +1,9 @@
 import Textfield from './Textfield.vue'
 import TextfieldHelptext from './TextfieldHelptext.vue'
-import TextfieldMultiline from './TextfieldMultiline.vue'
 
 export default {
   install (vm) {
-    vm.component('m-textfield', Textfield)
-    vm.component('m-textfield-helptext', TextfieldHelptext)
-    vm.component('m-textfield-multiline', TextfieldMultiline)
+    vm.component('m-text-field', Textfield)
+    vm.component('m-text-field-helptext', TextfieldHelptext)
   }
 }