feat(MdChips): feedback for duplicated chip (#1281)

VdustR · marcosmoura · commit d15f63bb4f44 · 2017-12-18T23:20:07.000-02:00
* feat(MdChips): feedback for duplicated chip add `md-duplicated` class which has the same style as `md-accent`. add `md-check-duplicated-on-change` props. fix #1212 * fix(MdChips): change api `mdCheckDuplicatedOnChange` to `mdAlwaysCheckDuplicated` * fix(MdChips): change for loop key from `key` to `chip` to prevent triggering animate while removing * docs(MdChips): example and new props for duplicated chip checking fix #1212 * fix(MdChips): always clear `duplicatedChip` on change * style(MdChips): fix style to pass scss-lint * fix(MdChips): rename prop * fix(MdChips): rename prop * fix(MdChips): rename prop * fix(MdChips): rename prop * style(MdChips): adjust code style
diff --git a/docs/app/pages/Components/Chips/Chips.vue b/docs/app/pages/Components/Chips/Chips.vue
@@ -2,6 +2,7 @@
 <example src="./examples/Static.vue" />
 <example src="./examples/Editable.vue" />
 <example src="./examples/ChipCustomTemplate.vue" />
+<example src="./examples/DuplicatedFeedback.vue" />
 <example src="./examples/Themed.vue" />
 
 <template>
@@ -45,6 +46,13 @@
       <code-example title="Scoped Slot" :component="examples['chip-custom-template']" />
     </div>
 
+    <div class="page-container-section">
+      <h2>Duplicated Chip</h2>
+
+      <p>Chips would reject insertion while a chip was duplicated. You could customize feedback style of the duplicated chip:</p>
+      <code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
+    </div>
+
     <div class="page-container-section">
       <h2>Hue Colors</h2>
 
@@ -142,6 +150,12 @@ export default {
             type: 'Number',
             description: 'Blocks the chips to create items above the limit.',
             defaults: 'false'
+          },
+          {
+            name: 'md-check-duplicated',
+            type: 'Boolean',
+            description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
+            defaults: 'false'
           }
         ]
       },
diff --git a/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue b/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <md-chips class="md-primary" v-model="chips" md-placeholder="Add genre...">
+      <div class="md-helper-text">Default</div>
+    </md-chips>
+    <md-chips class="md-primary shake-on-error" v-model="chips" md-placeholder="Add genre...">
+      <div class="md-helper-text">Shake duplicated chip on insertion</div>
+    </md-chips>
+    <md-chips class="md-primary pulse-on-error" v-model="chips" md-placeholder="Add genre..." md-check-duplicated>
+      <div class="md-helper-text">Always pulse duplicated chip</div>
+    </md-chips>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DuplicatedFeedback',
+  data: () => ({
+    chips: [
+      'Pop',
+      'Rock',
+      'Jazz',
+      'Metal'
+    ]
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.shake-on-error /deep/ .md-duplicated {
+  animation-name: shake;
+  animation-duration: 0.5s;
+}
+
+@keyframes shake {
+  0% { transform: translate(15px); }
+  20% { transform: translate(-15px); }
+  40% { transform: translate(7px); }
+  60% { transform: translate(-7px); }
+  80% { transform: translate(3px); }
+  100% { transform: translate(0px); }
+}
+</style>
+
+<style lang="css" scoped>
+.pulse-on-error >>> .md-duplicated {
+  animation-name: pulse;
+  animation-duration: 0.5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out
+}
+
+@keyframes pulse {
+  0% { transform: scale(1.1, 1.1); }
+  100% { transform: scale(0.9, 0.9); }
+}
+</style>
+
diff --git a/src/components/MdChips/MdChip.vue b/src/components/MdChips/MdChip.vue
@@ -36,15 +36,20 @@
     props: {
       mdDisabled: Boolean,
       mdDeletable: Boolean,
-      mdClickable: Boolean
+      mdClickable: Boolean,
+      mdDuplicated: {
+        type: Boolean,
+        default: false
+      }
     },
     computed: {
       chipClasses () {
         return {
           'md-disabled': this.mdDisabled,
           'md-deletable': this.mdDeletable,
           'md-clickable': this.mdClickable,
-          'md-focused': this.mdHasFocus
+          'md-focused': this.mdHasFocus,
+          'md-duplicated': this.mdDuplicated
         }
       }
     }
diff --git a/src/components/MdChips/MdChips.vue b/src/components/MdChips/MdChips.vue
@@ -4,9 +4,10 @@
 
     <md-chip
       v-for="(chip, key) in value"
-      :key="key"
+      :key="chip"
       :md-deletable="!mdStatic"
       :md-clickable="!mdStatic"
+      :md-duplicated="duplicatedChip === chip"
       @keydown.enter="$emit('md-click', chip, key)"
       @click.native="$emit('md-click', chip, key)"
       @md-delete.stop="removeChip(chip)">
@@ -21,6 +22,7 @@
       :type="mdInputType"
       :id="id"
       :placeholder="mdPlaceholder"
+      @input="handleInput"
       @keydown.enter="insertChip"
       @keydown.8="handleBackRemove">
     </md-input>
@@ -52,10 +54,15 @@
       },
       mdPlaceholder: [String, Number],
       mdStatic: Boolean,
-      mdLimit: Number
+      mdLimit: Number,
+      mdCheckDuplicated: {
+        type: Boolean,
+        default: false
+      }
     },
     data: () => ({
-      inputValue: ''
+      inputValue: '',
+      duplicatedChip: null
     }),
     computed: {
       chipsClasses () {
@@ -70,13 +77,19 @@
     },
     methods: {
       insertChip ({ target }) {
-        if (
-          !this.inputValue ||
-          this.value.includes(this.inputValue) ||
-          !this.modelRespectLimit
-        ) {
+        if (!this.inputValue || !this.modelRespectLimit) {
+          return
+        }
+        
+        if (this.value.includes(this.inputValue)) {
+          this.duplicatedChip = null
+          // to trigger animate
+          this.$nextTick(() => {
+            this.duplicatedChip = this.inputValue
+          })
           return
         }
+        
         this.value.push(this.inputValue)
         this.$emit('input', this.value)
         this.$emit('md-insert', this.inputValue)
@@ -94,6 +107,26 @@
         if (!this.inputValue) {
           this.removeChip(this.value[this.value.length - 1])
         }
+      },
+      handleInput () {
+        if (this.mdCheckDuplicated) {
+          this.checkDuplicated()
+        } else {
+          this.duplicatedChip = null
+        }
+      },
+      checkDuplicated () {
+        if (!this.value.includes(this.inputValue)) {
+          this.duplicatedChip = null
+          return
+        }
+        if (!this.mdCheckDuplicated) return
+        this.duplicatedChip = this.inputValue
+      }
+    },
+    watch: {
+      value () {
+        this.checkDuplicated()
       }
     }
   })
diff --git a/src/components/MdChips/theme.scss b/src/components/MdChips/theme.scss
@@ -62,7 +62,8 @@
       }
     }
 
-    &.md-accent {
+    &.md-accent,
+    &.md-duplicated {
       @include md-theme-property(background-color, accent);
       @include md-theme-property(color, text-primary, accent);
 

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,8 @@`
`62`	`62`	`}`
`63`	`63`	`}`
`64`	`64`
`65`		`- &.md-accent {`
	`65`	`+ &.md-accent,`
	`66`	`+ &.md-duplicated {`
`66`	`67`	`@include md-theme-property(background-color, accent);`
`67`	`68`	`@include md-theme-property(color, text-primary, accent);`
`68`	`69`