fix hide bg option

Author: officert

dist/vue2-slideout-panel.js

@@ -1,5 +1,5 @@
 /*!
- * vue2-slideout-panel v1.0.4 (https://github.com/officert/vue-slideout-panel)
+ * vue2-slideout-panel v1.0.5 (https://github.com/officert/vue-slideout-panel)
  * (c) 2018 Tim Officer
  * Released under the MIT License.
  */
@@ -12089,6 +12089,11 @@ var vm = {
       return this.panels.filter(function (panel) {
         return panel.visible;
       }).length;
+    },
+    panelBgVisible: function panelBgVisible() {
+      return this.panels.filter(function (panel) {
+        return panel.hideBg;
+      }).length === 0;
     }
   },
   methods: {
@@ -12267,7 +12272,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     attrs: {
       "name": "fadeIn"
     }
-  }, [(_vm.panelsVisible) ? _c('div', {
+  }, [(_vm.panelsVisible && _vm.panelBgVisible) ? _c('div', {
     staticClass: "slideout-panel-bg",
     on: {
       "click": _vm.onBgClicked

dist/vue2-slideout-panel.min.js

@@ -2,10 +2,6 @@
 </template>
 
 <script>
-import {
-  vueSlideoutPanelService
-} from '../../../src/index';
-
 export default {
   name: 'home',
   data() {
@@ -34,7 +30,7 @@ export default {
         return;
       }
 
-      this.panel1Handle = vueSlideoutPanelService.show({
+      this.panel1Handle = this.$showPanel({
         width: '700px',
         cssClass: 'panel-1-custom-class',
         component: 'panel-1',
@@ -50,7 +46,7 @@ export default {
         });
     },
     showPanel3() {
-      const handle = vueSlideoutPanelService.show({
+      const handle = this.$showPanel({
         width: 700,
         component: 'panel-3'
       });

docs-src/components/Home/index.vue

@@ -2,10 +2,6 @@
 </template>
 
 <script>
-import {
-  vueSlideoutPanelService
-} from '../../../src/index';
-
 export default {
   name: 'panel-1',
   props: {
@@ -24,7 +20,7 @@ export default {
   },
   methods: {
     showPanel2() {
-      vueSlideoutPanelService.show({
+      this.$showPanel({
         // openOn: 'left',
         component: 'panel-2',
         props: {

docs-src/components/Panel1/index.vue

@@ -1,6 +1,6 @@
 {
   "name": "vue2-slideout-panel",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Lib for creating stackable panels using Vue JS",
   "main": "dist/vue2-slideout-panel.js",
   "scripts": {

docs/docs.js

@@ -23,6 +23,9 @@ const vm = {
   computed: {
     panelsVisible() {
       return this.panels.filter(panel => panel.visible).length;
+    },
+    panelBgVisible() {
+      return this.panels.filter(panel => panel.hideBg).length === 0;
     }
   },
   methods: {

package.json

@@ -1,7 +1,7 @@
 <transition name="fadeIn">
   <div class="slideout-panel clearfix">
     <transition name="fadeIn">
-      <div class="slideout-panel-bg" v-on:click="onBgClicked" v-if="panelsVisible">
+      <div class="slideout-panel-bg" v-on:click="onBgClicked" v-if="panelsVisible && panelBgVisible">
       </div>
     </transition>
     <transition-group class="slideout-wrapper" tag="div" name="slideIn">