/cube-vue-modal

A simple, basic, highly customizable and mobile friendly modal component for Vue.

Primary LanguageVueMIT LicenseMIT

cube-vue-modal

A simple, basic, highly customizable and mobile friendly modal component for Vue.

Key features

  • Easy to use
  • Simple HTML structure
  • CSS customizable
  • Large content support — addresses the well-known Safari over-scroll chaining issue on iOS

Usage

Install

yarn add cube-vue-modal

Exemple

Template

<div id="App">
  <p>Click the button below to open the modal.</p>
  <button :disabled="open" @click="open = true">Open</button>
  <Modal v-model="open">
    <header>
      <h1 class="modal-title">Title</h1>
    </header>
    <main>
      <p>This is a content.</p>
    </main>
    <footer>
      <button @click="open = false">Close</button>
    </footer>
  </Modal>
</div>

Script

import Modal from 'cube-vue-modal'

export default {
  components: {
    Modal
  },
  data() {
    return {
      open: false
    }
  }
}

SCSS

///
/// Import your own variables
///
@import 'assets/scss/variables';

///
/// Import modal style and animations
///
@import '~cube-vue-modal/src/scss';
/// Or ↴
@import '~cube-vue-modal/src/scss/variables';
@import '~cube-vue-modal/src/scss/modal';
@import '~cube-vue-modal/src/scss/animations';

Props

Name Required Type Default Description
value false Boolean false The open state of the modal.
transition false String 'animate' The name of the transition to use for opening and closing.
target false String, Object document.body The querySelector or the Element to append the modal to.

Events

Name Description
input The open state of the modal has changed.
open The modal is opened.
opened The modal is opened and the animation is finished.
close The modal is closed.
closed The modal is closed and the animation is finished.

Methods

Name Async Description
open true Opens the modal and resolves after the animation is finished.
close true Closes the modal and resolves after the animation is finished.
toggle true Switches between the open and close methods.

HTML structure and classes

<div class="modal">
  <div class="modal-backdrop"></div>
  <div class="modal-dialog" role="dialog">
    <button class="modal-dialog-close"></button>
    <div class="modal-dialog-container">
      <slot />
    </div>
  </div>
</div>

Development Setup

# Project setup
yarn install

# Compiles and hot-reloads for demo web site development
yarn run serve

# Compiles and minifies for production
yarn run build

# Lints and fixes files
yarn run lint

# Run the unit tests
yarn run test:unit