Skip to content

Commit

Permalink
Fix #55
Browse files Browse the repository at this point in the history
  • Loading branch information
@rafaberaldo
rafaberaldo committed May 12, 2017
1 parent ac0ddf3 commit b5d70e8
Show file tree
Hide file tree
Showing 5 changed files with 233 additions and 55 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
@@ -1,5 +1,9 @@
# Buefy Changelog

## 0.3.2

* Modal can be used in template as well (non programmatic)

## 0.3.1

* Field ``grouped`` now also works on nested Fields
Expand Down
228 changes: 192 additions & 36 deletions docs/pages/documentation/general/Modal.vue
View file
@@ -1,28 +1,90 @@
<template>
<div class="container">
<h1 class="title is-spaced">Modal</h1>
<h2 class="subtitle">Programatically modal overlay to include any content you may need</h2>
<h2 class="subtitle">Classic modal overlay to include any content you may need</h2>
<hr>

<div class="block">
<button class="button is-primary is-medium" @click="imageModal"> Launch image modal</button>
<button class="button is-primary is-medium" @click="cardModal"> Launch card modal</button>
<button class="button is-primary is-medium" @click="isImageModalActive = true">Launch image modal</button>
<button class="button is-primary is-medium" @click="isCardModalActive = true">Launch card modal</button>
</div>
<pre class="content" v-highlight><code class="javascript">{{ code1 | pre }}</code></pre>
<b-modal :active.sync="isImageModalActive">
<p class="image is-4by3">
<img src="static/placeholder-1280x960.png">
</p>
</b-modal>
<b-modal :active.sync="isCardModalActive" :width="640">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="static/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="static/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a>#css</a> <a>#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>
</b-modal>
<pre class="content" v-highlight><code class="html">{{ template1 | pre }}</code></pre>

<hr>

<h2 class="title is-spaced">Component Modal</h2>
<h2 class="title">Component Modal</h2>
<div class="content">
<p>A modal with an injected component. When you want to close the Modal, emit a 'close' event — <code>this.$emit('close')</code> — from the component.</p>
<p>The component will receive all props from the <code>props</code> object.</p>
<button class="button is-primary is-medium" @click="componentModal"> Launch component modal</button>
<button class="button is-primary is-medium" @click="isComponentModalActive = true">Launch component modal</button>
</div>
<b-modal
:active.sync="isComponentModalActive"
:component="ModalForm"
:props="formProps"
:width="380">
</b-modal>
<pre class="content" v-highlight><code class="html">{{ template2 | pre }}</code></pre>
<pre class="content" v-highlight><code class="javascript">{{ code2 | pre }}</code></pre>

<h3 class="subtitle">ModalForm component</h3>
<p class="content"><b>Note:</b> You should't mutate a prop directly, this is just an example.</p>
<pre class="content" v-highlight><code class="html">{{ component | pre }}</code></pre>

<hr>

<h2 class="title is-spaced">Programmatically opening</h2>

<div class="block">
<button class="button is-primary is-medium" @click="imageModal">Launch image modal</button>
<button class="button is-primary is-medium" @click="cardModal">Launch card modal</button>
</div>
<pre class="content" v-highlight><code class="javascript">{{ code3 | pre }}</code></pre>

<hr>

<h2 class="title">Programmatically opening Component Modal</h2>
<div class="content">
<p>A modal with an injected component. When you want to close the Modal, emit a 'close' event — <code>this.$emit('close')</code> — from the component.</p>
<p>The component will receive all props from the <code>props</code> object.</p>
<button class="button is-primary is-medium" @click="componentModal">Launch component modal</button>
</div>
<pre class="content" v-highlight><code class="javascript">{{ code4 | pre }}</code></pre>

<hr>

Expand All @@ -46,6 +108,21 @@
</b-table-column>
</template>
</b-table>

<h2 class="subtitle">Events</h2>
<b-table :data="events" default-sort="name">
<template scope="props">
<b-table-column field="name" label="Name"
v-html="props.row.name">
</b-table-column>
<b-table-column field="description" label="Description" width="620"
v-html="props.row.description">
</b-table-column>
<b-table-column field="parameters" label="Parameters"
v-html="props.row.parameters">
</b-table-column>
</template>
</b-table>
</div>
</template>

Expand All @@ -55,9 +132,22 @@
export default {
data() {
return {
email: 'evan@you.com',
password: 'testing',
ModalForm,
isImageModalActive: false,
isCardModalActive: false,
isComponentModalActive: false,
formProps: {
email: 'evan@you.com',
password: 'testing'
},
props: [
{
name: '<code>active</code>',
description: 'Whether modal is active or not, use the <code>.sync</code> modifier to make it two-way binding',
type: 'Boolean',
values: '—',
default: '<code>false</code>'
},
{
name: '<code>component</code>',
description: `Component to be shown. Close Modal programatically by emitting a 'close' event — <code>this.$emit('close')</code> — from the component`,
Expand All @@ -67,7 +157,7 @@
},
{
name: '<code>props</code>',
description: 'Props to be binded to the component',
description: 'Props to be binded to the injected component',
type: 'Object',
values: '—',
default: '—'
Expand Down Expand Up @@ -101,7 +191,79 @@
default: '—'
}
],
code1: `
events: [
{
name: '<code>close</code>',
description: 'Triggers when user closed/canceled or called programmatically from the injected component',
parameters: '—'
}
],
template1: `
<button class="button is-primary is-medium" @click="isImageModalActive = true">Launch image modal</button>
<button class="button is-primary is-medium" @click="isCardModalActive = true">Launch card modal</button>
<b-modal :active.sync="isImageModalActive">
<p class="image is-4by3">
<img src="static/placeholder-1280x960.png">
</p>
</b-modal>
<b-modal :active.sync="isCardModalActive" :width="640">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="static/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="static/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a>#css</a> <a>#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>
</b-modal>
`,
template2: `
<button class="button is-primary is-medium" @click="isComponentModalActive = true">Launch component modal</button>
<b-modal
:active.sync="isComponentModalActive"
:component="ModalForm"
:props="formProps"
:width="380">
</b-modal>`,
code2: `
import ModalForm from './components/ModalForm'
export default {
data() {
return {
ModalForm,
isComponentModalActive: false,
formProps: {
email: 'evan@you.com',
password: 'testing'
}
}
}
}`,
code3: `
export default {
methods: {
imageModal() {
Expand All @@ -117,53 +279,47 @@
content: \`<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="./static/placeholder-1280x960.png" alt="Image">
<img src="./static/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="./static/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
<div class="media-left">
<figure class="image is-48x48">
<img src="./static/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a>#css</a> <a>#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a>#css</a> <a>#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>\`
})
}
}
}`,
code2: `
code4: `
import ModalForm from './components/ModalForm'
export default {
data() {
return {
email: 'evan@you.com',
password: 'testing'
}
},
methods: {
componentModal() {
this.$modal.open({
component: ModalForm,
width: 380,
props: {
email: this.email,
password: this.password
email: 'evan@you.com',
password: 'testing'
}
})
}
Expand Down Expand Up @@ -227,8 +383,8 @@
component: ModalForm,
width: 380,
props: {
email: this.email,
password: this.password
email: 'evan@you.com',
password: 'testing'
}
})
},
Expand Down

0 comments on commit b5d70e8

Please sign in to comment.