├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── deploy.sh
├── docs
    ├── .vuepress
    │   ├── components
    │   │   └── StackableModalDemo.vue
    │   ├── config.js
    │   └── style.styl
    └── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── assets
        ├── logo.png
        ├── modal.scss
        └── transitions
        │   └── translate-fade.scss
    ├── components
        └── StackModal.vue
    └── index.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | ie 11


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 
23 | # nikola
24 | /docs/.vuepress/dist
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Innologica Ltd
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Stackable modal
 2 | 
 3 | Stackable modal is a library for modal dialogs which can be stacked by using z-index position. 
 4 | The component uses bootstrap for styling the modal but DOES NOT include it by default - 
 5 | you need to import it yourself.
 6 | 
 7 | When you open a second dialog the first one is scaled to 0.9 and position behind. You have always 3 visible modals.
 8 | 
 9 | ## Installation
10 | 
11 | ```shell
12 | npm i @innologica/vue-stackable-modal --save
13 | ```
14 | 
15 | or 
16 | 
17 | ```shell
18 | yarn add @innologica/vue-stackable-modal
19 | ```
20 | 
21 | import to use:
22 | 
23 | ```JS
24 | import StackModal from '@innologica/vue-stackable-modal'
25 | ```
26 | 
27 | More info and demo https://innologica.github.io/vue-stackable-modal/
28 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # abort on errors
 4 | set -e
 5 | 
 6 | # build
 7 | npm run docs:build
 8 | 
 9 | # navigate into the build output directory
10 | cd docs/.vuepress/dist
11 | 
12 | # if you are deploying to a custom domain
13 | # echo 'www.example.com' > CNAME
14 | 
15 | git init
16 | git add -A
17 | git commit -m 'deploy'
18 | 
19 | # if you are deploying to https://<USERNAME>.github.io
20 | # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
21 | 
22 | # if you are deploying to https://<USERNAME>.github.io/<REPO>
23 | git push -f git@github.com:Innologica/vue-stackable-modal.git master:gh-pages
24 | 
25 | 
26 | cd -


--------------------------------------------------------------------------------
/docs/.vuepress/components/StackableModalDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="py-4">
 3 |         <p>I have added some demo css classes in order to demonstrate some of the possibilities of the component - <a href="#sample-css">source here</a> </p>
 4 |         <div class="d-flex">
 5 |             <div>
 6 |                 <button class="btn btn-primary" @click="show=true">Open modal</button>
 7 |             </div>
 8 |             <div class="d-flex align-items-center mx-3">
 9 |                 <label>Modal class</label>
10 |             </div>
11 |             <div class="d-flex align-items-center">
12 |                 <select v-model="modalClass" class="form-control">
13 |                     <option value="">none</option>
14 |                     <option value="modal-fullscreen">modal-fullscreen</option>
15 |                     <option value="modal-xl">modal-xl</option>
16 |                     <option value="modal-xxl">modal-xxl</option>
17 |                     <option value="modal-90per">modal-90per</option>
18 |                     <option value="modal-border-0">modal-border-0</option>
19 |                 </select>
20 |             </div>
21 |         </div>
22 | 
23 |         <stack-modal
24 |                 :show="show"
25 |                 title="Modal #1"
26 |                 @close="show=false"
27 |                 :modal-class="{ [modalClass]: true }"
28 |                 :saveButton="{ visible: false }"
29 |                 :cancelButton="{ title: 'Close', btnClass: { 'btn btn-primary': true } }"
30 |         >
31 |             <button class="btn btn-info" @click="show_second=true">Open modal 2</button>
32 | 
33 |             <hr/>
34 |             <p>Additional options: </p>
35 |             <pre class="language-vue">
36 |   ...
37 |   :saveButton="{ visible: false }"
38 |   :cancelButton="{ title: 'Close' }"
39 |   ...
40 |             </pre>
41 |         </stack-modal>
42 | 
43 |         <stack-modal
44 |                 :show="show_second"
45 |                 @close="show_second=false"
46 |         >
47 |             <p>I have no title so the modal-header is missing.</p>
48 | 
49 |             <button class="btn btn-warning" @click="show_third=true">Open modal 3</button>
50 |         </stack-modal>
51 | 
52 |         <stack-modal
53 |                 :show="show_third"
54 |                 @close="show_third=false"
55 |                 title="Last modal"
56 |                 :close-on-escape="false"
57 |         >
58 |             <p>This is the last modal. This modal has closeOnEscape set to false so you cannot close it via ESC key.</p>
59 |         </stack-modal>
60 | 
61 |     </div>
62 | </template>
63 | 
64 | <script>
65 |   import StackModal from '../../../src/components/StackModal'
66 | 
67 |   export default {
68 |     name: "StackableModalDemo",
69 |     components: {StackModal},
70 |     data () {
71 |       return {
72 |         show: false,
73 |         show_second: false,
74 |         show_third: false,
75 |         modalClass: ''
76 |       }
77 |     },
78 |   }
79 | </script>
80 | 
81 | <style>
82 |     @import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
83 | </style>
84 | 
85 | <style lang="scss">
86 |     @import "../../../src/assets/transitions/translate-fade.scss";
87 |     @import "../../../src/assets/modal";
88 | </style>


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   ga: 'UA-141652960-1',
 3 |   base: '/vue-stackable-modal/',
 4 |   title: 'Stackable modals library',
 5 |   description: 'Stackable modal by Innologica',
 6 |   themeConfig: {
 7 |     nav: [
 8 |       { text: 'Github', link: 'https://github.com/Innologica/vue-stackable-modal' }
 9 |     ],
10 |     sidebar: 'auto'
11 |   },
12 | }


