create chips

docs/src/pages/components/Chips.vue

@@ -28,10 +28,55 @@
       </div>
 
       <div slot="example">
-        <example-box card-title="Static">
+        <example-box card-title="Single Chips">
           <div slot="demo">
             <md-chip>Marcos Moura</md-chip>
-            <md-chip md-deletable>Marcos Moura</md-chip>
+            <md-chip md-deletable>Luiza Ivanenko</md-chip>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Static">
+          <div slot="demo">
+            <md-chips v-model="fruits" md-static>
+              <template scope="chip">{{ chip.value }}</template>
+            </md-chips>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Editable">
+          <div slot="demo">
+            <md-chips v-model="contacts" md-input-placeholder="Add a contact">
+              <template scope="chip">{{ chip.value }}</template>
+            </md-chips>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Limit">
+          <div slot="demo">
+            <md-chips v-model="cities" :md-max="5" md-input-placeholder="Cities...">
+              <template scope="chip">
+                <span>{{ chip.value }}</span>
+                <small v-if="chip.value === 'Belo Horizonte'">(favorite)</small>
+              </template>
+            </md-chips>
           </div>
 
           <div slot="code">
@@ -45,6 +90,12 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
-
-</style>
+<script>
+  export default {
+    data: () => ({
+      fruits: ['Orange', 'Apple', 'Pineapple'],
+      contacts: ['Marcos Moura'],
+      cities: ['Amsterdam', 'Belo Horizonte']
+    })
+  };
+</script>

src/components/mdChips/mdChip.vue

@@ -2,7 +2,12 @@
   <div class="md-chip" :class="[themeClass, classes]" tabindex="0">
     <slot></slot>
 
-    <md-button class="md-icon-button md-dense md-delete" v-if="mdDeletable" @click="$emit('delete')">
+    <md-button
+      class="md-icon-button md-dense md-delete"
+      v-if="mdDeletable"
+      @click.native="!disabled && $emit('delete')"
+      @keyup.native.delete="!disabled && $emit('delete')"
+      tabindex="-1">
       <md-icon>cancel</md-icon>
     </md-button>
   </div>
