cube-inc/cube-vue-modal

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

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