vue-sidebar-modal

Simple to use sidebar modal based on the Vue JS Modal Plugin

Install

npm install vue-sidebar-modal --save

How to use

Include plugin in your main.js file.

import SidebarModal from 'vue-sidebar-modal'

Vue.use(SidebarModal)

Import css file

@import "~vue-sidebar-modal/dist/vue-sidebar-modal";

Create modal:

<sidebar-modal name="hello-world">
  hello, world!
</sidebar-modal>

Call it from anywhere in the app:

methods: {
  show () {
    this.$sidebarModal.show('hello-world');
  },
  hide () {
    this.$sidebarModal.hide('hello-world');
  }
}

You can easily send data into the modal:

this.$sidebarModal.show('hello-world', { foo: 'bar' })

And receive it in beforeOpen event handler:

<sidebar-modal name="hello-world" @before-open="beforeOpen"/>

methods: {
  beforeOpen (event) {
    console.log(event.params.foo);
  }
}

Dynamic Modals

In order to instantiate modals at runtime (for lazy-loading or decluttering templates), it is possible to create modals dynamically.

To start using this feature just include the <sidebar-modals-container /> component it in your project:

<sidebar-modals-container />

Call it (the first argument is the component definition, the second are component properties, the third modal parameters, and the fourth the modal event listeners):

this.$sidebarModal.show({
  template: `
    <div>
      <h1>This is created inline</h1>
      <p>{{ text }}</p>
    </div>
  `,
  props: ['text']
}, {
  text: 'This text is passed as a property'
}, {
  height: 'auto'
}, {
  'before-close': (event) => { console.log('this will be called before the modal closes'); }
})

It can also be used with .vue files:

import MyComponent from './MyComponent.vue'

this.$sidebarModal.show(MyComponent, {
  text: 'This text is passed as a property'
}, {
  height: 'auto'
})

You can close dynamic modals by emitting a 'close' event:

this.$sidebarModal.show({
  template: `
    <div>
      <p>Close using this button:</p>
      <button @click="$emit('close')">Close</button>
    </div>
  `
})

Properties

| Name | Required | Type | Default | Description | | --- | --- | --- | --- | --- | | name | true | [String, Number] | | Name of the modal | | delay | false | Number | 0 | Delay between showing overlay and actual modal box | | clickToClose | false | Boolean | true | If set to false, it will not be possible to close modal by clicking on the background | | classes | false | [Array] |[]| Classes that will be applied to the actual modal box| | width | false | [String, Number] | 600 | Width in pixels or percents (e.g. 50 or "50px", "50%") | | height | false | [String, Number] | 100% | Height in pixels or percents (e.g. 50 or "50px", "50%") or "auto" |

Events

| Name | Description | | --- | --- | | before-open | Emits while modal is still invisible, but was added to the DOM | | opened | Emits after modal became visible or started transition | | before-close | Emits before modal is going to be closed. Can be stopped from the event listener calling event.stop() (example: you are creating a text editor, and want to stop closing and ask the user to correct mistakes if the text is not valid) | closed | Emits right before modal is destroyed |