mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-08 23:44:44 +00:00
Merge pull request #781 from Morgul/morgul-event-audit
Remove the need for `.native`
This commit is contained in:
Pablo Henrique
GitHub
commit
b5c210705c
31 changed files with 172 additions and 119 deletions
|
|
@ -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> -->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<md-theme :md-name="playground.theme">
|
||||
<md-bottom-bar md-shift>
|
||||
<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>
|
||||
</code-block>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -341,13 +341,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>
|
||||
</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="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>
|
||||
</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="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>
|
||||
</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="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>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<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>
|
||||
|
|
@ -1001,7 +1018,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>
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
</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>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="sass">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
</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>
|
||||
</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 @@
|
|||
<md-select>
|
||||
</md-input-container>
|
||||
|
||||
<div>Selected letters: {{ items }}</div>
|
||||
|
||||
|
||||
<div>Selected letters: {{ items }}</div>
|
||||
|
||||
|
||||
<md-input-container>
|
||||
<label for="users">Users</label>
|
||||
<md-select name="users" id="users" multiple v-model="users">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
|
||||
|
|
@ -166,7 +166,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>
|
||||
|
||||
|
|
@ -187,7 +187,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>
|
||||
</code-block>
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
|
||||
<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>
|
||||
</code-block>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -789,23 +789,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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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]();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue