From 7daa66daa7b7cf0e117814f9f2f9f79f2c66c2c9 Mon Sep 17 00:00:00 2001
From: "Christopher S. Case" <chris.case@g33xnexus.com>
Date: Mon, 22 May 2017 09:49:32 -0500
Subject: [PATCH 1/2] re-added passthrough bindings for `'click'` events.

---
 docs/src/components/ExampleBox.vue            |  2 +-
 docs/src/components/PageContent.vue           |  2 +-
 docs/src/pages/components/BottomBar.vue       | 20 +++++-----
 docs/src/pages/components/Dialog.vue          | 40 +++++++++----------
 docs/src/pages/components/ImageLoader.vue     |  8 ++--
 docs/src/pages/components/List.vue            |  6 +--
 docs/src/pages/components/Menu.vue            |  4 +-
 docs/src/pages/components/Progress.vue        |  2 +-
 docs/src/pages/components/Select.vue          | 14 +++----
 docs/src/pages/components/Sidenav.vue         | 12 +++---
 docs/src/pages/components/Snackbar.vue        |  4 +-
 docs/src/pages/components/Spinner.vue         |  6 +--
 docs/src/pages/components/Toolbar.vue         | 24 +++++------
 .../mdBottomBar/mdBottomBarItem.vue           | 10 +++--
 src/components/mdChips/mdChip.vue             |  2 +-
 src/components/mdChips/mdChips.vue            |  2 +-
 .../mdDialog/presets/mdDialogAlert.vue        |  2 +-
 .../mdDialog/presets/mdDialogConfirm.vue      |  4 +-
 .../mdDialog/presets/mdDialogPrompt.vue       |  4 +-
 .../mdInputContainer/mdAutocomplete.vue       |  2 +-
 .../mdInputContainer/mdInputContainer.vue     |  4 +-
 src/components/mdList/mdListItemButton.vue    |  2 +-
 src/components/mdList/mdListItemExpand.vue    |  5 ++-
 src/components/mdList/mdListItemLink.vue      |  2 +-
 src/components/mdMenu/mdMenuItem.vue          |  3 +-
 src/components/mdOnboarding/mdBoards.vue      | 10 ++---
 src/components/mdSelect/mdOption.vue          |  2 +-
 src/components/mdStepper/mdStep.vue           | 18 ++++-----
 src/components/mdStepper/mdStepper.vue        | 22 +++++-----
 src/components/mdTable/mdTablePagination.vue  |  4 +-
 30 files changed, 124 insertions(+), 118 deletions(-)

diff --git a/docs/src/components/ExampleBox.vue b/docs/src/components/ExampleBox.vue
index 400a770..c4ef9ea 100644
--- a/docs/src/components/ExampleBox.vue
+++ b/docs/src/components/ExampleBox.vue
@@ -17,7 +17,7 @@
         </md-tabs>
       </md-card-area>
 
-      <!-- <button type="button" class="md-codepen" @click.native="editOnCodepen">
+      <!-- <button type="button" class="md-codepen" @click="editOnCodepen">
         <img src="assets/codepen.png" alt="Edit on Codepen">
         <md-tooltip md-direction="left">Edit on codepen</md-tooltip>
       </button> -->
diff --git a/docs/src/components/PageContent.vue b/docs/src/components/PageContent.vue
index b9797c3..665b240 100644
--- a/docs/src/components/PageContent.vue
+++ b/docs/src/components/PageContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-content">
     <md-whiteframe md-tag="md-toolbar" md-elevation="1" class="main-header">
-      <md-button class="md-icon-button nav-trigger" @click.native="toggleSidenav">
+      <md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
         <md-icon>menu</md-icon>
       </md-button>
 
diff --git a/docs/src/pages/components/BottomBar.vue b/docs/src/pages/components/BottomBar.vue
index 2242640..4cd183e 100644
--- a/docs/src/pages/components/BottomBar.vue
+++ b/docs/src/pages/components/BottomBar.vue
@@ -123,7 +123,7 @@
             </code-block>
           </div>
         </example-box>
-        
+
         <example-box card-title="Using SVG">
           <div slot="demo">
             <div class="phone-viewport">
@@ -145,7 +145,7 @@
             </code-block>
           </div>
         </example-box>
-        
+
         <example-box card-title="Using Iconsets">
           <div slot="demo">
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"/>
@@ -240,10 +240,10 @@
           <div slot="demo">
             <div class="phone-viewport">
               <md-bottom-bar md-shift :md-theme="playground.theme">
-                <md-bottom-bar-item @click.native="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
-                <md-bottom-bar-item @click.native="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
-                <md-bottom-bar-item @click.native="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
-                <md-bottom-bar-item @click.native="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
+                <md-bottom-bar-item @click="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item @click="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item @click="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item @click="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
               </md-bottom-bar>
             </div>
           </div>
@@ -252,10 +252,10 @@
             <code-block lang="xml">
               &lt;md-theme :md-name=&quot;playground.theme&quot;&gt;
                 &lt;md-bottom-bar md-shift&gt;
-                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
                 &lt;/md-bottom-bar&gt;
               &lt;/div&gt;
             </code-block>
diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue
index 7340fd5..198479e 100644
--- a/docs/src/pages/components/Dialog.vue
+++ b/docs/src/pages/components/Dialog.vue
@@ -286,8 +286,8 @@
               <md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>
 
               <md-dialog-actions>
-                <md-button class="md-primary" @click.native="closeDialog('dialog1')">Cancel</md-button>
-                <md-button class="md-primary" @click.native="closeDialog('dialog1')">Ok</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog1')">Cancel</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog1')">Ok</md-button>
               </md-dialog-actions>
             </md-dialog>
 
