├── .babelrc
├── .gitignore
├── jsconfig.json
├── src
    └── index.js
├── lib
    └── index.js
├── component
    ├── Component.vue
    └── Component.spec.js
├── .github
    └── workflows
    │   └── npm-publish.yml
├── package.json
└── README.md


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["@babel/preset-env"]
4 |   ]
5 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export const clickOutSide = {
 2 |   mounted: function (el, binding) {
 3 |     el.clickOutsideEvent = function (event) {
 4 |       if (!(el == event.target || el.contains(event.target))) {
 5 |         binding.value(event, el)
 6 |       }
 7 |     }
 8 |     document.addEventListener("click", el.clickOutsideEvent)
 9 |   },
10 |   unmounted: function (el) {
11 |     document.removeEventListener("click", el.clickOutsideEvent)
12 |   },
13 | }
14 | 
15 | export default clickOutSide
16 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | var clickOutSide = exports.clickOutSide = {
 7 |   mounted: function mounted(el, binding, vnode) {
 8 |     el.clickOutsideEvent = function (event) {
 9 |       if (!(el == event.target || el.contains(event.target))) {
10 |         binding.value(event, el);
11 |       }
12 |     };
13 |     document.addEventListener("click", el.clickOutsideEvent);
14 |   },
15 |   unmounted: function unmounted(el) {
16 |     document.removeEventListener("click", el.clickOutsideEvent);
17 |   }
18 | };
19 | 
20 | exports.default = clickOutSide;


--------------------------------------------------------------------------------
/component/Component.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main>
 3 |     <div
 4 |       v-if="visible"
 5 |       @click="counter++"
 6 |       v-click-out-side="customMethod"
 7 |       class="box"
 8 |     >
 9 |       BOX {{ counter }}
