From a88d29ade0ac27d3ce301d0ba5efa70000f7b1c2 Mon Sep 17 00:00:00 2001
From: Jiajun Chen <tychenjiajun@live.cn>
Date: Tue, 7 May 2019 16:31:45 +0800
Subject: [PATCH] feat(text-field): add character counter

---
 .../text-field/TextFieldCharacterCounter.vue  | 56 ++++++++++++++++++
 components/text-field/TextFieldHelperText.vue |  1 +
 components/text-field/index.js                |  2 +
 docs/.vuepress/components/TextfieldDemo.vue   | 57 +++++++++++++++++++
 4 files changed, 116 insertions(+)
 create mode 100644 components/text-field/TextFieldCharacterCounter.vue

diff --git a/components/text-field/TextFieldCharacterCounter.vue b/components/text-field/TextFieldCharacterCounter.vue
new file mode 100644
index 000000000..67fdcf583
--- /dev/null
+++ b/components/text-field/TextFieldCharacterCounter.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="mdc-text-field-character-counter">
+    {{ currentLength }} / {{ maxLength }}
+  </div>
+</template>
+
+<script>
+import { MDCTextFieldCharacterCounter } from '@material/textfield/character-counter'
+
+import { baseComponentMixin, themeClassMixin } from '../base'
+
+export default {
+  name: 'TextFieldCharacterCounter',
+  mixins: [baseComponentMixin, themeClassMixin],
+  props: {
+    currentLength: {
+      type: Number,
+      default: 0
+    },
+    maxLength: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      mdcTextFieldCharacterCounter: undefined,
+      cl: this.currentLength,
+      ml: this.maxLength
+    }
+  },
+  watch: {
+    currentLength () {
+      this.cl = this.currentLength
+      this.mdcTextFieldCharacterCounter.foundation.setCounterValue(this.currentLength, this.maxLength)
+    },
+    maxLength () {
+      this.ml = this.maxLength
+      this.mdcTextFieldCharacterCounter.foundation.setCounterValue(this.currentLength, this.maxLength)
+    }
+  },
+  mounted () {
+    let input = this.$el.parentElement.previousElementSibling.querySelector('.mdc-text-field__input')
+    if (input) {
+      this.ml = input.getAttribute('maxlength')
+      this.cl = input.value.length
+    }
+    this.mdcTextFieldCharacterCounter = MDCTextFieldCharacterCounter.attachTo(this.$el)
+    this.mdcTextFieldCharacterCounter.foundation.setCounterValue(this.cl, this.ml)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/text-field/TextFieldHelperText.vue b/components/text-field/TextFieldHelperText.vue
index 98fbd31b4..3b76fa3b0 100644
--- a/components/text-field/TextFieldHelperText.vue
+++ b/components/text-field/TextFieldHelperText.vue
@@ -7,6 +7,7 @@
     >
       <slot />
     </div>
+    <slot name="characterCounter" />
   </div>
 </template>
 
diff --git a/components/text-field/index.js b/components/text-field/index.js
index af8a401b6..5447bd318 100644
--- a/components/text-field/index.js
+++ b/components/text-field/index.js
@@ -1,5 +1,6 @@
 import TextField from './TextField.vue'
 import TextFieldHelperText from './TextFieldHelperText.vue'
+import TextFieldCharacterCounter from './TextFieldCharacterCounter'
 import './styles.scss'
 
 import { initPlugin } from '../'
@@ -8,6 +9,7 @@ const plugin = {
   install (vm) {
     vm.component('m-text-field', TextField)
     vm.component('m-text-field-helper-text', TextFieldHelperText)
+    vm.component('m-text-field-character-counter', TextFieldCharacterCounter)
   }
 }
 export default plugin
diff --git a/docs/.vuepress/components/TextfieldDemo.vue b/docs/.vuepress/components/TextfieldDemo.vue
index 19d6ce005..d18419e50 100644
--- a/docs/.vuepress/components/TextfieldDemo.vue
+++ b/docs/.vuepress/components/TextfieldDemo.vue
@@ -227,6 +227,63 @@
                     Helper Text
                 </m-text-field-helper-text>
             </div>
+
+            <m-typography>Filled with Helper Text and Character Counter</m-typography>
+            <div>
+                <m-text-field
+                        :disabled="checkboxProps[0].value"
+                        :focused="checkboxProps[2].value"
+                        :required="checkboxProps[5].value"
+                        :upgraded="checkboxProps[1].value"
+                        :use-native-validation="checkboxProps[4].value"
+                        :valid="checkboxProps[3].value"
+                        aria-controls="helper-text3"
+                        aria-describedby="helper-text3"
+                        id="text-field10"
+                        maxlength="20"
+                >
+                    <m-floating-label
+                            for="text-field10">Label
+                    </m-floating-label>
+                    <m-line-ripple slot="bottomLine"/>
+                </m-text-field>
+                <m-text-field-helper-text :persistent="checkboxProps[6].value" :validation-msg="checkboxProps[7].value"
+                                          id="helper-text3">
+                    Helper Text
+                    <template v-slot:characterCounter>
+                        <m-text-field-character-counter/>
+                    </template>
+                </m-text-field-helper-text>
+            </div>
+
+            <m-typography>Outlined with Helper Text and Character Counter</m-typography>
+            <div>
+                <m-text-field
+                        :disabled="checkboxProps[0].value"
+                        :focused="checkboxProps[2].value"
+                        :required="checkboxProps[5].value"
+                        :upgraded="checkboxProps[1].value"
+                        :use-native-validation="checkboxProps[4].value"
+                        :valid="checkboxProps[3].value"
+                        aria-controls="helper-text4"
+                        aria-describedby="helper-text4"
+                        id="text-field11"
+                        maxlength="20"
+                        outlined
+                >
+                    <m-floating-label
+                            for="text-field11">Label
+                    </m-floating-label>
+                    <m-line-ripple slot="bottomLine"/>
+                </m-text-field>
+                <m-text-field-helper-text :persistent="checkboxProps[6].value" :validation-msg="checkboxProps[7].value"
+                                          id="helper-text4">
+                    Helper Text
+                    <template v-slot:characterCounter>
+                        <m-text-field-character-counter/>
+                    </template>
+                </m-text-field-helper-text>
+            </div>
         </ComponentSection>
         <ComponentProps
                 :checkboxProps="checkboxProps"