Modal | Buval

Modal

A classic modal overlay, in which you can include any content you want

<template>
    <section>
        <button class="button is-primary"
            @click="isImageModalActive = true">
            Launch image modal
        </button>
        <button class="button is-primary"
            @click="isCardModalActive = true">
            Launch card modal (keep scroll)
        </button>

        <b-modal :active.sync="isImageModalActive">
            <p class="image is-4by3">
                <img src="/static/img/placeholders/1280x960.png">
            </p>
        </b-modal>

        <b-modal :active.sync="isCardModalActive" :width="640" scroll="keep">
            <div class="card">
                <div class="card-image">
                    <figure class="image is-4by3">
                        <img src="/static/img/placeholders/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/img/placeholders/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>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isImageModalActive: false,
                isCardModalActive: false
            }
        }
    }
</script>

Component

A modal with a component. When you want to close the Modal, call the 'close' method — this.$parent.close() — from the injected component.

trap-focus prop could be useful in this case.

<template>
    <section>
        <button class="button is-primary"
            @click="isComponentModalActive = true">
            Launch component modal
        </button>

        <b-modal :active.sync="isComponentModalActive"
                 has-modal-card
                 trap-focus
                 aria-role="dialog"
                 aria-modal>
            <modal-form v-bind="formProps"></modal-form>
        </b-modal>
    </section>
</template>

<script>
    const ModalForm = {
        props: ['email', 'password'],
        template: `
            <form action="">
                <div class="modal-card" style="width: auto">
                    <header class="modal-card-head">
                        <p class="modal-card-title">Login</p>
                    </header>
                    <section class="modal-card-body">
                        <b-field label="Email">
                            <b-input
                                type="email"
                                :value="email"
                                placeholder="Your email"
                                required>
                            </b-input>
                        </b-field>

                        <b-field label="Password">
                            <b-input
                                type="password"
                                :value="password"
                                password-reveal
                                placeholder="Your password"
                                required>
                            </b-input>
                        </b-field>

                        <b-checkbox>Remember me</b-checkbox>
                    </section>
                    <footer class="modal-card-foot">
                        <button class="button" type="button" @click="$parent.close()">Close</button>
                        <button class="button is-primary">Login</button>
                    </footer>
                </div>
            </form>
        `
    }

    export default {
        components: {
            ModalForm
        },
        data() {
            return {
                isComponentModalActive: false,
                formProps: {
                    email: 'evan@you.com',
                    password: 'testing'
                }
            }
        }
    }
</script>

Programmatic

Syntax:

// From inside Vue instance
this.$@apolokak/buval.modal.open(props)

// From outside Vue instance
import { ModalProgrammatic as Modal } from '@apolokak/buval'
Modal.open(props)

<template>
    <section>
        <button class="button is-primary"
            @click="imageModal()">
            Launch image modal (HTML)
        </button>
        <button class="button is-primary"
            @click="cardModal()">
            Launch card modal (Component)
        </button>
    </section>
</template>

<script>
    const ModalForm = {
        props: ['email', 'password'],
        template: `
            <form action="">
                <div class="modal-card" style="width: auto">
                    <header class="modal-card-head">
                        <p class="modal-card-title">Login</p>
                    </header>
                    <section class="modal-card-body">
                        <b-field label="Email">
                            <b-input
                                type="email"
                                :value="email"
                                placeholder="Your email"
                                required>
                            </b-input>
                        </b-field>

                        <b-field label="Password">
                            <b-input
                                type="password"
                                :value="password"
                                password-reveal
                                placeholder="Your password"
                                required>
                            </b-input>
                        </b-field>

                        <b-checkbox>Remember me</b-checkbox>
                    </section>
                    <footer class="modal-card-foot">
                        <button class="button" type="button" @click="$parent.close()">Close</button>
                        <button class="button is-primary">Login</button>
                    </footer>
                </div>
            </form>
        `
    }

    export default {
        methods: {
            imageModal() {
                this.$buval.modal.open(
                    `<p class="image is-4by3">
                        <img src="/static/img/placeholders/1280x960.png">
                    </p>`
                )
            },
            cardModal() {
                this.$buval.modal.open({
                    parent: this,
                    component: ModalForm,
                    hasModalCard: true,
                    customClass: 'custom-class custom-class-2'
                })
            }
        }
    }
</script>