@@ -304,13 +304,13 @@
               </md-dialog-content>
 
               <md-dialog-actions>
-                <md-button class="md-primary" @click.native="closeDialog('dialog2')">Cancel</md-button>
-                <md-button class="md-primary" @click.native="closeDialog('dialog2')">Create</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog2')">Cancel</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog2')">Create</md-button>
               </md-dialog-actions>
             </md-dialog>
 
-            <md-button class="md-primary md-raised" id="custom" @click.native="openDialog('dialog1')">Custom</md-button>
-            <md-button class="md-fab md-fab-bottom-right" id="fab" @click.native="openDialog('dialog2')">
+            <md-button class="md-primary md-raised" id="custom" @click="openDialog('dialog1')">Custom</md-button>
+            <md-button class="md-fab md-fab-bottom-right" id="fab" @click="openDialog('dialog2')">
               <md-icon>add</md-icon>
             </md-button>
           </div>
@@ -323,8 +323,8 @@
                 &lt;md-dialog-content&gt;Nemo, nobis necessitatibus ut illo, ducimus ex.&lt;/md-dialog-content&gt;
 
                 &lt;md-dialog-actions&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Ok&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Ok&lt;/md-button&gt;
                 &lt;/md-dialog-actions&gt;
               &lt;/md-dialog&gt;
 
@@ -341,13 +341,13 @@
                 &lt;/md-dialog-content&gt;
 
                 &lt;md-dialog-actions&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Create&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Create&lt;/md-button&gt;
                 &lt;/md-dialog-actions&gt;
               &lt;/md-dialog&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; id=&quot;custom&quot; @click.native=&quot;openDialog(&apos;dialog1&apos;)&quot;&gt;Custom&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot; id=&quot;fab&quot; @click.native=&quot;openDialog(&apos;dialog2&apos;)&quot;&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; id=&quot;custom&quot; @click=&quot;openDialog(&apos;dialog1&apos;)&quot;&gt;Custom&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot; id=&quot;fab&quot; @click=&quot;openDialog(&apos;dialog2&apos;)&quot;&gt;
                 &lt;md-icon&gt;add&lt;/md-icon&gt;
               &lt;/md-button&gt;
             </code-block>
@@ -391,8 +391,8 @@
               ref="dialog4">
             </md-dialog-alert>
 
-            <md-button class="md-primary md-raised" @click.native="openDialog('dialog3')">Alert</md-button>
-            <md-button class="md-primary md-raised" @click.native="openDialog('dialog4')">Alert with HTML</md-button>
+            <md-button class="md-primary md-raised" @click="openDialog('dialog3')">Alert</md-button>
+            <md-button class="md-primary md-raised" @click="openDialog('dialog4')">Alert with HTML</md-button>
           </div>
 
           <div slot="code">
@@ -413,8 +413,8 @@
                 ref=&quot;dialog4&quot;&gt;
               &lt;/md-dialog-alert&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog3&apos;)&quot;&gt;Alert&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog4&apos;)&quot;&gt;Alert with HTML&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog3&apos;)&quot;&gt;Alert&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog4&apos;)&quot;&gt;Alert with HTML&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
@@ -460,7 +460,7 @@
               ref="dialog5">
             </md-dialog-confirm>
 
-            <md-button class="md-primary md-raised" @click.native="openDialog('dialog5')">Confirm</md-button>
+            <md-button class="md-primary md-raised" @click="openDialog('dialog5')">Confirm</md-button>
           </div>
 
           <div slot="code">
@@ -475,7 +475,7 @@
                 ref=&quot;dialog5&quot;&gt;
               &lt;/md-dialog-confirm&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog5&apos;)&quot;&gt;Confirm&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog5&apos;)&quot;&gt;Confirm&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
@@ -523,7 +523,7 @@
               ref="dialog6">
             </md-dialog-prompt>
 
-            <md-button class="md-primary md-raised" @click.native="openDialog('dialog6')">Prompt</md-button>
+            <md-button class="md-primary md-raised" @click="openDialog('dialog6')">Prompt</md-button>
           </div>
 
           <div slot="code">
@@ -538,7 +538,7 @@
                 ref=&quot;dialog6&quot;&gt;
               &lt;/md-dialog-prompt&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog6&apos;)&quot;&gt;Prompt&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog6&apos;)&quot;&gt;Prompt&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
diff --git a/docs/src/pages/components/ImageLoader.vue b/docs/src/pages/components/ImageLoader.vue
index c56d480..870f522 100644
--- a/docs/src/pages/components/ImageLoader.vue
+++ b/docs/src/pages/components/ImageLoader.vue
@@ -30,8 +30,8 @@
       <div slot="example">
         <example-box card-title="Default">
           <div slot="demo">
-            <md-button class="md-primary md-raised" @click.native="loadImage">Load Image</md-button>
-            <md-button class="md-primary md-raised" @click.native="clearImage">Clear Image</md-button>
+            <md-button class="md-primary md-raised" @click="loadImage">Load Image</md-button>
+            <md-button class="md-primary md-raised" @click="clearImage">Clear Image</md-button>
 
             <div>
               <md-image :md-src="src"></md-image>
@@ -40,8 +40,8 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;loadImage&quot;&gt;Load Image&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;clearImage&quot;&gt;Clear Image&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;loadImage&quot;&gt;Load Image&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;clearImage&quot;&gt;Clear Image&lt;/md-button&gt;
 
               &lt;div&gt;
                 &lt;md-image :md-src=&quot;src&quot;&gt;&lt;/md-image&gt;