--------------------------------------------------------------------------------
/docs/.vuepress/style.styl:
--------------------------------------------------------------------------------
1 | // showing default values
2 | $accentColor = #3eaf7c
3 | $textColor = #2c3e50
4 | $borderColor = #eaecef
5 | $codeBgColor = #282c34
6 | 
7 | .navbar {
8 |   position: fixed !important;
9 | }


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
  1 | # Stackable modal
  2 | 
  3 | Stackable modals is a library for modal dialogs which can be infinitely stacked. 
  4 | The component uses bootstrap for styling the modal but DOES NOT include it by default - 
  5 | you need to import it yourself.
  6 | 
  7 | When you open a second dialog the first one is scaled to 0.9 and position behind
  8 | 
  9 | ## Installation
 10 | 
 11 | ```shell
 12 | npm i @innologica/vue-stackable-modal --save
 13 | ```
 14 | 
 15 | or 
 16 | 
 17 | ```shell
 18 | yarn add @innologica/vue-stackable-modal
 19 | ```
 20 | 
 21 | import to use:
 22 | 
 23 | ```JS
 24 | import StackModal from '@innologica/vue-stackable-modal'
 25 | ```
 26 | 
 27 | ## Example
 28 | 
 29 | <StackableModalDemo/>
 30 | 
 31 | ### Source code
 32 | <<< @/docs/.vuepress/components/StackableModalDemo.vue
 33 | 
 34 | ### Sample css
 35 | <<< @/src/assets/modal.scss
 36 | 
 37 | ## Props
 38 | 
 39 | | Prop        | Type           | Default  |Description  |
 40 | | ------------- |:-------------| -----|-----|
 41 | | show      | Boolean | false |Shows/hides the modal|
 42 | | title      | String |  |The title of the modal shown in .modal-header div. If empty the div is not rendered|
 43 | | modalClass      | Object | {} |:class object which is attached to the modal dialog element |
 44 | | hasBackdrop      | Boolean | true |Whether to display backdrop element for this dialog. It is added to the body with calculated z-index. |
 45 | | saveButton      | Object | {  title: 'Save',  visible: true,  btnClass: {'btn btn-primary': true}}| Save button config |
 46 | | cancelButton      | Object | {  title: 'Cancel',  visible: true,  btnClass: {'btn btn-outline-secondary': true}}| Cancel button config |
 47 | | transition      | String | translate-fade* | Transition to use when showing the modal.You need to include scss with the transition |
 48 | | closeOnEscape      | Boolean | true | If enabled the component attaches event handler on document body which monitors for ESC and emits the 'close' event. |
 49 | 
 50 | *for the default transition you need to @import "~@innologica/vue-stackable-modal/src/assets/transitions/translate-fade.scss";
 51 | 
 52 | ## Events
 53 | 
 54 | | Event | Params | Description |
 55 | |-------| --------|------------|
 56 | | save |  <i>none</i>| When the save button is pressed
 57 | | close |  <i>none</i>| When the cancel button is pressed, or the "x" in the title is clicked, or escape is pressed. <b>Yoo need to close the modal via the show property</b>|
 58 | | show |  show, index, total| Called when the modal show/hides. show - open/close, index - the index in the current stack, total - total modals open|
 59 | 
 60 | ## Slots
 61 | 
 62 | ### default 
 63 | This slot is the content of the modal.
 64 | 
 65 | ### modal-header
 66 | 
 67 | Default value:
 68 | 
 69 | ```vue
 70 | <slot name="modal-header">
 71 |     <div class="modal-header" v-if="title">
 72 |         <h5 class="modal-title">{{title}}</h5>
 73 |         <a class="close" aria-label="Close" @click.stop="$emit('close')">
 74 |             <span aria-hidden="true">×</span>
 75 |         </a>
 76 |     </div>
 77 | </slot>
 78 | ```
 79 | 
 80 | The modal header is rendered above the content. If title is empty then it is not rendered
 81 | 
 82 | ### modal-footer 
 83 | 
 84 | Default value:
 85 | 
 86 | ```vue
 87 | <slot name="modal-footer">
 88 |     <div class="modal-footer">
 89 |         <button
 90 |                 v-if="saveButtonOptions.visible"
 91 |                 type="button"
 92 |                 @click="$emit('save')"
 93 |                 :class="{ ...saveButtonOptions.btnClass }"
 94 |         >{{saveButtonOptions.title}}
 95 |         </button>
 96 |         <button
 97 |                 type="button"
 98 |                 :class="{ ...cancelButtonOptions.btnClass }"
 99 |                 data-dismiss="modal"
100 |                 @click.stop="$emit('close')"
101 |         >{{cancelButtonOptions.title}}
102 |         </button>
103 |     </div>
104 | </slot>
105 | ```
106 | This is the modal footer with the 2 buttons. If you just want to hide the footer you can provide empty footer slot e.g.:
107 | ```vue
108 | <div slot="modal-footer"></div>
109 | ```
110 | 
111 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@innologica/vue-stackable-modal",
 3 |   "version": "0.1.10",
 4 |   "scripts": {
 5 |     "lint": "vue-cli-service lint",
 6 |     "lib": "vue-cli-service build --target lib --name vue-stackable-modal ./src/index.js",
 7 |     "docs:dev": "vuepress dev docs",
 8 |     "docs:build": "vuepress build docs",
 9 |     "prepublishOnly": "npm run lib"
10 |   },
11 |   "dependencies": {
12 |     "core-js": "^2.6.5",
13 |     "vue": "^2.6.10"
14 |   },
15 |   "files": [
16 |     "dist",
17 |     "src"
18 |   ],
19 |   "main": "dist/vue-stackable-modal.umd.min.js",
20 |   "jsnext:main": "dist/vue-stackable-modal.umd.min.js",
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "^3.8.0",
23 |     "@vue/cli-plugin-eslint": "^3.8.0",
24 |     "@vue/cli-service": "^3.8.0",
25 |     "babel-eslint": "^10.0.1",
26 |     "eslint": "^5.16.0",
27 |     "eslint-plugin-vue": "^5.0.0",
28 |     "node-sass": "^4.9.0",
29 |     "sass-loader": "^7.1.0",
30 |     "vue-template-compiler": "^2.6.10",
31 |     "babel-preset-vue": "^2.0.2",
32 |     "@babel/core": "^7.4.5",
33 |     "babel-loader": "^8.0.6",
34 |     "vuepress": "^0.14.11"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Innologica/vue-stackable-modal/23b381a1ff31a06e10cc4d132ec892d10e24a7e8/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-stackable-modal</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-stackable-modal doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Innologica/vue-stackable-modal/23b381a1ff31a06e10cc4d132ec892d10e24a7e8/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/modal.scss:
--------------------------------------------------------------------------------
 1 | $modal-xl: 900px;
 2 | $modal-xxl: 1040px;
 3 | $modal-xxxl: 1180px;
 4 | $modal-90per: 90%;
 5 | 
 6 | @media (min-width: 768px) {
 7 |   .modal-xl {
 8 |     max-width: $modal-xl;
 9 |   }
10 |   .modal-xxl {
11 |     max-width: $modal-xxl;
12 |   }
13 |   .modal-xxxl{
14 |     max-width: $modal-xxxl;
15 |   }
16 |   .modal-90per {
17 |     max-width: $modal-90per;
18 |   }
19 | }
20 | 
21 | .modal-fullscreen {
22 |   max-width: 100%;
23 |   width: 100%;
24 |   margin: 0;
25 |   height: 100%;
26 | 
27 |   .modal-body {
28 |     padding: 0;
29 |   }
30 | 
31 |   .modal-content {
32 |     height: 100%;
33 |   }
34 | 
35 |   &.aside .modal-content {
36 |     height: auto;
37 |   }
38 | 
39 |   &.modal-dialog.aside.modal-stack1 .modal-content {
40 |     transform: scale(1) translate(0, 0) !important;
41 |   }
42 | }
43 | 
44 | //modal without border
45 | .modal-dialog.modal-border-0 {
46 |   .modal-content {
47 |     border: none;
48 |   }
49 | }
50 | 
51 | @media screen and (min-width: 800px){
52 |   .modal-dialog {
53 |     &.modal-xxl{
54 |       width: 98%;
55 |       max-width: 1040px;
56 |     }
57 |   }
58 | }
59 | 
60 | 
61 | @media screen and (min-width: 640px){
62 |   .modal-dialog {
63 |     &.modal-xxl{
64 |       width: 98%;
65 |       max-width: 1040px;
66 |     }
67 |   }
68 | }
69 | 
70 | @media screen and (max-width: 420px){
71 |   .modal-dialog,
72 |   .modal-content{
73 |     overflow: auto;
74 |   }
75 | }


