├── src
    ├── eventBus.js
    ├── assets
    │   └── css
    │   │   ├── tailwind.css
    │   │   └── tooltip.css
    ├── main.js
    ├── components
    │   ├── examples
    │   │   ├── ClosableInside.vue
    │   │   ├── Alert.vue
    │   │   └── SignInForm.vue
    │   ├── common
    │   │   ├── Button.vue
    │   │   └── Modal.vue
    │   └── ModalRoot.vue
    └── App.vue
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── tailwind.js
├── postcss.config.js
├── .gitignore
├── README.md
└── package.json


/src/eventBus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | export const ModalBus = new Vue()
4 | 


--------------------------------------------------------------------------------
/src/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DJanoskova/Vue.js-Modal-context/HEAD/public/favicon.ico


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


--------------------------------------------------------------------------------
/tailwind.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   theme: {
3 |     extend: {}
4 |   },
5 |   variants: {},
6 |   plugins: []
7 | }
8 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "plugins": [
3 |     require('tailwindcss')('tailwind.js'),
4 |     require('autoprefixer')(),
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import VTooltip from 'v-tooltip'
 4 | 
 5 | import '@/assets/css/tailwind.css'
 6 | import '@/assets/css/tooltip.css'
 7 | 
 8 | Vue.use(VTooltip)
 9 | 
10 | Vue.config.productionTip = false
11 | 
12 | new Vue({
13 |   render: h => h(App),
14 | }).$mount('#app')
15 | 


--------------------------------------------------------------------------------
/src/components/examples/ClosableInside.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p class="mb-4">
 4 |       This dialog is closable from the inside of the component!
 5 |     </p>
 6 |     <div class="text-right">
 7 |       <Button @click="$emit('onClose')" color="gray">Close</Button>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import Button from '../common/Button';
14 | 
15 | export default {
16 |   components: { Button }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/common/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button :class="classes" @click="$emit('click', $event)">
 3 |     <slot />
 4 |   </button>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     color: {
11 |       type: String,
12 |       default: 'teal'
13 |     }
14 |   },
15 |   computed: {
16 |     classes () {
17 |       const { color } = this
18 |       return [`bg-${color}-500 hover:bg-${color}-600 text-white font-bold py-2 px-4 rounded-lg uppercase text-sm`]
19 |     }
20 |   }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/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>modal-demo</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but modal-demo 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # modal-demo
 2 | 
 3 | A demo project to show Modal window management in Vue.js using EventBus
 4 | 
 5 | Article: https://medium.com/@danajanoskova/vue-js-manage-your-modal-window-s-effortlessly-using-eventbus-518977195eed
 6 | 
 7 | Demo app: https://vue-modal-context.netlify.com/
 8 | 
 9 | ## Project setup
10 | ```
11 | npm install
12 | ```
13 | 
14 | ### Compiles and hot-reloads for development
15 | ```
16 | npm run serve
17 | ```
18 | 
19 | ### Compiles and minifies for production
20 | ```
21 | npm run build
22 | ```
23 | 
24 | ### Run your tests
25 | ```
26 | npm run test
27 | ```
28 | 
29 | ### Lints and fixes files
30 | ```
31 | npm run lint
32 | ```
33 | 
34 | ### Customize configuration
35 | See [Configuration Reference](https://cli.vuejs.org/config/).
36 | 


--------------------------------------------------------------------------------
/src/components/examples/Alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="classes">
 3 |     <span class="block sm:inline">{{ text }}</span>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     type: {
11 |       type: String,
12 |       value: 'error' | 'info' | 'success' | 'warning'
13 |     },
14 |     text: String
15 |   },
16 |   computed: {
17 |     color () {
18 |       switch (this.type) {
19 |         case 'error':
20 |           return 'red'
21 |         case 'success':
22 |           return 'teal'
23 |         case 'warning':
24 |           return 'orange'
25 |         case 'info':
26 |         default:
27 |           return 'gray'
28 |       }
29 |     },
30 |     classes () {
31 |       const { color } = this
32 |       return [`bg-${color}-400 border border-${color}-200 text-white px-4 py-3 rounded-lg relative`]
33 |     }
34 |   },
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "modal-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.3.2",
12 |     "v-tooltip": "^2.0.2",
13 |     "vue": "^2.6.10"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "^4.0.0",
17 |     "@vue/cli-plugin-eslint": "^4.0.0",
18 |     "@vue/cli-service": "^4.0.0",
19 |     "babel-eslint": "^10.0.3",
20 |     "eslint": "^5.16.0",
21 |     "eslint-plugin-vue": "^5.0.0",
22 |     "sass": "^1.19.0",
23 |     "sass-loader": "^8.0.0",
24 |     "tailwindcss": "^1.1.3",
25 |     "vue-template-compiler": "^2.6.10"
26 |   },
27 |   "eslintConfig": {
28 |     "root": true,
29 |     "env": {
30 |       "node": true
31 |     },
32 |     "extends": [
33 |       "plugin:vue/essential",
34 |       "eslint:recommended"
35 |     ],
36 |     "rules": {},
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     }
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions"
44 |   ]
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/examples/SignInForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form class="mb-4">
 3 |     <div class="mb-4">
 4 |       <label class="block text-gray-700 text-sm font-bold mb-2">
 5 |         Username
 6 |       </label>
 7 |       <input
 8 |         class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
 9 |         type="text" placeholder="Username">
