From b87a518523976802d7ef87e8a63704d413286f19 Mon Sep 17 00:00:00 2001
From: Muhammed Shafi <shafimsp@gmail.com>
Date: Thu, 5 Apr 2018 17:13:47 +0530
Subject: [PATCH 1/2] feat(MdChips): Support with field variants

---
 src/components/MdChips/MdChips.vue | 260 ++++++++++++++++++++++++++---
 src/components/MdField/MdField.vue |  12 +-
 2 files changed, 248 insertions(+), 24 deletions(-)

diff --git a/src/components/MdChips/MdChips.vue b/src/components/MdChips/MdChips.vue
index b1127bc50..9e3487d8c 100644
--- a/src/components/MdChips/MdChips.vue
+++ b/src/components/MdChips/MdChips.vue
@@ -1,12 +1,11 @@
 <template>
-  <md-field class="md-chips" :class="[$mdActiveTheme, chipsClasses]">
-    <slot />
+  <div class="md-chips" :class="[$mdActiveTheme, chipsClasses]">
 
     <md-chip
       v-for="(chip, key) in value"
       :key="chip"
-      :md-deletable="!mdStatic"
-      :md-clickable="!mdStatic"
+      :md-deletable="!isStatic"
+      :md-clickable="!isStatic"
       :md-duplicated="duplicatedChip === chip"
       @keydown.enter="$emit('md-click', chip, key)"
       @click.native="$emit('md-click', chip, key)"
@@ -15,18 +14,20 @@
       <template v-else>{{ chip }}</template>
     </md-chip>
 
-    <md-input
+    <input
+      class="md-input"
       ref="input"
       v-model.trim="inputValue"
-      v-if="!mdStatic && modelRespectLimit"
+      v-if="!isStatic && modelRespectLimit"
       :type="mdInputType"
       :id="id"
-      :placeholder="mdPlaceholder"
+      :placeholder="placeholder"
       @input="handleInput"
+      @focus="onFocus"
+      @blur="onBlur"
       @keydown.enter="insertChip"
-      @keydown.8="handleBackRemove">
-    </md-input>
-  </md-field>
+      @keydown.8="handleBackRemove" />
+  </div>
 </template>
 
 <script>
@@ -35,6 +36,7 @@
   import MdInput from 'components/MdField/MdInput/MdInput'
   import MdUuid from 'core/utils/MdUuid'
   import MdPropValidator from 'core/utils/MdPropValidator'
+  import MdFieldMixin from '../MdField/MdFieldMixin'
 
   export default new MdComponent({
     name: 'MdChips',
@@ -52,7 +54,6 @@
         type: [String, Number],
         ...MdPropValidator('md-input-type', ['email', 'number', 'password', 'search', 'tel', 'text', 'url'])
       },
-      mdPlaceholder: [String, Number],
       mdStatic: Boolean,
       mdLimit: Number,
       mdCheckDuplicated: {
@@ -63,6 +64,8 @@
         type: Function
       }
     },
