├── close.png
├── .babelrc
├── .gitignore
├── .editorconfig
├── main.js
├── .vscode
    └── settings.json
├── main.cdn.js
├── vite.config.js
├── package.json
├── README.md
└── index.vue


/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rop7/vue-window-modal/HEAD/close.png


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "stage-3"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log
 5 | yarn-error.log
 6 | 
 7 | # Editor directories and files
 8 | .idea
 9 | *.suo
10 | *.ntvs*
11 | *.njsproj
12 | *.sln
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import index from './index.vue'
 2 | 
 3 | const install = (Vue) => {
 4 |   Vue.mixin({
 5 |     components: {
 6 |       vueWindowModal: index
 7 |     }
 8 |   })
 9 | }
10 | 
11 | export default { install }
12 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "files.exclude": {
 3 |         "**/.git": true,
 4 |         "**/.svn": true,
 5 |         "**/.hg": true,
 6 |         "**/CVS": true,
 7 |         "**/.DS_Store": true,
 8 |         "**/Thumbs.db": true
 9 |     },
10 |     "hide-files.files": []
11 | }


--------------------------------------------------------------------------------
/main.cdn.js:
--------------------------------------------------------------------------------
1 | import VueWindowModal from './index.vue'
2 | 
3 | // Exporta o componente para uso global
4 | export default VueWindowModal;
5 | 
6 | // Opcional: expõe o componente no escopo global para uso direto via CDN
7 | if (typeof window !== 'undefined' && window.Vue) {
8 |   window.Vue.component('VueWindowModal', VueWindowModal);
9 | }


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import { createVuePlugin } from 'vite-plugin-vue2';
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [createVuePlugin()],
 6 |   build: {
 7 |     lib: {
 8 |       entry: './main.cdn.js',
 9 |       name: 'VueWindowModal',
10 |       fileName: 'vue-window-modal',
11 |       formats: ['umd'],
12 |     },
13 |     rollupOptions: {
14 |       external: ['vue'],
15 |       output: {
16 |         globals: {
17 |           vue: 'Vue',
18 |         },
19 |       },
20 |     },
21 |   }
22 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-window-modal",
 3 |   "version": "1.0.0",
 4 |   "description": "Windows like modal component for Vue.js",
 5 |   "main": "main.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "Rodolfo Paranhos",