@@ -13,13 +18,15 @@
 
   export default {
     props: {
+      disabled: Boolean,
       mdDeletable: Boolean
     },
     mixins: [theme],
     computed: {
       classes() {
         return {
-          'md-deletable': this.mdDeletable
+          'md-deletable': this.mdDeletable,
+          'md-disabled': this.disabled
         };
       }
     }

src/components/mdChips/mdChips.scss

@@ -7,12 +7,12 @@ $chip-icon-font: $chip-icon-size - 4px;
 .md-chip {
   height: $chip-height;
   padding: 8px 12px;
-  display: inline-flex;
-  cursor: pointer;
+  display: inline-block;
   border-radius: $chip-height;
   transition: $swift-ease-out;
   font-size: 13px;
   line-height: 16px;
+  white-space: nowrap;
 
   &.md-deletable {
     position: relative;
@@ -22,7 +22,18 @@ $chip-icon-font: $chip-icon-size - 4px;
   &:focus,
   &:active {
     outline: none;
-    box-shadow: $material-shadow-2dp;
+
+    &:not(.md-disabled) {
+      cursor: pointer;
+      box-shadow: $material-shadow-2dp;
+    }
+  }
+
+  &.md-disabled {
+    .md-button {
+      pointer-events: none;
+      cursor: default;
+    }
   }
 
   .md-button.md-delete {
@@ -56,3 +67,21 @@ $chip-icon-font: $chip-icon-size - 4px;
     }
   }
 }
+
+.md-chips {
+  .md-chip {
+    margin-right: 8px;
+    margin-bottom: 4px;
+  }
+
+  .md-input-container {
+    min-height: 54px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .md-input {
+    width: 128px;
+    flex: 1;
+  }
+}

src/components/mdChips/mdChips.theme

@@ -2,13 +2,15 @@
   &.md-chip {
     background-color: #{'BACKGROUND-CONTRAST-0.12'};
 
-    &:hover,
-    &:focus {
-      background-color: #{'BACKGROUND-CONTRAST-0.54'};
-      color: #{'BACKGROUND-COLOR'};
-
-      .md-delete {
+    &:not(.md-disabled) {
+      &:hover,
+      &:focus {
+        background-color: #{'BACKGROUND-CONTRAST-0.54'};
         color: #{'BACKGROUND-COLOR'};
+
+        .md-delete {
+          color: #{'BACKGROUND-COLOR'};
+        }
       }
     }
 
@@ -20,4 +22,22 @@
       }
     }
   }
+
+  .md-chips.md-static {
+    .md-chip:not(.md-disabled) {
+      &:active {
+        box-shadow: none !important;
+      }
+
+      &:hover,
+      &:focus {
+        background-color: #{'BACKGROUND-CONTRAST-0.12'};
+        color: #{'BACKGROUND-CONTRAST-0.87'};
+
+        .md-delete {
+          color: #{'BACKGROUND-CONTRAST-0.87'};
+        }
+      }
+    }
+  }
 }

src/components/mdChips/mdChips.vue

@@ -1,8 +1,29 @@
 <template>
-  <div class="md-chips" :class="[themeClass, classes]" tabindex="0">
-    <div class="md-chips-content">
-      <slot></slot>
-    </div>
+  <div class="md-chips" :class="[themeClass, classes]">
+    <md-input-container @click.native="applyInputFocus">
+      <md-chip
+        v-for="chip in selectedChips"
+        :md-deletable="!mdStatic"
+        :disabled="disabled"
+        @delete="deleteChip(chip)">
+        <slot :value="chip"></slot>
+      </md-chip>
+
+      <md-input
+        v-show="!mdStatic"
+        v-model="currentChip"
+        :type="mdInputType"
+        :placeholder="mdInputPlaceholder"
+        :id="inputId"
+        :name="mdInputName"
+        :disabled="disabled"
+        @keyup.native.delete="deleteLastChip"
+        @keyup.native.enter="selectChip"
+        @keyup.native.186="selectChip"
+        tabindex="0"
+        ref="input">
+      </md-input>
+    </md-input-container>
   </div>
 </template>
 
@@ -10,20 +31,76 @@
 
 <script>
   import theme from '../../core/components/mdTheme/mixin';
+  import uniqueId from '../../core/utils/uniqueId';
 
   export default {
-    replace: false,
-    data: () => ({
-
-    }),
+    props: {
+      value: Array,
+      disabled: Boolean,
+      mdInputId: String,
+      mdInputName: String,
+      mdInputPlaceholder: String,
+      mdInputType: {
+        type: String,
+        default: 'text'
+      },
+      mdStatic: Boolean,
+      mdMax: Number
+    },
     mixins: [theme],
+    data() {
+      return {
+        currentChip: null,
+        selectedChips: this.value,
+        inputId: this.mdInputId || 'chips-' + uniqueId()
+      };
+    },
+    watch: {
+      value(value) {
+        this.selectedChips = value;
+      }
+    },
     computed: {
       classes() {
-
+        return {
+          'md-static': this.mdStatic,
+          'md-disabled': this.disabled
+        };
       }
     },
     methods: {
+      applyInputFocus() {
+        this.$nextTick(() => {
+          this.$refs.input.$el.focus();
+        });
+      },
+      selectChip() {
+        if (this.currentChip || this.mdMax && this.selectedChips.length < this.mdMax) {
+          const value = this.currentChip.trim();
 
+          if (this.selectedChips.indexOf(value) < 0) {
+            this.selectedChips.push(value);
+            this.currentChip = null;
+            this.$emit('input', this.selectedChips);
+            this.applyInputFocus();
+          }
+        }
+      },
+      deleteChip(chip) {
+        let index = this.selectedChips.indexOf(chip);
+
+        if (index >= 0) {
+          this.selectedChips.splice(index, 1);
+        }
+
+        this.applyInputFocus();
+      },
+      deleteLastChip() {
+        if (!this.currentChip) {
+          this.selectedChips.pop();
+          this.applyInputFocus();
+        }
+      }
     }
   };
 </script>

src/components/mdTabs/mdTabs.vue

@@ -137,7 +137,7 @@
         if (this.$refs.tabHeader) {
           let tabsWidth = this.$el.offsetWidth;
           let activeTab = this.$refs.tabHeader[this.activeTabNumber];
-          let left = activeTab.offsetLeft;
+          let left = activeTab ? activeTab.offsetLeft : 0;
           let right = tabsWidth - left - activeTab.offsetWidth;
 
           this.$refs.indicator.style.left = left + 'px';