+    mixins: [MdFieldMixin],
+    inject: ['MdField'],
     data: () => ({
       inputValue: '',
       duplicatedChip: null
@@ -75,7 +78,7 @@
       },
 
       modelRespectLimit () {
-        return !this.mdLimit || this.value.length < this.mdLimit
+        return !this.mdLimit || this.value.length < this.MdField.maxlength
       },
 
       formattedInputValue () {
@@ -83,10 +86,39 @@
           return this.inputValue
         }
         return this.mdFormat(this.inputValue)
+      },
+
+      stringInputValue () {
+        return (this.inputValue || this.inputValue === 0) && this.inputValue.toString()
+      },
+
+      hasInputValue () {
+        return this.stringInputValue && this.stringInputValue.length > 0
+      },
+
+      isStatic () {
+        return this.disabled || this.readonly || this.mdStatic
       }
     },
     methods: {
+      clearField () {
+        this.inputValue = ''
+        this.model = []
+        this.setFieldValue()
+      },
+      setMaxlength () {
+        if (this.mdLimit) {
+          this.MdField.maxlength = parseInt(this.mdLimit, 10)
+        } else if (this.mdCounter) {
+          this.MdField.counter = parseInt(this.mdCounter, 10)
+        } else {
+          this.MdField.maxlength = parseInt(this.maxlength, 10)
+        }
+      },
       insertChip ({ target }) {
+        let isArray = Array.isArray(this.localValue)
+        if(!isArray) this.localValue = []
+
         let inputValue = this.formattedInputValue
 
         if (!inputValue || !this.modelRespectLimit) {
@@ -102,18 +134,18 @@
           return
         }
 
-        this.value.push(inputValue)
-        this.$emit('input', this.value)
+        this.localValue.push(inputValue)
+        this.setFieldValue(this.value)
         this.$emit('md-insert', inputValue)
         this.inputValue = ''
       },
       removeChip (chip) {
-        const index = this.value.indexOf(chip)
+        const index = this.localValue.indexOf(chip)
 
-        this.value.splice(index, 1)
-        this.$emit('input', this.value)
+        this.localValue.splice(index, 1)
+        this.setFieldValue(this.value)
         this.$emit('md-delete', chip, index)
-        this.$nextTick(() => this.$refs.input.$el.focus())
+        this.$nextTick(() => this.$refs.input.focus())
       },
       handleBackRemove () {
         if (!this.inputValue) {
@@ -132,18 +164,30 @@
           this.duplicatedChip = null
           return false
         }
-        
+
         if (!this.mdCheckDuplicated) {
           return false
         }
-        
+
         this.duplicatedChip = this.formattedInputValue
       }
     },
     watch: {
+      mdLimit () {
+        this.setMaxlength()
+      },
+      hasInputValue () {
+        this.MdField.typing = this.hasInputValue
+      },
       value () {
         this.checkDuplicated()
       }
+    },
+    created () {
+      this.MdField.chips = true
+    },
+    beforeDestroy () {
+      this.MdField.chips = false
     }
   })
 </script>
@@ -151,9 +195,12 @@
 <style lang="scss">
   @import "~components/MdAnimation/variables";
 
-  .md-chips.md-field {
-    padding-top: 12px;
+  .md-chips {
     flex-wrap: wrap;
+    flex: 1;
+    display: flex;
+    transition: $md-transition-stand;
+    transition-property: padding-top, padding-bottom;
 
     &.md-has-value {
       label {
@@ -162,7 +209,7 @@
     }
 
     .md-chip {
-      margin-bottom: 4px;
+      margin: 2px 4px 2px 0;
 
       &:last-of-type {
         margin-right: 8px;
@@ -173,4 +220,171 @@
       min-width: 128px;
     }
   }
+
+  .md-field.md-has-chips.md-field-bottom-line {
+    .md-chips {
+      .md-input {
+        height: 36px;
+        line-height: 36px;
+      }
+    }
+
+    label {
+      margin-top: 2px;
+    }
+
+    > .md-icon {
+      margin-top: 8px;
+    }
+
+    &:not(.md-inline) {
+      padding-top: 12px;
+
+      &.md-typing {
+        label {
+          pointer-events: auto;
+          font-size: 12px;
+          opacity: 1;
+        }
+      }
+
+      &.md-typing,
+      &.md-focused,
+      &.md-has-value {
+        label {
+          top: -4px;
+        }
+      }
+    }
+
+    &.md-inline {
+      &.md-has-placeholder,
+      &.md-typing {
+        label {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  .md-field.md-has-chips.md-field-box {
+    .md-chips {
+      padding: 20px 0 0;
+
+      .md-input {
+        height: 36px;
+        padding: 0;
+      }
+    }
+
+    &.md-has-placeholder {
+      .md-chips {
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        .md-input {
+          height: 36px;
+          padding: 0;
+        }
+      }
+
+      &.md-typing,
+      &.md-focused,
+      &.md-has-value {
+        .md-chips {
+          padding-top: 20px;
+          padding-bottom: 0;
+
+          .md-input {
+            height: 36px;
+            padding: 0;
+          }
+        }
+      }
+    }
+
+    &.md-typing {
+      label {
+        pointer-events: auto;
+        opacity: 1;
+        font-size: 12px;
+      }
+    }
+
+    &.md-typing,
+    &.md-focused,
+    &.md-has-value {
+      label {
+        top: 6px;
+      }
+
+      .md-input,
+      .md-textarea {
+        font-size: 16px;
+      }
+
+      .md-prefix,
+      .md-suffix {
+        padding-top: 20px;
+      }
+    }
+
+    &.md-inline {
+      .md-chips {
+        padding-top: 10px;
+      }
+
+      &.md-typing,
+      &.md-focused,
+      &.md-has-value {
+        label {
+          top: 20px;
+          font-size: 16px;
+        }
+
+        .md-chips {
+          padding-top: 10px;
+          padding-bottom: 10px;
+
+          .md-input {
+            height: 36px;
+            padding: 0;
+          }
+        }
+
+        .md-prefix,
+        .md-suffix {
+          padding-top: 0;
+        }
+      }
+
+      &.md-typing {
+        label {
+          opacity: 0;
+        }
+      }
+
+      &.md-has-placeholder {
+        label {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  .md-field.md-has-chips.md-field-raised {
+    min-height: 48px;
+
+    .md-chips {
+      .md-input {
+        height: 36px;
+        line-height: 36px;
+        padding: 0;
+      }
+    }
+  }
+
+  .md-field.md-has-chips.md-field-raised.md-dense {
+    min-height: 48px;
+  }
 </style>
diff --git a/src/components/MdField/MdField.vue b/src/components/MdField/MdField.vue
index 9d752d736..0965108b5 100644
--- a/src/components/MdField/MdField.vue
+++ b/src/components/MdField/MdField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-field" :class="[$mdActiveTheme, fieldClasses]" @blur="onBlur">
+  <div class="md-field" :class="[$mdActiveTheme, fieldClasses]" @blur="onBlur" :data-counter="mdCounter ? 'Yes' : 'NO'">
     <slot />
 
     <span class="md-count" v-if="hasCounter">{{ valueLength }} / {{ MdField.maxlength || MdField.counter }}</span>
@@ -74,6 +74,8 @@
         clear: false,
         file: false,
         dense: false,
+        chips: false,
+        typing: false,
         variant: 'bottom-line',
         $el: null
       }
@@ -106,6 +108,12 @@
         return this.stringValue && this.stringValue.length > 0
       },
       valueLength () {
+        let isArray = Array.isArray(this.MdField.value)
+
+        if (isArray) {
+          return this.MdField.value.length
+        }
+
         if (this.stringValue) {
           return this.stringValue.length
         }
@@ -131,6 +139,8 @@
           'md-has-password': this.MdField.password,
           'md-has-file': this.MdField.file,
           'md-has-select': this.MdField.select,
+          'md-has-chips': this.MdField.chips,
+          'md-typing': this.MdField.typing,
           'md-autogrow': this.MdField.autogrow
         }
       }

From 7f19045229647c7e8047aa9048a19df452d6b214 Mon Sep 17 00:00:00 2001
From: Muhammed Shafi <shafimsp@gmail.com>
Date: Thu, 5 Apr 2018 17:14:10 +0530
Subject: [PATCH 2/2] docs(MdChips): Support with field variants

---
 docs/app/pages/Components/Chips/Chips.vue       |  2 +-
 .../Chips/examples/ChipCustomTemplate.vue       | 13 +++++++------
 .../Chips/examples/DuplicatedFeedback.vue       | 17 +++++++++++------
 .../Components/Chips/examples/Editable.vue      |  4 +++-
 .../pages/Components/Chips/examples/Format.vue  | 12 +++++++-----
 .../pages/Components/Chips/examples/Static.vue  |  4 +++-
 6 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/docs/app/pages/Components/Chips/Chips.vue b/docs/app/pages/Components/Chips/Chips.vue
index 29046106c..98616b6d2 100644
--- a/docs/app/pages/Components/Chips/Chips.vue
+++ b/docs/app/pages/Components/Chips/Chips.vue
@@ -142,7 +142,7 @@ export default {
             defaults: 'text'
           },
           {
-            name: 'md-placeholder',
+            name: 'placeholder',
             type: 'String',
             description: 'The input placeholder. It is useful to show to the user which type of data will be inserted.',
             defaults: 'null'
diff --git a/docs/app/pages/Components/Chips/examples/ChipCustomTemplate.vue b/docs/app/pages/Components/Chips/examples/ChipCustomTemplate.vue
index f32690b6c..39013b1a6 100644
--- a/docs/app/pages/Components/Chips/examples/ChipCustomTemplate.vue
+++ b/docs/app/pages/Components/Chips/examples/ChipCustomTemplate.vue
@@ -1,12 +1,13 @@
 <template>
   <div>
-    <md-chips v-model="projects" :md-limit="5" md-placeholder="Add project...">
-      <template slot="md-chip" slot-scope="{ chip }">
-        {{ chip }} <small v-if="chip === currentProject">(Marcos Moura)</small>
-      </template>
-
+    <md-field>
+      <md-chips v-model="projects" :md-limit="5" md-placeholder="Add project...">
+        <template slot="md-chip" slot-scope="{ chip }">
+          {{ chip }} <small v-if="chip === currentProject">(Marcos Moura)</small>
+        </template>
+      </md-chips>
       <div class="md-helper-text">Up to 5 projects</div>
-    </md-chips>
+    </md-field>
   </div>
 </template>
 
diff --git a/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue b/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue
index 6df3b08a9..65b730b38 100644
--- a/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue
+++ b/docs/app/pages/Components/Chips/examples/DuplicatedFeedback.vue
@@ -1,14 +1,19 @@
 <template>
   <div>
-    <md-chips class="md-primary" v-model="chips" md-placeholder="Add genre...">
+    <md-field>
+      <md-chips class="md-primary" v-model="chips" md-placeholder="Add genre..."></md-chips>
       <div class="md-helper-text">Default</div>
-    </md-chips>
-    <md-chips class="md-primary shake-on-error" v-model="chips" md-placeholder="Add genre...">
+    </md-field>
+
+    <md-field>
+      <md-chips class="md-primary shake-on-error" v-model="chips" md-placeholder="Add genre..."></md-chips>
       <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>
+    </md-field>
+
+    <md-field>
+      <md-chips class="md-primary pulse-on-error" v-model="chips" md-placeholder="Add genre..." md-check-duplicated></md-chips>
       <div class="md-helper-text">Always pulse duplicated chip</div>
-    </md-chips>
+    </md-field>
   </div>
 </template>
 
diff --git a/docs/app/pages/Components/Chips/examples/Editable.vue b/docs/app/pages/Components/Chips/examples/Editable.vue
index 52d5a750d..aade580e4 100644
--- a/docs/app/pages/Components/Chips/examples/Editable.vue
+++ b/docs/app/pages/Components/Chips/examples/Editable.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <md-chips v-model="fruits" md-placeholder="Add fruit..."></md-chips>
+    <md-field>
+      <md-chips v-model="fruits" md-placeholder="Add fruit..."></md-chips>
+    </md-field>
   </div>
 </template>
 
diff --git a/docs/app/pages/Components/Chips/examples/Format.vue b/docs/app/pages/Components/Chips/examples/Format.vue
index 6fc4f8460..bb8a14156 100644
--- a/docs/app/pages/Components/Chips/examples/Format.vue
+++ b/docs/app/pages/Components/Chips/examples/Format.vue
@@ -1,14 +1,16 @@
 <template>
   <div>
-    <md-chips class="md-primary" v-model="clubs" md-placeholder="Add club..." :md-format="toUppercase">
+    <md-field>
       <label>La Liga Clubs</label>
+      <md-chips class="md-primary" v-model="clubs" :md-format="toUppercase"></md-chips>
       <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">
+    </md-field>
+
+    <md-field>
       <label>Artists</label>
+      <md-chips class="md-primary" v-model="artists" placeholder="Add artist..." :md-format="formatName"></md-chips>
       <div class="md-helper-text">Try inserting `Eugène Ysaÿe`. The formatter will remove diacritics.</div>
-    </md-chips>
+    </md-field>
   </div>
 </template>
 
diff --git a/docs/app/pages/Components/Chips/examples/Static.vue b/docs/app/pages/Components/Chips/examples/Static.vue
index 8ef2445ba..61a2d2eb5 100644
--- a/docs/app/pages/Components/Chips/examples/Static.vue
+++ b/docs/app/pages/Components/Chips/examples/Static.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <md-chips v-model="cities" md-static></md-chips>
+    <md-field>
+      <md-chips v-model="cities" readonly></md-chips>
+    </md-field>
   </div>
 </template>