diff --git a/docs/src/pages/components/List.vue b/docs/src/pages/components/List.vue
index 9e11281..5890cfc 100644
--- a/docs/src/pages/components/List.vue
+++ b/docs/src/pages/components/List.vue
@@ -858,7 +858,7 @@
               <md-list>
                 <md-list-item>Plain Text</md-list-item>
                 <md-list-item target="_blank" href="https://google.com">Link</md-list-item>
-                <md-list-item @click.native="openAlert">Button</md-list-item>
+                <md-list-item @click="openAlert">Button</md-list-item>
                 <md-list-item>
                   <router-link to="/components/list">Router View</router-link>
                 </md-list-item>
@@ -876,7 +876,7 @@
                   &lt;md-list&gt;
                     &lt;md-list-item&gt;Plain Text&lt;/md-list-item&gt;
                     &lt;md-list-item target=&quot;_blank&quot; href=&quot;https://google.com&quot;&gt;Link&lt;/md-list-item&gt;
-                    &lt;md-list-item @click.native=&quot;openAlert&quot;&gt;Button&lt;/md-list-item&gt;
+                    &lt;md-list-item @click=&quot;openAlert&quot;&gt;Button&lt;/md-list-item&gt;
                     &lt;md-list-item&gt;
                         &lt;router-link to=&quot;/components/list&quot;&gt;Router View&lt;/router-link&gt;
                     &lt;/md-list-item&gt;
@@ -1001,7 +1001,7 @@
                 &lt;md-list&gt;
                   &lt;md-list-item&gt;Plain Text&lt;/md-list-item&gt;
                   &lt;md-list-item target="_blank" href="https://google.com"&gt;Link&lt;/md-list-item&gt;
-                  &lt;md-list-item @click.native="openAlert"&gt;Button&lt;/md-list-item&gt;
+                  &lt;md-list-item @click="openAlert"&gt;Button&lt;/md-list-item&gt;
                   &lt;md-list-item&gt;
                     &lt;router-link to="/components/list"&gt;Router View&lt;/router-link&gt;
                   &lt;/md-list-item&gt;
diff --git a/docs/src/pages/components/Menu.vue b/docs/src/pages/components/Menu.vue
index af61a55..f7f6309 100644
--- a/docs/src/pages/components/Menu.vue
+++ b/docs/src/pages/components/Menu.vue
@@ -523,7 +523,7 @@
               </md-menu-content>
             </md-menu>
 
-            <md-button class="md-raised md-primary" @click.native="$refs.menu.open">Open contact card</md-button>
+            <md-button class="md-raised md-primary" @click="$refs.menu.open">Open contact card</md-button>
           </div>
 
           <div slot="code">
@@ -591,7 +591,7 @@
                 &lt;/md-menu-content&gt;
               &lt;/md-menu&gt;
 
-              &lt;md-button class=&quot;md-raised md-primary&quot; @click.native=&quot;$refs.menu.open&quot;&gt;Open contact card&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-primary&quot; @click=&quot;$refs.menu.open&quot;&gt;Open contact card&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="sass">
diff --git a/docs/src/pages/components/Progress.vue b/docs/src/pages/components/Progress.vue
index f0767be..00a4885 100644
--- a/docs/src/pages/components/Progress.vue
+++ b/docs/src/pages/components/Progress.vue
@@ -47,7 +47,7 @@
               <md-progress class="md-warn" :md-progress="progress" v-if="transition"></md-progress>
             </div>
 
-            <md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
+            <md-button class="md-primary md-raised" @click="restartProgress">Restart</md-button>
           </div>
 
           <div slot="code">
diff --git a/docs/src/pages/components/Select.vue b/docs/src/pages/components/Select.vue
index 0f26d0c..33deef7 100644
--- a/docs/src/pages/components/Select.vue
+++ b/docs/src/pages/components/Select.vue
@@ -209,7 +209,7 @@
               </md-input-container>
             </div>
 
-            <md-button class="md-raised md-primary" @click.native="setPulpFiction">Set Pulp Fiction</md-button>
+            <md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
           </div>
 
           <div slot="code">
@@ -279,7 +279,7 @@
                 &lt;/md-input-container&gt;
               &lt;/div&gt;
 
-              &lt;md-button class=&quot;md-raised md-primary&quot; @click.native=&quot;setPulpFiction&quot;&gt;Set Pulp Fiction&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-primary&quot; @click=&quot;setPulpFiction&quot;&gt;Set Pulp Fiction&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
@@ -322,7 +322,7 @@
             <div>Selected letters: {{ items }}</div>
             <br/>
             <br/>
-            
+
             <div class="field-group">
               <md-input-container>
                 <label for="users">Multiselect with subheaders</label>
@@ -347,7 +347,7 @@
                 </md-select>
               </md-input-container>
             </div>
-            
+
             <div>Selected users: {{ users }}</div>
 
           </div>
@@ -365,9 +365,9 @@
                 &lt;md-select&gt;
               &lt;/md-input-container&gt;
 
-              &lt;div&gt;Selected letters: {{ items }}&lt;/div&gt;              
-              
-              
+              &lt;div&gt;Selected letters: {{ items }}&lt;/div&gt;
+
+
               &lt;md-input-container&gt;
                 &lt;label for=&quot;users&quot;&gt;Users&lt;/label&gt;
                 &lt;md-select name=&quot;users&quot; id=&quot;users&quot; multiple v-model=&quot;users&quot;&gt;
diff --git a/docs/src/pages/components/Sidenav.vue b/docs/src/pages/components/Sidenav.vue
index c9f9716..cdeb953 100644
--- a/docs/src/pages/components/Sidenav.vue
+++ b/docs/src/pages/components/Sidenav.vue
@@ -120,7 +120,7 @@
           <div slot="demo">
             <div class="phone-viewport">
               <md-toolbar>
