├── src
├── eventBus.js
├── utils
│ ├── domUtils.js
│ └── utils.js
├── components
│ └── SlideoutPanel
│ │ ├── template.html
│ │ ├── styles.less
│ │ └── index.vue
├── index.js
└── service.js
├── docs-src
├── components
│ ├── Examples
│ │ ├── template.html
│ │ └── index.vue
│ ├── Panel4
│ │ ├── template.html
│ │ └── index.vue
│ ├── Panel3
│ │ ├── template.html
│ │ └── index.vue
│ ├── Examples-stack
│ │ ├── template.html
│ │ └── index.vue
│ ├── Install
│ │ ├── index.vue
│ │ └── template.html
│ ├── PanelResult
│ │ ├── index.vue
│ │ └── template.html
│ ├── Home
│ │ ├── index.vue
│ │ └── template.html
│ ├── Panel1
│ │ ├── index.vue
│ │ └── template.html
│ ├── Panel2
│ │ ├── template.html
│ │ └── index.vue
│ ├── Examples-openOn
│ │ ├── index.vue
│ │ └── template.html
│ ├── Examples-width
│ │ ├── index.vue
│ │ └── template.html
│ ├── Examples-passingData
│ │ ├── index.vue
│ │ └── template.html
│ ├── Options
│ │ ├── template.html
│ │ └── index.vue
│ ├── App
│ │ ├── template.html
│ │ └── index.vue
│ └── Sidebar
│ │ ├── index.vue
│ │ └── template.html
├── index.js
└── router.js
├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── LICENSE
├── docs
├── index.html
└── docs.css
├── package.json
└── dist
└── vue-slideout-panel.min.js
/src/eventBus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | export default new Vue();
4 |
--------------------------------------------------------------------------------
/docs-src/components/Examples/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/docs-src/components/Panel4/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Close Panel
4 |
5 |
6 |
--------------------------------------------------------------------------------
/docs-src/components/Panel3/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Open Another Panel
4 |
5 |
6 |
--------------------------------------------------------------------------------
/docs-src/components/Examples-stack/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Stacking panels
3 |
4 | Show Panel
5 |
6 |
7 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "stage-2"
5 | ],
6 | "plugins": [
7 | "transform-runtime",
8 | "add-module-exports"
9 | ],
10 | "comments": false
11 | }
12 |
--------------------------------------------------------------------------------
/docs-src/components/Install/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
13 |
--------------------------------------------------------------------------------
/docs-src/components/Examples/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
13 |
14 |
16 |
--------------------------------------------------------------------------------
/docs-src/components/PanelResult/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
13 |
15 |
--------------------------------------------------------------------------------
/docs-src/components/Home/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
13 |
14 |
17 |
--------------------------------------------------------------------------------
/docs-src/components/Panel1/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
13 |
14 |
19 |
--------------------------------------------------------------------------------
/src/utils/domUtils.js:
--------------------------------------------------------------------------------
1 | function addClass(element, className) {
2 | element.classList.remove(className);
3 | element.classList.add(className);
4 | }
5 |
6 | function removeClass(element, className) {
7 | element.classList.remove(className);
8 | }
9 |
10 | export default {
11 | addClass,
12 | removeClass
13 | };
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 |
4 | # local env files
5 | .env.local
6 | .env.*.local
7 |
8 | # Log files
9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | package-lock.json
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 |
--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
1 | function generateGuid() {
2 | function s4() {
3 | return Math.floor((1 + Math.random()) * 0x10000)
4 | .toString(16)
5 | .substring(1);
6 | }
7 |
8 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
9 | }
10 |
11 | export default {
12 | generateGuid
13 | };
14 |
--------------------------------------------------------------------------------
/docs-src/components/Panel2/template.html:
--------------------------------------------------------------------------------
1 |
2 | You are {{ age }} years old!
3 |
4 |
5 | What's your name?
6 |
7 |
8 |
9 | Close Panel
10 |
11 |
12 |
--------------------------------------------------------------------------------
/docs-src/components/Home/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Intro
3 |
4 |
5 | Vue Slideout Panel is a component for creating stackable slideout panels.
6 |
7 |
8 | Panels can be added from any Vue component and are added to the global stack and must be closed in LIFO order.
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 |
4 | # local env files
5 | .env.local
6 | .env.*.local
7 |
8 | # Log files
9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | package-lock.json
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 |
23 | docs
24 | docs-src
25 | src
26 | build
27 | .babelrc
28 | .gitignore
29 |
--------------------------------------------------------------------------------
/docs-src/components/Panel4/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
19 |
24 |
--------------------------------------------------------------------------------
/docs-src/components/Examples-stack/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
22 |
24 |
--------------------------------------------------------------------------------
/docs-src/components/Examples-openOn/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
25 |
27 |
--------------------------------------------------------------------------------
/docs-src/components/Examples-width/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
25 |
27 |
--------------------------------------------------------------------------------
/docs-src/components/Examples-width/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Setting panel width
3 |
4 | Open panels on the left, right, top or bottom side using the openOn option:
5 |
6 |
7 | const panel = this.$showPanel({
8 | component: "panel-1",
9 | width: {{ this.width }},
10 | props: {}
11 | });
12 |
13 |
14 | Show Panel
15 |
16 |
17 |
--------------------------------------------------------------------------------
/docs-src/components/Panel3/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
25 |
30 |
--------------------------------------------------------------------------------
/docs-src/components/Panel2/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
25 |
26 |
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue2-slideout-panel
2 | > A stackable panel component for Vue.js
3 |
4 | [](https://badge.fury.io/js/vue2-slideout-panel)
5 |
6 | ## Documentation
7 | [https://officert.github.io/vue-slideout-panel](https://officert.github.io/vue-slideout-panel)
8 |
9 | ## Requirements
10 | * [Vue.js](http://vuejs.org/) (^v2.1.4)
11 |
12 | ## Installation
13 |
14 | ### NPM
15 |
16 | ```bash
17 | npm install vue2-slideout-panel --save-dev
18 | ```
19 |
20 | ### Contributing
21 |
22 | Pull requests are welcome, or open up an issue if you have ideas for additional functionality, new features or bugs.
23 |
--------------------------------------------------------------------------------
/docs-src/components/Examples-passingData/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
32 |
33 |
35 |
--------------------------------------------------------------------------------
/docs-src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueSlideoutPanel from '../src/index';
3 |
4 | import App from './components/App';
5 | import Sidebar from './components/Sidebar';
6 | import Panel1 from './components/Panel1';
7 | import Panel2 from './components/Panel2';
8 | import Panel3 from './components/Panel3';
9 | import Panel4 from './components/Panel4';
10 | import router from './router';
11 |
12 | Vue.use(VueSlideoutPanel);
13 |
14 | Vue.component('sidebar', Sidebar);
15 | Vue.component('panel-1', Panel1);
16 | Vue.component('panel-2', Panel2);
17 | Vue.component('panel-3', Panel3);
18 | Vue.component('panel-4', Panel4);
19 |
20 | new Vue({
21 | template: ' ',
22 | router,
23 | components: {
24 | App
25 | }
26 | })
27 | .$mount('#app');
28 |
--------------------------------------------------------------------------------
/docs-src/components/Examples-openOn/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Setting panel openOn
3 |
4 | Open panels on the left, right, top or bottom side using the openOn option:
5 |
6 |
7 | const panel = this.$showPanel({
8 | component: "panel-1",
9 | openOn: '{{ this.openOn }}',
10 | props: {}
11 | });
12 |
13 |
14 | Left
15 |
16 |
17 | Right
18 |
19 |
20 | Top
21 |
22 |
23 | Bottom
24 |
25 |
26 |
27 | Show Panel
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/components/SlideoutPanel/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/docs-src/components/Options/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Options
3 |
4 | The $showPanel method takes the following options:
5 |
6 |
7 |
8 |
9 |
10 | Param
11 |
12 |
13 | Type
14 |
15 |
16 | Description
17 |
18 |
19 | Default
20 |
21 |
22 |
23 |
24 |
25 |
26 | {{ param.name }}
27 |
28 |
29 | {{ param.type }}
30 |
31 |
32 |
33 |
34 | {{ param.default }}
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2018-2018 Tim Officer https://github.com/officert/vue-slideout-panel
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs-src/components/App/template.html:
--------------------------------------------------------------------------------
1 |
30 |
--------------------------------------------------------------------------------
/docs-src/components/Sidebar/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
63 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VueSlideoutPanel from './components/SlideoutPanel';
2 | import vueSlideoutPanelService from './service';
3 |
4 | // expose component and service to global scope
5 | if (typeof window !== 'undefined' && window.Vue) {
6 | if (window.vue2PanelDebug) {
7 | console.log('installing Vue js plugin - browser'); //eslint-disable-line
8 | }
9 |
10 | window.Vue.use({
11 | install(NewVue) {
12 | NewVue.component('slideout-panel', VueSlideoutPanel);
13 | NewVue.prototype.$showPanel = vueSlideoutPanelService.showPanel;
14 | NewVue.prototype.$showPanelStack = vueSlideoutPanelService.showPanelStack;
15 | NewVue.prototype.$hideAllPanels = vueSlideoutPanelService.hideAllPanels;
16 | NewVue.prototype.$setPanelDefaults =
17 | vueSlideoutPanelService.setPanelDefaults;
18 | }
19 | });
20 |
21 | window.vueSlideoutPanelService = vueSlideoutPanelService;
22 | }
23 |
24 | export default {
25 | install: function(NewVue) {
26 | NewVue.component('slideout-panel', VueSlideoutPanel);
27 | NewVue.prototype.$showPanel = vueSlideoutPanelService.showPanel;
28 | NewVue.prototype.$showPanelStack = vueSlideoutPanelService.showPanelStack;
29 | NewVue.prototype.$hideAllPanels = vueSlideoutPanelService.hideAllPanels;
30 | NewVue.prototype.$setPanelDefaults =
31 | vueSlideoutPanelService.setPanelDefaults;
32 | },
33 | VueSlideoutPanel,
34 | vueSlideoutPanelService
35 | };
36 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | vue-friendly-iframe - A Vue.js component for creating dynamic async iframes
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/docs-src/components/Install/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Installation
3 |
npm install vue2-slideout-panel --save-dev
4 |
Usage
5 |
6 | 1) Install the Vue Slideout Panel plugin:
7 |
8 |
import Vue from 'vue';
9 | import VueSlideoutPanel from 'vue2-slideout-panel';
10 |
11 | Vue.use(VueSlideoutPanel);
12 |
13 | 2) In your HTML add the component:
14 |
15 |
16 |
<slideout-panel></slideout-panel>
17 |
18 |
19 | 3) Launch a panel from your component:
20 |
21 |
22 | methods: {
23 | showPanel() {
24 | const panel1Handle = this.$showPanel({
25 | component : 'your-component-name',
26 | props: {
27 | //any data you want passed to your component
28 | }
29 | })
30 |
31 | panel1Handle.promise
32 | .then(result => {
33 |
34 | });
35 | }
36 | }
37 |
38 |
39 |
40 | 'your-component-name' just needs to be the name of a valid component that you have registered with Vue like this:
41 | Vue.component('your-component-name', {})
42 |
43 |
44 |
45 | The $showPanel() method returns a PanelResult object.
46 |
47 |
48 | Learn more about the PanelResult object here.
49 |
50 |
51 |
--------------------------------------------------------------------------------
/docs-src/components/Sidebar/template.html:
--------------------------------------------------------------------------------
1 |
52 |
--------------------------------------------------------------------------------
/docs-src/components/Examples-passingData/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Passing Data
3 |
4 | You can pass data to your components by using the props property:
5 |
6 |
7 | const panelResult = this.$showPanel({
8 | component: "panel-2",
9 | props: {
10 | age: {{ age }}
11 | }
12 | });
13 |
14 | And you can receive data from your panel by using the promise property of the PanelResult object:
15 |
16 |
17 | const panelResult = this.$showPanel({
18 | component: "panel-2",
19 | props: {
20 | age: {{ age }}
21 | }
22 | });
23 |
24 | panelResult.promise
25 | .then(result => {
26 | //result is the value passed from your component calling this.$emit('close-panel', //some value);
27 | });
28 |
29 | In your panel component you just need to call this.$emit('close-panel') to close your panel:
30 |
31 |
32 | //in your component's code ("panel-2" in this example)
33 |
34 | {
35 | props: {
36 | age: {
37 | type: String,
38 | required: true
39 | }
40 | },
41 | data() {
42 | name : null
43 | },
44 | methods: {
45 | closePanel() {
46 | this.$emit('closePanel', {});
47 | }
48 | }
49 | }
50 |
Example
51 |
52 | What's your age?
53 |
54 |
55 |
56 | Your name is {{ name }}
57 |
58 |
59 | Show Panel
60 |
61 |
62 |
--------------------------------------------------------------------------------
/docs/docs.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
2 |
--------------------------------------------------------------------------------
/docs-src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueRouter from 'vue-router';
3 |
4 | import Home from './components/Home';
5 | import Install from './components/Install';
6 | import Options from './components/Options';
7 | import PanelResult from './components/PanelResult';
8 | import Examples from './components/Examples';
9 | import ExamplesOpenOn from './components/Examples-openOn';
10 | import ExamplesWidth from './components/Examples-width';
11 | import ExamplesPassingData from './components/Examples-passingData';
12 | import ExamplesStack from './components/Examples-stack';
13 |
14 | Vue.use(VueRouter);
15 |
16 | const routes = [{
17 | path: '*',
18 | redirect: '/home'
19 | }, {
20 | path: '/',
21 | redirect: '/home'
22 | }, {
23 | name: 'Home',
24 | path: '/home',
25 | component: Home
26 | }, {
27 | name: 'Install',
28 | path: '/install',
29 | component: Install
30 | }, {
31 | name: 'Options',
32 | path: '/options',
33 | component: Options
34 | }, {
35 | name: 'PanelResult',
36 | path: '/panel-result',
37 | component: PanelResult
38 | }, {
39 | name: 'Examples',
40 | path: '/examples',
41 | component: Examples,
42 | redirect: '/examples/open-on',
43 | children: [{
44 | name: 'ExamplesOpenOn',
45 | path: '/examples/open-on',
46 | component: ExamplesOpenOn,
47 | }, {
48 | name: 'ExamplesWidth',
49 | path: '/examples/width',
50 | component: ExamplesWidth,
51 | }, {
52 | name: 'ExamplesPassingData',
53 | path: '/examples/passing-data',
54 | component: ExamplesPassingData,
55 | }, {
56 | name: 'ExamplesStack',
57 | path: '/examples/stack',
58 | component: ExamplesStack,
59 | }]
60 | }];
61 |
62 | export default new VueRouter({
63 | base: '/vue-friendly-iframe/',
64 | routes,
65 | scrollBehavior(to) {
66 | if (to.name === 'Home') {
67 | return {
68 | x: 0,
69 | y: 0
70 | };
71 | }
72 |
73 | return {
74 | x: 0,
75 | y: 550
76 | };
77 | }
78 | });
79 |
--------------------------------------------------------------------------------
/docs-src/components/PanelResult/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Panel Result
3 |
4 | The $showPanel method returns a PanelResult object.
5 |
6 |
7 | methods: {
8 | showPanel() {
9 | const panelResult = this.$showPanel({
10 | component: 'your-component-name'
11 | });
12 | }
13 | }
14 |
15 | The PanelResult object allows you to show and hide the panel programatically.
16 |
17 |
18 | Just store the PanelResult to your Vue component and use a method to call hide().
19 |
20 |
21 | methods: {
22 | showPanel() {
23 | this.panelResult = this.$showPanel({
24 | component: 'your-component-name'
25 | });
26 | },
27 | hidePanel() {
28 | this.panelResult.hide();
29 | }
30 | }
31 |
32 | You can also call show() to re-show a panel.
33 |
34 |
35 | methods: {
36 | showPanel() {
37 | if (this.panelResult) {
38 | this.panelResult.show();
39 |
40 | return;
41 | }
42 |
43 | this.panelResult = this.$showPanel({
44 | component: 'your-component-name'
45 | });
46 | }
47 | }
48 |
49 | The PanelResult object also contains a promise property, which is a Promise.
50 |
51 |
52 | You can use this promise to receive data from your panel component.
53 |
54 |
55 | methods: {
56 | showPanel() {
57 | const panelResult = this.$showPanel({
58 | component: 'your-component-name'
59 | });
60 |
61 | panelResult.promise
62 | .then(result => {
63 | //result is whatever you're panel component passes to this.$emit("closePanel", {})
64 | });
65 | }
66 | }
67 |
68 | Learn more about the passing data here.
69 |
70 |
71 |
--------------------------------------------------------------------------------
/docs-src/components/Options/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
60 |
62 |
--------------------------------------------------------------------------------
/src/service.js:
--------------------------------------------------------------------------------
1 | import Promise from 'promise-polyfill';
2 |
3 | import eventBus from './eventBus';
4 | import utils from './utils/utils';
5 |
6 | let PANEL_DEFAULTS = {};
7 |
8 | class PanelResult {
9 | constructor(id, promise, panelOptions) {
10 | if (!id) throw new Error('id');
11 | if (!promise) throw new Error('promise');
12 | if (!panelOptions) throw new Error('panelOptions');
13 |
14 | this._id = id;
15 | this._promise = promise;
16 | this._panelOptions = panelOptions;
17 | }
18 |
19 | get promise() {
20 | return this._promise;
21 | }
22 |
23 | /**
24 | * @param {Object} [panel]
25 | * @param {Object} [panel.props] - any props you want to update
26 | */
27 | show(panel = {}) {
28 | const panelOptions = Object.assign(this._panelOptions, panel);
29 |
30 | return showPanel(panelOptions, this._id);
31 | }
32 |
33 | hide() {
34 | const panelOptions = Object.assign({
35 | id: this._id
36 | }, this._panelOptions);
37 |
38 | eventBus.$emit('hideSlideOutPanel', panelOptions);
39 | }
40 | }
41 |
42 | function showPanel(panelOptions, existingId) {
43 | if (!panelOptions) throw new Error('panelOptions is required');
44 | if (!panelOptions.component) throw new Error('panelOptions.component is required');
45 |
46 | const id = existingId || utils.generateGuid();
47 |
48 | panelOptions = Object.assign({}, PANEL_DEFAULTS, panelOptions);
49 |
50 | panelOptions.id = id;
51 | panelOptions.openOn = panelOptions.openOn || 'left';
52 |
53 | const promise = new Promise(resolve => {
54 | eventBus.$emit('showSlideOutPanel', panelOptions);
55 |
56 | eventBus.$once(`hideSlideOutPanel-${panelOptions.id}`, payload => {
57 | return resolve(payload.data);
58 | });
59 | });
60 |
61 | return new PanelResult(id, promise, panelOptions);
62 | }
63 |
64 | function showPanelStack(panelOptions) {
65 | if (!panelOptions || !panelOptions.length) throw new Error('panelOptions must be an array');
66 |
67 | const panelResults = panelOptions.map((panelOption) => {
68 | return showPanel(panelOption, this._id);
69 | });
70 |
71 | return panelResults;
72 | }
73 |
74 | function hideAllPanels() {
75 | eventBus.$emit('hideAllSlideOutPanels');
76 | }
77 |
78 | function setPanelDefaults(defaults) {
79 | if (!defaults) return;
80 |
81 | PANEL_DEFAULTS = defaults;
82 | }
83 |
84 | export default {
85 | showPanel,
86 | showPanelStack,
87 | hideAllPanels,
88 | setPanelDefaults
89 | };
90 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue2-slideout-panel",
3 | "version": "2.14.0",
4 | "description": "Lib for creating stackable panels using Vue JS",
5 | "main": "dist/vue-slideout-panel.js",
6 | "scripts": {
7 | "dev": "NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.js --open --inline --hot",
8 | "build:debug": "NODE_ENV=debug webpack --config build/webpack.dist.js",
9 | "build:release": "NODE_ENV=production webpack --config build/webpack.dist.js",
10 | "build:docs": "webpack --config build/webpack.docs.js",
11 | "build": "npm run build:debug && npm run build:release && npm run build:docs",
12 | "clean": "rimraf ./dist ./docs/docs.js"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://github.com/officert/vue-slideout-panel.git"
17 | },
18 | "keywords": [
19 | "vue",
20 | "vuejs",
21 | "panels",
22 | "stackable",
23 | "components",
24 | "ui"
25 | ],
26 | "author": "Tim Officer",
27 | "license": "MIT",
28 | "bugs": {
29 | "url": "https://github.com/officert/vue-slideout-panel/issues"
30 | },
31 | "homepage": "https://officert.github.io/vue-slideout-panel",
32 | "dependencies": {
33 | "promise-polyfill": "^8.1.0"
34 | },
35 | "peerDependencies": {
36 | "vue": "^2.5.22"
37 | },
38 | "devDependencies": {
39 | "autoprefixer": "^6.7.7",
40 | "babel-cli": "^6.26.0",
41 | "babel-core": "^6.26.0",
42 | "babel-eslint": "^8.0.3",
43 | "babel-loader": "^7.1.2",
44 | "babel-plugin-add-module-exports": "^0.2.1",
45 | "babel-plugin-transform-runtime": "^6.23.0",
46 | "babel-preset-env": "^1.6.1",
47 | "babel-preset-es2015": "^6.24.1",
48 | "babel-preset-stage-2": "^6.24.1",
49 | "chai": "^4.1.2",
50 | "css-loader": "^0.28.11",
51 | "deep-assign": "^2.0.0",
52 | "eslint": "^4.13.1",
53 | "eslint-loader": "^1.9.0",
54 | "eslint-plugin-vue": "^4.5.0",
55 | "extract-loader": "^2.0.1",
56 | "extract-text-webpack-plugin": "^3.0.2",
57 | "less": "^3.0.4",
58 | "less-loader": "^4.1.0",
59 | "mocha": "^4.0.1",
60 | "promise-polyfill": "^8.0.0",
61 | "rimraf": "^2.6.1",
62 | "style-loader": "^0.21.0",
63 | "vue": "^2.5.16",
64 | "vue-router": "^2.5.3",
65 | "vue-loader": "^11.3.3",
66 | "vue-style-loader": "^3.0.0",
67 | "vue-template-compiler": "^2.2.6",
68 | "webpack": "^3.10.0",
69 | "webpack-dev-server": "^2.7.1",
70 | "yargs": "^10.0.3"
71 | },
72 | "eslintConfig": {
73 | "root": true,
74 | "env": {
75 | "node": true
76 | },
77 | "extends": [
78 | "plugin:vue/essential",
79 | "eslint:recommended"
80 | ],
81 | "rules": {
82 | "quotes": [
83 | 2,
84 | "single",
85 | {
86 | "avoidEscape": true
87 | }
88 | ]
89 | },
90 | "parserOptions": {
91 | "parser": "babel-eslint"
92 | }
93 | },
94 | "postcss": {
95 | "plugins": {
96 | "autoprefixer": {}
97 | }
98 | },
99 | "browserslist": [
100 | "> 1%",
101 | "last 2 versions",
102 | "not ie <= 8"
103 | ]
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/SlideoutPanel/styles.less:
--------------------------------------------------------------------------------
1 | .slideout-panel-open {
2 | overflow: hidden;
3 | }
4 |
5 | .slideout-panel {
6 | display: block;
7 | transition: opacity 0.15s;
8 |
9 | .slideout-panel-bg {
10 | position: fixed;
11 | z-index: 1000;
12 | top: 0;
13 | left: 0;
14 | width: 100%;
15 | height: 100%;
16 | background-color: rgba(0, 0, 0, 0.5);
17 | transition: opacity 0.3s ease;
18 | overflow-y: hidden;
19 | z-index: 100;
20 |
21 | &.transparent {
22 | background-color: transparent;
23 | }
24 |
25 | &.fadeIn-enter {
26 | opacity: 0;
27 | }
28 |
29 | &.fadeIn-enter-to {
30 | opacity: 1;
31 | }
32 |
33 | &.fadeIn-leave {
34 | opacity: 1;
35 | }
36 |
37 | &.fadeIn-leave-to {
38 | opacity: 0;
39 | }
40 |
41 | &.fadeIn-leave-active {
42 | transition-delay: 400ms;
43 | }
44 | }
45 |
46 | .slideout-wrapper {
47 | position: static;
48 |
49 | .slideout {
50 | height: 100%;
51 | position: fixed;
52 | top: 0;
53 | bottom: 0;
54 | background: white;
55 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
56 | overflow-y: auto;
57 | transition-duration: 0.2s;
58 |
59 | &.open-on-left {
60 | right: auto;
61 | left: 0;
62 |
63 | &.slideIn-enter {
64 | transform: translateX(-100%);
65 | }
66 |
67 | &.slideIn-enter-to {
68 | transform: translateX(0);
69 | }
70 |
71 | &.slideIn-leave {
72 | transform: translateX(0);
73 | }
74 |
75 | &.slideIn-leave-to {
76 | transform: translateX(-100%);
77 | }
78 |
79 | &.slideIn-leave-active {
80 | transition-delay: 0;
81 | }
82 | }
83 |
84 | &.open-on-top {
85 | right: 0;
86 | left: 0;
87 | bottom: auto;
88 | top: 0;
89 |
90 | &.slideIn-enter {
91 | transform: translateY(-100%);
92 | }
93 |
94 | &.slideIn-enter-to {
95 | transform: translateY(0);
96 | }
97 |
98 | &.slideIn-leave {
99 | transform: translateY(0);
100 | }
101 |
102 | &.slideIn-leave-to {
103 | transform: translateY(-100%);
104 | }
105 |
106 | &.slideIn-leave-active {
107 | transition-delay: 0;
108 | }
109 | }
110 |
111 | &.open-on-bottom {
112 | right: 0;
113 | left: 0;
114 | bottom: 0;
115 | top: auto;
116 |
117 | &.slideIn-enter {
118 | transform: translateY(100%);
119 | }
120 |
121 | &.slideIn-enter-to {
122 | transform: translateY(0);
123 | }
124 |
125 | &.slideIn-leave {
126 | transform: translateY(0);
127 | }
128 |
129 | &.slideIn-leave-to {
130 | transform: translateY(100%);
131 | }
132 |
133 | &.slideIn-leave-active {
134 | transition-delay: 0;
135 | }
136 | }
137 |
138 | &.open-on-right {
139 | right: 0;
140 | left: auto;
141 |
142 | &.slideIn-enter {
143 | transform: translateX(100%);
144 | }
145 |
146 | &.slideIn-enter-to {
147 | transform: translateX(0);
148 | }
149 |
150 | &.slideIn-leave {
151 | transform: translateX(0);
152 | }
153 |
154 | &.slideIn-leave-to {
155 | transform: translateX(100%);
156 | }
157 | }
158 | }
159 | }
160 | }
161 |
--------------------------------------------------------------------------------
/docs-src/components/Panel1/template.html:
--------------------------------------------------------------------------------
1 |
2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tempus lorem. Cras ornare egestas mi in mattis. Sed volutpat velit sapien, eget suscipit quam tincidunt id. Vivamus cursus lorem lectus, a convallis turpis suscipit sed. Suspendisse
3 | turpis sapien, vestibulum id tempor in, imperdiet sit amet orci. Vivamus nisl sem, mollis et blandit vitae, auctor quis nulla. Curabitur sem est, faucibus a tempor id, tempor non justo. Fusce aliquet est vel libero elementum, ac euismod libero
4 | molestie. Morbi dignissim ullamcorper mi, ac interdum magna volutpat sit amet. Mauris pulvinar ligula quis augue pretium, ac vulputate nibh laoreet. Sed sed efficitur dui, pulvinar congue ex. Sed venenatis nibh eu eros sagittis porta. Sed sed
5 | maximus dui. Mauris ullamcorper lacus vitae dolor maximus, eget consectetur purus venenatis. In laoreet venenatis metus, a bibendum libero rhoncus id.
6 |
7 | Aenean nisl quam, aliquam vitae venenatis eu, consectetur at metus. Nunc rutrum, dui tempor vehicula tincidunt, odio turpis faucibus risus, at feugiat turpis leo eget arcu. Aenean vitae nunc erat. Pellentesque sed est nunc. Aenean tristique, arcu
8 | at pellentesque finibus, elit tortor aliquam velit, sed viverra nisl urna sed mauris. Donec viverra, urna nec tempor ornare, leo enim sollicitudin orci, id volutpat risus lorem ac leo. Ut eu ultrices est. Aenean eros neque, interdum ut nibh sed,
9 | mollis blandit risus. Nulla ac volutpat arcu. Aenean lobortis pharetra ligula ut iaculis.
10 |
11 | Nunc elit tortor, facilisis eu fringilla nec, luctus non tortor. Quisque euismod euismod erat, sit amet finibus magna sagittis nec. Aenean pulvinar quam ac mi dignissim dignissim. In dapibus efficitur turpis, efficitur tristique sapien mollis at.
12 | Cras quis leo consequat, ultrices massa in, suscipit mauris. Nullam dictum laoreet sapien, nec sagittis leo finibus vitae. Suspendisse lobortis metus tortor, et maximus purus condimentum a. Quisque iaculis aliquam ipsum vitae finibus. Fusce eu
13 | iaculis elit, sed vulputate felis.
14 |
15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tempus lorem. Cras ornare egestas mi in mattis. Sed volutpat velit sapien, eget suscipit quam tincidunt id. Vivamus cursus lorem lectus, a convallis turpis suscipit sed. Suspendisse
16 | turpis sapien, vestibulum id tempor in, imperdiet sit amet orci. Vivamus nisl sem, mollis et blandit vitae, auctor quis nulla. Curabitur sem est, faucibus a tempor id, tempor non justo. Fusce aliquet est vel libero elementum, ac euismod libero
17 | molestie. Morbi dignissim ullamcorper mi, ac interdum magna volutpat sit amet. Mauris pulvinar ligula quis augue pretium, ac vulputate nibh laoreet. Sed sed efficitur dui, pulvinar congue ex. Sed venenatis nibh eu eros sagittis porta. Sed sed
18 | maximus dui. Mauris ullamcorper lacus vitae dolor maximus, eget consectetur purus venenatis. In laoreet venenatis metus, a bibendum libero rhoncus id.
19 |
20 | Aenean nisl quam, aliquam vitae venenatis eu, consectetur at metus. Nunc rutrum, dui tempor vehicula tincidunt, odio turpis faucibus risus, at feugiat turpis leo eget arcu. Aenean vitae nunc erat. Pellentesque sed est nunc. Aenean tristique, arcu
21 | at pellentesque finibus, elit tortor aliquam velit, sed viverra nisl urna sed mauris. Donec viverra, urna nec tempor ornare, leo enim sollicitudin orci, id volutpat risus lorem ac leo. Ut eu ultrices est. Aenean eros neque, interdum ut nibh sed,
22 | mollis blandit risus. Nulla ac volutpat arcu. Aenean lobortis pharetra ligula ut iaculis.
23 |
24 | Nunc elit tortor, facilisis eu fringilla nec, luctus non tortor. Quisque euismod euismod erat, sit amet finibus magna sagittis nec. Aenean pulvinar quam ac mi dignissim dignissim. In dapibus efficitur turpis, efficitur tristique sapien mollis at.
25 | Cras quis leo consequat, ultrices massa in, suscipit mauris. Nullam dictum laoreet sapien, nec sagittis leo finibus vitae. Suspendisse lobortis metus tortor, et maximus purus condimentum a. Quisque iaculis aliquam ipsum vitae finibus. Fusce eu
26 | iaculis elit, sed vulputate felis.
27 |
28 |
--------------------------------------------------------------------------------
/src/components/SlideoutPanel/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
238 |
--------------------------------------------------------------------------------
/docs-src/components/App/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
14 |
15 |
459 |
--------------------------------------------------------------------------------
/dist/vue-slideout-panel.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * vue2-slideout-panel v2.14.0 (https://github.com/officert/vue-slideout-panel)
3 | * (c) 2021 Tim Officer
4 | * Released under the MIT License.
5 | */
6 | !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=33)}([function(e,t,n){var r=n(26)("wks"),o=n(27),i=n(3).Symbol,a="function"==typeof i;(e.exports=function(e){return r[e]||(r[e]=a&&i[e]||(a?i:o)("Symbol."+e))}).store=r},function(e,t){var n=e.exports={version:"2.6.12"};"number"==typeof __e&&(__e=n)},function(e,t,n){e.exports=!n(12)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t,n){var r=n(7),o=n(49),i=n(50),a=Object.defineProperty;t.f=n(2)?Object.defineProperty:function(e,t,n){if(r(e),t=i(t,!0),r(n),o)try{return a(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){var r=n(3),o=n(1),i=n(19),a=n(6),s=n(8),u=function(e,t,n){var l,c,f,d=e&u.F,p=e&u.G,v=e&u.S,h=e&u.P,m=e&u.B,y=e&u.W,g=p?o:o[t]||(o[t]={}),_=g.prototype,b=p?r:v?r[t]:(r[t]||{}).prototype;p&&(n=t);for(l in n)(c=!d&&b&&void 0!==b[l])&&s(g,l)||(f=c?b[l]:n[l],g[l]=p&&"function"!=typeof b[l]?n[l]:m&&c?i(f,r):y&&b[l]==f?function(e){var t=function(t,n,r){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,n)}return new e(t,n,r)}return e.apply(this,arguments)};return t.prototype=e.prototype,t}(f):h&&"function"==typeof f?i(Function.call,f):f,h&&((g.virtual||(g.virtual={}))[l]=f,e&u.R&&_&&!_[l]&&a(_,l,f)))};u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,e.exports=u},function(e,t,n){var r=n(4),o=n(13);e.exports=n(2)?function(e,t,n){return r.f(e,t,o(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){var r=n(11);e.exports=function(e){if(!r(e))throw TypeError(e+" is not an object!");return e}},function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},function(e,t){var n=Math.ceil,r=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?r:n)(e)}},function(e,t){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t){e.exports={}},function(e,t,n){var r=n(26)("keys"),o=n(27);e.exports=function(e){return r[e]||(r[e]=o(e))}},function(e,t,n){var r=n(10);e.exports=function(e){return Object(r(e))}},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t){e.exports=!0},function(e,t,n){var r=n(48);e.exports=function(e,t,n){if(r(e),void 0===t)return e;switch(n){case 1:return function(n){return e.call(t,n)};case 2:return function(n,r){return e.call(t,n,r)};case 3:return function(n,r,o){return e.call(t,n,r,o)}}return function(){return e.apply(t,arguments)}}},function(e,t,n){var r=n(11),o=n(3).document,i=r(o)&&r(o.createElement);e.exports=function(e){return i?o.createElement(e):{}}},function(e,t,n){var r=n(55),o=n(28);e.exports=Object.keys||function(e){return r(e,o)}},function(e,t,n){var r=n(23),o=n(10);e.exports=function(e){return r(o(e))}},function(e,t,n){var r=n(24);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==r(e)?e.split(""):Object(e)}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var r=n(9),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},function(e,t,n){var r=n(1),o=n(3),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(e.exports=function(e,t){return i[e]||(i[e]=void 0!==t?t:{})})("versions",[]).push({version:r.version,mode:n(18)?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+r).toString(36))}},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t,n){var r=n(4).f,o=n(8),i=n(0)("toStringTag");e.exports=function(e,t,n){e&&!o(e=n?e:e.prototype,i)&&r(e,i,{configurable:!0,value:t})}},function(e,t,n){e.exports=n(67)},function(e,t,n){(function(e){function r(e,t){this._id=e,this._clearFn=t}var o=void 0!==e&&e||"undefined"!=typeof self&&self||window,i=Function.prototype.apply;t.setTimeout=function(){return new r(i.call(setTimeout,o,arguments),clearTimeout)},t.setInterval=function(){return new r(i.call(setInterval,o,arguments),clearInterval)},t.clearTimeout=t.clearInterval=function(e){e&&e.close()},r.prototype.unref=r.prototype.ref=function(){},r.prototype.close=function(){this._clearFn.call(o,this._id)},t.enroll=function(e,t){clearTimeout(e._idleTimeoutId),e._idleTimeout=t},t.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},t._unrefActive=t.active=function(e){clearTimeout(e._idleTimeoutId);var t=e._idleTimeout;t>=0&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},t))},n(68),t.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==e&&e.setImmediate||this&&this.setImmediate,t.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==e&&e.clearImmediate||this&&this.clearImmediate}).call(t,n(17))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(30),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default=new o.default,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(34),i=r(o),a=n(71),s=r(a);"undefined"!=typeof window&&window.Vue&&(window.vue2PanelDebug&&console.log("installing Vue js plugin - browser"),window.Vue.use({install:function(e){e.component("slideout-panel",i.default),e.prototype.$showPanel=s.default.showPanel,e.prototype.$showPanelStack=s.default.showPanelStack,e.prototype.$hideAllPanels=s.default.hideAllPanels,e.prototype.$setPanelDefaults=s.default.setPanelDefaults}}),window.vueSlideoutPanelService=s.default),t.default={install:function(e){e.component("slideout-panel",i.default),e.prototype.$showPanel=s.default.showPanel,e.prototype.$showPanelStack=s.default.showPanelStack,e.prototype.$hideAllPanels=s.default.hideAllPanels,e.prototype.$setPanelDefaults=s.default.setPanelDefaults},VueSlideoutPanel:i.default,vueSlideoutPanelService:s.default},e.exports=t.default},function(e,t,n){n(35);var r=n(40)(n(41),n(70),null,null);e.exports=r.exports},function(e,t,n){var r=n(36);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(38)("081f8195",r,!0,{})},function(e,t,n){t=e.exports=n(37)(!1),t.push([e.i,".slideout-panel-open{overflow:hidden}.slideout-panel{display:block;transition:opacity .15s}.slideout-panel .slideout-panel-bg{position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);transition:opacity .3s ease;overflow-y:hidden;z-index:100}.slideout-panel .slideout-panel-bg.transparent{background-color:transparent}.slideout-panel .slideout-panel-bg.fadeIn-enter{opacity:0}.slideout-panel .slideout-panel-bg.fadeIn-enter-to,.slideout-panel .slideout-panel-bg.fadeIn-leave{opacity:1}.slideout-panel .slideout-panel-bg.fadeIn-leave-to{opacity:0}.slideout-panel .slideout-panel-bg.fadeIn-leave-active{transition-delay:.4s}.slideout-panel .slideout-wrapper{position:static}.slideout-panel .slideout-wrapper .slideout{height:100%;position:fixed;top:0;bottom:0;background:#fff;transition-timing-function:cubic-bezier(.215,.61,.355,1);overflow-y:auto;transition-duration:.2s}.slideout-panel .slideout-wrapper .slideout.open-on-left{right:auto;left:0}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-enter{transform:translateX(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave{transform:translateX(0)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave-to{transform:translateX(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-top{right:0;left:0;bottom:auto;top:0}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-enter{transform:translateY(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave{transform:translateY(0)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave-to{transform:translateY(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-bottom{right:0;left:0;bottom:0;top:auto}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-enter{transform:translateY(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave{transform:translateY(0)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave-to{transform:translateY(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-right{right:0;left:auto}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-enter{transform:translateX(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-leave{transform:translateX(0)}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-leave-to{transform:translateX(100%)}",""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;on.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],o=0;o0},panelTopVisibleZIndex:function(){var e=this.panels.filter(function(e){return e.visible});return e.length>0?Math.max.apply(Math,(0,a.default)(e.map(function(e){return e.styles["z-index"]}))):100}},methods:{getPanelClasses:function(e){var t={};return"left"===e.openOn?t["open-on-left"]=!0:"bottom"===e.openOn?t["open-on-bottom"]=!0:"top"===e.openOn?t["open-on-top"]=!0:t["open-on-right"]=!0,e.cssClass&&(t[e.cssClass]=!0),t},closeCurrentPanel:function(e){if(this.panels&&this.panels.length){var t=this.panels[this.panels.length-1];this.closePanel(t,e)}},closePanel:function(e,t){var n=this;if(!e)throw new Error("panel");l.default.$emit("hideSlideOutPanel-"+e.id,{id:e.id,data:t}),e.visible=!1,this.panelsVisible||this.removeBodyClass(),setTimeout(function(){if(!e.keepAlive){var t=n.panels.indexOf(e);n.removePanelStylesheet(e),n.panels.splice(t,1)}},300)},onShowSlideOutPanel:function(e){var t=this.panels.filter(function(t){return t.id===e.id})[0];t&&(t.props=e.props,e=t),e.styles={"z-index":this.panels.length+100},"top"===e.openOn||"bottom"===e.openOn?(e.styles.width,e.height?e.height.endsWith&&e.height.endsWith("px")?e.styles.height=e.height:e.styles.height=e.height+"px":e.styles.height="900px"):(e.styles.height,e.width?e.width.endsWith&&e.width.endsWith("px")?e.styles.width=e.width:e.styles.width=e.width+"px":e.styles.width="900px"),e.visible=!0,e.cssId="slide-out-panel-"+e.id,e.stylesheetId="slide-out-panel-styles-"+e.id,e.inlineComponent=!o(e.component),e.componentName=o(e.component)?e.component:e.component.name,window.vue2PanelDebug&&console.log("panel",e),t||(this.createPanelStylesheet(e),this.panels.push(e)),this.addBodyClass()},onHideSlideOutPanel:function(e){this.closeCurrentPanel(e)},onHideAllSideOutPanels:function(){var e=this;(this.panels||[]).reverse().forEach(function(t){e.closePanel(t)})},createPanelStylesheet:function(e){var t=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css";var r="@media screen and (max-width:"+e.styles.width+") {\n #"+e.cssId+" {\n width: 100% !important;\n }\n }";n.styleSheet?n.styleSheet.cssText=r:n.appendChild(document.createTextNode(r)),n.id=e.stylesheetId,t.appendChild(n)},removePanelStylesheet:function(e){for(var t=document.querySelectorAll("link[rel=stylesheet]"),n=document.getElementById(e.stylesheetId),r=0;r=t.length?{value:void 0,done:!0}:(e=r(t,n),this._i+=e.length,{value:e,done:!1})})},function(e,t,n){var r=n(9),o=n(10);e.exports=function(e){return function(t,n){var i,a,s=String(o(t)),u=r(n),l=s.length;return u<0||u>=l?e?"":void 0:(i=s.charCodeAt(u),i<55296||i>56319||u+1===l||(a=s.charCodeAt(u+1))<56320||a>57343?e?s.charAt(u):i:e?s.slice(u,u+2):a-56320+(i-55296<<10)+65536)}}},function(e,t,n){"use strict";var r=n(18),o=n(5),i=n(51),a=n(6),s=n(14),u=n(52),l=n(29),c=n(59),f=n(0)("iterator"),d=!([].keys&&"next"in[].keys()),p=function(){return this};e.exports=function(e,t,n,v,h,m,y){u(n,t,v);var g,_,b,w=function(e){if(!d&&e in O)return O[e];switch(e){case"keys":case"values":return function(){return new n(this,e)}}return function(){return new n(this,e)}},x=t+" Iterator",$="values"==h,C=!1,O=e.prototype,k=O[f]||O["@@iterator"]||h&&O[h],A=k||w(h),S=h?$?w("entries"):A:void 0,T="Array"==t?O.entries||k:k;if(T&&(b=c(T.call(new e)))!==Object.prototype&&b.next&&(l(b,x,!0),r||"function"==typeof b[f]||a(b,f,p)),$&&k&&"values"!==k.name&&(C=!0,A=function(){return k.call(this)}),r&&!y||!d&&!C&&O[f]||a(O,f,A),s[t]=A,s[x]=p,h)if(g={values:$?A:w("values"),keys:m?A:w("keys"),entries:S},y)for(_ in g)_ in O||i(O,_,g[_]);else o(o.P+o.F*(d||C),t,g);return g}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,n){e.exports=!n(2)&&!n(12)(function(){return 7!=Object.defineProperty(n(20)("div"),"a",{get:function(){return 7}}).a})},function(e,t,n){var r=n(11);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t,n){e.exports=n(6)},function(e,t,n){"use strict";var r=n(53),o=n(13),i=n(29),a={};n(6)(a,n(0)("iterator"),function(){return this}),e.exports=function(e,t,n){e.prototype=r(a,{next:o(1,n)}),i(e,t+" Iterator")}},function(e,t,n){var r=n(7),o=n(54),i=n(28),a=n(15)("IE_PROTO"),s=function(){},u=function(){var e,t=n(20)("iframe"),r=i.length;for(t.style.display="none",n(58).appendChild(t),t.src="javascript:",e=t.contentWindow.document,e.open(),e.write("