Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-04 13:34:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

create dialog documentation with the new template

Browse source
This commit is contained in:
Marcos Moura 2016-11-25 17:10:40 -02:00
parent 495c3b77bf
commit 19db664663
10 changed files with 614 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
docs/src/App.vue
View file

@ -184,7 +184,7 @@
flex: 1;
transition: $swift-ease-out;
@media (min-width: 1280px) {
@media (min-width: 1281px) {
padding-left: $sizebar-size;
}
}
@ -194,7 +194,7 @@
z-index: 3;
.md-button:first-child {
@media (min-width: 1280px) {
@media (min-width: 1281px) {
display: none;
}
}
@ -208,13 +208,13 @@
.page-title {
margin-left: 0;
@media (min-width: 1280px) {
@media (min-width: 1281px) {
margin-left: 8px;
}
}
span:not(.page-title) {
@media (min-width: 1280px) {
@media (min-width: 1281px) {
display: none;
}
}
@ -227,7 +227,7 @@
display: flex;
flex-flow: column;
@media (min-width: 1280px) {
@media (min-width: 1281px) {
top: 0;
pointer-events: auto;
transform: translate3d(0, 0, 0);
@ -236,7 +236,7 @@
}
.md-backdrop {
@media (min-width: 1280px) {
@media (min-width: 1281px) {
opacity: 0;
pointer-events: none;
}
@ -309,7 +309,7 @@
left: 0;
transition: $swift-ease-out;
@media (min-width: 1280px) {
@media (min-width: 1281px) {
left: 280px;
}
}

6
docs/src/components/DocsComponent.vue
View file

@ -24,6 +24,8 @@
<style lang="scss" scoped>
.component-docs {
position: relative;
z-index: 1;
display: flex;
@media (max-width: 1024px) {
@ -31,6 +33,10 @@
}
}
.api-documentation {
padding-bottom: 24px;
}
.md-headline {
margin-top: 36px;
margin-bottom: 24px;

11
docs/src/components/PageContent.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="page-content">
<md-whiteframe md-elevation="1">
<md-whiteframe md-elevation="1" class="main-header">
<md-toolbar>
<md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
<md-icon>menu</md-icon>
@ -26,8 +26,13 @@
</template>
<style lang="scss" scoped>
.main-header {
position: relative;
z-index: 2;
}
.nav-trigger {
@media (min-width: 1280px) {
@media (min-width: 1281px) {
display: none;
}
}
@ -35,7 +40,7 @@
.md-title {
flex: 1;
@media (min-width: 1280px) {
@media (min-width: 1281px) {
margin-left: 8px;
}
}

24
docs/src/pages/components/Checkbox.vue
View file

@ -22,6 +22,12 @@
</md-table-header>
<md-table-body>
<md-table-row>
<md-table-cell>v-model</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>A required model object to bind the value.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>name</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
@ -41,6 +47,24 @@
</md-table-row>
</md-table-body>
</md-table>
<md-table slot="events">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Value</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row>
<md-table-cell>change</md-table-cell>
<md-table-cell>Receive the state of the checkbox</md-table-cell>
<md-table-cell>Triggered when the checkbox changes his value.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
</div>

626
docs/src/pages/components/Dialog.vue
View file

@ -1,96 +1,566 @@
<template>
<demo-page label="Components - Dialog">
<div slot="examples">
<demo-example label="Default" height="500">
<md-dialog-alert
:md-title="alert.title"
:md-content="alert.content"
:md-ok-text="alert.ok"
@open="onOpen"
@close="onClose"
ref="dialog1">
</md-dialog-alert>
<page-content page-title="Components - Name">
<docs-component>
<div slot="description">
<p>Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.</p>
<p>The dialog component works with any plain html content. You can have tabs, all form components and more.</p>
<p>Alternativelly you can use three presets to build Alerts, Confirms and Prompt dialogs.</p>
<p>The preset component is created on top of <code>&lt;md-dialog&gt;</code>. You should provide the content or the HTML content at least.</p>
<p>All the pressets can use the same options and events from the <code>&lt;md-dialog&gt;</code> component.</p>
</div>
<md-dialog-confirm
:md-title="confirm.title"
:md-content-html="confirm.contentHtml"
:md-ok-text="confirm.ok"
:md-cancel-text="confirm.cancel"
@open="onOpen"
@close="onClose"
ref="dialog2">
</md-dialog-confirm>
<div slot="api">
<api-table name="md-dialog">
<md-table slot="properties">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<md-dialog-prompt
:md-title="prompt.title"
:md-ok-text="prompt.ok"
:md-cancel-text="prompt.cancel"
:md-input-id="prompt.id"
:md-input-name="prompt.name"
:md-input-maxlength="prompt.maxlength"
:md-input-placeholder="prompt.placeholder"
v-model="prompt.value"
@open="onOpen"
@close="onClose"
ref="dialog3">
</md-dialog-prompt>
<md-table-body>
<md-table-row>
<md-table-cell>md-click-outside-to-close</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Enable or disable click outside to close. Default: <code>true</code></md-table-cell>
</md-table-row>
<md-dialog ref="dialog4" md-open-from="#custom" md-close-to="#custom">
<md-dialog-title>Lorem ipsum dolor sit amet</md-dialog-title>
<md-table-row>
<md-table-cell>md-esc-to-close</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Enable or disable close on esc key. Default: <code>true</code></md-table-cell>
</md-table-row>
<md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>
<md-table-row>
<md-table-cell>md-backdrop</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Create an opaque backdrop behind the dialog. Default: <code>true</code></md-table-cell>
</md-table-row>
<md-dialog-actions>
<md-button class="md-primary" @click="closeDialog('dialog4')">Cancel</md-button>
<md-button class="md-primary" @click="closeDialog('dialog4')">Ok</md-button>
</md-dialog-actions>
</md-dialog>
<md-table-row>
<md-table-cell>md-open-from</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The query selector of the element that is used to determine from which the Dialog will open.</md-table-cell>
</md-table-row>
<md-dialog md-open-from="#fab" md-close-to="#fab" ref="dialog5">
<md-dialog-title>Create new note</md-dialog-title>
<md-table-row>
<md-table-cell>md-close-to</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The query selector of the element that is used to determine from which the Dialog will close.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
<md-dialog-content>
<form>
<md-input-container>
<label>Note</label>
<md-textarea></md-textarea>
</md-input-container>
</form>
</md-dialog-content>
<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-dialog-actions>
<md-button class="md-primary" @click="closeDialog('dialog5')">Cancel</md-button>
<md-button class="md-primary" @click="closeDialog('dialog5')">Create</md-button>
</md-dialog-actions>
</md-dialog>
<md-table-body>
<md-table-row>
<md-table-cell>open</md-table-cell>
<md-table-cell>Receive the state of the dialog: <code>ok</code>| <code>cancel</code> <br>Works only for Confirm and Prompt</md-table-cell>
<md-table-cell>Triggered when the dialog open.</md-table-cell>
</md-table-row>
<md-button class="md-primary md-raised" @click="openDialog('dialog1')">Alert</md-button>
<md-button class="md-primary md-raised" @click="openDialog('dialog2')">Confirm</md-button>
<md-button class="md-primary md-raised" @click="openDialog('dialog3')">Prompt</md-button>
<md-button class="md-primary md-raised" id="custom" @click="openDialog('dialog4')">Custom</md-button>
<md-button class="md-fab md-fab-bottom-right" id="fab" @click="openDialog('dialog5')">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>close</md-table-cell>
<md-table-cell>Receive the state of the dialog: <code>ok</code>| <code>cancel</code> <br>Works only for Confirm and Prompt</md-table-cell>
<md-table-cell>Triggered when the dialog closes.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
<div>Prompt Name: {{ prompt.value }}</div>
</demo-example>
</div>
<api-table name="md-dialog-title">
<p>Can display a title on the top of the Dialog.</p>
<p>No options available</p>
</api-table>
<div slot="code">
<demo-example label="Default">
<code-block lang="xml">
</code-block>
</demo-example>
</div>
<api-table name="md-dialog-content">
<p>Used to display rich content inside the Dialog.</p>
<p>No options available</p>
</api-table>
<div slot="api">
<api-table name="md-dialog-actions">
<p>Hold the actions of a dialog and align them on the right. Here you can add <code>&lt;md-button&gt;</code> with or without icons.</p>
<p>No options available</p>
</api-table>
</div>
</demo-page>
<api-table name="md-dialog-alert">
<div slot="properties">
<md-table>
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row>
<md-table-cell>md-title</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the alert title. Optional.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-content</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the alert content.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-content-html</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the alert content with a custom html.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-ok-text</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the alert "Okay" button text.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</div>
</api-table>
<api-table name="md-dialog-confirm">
<div slot="properties">
<md-table>
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row>
<md-table-cell>md-title</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the confirm title. Optional.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-content</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the confirm content.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-content-html</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the confirm content with a custom html.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-ok-text</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the confirm "Okay" button text.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-cancel-text</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the confirm "Cancel" button text.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</div>
</api-table>
<api-table name="md-dialog-prompt">
<div slot="properties">
<md-table>
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row>
<md-table-cell>md-title</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the prompt title. Optional.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-content</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the prompt content.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-content-html</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the prompt content with a custom html.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-ok-text</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the prompt "Okay" button text.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-cancel-text</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Sets the prompt "Cancel" button text.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>v-model</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>A required model object to be bind when the value is confirmed.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-input-id</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Set the ID of the field inside the prompt dialog.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-input-name</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Set the name of the field inside the prompt dialog.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-input-maxlength</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Set the optional maxlength of the field inside the prompt dialog with the text count.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-input-placeholder</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Set the optional placeholder of the field inside the prompt dialog.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</div>
</api-table>
</div>
<div slot="example">
<example-box card-title="Custom">
<div class="dialog-fab" slot="demo">
<md-dialog md-open-from="#custom" md-close-to="#custom" ref="dialog1">
<md-dialog-title>Lorem ipsum dolor sit amet</md-dialog-title>
<md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>
<md-dialog-actions>
<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>
<md-dialog md-open-from="#fab" md-close-to="#fab" ref="dialog2">
<md-dialog-title>Create new note</md-dialog-title>
<md-dialog-content>
<form>
<md-input-container>
<label>Note</label>
<md-textarea></md-textarea>
</md-input-container>
</form>
</md-dialog-content>
<md-dialog-actions>
<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="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>
<div slot="code">
<code-block lang="xml">
&lt;md-dialog md-open-from=&quot;#custom&quot; md-close-to=&quot;#custom&quot; ref=&quot;dialog1&quot;&gt;
&lt;md-dialog-title&gt;Lorem ipsum dolor sit amet&lt;/md-dialog-title&gt;
&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=&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;
&lt;md-dialog md-open-from=&quot;#fab&quot; md-close-to=&quot;#fab&quot; ref=&quot;dialog2&quot;&gt;
&lt;md-dialog-title&gt;Create new note&lt;/md-dialog-title&gt;
&lt;md-dialog-content&gt;
&lt;form&gt;
&lt;md-input-container&gt;
&lt;label&gt;Note&lt;/label&gt;
&lt;md-textarea&gt;&lt;/md-textarea&gt;
&lt;/md-input-container&gt;
&lt;/form&gt;
&lt;/md-dialog-content&gt;
&lt;md-dialog-actions&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=&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>
<code-block lang="javascript">
export default {
methods: {
openDialog(ref) {
this.$refs[ref].open();
},
closeDialog(ref) {
this.$refs[ref].close();
},
onOpen() {
console.log(&apos;Opened&apos;);
},
onClose(type) {
console.log(&apos;Closed&apos;, type);
}
}
};
</code-block>
</div>
</example-box>
<example-box card-title="Alerts">
<div slot="demo">
<md-dialog-alert
:md-content="alert.content"
:md-ok-text="alert.ok"
@open="onOpen"
@close="onClose"
ref="dialog3">
</md-dialog-alert>
<md-dialog-alert
:md-title="alert2.title"
:md-content-html="alert2.contentHtml"
@open="onOpen"
@close="onClose"
ref="dialog4">
</md-dialog-alert>
<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">
<code-block lang="xml">
&lt;md-dialog-alert
:md-content=&quot;alert.content&quot;
:md-ok-text=&quot;alert.ok&quot;
@open=&quot;onOpen&quot;
@close=&quot;onClose&quot;
ref=&quot;dialog3&quot;&gt;
&lt;/md-dialog-alert&gt;
&lt;md-dialog-alert
:md-title=&quot;alert2.title&quot;
:md-content-html=&quot;alert2.contentHtml&quot;
@open=&quot;onOpen&quot;
@close=&quot;onClose&quot;
ref=&quot;dialog4&quot;&gt;
&lt;/md-dialog-alert&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">
export default {
data: () =&gt; ({
alert: {
content: &apos;Your post has been deleted!&apos;,
ok: &apos;Cool!&apos;
},
alert2: {
title: &apos;Post created!&apos;,
contentHtml: &apos;Your post &lt;strong&gt;Material Design is awesome&lt;/strong&gt; has been created.&apos;
}
}),
methods: {
openDialog(ref) {
this.$refs[ref].open();
},
closeDialog(ref) {
this.$refs[ref].close();
},
onOpen() {
console.log(&apos;Opened&apos;);
},
onClose(type) {
console.log(&apos;Closed&apos;, type);
}
}
};
</code-block>
</div>
</example-box>
<example-box card-title="Confirm">
<div slot="demo">
<md-dialog-confirm
:md-title="confirm.title"
:md-content-html="confirm.contentHtml"
:md-ok-text="confirm.ok"
:md-cancel-text="confirm.cancel"
@open="onOpen"
@close="onClose"
ref="dialog5">
</md-dialog-confirm>
<md-button class="md-primary md-raised" @click="openDialog('dialog5')">Confirm</md-button>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-dialog-confirm
:md-title=&quot;confirm.title&quot;
:md-content-html=&quot;confirm.contentHtml&quot;
:md-ok-text=&quot;confirm.ok&quot;
:md-cancel-text=&quot;confirm.cancel&quot;
@open=&quot;onOpen&quot;
@close=&quot;onClose&quot;
ref=&quot;dialog5&quot;&gt;
&lt;/md-dialog-confirm&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">
export default {
data: () =&gt; ({
confirm: {
title: &apos;Use Google\&apos;s location service?&apos;,
contentHtml: &apos;Let Google help apps determine location. &lt;br&gt; This means sending &lt;strong&gt;anonymous&lt;/strong&gt; location data to Google, even when no apps are running.&apos;,
ok: &apos;Agree&apos;,
cancel: &apos;Disagree&apos;
}
}),
methods: {
openDialog(ref) {
this.$refs[ref].open();
},
closeDialog(ref) {
this.$refs[ref].close();
},
onOpen() {
console.log(&apos;Opened&apos;);
},
onClose(type) {
console.log(&apos;Closed&apos;, type);
}
}
};
</code-block>
</div>
</example-box>
<example-box card-title="Prompt">
<div slot="demo">
<md-dialog-prompt
:md-title="prompt.title"
:md-ok-text="prompt.ok"
:md-cancel-text="prompt.cancel"
:md-input-id="prompt.id"
:md-input-name="prompt.name"
:md-input-maxlength="prompt.maxlength"
:md-input-placeholder="prompt.placeholder"
v-model="prompt.value"
@open="onOpen"
@close="onClose"
ref="dialog6">
</md-dialog-prompt>
<md-button class="md-primary md-raised" @click="openDialog('dialog6')">Prompt</md-button>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-dialog-confirm
:md-title=&quot;confirm.title&quot;
:md-content-html=&quot;confirm.contentHtml&quot;
:md-ok-text=&quot;confirm.ok&quot;
:md-cancel-text=&quot;confirm.cancel&quot;
@open=&quot;onOpen&quot;
@close=&quot;onClose&quot;
ref=&quot;dialog5&quot;&gt;
&lt;/md-dialog-confirm&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">
export default {
data: () =&gt; ({
prompt: {
title: &apos;What\&apos;s your name?&apos;,
ok: &apos;Done&apos;,
cancel: &apos;Cancel&apos;,
id: &apos;name&apos;,
name: &apos;name&apos;,
placeholder: &apos;Type your name...&apos;,
maxlength: 30,
value: &apos;&apos;
}
}),
methods: {
openDialog(ref) {
this.$refs[ref].open();
},
closeDialog(ref) {
this.$refs[ref].close();
},
onOpen() {
console.log(&apos;Opened&apos;);
},
onClose(type) {
console.log(&apos;Closed&apos;, type);
}
}
};
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
</template>
<style lang="scss" scoped>
.dialog-fab {
height: 200px;
}
</style>
<script>
@ -100,6 +570,10 @@
content: 'Your post has been deleted!',
ok: 'Cool!'
},
alert2: {
title: 'Post created!',
contentHtml: 'Your post <strong>Material Design is awesome</strong> has been created.'
},
confirm: {
title: 'Use Google\'s location service?',
contentHtml: 'Let Google help apps determine location. <br> This means sending <strong>anonymous</strong> location data to Google, even when no apps are running.',

4
package.json
View file

@ -45,7 +45,9 @@
"autosize": "^3.0.18",
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
"scopedQuerySelectorShim": "lazd/scopedQuerySelectorShim",
"vue": "^2.1.0"
"vue": "2.1.3",
"vue-router": "2.0.3",
"vue-template-compiler": "2.1.3"
},
"devDependencies": {
"autoprefixer": "^6.5.3",

6
src/components/mdDialog/mdDialog.scss
View file

@ -42,11 +42,15 @@
opacity: 0;
box-shadow: $material-shadow-14dp;
transform: scale(.9, .85);
transform-origin: top center;
transform-origin: center center;
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function,
transform $swift-ease-out-duration .05s $swift-ease-out-timing-function;
will-change: opacity, transform;
&.md-reference {
transform-origin: top center;
}
&.md-transition-off {
transition: none !important;
}

3
src/components/mdDialog/mdDialog.vue
View file

@ -48,7 +48,8 @@
dialogClasses() {
return {
'md-fullscreen': this.mdFullscreen,
'md-transition-off': this.transitionOff
'md-transition-off': this.transitionOff,
'md-reference': this.mdOpenFrom || this.mdCloseTo
};
},
styles() {

2
src/components/mdDialog/presets/mdDialogPrompt.vue
View file

@ -20,7 +20,7 @@
<md-dialog-actions>
<md-button class="md-primary" @click="close('cancel')">{{ mdCancelText }}</md-button>
<md-button class="md-primary" @click="close('ok')">{{ mdOkText }}</md-button>
<md-button class="md-primary" @click="confirmValue">{{ mdOkText }}</md-button>
</md-dialog-actions>
</md-dialog>
</template>

16
yarn.lock
View file

@ -4606,10 +4606,6 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
vue:
version "2.1.0"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.1.0.tgz#293ba3efaaca846aa6bcbfac45cf8524cc597e3d"
vue-hot-reload-api, vue-hot-reload-api@^2.0.1:
version "2.0.6"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.0.6.tgz#817d4bfb30f55428aa1012d029499e07f3147d21"
@ -4641,7 +4637,7 @@ vue-loader:
vue-style-loader "^1.0.0"
vue-template-es2015-compiler "^1.2.2"
vue-router:
vue-router@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.0.3.tgz#444e246fd42d65a34dea6c3be8fde3315c4ba6f7"
@ -4651,9 +4647,9 @@ vue-style-loader, vue-style-loader@^1.0.0:
dependencies:
loader-utils "^0.2.7"
vue-template-compiler:
version "2.1.0"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.0.tgz#b920111b239b2c4234a5ffd78ca42cb664f06559"
vue-template-compiler@2.1.3:
version "2.1.3"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.3.tgz#af252df5848c15980cbf32d88a253db053290949"
dependencies:
de-indent "^1.0.2"
he "^1.1.0"
@ -4662,6 +4658,10 @@ vue-template-es2015-compiler@^1.2.2:
version "1.3.0"
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.3.0.tgz#4a0f2a0bbef8b5731f78add8263cd86fe4f643ca"
vue@2.1.3:
version "2.1.3"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.1.3.tgz#20161b8684777754fd9823134b38f13c1e197882"
watchpack@^0.2.1:
version "0.2.9"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"