Implemented the function of automatically adding a value in the MdChi…

…ps component, in case of loss of focus
vuematerial · Mar 24, 2020 · a5399e1 · a5399e1
1 parent 0f96730
commit a5399e1
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 20 deletions.
diff --git a/docs/app/pages/Components/Chips/Chips.vue b/docs/app/pages/Components/Chips/Chips.vue
@@ -5,6 +5,7 @@
 <example src="./examples/DuplicatedFeedback.vue" />
 <example src="./examples/Format.vue" />
 <example src="./examples/Themed.vue" />
+<example src="./examples/AutoInsert.vue" />
 
 <template>
   <page-container centered :title="$t('pages.chips.title')">
@@ -61,6 +62,13 @@
       <code-example title="Formatted chips" :component="examples['format']" />
     </div>
 
+    <div class="page-container-section">
+      <h2 id="auto-insert">Auto insert</h2>
+
+      <p>Automatic value entry when focus is lost:</p>
+      <code-example title="Auto insert" :component="examples['auto-insert']" />
+    </div>
+
     <div class="page-container-section">
       <h2 id="hue-colors">Hue Colors</h2>
 

diff --git a/docs/app/pages/Components/Chips/examples/AutoInsert.vue b/docs/app/pages/Components/Chips/examples/AutoInsert.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <md-chips class="md-primary" v-model="emails" md-placeholder="Enter a email" :md-auto-insert="true">
+      <label>Recipients</label>
+    </md-chips>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AutoInsert',
+  data: () => ({
+    emails: [
+      '[email protected]',
+    ]
+  })
+}
+</script>
diff --git a/src/components/MdChips/MdChips.vue b/src/components/MdChips/MdChips.vue
@@ -1,6 +1,6 @@
 <template>
   <md-field class="md-chips" :class="[$mdActiveTheme, chipsClasses]">
-    <slot />
+    <slot/>
 
     <md-chip
       v-for="(chip, key) in value"
@@ -24,7 +24,9 @@
       :placeholder="mdPlaceholder"
       @input="handleInput"
       @keydown.enter="insertChip"
-      @keydown.8="handleBackRemove">
+      @keydown.8="handleBackRemove"
+      @focusout="handleFocusOut"
+    >
     </md-input>
   </md-field>
 </template>
@@ -54,6 +56,10 @@
       },
       mdPlaceholder: [String, Number],
       mdStatic: Boolean,
+      mdAutoInsert: {
+        type: Boolean,
+        default: false
+      },
       mdLimit: Number,
       mdCheckDuplicated: {
         type: Boolean,
@@ -68,25 +74,25 @@
       duplicatedChip: null
     }),
     computed: {
-      chipsClasses () {
+      chipsClasses() {
         return {
           'md-has-value': this.value && this.value.length
         }
       },
 
-      modelRespectLimit () {
+      modelRespectLimit() {
         return !this.mdLimit || this.value.length < this.mdLimit
       },
 
-      formattedInputValue () {
+      formattedInputValue() {
         if (!this.mdFormat) {
           return this.inputValue
         }
         return this.mdFormat(this.inputValue)
       }
     },
     methods: {
-      insertChip ({ target }) {
+      insertChip({target}) {
         let inputValue = this.formattedInputValue
 
         if (!inputValue || !this.modelRespectLimit) {
@@ -107,27 +113,32 @@
         this.$emit('md-insert', inputValue)
         this.inputValue = ''
       },
-      removeChip (chip) {
+      removeChip(chip) {
         const index = this.value.indexOf(chip)
 
         this.value.splice(index, 1)
         this.$emit('input', this.value)
         this.$emit('md-delete', chip, index)
         this.$nextTick(() => this.$refs.input.$el.focus())
       },
-      handleBackRemove () {
+      handleBackRemove() {
         if (!this.inputValue) {
           this.removeChip(this.value[this.value.length - 1])
         }
       },
-      handleInput () {
+      handleInput() {
         if (this.mdCheckDuplicated) {
           this.checkDuplicated()
         } else {
           this.duplicatedChip = null
         }
       },
-      checkDuplicated () {
+      handleFocusOut({target}) {
+        if (this.mdAutoInsert) {
+          this.insertChip(target)
+        }
+      },
+      checkDuplicated() {
         if (!this.value.includes(this.formattedInputValue)) {
           this.duplicatedChip = null
           return false
@@ -141,7 +152,7 @@
       }
     },
     watch: {
-      value () {
+      value() {
         this.checkDuplicated()
       }
     }
@@ -152,25 +163,25 @@
   @import "~components/MdAnimation/variables";
 
   .md-chips.md-field {
-    padding-top: 12px;
-    flex-wrap: wrap;
+    padding-top : 12px;
+    flex-wrap   : wrap;
 
     &.md-has-value {
       label {
-        top: -6px;
+        top : -6px;
+        }
       }
-    }
 
     .md-chip {
-      margin-bottom: 4px;
+      margin-bottom : 4px;
 
       &:last-of-type {
-        margin-right: 8px;
+        margin-right : 8px;
+        }
       }
-    }
 
     .md-input {
-      min-width: 128px;
+      min-width : 128px;
+      }
     }
-  }
 </style>