feat(MdField): create character counter

Author: marcosmoura

docs/app/pages/Components/Input/Input.vue

@@ -1,5 +1,6 @@
 <example src="./examples/TextFields.vue" />
 <example src="./examples/ErrorsMessages.vue" />
+<example src="./examples/Counters.vue" />
 
 <template>
   <page-container centered :title="$t('pages.input.title')">
@@ -18,6 +19,12 @@
 
       <code-example title="Validation" :component="examples['errors-messages']" />
     </div>
+
+    <div class="page-container-section">
+      <h2>Character count</h2>
+
+      <code-example title="Counter" :component="examples['counters']" />
+    </div>
   </page-container>
 </template>
 

docs/app/pages/Components/Input/examples/Counters.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <md-field>
+      <label>Required Field</label>
+      <md-input required maxlength="30" />
+    </md-field>
+
+    <md-field>
+      <label>Autogrow</label>
+      <md-textarea md-autogrow required maxlength="200" />
+    </md-field>
+
+    <md-field>
+      <label>Textarea</label>
+      <md-textarea required maxlength="80" />
+    </md-field>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Counters'
+  }
+</script>

src/components/MdField/MdField.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="md-field" :class="[$mdActiveTheme, fieldClasses]">
     <slot />
+
+    <span class="md-count" v-if="hasCounter">{{ valueLength }} / {{ state.maxlength }}</span>
   </div>
 </template>
 
@@ -13,7 +15,11 @@
       state: {}
     },
     props: {
-      mdInline: Boolean
+      mdInline: Boolean,
+      mdCounter: {
+        type: Boolean,
+        default: true
+      }
     },
     data: () => ({
       state: {
@@ -23,10 +29,24 @@
         required: false,
         placeholder: false,
         textarea: false,
-        autogrow: false
+        autogrow: false,
+        maxlength: null
       }
     }),
     computed: {
+      hasCounter () {
+        return this.mdCounter && this.state.maxlength
+      },
+      hasValue () {
+        return this.state.value && this.state.value.length > 0
+      },
+      valueLength () {
+        if (this.state.value) {
+          return this.state.value.length
+        }
+
+        return 0
+      },
       fieldClasses () {
         return {
           'md-inline': this.mdInline,
@@ -68,7 +88,7 @@
     &:after {
       height: 1px;
       position: absolute;
-      top: 47px;
+      bottom: 0;
       right: 0;
       left: 0;
       z-index: 1;
@@ -233,6 +253,11 @@
         padding: 0 16px;
       }
 
+      .md-count {
+        right: 6px;
+        bottom: 2px;
+      }
+
       &:hover,
       &.md-focused {
         &:before {

src/components/MdField/MdFieldMixin.js

@@ -32,6 +32,9 @@ export default {
     },
     required () {
       this.setRequired()
+    },
+    maxlength () {
+      this.setMaxlength()
     }
   },
   methods: {
@@ -47,6 +50,9 @@ export default {
     setRequired () {
       this.state.required = Boolean(this.required)
     },
+    setMaxlength () {
+      this.state.maxlength = parseInt(this.maxlength, 10)
+    },
     onFocus () {
       this.state.focused = true
     },
@@ -62,5 +68,6 @@ export default {
     this.setPlaceholder()
     this.setDisabled()
     this.setRequired()
+    this.setMaxlength()
   }
 }

src/components/MdField/theme.scss

@@ -7,6 +7,7 @@
 
 
       .md-helper-text,
+      .md-count,
       label {
         color: rgba(#000, .54);
       }
@@ -49,6 +50,7 @@
       }
 
       .md-helper-text,
+      .md-count,
       label {
         color: rgba(#fff, .7);
       }