10 |     </div>
11 |     <div class="mb-6">
12 |       <label class="block text-gray-700 text-sm font-bold mb-2">
13 |         Password
14 |       </label>
15 |       <input
16 |         class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
17 |         type="password" placeholder="******************">
18 |     </div>
19 |     <div class="flex items-center justify-between">
20 |       <button
21 |         class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
22 |         type="button">
23 |         Sign In
24 |       </button>
25 |       <a class="inline-block align-baseline font-bold text-sm text-teal-500 hover:text-teal-800" href="#">
26 |         Forgot Password?
27 |       </a>
28 |     </div>
29 |   </form>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/src/components/ModalRoot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Modal :isOpen="!!component" :title="title" @onClose="handleModalClose">
 3 |     <component :is="component" @onClose="handleClose" v-bind="props" />
 4 |   </Modal>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { ModalBus } from '../eventBus'
 9 | 
10 | import Modal from './common/Modal'
11 | 
12 | export default {
13 |   data () {
14 |     return {
15 |       component: null,
16 |       title: '',
17 |       props: null,
18 |       closeOnClick: true
19 |     }
20 |   },
21 |   created () {
22 |     ModalBus.$on('open', ({ component, title = '', props = null, closeOnClick = true }) => {
23 |       this.component = component
24 |       this.title = title
25 |       this.props = props
26 |       this.closeOnClick = closeOnClick
27 |     })
28 |     document.addEventListener('keyup', this.handleKeyup)
29 |   },
30 |   beforeDestroy () {
31 |     document.removeEventListener('keyup', this.handleKeyup)
32 |   },
33 |   methods: {
34 |     handleModalClose (force = false) {
35 |       if (!this.closeOnClick && !force) return
36 |       this.handleClose()
37 |     },
38 |     handleClose () {
39 |       this.component = null
40 |     },
41 |     handleKeyup (e) {
42 |       if (e.keyCode === 27) this.handleClose()
43 |     }
44 |   },
45 |   components: { Modal }
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div class="content">
 4 |       <Button @click="openSuccessAlert" class="mr-2">
 5 |         Success alert
 6 |       </Button>
 7 |       <Button @click="openDangerAlert" class="mr-2">
 8 |         Danger alert
 9 |       </Button>
10 |       <Button @click="openClosableInside" class="mr-2">
11 |         Close from inside
12 |       </Button>
13 |       <Button @click="openSignIn" v-tooltip.bottom="'Cannot be closed by clicking outside'">
14 |         Sign in form
15 |       </Button>
16 |     </div>
17 |     <ModalRoot />
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import { ModalBus } from './eventBus';
23 | 
24 | import ModalRoot from './components/ModalRoot'
25 | import Button from './components/common/Button'
26 | import SignInForm from './components/examples/SignInForm'
27 | import Alert from './components/examples/Alert';
28 | import ClosableInside from './components/examples/ClosableInside';
29 | 
30 | export default {
31 |   name: 'app',
32 |   components: {
33 |     Button,
34 |     ModalRoot
35 |   },
36 |   methods: {
37 |     openSuccessAlert () {
38 |       ModalBus.$emit('open', {
39 |         component: Alert,
40 |         props: { text: 'Everything is working great!', type: 'success' }
41 |       })
42 |     },
43 |     openDangerAlert () {
44 |       const props = {
45 |         type: 'error',
46 |         text: 'The server returned 500 again! omg!'
47 |       }
48 |       ModalBus.$emit('open', { component: Alert, title: 'An error has occured', props })
49 |     },
50 |     openClosableInside () {
51 |       ModalBus.$emit('open', { component: ClosableInside, title: 'Close dialog from component' })
52 |     },
53 |     openSignIn () {
54 |       ModalBus.$emit('open', { component: SignInForm, title: 'New user', closeOnClick: false })
55 |     }
56 |   }
57 | }
58 | </script>
59 | 
60 | <style scoped>
61 | .content {
62 |   width: 100vw;
63 |   height: 100vh;
64 |   display: flex;
65 |   flex-direction: row;
66 |   justify-content: center;
67 |   align-items: center
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/src/components/common/Modal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="fade">
  3 |     <div class="modal-backdrop"
  4 |       v-show="isOpen"
  5 |       :class="{open: isOpen}"
  6 |       @click="$emit('onClose')">
  7 | 
  8 |       <div class="modal-dialog" :class="{open: isOpen}" @click.stop>
  9 |         <button class="modal-close" @click="$emit('onClose', true)">
 10 |           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 11 |             <path
 12 |               d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
 13 |             <path d="M0 0h24v24H0z" fill="none" />
 14 |           </svg>
 15 |         </button>
 16 |         <div class="modal-title" v-if="title">{{ title }}</div>
 17 |         <div class="modal-body">
 18 |           <slot />
 19 |         </div>
 20 |       </div>
 21 | 
 22 |     </div>
 23 |   </transition>
 24 | </template>
 25 | 
 26 | <script>
 27 | export default {
 28 |   props: {
 29 |     isOpen: Boolean,
 30 |     title: String
 31 |   }
 32 | }
 33 | </script>
 34 | 
 35 | <style scoped>
 36 | .fade-enter-active, .fade-leave-active {
 37 |   transition: 0.5s;
 38 | }
 39 | 
 40 | .fade-enter, .fade-leave-to {
 41 |   opacity: 0;
 42 | }
 43 | 
 44 | .fade-enter .modal-dialog, .fade-leave-to .modal-dialog {
 45 |   transform: translateY(-20%);
 46 | }
 47 | 
 48 | .modal-backdrop {
 49 |   background: rgba(250, 250, 250, 0.8);
 50 |   position: fixed;
 51 |   top: 0;
 52 |   left: 0;
 53 |   width: 100%;
 54 |   height: 100%;
 55 |   display: flex;
 56 |   flex-direction: row;
 57 |   justify-content: center;
 58 |   align-items: center
 59 | }
 60 | 
 61 | .modal-dialog {
 62 |   width: 30rem;
 63 |   background: rgb(255, 255, 255);
 64 |   padding: 1.5rem 2rem;
 65 |   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 66 |   border-radius: 0.3rem;
 67 |   transition: 0.5s;
 68 |   position: relative;
 69 | }
 70 | 
 71 | .modal-close {
 72 |   background: none;
 73 |   border: none;
 74 |   position: absolute;
 75 |   top: 0.5rem;
 76 |   right: 0.5rem;
 77 |   outline: none;
 78 |   height: 1.2rem;
 79 |   width: 1.2rem;
 80 |   display: flex;
 81 |   align-items: center;
 82 |   justify-content: center;
 83 | }
 84 | 
 85 | .modal-close svg {
 86 |   fill: rgb(150, 150, 150);
 87 | }
 88 | 
 89 | .modal-close svg:hover {
 90 |   fill: rgb(100, 100, 100);
 91 | }
 92 | 
 93 | .modal-title {
 94 |   font-weight: bold;
 95 |   font-size: 1.3rem;
 96 |   margin-bottom: 1rem;
 97 |   color: rgb(100, 100, 100);
 98 | }
 99 | 
100 | .modal-body {
101 |   color: rgb(180, 180, 180);
102 | }
103 | </style>
104 | 


--------------------------------------------------------------------------------
/src/assets/css/tooltip.css:
--------------------------------------------------------------------------------
  1 | .tooltip {
  2 |     display: block !important;
  3 |     z-index: 10000;
  4 | }
  5 | 
  6 | .tooltip .tooltip-inner {
  7 |     background: black;
  8 |     color: white;
  9 |     border-radius: 16px;
 10 |     padding: 5px 10px 4px;
 11 | }
 12 | 
 13 | .tooltip .tooltip-arrow {
 14 |     width: 0;
 15 |     height: 0;
 16 |     border-style: solid;
 17 |     position: absolute;
 18 |     margin: 5px;
 19 |     border-color: black;
 20 |     z-index: 1;
 21 | }
 22 | 
 23 | .tooltip[x-placement^="top"] {
 24 |     margin-bottom: 5px;
 25 | }
 26 | 
 27 | .tooltip[x-placement^="top"] .tooltip-arrow {
 28 |     border-width: 5px 5px 0 5px;
 29 |     border-left-color: transparent !important;
 30 |     border-right-color: transparent !important;
 31 |     border-bottom-color: transparent !important;
 32 |     bottom: -5px;
 33 |     left: calc(50% - 5px);
 34 |     margin-top: 0;
 35 |     margin-bottom: 0;
 36 | }
 37 | 
 38 | .tooltip[x-placement^="bottom"] {
 39 |     margin-top: 5px;
 40 | }
 41 | 
 42 | .tooltip[x-placement^="bottom"] .tooltip-arrow {
 43 |     border-width: 0 5px 5px 5px;
 44 |     border-left-color: transparent !important;
 45 |     border-right-color: transparent !important;
 46 |     border-top-color: transparent !important;
 47 |     top: -5px;
 48 |     left: calc(50% - 5px);
 49 |     margin-top: 0;
 50 |     margin-bottom: 0;
 51 | }
 52 | 
 53 | .tooltip[x-placement^="right"] {
 54 |     margin-left: 5px;
 55 | }
 56 | 
 57 | .tooltip[x-placement^="right"] .tooltip-arrow {
 58 |     border-width: 5px 5px 5px 0;
 59 |     border-left-color: transparent !important;
 60 |     border-top-color: transparent !important;
 61 |     border-bottom-color: transparent !important;
 62 |     left: -5px;
 63 |     top: calc(50% - 5px);
 64 |     margin-left: 0;
 65 |     margin-right: 0;
 66 | }
 67 | 
 68 | .tooltip[x-placement^="left"] {
 69 |     margin-right: 5px;
 70 | }
 71 | 
 72 | .tooltip[x-placement^="left"] .tooltip-arrow {
 73 |     border-width: 5px 0 5px 5px;
 74 |     border-top-color: transparent !important;
 75 |     border-right-color: transparent !important;
 76 |     border-bottom-color: transparent !important;
 77 |     right: -5px;
 78 |     top: calc(50% - 5px);
 79 |     margin-left: 0;
 80 |     margin-right: 0;
 81 | }
 82 | 
 83 | .tooltip.popover .popover-inner {
 84 |     background: #f9f9f9;
 85 |     color: black;
 86 |     padding: 24px;
 87 |     border-radius: 5px;
 88 |     box-shadow: 0 5px 30px rgba(black, .1);
 89 | }
 90 | 
 91 | .tooltip.popover .popover-arrow {
 92 |     border-color: #f9f9f9;
 93 | }
 94 | 
 95 | .tooltip[aria-hidden='true'] {
 96 |     visibility: hidden;
 97 |     opacity: 0;
 98 |     transition: opacity .15s, visibility .15s;
 99 | }
100 | 
101 | .tooltip[aria-hidden='false'] {
102 |     visibility: visible;
103 |     opacity: 1;
104 |     transition: opacity .15s;
105 | }
106 | 


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