-                <md-button class="md-icon-button" @click.native="toggleLeftSidenav">
+                <md-button class="md-icon-button" @click="toggleLeftSidenav">
                   <md-icon>menu</md-icon>
                 </md-button>
 
@@ -128,7 +128,7 @@
               </md-toolbar>
 
               <div>
-                <md-button class="md-raised md-accent" @click.native="toggleRightSidenav">Toggle right</md-button>
+                <md-button class="md-raised md-accent" @click="toggleRightSidenav">Toggle right</md-button>
                 <p>Open console to see the events</p>
               </div>
 
@@ -149,7 +149,7 @@
                   </div>
                 </md-toolbar>
 
-                <md-button class="md-raised md-accent" @click.native="closeRightSidenav">Close</md-button>
+                <md-button class="md-raised md-accent" @click="closeRightSidenav">Close</md-button>
               </md-sidenav>
             </div>
           </div>
@@ -158,7 +158,7 @@
             <code-block lang="xml">
               &lt;div class=&quot;phone-viewport&quot;&gt;
                 &lt;md-toolbar&gt;
-                  &lt;md-button class=&quot;md-icon-button&quot; @click.native=&quot;toggleLeftSidenav&quot;&gt;
+                  &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;toggleLeftSidenav&quot;&gt;
                     &lt;md-icon&gt;menu&lt;/md-icon&gt;
                   &lt;/md-button&gt;
 
@@ -166,7 +166,7 @@
                 &lt;/md-toolbar&gt;
 
                 &lt;div&gt;
-                  &lt;md-button class=&quot;md-raised md-accent&quot; @click.native=&quot;toggleRightSidenav&quot;&gt;Toggle right&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-raised md-accent&quot; @click=&quot;toggleRightSidenav&quot;&gt;Toggle right&lt;/md-button&gt;
                   &lt;p&gt;Open console to see the events&lt;/p&gt;
                 &lt;/div&gt;
 
@@ -187,7 +187,7 @@
                     &lt;/div&gt;
                   &lt;/md-toolbar&gt;
 
-                  &lt;md-button class=&quot;md-raised md-accent&quot; @click.native=&quot;closeRightSidenav&quot;&gt;Close&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-raised md-accent&quot; @click=&quot;closeRightSidenav&quot;&gt;Close&lt;/md-button&gt;
                 &lt;/md-sidenav&gt;
               &lt;/div&gt;
             </code-block>
diff --git a/docs/src/pages/components/Snackbar.vue b/docs/src/pages/components/Snackbar.vue
index f3bb0fd..eb11f93 100644
--- a/docs/src/pages/components/Snackbar.vue
+++ b/docs/src/pages/components/Snackbar.vue
@@ -107,7 +107,7 @@
 
               <md-snackbar :md-position="vertical + ' ' + horizontal" ref="snackbar" :md-duration="duration">
                 <span>Connection timeout. Showing limited messages.</span>
-                <md-button class="md-accent" md-theme="light-blue" @click.native="$refs.snackbar.close()">Retry</md-button>
+                <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar.close()">Retry</md-button>
               </md-snackbar>
             </form>
           </div>
@@ -140,7 +140,7 @@
 
                 &lt;md-snackbar :md-position=&quot;vertical + &#039; &#039; + horizontal&quot; ref=&quot;snackbar&quot; :md-duration=&quot;duration&quot;&gt;
                   &lt;span&gt;Connection timeout. Showing limited messages.&lt;/span&gt;
-                  &lt;md-button class=&quot;md-accent&quot; md-theme=&quot;light-blue&quot; @click.native=&quot;$refs.snackbar.close()&quot;&gt;Retry&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-accent&quot; md-theme=&quot;light-blue&quot; @click=&quot;$refs.snackbar.close()&quot;&gt;Retry&lt;/md-button&gt;
                 &lt;/md-snackbar&gt;
               &lt;/form&gt;
             </code-block>
diff --git a/docs/src/pages/components/Spinner.vue b/docs/src/pages/components/Spinner.vue
index dd35c96..1177eaa 100644
--- a/docs/src/pages/components/Spinner.vue
+++ b/docs/src/pages/components/Spinner.vue
@@ -53,7 +53,7 @@
       <div slot="example">
         <example-box card-title="Determinate">
           <div class="spinner-demo" slot="demo">
-            <md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
+            <md-button class="md-primary md-raised" @click="restartProgress">Restart</md-button>
             <md-spinner :md-progress="progress" v-if="transition"></md-spinner>
             <md-spinner :md-progress="progress" v-if="transition" class="md-accent"></md-spinner>
             <md-spinner :md-progress="progress" v-if="transition" class="md-warn"></md-spinner>
@@ -111,7 +111,7 @@
         <example-box card-title="Complete Example">
           <div slot="demo">
             <md-theme class="complete-example" md-name="orange">
-              <md-button class="md-fab" @click.native="restartProgress" :class="{ 'md-primary': done }">
+              <md-button class="md-fab" @click="restartProgress" :class="{ 'md-primary': done }">
                 <md-icon v-if="!done">cloud_upload</md-icon>
                 <md-icon v-if="done">done</md-icon>
               </md-button>
@@ -123,7 +123,7 @@
           <div slot="code">
             <code-block lang="xml">
               &lt;md-theme class=&quot;complete-example&quot; md-name=&quot;orange&quot;&gt;
