├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .lintstagedrc ├── .npmignore ├── .prettierrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── build └── rollup.config.js ├── docs ├── .nojekyll ├── README.md ├── _navbar.md ├── _sidebar.md ├── docFiles │ ├── Changelogs.md │ ├── Contributors.md │ ├── License.md │ ├── Store.md │ ├── about.md │ ├── animation.md │ ├── backgroundColor.md │ ├── close.md │ ├── component.md │ ├── defaultOptions.md │ ├── delete.md │ ├── demo.md │ ├── destroyed.md │ ├── disable.md │ ├── entries.md │ ├── firstModal.md │ ├── get.md │ ├── keys.md │ ├── mounted.md │ ├── multipleInstances.md │ ├── npm.md │ ├── nuxt.md │ ├── open.md │ ├── openFromStore.md │ ├── params.md │ ├── props.md │ ├── save.md │ ├── timer.md │ ├── v-model.md │ └── vue.md └── index.html ├── examples ├── example.vue ├── modal.vue └── modal2.vue ├── package-lock.json ├── package.json ├── src ├── entry.js ├── events.js ├── store.js ├── wrapper.vue └── xmodal.vue └── todo.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], 7 | parserOptions: { 8 | ecmaVersion: 2020 9 | }, 10 | rules: { 11 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 12 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | .VSCodeCounter 5 | releases 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,css,html,vue}": [ 3 | "prettier --write", 4 | "vue-cli-service lint", 5 | "git add" 6 | ], 7 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .docs 2 | docs 3 | /docs 4 | 5 | .*.swp 6 | ._* 7 | .DS_Store 8 | .git 9 | .hg 10 | .npmrc 11 | .lock-wscript 12 | .svn 13 | .wafpickle-* 14 | config.gypi 15 | CVS 16 | npm-debug.log -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": false, 4 | "tabWidth": 4 5 | } 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG.md 2 | 3 | ## 1.0.0 (released) 4 | 5 | Features: 6 | 7 | - Added a global collection to save modal options globally 8 | - Add openFromStore() method to let users open modals from modals collection 9 | - Add save() method to let users save modals in the collection 10 | - Add delete() method to let users delete modals in the collection 11 | - Add get() method to let users gets modals from the collection 12 | - Add entries() method to let users get all modals stored in the collection 13 | 14 | 15 | ## 0.3.0 (released) 16 | 17 | Features: 18 | 19 | - add import() keyword for importing components 20 | 21 | 22 | ## 0.2.0 (released) 23 | 24 | Features: 25 | 26 | - add support for callback functions 27 | 28 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/XeniacDev/xmodal/issues). If you wish to work on this project: 4 | 5 | 1. [Fork the project](https://github.com/XeniacDev/xmodal/archive/master.zip) 6 | 2. Create your feature branch (`git checkout -b new-feature-branch`) 7 | 3. Commit your changes (`git commit -am 'add new feature'`) 8 | 4. Push to the branch (`git push origin new-feature-branch`) 9 | 5. [Submit a pull request!](https://github.com/XeniacDev/xmodal/pulls) 10 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020-present XeniacDev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚠️ 2 | #### I won't maintain this package anymore. but you still can use it for training purposes and in small/medium scale projects 3 | I will be working on a more robust and better version of xmodal and we will release it in the future. 4 | 5 | -------------------- 6 | 7 |