--------------------------------------------------------------------------------
/src/assets/transitions/translate-fade.scss:
--------------------------------------------------------------------------------
 1 | $transition-duration: 250ms !default;
 2 | $translate-offset: 50px !default;
 3 | $timing-function: cubic-bezier(.53,2,.36,.85) !default;
 4 | 
 5 | //translate fade (right to left)
 6 | .translate-fade-enter-active, .translate-fade-leave-active {
 7 |   transition: all $transition-duration;
 8 |   transition-timing-function: $timing-function;
 9 | }
10 | .translate-fade-enter, .translate-fade-leave-active {
11 |   opacity: 0;
12 | }
13 | .translate-fade-enter {
14 |   transform: translateX($translate-offset);
15 | }
16 | .translate-fade-leave-active {
17 |   transform: translateX($translate-offset);
18 | }


--------------------------------------------------------------------------------
/src/components/StackModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <transition :name="transition" appear>
  3 |         <div v-if="show" class="modal fade show" :style="getStyle" @mousedown="mouseDown" ref="modal">
  4 |             <div class="modal-dialog" role="document" :class="getClass">
  5 |                 <div class="modal-content">
  6 |                     <slot name="modal-header">
  7 |                         <div class="modal-header" v-if="title">
  8 |                             <h5 class="modal-title">{{title}}</h5>
  9 |                             <a class="close" aria-label="Close" @click.stop="$emit('close')">
 10 |                                 <span aria-hidden="true">×</span>
 11 |                             </a>
 12 |                         </div>
 13 |                     </slot>
 14 |                     <div class="modal-body">
 15 |                         <slot></slot>
 16 |                     </div>
 17 |                     <slot name="modal-footer">
 18 |                         <div class="modal-footer">
 19 |                             <button
 20 |                                     v-if="saveButtonOptions.visible"
 21 |                                     type="button"
 22 |                                     @click="$emit('save')"
 23 |                                     :class="{ ...saveButtonOptions.btnClass }"
 24 |                             >{{saveButtonOptions.title}}
 25 |                             </button>
 26 |                             <button
 27 |                                     v-if="cancelButtonOptions.visible"
 28 |                                     type="button"
 29 |                                     :class="{ ...cancelButtonOptions.btnClass }"
 30 |                                     data-dismiss="modal"
 31 |                                     @click.stop="$emit('close')"
 32 |                             >{{cancelButtonOptions.title}}
 33 |                             </button>
 34 |                         </div>
 35 |                     </slot>
 36 |                 </div>
 37 |             </div>
 38 |         </div>
 39 |     </transition>
 40 | </template>
 41 | 
 42 | <script>
 43 |   // import Vue from 'vue'
 44 | 
 45 |   const modals = {count: 0}
 46 |   // const modals = Vue.observable({count: 0})
 47 | 
 48 |   export default {
 49 |     name: 'StackModal',
 50 |     props: {
 51 |       /* Shows/hides the modal */
 52 |       show: Boolean,
 53 |       /* The title of the modal shown in .modal-header div. If empty title is not rendered */
 54 |       title: String,
 55 |       /* :class object which is attached to the modal dialog element */
 56 |       modalClass: Object,
 57 |       /* Whether to display backdrop element for this dialog. It is added to the body with calculated z-index.*/
 58 |       hasBackdrop: {
 59 |         type: Boolean,
 60 |         default: true
 61 |       },
 62 |       /* Save button config */
 63 |       saveButton: {
 64 |         type: Object,
 65 |         default: () => ({})
 66 |       },
 67 |       /* Cancel button config */
 68 |       cancelButton: {
 69 |         type: Object,
 70 |         default: () => ({})
 71 |       },
 72 |       /*
 73 |       * Transition to use when showing the modal.
 74 |       * You need to include scss @innologica/vue-stackable-modal/src/assets/transitions/translate-fade.scss
 75 |       * */
 76 |       transition: {
 77 |         type: String,
 78 |         default: 'translate-fade'
 79 |       },
 80 |       closeOnEscape: {
 81 |         type: Boolean,
 82 |         default: true
 83 |       },
 84 |       closeOnClickOutside: {
 85 |         type: Boolean,
 86 |         default: true
 87 |       }
 88 |     },
 89 |     data () {
 90 |       return {
 91 |         backdrop: null,
 92 |         zIndex: 0,
 93 |         modals
 94 |       }
 95 |     },
 96 |     mounted () {
 97 |       if (this.show) {
 98 |         modals.count++
 99 |         this.zIndex = modals.count
100 |         this.$emit('show', true, this.zIndex, modals.count)
101 |       }
102 | 
103 |       this.checkBackdrop()
104 |     },
105 |     destroyed () {
106 |       if (this.show) {
107 |         modals.count--
108 |         this.zIndex = modals.count
109 |         this.$emit('show', false, this.zIndex, modals.count)
110 |       }
111 | 
112 |       if (this.backdrop && this.show)
113 |         document.body.removeChild(this.backdrop)
114 |       if (modals.count === 0) {
115 |         document.body.classList.remove('modal-open')
116 |       }
117 |     },
118 |     methods: {
119 |       handleEscape (e) {
120 |         if (this.show && e.keyCode === 27 && this.zIndex === this.totalModals) {
121 |           this.$emit('close')
122 |         }
123 |       },
124 |       mouseDown (event) {
125 |         if (this.closeOnClickOutside && this.$refs.modal === event.target) {
126 |           this.$emit('clickOutside', event)
127 |           this.$emit('close')
128 |           event.preventDefault()
129 |         }
130 |       },
131 |       checkBackdrop () {
132 |         if (!this.hasBackdrop)
133 |           return
134 | 
135 |         if (this.show && this.zIndex === 1) {
136 |           document.body.classList.add('modal-open')
137 |         } else if (!this.show && this.zIndex === this.totalModals) {
138 |           // enableScroll()
139 |         }
140 | 
141 |         if (this.show) {
142 |           this.backdrop = document.createElement('div')
143 |           this.backdrop.classList.add('modal-backdrop', 'fade', 'show')
144 |           this.backdrop.style.zIndex = 1048 + this.zIndex * 2;
145 |           document.body.appendChild(this.backdrop)
146 |         } else {
147 |           if (this.backdrop) {
148 |             document.body.removeChild(this.backdrop)
149 |             // document.body.classList.remove('modal-open')
150 |           }
151 |         }
152 |       }
153 |     },
154 |     computed: {
155 |       totalModals () {
156 |         //global static variable :)
157 |         return modals.count
158 |       },
159 |       getStyle () {
160 |         let style = {}
161 |         if (this.show)
162 |           style.display = 'block'
163 |         style['z-index'] = 1048 + this.zIndex * 2 + 1
164 |         return style
165 |       },
166 |       getClass () {
167 |         let classes = {}
168 |         // if (this.zIndex !== this.totalModals) {
169 |           let idx = this.totalModals - this.zIndex
170 |           classes['modal-stack-' + idx] = true
171 |           classes['modal-order-' + this.zIndex] = true
172 |         // }
173 |         classes.aside = this.zIndex !== this.totalModals
174 |         return {...classes, ...this.modalClass}
175 |       },
176 |       saveButtonOptions () {
177 |         const saveButtonDefaults = {
178 |           title: 'Save',
179 |           visible: true,
180 |           btnClass: {'btn btn-primary': true}
181 |         }
182 | 
183 |         return {...saveButtonDefaults, ...this.saveButton}
184 |       },
185 |       cancelButtonOptions () {
186 |         const cancelButtonDefaults = {
187 |           title: 'Cancel',
188 |           visible: true,
189 |           btnClass: {'btn btn-outline-secondary': true}
190 |         }
191 | 
192 |         return {...cancelButtonDefaults, ...this.cancelButton}
193 |       }
194 |     },
195 |     watch: {
196 |       show (value) {
197 |         value ? modals.count++ : modals.count--
198 |         this.zIndex = modals.count
199 |         this.$emit('show', value, this.zIndex, modals.count)
200 | 
201 |         if (!value && modals.count === 0) {
202 |           document.body.classList.remove('modal-open')
203 |         }
204 |         this.checkBackdrop()
205 |       },
206 |       closeOnEscape: {
207 |         handler (value) {
208 |           if(typeof document !== 'undefined') {
209 |             value ? document.addEventListener('keydown', this.handleEscape) : document.removeEventListener('keydown', this.handleEscape)
210 |           }
211 |         },
212 |         immediate: true
213 |       }
214 |     }
215 |   }
216 | </script>
217 | 
218 | <style lang="scss" scoped>
219 |     //stack modals effect
220 |     $distance: 40px; /* distance between stacked modals*/
221 |     $modal-translate-z: -60px; /* The first modal translateZ value*/
222 | 
223 |     @mixin transform($n) {
224 |         transform: scale(0.9) /* rotateY(45deg) translateZ($translateZ)*/
225 |         translate(- 2rem * $n, $n * -50px);
226 |         transform-origin: top left;
227 |         /*margin-top: (-$n - 3) * 1.75rem;*/
228 |     }
229 | 
230 |     @mixin preserve-3d() {
231 |         transform-style: preserve-3d;
232 |     }
233 | 
234 |     .modal {
235 |         .modal-dialog {
236 |             .modal-content {
237 |                 transition: all 0.15s;
238 |             }
239 | 
240 |             &.aside {
241 |                 @include preserve-3d();
242 | 
243 |                 &.modal-stack-1 .modal-content {
244 |                     @include transform(1);
245 |                 }
246 | 
247 |                 &.modal-stack-2 .modal-content {
248 |                     @include transform(2);
249 |                 }
250 | 
251 |                 &.modal-stack-3 .modal-content {
252 |                     @include transform(3);
253 |                 }
254 |             }
255 |         }
256 |     }
257 | </style>
258 | 
259 | <style lang="scss" scoped>
260 |     .aside {
261 |         .modal-visible-aside {
262 |             display: block;
263 |         }
264 | 
265 |         .modal-invisible-aside {
266 |             display: none;
267 |         }
268 |     }
269 | 
270 |     .modal-visible-aside {
271 |         display: none;
272 |     }
273 | 
274 | </style>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import StackModal from './components/StackModal'
 2 | 
 3 | const install = (Vue) => {
 4 |   Vue.component('StackModal', StackModal)
 5 | }
 6 | 
 7 | // auto install if used in browser
 8 | if (typeof window !== 'undefined' && window.Vue) {
 9 |   install(window.Vue)
10 | }
11 | 
12 | export { StackModal as default }


--------------------------------------------------------------------------------