feat(MdChips): add formatter for individual chips (#1339)

* feat(MdChips): formatter

Formatter before chip insertion. Effects to insertion and duplicated-checking.

fix #1288

* style(MdChips): always return a value

* docs(Chips): fix `md-format` API description

#1339 (comment)

* docs(ChipsFormat): fix component name and example message

* docs(ChipsFormat): `formatName` return result directly

#1339 (comment)

* style(MdChips): add a space before `if` statement

#1339 (comment)

* docs(Chips): better message for formatter

#1339 (comment)

* fix: code style

Author: VdustR

docs/app/pages/Components/Chips/Chips.vue

@@ -3,6 +3,7 @@
 <example src="./examples/Editable.vue" />
 <example src="./examples/ChipCustomTemplate.vue" />
 <example src="./examples/DuplicatedFeedback.vue" />
+<example src="./examples/Format.vue" />
 <example src="./examples/Themed.vue" />
 
 <template>
@@ -53,6 +54,13 @@
       <code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
     </div>
 
+    <div class="page-container-section">
+      <h2>Formatter</h2>
+
+      <p>Sometimes you may need to format a chip value before adding it, and for this case you can use a custom formatter function. This function will receive the chip value and must return the formatted value.</p>
+      <code-example title="Formatted chips" :component="examples['format']" />
+    </div>
+
     <div class="page-container-section">
       <h2>Hue Colors</h2>
 
@@ -156,6 +164,15 @@ export default {
             type: 'Boolean',
             description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
             defaults: 'false'
+          },
+          {
+            name: 'md-format',
+            type: 'Function',
+            description: [
+              'Formatter before chip insertion. Effects to insertion and duplicated-checking.',
+              'The Chips will pass the inputted value as a parameter of this function. This function returns the formatted result.'
+            ].join('<br/>'),
+            defaults: 'null'
           }
         ]
       },

docs/app/pages/Components/Chips/examples/Format.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <md-chips class="md-primary" v-model="clubs" md-placeholder="Add club..." :md-format="toUppercase">
+      <label>La Liga Clubs</label>
+      <div class="md-helper-text">Three uppercase letters</div>
+    </md-chips>
+    
+    <md-chips class="md-primary" v-model="artists" md-placeholder="Add artist..." :md-format="formatName">
+      <label>Artists</label>
+      <div class="md-helper-text">Try inserting `Eugène Ysaÿe`. The formatter will remove diacritics.</div>
+    </md-chips>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Format',
+  data: () => ({
+    clubs: [
+      'FCB',
+      'MAD'
+    ],
+    artists: [
+      'Claude Debussy',
+      'Jules Massenet',
+      'Gabriel Dupont',
+      'Emma Bardac',
+      'Mary Garden'
+    ]
+  }),
+  methods: {
+    toUppercase (str) {
+      str = str.replace(/\s/g, '').toUpperCase()
+      if (str.length !== 3) return false
+      return str
+    },
+    formatName (str) {
+      let words = str.split(' ').filter(str => str !== '')
+      // remove accents / diacritics
+      words = words.map(str => str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
+      // capitalize
+      words = words.map(str => str[0].toUpperCase() + str.slice(1))
+      return words.join(' ')
+    }
+  }
+}
+</script>

src/components/MdChips/MdChips.vue

@@ -58,6 +58,9 @@
       mdCheckDuplicated: {
         type: Boolean,
         default: false
+      },
+      mdFormat: {
+        type: Function
       }
     },
     data: () => ({
@@ -73,26 +76,35 @@
 
       modelRespectLimit () {
         return !this.mdLimit || this.value.length < this.mdLimit
+      },
+
+      formattedInputValue () {
+        if (!this.mdFormat) {
+          return this.inputValue
+        }
+        return this.mdFormat(this.inputValue)
       }
     },
     methods: {
       insertChip ({ target }) {
-        if (!this.inputValue || !this.modelRespectLimit) {
+        let inputValue = this.formattedInputValue
+
+        if (!inputValue || !this.modelRespectLimit) {
           return
         }
-        
-        if (this.value.includes(this.inputValue)) {
+
+        if (this.value.includes(inputValue)) {
           this.duplicatedChip = null
           // to trigger animate
           this.$nextTick(() => {
-            this.duplicatedChip = this.inputValue
+            this.duplicatedChip = inputValue
           })
           return
         }
-        
-        this.value.push(this.inputValue)
+
+        this.value.push(inputValue)
         this.$emit('input', this.value)
-        this.$emit('md-insert', this.inputValue)
+        this.$emit('md-insert', inputValue)
         this.inputValue = ''
       },
       removeChip (chip) {
@@ -116,12 +128,16 @@
         }
       },
       checkDuplicated () {
-        if (!this.value.includes(this.inputValue)) {
+        if (!this.value.includes(this.formattedInputValue)) {
           this.duplicatedChip = null
-          return
+          return false
         }
-        if (!this.mdCheckDuplicated) return
-        this.duplicatedChip = this.inputValue
+        
+        if (!this.mdCheckDuplicated) {
+          return false
+        }
+        
+        this.duplicatedChip = this.formattedInputValue
       }
     },
     watch: {