-                &lt;md-button class=&quot;md-fab&quot; @click.native=&quot;restartProgress&quot; :class=&quot;{ &#039;md-primary&#039;: done }&quot;&gt;
+                &lt;md-button class=&quot;md-fab&quot; @click=&quot;restartProgress&quot; :class=&quot;{ &#039;md-primary&#039;: done }&quot;&gt;
                   &lt;md-icon v-if=&quot;!done&quot;&gt;cloud_upload&lt;/md-icon&gt;
                   &lt;md-icon v-if=&quot;done&quot;&gt;done&lt;/md-icon&gt;
                 &lt;/md-button&gt;
diff --git a/docs/src/pages/components/Toolbar.vue b/docs/src/pages/components/Toolbar.vue
index 55d9b01..f57f967 100644
--- a/docs/src/pages/components/Toolbar.vue
+++ b/docs/src/pages/components/Toolbar.vue
@@ -420,7 +420,7 @@
             <div class="phone-viewport complete-example">
               <md-whiteframe md-tag="md-toolbar" md-elevation="2" md-theme="light-blue" class="md-large">
                 <div class="md-toolbar-container">
-                  <md-button class="md-icon-button" @click.native="$refs.sidenav.toggle()">
+                  <md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
                     <md-icon>menu</md-icon>
                   </md-button>
 
@@ -590,23 +590,23 @@
                 </md-toolbar>
 
                 <md-list>
-                  <md-list-item @click.native="$refs.sidenav.toggle()" class="md-primary">
+                  <md-list-item @click="$refs.sidenav.toggle()" class="md-primary">
                     <md-icon>insert_drive_file</md-icon> <span>My files</span>
                   </md-list-item>
 
-                  <md-list-item @click.native="$refs.sidenav.toggle()">
+                  <md-list-item @click="$refs.sidenav.toggle()">
                     <md-icon>people</md-icon> <span>Shared with me</span>
                   </md-list-item>
 
-                  <md-list-item @click.native="$refs.sidenav.toggle()">
+                  <md-list-item @click="$refs.sidenav.toggle()">
                     <md-icon>access_time</md-icon> <span>Recent</span>
                   </md-list-item>
 
-                  <md-list-item @click.native="$refs.sidenav.toggle()">
+                  <md-list-item @click="$refs.sidenav.toggle()">
                     <md-icon>start</md-icon> <span>Starred</span>
                   </md-list-item>
 
-                  <md-list-item @click.native="$refs.sidenav.toggle()">
+                  <md-list-item @click="$refs.sidenav.toggle()">
                     <md-icon>delete</md-icon> <span>Trash</span>
                   </md-list-item>
                 </md-list>
@@ -619,7 +619,7 @@
               &lt;div class=&quot;phone-viewport complete-example&quot;&gt;
                 &lt;md-whiteframe md-tag=&quot;md-toolbar&quot; md-elevation=&quot;2&quot; md-theme=&quot;light-blue&quot; class=&quot;md-large&quot;&gt;
                   &lt;div class=&quot;md-toolbar-container&quot;&gt;
-                    &lt;md-button class=&quot;md-icon-button&quot; @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;menu&lt;/md-icon&gt;
                     &lt;/md-button&gt;
 
@@ -789,23 +789,23 @@
                   &lt;/md-toolbar&gt;
 
                   &lt;md-list&gt;
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
                       &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt; &lt;span&gt;My files&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;people&lt;/md-icon&gt; &lt;span&gt;Shared with me&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;access_time&lt;/md-icon&gt; &lt;span&gt;Recent&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;start&lt;/md-icon&gt; &lt;span&gt;Starred&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;delete&lt;/md-icon&gt; &lt;span&gt;Trash&lt;/span&gt;
                     &lt;/md-list-item&gt;
                   &lt;/md-list&gt;
diff --git a/src/components/mdBottomBar/mdBottomBarItem.vue b/src/components/mdBottomBar/mdBottomBarItem.vue
index c9ca8b7..6f941db 100644
--- a/src/components/mdBottomBar/mdBottomBarItem.vue
+++ b/src/components/mdBottomBar/mdBottomBarItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-if="href">
+  <a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive(true, $event)" v-if="href">
     <md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
 
     <md-ink-ripple :md-disabled="disabled" />
@@ -9,7 +9,7 @@
     </span>
   </a>
 
-  <button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-else>
+  <button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive(true, $event)" v-else>
     <md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
 
     <md-ink-ripple :md-disabled="disabled" />
@@ -49,10 +49,14 @@
       }
     },
     methods: {
-      setActive(active) {
+      setActive(active, $event) {
         if (active) {
           this.$parent.setActive(this);
         }
+
+        if ($event) {
+          this.$emit('click', $event);
+        }
       }
     },
     mounted() {
diff --git a/src/components/mdChips/mdChip.vue b/src/components/mdChips/mdChip.vue
index 02166de..3a3ae65 100644
--- a/src/components/mdChips/mdChip.vue
+++ b/src/components/mdChips/mdChip.vue
@@ -7,7 +7,7 @@
     <md-button
       class="md-icon-button md-dense md-delete"
       v-if="mdDeletable"
-      @click.native="!disabled && $emit('delete')"
+      @click="!disabled && $emit('delete')"
       @keyup.native.delete="!disabled && $emit('delete')"
       tabindex="-1">
       <md-icon class="md-icon-delete">cancel</md-icon>
diff --git a/src/components/mdChips/mdChips.vue b/src/components/mdChips/mdChips.vue
index 17e9f34..2831f62 100644
--- a/src/components/mdChips/mdChips.vue
+++ b/src/components/mdChips/mdChips.vue
@@ -1,5 +1,5 @@
 <template>
-  <md-input-container class="md-chips" :class="[themeClass, classes]" @click.native="applyInputFocus">
+  <md-input-container class="md-chips" :class="[themeClass, classes]" @click="applyInputFocus">
     <md-chip
       v-for="chip in selectedChips"
       :key="chip"
diff --git a/src/components/mdDialog/presets/mdDialogAlert.vue b/src/components/mdDialog/presets/mdDialogAlert.vue
index 3099da6..969cbeb 100644
--- a/src/components/mdDialog/presets/mdDialogAlert.vue
+++ b/src/components/mdDialog/presets/mdDialogAlert.vue
@@ -6,7 +6,7 @@
     <md-dialog-content v-else>{{ mdContent }}</md-dialog-content>
 
     <md-dialog-actions>
-      <md-button class="md-primary" @click.native="close()">{{ mdOkText }}</md-button>
+      <md-button class="md-primary" @click="close()">{{ mdOkText }}</md-button>
     </md-dialog-actions>
   </md-dialog>
 </template>
diff --git a/src/components/mdDialog/presets/mdDialogConfirm.vue b/src/components/mdDialog/presets/mdDialogConfirm.vue
index 3f58cf6..da537ca 100644
--- a/src/components/mdDialog/presets/mdDialogConfirm.vue
+++ b/src/components/mdDialog/presets/mdDialogConfirm.vue
@@ -6,8 +6,8 @@
     <md-dialog-content v-else>{{ mdContent }}</md-dialog-content>
 
     <md-dialog-actions>
-      <md-button class="md-primary" @click.native="close('cancel')">{{ mdCancelText }}</md-button>
-      <md-button class="md-primary" @click.native="close('ok')">{{ mdOkText }}</md-button>
+      <md-button class="md-primary" @click="close('cancel')">{{ mdCancelText }}</md-button>
+      <md-button class="md-primary" @click="close('ok')">{{ mdOkText }}</md-button>
     </md-dialog-actions>
   </md-dialog>
 </template>
diff --git a/src/components/mdDialog/presets/mdDialogPrompt.vue b/src/components/mdDialog/presets/mdDialogPrompt.vue
index 59039b1..0166ae6 100644
--- a/src/components/mdDialog/presets/mdDialogPrompt.vue
+++ b/src/components/mdDialog/presets/mdDialogPrompt.vue
@@ -19,8 +19,8 @@
     </md-dialog-content>
 
     <md-dialog-actions>
-      <md-button class="md-primary" @click.native="close('cancel')">{{ mdCancelText }}</md-button>
-      <md-button class="md-primary" @click.native="confirmValue">{{ mdOkText }}</md-button>
+      <md-button class="md-primary" @click="close('cancel')">{{ mdCancelText }}</md-button>
+      <md-button class="md-primary" @click="confirmValue">{{ mdOkText }}</md-button>
     </md-dialog-actions>
   </md-dialog>
 </template>
diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index e699982..61a75d4 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -25,7 +25,7 @@
           v-for="item in items"
           :key="item"
           @keyup.enter="hit(item)"
-          @click.native="hit(item)">
+          @click="hit(item)">
           {{ item[printAttribute] }}
         </md-menu-item>
       </md-menu-content>
diff --git a/src/components/mdInputContainer/mdInputContainer.vue b/src/components/mdInputContainer/mdInputContainer.vue
index ad491b7..aa3ef1a 100644
--- a/src/components/mdInputContainer/mdInputContainer.vue
+++ b/src/components/mdInputContainer/mdInputContainer.vue
@@ -4,11 +4,11 @@
 
     <span class="md-count" v-if="enableCounter">{{ inputLength }} / {{ counterLength }}</span>
 
-    <md-button class="md-icon-button md-toggle-password" @click.native="togglePasswordType" v-if="mdHasPassword">
+    <md-button class="md-icon-button md-toggle-password" @click="togglePasswordType" v-if="mdHasPassword">
       <md-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</md-icon>
     </md-button>
 
-    <md-button class="md-icon-button md-clear-input" @click.native="clearInput" v-if="mdClearable && hasValue">
+    <md-button class="md-icon-button md-clear-input" @click="clearInput" v-if="mdClearable && hasValue">
       <md-icon>clear</md-icon>
     </md-button>
   </div>
diff --git a/src/components/mdList/mdListItemButton.vue b/src/components/mdList/mdListItemButton.vue
index 53cf723..3886607 100644
--- a/src/components/mdList/mdListItemButton.vue
+++ b/src/components/mdList/mdListItemButton.vue
@@ -4,7 +4,7 @@
       <slot></slot>
     </div>
 
-    <md-button type="button" class="md-button-ghost" :disabled="disabled"></md-button>
+    <md-button type="button" class="md-button-ghost" @click="$emit('click', $event)" :disabled="disabled"></md-button>
   </li>
 </template>
 
diff --git a/src/components/mdList/mdListItemExpand.vue b/src/components/mdList/mdListItemExpand.vue
index 9fb449b..a2cd850 100644
--- a/src/components/mdList/mdListItemExpand.vue
+++ b/src/components/mdList/mdListItemExpand.vue
@@ -6,7 +6,7 @@
       <md-icon class="md-list-expand-indicator">keyboard_arrow_down</md-icon>
     </div>
 
-    <md-button type="button" class="md-button-ghost" @click.native="toggleExpandList" :disabled="disabled"></md-button>
+    <md-button type="button" class="md-button-ghost" @click="toggleExpandList" :disabled="disabled"></md-button>
 
     <div class="md-list-expand" ref="expand" :class="expandClasses" :style="expandStyles">
       <slot name="expand"></slot>
@@ -67,13 +67,14 @@
           });
         });
       },
