add mdChip editable (vuematerial#512)

Author: albanm

docs/src/pages/components/Chips.vue

@@ -28,6 +28,12 @@
                 <md-table-cell><code>Boolean</code></md-table-cell>
                 <md-table-cell>Enable delete button. Default: <code>false</code></md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-editable</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable click on the chip's content. Default: <code>false</code></md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
 
@@ -46,6 +52,11 @@
                 <md-table-cell>None</md-table-cell>
                 <md-table-cell>Triggered when delete button is clicked.</md-table-cell>
               </md-table-row>
+              <md-table-row>
+                <md-table-cell>edit</md-table-cell>
+                <md-table-cell>None</md-table-cell>
+                <md-table-cell>Triggered when the chip's content is clicked.</md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
@@ -136,12 +147,14 @@
           <div slot="demo">
             <md-chip>Marcos Moura</md-chip>
             <md-chip md-deletable>Luiza Ivanenko</md-chip>
+            <md-chip md-editable>Alban Mouton</md-chip>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
               &lt;md-chip&gt;Marcos Moura&lt;/md-chip&gt;
               &lt;md-chip md-deletable&gt;Luiza Ivanenko&lt;/md-chip&gt;
+              &lt;md-chip md-editable&gt;Alban Mouton&lt;/md-chip&gt;
             </code-block>
           </div>
         </example-box>

src/components/mdChips/mdChip.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="md-chip" :class="[themeClass, classes]" tabindex="0">
-    <slot></slot>
+    <div class="md-chip-container" @click="!disabled && mdEditable && $emit('edit')">
+      <slot></slot>
+    </div>
 
     <md-button
       class="md-icon-button md-dense md-delete"
@@ -20,14 +22,16 @@
     name: 'md-chip',
     props: {
       disabled: Boolean,
-      mdDeletable: Boolean
+      mdDeletable: Boolean,
+      mdEditable: Boolean
     },
     mixins: [theme],
     computed: {
       classes() {
         return {
           'md-deletable': this.mdDeletable,
-          'md-disabled': this.disabled
+          'md-disabled': this.disabled,
+          'md-editable': this.mdEditable
         };
       }
     }

src/components/mdChips/mdChips.scss

@@ -19,6 +19,12 @@ $chip-icon-font: $chip-icon-size - 4px;
     padding-right: 32px;
   }
 
+  &.md-editable {
+    .md-chip-container {
+      cursor: pointer;
+    }
+  }
+
   &:focus,
   &:active {
     outline: none;

src/components/mdChips/mdChips.theme

@@ -2,7 +2,7 @@
   &.md-chip {
     background-color: #{'BACKGROUND-CONTRAST-0.12'};
 
-    &.md-deletable {
+    &.md-deletable, &.md-editable {
       &:hover,
       &:focus {
         background-color: #{'BACKGROUND-CONTRAST-0.54'};

src/components/mdChips/mdChips.vue

@@ -4,8 +4,10 @@
       <md-chip
         v-for="chip in selectedChips"
         :md-deletable="!mdStatic"
+        :md-editable="!mdStatic"
         :disabled="disabled"
-        @delete="deleteChip(chip)">
+        @delete="deleteChip(chip)"
+        @edit="editChip(chip)">
         <slot :value="chip"></slot>
       </md-chip>
 
@@ -100,6 +102,17 @@
         this.$emit('change', this.selectedChips);
         this.applyInputFocus();
       },
+      editChip(chip) {
+        let index = this.selectedChips.indexOf(chip);
+
+        if (index >= 0) {
+          this.selectedChips.splice(index, 1);
+        }
+
+        this.currentChip = chip;
+        this.$emit('change', this.selectedChips);
+        this.applyInputFocus();
+      },
       deleteLastChip() {
         if (!this.currentChip) {
           this.selectedChips.pop();