v2.13.0

Update css for animating panel slide out

v2.8.0

Add removeBg option to remove the background entirely.

v2.7.0

Fix package.json

v2.4.0

Small bug fix for console error that happens when clicking outside panel. Thanks to @korpow for the fix: #42

v2.3.0

Add support for disabling escape key click to close panels:

this.panel1Handle = this.$showPanel({
        height: '400px',
        disableEscClick: true,
        props: {
          name: this.example1Form.name
        }
      });

v2.2.2

Add support for opening panels from top and bottom. Example:

this.panel1Handle = this.$showPanel({
        height: '400px',
        openOn: 'top',
        cssClass: 'panel-1-custom-class',
        component: 'panel-1',
        keepAlive: true,
        props: {
          name: this.example1Form.name
        }
      });

Note the openOn is equal to top and we're using the height prop insead of width.

V2.2.0

Add minified script.

v2.1.0

Change hideBg option so instead of removing the backdrop it makes it transparent.

v2.0.0 - Properly install as a Vue JS plugin

Breaking changes!

There were some issues around installing and using this component because of the way I had configured it to install with Vue JS. This release fixes those issues and properly installs this component as a Vue JS Plugin.

Here's how you will need to use this component now:

Install

npm install vue2-slideout-panel --save-dev

Setup

import VueSlideoutPanel from 'vue2-slideout-panel';

Vue.use(VueSlideoutPanel);

and then just add this HTML element to your page:

<slideout-panel></slideout-panel>

Opening panels

Now all your Vue components will automatically have a $showPanel() method on them.

methods: {
  showMyPanel() {
    this.$showPanel({
        ... all your panel options go here
    });
  }
}

v1.0.9

Fix bug with adding and removing class on body