{"_id":"@0x0/vue-js-modal","_rev":"2-a0569135c6172c51bcade719a3ff5c87","name":"@0x0/vue-js-modal","dist-tags":{"latest":"1.3.14"},"versions":{"1.3.13":{"name":"@0x0/vue-js-modal","description":"Modal Component for Vue.js","version":"1.3.13","author":{"name":"euvl","email":"yev.vlasenko@gmail.com"},"main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/VadimMalykhin/vue-js-modal.git"},"types":"types/index.d.ts","keywords":["front-end","web","vue","vuejs","dialog","alert","modal","vue-js-modal"],"bugs":{"url":"https://github.com/euvl/vue-js-modal/issues"},"scripts":{"build:client":"cross-env NODE_ENV=production webpack --config ./build/webpack.client.config.js --progress --hide-modules","build:ssr":"cross-env NODE_ENV=production webpack --config ./build/webpack.ssr.config.js --progress --hide-modules","build:ssr-no-css":"cross-env NODE_ENV=production webpack --config ./build/webpack.ssr-no-css.config.js --progress --hide-modules","lint":"eslint --ext .js,.vue src test/unit/specs","unit":"./node_modules/karma/bin/karma start test/unit/karma.conf.js","build":"npm run build:client && npm run build:ssr && npm run build:ssr-no-css","watch":"webpack --config ./build/webpack.client.config.js --progress --hide-modules --watch","test:types":"tsc -p types/test"},"license":"MIT","devDependencies":{"babel-core":"^6.25.0","babel-loader":"latest","babel-preset-env":"^1.5.2","chai":"^3.5.0","cross-env":"^3.0.0","css-loader":"^0.25.0","eslint":"^3.19.0","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^2.0.7","eslint-loader":"^1.7.1","eslint-plugin-html":"^2.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","extract-text-webpack-plugin":"^2.1.2","file-loader":"^0.9.0","jasmine-core":"^2.7.0","karma":"^1.4.1","karma-chrome-launcher":"^2.2.0","karma-coverage":"^1.1.1","karma-mocha":"^1.3.0","karma-phantomjs-launcher":"^1.0.4","karma-phantomjs-shim":"^1.4.0","karma-sinon-chai":"^1.3.1","karma-sourcemap-loader":"^0.3.7","karma-spec-reporter":"0.0.31","karma-webpack":"^2.0.2","lolex":"^1.5.2","mocha":"^3.2.0","node-sass":"^4.5.0","phantomjs-prebuilt":"^2.1.14","sass-loader":"^5.0.1","sinon":"^2.1.0","sinon-chai":"^2.8.0","uglifyjs-webpack-plugin":"^0.4.6","vue":"^2.2.6","vue-hot-reload-api":"^2.0.8","vue-loader":"^10.0.0","vue-style-loader":"^2.0.0","vue-template-compiler":"^2.1.0","webpack":"^2.2.0","webpack-dev-server":"^2.2.0","webpack-merge":"^4.1.0"},"peerDependencies":{"vue":"^2.2.6"},"homepage":"https://github.com/euvl/vue-js-modal#readme","directories":{"test":"test"},"dependencies":{},"gitHead":"ca8d1fa2b6bbd0b9341ee3f3721f2d36ad6d937b","_id":"@0x0/vue-js-modal@1.3.13","_npmVersion":"6.2.0","_nodeVersion":"9.4.0","_npmUser":{"name":"vadim.malykhin","email":"dev@61re.com"},"dist":{"integrity":"sha512-HNwKJSMBwbiE3dDLUoJTHFVwKUcGsdPFvp+71PMuGrBfaCDHKndt698449bKe5JhKgdr6v9DckH2sz4eJnNO5w==","shasum":"eb5f4e8d3f38dbe410f60d749c7f74dca4e25a41","tarball":"https://registry.npmjs.org/@0x0/vue-js-modal/-/vue-js-modal-1.3.13.tgz","fileCount":32,"unpackedSize":194435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbVxzjCRA9TVsSAnZWagAAjCQQAIoa85YpI0/YzotABqFt\nhyrOMdVKn57qFLHVItP9wcsUF+Hni5A9O/g6GxzJ1Q51XzCGN90tg6Cg27m7\nvfDHV01V/ZkH0CEq4KZpjHG0eXEup5wgzAbYzj85Gr1aPgG2fbXnA2/qx2ZN\nX7Tk5mvPVPO+3mg36ZU2HZNtJ16uAe1mwQH7KLk9EsKVixGUqenR4I/DrlVd\nc+/KhmIthAFknh+MpgDajA56Q2CBV7bm3pHvctZtT8GH88d+M5id5sA8rB+8\nGhhGcSUmtbAzMLzG9STzRuaVkK3G2L46iBPJG0eLBTatxoY7ohiO9rIXOITp\nfL48yxfarIJVfjVzrMoch9l7Bc53AIfE2mIzw0LgUXz/jAykeqCjnz6VSpB5\nuCQuqqCWhUsWOPho0XzyyFdsztN0hc0wXUosTt6d5DRMPpBjWj+KrYSFgns4\nHkvPg81hPfJPx6XxvFSXTrnmWZsuGfkXizjeVjeFWSEntZATdZOReqeFcr3Z\nHNLrX7YImhlsIj1FdoL1Ofae99V2iu0taOVp3aVl7gW9RsVRSR3cAZH3Kaf3\ngrm0d3o3jpYeZk3pwr3maqKgyt3Sx2Yr2HP0wzlz2Odgm5qIUHkMDJpo1L4V\nUM/QQSBeClWTuxNMo+gkUdVAOOuxxVoybsCUGiwQRCWaZ71VJnlw6SM8Y59T\nls0R\r\n=rqNa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8c57lE0x1FU9DPcFa+rdufzE1Wwa33VJ4xPQAlpMQCAiAfz+gL+fatIz3w28WaRkY77zMFCcP2HaA+VBvoJFCnrA=="}]},"maintainers":[{"name":"vadim.malykhin","email":"dev@61re.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-js-modal_1.3.13_1532435683785_0.5318404077477559"},"_hasShrinkwrap":false},"1.3.14":{"name":"@0x0/vue-js-modal","description":"Modal Component for Vue.js","version":"1.3.14","author":{"name":"euvl","email":"yev.vlasenko@gmail.com"},"main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/VadimMalykhin/vue-js-modal.git"},"types":"types/index.d.ts","keywords":["front-end","web","vue","vuejs","dialog","alert","modal","vue-js-modal"],"bugs":{"url":"https://github.com/euvl/vue-js-modal/issues"},"scripts":{"build:client":"cross-env NODE_ENV=production webpack --config ./build/webpack.client.config.js --progress --hide-modules","build:ssr":"cross-env NODE_ENV=production webpack --config ./build/webpack.ssr.config.js --progress --hide-modules","build:ssr-no-css":"cross-env NODE_ENV=production webpack --config ./build/webpack.ssr-no-css.config.js --progress --hide-modules","lint":"eslint --ext .js,.vue src test/unit/specs","unit":"./node_modules/karma/bin/karma start test/unit/karma.conf.js","build":"npm run build:client && npm run build:ssr && npm run build:ssr-no-css","watch":"webpack --config ./build/webpack.client.config.js --progress --hide-modules --watch","test:types":"tsc -p types/test"},"license":"MIT","devDependencies":{"babel-core":"^6.25.0","babel-loader":"latest","babel-preset-env":"^1.5.2","chai":"^3.5.0","cross-env":"^3.0.0","css-loader":"^0.25.0","eslint":"^3.19.0","eslint-config-standard":"^6.2.1","eslint-friendly-formatter":"^2.0.7","eslint-loader":"^1.7.1","eslint-plugin-html":"^2.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","extract-text-webpack-plugin":"^2.1.2","file-loader":"^0.9.0","jasmine-core":"^2.7.0","karma":"^1.4.1","karma-chrome-launcher":"^2.2.0","karma-coverage":"^1.1.1","karma-mocha":"^1.3.0","karma-phantomjs-launcher":"^1.0.4","karma-phantomjs-shim":"^1.4.0","karma-sinon-chai":"^1.3.1","karma-sourcemap-loader":"^0.3.7","karma-spec-reporter":"0.0.31","karma-webpack":"^2.0.2","lolex":"^1.5.2","mocha":"^3.2.0","node-sass":"^4.5.0","phantomjs-prebuilt":"^2.1.14","sass-loader":"^5.0.1","sinon":"^2.1.0","sinon-chai":"^2.8.0","uglifyjs-webpack-plugin":"^0.4.6","vue":"^2.2.6","vue-hot-reload-api":"^2.0.8","vue-loader":"^10.0.0","vue-style-loader":"^2.0.0","vue-template-compiler":"^2.1.0","webpack":"^2.2.0","webpack-dev-server":"^2.2.0","webpack-merge":"^4.1.0"},"peerDependencies":{"vue":"^2.2.6"},"homepage":"https://github.com/euvl/vue-js-modal#readme","directories":{"test":"test"},"dependencies":{},"gitHead":"ca8d1fa2b6bbd0b9341ee3f3721f2d36ad6d937b","_id":"@0x0/vue-js-modal@1.3.14","_npmVersion":"6.2.0","_nodeVersion":"10.12.0","_npmUser":{"name":"vadim.malykhin","email":"dev@61re.com"},"dist":{"integrity":"sha512-bXKcOS4aiVIBxk5mg1h5YxXbVEymjx82PcuAJqhVP2I4Z+0mSGRrXhHEYze31A1aBeYZqbAImzgFT+mmBKbOJA==","shasum":"c693ac63065b33fb9e04ffc0e222fe6d2a00f8a5","tarball":"https://registry.npmjs.org/@0x0/vue-js-modal/-/vue-js-modal-1.3.14.tgz","fileCount":32,"unpackedSize":192550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb04dDCRA9TVsSAnZWagAAO2sP/R2GpaIdXfHyBes0j3eY\nB/AHQJl6VIzc6v/EG4IeUtuHgJXZmbBMZAzLcKZ9EMP+nf3F+NSlQQN16jYk\nuJNCF3boriuJ+ZklwQvP0Eug5kgTqPnuyAjO0Zz9jAE+d9G7G0GdBWJCdPMg\npsB69TbByXjQHPnUZLyP5+sOXkrINwMbj4MALvUVDvR9kkXaIWBQJ96RD/W5\nhyVufP3lRRM0DmJi78xOieexj6xig57e1grssq1tLgPeVqbCDBmVBt1mFtY0\nmbs4AYatnB/6/hhXY3KcpbpM8lG2iFp5qxJ3XqLa5EbuOtFaQ+sLFwFH0XLS\nfn/CddrQp7npP4f5hP1oM3gXg44l6866Z5YUmfkbTB+qAB5AjMzbr5GO04da\nyNUQG6ieiba+9kmAju/f66U4ZnPu9c7ju2xerW8+mOjijjXB/VHN/J6TSjmI\nK3p1Jph2L/ygzEZj83wz1EIWz5lDLnRqIdRSMgTB0ghdLgQKIj0cjLEmIwn4\nK7tBpmZnyp5vMvFky8vmxCWdsyEfJQdguCiexpd2pCILcytF85sqHQXcxLIv\ng6wVJ+P0YFTRYGeJ1MFrnZJfiABnlWri53lTwX/Wow4dElqOZuRwc4KgxZYD\n5ENFWoOvRG792TqurUWhyzMkciugW/tyW61aA6imjzEJdLfUPM0W4AkcZVDK\n7gwa\r\n=dsFl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIcLg5iFBqH8ecBaO3PBQ5TD85KxAl7XHqjht5dhOcHAIhAJUxHpjWA2qJ42Asr92SLBaKORUzORv008wEl/dV24KR"}]},"maintainers":[{"name":"vadim.malykhin","email":"dev@61re.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-js-modal_1.3.14_1540589378663_0.5680911801564803"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-24T12:34:43.731Z","1.3.13":"2018-07-24T12:34:43.932Z","modified":"2022-04-04T10:27:29.000Z","1.3.14":"2018-10-26T21:29:38.824Z"},"maintainers":[{"name":"vadim.malykhin","email":"dev@61re.com"}],"description":"Modal Component for Vue.js","homepage":"https://github.com/euvl/vue-js-modal#readme","keywords":["front-end","web","vue","vuejs","dialog","alert","modal","vue-js-modal"],"repository":{"type":"git","url":"git+https://github.com/VadimMalykhin/vue-js-modal.git"},"author":{"name":"euvl","email":"yev.vlasenko@gmail.com"},"bugs":{"url":"https://github.com/euvl/vue-js-modal/issues"},"license":"MIT","readme":"<p align=\"center\">\r\n\r\n# Vue.js modal\r\n\r\n[![npm version](https://badge.fury.io/js/vue-js-modal.svg)](https://badge.fury.io/js/vue-js-modal)\r\n[![npm](https://img.shields.io/npm/dm/vue-js-modal.svg)](https://www.npmjs.com/package/vue-js-modal)\r\n\r\n<p align=\"right\">\r\n  <a href=\"https://www.buymeacoffee.com/yev\" target=\"_blank\">\r\n  <img width=\"200\" alt=\"screen shot 2018-03-01 at 10 33 39\" src=\"https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png\">\r\n  </a>\r\n</p>\r\n\r\n##### Simple to use, highly customizable, mobile friendly Vue.js 2.0+ modal with SSR support. http://vue-js-modal.yev.io/\r\n\r\n[Changelog on Medium](https://medium.com/@yev_dev/vue-js-modal-changelog-61f934691b67 \"Medium\")\r\n\r\n</p>\r\n\r\n<p align=\"center\">\r\n  <img src=\"https://media.giphy.com/media/3oKIPco1eNxAA1rD4Q/giphy.gif\">\r\n</p>\r\n\r\nDemo: http://vue-js-modal.yev.io/\r\n\r\n### Install\r\n\r\n```bash\r\nnpm install vue-js-modal --save\r\n```\r\n\r\n### How to use\r\n\r\nInclude plugin in your `main.js` file.\r\n\r\n```javascript\r\nimport VModal from 'vue-js-modal'\r\n\r\nVue.use(VModal)\r\n\r\n/*\r\nBy default plugin will use \"modal\" name for the component.\r\nIf you need to change it, you can do so by providing \"componentName\" param.\r\n\r\nExample:\r\n\r\nVue.use(VModal, { componentName: \"foo-modal\" })\r\n...\r\n<foo-modal name=\"bar\"></foo-modal>\r\n*/\r\n```\r\n\r\nCreate modal:\r\n\r\n```vue\r\n<modal name=\"hello-world\">\r\n  hello, world!\r\n</modal>\r\n```\r\nCall it from anywhere in the app:\r\n\r\n```javascript\r\nmethods: {\r\n  show () {\r\n    this.$modal.show('hello-world');\r\n  },\r\n  hide () {\r\n    this.$modal.hide('hello-world');\r\n  }\r\n}\r\n```\r\n---\r\n\r\nYou can easily send data into the modal:\r\n\r\n```javascript\r\nthis.$modal.show('hello-world', { foo: 'bar' })\r\n```\r\n\r\nAnd receive it in `beforeOpen` event handler:\r\n\r\n```vue\r\n<modal name=\"hello-world\" @before-open=\"beforeOpen\"/>\r\n```\r\n```javascript\r\nmethods: {\r\n  beforeOpen (event) {\r\n    console.log(event.params.foo);\r\n  }\r\n}\r\n```\r\n\r\nIf you use **Bower** package manager - you will have to initialize library differently:\r\n\r\n```js\r\nVue.use(window[\"vue-js-modal\"].default);\r\n```\r\n\r\n### Dialog\r\n\r\nIt is a simplified version of the modal, which has most parameters set by default and is pretty useful for quick prototyping, showing alerts or creating mobile-like modals.\r\n\r\nTo start using `<v-dialog/>` you must set `dialog: true` in plugin configuration:\r\n\r\n```js\r\nVue.use(VModal, { dialog: true })\r\n```\r\n\r\nAnd include it in your project:\r\n\r\n```vue\r\n<v-dialog/>\r\n```\r\n\r\nCall it (all params except of “text” are optional):\r\n\r\n```javascript\r\nthis.$modal.show('dialog', {\r\n  title: 'Alert!',\r\n  text: 'You are too awesome',\r\n  buttons: [\r\n    {\r\n      title: 'Deal with it',\r\n      handler: () => { alert('Woot!') }\r\n    },\r\n    {\r\n      title: '',       // Button title\r\n      default: true,    // Will be triggered by default if 'Enter' pressed.\r\n      handler: () => {} // Button click handler\r\n    },\r\n    {\r\n      title: 'Close'\r\n    }\r\n ]\r\n})\r\n```\r\n\r\n<p align=\"center\">\r\n  <img src=\"https://user-images.githubusercontent.com/1577802/29165216-ec62552c-7db9-11e7-807e-ef341edcc94d.png\">\r\n</p>\r\n\r\n### Dynamic Modals\r\n\r\nIn order to instantiate modals at runtime (for lazy-loading or decluttering templates), it is possible to create modals dynamically.\r\n\r\nTo start using this feature you must set `dynamic: true` in plugin configuration:\r\n\r\n```js\r\nVue.use(VModal, { dynamic: true })\r\n```\r\n\r\nAnd include the `<modals-container/>` component it in your project:\r\n\r\n```vue\r\n<modals-container/>\r\n```\r\n\r\nCall it (the first argument is the component definition, the second are component properties, the third modal parameters, and the fourth the modal event listeners):\r\n\r\n```javascript\r\nthis.$modal.show({\r\n  template: `\r\n    <div>\r\n      <h1>This is created inline</h1>\r\n      <p>{{ text }}</p>\r\n    </div>\r\n  `,\r\n  props: ['text']\r\n}, {\r\n  text: 'This text is passed as a property'\r\n}, {\r\n  height: 'auto'\r\n}, {\r\n  'before-close': (event) => { console.log('this will be called before the modal closes'); }\r\n})\r\n```\r\n\r\nIt can also be used with `.vue` files:\r\n\r\n```javascript\r\nimport MyComponent from './MyComponent.vue'\r\n\r\nthis.$modal.show(MyComponent, {\r\n  text: 'This text is passed as a property'\r\n}, {\r\n  draggable: true\r\n})\r\n```\r\n\r\nOther than defining the `name` modal parameter, it's also possible to close dynamic modals emitting a `'close'` event:\r\n\r\n```javascript\r\nthis.$modal.show({\r\n  template: `\r\n    <div>\r\n      <p>Close using this button:</p>\r\n      <button @click=\"$emit('close')\">Close</button>\r\n    </div>\r\n  `\r\n})\r\n```\r\n\r\nFor more examples please take a look at [vue-js-modal.yev.io](http://vue-js-modal.yev.io).\r\n\r\n**Note:** keep in mind that there are some limitations for using dynamic modals. If you need full functionality then use ordinary modal instead.\r\n\r\n### SSR\r\n\r\nInclude plugin in your `nuxt.config.js` file:\r\n\r\n```javascript\r\nmodule.exports = {\r\n  plugins: ['~plugins/vue-js-modal']\r\n}\r\n```\r\n\r\nAnd your `plugins/vue-js-modal.js` will look like:\r\n\r\n```javascript\r\nimport Vue from 'vue'\r\nimport VModal from 'vue-js-modal/dist/ssr.index'\r\n\r\nVue.use(VModal)\r\n```\r\n\r\nFor full demo please look at `demo/server_side_rendering`\r\n\r\n### Extracted CSS\r\n\r\nThere is also a ssr build with css file extracted. Take a look in /dist folder.\r\n\r\n### Properties\r\n\r\n| Name      | Required | Type          | Default     | Description |\r\n| ---       | ---      | ---           | ---         | ---         |\r\n| name      | true  | [String, Number] |             | Name of the modal |\r\n| delay     | false | Number           | 0           | Delay between showing overlay and actual modal box |\r\n| resizable | false | Boolean          | false       | If true, allows to resize modal window, keeping it in the center of the screen. |\r\n| adaptive  | false | Boolean          | false       | If true, modal box will try to adapt to the window size |\r\n| draggable | false | [Boolean, String]| false       | If true, modal box will be draggable. |\r\n| scrollable | false | Boolean         | false       | If `height` property is `auto` and the modal height exceeds window height - you will be able to scroll modal |\r\n| reset     | false | Boolean          | false       | Resets position and size before showing modal |\r\n| clickToClose | false | Boolean       | true        | If set to `false`, it will not be possible to close modal by clicking on the background |\r\n| transition| false | String           |             | Transition name |\r\n| classes   | false | [String, Array]  | 'v--modal'| Classes that will be applied to the actual modal box, if not specified, the default 'vue--modal' class will be applied |\r\n| width     | false | [String, Number] | 600         | Width in pixels or percents (e.g. 50 or \"50px\", \"50%\") |\r\n| height    | false | [String, Number] | 300         | Height in pixels or percents (e.g. 50 or \"50px\", \"50%\") or `\"auto\"` |\r\n| minWidth  | false | Number (px)      | 0           | The minimum width to which modal can be resized  |\r\n| minHeight | false | Number (px)      | 0           | The minimum height to which modal can be resized |\r\n| maxWidth  | false | Number (px)      | Infinity    | The maximum width of the modal (if the value is greater than window width, window width will be used instead |\r\n| maxHeight | false | Number (px)      | Infinity    | The maximum height of the modal (if the value is greater than window height, window height will be used instead |\r\n| pivotX    | false | Number (0 - 1.0) | 0.5         | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from left) of the window |\r\n| pivotY    | false | Number (0 - 1.0) | 0.5         | Vertical position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |\r\n\r\n### Events\r\n\r\n| Name         | Description |\r\n| ---          | --- |\r\n| before-open  | Emits while modal is still invisible, but was added to the DOM |\r\n| opened       | Emits after modal became visible or started transition |\r\n| before-close | Emits before modal is going to be closed. Can be stopped from the event listener calling `event.stop()` (example: you are creating a text editor, and want to stop closisng and ask user to correct mistakes if text is not valid)\r\n| closed       | Emits right before modal is destoyed |\r\n\r\nExample:\r\n```vue\r\n<template>\r\n  <modal name=\"example\"\r\n         :width=\"300\"\r\n         :height=\"300\"\r\n         @before-open=\"beforeOpen\"\r\n         @before-close=\"beforeClose\">\r\n    <b>{{time}}</b>\r\n  </modal>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'ExampleModal',\r\n  data () {\r\n    return {\r\n      time: 0,\r\n      duration: 5000\r\n    }\r\n  },\r\n  methods: {\r\n    beforeOpen (event) {\r\n      console.log(event)\r\n      // Set the opening time of the modal\r\n      this.time = Date.now()\r\n    },\r\n    beforeClose (event) {\r\n      console.log(event)\r\n      // If modal was open less then 5000 ms - prevent closing it\r\n      if (this.time + this.duration < Date.now()) {\r\n        event.stop()\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\nExample with a dynamic modal:\r\n```vue\r\nexport default {\r\n  name: 'ExampleModal',\r\n  data () {\r\n    return {\r\n      time: 0,\r\n      duration: 5000\r\n    }\r\n  },\r\n  methods: {\r\n    openModal () {\r\n      this.$modal.show({\r\n        template: `<b>{{time}}</b>`,\r\n        props: ['time']\r\n      }, {\r\n        time: this.time\r\n      }, {\r\n        width: 300,\r\n        height: 300\r\n      }, {\r\n        'before-open': this.beforeOpen,\r\n        'before-close': this.beforeClose\r\n      })\r\n    },\r\n    beforeOpen (event) {\r\n      console.log(event)\r\n      // Set the opening time of the modal\r\n      this.time = Date.now()\r\n    },\r\n    beforeClose (event) {\r\n      console.log(event)\r\n      // If modal was open less then 5000 ms - prevent closing it\r\n      if (this.time + this.duration < Date.now()) {\r\n        event.stop()\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\nThis example, initializes `time` variable every time the modal is being opened.\r\nAnd then forbits closing it for the next 5000 ms\r\n\r\n### Other\r\n\r\n#### Height: \"auto\"\r\n\r\nFrom `v1.2.6` height can be set to \"auto\". If you want to be able to scroll modal in case it's height exceeds window height - you can set flag `scrollable=\"true\"`.\r\n\r\np.s. `scrollable` will only work with `height=\"auto\"`.\r\n\r\nExample:\r\n\r\n```vue\r\n<modal name=\"foo\" height=\"auto\" :scrollable=\"true\">...</modal>\r\n```\r\n\r\nAuto height:\r\n\r\n<p align=\"center\">\r\n  <img src=\"https://media.giphy.com/media/xUPGGpEV00RDDDeiuk/giphy.gif\">\r\n</p>\r\n\r\nScrollable content & auto height:\r\n\r\n<p align=\"center\">\r\n  <img src=\"https://media.giphy.com/media/xUn3CfwfH3ISuf4mxq/giphy.gif\">\r\n</p>\r\n\r\n\r\n#### Close button\r\n\r\nIf you want to have a Close (x) button in the top-right corner, you can use \"top-right\" slot for it. There is deliberately no predefined Close button style - you will have to implement/use your own button.\r\n\r\nExample:\r\n```vue\r\n<template>\r\n  <modal name=\"foo\">\r\n\r\n    <div slot=\"top-right\">\r\n      <button @click=\"$modal.hide('foo')\">\r\n        ❌\r\n      </button>\r\n    </div>\r\n\r\n    Hello, ☀️!\r\n\r\n  </modal>\r\n</template>\r\n```\r\n\r\n\r\n#### Draggable handler\r\n\r\nDraggable property can accept not only `Boolean` but also `String` paramenters. With `String` value, you can specify a CSS selector to the element which will be a \"handler\" for dragging.\r\n\r\nExample:\r\n\r\n```vue\r\n<modal name=\"bar\" draggable=\".window-header\">\r\n  <div class=\"window-header\">DRAG ME HERE</div>\r\n  <div>\r\n     Hello, 🌎!\r\n  </div>\r\n</modal>\r\n```\r\n\r\n#### Overlay background color\r\n\r\nIf you want to change overlay background color, you can easily do it using css.\r\n\r\nFor all modals:\r\n\r\n```css\r\n.v--modal-overlay {\r\n  background: red;\r\n}\r\n```\r\n\r\nFor specific modal:\r\n\r\n```css\r\n.v--modal-overlay[data-modal=\"my_modal_name\"] {\r\n  background: transparent;\r\n}\r\n```\r\n\r\n#### Fullscreen\r\n\r\n```vue\r\n<modal name=\"fs\" :adaptive=\"true\" width=\"100%\" height=\"100%\">\r\nDont forget about close button :)\r\n</modal>\r\n```\r\n\r\n### Check out\r\n\r\nCheck out my other projects:\r\n\r\n* https://github.com/euvl/vue-notification\r\n* https://github.com/euvl/vue-js-toggle-button\r\n* https://github.com/euvl/vue-js-popover\r\n* https://github.com/euvl/v-clipboard\r\n\r\n### Developers\r\n\r\nTo run an example:\r\n```sh\r\n# Clone repo\r\ngit clone https://github.com/euvl/vue-js-modal.git\r\n\r\n# Run unit tests\r\nnpm run unit\r\n\r\n# Run linter\r\nnpm run lint\r\n\r\n# Build main library for client & ssr\r\ncd vue-js-modal\r\nnpm install\r\nnpm run build\r\n\r\n# Build and run demo\r\ncd demo/client_side_rendering\r\nnpm install\r\nnpm run dev\r\n```\r\n","readmeFilename":"README.md"}