8 | 9 | ![](https://i.imgur.com/WguzBpv.gif) 10 | 11 | [![npm version](https://badge.fury.io/js/xmodal-vue.svg)](https://badge.fury.io/js/xmodal-vue) 12 | [![npm](https://img.shields.io/npm/dm/xmodal-vue.svg)](https://www.npmjs.com/package/xmodal-vue) 13 | [![npm](https://img.shields.io/npm/dt/xmodal-vue.svg)](https://www.npmjs.com/package/xmodal-vue) 14 | 15 | ------------ 16 | 17 | # 🎉 Xmodal-Vue 18 | 19 |
20 | 21 | [demo](https://xeniac.ir/github/xmodal "demo") 22 | [codesandbox](https://codesandbox.io/s/shy-bird-1jjb3?file=/src/App.vue "codesandbox") 23 | 24 | ================================== 25 | 26 | ## get rid of those ugly 💩 predefined modals 27 | xmodal will let you define custom components and show them as modal. **YOUR APP YOUR RULES!** - too simple and easy 28 | 29 |

30 | 31 | This little component comes with customization tools that will make your life a little bit easier. 32 | 33 | ------------ 34 | 35 | 36 | # [documentation](https://mediv0.github.io/xmodal/#/) 37 | 38 | 39 | ------------ 40 | ## Contributing 41 | 42 | This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/XeniacDev/xmodal/issues). If you wish to work on this project: 43 | 44 | 1. [Fork the project](https://github.com/XeniacDev/xmodal/archive/master.zip) 45 | 2. Create your feature branch (`git checkout -b new-feature-branch`) 46 | 3. Commit your changes (`git commit -am 'add new feature'`) 47 | 4. Push to the branch (`git push origin new-feature-branch`) 48 | 5. [Submit a pull request!](https://github.com/XeniacDev/xmodal/pulls) 49 | 50 | 51 | ## contributors 🍰 52 | [![William Gates](https://avatars1.githubusercontent.com/u/50080886?s=96&v=4")](https://github.com/WilliamGates99 "William Gates") 53 | 54 | ------------ 55 | ## License 📄 56 | 57 | This project is licensed under the MIT License - see the LICENSE file for details. 58 | -------------------------------------------------------------------------------- /build/rollup.config.js: -------------------------------------------------------------------------------- 1 | // rollup.config.js 2 | import vue from "rollup-plugin-vue"; 3 | import buble from "rollup-plugin-buble"; 4 | import commonjs from "rollup-plugin-commonjs"; 5 | import replace from "rollup-plugin-replace"; 6 | import { terser } from "rollup-plugin-terser"; 7 | import minimist from "minimist"; 8 | 9 | const argv = minimist(process.argv.slice(2)); 10 | 11 | const baseConfig = { 12 | input: "src/entry.js", 13 | plugins: { 14 | preVue: [ 15 | replace({ 16 | "process.env.NODE_ENV": JSON.stringify("production") 17 | }), 18 | commonjs() 19 | ], 20 | vue: { 21 | css: true, 22 | template: { 23 | isProduction: false 24 | } 25 | }, 26 | postVue: [ 27 | buble({ 28 | transforms: { asyncAwait: false } 29 | }) 30 | ] 31 | } 32 | }; 33 | 34 | // UMD/IIFE shared settings: externals and output.globals 35 | // Refer to https://rollupjs.org/guide/en#output-globals for details 36 | const external = ["vue"]; 37 | const globals = { 38 | // Provide global variable names to replace your external imports 39 | // eg. jquery: '$' 40 | }; 41 | 42 | // Customize configs for individual targets 43 | const buildFormats = []; 44 | if (!argv.format || argv.format === "es") { 45 | const esConfig = { 46 | ...baseConfig, 47 | output: { 48 | file: "dist/xmodal.esm.js", 49 | format: "esm", 50 | exports: "named" 51 | }, 52 | plugins: [ 53 | ...baseConfig.plugins.preVue, 54 | vue(baseConfig.plugins.vue), 55 | ...baseConfig.plugins.postVue, 56 | terser({ 57 | output: { 58 | ecma: 6 59 | } 60 | }) 61 | ] 62 | }; 63 | buildFormats.push(esConfig); 64 | } 65 | 66 | if (!argv.format || argv.format === "cjs") { 67 | const umdConfig = { 68 | ...baseConfig, 69 | external, 70 | output: { 71 | compact: true, 72 | file: "dist/xmodal.ssr.js", 73 | format: "cjs", 74 | name: "xmodal", 75 | exports: "named", 76 | globals 77 | }, 78 | plugins: [ 79 | ...baseConfig.plugins.preVue, 80 | vue({ 81 | ...baseConfig.plugins.vue, 82 | template: { 83 | ...baseConfig.plugins.vue.template, 84 | optimizeSSR: true 85 | } 86 | }), 87 | ...baseConfig.plugins.postVue 88 | ] 89 | }; 90 | buildFormats.push(umdConfig); 91 | } 92 | 93 | if (!argv.format || argv.format === "iife") { 94 | const unpkgConfig = { 95 | ...baseConfig, 96 | external, 97 | output: { 98 | compact: true, 99 | file: "dist/xmodal.min.js", 100 | format: "iife", 101 | name: "xModal", 102 | exports: "named", 103 | globals 104 | }, 105 | plugins: [ 106 | ...baseConfig.plugins.preVue, 107 | vue(baseConfig.plugins.vue), 108 | ...baseConfig.plugins.postVue, 109 | terser({ 110 | output: { 111 | ecma: 5 112 | } 113 | }) 114 | ] 115 | }; 116 | buildFormats.push(unpkgConfig); 117 | } 118 | 119 | // Export config 120 | export default buildFormats; 121 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mediv0/xmodal/762d27b746f8ee4d8c6270d730a2559269527f64/docs/.nojekyll -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # ⚠️ 2 | #### we won't maintain this package anymore. but you still can use it for training purposes and in small scale projects 3 | We will be working on a more robust and better version of xmodal and we will release it in the future. 4 | 5 | -------------------- 6 | 7 |

8 | 9 | ![](https://i.imgur.com/WguzBpv.gif) 10 | 11 | [![npm version](https://badge.fury.io/js/xmodal-vue.svg)](https://badge.fury.io/js/xmodal-vue) 12 | [![npm](https://img.shields.io/npm/dm/xmodal-vue.svg)](https://www.npmjs.com/package/xmodal-vue) 13 | [![npm](https://img.shields.io/npm/dt/xmodal-vue.svg)](https://www.npmjs.com/package/xmodal-vue) 14 | 15 | ------------ 16 | 17 | # 🎉 Xmodal-Vue 18 | 19 |
20 | 21 | [demo](https://xeniac.ir/github/xmodal "demo") 22 | [codesandbox](https://codesandbox.io/s/shy-bird-1jjb3?file=/src/App.vue "codesandbox") 23 | 24 | ================================== 25 | 26 | ## get rid of those ugly 💩 predefined modals 27 | xmodal will let you define custom components and show them as modal. **YOUR APP YOUR RULES!** - too simple and easy 28 | 29 |

30 | 31 | This little component comes with customization tools that will make your life a little bit easier. 32 | 33 | ------------ 34 | ## Contributing 35 | 36 | This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/XeniacDev/xmodal/issues). If you wish to work on this project: 37 | 38 | 1. [Fork the project](https://github.com/XeniacDev/xmodal/archive/master.zip) 39 | 2. Create your feature branch (`git checkout -b new-feature-branch`) 40 | 3. Commit your changes (`git commit -am 'add new feature'`) 41 | 4. Push to the branch (`git push origin new-feature-branch`) 42 | 5. [Submit a pull request!](https://github.com/XeniacDev/xmodal/pulls) 43 | 44 | 45 | ## contributors 🍰 46 | [![William Gates](https://avatars1.githubusercontent.com/u/50080886?s=96&v=4")](https://github.com/WilliamGates99 "William Gates") 47 | 48 | ------------ 49 | ## License 📄 50 | 51 | This project is licensed under the MIT License - see the LICENSE file for details. 52 | -------------------------------------------------------------------------------- /docs/_navbar.md: -------------------------------------------------------------------------------- 1 | - Social Media 2 | 3 | - [Website](https://www.xeniac.ir) 4 | - [Demo](https://xeniac.ir/github/xmodal) 5 | - [LinkedIn](https://www.linkedin.com/company/xeniac) 6 | - [Twitter](https://www.twitter.com/XeniacDev) 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/_sidebar.md: -------------------------------------------------------------------------------- 1 | - About 2 | 3 | - [About xmodal](docFiles/about.md) 4 | 5 | 6 | - Installation 7 | 8 | - [NPM](docFiles/npm.md) 9 | - [Vue](docFiles/vue.md) 10 | - [Nuxt.js](docFiles/nuxt.md) 11 | 12 | - Getting started 13 | 14 | - [Demo](docFiles/demo.md) 15 | - [Your First Modal](docFiles/firstModal.md) 16 | - [Edge cases(using multiple instances)](docFiles/multipleInstances.md) 17 | - [Default Options](docFiles/defaultOptions.md) 18 | 19 | - Customization 20 | 21 | - [Params](docFiles/params.md) 22 | - [v-model](docFiles/v-model.md) 23 | - [Component](docFiles/component.md) 24 | - [Background Color and Opacity](docFiles/backgroundColor.md) 25 | - [Timer](docFiles/timer.md) 26 | - [Animations](docFiles/animation.md) 27 | - [Disable](docFiles/disable.md) 28 | - [Props](docFiles/props) 29 | 30 | - Store Collection 31 | - [Overview](docFiles/Store.md) 32 | 33 | - Global Functions 34 | - [Open](docFiles/open.md) 35 | - [OpenFromStore](docFiles/openFromStore) 36 | - [Close](docFiles/close.md) 37 | - [Save](docFiles/save.md) 38 | - [Get](docFiles/get.md) 39 | - [Delete](docFiles/delete.md) 40 | - [Entries](docFiles/entries.md) 41 | 42 | - CallBacks 43 | - [Mounted](docFiles/mounted.md) 44 | - [Destroyed](docFiles/destroyed.md) 45 | 46 | 47 | - [Shortkeys](docFiles/keys.md) 48 | 49 | 50 | - [Contributors](docFiles/Contributors.md) 51 | - [License](docFiles/License.md) 52 | - [Changelog](docFiles/Changelogs.md) 53 | -------------------------------------------------------------------------------- /docs/docFiles/Changelogs.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG.md 2 | 3 | ## 1.0.0 (released) 4 | 5 | Features: 6 | 7 | - Added a global collection to save modal options globally 8 | - Add openFromStore() method to let users open modals from modals collection 9 | - Add save() method to let users save modals in the collection 10 | - Add delete() method to let users delete modals in the collection 11 | - Add get() method to let users gets modals from the collection 12 | - Add entries() method to let users get all modals stored in the collection 13 | 14 | 15 | ## 0.3.0 (released) 16 | 17 | Features: 18 | 19 | - add import() keyword for importing components 20 | 21 | 22 | ## 0.2.0 (released) 23 | 24 | Features: 25 | 26 | - add support for callback functions 27 | 28 | -------------------------------------------------------------------------------- /docs/docFiles/Contributors.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/XeniacDev/xmodal/issues). If you wish to work on this project: 4 | 5 | 1. [Fork the project](https://github.com/XeniacDev/xmodal/archive/master.zip) 6 | 2. Create your feature branch (`git checkout -b new-feature-branch`) 7 | 3. Commit your changes (`git commit -am 'add new feature'`) 8 | 4. Push to the branch (`git push origin new-feature-branch`) 9 | 5. [Submit a pull request!](https://github.com/XeniacDev/xmodal/pulls) 10 | 11 | 12 | ## Contributors 🍰 13 | [![William Gates](https://avatars1.githubusercontent.com/u/50080886?s=96&v=4")](https://github.com/WilliamGates99 "William Gates") -------------------------------------------------------------------------------- /docs/docFiles/License.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020-present XeniacDev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /docs/docFiles/Store.md: -------------------------------------------------------------------------------- 1 | this is another cool feature that we added in xmodal v1.0.0 2 |
3 | with this feature, you can save your modals in a global collection of modals. this is useful when you want to save modal globally and use it later, somewhere in the app 4 | 5 |
6 | 7 | there are some functions available with this feature that will let you control this collection with ease. 8 | 9 |
10 |
11 | 12 | ## [save(name, options)](docFiles/save) : boolean 13 | the save() method will add new modal to the collection or update an existing modal 14 |
15 | -------------------------- 16 | ## [get(name)](docFiles/get) : Object 17 | The get() method returns a specified modal from the Collection. 18 |
19 | -------------------------- 20 | ## [delete(name)](docFiles/delete) : boolean 21 | The delete() method removes the specified modal from the Collection by key. 22 |
23 | -------------------------- 24 | ## [entries()](docFiles/entries) : array 25 | The entries() method returns a new Iterator object that contains the [key, value] pairs for each modal in the Collection 26 |
27 | -------------------------- 28 | ## has(name) : boolean 29 | The has() method returns a boolean indicating whether an modal with the specified key exists or not. 30 |
31 | -------------------------- 32 | 33 | 34 | **Check [Global Functions]() section for example and use cases** -------------------------------------------------------------------------------- /docs/docFiles/about.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | ![](https://i.imgur.com/WguzBpv.gif) 4 | 5 | [![npm version](https://badge.fury.io/js/xmodal-vue.svg)](https://badge.fury.io/js/xmodal-vue) 6 | [![npm](https://img.shields.io/npm/dm/xmodal-vue.svg)](https://www.npmjs.com/package/xmodal-vue) 7 | [![npm](https://img.shields.io/npm/dt/xmodal-vue.svg)](https://www.npmjs.com/package/xmodal-vue) 8 | 9 | ------------ 10 | 11 | # 🎉 Xmodal-Vue 12 | [demo](https://xeniac.ir/github/xmodal "demo") 13 | [codesandbox](https://codesandbox.io/s/shy-bird-1jjb3?file=/src/App.vue "codesandbox") 14 | 15 | ================================== 16 | 17 | ## get rid of those ugly 💩 predefined modals 18 | xmodal will let you define custom components and show them as modal. **YOUR APP YOUR RULES!** - too simple and easy 19 | 20 |

21 | This little library comes with customization tools that will make your life a little bit easier. 22 | 23 | 24 | ## Why you need xmodal? 25 | Most of the time you just stuck with predefined modals that don't fit your web styles and overall design. 26 | 27 | xmodal allows you to create custom modals. 28 | You just need to create a component with your styles(textboxes etc...), and xmodal will treat that component as modal. This is how xmodal works. -------------------------------------------------------------------------------- /docs/docFiles/animation.md: -------------------------------------------------------------------------------- 1 | ### 📝 animations 2 | 3 | You can set animations for modal by defining its name. 4 |
5 | 6 | there are 11 animations available at this moment. 7 | 8 | | Animation name | 9 | |------------| 10 | | fade | 11 | | scaleIn | 12 | | scaleOut | 13 | | scaleBottom | 14 | | scaleTop | 15 | | scaleLeft | 16 | | scaleRight | 17 | | slideBottom | 18 | | slideTop | 19 | | slideLeft | 20 | | slideRight | 21 | 22 | 23 | 24 | Example: 25 | ```javascript 26 | params: { 27 | // other options... 28 | animation: "slideRight" 29 | // ... 30 | } 31 | ``` -------------------------------------------------------------------------------- /docs/docFiles/backgroundColor.md: -------------------------------------------------------------------------------- 1 | ### 📝 backgroundColor and opacity 2 | 3 | You can control modal backdrop color and opacity like this: 4 | 5 | 6 | ```javascript 7 | params: { 8 | opacity: "0.5" // need to be between 0 - 1 9 | backgroundColor: "#00fffdf" 10 | } 11 | ``` 12 | 13 |
14 |
15 | 16 | **Supported formats for colors** 17 | 18 | | Color Type | 19 | |------------| 20 | | Hex | 21 | | Rgb | 22 | | Rgba | 23 | | HSV | 24 | 25 | 26 | and more.... -------------------------------------------------------------------------------- /docs/docFiles/close.md: -------------------------------------------------------------------------------- 1 | ## this.$xmodal.close(callback) : void 2 | It will close all open modals in the current view(route) at once. 3 | 4 |
5 | example: 6 | 7 | ```javascript 8 | 17 | export default { 18 | name: "close", 19 | methods: { 20 | Close() { 21 | // using without callback 22 | this.$xmodal.close(); 23 | } 24 | } 25 | }; 26 | 27 | ``` 28 | 29 | 30 | also there is **callback** available for this method. 31 |
32 |
33 |
34 | 35 | read more about these callbacks: 36 | - [Mounted Callback](docFiles/mounted) 37 | - [Destroyed Callback](docFiles/destroyed) -------------------------------------------------------------------------------- /docs/docFiles/component.md: -------------------------------------------------------------------------------- 1 | ### 📝 component 2 | 3 | You need to pass a reference of your component to modal. In that way, modal can render your component on the page. 4 | 5 | 6 | ## import components using require() 7 | ```javascript 8 | params: { 9 | // you have to require it like this ! 10 | component: require("./components/no.vue").default, 11 | } 12 | ``` 13 | **🔴 Don't forget to add .default to the end of your require function. If you don't put .default at the end of require, xmodal can't render your component and show it on the page!!** 14 | 15 |
16 | 17 | ## import components using import() 18 | 19 | Also, you can use the import() method to import your components. With this method, you don't need .default keyword at the end of the component property. 20 | ```javascript 21 | params: { 22 | // you have to import it like this ! 23 | component: import("./components/no.vue"), 24 | } 25 | ``` -------------------------------------------------------------------------------- /docs/docFiles/defaultOptions.md: -------------------------------------------------------------------------------- 1 | when we are using xmodal, we always have to initialize default options for it. 2 |
3 | these options will be shared between all other modals on the same page unless your overwrite them 4 |
5 | **in other word: These params will act as a parent for all other modals that you going to create in that specific page.** 6 |
7 |
8 |
9 | 10 | #### You always have to provide a component for modal. otherwise, it will throw an error 11 | 12 | ```javascript 13 | export default { 14 | data() { 15 | return { 16 | isOpen: false, 17 | options: { 18 | 19 | // component is required 20 | component: import("./modal.vue"), // a ref to your modal 21 | 22 | // other options are not necessary 23 | backgroundColor: "#000000", 24 | opacity: "0.7", 25 | mounted: this.modalOpen, 26 | destroyed: this.modalClose, 27 | animation: "scaleIn" 28 | } 29 | }; 30 | } 31 | }; 32 | 33 | ``` 34 | 35 | **⚠️ You can open different modals with just one instance, so you don't need to create multiple instances for multiple modals!** 36 | -------------------------------------------------------------------------------- /docs/docFiles/delete.md: -------------------------------------------------------------------------------- 1 | ## this.$xmodal.delete(name) : Boolean 2 | 3 | The delete() method removes the specified modal from the Collection by key. 4 | 5 |
6 | 7 | example: 8 | 9 | ```javascript 10 | deleteModal() { 11 | this.$xmodal.delete("Login-modal") 12 | 13 | // output: 14 | /* 15 | true 16 | */ 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /docs/docFiles/demo.md: -------------------------------------------------------------------------------- 1 | # 🎉 Xmodal-Vue 2 | [demo website](https://xeniac.ir/github/xmodal "demo") 3 | -- 4 | [codesandbox project](https://codesandbox.io/s/shy-bird-1jjb3?file=/src/App.vue "codesandbox project") 5 | -- -------------------------------------------------------------------------------- /docs/docFiles/destroyed.md: -------------------------------------------------------------------------------- 1 | ## destroyed 2 | 3 | this callback will run after the modal is fully destroyed 4 | 5 |
6 | 7 | example: 8 | 9 | ```javascript 10 | export default { 11 | name: "App", 12 | data() { 13 | return { 14 | // default options 15 | options: { 16 | component: require("./components/no.vue").default, 17 | 18 | // callbacks 19 | destroyed: this.modalDestroyed 20 | } 21 | }; 22 | }, 23 | methods: { 24 | modalDestroyed() { 25 | console.log("modal is destroyed at this point!"); 26 | } 27 | } 28 | }; 29 | ``` 30 | 31 |
32 | 33 | ### using with global methods 34 | 35 | ```javascript 36 | export default { 37 | methods: { 38 | Open() { 39 | this.$xmodal.open({ 40 | component: require("./components/newComponent.vue").default, 41 | 42 | // you can overwrite callbacks like other options ! 43 | destroyed: this.overwrite_modalDestroyed 44 | }) 45 | }, 46 | 47 | Close() { 48 | this.$xmodal.close(() => { 49 | // close callback 50 | console.log("this will run after modal is destroyed"); 51 | }) 52 | } 53 | } 54 | }; 55 | ``` 56 | -------------------------------------------------------------------------------- /docs/docFiles/disable.md: -------------------------------------------------------------------------------- 1 | ### 📝 isDisable 2 | 3 | You can disable modal click events to preventing users to close the modal. 4 |
5 | **🟢 isDisable is useful when you want to close modal based on some condition. ( like: checking if the input is correct or etc...)** 6 |
7 | 8 | 9 | 10 | 11 | Example: 12 | ```javascript 13 | params: { 14 | isDisable: true // prevent user click 15 | } 16 | ``` 17 | **⚠️ [hasTimer](docFiles/timer.md) will not work with isDisable** -------------------------------------------------------------------------------- /docs/docFiles/entries.md: -------------------------------------------------------------------------------- 1 | ## this.$xmodal.entries(name) : Array 2 | 3 | The entries() method returns a new Iterator object that contains the [key, value] pairs for each modal in the Collection 4 | 5 |
6 | 7 | example: 8 | 9 | ```javascript 10 | getAllModals() { 11 | let modals = this.$xmodal.entries(); 12 | console.log(modals); 13 | 14 | // output: 15 | /* 16 | 0: (2) ["Login-modal", {…}] 17 | 1: (2) ["contact-modal", {…}] 18 | 2: (2) ["email-modal", {…}] 19 | */ 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/docFiles/firstModal.md: -------------------------------------------------------------------------------- 1 | in your html file: 2 | 3 | ```html 4 | 11 | ``` 12 | 13 | xmodal can have 2 props as input ( we will read about this later). 14 | - 1- params 15 | - 2- v-model 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | 22 | in your js file: 23 | 24 | ```javascript 25 | 26 | export default { 27 | data() { 28 | return { 29 | isOpen: false, 30 | options: { 31 | component: import("./modal.vue"), // a ref to your modal 32 | 33 | // other options 34 | backgroundColor: "#000000", 35 | opacity: "0.7", 36 | mounted: this.modalOpen, 37 | destroyed: this.modalClose, 38 | animation: "scaleIn" 39 | } 40 | }; 41 | } 42 | }; 43 | 44 | ``` 45 | 46 | 47 | 48 | 49 | 50 | final file: 51 |
52 | ```javascript 53 | 54 | 61 | 62 | export default { 63 | data() { 64 | return { 65 | isOpen: false, 66 | options: { 67 | component: import("./modal.vue"), // a ref to your modal 68 | 69 | // other options 70 | backgroundColor: "#000000", 71 | opacity: "0.7", 72 | mounted: this.modalOpen, 73 | destroyed: this.modalClose, 74 | animation: "scaleIn" 75 | } 76 | }; 77 | } 78 | }; 79 | 80 | ``` 81 | congratulations. you created your first modal 82 | 83 |
84 |
85 | 86 | **How to use this in your project 💡** 87 |
88 | You have to use this modal in routes and not inside of other components. Also, you only need one instance on each route. 89 |
90 | ✅ For example, you can do something like this: 91 | ```html 92 | 98 | ``` 99 | ❌ This way of using xmodal is wrong and not supported: 100 | ```html 101 | 110 | ``` -------------------------------------------------------------------------------- /docs/docFiles/get.md: -------------------------------------------------------------------------------- 1 | ## this.$xmodal.get(name) : Object 2 | 3 | The get() method returns a specified modal from the Collection. 4 | 5 |
6 | 7 | example: 8 | 9 | ```javascript 10 | createModal() { 11 | this.$xmodal.get("Login-modal") 12 | 13 | // output: 14 | /* 15 | { 16 | component: import("./modal.vue"), 17 | backgroundColor: "#000000", 18 | opacity: "0.7", 19 | mounted: this.modalOpen, 20 | destroyed: this.modalClose, 21 | animation: "scaleIn" 22 | } 23 | */ 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/docFiles/keys.md: -------------------------------------------------------------------------------- 1 | ## keys 2 | 3 | There are some shortcuts that you can use to modify xmodal. 4 | 5 | | Short keys | Usage 6 | | :------------ | :------------ | 7 | | ESC | if user press ESC key, modal will be closed | 8 | -------------------------------------------------------------------------------- /docs/docFiles/mounted.md: -------------------------------------------------------------------------------- 1 | ## mounted 2 | 3 | this callback will run after the modal is fully mounted 4 | 5 |
6 | 7 | example: 8 | 9 | ```javascript 10 | export default { 11 | name: "App", 12 | data() { 13 | return { 14 | // default options 15 | options: { 16 | component: require("./components/no.vue").default, 17 | 18 | // callbacks 19 | mounted: this.modalMounted, 20 | } 21 | }; 22 | }, 23 | methods: { 24 | modalMounted() { 25 | console.log("modal is mounted at this point!"); 26 | }, 27 | } 28 | }; 29 | ``` 30 | 31 |
32 | 33 | ### using with global methods 34 | 35 | ```javascript 36 | export default { 37 | methods: { 38 | Open() { 39 | this.$xmodal.open({ 40 | component: require("./components/newComponent.vue").default, 41 | 42 | // you can overwrite callbacks like other options ! 43 | mounted: this.overwrite_modalMounted, 44 | }) 45 | }, 46 | } 47 | }; 48 | ``` 49 | -------------------------------------------------------------------------------- /docs/docFiles/multipleInstances.md: -------------------------------------------------------------------------------- 1 | in scenarios like having multiple components in the same page and two or more of them using xmodal for showing something as modal, because those components are in the same route, in the end we will have multiple xmodal components in same route 2 | 3 | the problem with having multiple xmodal in a route is that it does not use an ID to distinguish between those xmodal instances. so in a simple way when you call one of them, all of xmodal instances in the same page will launch and you will have multiple modals opening at the same time. not cool ! 4 | 5 | to fix that problem you can do something like this: 6 | 7 | ```html 8 | 20 | ``` 21 | 22 | ```javascript 23 | export default { 24 | data() { 25 | return { 26 | isModalOpen1: false, 27 | isModalOpen2: false, 28 | options1: { 29 | component: import("./modal.vue"), 30 | backgroundColor: "#000000", 31 | opacity: "0.7", 32 | animation: "scaleIn", 33 | }, 34 | options2: { 35 | component: import("./modal2.vue"), 36 | backgroundColor: "#000000", 37 | opacity: "0.7", 38 | animation: "scaleIn", 39 | } 40 | }; 41 | }, 42 | methods: { 43 | open() { 44 | // pass option 2 and a name to the open method 45 | this.$xmodal.open(this.options2, "modal2"); 46 | } 47 | }, 48 | }; 49 | ``` 50 | 51 | 52 | ## name parameter 53 | you must pass a name to the open method if you want to prevent the default behavior of xmodal 54 | 55 | ## notes 56 | - if you are using v-model for xmodal you always have to pass params to that instance 57 | - if you want to use `this.$xmodal.open()` instead of v-model, you don't have to pass params or v-model options to it, you can pass it on the fly. -------------------------------------------------------------------------------- /docs/docFiles/npm.md: -------------------------------------------------------------------------------- 1 | **📗 Installation** 2 | ```bash 3 | npm i xmodal-vue 4 | ``` 5 | or 6 | 7 | ```bash 8 | yarn add xmodal-vue 9 | ``` 10 | -------------------------------------------------------------------------------- /docs/docFiles/nuxt.md: -------------------------------------------------------------------------------- 1 | In nuxt: 2 | ```javascript 3 | // in plugins folder xmodal.js 4 | import Vue from "vue" 5 | import xmodal from "xmodal-vue"; 6 | 7 | Vue.use(xmodal); 8 | ``` 9 | 10 | then in your nuxt.config.js 11 | ```javascript 12 | plugins: ['~/plugins/xmodal.js' ] 13 | ``` 14 | 15 | **⚠️ Mismatching childNodes vs. VNodes warn** 16 | if you got this error/warn you can add your plugin like this. 17 | ```javascript 18 | plugins: [{ src: '~/plugins/xmodal.js', ssr: false} ] 19 | ``` 20 | or when using xmodal component in your html 21 | ```html 22 | 23 | 24 | 25 | ``` -------------------------------------------------------------------------------- /docs/docFiles/open.md: -------------------------------------------------------------------------------- 1 | ## this.$xmodal.open(params, name): void 2 | with this method, you can open multiple modals! 3 |
4 | The open function can take params as its argument. 5 |
6 | **By default, open() is inheriting from default options. you can overwrite it by passing options that you want to change** 7 | 8 |
9 |
10 | 11 | **💡 For example we want to open new modal on click with default options** 12 | 13 | ```javascript 14 | 20 | 21 | 22 | 51 | ``` 52 | you literally can open new modals by this.modal.open() with brand new options, or customize it based on default options 53 | 54 | **🔴 Do not forget that this.$xmodal.open() accepts object type as its params. and a name** 55 | 56 | for learn more how to use the name parameter check here: ## [how to use name](docFiles/multipleInstances.md); -------------------------------------------------------------------------------- /docs/docFiles/openFromStore.md: -------------------------------------------------------------------------------- 1 | ## this.$xmodal.openFromStore(name) : modal 2 | if you save any modal in the **[Store](docFiles/Store)** collection, you can use this method to retrieve those modals and show them 3 | 4 |
5 | example: 6 | 7 | ```javascript 8 | click() { 9 | this.$xmodal.openFromStore("Login-Modal"); 10 | } 11 | ``` 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/docFiles/params.md: -------------------------------------------------------------------------------- 1 | ### 📝 Params 2 | Params prop is an object that will pass data to the modal. You can see available options for params in the list below. 3 | 4 | | option | type | default | description | 5 | | ------------ | ------------ | ------------ | ------------ | 6 | | component * | component | null | a reference to your component (this option is required) | 7 | | backgroundColor | String | #000000 | control the color of modal backdrop | 8 | | opacity | String | 0.7 | control transparency of the modal backdrop | 9 | | hasTimer | String,Number | false | you can add timer to your modal by this option | 10 | | animation | String | fade | change animation of modal | 11 | | isDisable | Boolean | false | disable click events on modal | 12 | | props | Object | null | by this option, you can send props to the mounted component | 13 | 14 | **You need to specify a component for each modal instance. All other options are not necessary ⚠️** -------------------------------------------------------------------------------- /docs/docFiles/props.md: -------------------------------------------------------------------------------- 1 | ### 📝 props 2 | 3 | You can send props to the component that you mounted to show as modal. 4 | 5 | 6 | 7 | 8 | Example: 9 | ```javascript 10 | params: { 11 | props: { 12 | firstName: "myName", 13 | lastName: "Senpai" 14 | .... 15 | // more props 16 | } 17 | } 18 | ``` 19 | 20 | You can send props to the component, as many as you want. -------------------------------------------------------------------------------- /docs/docFiles/save.md: -------------------------------------------------------------------------------- 1 | ## this.$xmodal.save(name, options) : Boolean 2 | 3 | the save() method will add new modal to the collection or update an existing modal. return type is boolean 4 | 5 |
6 | example: 7 | 8 | ```javascript 9 | newModal() { 10 | this.$xmodal.save("Login-modal", { 11 | component: import("./login.vue"), 12 | backgroundColor: "#000000", 13 | opacity: "0.7", 14 | animation: "scaleIn" 15 | }); 16 | } 17 | ``` 18 | 19 | 20 |
21 | 22 | Since the return type is boolean you can use if-else for checks 23 | 24 | ```javascript 25 | newModal() { 26 | if(this.$xmodal.save("Login-modal",options)) { 27 | console.log("modal created!"); 28 | } 29 | else { 30 | throw new Error("Something is wrong"); 31 | } 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/docFiles/timer.md: -------------------------------------------------------------------------------- 1 | ### 📝 Timer (hasTimer option) 2 | 3 | It will set a timer based on seconds for your modal. 4 |
5 | hasTimer comes with an indicator on top of the page, default color is white. 6 |
7 | **🟢 hasTimer can be a number, string or object. If you want to change indicator color you can pass an object for hasTimer.** 8 | 9 | 10 | Example: 11 | ```javascript 12 | params: { 13 | hasTimer: "10s" // 10 seconds as string 14 | hasTimer: 10 // 10 seconds as number 15 | 16 | // customize indicator 17 | hasTimer: { 18 | duration: 10 // you can send String too ! 19 | color: "#00ff4d" // change color of indicator 20 | } 21 | } 22 | ``` -------------------------------------------------------------------------------- /docs/docFiles/v-model.md: -------------------------------------------------------------------------------- 1 | ### 📝 v-model 2 | 3 | You can bind xmodal to a boolean value and control it. This boolean value can be a vuex getter, a function, etc... 4 | It is an optional property. 5 | 6 | 7 | example: 8 | ```javascript 9 | 10 | 17 | 18 | export default { 19 | data() { 20 | return { 21 | isOpen: false, // -> your binded value 22 | // ... 23 | }; 24 | } 25 | }; 26 | 27 | ``` -------------------------------------------------------------------------------- /docs/docFiles/vue.md: -------------------------------------------------------------------------------- 1 | install globally: 2 | ```javascript 3 | import Vue from "vue"; 4 | import xmodal from "xmodal-vue"; 5 | 6 | // install xmodal 7 | Vue.use(xmodal); 8 | ``` -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 12 | 16 | 17 | 18 |
19 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /examples/example.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 57 | -------------------------------------------------------------------------------- /examples/modal.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 17 | -------------------------------------------------------------------------------- /examples/modal2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xmodal-vue", 3 | "version": "1.0.2", 4 | "private": false, 5 | "description": "🚀 a simplistic and easy to use wrapper around your components that will help you create custom modals, from your components", 6 | "author": "Mahdi Fakhr", 7 | "license": "MIT", 8 | "main": "dist/xmodal.ssr.js", 9 | "module": "dist/xmodal.esm.js", 10 | "unpkg": "dist/xmodal.min.js", 11 | "files": [ 12 | "dist/*", 13 | "src/**/*.vue" 14 | ], 15 | "scripts": { 16 | "serve": "vue serve ./examples/example.vue", 17 | "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js", 18 | "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs", 19 | "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es", 20 | "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife" 21 | }, 22 | "dependencies": {}, 23 | "devDependencies": { 24 | "@vue/cli-plugin-eslint": "^4.3.0", 25 | "@vue/cli-service": "^4.3.0", 26 | "@vue/eslint-config-prettier": "^6.0.0", 27 | "babel-eslint": "^10.1.0", 28 | "cross-env": "^5.2.0", 29 | "eslint": "^6.7.2", 30 | "eslint-plugin-prettier": "^3.1.1", 31 | "eslint-plugin-vue": "^6.2.2", 32 | "husky": "^4.2.3", 33 | "lint-staged": "^9.5.0", 34 | "minimist": "^1.2.0", 35 | "prettier": "^1.19.1", 36 | "rollup": "^1.12.1", 37 | "rollup-plugin-buble": "^0.19.6", 38 | "rollup-plugin-commonjs": "^10.0.0", 39 | "rollup-plugin-replace": "^2.2.0", 40 | "rollup-plugin-terser": "^4.0.4", 41 | "rollup-plugin-vue": "^5.0.0", 42 | "vue-template-compiler": "^2.6.11" 43 | }, 44 | "peerDependencies": { 45 | "vue": "^2.6.11" 46 | }, 47 | "husky": { 48 | "hooks": { 49 | "pre-commit": "lint-staged" 50 | } 51 | }, 52 | "homepage": "https://xeniac.ir/github/xmodal", 53 | "repository": { 54 | "type": "git", 55 | "url": "https://github.com/XeniacDev/xmodal" 56 | }, 57 | "bugs": { 58 | "url": "https://github.com/XeniacDev/xmodal/issues" 59 | }, 60 | "keywords": [ 61 | "vue", 62 | "vuejs", 63 | "vue modal", 64 | "modal", 65 | "dynamic modal", 66 | "modern modal", 67 | "lightweight modal", 68 | "simple modal" 69 | ] 70 | } 71 | -------------------------------------------------------------------------------- /src/entry.js: -------------------------------------------------------------------------------- 1 | import component from "./wrapper.vue"; 2 | import { events } from "./events"; 3 | import store from "./store"; 4 | 5 | function install(Vue) { 6 | if (this.installed) { 7 | return; 8 | } 9 | this.installed = true; 10 | 11 | Vue.prototype.$xmodal = { 12 | close(closeCallback) { 13 | events.$emit("close", closeCallback); 14 | }, 15 | 16 | /** 17 | * 18 | * @param {(string|Object)} params 19 | * 20 | * @example 21 | * 22 | * this.$xmodals.open({path: "./your/component/path", props: {prop1: "something"} }) 23 | */ 24 | open(params, name) { 25 | events.$emit("open", params, name); 26 | }, 27 | 28 | openFromStore(name) { 29 | if (store.has(name)) { 30 | this.open(store.get(name)); 31 | } else { 32 | throw new Error(`Modal with the name of ${name} not found`); 33 | } 34 | }, 35 | 36 | save(name, options) { 37 | return store.save(name, options); 38 | }, 39 | 40 | get(name) { 41 | return store.get(name.toString()); 42 | }, 43 | 44 | delete(name) { 45 | return store.delete(name); 46 | }, 47 | 48 | entries() { 49 | return store.entries(); 50 | } 51 | }; 52 | 53 | Vue.component("xmodal", component); 54 | } 55 | 56 | const plugin = { 57 | install 58 | }; 59 | 60 | // To auto-install when vue is found 61 | let GlobalVue = null; 62 | if (typeof window !== "undefined") { 63 | GlobalVue = window.Vue; 64 | } else if (typeof global !== "undefined") { 65 | GlobalVue = global.Vue; 66 | } 67 | if (GlobalVue) { 68 | GlobalVue.use(plugin); 69 | } 70 | 71 | // Inject install function into component - allows component 72 | // to be registered via Vue.use() as well as Vue.component() 73 | component.install = install; 74 | 75 | // Export component by default 76 | export default component; 77 | -------------------------------------------------------------------------------- /src/events.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | export const events = new Vue({ name: "xmodal" }); 4 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | class Store { 2 | constructor() { 3 | if (Store.exists) { 4 | return Store.instance; 5 | } 6 | Store.exists = true; 7 | Store.instance = this; 8 | this.modals = new Map(); 9 | } 10 | 11 | // save new modal in the map 12 | save(name, options) { 13 | let saved = this.modals.set(name, options); 14 | return saved ? true : false; 15 | } 16 | 17 | // get all modals stored in the map 18 | entries() { 19 | return [...this.modals.entries()]; 20 | } 21 | 22 | // get single modal options 23 | get(name) { 24 | if (this.modals.has(name)) { 25 | return this.modals.get(name); 26 | } else { 27 | throw new Error( 28 | "There is no modal in the store with provided name" 29 | ); 30 | } 31 | } 32 | 33 | // delete modal from collection 34 | delete(name) { 35 | return this.modals.delete(name); 36 | } 37 | 38 | // check if modal is in the map 39 | has(name) { 40 | return this.modals.has(name); 41 | } 42 | } 43 | 44 | let store = new Store(); 45 | export default store; 46 | -------------------------------------------------------------------------------- /src/wrapper.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 144 | 145 | 168 | -------------------------------------------------------------------------------- /src/xmodal.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 197 | 198 | 395 | -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | # todo 2 | # xmodal options 3 | 4 | - [x] ability to change backdrop color and style (color or opacity) 5 | - [x] ability to change modal animation 6 | - [x] ability to send data(options) to the component from modal ( multiple props ) 7 | - [x] add v-model support 8 | - [x] ability to disable modal ( when modal is open or closed ) 9 | - [x] detect component from it's name or path and show it with modal component 10 | - [x] ability to set timer to close the modal 11 | - [x] ability to close modal with ESC key 12 | - [x] ability to customize progressbar color 13 | 14 | - [x] ability to control modal state from a prototype method 15 | - [x] ability to close modal from attached component (this.$xmodal.close()) 16 | - [x] ability to change current component path on the fly ( this.$xmodal.open(path)) 17 | - [x] ability to pass props to component on the fly ( this.$xmodal.open(path, props)); 18 | 19 | # animation list 20 | 21 | - [x] scaleIn 22 | - [x] scaleOut 23 | - [x] slideRight 24 | - [x] slideLeft 25 | - [x] slideTop 26 | - [x] slideDown 27 | - [x] scaleLeft 28 | - [x] scaleRight 29 | - [x] scaleBottom 30 | - [x] scaleTop 31 | 32 | 33 | # tests 34 | protected void :D --------------------------------------------------------------------------------