-      toggleExpandList() {
+      toggleExpandList($event) {
         if (!this.mdExpandMultiple) {
           this.resetSiblings();
         }
 
         this.calculatePadding();
         this.active = !this.active;
+        this.$emit('click', $event);
       },
       recalculateAfterChange() {
         this.transitionOff = true;
diff --git a/src/components/mdList/mdListItemLink.vue b/src/components/mdList/mdListItemLink.vue
index b59707f..6af936f 100644
--- a/src/components/mdList/mdListItemLink.vue
+++ b/src/components/mdList/mdListItemLink.vue
@@ -1,6 +1,6 @@
 <template>
   <li class="md-list-item" :class="classes">
-    <a class="md-list-item-container md-button" :href="href" :target="target" :disabled="disabled">
+    <a class="md-list-item-container md-button" :href="href" :target="target" @click="$emit('click', $event)" :disabled="disabled">
       <slot />
     </a>
 
diff --git a/src/components/mdMenu/mdMenuItem.vue b/src/components/mdMenu/mdMenuItem.vue
index b3bb535..8fdce2b 100644
--- a/src/components/mdMenu/mdMenuItem.vue
+++ b/src/components/mdMenu/mdMenuItem.vue
@@ -1,7 +1,7 @@
 <template>
   <md-list-item
     class="md-menu-item"
-    @click.native="close"
+    @click="close"
     :class="classes"
     :href="href"
     :target="target"
@@ -62,6 +62,7 @@
             this.parentContent.close();
           }
 
+          this.$emit('click', $event);
           this.$emit('selected', $event);
         }
       }
diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue
index ff3483d..9e15812 100644
--- a/src/components/mdOnboarding/mdBoards.vue
+++ b/src/components/mdOnboarding/mdBoards.vue
@@ -13,7 +13,7 @@
 
       <md-button
         v-if="mdControls"
-        @click.native="movePrevBoard()">
+        @click="movePrevBoard()">
         <div class="md-board-header-container">
           <md-icon class="md-control">chevron_left</md-icon>
         </div>
@@ -34,12 +34,12 @@
           <md-icon>fiber_manual_record</md-icon>
         </div>
       </button>
-      
+
       <span style="flex: 1"></span>
 
       <md-button
         v-if="mdControls"
-        @click.native="moveNextBoard()">
+        @click="moveNextBoard()">
         <div class="md-board-header-container">
           <md-icon class="md-control">chevron_right</md-icon>
         </div>
@@ -277,7 +277,7 @@
           this.setActiveBoard(this.boardList[target], true);
         } else if (this.mdInfinite) {
           let firstBoard = Object.keys(this.boardList)[0];
-  
+
           this.setActiveBoard(this.boardList[firstBoard], true);
         }
       },
@@ -306,7 +306,7 @@
           const action = difference > 0
             ? 'moveNextBoard'
             : 'movePrevBoard';
-  
+
           if (Math.abs(difference) > this.mdSwipeDistance) {
             this[action]();
           }
diff --git a/src/components/mdSelect/mdOption.vue b/src/components/mdSelect/mdOption.vue
index ff79aa2..d401be9 100644
--- a/src/components/mdSelect/mdOption.vue
+++ b/src/components/mdSelect/mdOption.vue
@@ -2,7 +2,7 @@
   <md-menu-item
     class="md-option"
     :class="classes"
-    @click.native="selectOption"
+    @click="selectOption"
     tabindex="-1">
     <md-checkbox class="md-primary" v-model="check" v-if="parentSelect.multiple">
       <span ref="item">
diff --git a/src/components/mdStepper/mdStep.vue b/src/components/mdStepper/mdStep.vue
index 1ded96a..dcc3838 100644
--- a/src/components/mdStepper/mdStep.vue
+++ b/src/components/mdStepper/mdStep.vue
@@ -3,7 +3,7 @@
     <md-step-header
       v-if="vertical"
       :step="getStepData()"
-      @click.native="setActiveStep()">
+      @click="setActiveStep()">
     </md-step-header>
     <div class="md-step-content" v-if="!vertical || (vertical && isCurrentStep)">
       <slot></slot>
@@ -102,17 +102,17 @@
         if (this.index === 0) {
           return false;
         }
-  
+
         if (!this.parentStepper) {
           return false;
         }
-  
+
         var previousStep = this.parentStepper.getPreviousStep(this.stepId);
-  
+
         if (previousStep !== undefined && !previousStep.editable) {
           return false;
         }
