{"_id":"vue-on-click-outside","_rev":"6-e8d113ab44777ad8fd8446a9cf3a8569","name":"vue-on-click-outside","description":"vue mixin/directive that does something when you click outside a container","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"vue-on-click-outside","version":"1.0.0","description":"vue mixin/directive that does something when you click outside a container","main":"dist/index.js","scripts":{"test":"standard src/*.js","rollup":"rollup -c .rollup.js","min":"uglifyjs dist/vue-on-click-outside.js --output dist/vue-on-click-outside.min.js --screw-ie8 --compress --mangle","build":"npm run test && npm run rollup && npm run min","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/kmohrf/vue-on-click-outside.git"},"keywords":["vue","vuejs","directive"],"author":{"name":"Konrad Mohrfeldt","email":"konrad.mohrfeldt@farbdev.org"},"license":"MIT","bugs":{"url":"https://github.com/kmohrf/vue-on-click-outside/issues"},"homepage":"https://github.com/kmohrf/vue-on-click-outside#readme","devDependencies":{"babel-preset-es2015-rollup":"^3.0.0","rollup":"^0.41.4","rollup-plugin-babel":"^2.7.1","standard":"^8.6.0","uglifyjs":"^2.4.10"},"gitHead":"6086d0850a2f3846a01e9fc673a136d53684aab5","_id":"vue-on-click-outside@1.0.0","_shasum":"b9b8bcae2b8fcceaf2132617b2a814739add9629","_from":".","_npmVersion":"4.1.1","_nodeVersion":"7.4.0","_npmUser":{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"},"dist":{"shasum":"b9b8bcae2b8fcceaf2132617b2a814739add9629","tarball":"https://registry.npmjs.org/vue-on-click-outside/-/vue-on-click-outside-1.0.0.tgz","integrity":"sha512-PiMJBw7/olmowPwhEE7O0IeLj6UCGDWUKChmRI3tk7sUF1g1YhtKR9EByz3npCDsvAheZKayYdnfJ0ruGGfUmA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQPyeULmdhHf6WIQhwFRSj/fRwdZ93WHvBep6v87vK+gIhAJm6h+KP5LMbWS0L1UF7JOUZ/FW5Xl2ZKcF+EG2+MHNm"}]},"maintainers":[{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue-on-click-outside-1.0.0.tgz_1486119523444_0.838221229147166"}},"1.0.1":{"name":"vue-on-click-outside","version":"1.0.1","description":"vue mixin/directive that does something when you click outside a container","main":"dist/vue-on-click-outside.js","scripts":{"test":"standard src/*.js","rollup":"rollup -c .rollup.js","min":"uglifyjs dist/vue-on-click-outside.js --output dist/vue-on-click-outside.min.js --screw-ie8 --compress --mangle","build":"npm run test && npm run rollup && npm run min","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/kmohrf/vue-on-click-outside.git"},"keywords":["vue","vuejs","directive"],"author":{"name":"Konrad Mohrfeldt","email":"konrad.mohrfeldt@farbdev.org"},"license":"MIT","bugs":{"url":"https://github.com/kmohrf/vue-on-click-outside/issues"},"homepage":"https://github.com/kmohrf/vue-on-click-outside#readme","devDependencies":{"babel-preset-es2015-rollup":"^3.0.0","rollup":"^0.41.4","rollup-plugin-babel":"^2.7.1","standard":"^8.6.0","uglifyjs":"^2.4.10"},"gitHead":"e1424a5a73f121062a2e71d57107c47ea2ecc6b0","_id":"vue-on-click-outside@1.0.1","_shasum":"25c99e05bdf0d8ec82ef3baa283ab6924e654ae4","_from":".","_npmVersion":"4.1.1","_nodeVersion":"7.4.0","_npmUser":{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"},"dist":{"shasum":"25c99e05bdf0d8ec82ef3baa283ab6924e654ae4","tarball":"https://registry.npmjs.org/vue-on-click-outside/-/vue-on-click-outside-1.0.1.tgz","integrity":"sha512-Z+4vxZI/Omc9z9TI77aYueVqtyzgy1UtcJL6yt0RaKMEGsNJe7EV7I17tKkvPGmtgWzNY15zJYoNrt81z5Y0bw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAC2C1lEvRu1iaQwIdxc1g0kMLn96wfwH5UhYTG/EmWKAiA/9WWaBhwnCHwm6uYCTFNByzIay3s8UmBTYyZZiWHuBA=="}]},"maintainers":[{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/vue-on-click-outside-1.0.1.tgz_1486120023593_0.7884323063772172"}},"1.0.2":{"name":"vue-on-click-outside","version":"1.0.2","description":"vue mixin/directive that does something when you click outside a container","main":"dist/vue-on-click-outside.js","scripts":{"test":"standard src/*.js","rollup":"rollup -c .rollup.js","min":"uglifyjs dist/vue-on-click-outside.js --output dist/vue-on-click-outside.min.js --screw-ie8 --compress --mangle","build":"yarn run test && yarn run rollup && yarn run min","prepublish":"yarn run build"},"repository":{"type":"git","url":"git+https://github.com/kmohrf/vue-on-click-outside.git"},"keywords":["vue","vuejs","directive"],"author":{"name":"Konrad Mohrfeldt","email":"konrad.mohrfeldt@farbdev.org"},"license":"MIT","bugs":{"url":"https://github.com/kmohrf/vue-on-click-outside/issues"},"homepage":"https://github.com/kmohrf/vue-on-click-outside#readme","devDependencies":{"babel-preset-es2015":"^6.24.1","rollup":"^0.41.4","rollup-plugin-babel":"^2.7.1","standard":"^8.6.0","uglifyjs":"^2.4.10"},"gitHead":"d2cbffa9ecd95e3535b6fb3e5783cfe4b0666d6c","_id":"vue-on-click-outside@1.0.2","_shasum":"c8c20d1d6c077db6c6168a6efa988f70faad4e4b","_from":".","_npmVersion":"4.5.0","_nodeVersion":"7.9.0","_npmUser":{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"},"dist":{"shasum":"c8c20d1d6c077db6c6168a6efa988f70faad4e4b","tarball":"https://registry.npmjs.org/vue-on-click-outside/-/vue-on-click-outside-1.0.2.tgz","integrity":"sha512-1YbxL4771hgVqIz4YFyoZ23Te2o/UrK+QmUXLZzDu3qmZIG+qQIAClURh5nft8KJJ+e6XGHtuckeMlEppuyhLg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqR7W0Cvv99y70MB02FWw8HRqFrB6p2+3sE/3VfGmydAIhAIg4wC+jSaDhngpR/o2+zIb7NfBj1NF1hTnDiDBOuNck"}]},"maintainers":[{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue-on-click-outside-1.0.2.tgz_1493681130435_0.7173178498633206"}},"1.0.3":{"name":"vue-on-click-outside","version":"1.0.3","description":"vue mixin/directive that does something when you click outside a container","main":"dist/vue-on-click-outside.js","scripts":{"test":"standard src/*.js","rollup":"rollup -c .rollup.js","min":"uglifyjs dist/vue-on-click-outside.js --output dist/vue-on-click-outside.min.js --screw-ie8 --compress --mangle","build":"yarn run test && yarn run rollup && yarn run min","prepublish":"yarn run build"},"repository":{"type":"git","url":"git+https://github.com/kmohrf/vue-on-click-outside.git"},"keywords":["vue","vuejs","directive"],"author":{"name":"Konrad Mohrfeldt","email":"konrad.mohrfeldt@farbdev.org"},"license":"MIT","bugs":{"url":"https://github.com/kmohrf/vue-on-click-outside/issues"},"homepage":"https://github.com/kmohrf/vue-on-click-outside#readme","devDependencies":{"babel-preset-es2015":"^6.24.1","rollup":"^0.41.4","rollup-plugin-babel":"^2.7.1","standard":"^8.6.0","uglifyjs":"^2.4.10"},"gitHead":"19b10964297e00180e39cd33dff1ce85f9331758","_id":"vue-on-click-outside@1.0.3","_shasum":"6b7200c2b50fa45eb77dce2daad7ab436d9dd611","_from":".","_npmVersion":"4.5.0","_nodeVersion":"7.9.0","_npmUser":{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"},"dist":{"shasum":"6b7200c2b50fa45eb77dce2daad7ab436d9dd611","tarball":"https://registry.npmjs.org/vue-on-click-outside/-/vue-on-click-outside-1.0.3.tgz","integrity":"sha512-eaL3ORsSGl9L1kyZe6Dw6geqzhdJfjrWdm6VGyNey7+0irABZIKILlQbm4nis1ScMB60HHqDC8XwzskcpYWuXQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhkWvBtgqE284RIRym/yTgItqNq3YKR+UulX6FaHXz2wIhAIxlpxQw13EU4Ih6DTL+fU1UjRKLZS1Jyx5KfaIT0h4i"}]},"maintainers":[{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/vue-on-click-outside-1.0.3.tgz_1493681347300_0.4347395116928965"}}},"readme":"# vue-on-click-outside\n\nvue-on-click-outside is a [Vue](https://vuejs.org/) directive which calls a method whenever a click event is registered *outside* of the element the directive was bound to. The most obvious use case is to close an element whenever someone clicks outside of it.\n\n## Installation\n\n```bash\nnpm install vue-on-click-outside --save\n\n# or if you prefer yarn\nyarn add vue-on-click-outside\n```\n\n## Usage\n\nvue-on-click-outside provides a mixin and directive export. You may use either of them to register the directive globally or locally.\n\n```js\n// global directive\nimport Vue from 'vue'\nimport { directive as onClickOutside } from 'vue-on-click-outside' \nVue.directive('on-click-outside', onClickOutside)\n\n// local mixin\nimport { mixin as onClickOutside } from 'vue-on-click-outside'\nconst MyComponent = {\n  mixins: [onClickOutside]\n}\nexport default MyComponent\n```\n\nIf you’ve registered the directive inside of your component you’re good to go and can use it in your templates.\n\n```html\n<template>\n  <button type=\"button\" class=\"i-am-a-popover-trigger\" @click=\"open\"></button>  \n  <div class=\"i-am-a-popover close-me-by-clicking-outside-of-me\" \n    v-if=\"showPopover\" v-on-click-outside=\"close\">\n    <span>Interesting Text!</span>\n  </div>\n</template>\n\n<script>\n  import { mixin as onClickOutside } from 'vue-on-click-outside'\n  export default {\n    mixins: [onClickOutside],\n    data() {\n      return { showPopover: false }\n    },\n    methods: {\n      open() { this.showPopover = true },\n      close() { this.showPopover = false }\n    }\n  }\n</script>\n```\n\n## How it works \n\nvue-on-click-outside uses `mouseenter` and `mouseleave` events to determine if the user is still *inside* the element. This should account for content that is dynamically removed on click events and is the primary distinction to the existing [vue-clickaway](https://github.com/simplesmiler/vue-clickaway) library.\nOnce a user clicks on something the click event bubbles up the DOM tree until it reaches the `documentElement`. A click listener on the `documentElement` then looks for elements that were not targetted by the click event and calls the callback you provided via the directive.\n \nIf you use vue-on-click-outside multiple times on a single page it will only ever create one single `documentElement` click listener and two event listeners for your element. If you **know** that your element won’t contain any dynamically created/removed content you can also use the `static` modifier of the directive (turning `v-on-click-outside=\"close\"` into `v-on-click-outside.static=\"close\"`). It will switch to a different strategy that works without the two event listeners per element. \n \n## Caveats\n \nSome JavaScript code will make it appear as if their content is inside your element but in fact it is absolutely positioned from the `body` element. A lot of datepicker, tooltip, popover and many more libraries rely on this kind of behaviour. Look out for *static* modes or options that allow you to attach their root element to your element, that uses the directive (or some element inside the tree of your element). \n","maintainers":[{"name":"kmohrf","email":"konrad.mohrfeldt@farbdev.org"}],"time":{"modified":"2022-06-28T20:02:53.511Z","created":"2017-02-03T10:58:43.984Z","1.0.0":"2017-02-03T10:58:43.984Z","1.0.1":"2017-02-03T11:07:05.564Z","1.0.2":"2017-05-01T23:25:31.095Z","1.0.3":"2017-05-01T23:29:09.203Z"},"homepage":"https://github.com/kmohrf/vue-on-click-outside#readme","keywords":["vue","vuejs","directive"],"repository":{"type":"git","url":"git+https://github.com/kmohrf/vue-on-click-outside.git"},"author":{"name":"Konrad Mohrfeldt","email":"konrad.mohrfeldt@farbdev.org"},"bugs":{"url":"https://github.com/kmohrf/vue-on-click-outside/issues"},"license":"MIT","readmeFilename":"README.md","users":{"andersoncossul":true}}