10 |   "license": "ISC",
11 |   "devDependencies": {
12 |     "@babel/core": "^7.0.0",
13 |     "@vue/babel-preset-app": "^4.0.0",
14 |     "vite": "^5.0.0",
15 |     "vite-plugin-vue2": "^1.0.0"
16 |   },
17 |   "dependencies": {
18 |     "vue-template-compiler": "^2.6.14"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # vue-window-modal
 3 | 
 4 | Simple window like modal for Vue.js
 5 | 
 6 | ![`!\[Alt Text\](https://media.giphy.com/media/63Jv8Vy8bK0OHYURYQ/giphy.gif)`](https://media.giphy.com/media/63Jv8Vy8bK0OHYURYQ/giphy.gif)
 7 | 
 8 | **Install**
 9 | 
10 |     npm install --save https://github.com/ropbla9/vue-window-modal
11 | 
12 | **Init plugin**
13 | 
14 |     import  VueWindowModal  from  'vue-window-modal'
15 |     
16 |     Vue.use(VueWindowModal)
17 | 
18 | **Use**
19 | 
20 |     <vue-window-modal  :active="visibleFormCrud"  title="Client 1"  v-on:clickClose="visibleFormCrudUpdate(false)">
21 | 	    FOO TEXT ON DEFAULT SLOT :DDDDD 1
22 |     </vue-window-modal>
23 |     
24 |     <vue-window-modal  :active="visibleFormCrudTwo"  title="Client 2"  v-on:clickClose="visibleFormCrudUpdateTwo(false)">
25 | 	    FOO TEXT ON DEFAULT SLOT :DDDDD 2
26 |     </vue-window-modal>
27 |     
28 |     <vue-window-modal  :active="visibleFormCrudThree"  title="Client 3"  v-on:clickClose="visibleFormCrudThree = false">
29 |     	    FOO TEXT ON DEFAULT SLOT :DDDDD 3
30 |         </vue-window-modal>
31 | 
32 | It's not well written but properly working. Feel free to pull request.
33 | 
34 | PS: Since it's not pre-compiled you will need a blunder (webpack) to run into your project. 
35 | 


--------------------------------------------------------------------------------
/index.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     .vue-window-modal {
  3 |         position: fixed;
  4 |         background-color: #f7f7f7;
  5 |         box-shadow: 7px 7px 50px 5px rgba(0,0,0,0.13);
  6 |         border: 1px solid #8080802b;
  7 |         border-radius: 3px;
  8 |         display: none;
  9 |         max-height: 90vh;
 10 |         max-width: 90vw;
 11 |     }
 12 | 
 13 |     .vue-window-modal .vue-window-modal-header {
 14 |         background-color: #585858;
 15 |         padding: 5px;
 16 |         padding-left: 8px;
 17 |         padding-right: 8px;
 18 |         border-top-left-radius: 3px;
 19 |         border-top-right-radius: 3px;
 20 |         color: white;
 21 |         height: 40px;
 22 |         font-size: 16px;
 23 |         cursor: -webkit-grab;
 24 |         user-select: none;
 25 |         font-weight: bold;
 26 |     }
 27 | 
 28 |     .vue-window-modal .vue-window-modal-header h2 {
 29 |         display: inline-block;
 30 |         position: relative;
 31 |         top: 3px;
 32 |     }
 33 | 
 34 |     .vue-window-modal .vue-window-modal-header img {
 35 |         float: right;
 36 |         cursor: pointer;
 37 |         position: relative;
 38 |         top: 6px;
 39 |     }
 40 | </style>
 41 | 
 42 | <template>
 43 |     <div
 44 |         :id="windowId"
 45 |         class="vue-window-modal"
 46 |         :style="{width, height, backgroundColor}">
 47 |         <div :id="windowId + '-' + 'header'" class="vue-window-modal-header">
 48 |             <h2>{{title}}</h2>
 49 |             <img src="./close.png" @click="active = false">
 50 |         </div>
 51 |         <slot name="default"></slot>
 52 |     </div>
 53 | </template>
 54 | 
 55 | <script>
 56 | 
 57 |     export default {
 58 |         name: 'vue-window-modal',
 59 |         data() {
 60 |             return {
 61 |                 windowId: (function(){
 62 |                     const one = Math.floor((Math.random() * 1000000) + 1) + ''
 63 |                     const two = Math.floor((Math.random() * 1000000) + 1) + ''
 64 |                     const three = Math.floor((Math.random() * 1000000) + 1) + ''
 65 |                     return  one + two + three
 66 |                 })()
 67 |             }
 68 |         },
 69 |         props: {
 70 |             active: Boolean,
 71 |             title: String,
 72 |             width: {
 73 |                 type: String,
 74 |                 default: '600px'
 75 |             },
 76 |             height: {
 77 |                 type: String,
 78 |                 default: '600px'
 79 |             },
 80 |             backgroundColor: {
 81 |                 type: String,
 82 |                 default: '#f2f2f2'
 83 |             }
 84 |         },
 85 |         methods: {
 86 |             getThisWindowAndHeaderElements() {
 87 |                 return {
 88 |                     window: window.document.getElementById(this.windowId),
 89 |                     windowHeader: window.document.getElementById(this.windowId + '-' + 'header')
 90 |                 }
 91 |             },
 92 |             dragElement(elmnt) {
 93 | 
 94 |                 var context = this
 95 | 
 96 |                 var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 97 | 
 98 |                 const _window = this.getThisWindowAndHeaderElements().window
 99 |                 const _windowHeader = this.getThisWindowAndHeaderElements().windowHeader
100 | 
101 |                 _windowHeader.onmousedown = dragMouseDown
102 | 
103 |                 function dragMouseDown(e) {
104 |                     e = e || window.event;
105 |                     // get the mouse cursor position at startup:
106 |                     pos3 = e.clientX;
107 |                     pos4 = e.clientY;
108 |                     document.onmouseup = closeDragElement;
109 |                     // call a function whenever the cursor moves:
110 |                     document.onmousemove = elementDrag;
111 |                     _windowHeader.style.cursor = '-webkit-grabbing'
112 |                 }
113 | 
114 |                 function elementDrag(e) {
115 |                     e = e || window.event;
116 |                     // calculate the new cursor position:
117 |                     pos1 = pos3 - e.clientX;
118 |                     pos2 = pos4 - e.clientY;
119 |                     pos3 = e.clientX;
120 |                     pos4 = e.clientY;
121 |                     // set the element's new position:
122 | 
123 |                     if (_window.offsetTop < (window.innerHeight - 35)) {
124 |                         _window.style.top = (_window.offsetTop - pos2) + "px";
125 |                     } else context.centerWindow()
126 |                     if (_window.offsetLeft < (window.innerWidth - 35)) {
127 |                         _window.style.left = (_window.offsetLeft - pos1) + "px";
128 |                     } else context.centerWindow()
129 | 
130 |                 }
131 | 
132 |                 function closeDragElement() {
133 |                     /* stop moving when mouse button is released:*/
134 |                     document.onmouseup = null;
135 |                     document.onmousemove = null;
136 |                     _windowHeader.style.cursor = '-webkit-grab'
137 |                 }
138 |             },
139 |             getHighestWindow() {
140 |                 const windows = Array.from(window.document.getElementsByClassName('vue-window-modal'))
141 |                 const zIndexs = windows.map(el => Number(el.style.zIndex))
142 |                 const highest = Math.max.apply(Math, zIndexs)
143 |                 return highest
144 |             },
145 |             sendWindowToHighest() {
146 |                 this.getThisWindowAndHeaderElements().window.style.zIndex = this.getHighestWindow() + 1
147 |             },
148 |             centerWindow() {
149 |                 var myElement = this.getThisWindowAndHeaderElements().window,
150 |                     pageWidth = window.innerWidth,
151 |                     pageHeight = window.innerHeight,
152 |                     myElementWidth = myElement.offsetWidth,
153 |                     myElementHeight = myElement.offsetHeight;
154 |                 const diff = this.activeWindows() * 20
155 |                 myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + diff + "px";
156 |                 myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + diff + "px";
157 |             },
158 |             checkTheresIsAnyAnotherCenteredWindow() { // not being used anymore but working well...
159 |                 const windows = Array.from(window.document.getElementsByClassName('vue-window-modal'))
160 |                 const centeredWindows = windows.filter(el => {
161 |                     var myElement = el,
162 |                         pageWidth = window.innerWidth,
163 |                         pageHeight = window.innerHeight,
164 |                         myElementWidth = myElement.offsetWidth,
165 |                         myElementHeight = myElement.offsetHeight;
166 | 
167 |                     return el.style.top === (pageHeight / 2) - (myElementHeight / 2) + "px" &&
168 |                            el.style.left === (pageWidth / 2) - (myElementWidth / 2) + "px"
169 |                 })
170 |                 return centeredWindows
171 |             },
172 |             activeWindows() {
173 |                 const windows = Array.from(window.document.getElementsByClassName('vue-window-modal'))
174 |                 const openedWindows = windows.filter(el => {
175 |                     return el.style.display === 'block'
176 |                 })
177 |                 return openedWindows.length
178 |             },
179 |             hide() {
180 |                 this.getThisWindowAndHeaderElements().window.style.display = 'none'
181 |             },
182 |             show() {
183 |                 this.getThisWindowAndHeaderElements().window.style.display = 'block'
184 |             }
185 |         },
186 |         watch: {
187 |             active (newValue) {
188 |                 if (newValue) {
189 |                     this.show()
190 |                     this.sendWindowToHighest()
191 |                     this.centerWindow()
192 |                 } else {
193 |                     this.hide()
194 |                 }
195 |             }
196 |         },
197 |         mounted() {
198 |             
199 |             this.dragElement()
200 |             
201 |             this.getThisWindowAndHeaderElements().window.addEventListener('click', () => {
202 |                 this.sendWindowToHighest()
203 |             })
204 | 
205 |             this.getThisWindowAndHeaderElements().window.style.zIndex = 9999
206 |         
207 |             if (this.active) {
208 |                 this.show()
209 |                 this.sendWindowToHighest()
210 |                 this.centerWindow()
211 |             }
212 |         }
213 |     }
214 | 
215 | </script>
216 |  


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