From c9168ee98460f365e085e145c28c67abb2c113c2 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Tue, 27 Dec 2016 17:11:31 -0200
Subject: [PATCH] create chip documentation

---
 docs/src/pages/components/Chips.vue | 62 +++++++++++++++++++++++++++++
 src/components/mdChips/mdChips.vue  |  3 ++
 2 files changed, 65 insertions(+)

diff --git a/docs/src/pages/components/Chips.vue b/docs/src/pages/components/Chips.vue
index 8a9c651..92960d0 100644
--- a/docs/src/pages/components/Chips.vue
+++ b/docs/src/pages/components/Chips.vue
@@ -6,6 +6,50 @@
       </div>
 
       <div slot="api">
+        <api-table name="md-chip">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>disabled</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Disable the chip and prevent his actions. Default: <code>false</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-deletable</md-table-cell>
+                <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-body>
+          </md-table>
+
+          <md-table slot="events">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Value</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>delete</md-table-cell>
+                <md-table-cell>None</md-table-cell>
+                <md-table-cell>Triggered when delete button is clicked.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+
         <api-table name="md-chips">
           <md-table slot="properties">
             <md-table-header>
@@ -66,6 +110,24 @@
               </md-table-row>
             </md-table-body>
           </md-table>
+
+          <md-table slot="events">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Value</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>change</md-table-cell>
+                <md-table-cell>The selcted chips Array</md-table-cell>
+                <md-table-cell>Triggered when the chips is created or deleted.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
         </api-table>
       </div>
 
diff --git a/src/components/mdChips/mdChips.vue b/src/components/mdChips/mdChips.vue
index 31bf468..9175dae 100644
--- a/src/components/mdChips/mdChips.vue
+++ b/src/components/mdChips/mdChips.vue
@@ -85,6 +85,7 @@
             this.selectedChips.push(value);
             this.currentChip = null;
             this.$emit('input', this.selectedChips);
+            this.$emit('change', this.selectedChips);
             this.applyInputFocus();
           }
         }
@@ -96,11 +97,13 @@
           this.selectedChips.splice(index, 1);
         }
 
+        this.$emit('change', this.selectedChips);
         this.applyInputFocus();
       },
       deleteLastChip() {
         if (!this.currentChip) {
           this.selectedChips.pop();
+          this.$emit('change', this.selectedChips);
           this.applyInputFocus();
         }
       }