A simple and easy to use Modal component for Vue applications

npm i vue-cute-modal

yarn add vue-cute-modal

import CuteModal from 'vue-cute-modal'

Vue.use(CuteModal)

<cute-modal name="example">
  Your modal content.
</cute-modal>

// Opens the modal
this.$cuteModal.open('example')

// Hides the modal
this.$cuteModal.hide('example')

<template>
  <div>
    <button @click="open">Open Modal</button>
    <cute-modal name="hello">
      Hello World!
    </cute-modal>
  </div>
</template>

<script>
export default {
  methods: {
    open () {
      this.$cuteModal.open('hello')
    }
  }
}
</script>

<!-- import CSS through SCSS or Link to compiled CSS whichever you prefer -->
<!-- or use your own custom styles! -->
<style>
/* ... */
</style>

/** Default Settings */
const DEFAULT_OPTIONS = {
  body: 'cute-modal__body',
  container: 'cute-modal__container',
  footer: 'cute-modal__footer',
  header: 'cute-modal__header',
  height: 'auto',
  overlay: 'cute-modal__overlay',
  transition: 'modal',
  width: '600px',
  onOpen: null, // available in 1.1
  onClose: null // available in 1.1
}

Vue.use(CuteModal, {
  // Override the component's name to match your app's
  // Default 'cute-modal' = <cute-modal>
  component: '',

  // Override the component's base classes to match your app's
  body: '',
  container: '',
  footer: '',
  header: '',
  overlay: ''

  // Set default width and heights for all your modals
  height: '',
  width: '',

  // Set the transition name to use custom Vue transitions
  // This will be set as the transition's name <transition name="...">
  transition: '',

  // Setup callbacks to be executed globally when Modal is closed/opened.
  onClose: () => {
    // ...
  },
  onOpen: () => {
    // ...
  }
})

<cute-modal width="350px" headerClass="is-header">
  <!-- -->
</cute-modal>

// Open a Modal
this.$cuteModal.open(/* modal name */)

// Close a Modal
this.$cuteModal.hide(/* modal name */)

<cute-modal name="myModal">
  Some content

  <template slot="footer" slot-scope="{ $hide }">
    <button @click="$hide">Hide Me</button>
  </template>
</cute-modal>

Vue.use({
  onClose: () => {
    document.body.style.overflow = 'auto'
  },
  onOpen: () => {
    document.body.style.overflow = 'hidden'
  }
})

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run all tests
npm test