Merge pull request vuematerial#781 from Morgul/morgul-event-audit

Remove the need for `.native`

Author: Pablo Henrique

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

@@ -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>
@@ -123,7 +129,7 @@
             </code-block>
           </div>
         </example-box>
-        
+
         <example-box card-title="Using SVG">
           <div slot="demo">
             <div class="phone-viewport">
@@ -145,7 +151,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 +246,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 +258,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/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>
 

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

@@ -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">
@@ -858,7 +875,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 +893,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 +1018,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

@@ -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>
 
@@ -523,7 +529,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 +597,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;