10 |     </div>
11 |     <br />
12 |     <p>Outside of the box</p>
13 |   </main>
14 | </template>
15 | 
16 | <script>
17 | import clickOutSide from "../lib";
18 | 
19 | export default {
20 |   name: "Box",
21 |   directives: {
22 |     clickOutSide,
23 |   },
24 |   data() {
25 |     return {
26 |       visible: true,
27 |       counter: 0,
28 |     };
29 |   },
30 |   methods: {
31 |     customMethod() {
32 |       this.visible = false;
33 |     },
34 |   },
35 | };
36 | </script>
37 | 
38 | <style scoped>
39 | div {
40 |   display: flex;
41 |   align-items: center;
42 |   justify-content: center;
43 |   font-size: 2rem;
44 |   background-color: red;
45 |   width: 100px;
46 |   height: 100px;
47 | }
48 | p {
49 |   font-size: 2rem;
50 |   font-weight: 800;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 3 | 
 4 | name: Vue.js Library
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: 16
18 |       - run: npm ci
19 |       - run: npm test
20 | 
21 |   publish-npm:
22 |     needs: build
23 |     runs-on: ubuntu-latest
24 |     steps:
25 |       - uses: actions/checkout@v3
26 |       - uses: actions/setup-node@v3
27 |         with:
28 |           node-version: 16
29 |           registry-url: https://registry.npmjs.org/
30 |       - run: npm ci
31 |       - run: npm publish --access=public
32 |         env:
33 |           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
34 | 


--------------------------------------------------------------------------------
/component/Component.spec.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @jest-environment jsdom
 3 |  */
 4 | 
 5 | import { mount } from '@vue/test-utils'
 6 | 
 7 | import clickOutSide from "../lib";
 8 | 
 9 | import Box from './Component.vue'
10 | 
11 | test('box element is not visible at first', () => {
12 |   const wrapper = mount(Box)
13 | 
14 |   expect(wrapper.find('.box').exists()).toBe(true)
15 | })
16 | 
17 | test('box counter increases if button is clicked', async () => {
18 |   const wrapper = mount(Box)
19 | 
20 |   expect(wrapper.find('.box').exists()).toBe(true)
21 | 
22 |   const button = wrapper.find('.box')
23 |   await button.trigger('click')
24 | 
25 |   expect(wrapper.find('.box').text()).toBe('BOX 1')
26 | })
27 | 
28 | // TODO: fix it.
29 | test('box element is invisible if data visible is false', async () => {
30 |   const wrapper = mount(Box, {
31 |     global: {
32 |       directives: {
33 |         clickOutSide,
34 |       }
35 |     }
36 |   })
37 | 
38 |   const box = wrapper.find('.box')
39 |   const main = wrapper.find('main')
40 | 
41 |   expect(box.exists()).toBe(true)
42 | 
43 |   await main.trigger('click')
44 | 
45 |   expect(box.isVisible()).toBe(false)
46 | })
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@mahdikhashan/vue3-click-outside",
 3 |   "description": "A Vue.js 3 click outside custom directive",
 4 |   "version": "0.1.2",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "start": "babel-node src",
 8 |     "build": "rimraf lib && babel src -d lib --ignore src/__tests__",
 9 |     "test": "jest --watch"
10 |   },
11 |   "devDependencies": {
12 |     "@babel/preset-env": "^7.21.4",
13 |     "@vue/test-utils": "^2.3.2",
14 |     "@vue/vue3-jest": "^28.1.0",
15 |     "babel-cli": "^6.26.0",
16 |     "babel-core": "^7.0.0-bridge.0",
17 |     "babel-jest": "^28.1.3",
18 |     "babel-preset-env": "^1.7.0",
19 |     "jest": "^28.1.3",
20 |     "jest-environment-jsdom": "^29.5.0",
21 |     "rimraf": "^3.0.2",
22 |     "vue": "^3.2.47"
23 |   },
24 |   "peerDependencies": {
25 |     "vue": "3.x.x"
26 |   },
27 |   "homepage": "https://github.com/mahdikhashan/vue3-click-outside#readme",
28 |   "repository": {
29 |     "type": "git",
30 |     "url": "https://github.com/mahdikhashan/vue3-click-outside"
31 |   },
32 |   "bugs": {
33 |     "url": "https://github.com/mahdikhashan/vue3-click-outside/issues",
34 |     "email": "mahdikhashan1@gmail.com"
35 |   },
36 |   "keywords": [
37 |     "vue",
38 |     "vue3",
39 |     "directive",
40 |     "click-out-side"
41 |   ],
42 |   "author": "Mahdi Khashan",
43 |   "license": "MIT",
44 |   "jest": {
45 |     "verbose": true,
46 |     "moduleFileExtensions": ["js","vue"],
47 |     "testEnvironmentOptions": {
48 |       "customExportConditions": [
49 |         "node",
50 |         "node-addons"
51 |       ]
52 |     },
53 |     "transform": {
54 |       "^.+\\.js$": "babel-jest",
55 |       "^.+\\.vue$": "@vue/vue3-jest"
56 |     }
57 |   },
58 |   "dependencies": {
59 |     "vue": "3.x.x"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue3-click-outside
  2 | Directive for Vue 3 to run a method on clicking outside of the binded element
  3 | 
  4 | ![npm (tag)](https://img.shields.io/npm/v/@mahdikhashan/vue3-click-outside/latest?style=plastic)
  5 | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@mahdikhashan/vue3-click-outside)
  6 | ![npm](https://img.shields.io/npm/dy/@mahdikhashan/vue3-click-outside)
  7 | ![npm peer dependency version](https://img.shields.io/npm/dependency-version/@mahdikhashan/vue3-click-outside/peer/vue)
  8 | ![GitHub commit activity](https://img.shields.io/github/commit-activity/y/mahdikhashan/vue3-click-outside)
  9 | ![NPM](https://img.shields.io/npm/l/@mahdikhashan/vue3-click-outside)
 10 | 
 11 | 
 12 | ## Demo
 13 | 
 14 | [Demo](https://codesandbox.io/s/vue3-click-out-side-i6zhbb)
 15 | 
 16 | ## Installation
 17 | 
 18 | ```
 19 | npm install --save @mahdikhashan/vue3-click-outside
 20 | ```
 21 | 
 22 | ## How to use
 23 | add the custom directive to you component
 24 | 
 25 | ```js
 26 | <template>
 27 |   <main>
 28 |     <div v-click-out-side="customMethod" @click="clickInside" class="box">
 29 |       BOX
 30 |     </div>
 31 |     <br />
 32 |     <p>Outside of the box</p>
 33 |   </main>
 34 | </template>
 35 | 
 36 | <script>
 37 | import clickOutSide from "@mahdikhashan/vue3-click-outside";
 38 | 
 39 | export default {
 40 |   name: "Box",
 41 |   directives: {
 42 |     clickOutSide,
 43 |   },
 44 |   props: {
 45 |     msg: String,
 46 |   },
 47 |   methods: {
 48 |     customMethod() {
 49 |       alert("You clicked outside the box!");
 50 |     },
 51 |     clickInside() {
 52 |       alert("You clicked inside the box!");
 53 |     },
 54 |   },
 55 | };
 56 | </script>
 57 | 
 58 | <style scoped>
 59 | div {
 60 |   display: flex;
 61 |   align-items: center;
 62 |   justify-content: center;
 63 |   font-size: 2rem;
 64 |   background-color: red;
 65 |   width: 100px;
 66 |   height: 100px;
 67 | }
 68 | p {
 69 |   font-size: 2rem;
 70 |   font-weight: 800;
 71 | }
 72 | </style>
 73 | 
 74 | ```
 75 | 
 76 | ### Use Composition Api
 77 | If you want to use the library with the <script setup> or composition api, you need to rename the object like bellow.
 78 | 
 79 | ```js
 80 | import { clickOutSide as vClickOutSide } from '@mahdikhashan/vue3-click-outside'
 81 | ```
 82 | 
 83 | ## Contributing
 84 | 
 85 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 86 | 
 87 | 1. Fork the Project
 88 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
 89 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
 90 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
 91 | 5. Open a Pull Request
 92 | 
 93 | ## License
 94 | 
 95 | Distributed under the MIT License. See [`LICENSE`](./LICENSE.md) for more information.
 96 | 
 97 | ## Contributors
 98 | 
 99 | Many thanks for your help!
100 | 
101 | <a href="https://github.com/mahdikhashan/99-minutes-emails/graphs/contributors">
102 |   <img src="https://contrib.rocks/image?repo=mahdikhashan/99-minutes-emails" />
103 | </a>
104 | 
105 | The image of contributors is made with [contrib.rocks](https://contrib.rocks).
106 | 


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