-  
+
         return true;
       },
       continueText() {
@@ -133,7 +133,7 @@
         if (this.vertical) {
           return {};
         }
-  
+
         return {
           width: this.width,
           left: this.left
@@ -172,16 +172,16 @@
     },
     mounted() {
       let stepData = this.getStepData();
-  
+
       this.parentStepper = getClosestVueParent(this.$parent, 'md-stepper');
-  
+
       if (!this.parentStepper) {
         throw new Error('You must wrap the md-step in a md-stepper');
       }
 
       this.mounted = true;
       this.parentStepper.updateStep(stepData);
-  
+
       if (this.mdActive) {
         this.parentStepper.setActiveStep(stepData);
       }
diff --git a/src/components/mdStepper/mdStepper.vue b/src/components/mdStepper/mdStepper.vue
index 6844af8..4bc163b 100644
--- a/src/components/mdStepper/mdStepper.vue
+++ b/src/components/mdStepper/mdStepper.vue
@@ -7,7 +7,7 @@
           :key="step.id"
           :step="step"
           :md-alternate-labels="mdAlternateLabels"
-          @click.native="setActiveStep(step)">
+          @click="setActiveStep(step)">
         </md-step-header>
       </md-step-header-container>
     </md-whiteframe>
@@ -77,32 +77,32 @@
         if (currentIndex === this.stepList.length) {
           return undefined;
         }
-  
+
         var nextStepId = Object.keys(this.stepList)[currentIndex + 1];
         var nextStep = this.stepList[nextStepId];
-  
+
         return nextStep;
       },
       getPreviousStep(id) {
         var currentIndex = this.getStepIndex(id);
-  
+
         if (currentIndex === 0) {
           return undefined;
         }
 
         var previousStepId = Object.keys(this.stepList)[currentIndex - 1];
         var previousStep = this.stepList[previousStepId];
-  
+
         return previousStep;
       },
       getStepsCount() {
         const idList = Object.keys(this.stepList);
-  
+
         return idList.length;
       },
       getStepIndex(id) {
         const idList = Object.keys(this.stepList);
-  
+
         return idList.indexOf(id);
       },
       registerStep(stepData) {
@@ -111,7 +111,7 @@
       moveNextStep() {
         if (this.activeStepNumber < this.getStepsCount() - 1) {
           var nextStep = this.getNextStep(this.activeStep);
-  
+
           this.setActiveStep(nextStep);
         } else {
           this.$emit('completed');
@@ -120,7 +120,7 @@
       movePreviousStep() {
         if (this.activeStepNumber > 0 && this.activeStepNumber < this.getStepsCount()) {
           var prevStep = this.getPreviousStep(this.activeStep);
-  
+
           this.setActiveStep(prevStep);
         }
       },
@@ -128,7 +128,7 @@
         if (this.activeStepNumber > this.getStepIndex(stepData.id) && !stepData.editable) {
           return;
         }
-  
+
         this.activeStep = stepData.id;
         this.activeStepNumber = this.getStepIndex(this.activeStep);
         this.calculatePosition();
@@ -186,7 +186,7 @@
         this.$nextTick(() => {
           if (!this.mdVertical && Object.keys(this.stepList).length) {
             let height = this.stepList[this.activeStep].ref.$el.offsetHeight;
-  
+
             this.contentHeight = height + 'px';
           } else {
             this.contentHeight = 'initial';
diff --git a/src/components/mdTable/mdTablePagination.vue b/src/components/mdTable/mdTablePagination.vue
index c3063f3..5fa47d3 100644
--- a/src/components/mdTable/mdTablePagination.vue
+++ b/src/components/mdTable/mdTablePagination.vue
@@ -8,11 +8,11 @@
 
     <span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ mdTotal }}</span>
 
-    <md-button class="md-icon-button md-table-pagination-previous" @click.native="previousPage" :disabled="currentPage === 1">
+    <md-button class="md-icon-button md-table-pagination-previous" @click="previousPage" :disabled="currentPage === 1">
       <md-icon>keyboard_arrow_left</md-icon>
     </md-button>
 
-    <md-button class="md-icon-button md-table-pagination-next" @click.native="nextPage" :disabled="shouldDisable">
+    <md-button class="md-icon-button md-table-pagination-next" @click="nextPage" :disabled="shouldDisable">
       <md-icon>keyboard_arrow_right</md-icon>
     </md-button>
   </div>

From f2c5873cd95deab02d3c0753814a7003aa78a994 Mon Sep 17 00:00:00 2001
From: "Christopher S. Case" <chris.case@g33xnexus.com>
Date: Tue, 20 Jun 2017 16:54:42 -0500
Subject: [PATCH 2/2] updated documentation.

---
 docs/src/pages/components/BottomBar.vue |  6 ++++++
 docs/src/pages/components/Buttons.vue   | 18 ++++++++++++++++++
 docs/src/pages/components/List.vue      | 19 ++++++++++++++++++-
 docs/src/pages/components/Menu.vue      |  6 ++++++
 4 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/BottomBar.vue b/docs/src/pages/components/BottomBar.vue
index 4cd183e..4af946e 100644
--- a/docs/src/pages/components/BottomBar.vue
+++ b/docs/src/pages/components/BottomBar.vue
@@ -46,6 +46,12 @@
                 <md-table-cell>Receive the item index</md-table-cell>
                 <md-table-cell>Triggered when an item is activated.</md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>click</md-table-cell>
+                <md-table-cell>Receive the click event</md-table-cell>
+                <md-table-cell>Triggered when an item is clicked.</md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
diff --git a/docs/src/pages/components/Buttons.vue b/docs/src/pages/components/Buttons.vue
index f069125..13d67d1 100644
--- a/docs/src/pages/components/Buttons.vue
+++ b/docs/src/pages/components/Buttons.vue
@@ -108,6 +108,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>click</md-table-cell>
+                <md-table-cell>Receive the click event</md-table-cell>
+                <md-table-cell>Triggered when an item is clicked.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
         </api-table>
       </div>
 
diff --git a/docs/src/pages/components/List.vue b/docs/src/pages/components/List.vue
index 5890cfc..e7fb1fe 100644
--- a/docs/src/pages/components/List.vue
+++ b/docs/src/pages/components/List.vue
@@ -70,7 +70,6 @@
                 <md-table-cell><code>Boolean</code></md-table-cell>
                 <md-table-cell>Disable the item and prevent its actions. Default <code>false</code></md-table-cell>
               </md-table-row>
-              </md-table-row>
 
               <md-table-row>
                 <md-table-cell>md-expand-multiple</md-table-cell>
@@ -95,6 +94,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>click</md-table-cell>
+                <md-table-cell>Receive the click event</md-table-cell>
+                <md-table-cell>Triggered when an item is clicked.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
         </api-table>
 
         <api-table name="md-list-expand">
diff --git a/docs/src/pages/components/Menu.vue b/docs/src/pages/components/Menu.vue
index f7f6309..5ea39cc 100644
--- a/docs/src/pages/components/Menu.vue
+++ b/docs/src/pages/components/Menu.vue
@@ -78,6 +78,12 @@
                 <md-table-cell>None</md-table-cell>
                 <md-table-cell>Triggered when the menu starts to close.</md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>click</md-table-cell>
+                <md-table-cell>Receive the click event</md-table-cell>
+                <md-table-cell>Triggered when an item is clicked.</md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>