re-added passthrough bindings for 'click' events.

Author: Morgul

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> -->

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>
 

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>

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">

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;

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;

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">

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">

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;

docs/src/pages/components/Sidenav.vue

@@ -120,15 +120,15 @@
           <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>
 
                 <h2 class="md-title">My App</h2>
               </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,15 +158,15 @@
             <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;
 
                   &lt;h2 class=&quot;md-title&quot;&gt;My App&lt;/h2&gt;
                 &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>