Full Screen

Add the full-screen prop to cover the whole page.

<template>
    <section>
        <button class="button is-primary"
            @click="isComponentModalActive = true">
            Launch component modal
        </button>

        <b-modal :active.sync="isComponentModalActive"
            has-modal-card full-screen :can-cancel="false">
            <modal-form v-bind="formProps"></modal-form>
        </b-modal>
    </section>
</template>

<script>
    const ModalForm = {
        props: ['email', 'password'],
        template: `
            <div class="modal-card" style="width: auto">
                <header class="modal-card-head">
                    <p class="modal-card-title">Login</p>
                </header>
                <section class="modal-card-body">
                    <b-field label="Email">
                        <b-input
                            type="email"
                            :value="email"
                            placeholder="Your email"
                            required>
                        </b-input>
                    </b-field>

                    <b-field label="Password">
                        <b-input
                            type="password"
                            :value="password"
                            password-reveal
                            placeholder="Your password"
                            required>
                        </b-input>
                    </b-field>

                    <b-checkbox>Remember me</b-checkbox>
                </section>
                <footer class="modal-card-foot">
                    <button class="button" type="button" @click="$parent.close()">Close</button>
                    <button class="button is-primary">Login</button>
                </footer>
            </div>
        `
    }

    export default {
        components: {
            ModalForm
        },
        data() {
            return {
                isComponentModalActive: false,
                formProps: {
                    email: 'evan@you.com',
                    password: 'testing'
                }
            }
        }
    }
</script>

API

Name	Description	Type	Value	Default
`active`	Whether modal is active or not, use the `.sync` modifier to make it two-way binding	Boolean	—	`false`
`component`	Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — `this.$emit('close')`	Object, Function	—	—
`parent`	Parent component of the modal, required if using `component`	Vue	—	—
`props`	Props to be binded to the injected component	Object	—	—
`events`	Events to be binded to the injected component	Object	—	—
`content`	HTML content Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.	String	—	—
`width`	Width of the Modal	Number, String	—	`960`
`full-screen`	Display modal as full screen	Boolean	—	`false`
`has-modal-card`	If your modal content has a `.modal-card` as root, add this prop or the card might break on mobile	Boolean	—	`false`
`animation`	Custom animation (transition name)	String	—	`zoom-out`
`can-cancel`	Can close Modal by clicking 'X', pressing escape or clicking outside	Boolean, Array	`escape`, `x`, `outside`	`['escape', 'x', 'outside']`
`on-cancel`	Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside)	Function	—	—
`scroll`	`clip` to remove the `<body>` scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background, but will set `<body>` to position fixed, might break some layouts	String	`clip`, `keep`	`clip`
`trap-focus`	Trap focus inside the modal.	Boolean	—	`false`
`custom-class`	CSS classes to be applied on modal	String	—	—
`destroy-on-hide`	Destroy modal on hide	Boolean	—	`false`
`aria-role`	Role attribute to be passed to modal container for better accessibility.	String	`dialog`, `alertdialog`	—
`aria-modal`	Improve accessiblity when enabled.	Boolean	—	`false`

Name	Description	Parameters
`close`	Triggers when user closed/canceled or called programmatically from the injected component	—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$modal-z`	string	`40`
`$modal-background-background-color`	compound	`bulmaRgba($scheme-invert, 0.86)`
`$modal-content-width`	size	`640px`
`$modal-content-margin-mobile`	size	`20px`
`$modal-content-spacing-mobile`	size	`160px`
`$modal-content-spacing-tablet`	size	`40px`
`$modal-close-dimensions`	size	`40px`
`$modal-close-right`	size	`20px`
`$modal-close-top`	size	`20px`
`$modal-card-spacing`	size	`40px`
`$modal-card-head-background-color`	color	`$background`
`$modal-card-head-border-bottom`	size	`1px solid $border`
`$modal-card-head-padding`	size	`20px`
`$modal-card-head-radius`	size	`$radius-large`
`$modal-card-title-color`	color	`$text-strong`
`$modal-card-title-line-height`	string	`1`
`$modal-card-title-size`	size	`$size-4`
`$modal-card-foot-radius`	size	`$radius-large`
`$modal-card-foot-border-top`	size	`1px solid $border`
`$modal-card-body-background-color`	color	`$scheme-main`
`$modal-card-body-padding`	size	`20px`