├── .eslintrc ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets ├── animated.gif └── demo.png ├── dist ├── common.js ├── common.js.map ├── module.js ├── module.js.map └── types │ └── index.d.ts ├── docs ├── .vitepress │ ├── components │ │ ├── popup.vue │ │ └── simple.vue │ ├── config.js │ ├── dist │ │ └── _assets │ │ │ ├── app.df589b6b.js │ │ │ ├── common-af9ee497.js │ │ │ ├── index.md.ff5beefb.js │ │ │ ├── index.md.ff5beefb.lean.js │ │ │ └── style.910c7711.css │ └── module.js └── index.md ├── index.js ├── package.json ├── rollup.config.js ├── types └── index.d.ts └── yarn.lock /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 6, 4 | "sourceType": "module", 5 | "ecmaFeatures": { 6 | "jsx": true 7 | } 8 | }, 9 | "env": { 10 | "es6": true 11 | } 12 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs 2 | .DS_Store 3 | assets -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | ## [1.0.6] - 2020-11-16 5 | ### Fixed 6 | - `onUpdated` does not get vnode as an argument 7 | 8 | ## [1.0.3] - 2020-09-21 9 | ### Added 10 | - Added .npmignore 11 | 12 | ## [1.0.2] - 2020-09-21 13 | ### Updated 14 | - Readme 15 | - Changelog 16 | 17 | ## [1.0.1] - 2020-09-21 18 | ### Updated 19 | - Readme 20 | 21 | ## [1.0.0] - 2020-09-21 22 | ### Updated 23 | - Initial Release 24 | 25 | ## [0.1.6] - 2020-09-21 26 | 27 | ## [0.1.5] - 2020-09-21 28 | 29 | ## [0.1.4] - 2020-09-21 30 | ### Fixed 31 | - Event Bubble Up 32 | 33 | ## [0.1.3] - 2020-09-20 34 | ### Added 35 | - Pre Release 36 | 37 | 38 | [0.1.3]: https://github.com/vinceg/vue-click-away/releases/tag/v0.1.3 39 | [0.1.4]: https://github.com/vinceg/vue-click-away/releases/tag/v0.1.4 40 | [0.1.5]: https://github.com/vinceg/vue-click-away/releases/tag/v0.1.5 41 | [0.1.6]: https://github.com/vinceg/vue-click-away/releases/tag/v0.1.6 42 | [1.0.0]: https://github.com/vinceg/vue-click-away/releases/tag/v1.0.0 43 | [1.0.1]: https://github.com/vinceg/vue-click-away/releases/tag/v1.0.1 44 | [1.0.2]: https://github.com/vinceg/vue-click-away/releases/tag/v1.0.2 45 | [1.0.3]: https://github.com/vinceg/vue-click-away/releases/tag/v1.0.3 -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Vincent Gabriel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Click Away 2 | 3 | > Demo is available using VitePress and is included in this repository. See [Demo](#demo) Section on how to use and the reason why it's not live yet. 4 | 5 | > Vue 3.0 Compatible Click Away Directive 6 | 7 | [![npm version](https://img.shields.io/npm/v/vue3-click-away.svg)](https://www.npmjs.com/package/vue3-click-away) 8 | ![GitHub issues](https://img.shields.io/github/issues/vinceg/vue-click-away) 9 | ![NPM](https://img.shields.io/npm/l/vue3-click-away) 10 | ![GitHub contributors](https://img.shields.io/github/contributors/vinceg/vue-click-away) 11 | ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/vinceg/vue-click-away) 12 | 13 | 14 | ![Example GIF](assets/animated.gif) 15 | 16 | 17 | ## Overview 18 | 19 | Detect if a click event happened outside of an element. Compatible with Vue 3.x. 20 | 21 | ## Requirements 22 | 23 | - Vue 3.x 24 | 25 | ## Installation 26 | 27 | ``` 28 | npm i -s vue3-click-away 29 | ``` 30 | 31 |

32 | 33 | ``` 34 | yarn add vue3-click-away 35 | ``` 36 | 37 | ## Usage 38 | 39 | > By default the module exports a plugin, but you can also use this as a mixin which is documented below or as a directive. 40 | 41 | ```js 42 | import { createApp } from "vue"; 43 | import App from "./App.vue"; 44 | import VueClickAway from "vue3-click-away"; 45 | 46 | const app = createApp(App); 47 | 48 | app.use(VueClickAway) // Makes 'v-click-away' directive usable in every component 49 | app.mount('#app') 50 | ``` 51 | 52 |

53 | 54 | With Options API 55 | ```vue 56 | 61 | 62 | 71 | ``` 72 | 73 | or with Vue Composition API & Typescript 74 | 75 | ```vue 76 | 81 | 82 | 93 | ``` 94 | 95 | ### Directive 96 | 97 | ```html 98 | 103 | ``` 104 | 105 |

106 | 107 | ```js 108 | import { directive } from "vue3-click-away"; 109 | export default { 110 | directives: { 111 | ClickAway: directive 112 | }, 113 | methods: { 114 | onClickAway(event) { 115 | console.log(event); 116 | } 117 | } 118 | } 119 | ``` 120 | 121 | ### Mixin 122 | 123 | ```html 124 | 129 | ``` 130 | 131 |

132 | 133 | ```js 134 | import { mixin as VueClickAway } from "vue3-click-away"; 135 | export default { 136 | mixins: [VueClickAway], 137 | methods: { 138 | onClickAway(event) { 139 | console.log(event); 140 | } 141 | } 142 | } 143 | ``` 144 | 145 | ## Demo 146 | 147 | Currently VitePress is having an issue building for production since Directives require SSR implementation and there is no way to override this or skip it (VuePress has ClientOnly component, VitePress doesn't, Yet). 148 | 149 | I've opened an issue and pending to see if there is a way to go around it, [Click Here](https://github.com/vuejs/vitepress/issues/92) to view the issue reported. 150 | 151 | For the time being, to test this out clone the repository and run the following inside the `/docs` folder 152 | 153 | ``` 154 | npx vitepress 155 | ``` 156 | 157 | 158 | ![VitePress Documentation](assets/demo.png) 159 | 160 | 161 | -------------------------------------------------------------------------------- /assets/animated.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VinceG/vue-click-away/6f252e6992af9acce410f0b1d084778675f7c3e9/assets/animated.gif -------------------------------------------------------------------------------- /assets/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VinceG/vue-click-away/6f252e6992af9acce410f0b1d084778675f7c3e9/assets/demo.png -------------------------------------------------------------------------------- /dist/common.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { value: true }); 4 | 5 | const clickEventType = function () { 6 | return document.ontouchstart !== null ? "click" : "touchstart"; 7 | }; 8 | 9 | const UNIQUE_ID = "__vue_click_away__"; 10 | 11 | const onMounted = function (el, binding, vnode) { 12 | onUnmounted(el); 13 | let vm = vnode.context; 14 | let callback = binding.value; 15 | let nextTick = false; 16 | setTimeout(function () { 17 | nextTick = true; 18 | }, 0); 19 | 20 | el[UNIQUE_ID] = function (event) { 21 | if ((!el || !el.contains(event.target)) && callback && nextTick && typeof callback === "function") { 22 | return callback.call(vm, event); 23 | } 24 | }; 25 | 26 | document.addEventListener(clickEventType(), el[UNIQUE_ID], false); 27 | }; 28 | 29 | const onUnmounted = function (el) { 30 | document.removeEventListener(clickEventType(), el[UNIQUE_ID], false); 31 | delete el[UNIQUE_ID]; 32 | }; 33 | 34 | const onUpdated = function (el, binding, vnode) { 35 | if (binding.value === binding.oldValue) { 36 | return; 37 | } 38 | 39 | onMounted(el, binding, vnode); 40 | }; 41 | 42 | const plugin = { 43 | install: function (app) { 44 | app.directive('click-away', directive); 45 | } 46 | }; 47 | const directive = { 48 | mounted: onMounted, 49 | updated: onUpdated, 50 | unmounted: onUnmounted 51 | }; 52 | const mixin = { 53 | directives: { 54 | ClickAway: directive 55 | } 56 | }; 57 | 58 | exports.default = plugin; 59 | exports.directive = directive; 60 | exports.mixin = mixin; 61 | //# sourceMappingURL=common.js.map 62 | -------------------------------------------------------------------------------- /dist/common.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"common.js","sources":["../index.js"],"sourcesContent":["const clickEventType = () => {\n return document.ontouchstart !== null ? \"click\" : \"touchstart\";\n};\n\nconst UNIQUE_ID = \"__vue_click_away__\";\n\nconst onMounted = (el, binding, vnode) => {\n onUnmounted(el);\n\n let vm = vnode.context;\n let callback = binding.value;\n\n let nextTick = false;\n setTimeout(function () {\n nextTick = true;\n }, 0);\n\n el[UNIQUE_ID] = (event) => {\n if (\n (!el || !el.contains(event.target)) &&\n callback &&\n nextTick &&\n typeof callback === \"function\"\n ) {\n return callback.call(vm, event);\n }\n };\n\n document.addEventListener(clickEventType(), el[UNIQUE_ID], false);\n};\n\nconst onUnmounted = (el) => {\n document.removeEventListener(clickEventType(), el[UNIQUE_ID], false);\n delete el[UNIQUE_ID];\n};\n\nconst onUpdated = (el, binding, vnode) => {\n if (binding.value === binding.oldValue) {\n return;\n }\n onMounted(el, binding, vnode);\n};\n\nconst plugin = {\n install: (app) => {\n app.directive('click-away', directive)\n }\n}\n\nconst directive = {\n mounted: onMounted,\n updated: onUpdated,\n unmounted: onUnmounted,\n};\n\nconst mixin = {\n directives: { ClickAway: directive },\n};\n\nexport {\n directive,\n mixin\n}\n\nexport default plugin;\n"],"names":["clickEventType","document","ontouchstart","UNIQUE_ID","onMounted","el","binding","vnode","onUnmounted","vm","context","callback","value","nextTick","setTimeout","event","contains","target","call","addEventListener","removeEventListener","onUpdated","oldValue","plugin","install","app","directive","mounted","updated","unmounted","mixin","directives","ClickAway"],"mappings":";;;;AAAA,MAAMA,cAAc,GAAG,YAAM;AAC3B,SAAOC,QAAQ,CAACC,YAAT,KAA0B,IAA1B,GAAiC,OAAjC,GAA2C,YAAlD;AACD,CAFD;;AAIA,MAAMC,SAAS,GAAG,oBAAlB;;AAEA,MAAMC,SAAS,GAAG,UAACC,EAAD,EAAKC,OAAL,EAAcC,KAAd,EAAwB;AACxCC,EAAAA,WAAW,CAACH,EAAD,CAAX;AAEA,MAAII,EAAE,GAAGF,KAAK,CAACG,OAAf;AACA,MAAIC,QAAQ,GAAGL,OAAO,CAACM,KAAvB;AAEA,MAAIC,QAAQ,GAAG,KAAf;AACAC,EAAAA,UAAU,CAAC,YAAY;AACrBD,IAAAA,QAAQ,GAAG,IAAX;AACD,GAFS,EAEP,CAFO,CAAV;;AAIAR,EAAAA,EAAE,CAACF,SAAD,CAAF,GAAgB,UAACY,KAAD,EAAW;AACzB,QACE,CAAC,CAACV,EAAD,IAAO,CAACA,EAAE,CAACW,QAAH,CAAYD,KAAK,CAACE,MAAlB,CAAT,KACAN,QADA,IAEAE,QAFA,IAGA,OAAOF,QAAP,KAAoB,UAJtB,EAKE;AACA,aAAOA,QAAQ,CAACO,IAAT,CAAcT,EAAd,EAAkBM,KAAlB,CAAP;AACD;AACF,GATD;;AAWAd,EAAAA,QAAQ,CAACkB,gBAAT,CAA0BnB,cAAc,EAAxC,EAA4CK,EAAE,CAACF,SAAD,CAA9C,EAA2D,KAA3D;AACD,CAvBD;;AAyBA,MAAMK,WAAW,GAAG,UAACH,EAAD,EAAQ;AAC1BJ,EAAAA,QAAQ,CAACmB,mBAAT,CAA6BpB,cAAc,EAA3C,EAA+CK,EAAE,CAACF,SAAD,CAAjD,EAA8D,KAA9D;AACA,SAAOE,EAAE,CAACF,SAAD,CAAT;AACD,CAHD;;AAKA,MAAMkB,SAAS,GAAG,UAAChB,EAAD,EAAKC,OAAL,EAAcC,KAAd,EAAwB;AACxC,MAAID,OAAO,CAACM,KAAR,KAAkBN,OAAO,CAACgB,QAA9B,EAAwC;AACtC;AACD;;AACDlB,EAAAA,SAAS,CAACC,EAAD,EAAKC,OAAL,EAAcC,KAAd,CAAT;AACD,CALD;;MAOMgB,MAAM,GAAG;AACbC,EAAAA,OAAO,EAAE,UAACC,GAAD,EAAS;AAChBA,IAAAA,GAAG,CAACC,SAAJ,CAAc,YAAd,EAA4BA,SAA5B;AACD;AAHY;MAMTA,SAAS,GAAG;AAChBC,EAAAA,OAAO,EAAEvB,SADO;AAEhBwB,EAAAA,OAAO,EAAEP,SAFO;AAGhBQ,EAAAA,SAAS,EAAErB;AAHK;MAMZsB,KAAK,GAAG;AACZC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAEN;AAAb;AADA;;;;;;"} -------------------------------------------------------------------------------- /dist/module.js: -------------------------------------------------------------------------------- 1 | const clickEventType = function () { 2 | return document.ontouchstart !== null ? "click" : "touchstart"; 3 | }; 4 | 5 | const UNIQUE_ID = "__vue_click_away__"; 6 | 7 | const onMounted = function (el, binding, vnode) { 8 | onUnmounted(el); 9 | let vm = vnode.context; 10 | let callback = binding.value; 11 | let nextTick = false; 12 | setTimeout(function () { 13 | nextTick = true; 14 | }, 0); 15 | 16 | el[UNIQUE_ID] = function (event) { 17 | if ((!el || !el.contains(event.target)) && callback && nextTick && typeof callback === "function") { 18 | return callback.call(vm, event); 19 | } 20 | }; 21 | 22 | document.addEventListener(clickEventType(), el[UNIQUE_ID], false); 23 | }; 24 | 25 | const onUnmounted = function (el) { 26 | document.removeEventListener(clickEventType(), el[UNIQUE_ID], false); 27 | delete el[UNIQUE_ID]; 28 | }; 29 | 30 | const onUpdated = function (el, binding, vnode) { 31 | if (binding.value === binding.oldValue) { 32 | return; 33 | } 34 | 35 | onMounted(el, binding, vnode); 36 | }; 37 | 38 | const plugin = { 39 | install: function (app) { 40 | app.directive('click-away', directive); 41 | } 42 | }; 43 | const directive = { 44 | mounted: onMounted, 45 | updated: onUpdated, 46 | unmounted: onUnmounted 47 | }; 48 | const mixin = { 49 | directives: { 50 | ClickAway: directive 51 | } 52 | }; 53 | 54 | export default plugin; 55 | export { directive, mixin }; 56 | //# sourceMappingURL=module.js.map 57 | -------------------------------------------------------------------------------- /dist/module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"module.js","sources":["../index.js"],"sourcesContent":["const clickEventType = () => {\n return document.ontouchstart !== null ? \"click\" : \"touchstart\";\n};\n\nconst UNIQUE_ID = \"__vue_click_away__\";\n\nconst onMounted = (el, binding, vnode) => {\n onUnmounted(el);\n\n let vm = vnode.context;\n let callback = binding.value;\n\n let nextTick = false;\n setTimeout(function () {\n nextTick = true;\n }, 0);\n\n el[UNIQUE_ID] = (event) => {\n if (\n (!el || !el.contains(event.target)) &&\n callback &&\n nextTick &&\n typeof callback === \"function\"\n ) {\n return callback.call(vm, event);\n }\n };\n\n document.addEventListener(clickEventType(), el[UNIQUE_ID], false);\n};\n\nconst onUnmounted = (el) => {\n document.removeEventListener(clickEventType(), el[UNIQUE_ID], false);\n delete el[UNIQUE_ID];\n};\n\nconst onUpdated = (el, binding, vnode) => {\n if (binding.value === binding.oldValue) {\n return;\n }\n onMounted(el, binding, vnode);\n};\n\nconst plugin = {\n install: (app) => {\n app.directive('click-away', directive)\n }\n}\n\nconst directive = {\n mounted: onMounted,\n updated: onUpdated,\n unmounted: onUnmounted,\n};\n\nconst mixin = {\n directives: { ClickAway: directive },\n};\n\nexport {\n directive,\n mixin\n}\n\nexport default plugin;\n"],"names":["clickEventType","document","ontouchstart","UNIQUE_ID","onMounted","el","binding","vnode","onUnmounted","vm","context","callback","value","nextTick","setTimeout","event","contains","target","call","addEventListener","removeEventListener","onUpdated","oldValue","plugin","install","app","directive","mounted","updated","unmounted","mixin","directives","ClickAway"],"mappings":"AAAA,MAAMA,cAAc,GAAG,YAAM;AAC3B,SAAOC,QAAQ,CAACC,YAAT,KAA0B,IAA1B,GAAiC,OAAjC,GAA2C,YAAlD;AACD,CAFD;;AAIA,MAAMC,SAAS,GAAG,oBAAlB;;AAEA,MAAMC,SAAS,GAAG,UAACC,EAAD,EAAKC,OAAL,EAAcC,KAAd,EAAwB;AACxCC,EAAAA,WAAW,CAACH,EAAD,CAAX;AAEA,MAAII,EAAE,GAAGF,KAAK,CAACG,OAAf;AACA,MAAIC,QAAQ,GAAGL,OAAO,CAACM,KAAvB;AAEA,MAAIC,QAAQ,GAAG,KAAf;AACAC,EAAAA,UAAU,CAAC,YAAY;AACrBD,IAAAA,QAAQ,GAAG,IAAX;AACD,GAFS,EAEP,CAFO,CAAV;;AAIAR,EAAAA,EAAE,CAACF,SAAD,CAAF,GAAgB,UAACY,KAAD,EAAW;AACzB,QACE,CAAC,CAACV,EAAD,IAAO,CAACA,EAAE,CAACW,QAAH,CAAYD,KAAK,CAACE,MAAlB,CAAT,KACAN,QADA,IAEAE,QAFA,IAGA,OAAOF,QAAP,KAAoB,UAJtB,EAKE;AACA,aAAOA,QAAQ,CAACO,IAAT,CAAcT,EAAd,EAAkBM,KAAlB,CAAP;AACD;AACF,GATD;;AAWAd,EAAAA,QAAQ,CAACkB,gBAAT,CAA0BnB,cAAc,EAAxC,EAA4CK,EAAE,CAACF,SAAD,CAA9C,EAA2D,KAA3D;AACD,CAvBD;;AAyBA,MAAMK,WAAW,GAAG,UAACH,EAAD,EAAQ;AAC1BJ,EAAAA,QAAQ,CAACmB,mBAAT,CAA6BpB,cAAc,EAA3C,EAA+CK,EAAE,CAACF,SAAD,CAAjD,EAA8D,KAA9D;AACA,SAAOE,EAAE,CAACF,SAAD,CAAT;AACD,CAHD;;AAKA,MAAMkB,SAAS,GAAG,UAAChB,EAAD,EAAKC,OAAL,EAAcC,KAAd,EAAwB;AACxC,MAAID,OAAO,CAACM,KAAR,KAAkBN,OAAO,CAACgB,QAA9B,EAAwC;AACtC;AACD;;AACDlB,EAAAA,SAAS,CAACC,EAAD,EAAKC,OAAL,EAAcC,KAAd,CAAT;AACD,CALD;;MAOMgB,MAAM,GAAG;AACbC,EAAAA,OAAO,EAAE,UAACC,GAAD,EAAS;AAChBA,IAAAA,GAAG,CAACC,SAAJ,CAAc,YAAd,EAA4BA,SAA5B;AACD;AAHY;MAMTA,SAAS,GAAG;AAChBC,EAAAA,OAAO,EAAEvB,SADO;AAEhBwB,EAAAA,OAAO,EAAEP,SAFO;AAGhBQ,EAAAA,SAAS,EAAErB;AAHK;MAMZsB,KAAK,GAAG;AACZC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAEN;AAAb;AADA;;;;;"} -------------------------------------------------------------------------------- /dist/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Plugin } from "vue"; 2 | 3 | declare const VueClickAwayPlugin: Plugin; 4 | 5 | declare const directive: Directive; 6 | declare const mixin: { 7 | directives: { 8 | ClickAway: Directive; 9 | }; 10 | }; 11 | 12 | export { mixin, directive }; 13 | export default VueClickAwayPlugin; 14 | -------------------------------------------------------------------------------- /docs/.vitepress/components/popup.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | -------------------------------------------------------------------------------- /docs/.vitepress/components/simple.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 35 | 36 | -------------------------------------------------------------------------------- /docs/.vitepress/config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | title: "Vue Click Away", 5 | description: "Vue 3.0 Compatible Click Away Directive", 6 | dest: "./dist/docs", 7 | markdown: { 8 | lineNumbers: true 9 | }, 10 | head: [ 11 | [ 12 | "link", 13 | { 14 | rel: "stylesheet", 15 | href: "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css", 16 | }, 17 | ], 18 | ], 19 | themeConfig: { 20 | repo: "vinceg/vue-click-away", 21 | editLinks: true, 22 | docsDir: "docs", 23 | editLinkText: "Edit this page on GitHub", 24 | lastUpdated: "Last Updated", 25 | smoothScroll: true, 26 | nav: [], 27 | sidebar: 'auto' 28 | }, 29 | }; -------------------------------------------------------------------------------- /docs/.vitepress/dist/_assets/app.df589b6b.js: -------------------------------------------------------------------------------- 1 | import{r as e,m as t,a as n,n as a,i as o,b as s,c as r,w as i,o as l,d as c,e as u,h as d,f as p,g as h,j as v,k as f,t as m,l as g,p as b,q as k,s as w,u as y,v as L,x,F as $,y as C,z as _,A as B,B as S}from"./common-af9ee497.js";const I="undefined"!=typeof window;function T(e){let t=e.replace(/\.html$/,"");if(t.endsWith("/")&&(t+="index"),I){const e="/";t=t.slice(e.length).replace(/\//g,"_")+".md";t=`${e}_assets/${t}.${__VP_HASH_MAP__[t]}.js`}else t=`./${t.slice(1).replace(/\//g,"_")}.md.js`;return t}const A=Symbol();function O(){return function(){const e=o(A);if(!e)throw new Error("useRouter() is called without provider.");return e}().route}function E(e,t,n=!1){const a=document.querySelector(".navbar").offsetHeight,o=e.classList.contains(".header-anchor")?e:document.querySelector(decodeURIComponent(t));if(o){const e=o.offsetTop-a-15;!n||Math.abs(e-window.scrollY)>window.innerHeight?window.scrollTo(0,e):window.scrollTo({left:0,top:e,behavior:"smooth"})}}const N=s((D='{"lang":"en-US","title":"Vue Click Away","description":"Vue 3.0 Compatible Click Away Directive","base":"/","head":[["link",{"rel":"stylesheet","href":"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"}]],"themeConfig":{"repo":"vinceg/vue-click-away","editLinks":true,"docsDir":"docs","editLinkText":"Edit this page on GitHub","lastUpdated":"Last Updated","smoothScroll":true,"nav":[],"sidebar":"auto"},"locales":{}}',n(JSON.parse(D))));var D;function H(){return N}const U="undefined"!=typeof window;function q(e,t){const n=function(e,t){t.sort(((e,t)=>{const n=t.split("/").length-e.split("/").length;return 0!==n?n:t.length-e.length}));for(const n of t)if(e.startsWith(n))return n}(t,Object.keys(e));return n?e[n]:void 0}function R(e,t){t=function(e,t){if(!U)return t;const n=e.base,a=n.endsWith("/")?n.slice(0,-1):n;return t.slice(a.length)}(e,t);const n=q(e.locales||{},t)||{},a=q(e.themeConfig&&e.themeConfig.locales||{},t)||{};return{...e,...n,themeConfig:{...e.themeConfig,...a,locales:{}},locales:{}}}function P(e=O()){return r((()=>R(N.value,e.path)))}function j(e,t){const n=Array.from(document.querySelectorAll("meta"));let a=!0;const o=e=>{a?a=!1:(n.forEach((e=>document.head.removeChild(e))),n.length=0,e&&e.length&&e.forEach((e=>{const t=function([e,t,n]){const a=document.createElement(e);for(const e in t)a.setAttribute(e,t[e]);n&&(a.innerHTML=n);return a}(e);document.head.appendChild(t),n.push(t)})))};i((()=>{const n=e.data,a=t.value,s=n&&n.title;document.title=(s?s+" | ":"")+a.title,o([["meta",{charset:"utf-8"}],["meta",{name:"viewport",content:"width=device-width,initial-scale=1"}],["meta",{name:"description",content:a.description}],...a.head,...n&&n.frontmatter.head||[]])}))}const W=new Set,F=()=>document.createElement("link");let M;const z=I&&(M=F())&&M.relList&&M.relList.supports&&M.relList.supports("prefetch")?e=>{const t=F();t.rel="prefetch",t.href=e,document.head.appendChild(t)}:e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};const V={setup(){const e=O();return function(){if(!I)return;if(!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const a=()=>{n&&n.disconnect(),n=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){const t=e.target;n.unobserve(t);const{pathname:a}=t;if(!W.has(a)){W.add(a);const e=T(a);z(e)}}}))})),t((()=>{document.querySelectorAll(".vitepress-content a").forEach((e=>{const{target:t,hostname:a,pathname:o}=e;"_blank"!==t&&a===location.hostname&&(o!==location.pathname?n.observe(e):W.add(o))}))}))};l(a),c(a),u((()=>{n&&n.disconnect()}))}(),()=>e.component?d(e.component):null}};var G=p({setup(){const e=s(null),t=s(!1);return h(t,(t=>{!1===t&&(e.value.scrollTop=0)})),{el:e,open:t}}});const K=g("data-v-5c157e32");k("data-v-5c157e32");const Y=f("p",{class:"title"},"Debug",-1),J={class:"block"},X={class:"block"},Q={class:"block"};w();const Z=K(((e,t,n,a,o,s)=>(b(),v("div",{class:["debug",{open:e.open}],ref:"el",onClick:t[1]||(t[1]=t=>e.open=!e.open)},[Y,f("pre",J,"$page "+m(e.$page),1),f("pre",X,"$siteByRoute "+m(e.$siteByRoute),1),f("pre",Q,"$site "+m(e.$site),1)],2))));function ee(){const e=O();return r((()=>e.data))}G.render=Z,G.__scopeId="data-v-5c157e32";const te=/#.*$/,ne=/(index)?\.(md|html)$/,ae=/\/$/,oe=/^[a-z]+:/i;function se(e){return Array.isArray(e)}function re(e){return(H().value.base+e).replace(/\/+/g,"/")}function ie(e){return oe.test(e)}function le(e){return decodeURI(e).replace(te,"").replace(ne,"")}function ce(e){return function(e){return/(\.html|\/)$/.test(e)?e:`${e}/`}(ue(e))}function ue(e){return/^\//.test(e)?e:`/${e}`}function de(e){return e.replace(/(index)?(\.(md|html))?$/,"")||"/"}var pe=p({setup:()=>({withBase:re})});const he=g("data-v-57d278f5")(((e,t,n,a,o,s)=>(b(),v("a",{class:"nav-bar-title",href:e.$site.base,"aria-label":`${e.$site.title}, back to home`},[e.$theme.logo?(b(),v("img",{key:0,class:"logo",src:e.withBase(e.$theme.logo),alt:"Logo"},null,8,["src"])):y("v-if",!0),L(" "+m(e.$site.title),1)],8,["href","aria-label"]))));pe.render=he,pe.__scopeId="data-v-57d278f5";const ve={class:"icon",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"16",height:"16"},fe=f("path",{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"},null,-1),me=f("polygon",{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"},null,-1);const ge={render:function(e,t){return b(),v("svg",ve,[fe,me])}},be=e=>((e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\.html$/,"")).endsWith("/")&&(e+="index"),e);var ke=p({components:{OutboundLink:ge},props:{item:{type:Object,required:!0}},setup(e){const t=e.item,n=O(),a=r((()=>({active:o.value,external:s.value}))),o=r((()=>be(re(t.link))===be(n.path))),s=r((()=>ie(t.link))),i=r((()=>s.value?t.link:re(t.link))),l=r((()=>t.target?t.target:s.value?"_blank":"")),c=r((()=>t.rel?t.rel:s.value?"noopener noreferrer":""));return{classes:a,isActiveLink:o,isExternalLink:s,href:i,target:l,rel:c}}});const we=g("data-v-48f5fb8c");k("data-v-48f5fb8c");const ye={class:"navbar-link"};w();const Le=we(((e,t,n,a,o,s)=>{const r=x("OutboundLink");return b(),v("div",ye,[f("a",{class:["item",e.classes],href:e.href,target:e.target,rel:e.rel,"aria-label":e.item.ariaLabel},[L(m(e.item.text)+" ",1),e.isExternalLink?(b(),v(r,{key:0})):y("v-if",!0)],10,["href","target","rel","aria-label"])])}));ke.render=Le,ke.__scopeId="data-v-48f5fb8c";var xe=p({name:"DropdownLink",components:{NavBarLink:ke},props:{item:{type:Object,required:!0}},setup(e){const t=s(!1),n=O();h((()=>n.path),(()=>{t.value=!1}));return{open:t,setOpen:e=>{t.value=e},isLastItemOfArray:(e,t)=>t.length&&t.indexOf(e)===t.length-1}}});const $e={class:"nav-dropdown"},Ce={key:0},_e={key:1,class:"dropdown-subitem-wrapper"};xe.render=function(e,t,n,a,o,s){const r=x("NavBarLink");return b(),v("div",{class:["dropdown-wrapper",{open:e.open}]},[f("button",{class:"dropdown-title",type:"button","aria-label":e.item.ariaLabel,onClick:t[1]||(t[1]=t=>e.setOpen(!e.open))},[f("span",null,m(e.item.text),1),f("span",{class:["arrow",e.open?"down":"right"]},null,2)],8,["aria-label"]),f("ul",$e,[(b(!0),v($,null,C(e.item.items,((t,n)=>(b(),v("li",{key:t.link||n,class:"dropdown-item"},[t.items?(b(),v("h4",Ce,m(t.text),1)):y("v-if",!0),t.items?(b(),v("ul",_e,[(b(!0),v($,null,C(t.items,(n=>(b(),v("li",{key:n.link,class:"dropdown-subitem"},[f(r,{item:n,onFocusout:a=>e.isLastItemOfArray(n,t.items)&&e.isLastItemOfArray(t,e.item.items)&&e.setOpen(!1)},null,8,["item","onFocusout"])])))),128))])):(b(),v(r,{key:2,item:t,onFocusout:n=>e.isLastItemOfArray(t,e.item.items)&&e.setOpen(!1)},null,8,["item","onFocusout"]))])))),128))])],2)};const Be=["GitHub","GitLab","Bitbucket"].map((e=>[e,new RegExp(e,"i")]));var Se={components:{NavBarLink:ke,NavDropdownLink:xe},setup(){const e=P(),t=H(),n=O(),a=r((()=>{const e=t.value.themeConfig,n=e.docsRepo||e.repo;let a=e.repoLabel;if(n){const e=/^https?:/.test(n)?n:`https://github.com/${n}`;if(!a){const t=e.match(/^https?:\/\/[^/]+/);if(t){const e=t[0],n=Be.find((([t,n])=>n.test(e)));a=n&&n[0]}}return{link:e,text:a||"Source"}}return null})),o=r((()=>{const e=t.value.themeConfig.locales;if(!e)return null;const a=Object.keys(e);if(a.length<=1)return null;const o=I?t.value.base:"/",s=o.endsWith("/")?o.slice(0,-1):o,r=n.path.slice(s.length),i=a.find((e=>"/"!==e&&r.startsWith(e))),l=i?r.substring(i.length-1):r,c=a.map((t=>{const n=t.endsWith("/")?t.slice(0,-1):t;return{text:e[t].label||e[t].lang,link:`${n}${l}`}})),u=i||"/";return{text:e[u].selectText?e[u].selectText:"Languages",items:c}}));return{navData:r((()=>e.value.themeConfig.nav)),repoInfo:a,localeCandidates:o}}};const Ie=g("data-v-623c19fe");k("data-v-623c19fe");const Te={key:0,class:"navbar-links"};w();const Ae=Ie(((e,t,n,a,o,s)=>{const r=x("NavDropdownLink"),i=x("NavBarLink");return e.navData||e.repoInfo?(b(),v("nav",Te,[e.navData?(b(!0),v($,{key:0},C(e.navData,(e=>(b(),v($,null,[e.items?(b(),v(r,{key:0,item:e},null,8,["item"])):(b(),v(i,{key:1,item:e},null,8,["item"]))],64)))),256)):y("v-if",!0),e.localeCandidates?(b(),v(r,{key:1,item:e.localeCandidates},null,8,["item"])):y("v-if",!0),e.repoInfo?(b(),v(i,{key:2,item:e.repoInfo},null,8,["item"])):y("v-if",!0)])):y("v-if",!0)}));Se.render=Ae,Se.__scopeId="data-v-623c19fe";var Oe=p({components:{NavBarTitle:pe,NavBarLinks:Se}});const Ee=g("data-v-9c89b7e6");k("data-v-9c89b7e6");const Ne=f("div",{class:"flex-grow"},null,-1),De={class:"nav"};w();const He=Ee(((e,t,n,a,o,s)=>{const r=x("NavBarTitle"),i=x("NavBarLinks");return b(),v($,null,[f(r),Ne,f("div",De,[f(i)]),_(e.$slots,"search")],64)}));Oe.render=He,Oe.__scopeId="data-v-9c89b7e6";var Ue=p({components:{NavBarLink:ke},setup(){const e=O(),t=H(),n=r((()=>e.data.frontmatter)),a=r((()=>({link:n.value.actionLink,text:n.value.actionText}))),o=r((()=>re(n.value.heroImage))),s=r((()=>t.value.title)),i=r((()=>t.value.description));return{data:n,actionLink:a,heroImageSrc:o,siteTitle:s,siteDescription:i}}});const qe=g("data-v-6126bc1a");k("data-v-6126bc1a");const Re={class:"hero"},Pe={key:1,id:"main-title"},je={key:2,class:"description"},We={key:3,class:"action"},Fe={key:0,class:"features"},Me={key:1,class:"footer"};w();const ze=qe(((e,t,n,a,o,s)=>{const r=x("NavBarLink");return b(),v($,null,[f("header",Re,[e.data.heroImage?(b(),v("img",{key:0,src:e.heroImageSrc,alt:e.data.heroAlt||"hero"},null,8,["src","alt"])):y("v-if",!0),null!==e.data.heroText?(b(),v("h1",Pe,m(e.data.heroText||e.siteTitle||"Hello"),1)):y("v-if",!0),null!==e.data.tagline?(b(),v("p",je,m(e.data.tagline||e.siteDescription||"Welcome to your VitePress site"),1)):y("v-if",!0),e.data.actionText&&e.data.actionLink?(b(),v("p",We,[f(r,{item:e.actionLink},null,8,["item"])])):y("v-if",!0),_(e.$slots,"hero")]),e.data.features&&e.data.features.length?(b(),v("div",Fe,[(b(!0),v($,null,C(e.data.features,((e,t)=>(b(),v("div",{key:t,class:"feature"},[f("h2",null,m(e.title),1),f("p",null,m(e.details),1)])))),128)),_(e.$slots,"features")])):y("v-if",!0),e.data.footer?(b(),v("div",Me,[L(m(e.data.footer)+" ",1),_(e.$slots,"footer")])):y("v-if",!0)],64)}));Ue.render=ze,Ue.__scopeId="data-v-6126bc1a";var Ve={emits:["toggle"]};const Ge=f("svg",{class:"icon",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"},[f("path",{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z",class:""})],-1);function Ke(){let e=null,t=null;const n=function(e,t){let n,a=!1;return()=>{n&&clearTimeout(n),a?n=setTimeout(e,t):(e(),a=!0,setTimeout((()=>{a=!1}),t))}}(a,300);function a(){const e=function(e){return[].slice.call(document.querySelectorAll(".header-anchor")).filter((t=>e.some((e=>e.hash===t.hash))))}([].slice.call(document.querySelectorAll(".sidebar a.sidebar-link-item")));for(let t=0;t ul > li");a&&a!==t.parentElement?(e=a.querySelector("a"),e&&e.classList.add("active")):e=null}function s(e){e&&e.classList.remove("active")}l((()=>{a(),window.addEventListener("scroll",n)})),c((()=>{o(decodeURIComponent(location.hash))})),u((()=>{window.removeEventListener("scroll",n)}))}function Ye(e){const t=document.querySelector(".navbar").offsetHeight;return e.parentElement.offsetTop-t-15}function Je(e,t,n){const a=window.scrollY;return 0===e&&0===a?[!0,null]:a(t.link&&e.push({text:t.text,link:de(t.link)}),function(e){return void 0!==e.children}(t)&&(e=[...e,...Qe(t.children)]),e)),[])}function Ze(e,t){const n=[];if(void 0===e)return[];let a;return e.forEach((({level:e,title:o,slug:s})=>{if(e-1>t)return;const r={text:o,link:`#${s}`};2===e?(a=r,n.push(r)):a&&(a.children||(a.children=[])).push(r)})),n}Ve.render=function(e,t,n,a,o,s){return b(),v("div",{class:"sidebar-button",onClick:t[1]||(t[1]=t=>e.$emit("toggle"))},[Ge])};const et=e=>{const t=O(),n=H(),a=t.data.headers,o=e.item.text,s=function(e,t){if(void 0===t)return t;if(t.startsWith("#"))return t;return function(e,t){const n=e.endsWith("/"),a=t.startsWith("/");return n&&a?e.slice(0,-1)+t:n||a?e+t:`${e}/${t}`}(e,t)}(n.value.base,e.item.link),r=e.item.children,i=function(e,t){return void 0!==t&&le(e.path)===le(t)}(t,s),l=tt(i,r,a);return d("li",{class:"sidebar-link"},[d(s?"a":"p",{class:{"sidebar-link-item":!0,active:i},href:s},o),l])};function tt(e,t,n){return t&&t.length>0?d("ul",{class:"sidebar-links"},t.map((e=>d(et,{item:e})))):e&&n?tt(!1,function(e){return nt(function(e){let t;return(e=e.map((e=>Object.assign({},e)))).forEach((e=>{2===e.level?t=e:t&&(t.children||(t.children=[])).push(e)})),e.filter((e=>2===e.level))}(e))}(n)):null}function nt(e){return e.map((e=>({text:e.title,link:`#${e.slug}`,children:e.children?nt(e.children):void 0})))}var at=p({components:{SideBarLink:et},setup:()=>({items:function(){const e=O(),t=P();return Ke(),r((()=>{const n=e.data.headers,a=e.data.frontmatter.sidebar,o=e.data.frontmatter.sidebarDepth;if(!1===a)return[];if("auto"===a)return Ze(n,o);const s=Xe(t.value.themeConfig.sidebar,e.path);return!1===s?[]:"auto"===s?Ze(n,o):s}))}()})});const ot={key:0,class:"sidebar-links"};at.render=function(e,t,n,a,o,s){const r=x("SideBarLink");return e.items.length>0?(b(),v("ul",ot,[(b(!0),v($,null,C(e.items,(e=>(b(),v(r,{key:e.text,item:e},null,8,["item"])))),128))])):y("v-if",!0)};var st=p({components:{NavBarLinks:Se,SideBarLinks:at},props:{open:{type:Boolean,required:!0}}});const rt=g("data-v-096875e2");k("data-v-096875e2");const it={class:"nav"};w();const lt=rt(((e,t,n,a,o,s)=>{const r=x("NavBarLinks"),i=x("SideBarLinks");return b(),v("aside",{class:["sidebar",{open:e.open}]},[f("div",it,[f(r,{class:"show-mobile"})]),_(e.$slots,"sidebar-top"),f(i),_(e.$slots,"sidebar-bottom")],2)}));st.render=lt,st.__scopeId="data-v-096875e2";const ct=/bitbucket.org/;function ut(){const e=P(),t=ee();return{url:r((()=>{const n=null==t.value.frontmatter.editLink?e.value.themeConfig.editLinks:t.value.frontmatter.editLink;const{repo:a,docsDir:o="",docsBranch:s="master",docsRepo:r=a}=e.value.themeConfig,{relativePath:i}=t.value;return n&&i&&a?function(e,t,n,a,o){return ct.test(e)?function(e,t,n,a,o){return(ie(t)?t:e).replace(ae,"")+`/src/${a}/`+(n?n.replace(ae,"")+"/":"")+o+`?mode=edit&spa=0&at=${a}&fileviewer=file-view-default`}(e,t,n,a,o):function(e,t,n,a,o){return(ie(t)?t:`https://github.com/${t}`).replace(ae,"")+`/edit/${a}/`+(n?n.replace(ae,"")+"/":"")+o}(0,t,n,a,o)}(a,r,o,s,i):null})),text:r((()=>e.value.themeConfig.editLinkText||"Edit this page"))}}var dt=p({components:{OutboundLink:ge},setup(){const{url:e,text:t}=ut();return{url:e,text:t}}});const pt=g("data-v-a83574f8");k("data-v-a83574f8");const ht={class:"edit-link"};w();const vt=pt(((e,t,n,a,o,s)=>{const r=x("OutboundLink");return b(),v("div",ht,[e.url?(b(),v("a",{key:0,class:"link",href:e.url,target:"_blank",rel:"noopener noreferrer"},[L(m(e.text)+" ",1),f(r,{class:"icon"})],8,["href"])):y("v-if",!0)])}));dt.render=vt,dt.__scopeId="data-v-a83574f8";var ft=p({setup(){const e=P(),t=ee(),n=s(""),a=r((()=>{const t=e.value.themeConfig.lastUpdated;return void 0!==t&&!1!==t})),o=r((()=>{const t=e.value.themeConfig.lastUpdated;return!0===t?"Last Updated":t}));return l((()=>{n.value=new Date(t.value.lastUpdated).toLocaleString("en-US")})),{hasLastUpdated:a,prefix:o,datetime:n}}});const mt=g("data-v-d5f61e8a");k("data-v-d5f61e8a");const gt={key:0,class:"last-updated"},bt={class:"prefix"},kt={class:"datetime"};w();const wt=mt(((e,t,n,a,o,s)=>e.hasLastUpdated?(b(),v("p",gt,[f("span",bt,m(e.prefix)+":",1),f("span",kt,m(e.datetime),1)])):y("v-if",!0)));ft.render=wt,ft.__scopeId="data-v-d5f61e8a";var yt=p({components:{EditLink:dt,LastUpdated:ft}});const Lt=g("data-v-ae772eca");k("data-v-ae772eca");const xt={class:"page-footer"},$t={class:"edit"},Ct={class:"updated"};w();const _t=Lt(((e,t,n,a,o,s)=>{const r=x("EditLink"),i=x("LastUpdated");return b(),v("footer",xt,[f("div",$t,[f(r)]),f("div",Ct,[f(i)])])}));function Bt(){const e=P(),t=ee(),n=r((()=>de(ue(t.value.relativePath)))),a=r((()=>{const t=Xe(e.value.themeConfig.sidebar,n.value);return se(t)?Qe(t):[]})),o=r((()=>a.value.findIndex((e=>e.link===n.value)))),s=r((()=>{if(!1!==e.value.themeConfig.nextLinks&&o.value>-1&&o.value{if(!1!==e.value.themeConfig.prevLinks&&o.value>0)return a.value[o.value-1]})),l=r((()=>!!s.value||!!i.value));return{next:s,prev:i,hasLinks:l}}yt.render=_t,yt.__scopeId="data-v-ae772eca";const St={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},It=f("path",{d:"M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"},null,-1);const Tt={render:function(e,t){return b(),v("svg",St,[It])}},At={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ot=f("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1);const Et={render:function(e,t){return b(),v("svg",At,[Ot])}};var Nt=p({components:{ArrowLeft:Tt,ArrowRight:Et},setup(){const{hasLinks:e,prev:t,next:n}=Bt();return{hasLinks:e,prev:t,next:n,withBase:re}}});const Dt=g("data-v-e91280cc");k("data-v-e91280cc");const Ht={key:0,class:"next-and-prev-link"},Ut={class:"container"},qt={class:"prev"},Rt={class:"text"},Pt={class:"next"},jt={class:"text"};w();const Wt=Dt(((e,t,n,a,o,s)=>{const r=x("ArrowLeft"),i=x("ArrowRight");return e.hasLinks?(b(),v("div",Ht,[f("div",Ut,[f("div",qt,[e.prev?(b(),v("a",{key:0,class:"link",href:e.withBase(e.prev.link)},[f(r,{class:"icon icon-prev"}),f("span",Rt,m(e.prev.text),1)],8,["href"])):y("v-if",!0)]),f("div",Pt,[e.next?(b(),v("a",{key:0,class:"link",href:e.withBase(e.next.link)},[f("span",jt,m(e.next.text),1),f(i,{class:"icon icon-next"})],8,["href"])):y("v-if",!0)])])])):y("v-if",!0)}));Nt.render=Wt,Nt.__scopeId="data-v-e91280cc";var Ft=p({components:{PageFooter:yt,NextAndPrevLinks:Nt}});const Mt=g("data-v-3517865e");k("data-v-3517865e");const zt={class:"page"},Vt={class:"content"};w();const Gt=Mt(((e,t,n,a,o,s)=>{const r=x("Content"),i=x("PageFooter"),l=x("NextAndPrevLinks");return b(),v("div",zt,[_(e.$slots,"top"),f("div",Vt,[f(r)]),f(i),f(l),_(e.$slots,"bottom")])}));Ft.render=Gt,Ft.__scopeId="data-v-3517865e";var Kt={components:{Home:Ue,NavBar:Oe,ToggleSideBarButton:Ve,SideBar:st,Page:Ft},setup(){const e=O(),t=H(),n=P(),a=s(!1),o=r((()=>!!e.data.frontmatter.home)),i=r((()=>{const{themeConfig:a}=n.value,{frontmatter:o}=e.data;return!1!==o.navbar&&!1!==a.navbar&&(t.value.title||a.logo||a.repo||a.nav)})),l=r((()=>{const{frontmatter:t}=e.data,{themeConfig:a}=n.value;return!t.home&&!1!==t.sidebar&&("object"==typeof a.sidebar&&0!=Object.keys(a.sidebar).length||Array.isArray(a.sidebar)&&0!=a.sidebar.length)})),c=r((()=>[{"no-navbar":!i.value,"sidebar-open":a.value,"no-sidebar":!l.value}])),u=e=>{a.value="boolean"==typeof e?e:!a.value},d=u.bind(null,!1);return h(e,d),{showNavbar:i,showSidebar:l,openSideBar:a,pageClasses:c,enableHome:o,toggleSidebar:u}}};const Yt={key:0,class:"navbar"},Jt={key:1,class:"home","aria-labelledby":"main-title"},Xt={key:2};Kt.render=function(e,t,n,a,o,s){const r=x("NavBar"),i=x("ToggleSideBarButton"),l=x("SideBar"),c=x("Home"),u=x("Page"),d=x("Debug");return b(),v($,null,[f("div",{class:["theme",a.pageClasses]},[a.showNavbar?(b(),v("header",Yt,[f(r,null,{search:B((()=>[_(e.$slots,"navbar-search")])),_:1}),f(i,{onToggle:a.toggleSidebar},null,8,["onToggle"])])):y("v-if",!0),f(l,{open:a.openSideBar},{"sidebar-top":B((()=>[_(e.$slots,"sidebar-top")])),"sidebar-bottom":B((()=>[_(e.$slots,"sidebar-bottom")])),_:1},8,["open"]),y(" TODO: make this button accessible "),f("div",{class:"sidebar-mask",onClick:t[1]||(t[1]=e=>a.toggleSidebar(!1))}),a.enableHome?(b(),v("main",Jt,[f(c,null,{hero:B((()=>[_(e.$slots,"home-hero")])),features:B((()=>[_(e.$slots,"home-features")])),footer:B((()=>[_(e.$slots,"home-footer")])),_:1})])):(b(),v("main",Xt,[f(u,null,{top:B((()=>[_(e.$slots,"page-top")])),bottom:B((()=>[_(e.$slots,"page-bottom")])),_:1})]))],2),f(d)],64)};const Qt=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var Zt=p({setup:()=>({getMsg:()=>Qt[Math.floor(Math.random()*Qt.length)]})});const en={class:"theme"},tn=f("h1",null,"404",-1);Zt.render=function(e,t,n,a,o,s){return b(),v("div",en,[tn,f("blockquote",null,m(e.getMsg()),1),f("a",{href:e.$site.base,"aria-label":"go to home"}," Take me home. ",8,["href"])])};const nn={Layout:Kt,NotFound:Zt},an=nn.NotFound||(()=>"404 Not Found");function on(){let o,s=I;const r=function(o,s){const r=e({path:"/",component:null,data:null}),i="undefined"!=typeof window;function l(e=(i?location.href:"/")){const t=new URL(e,"http://a.com");return t.pathname.endsWith("/")||t.pathname.endsWith(".html")||(t.pathname+=".html",e=t.pathname+t.search+t.hash),i&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",e)),u(e)}let c=null;async function u(e,l=0){const u=new URL(e,"http://a.com"),d=c=u.pathname;try{let e=o(d);if("then"in e&&"function"==typeof e.then&&(e=await e),c===d){c=null;const{default:o,__pageData:s}=e;if(!o)throw new Error(`Invalid route component: ${o}`);r.path=d,r.component=t(o),r.data=n(JSON.parse(s)),i&&a((()=>{if(u.hash&&!l){const e=document.querySelector(decodeURIComponent(u.hash));if(e)return void E(e,u.hash)}window.scrollTo(0,l)}))}}catch(e){e.message.match(/fetch/)||console.error(e),c===d&&(c=null,r.path=d,r.component=s?t(s):null)}}return i&&(window.addEventListener("click",(e=>{const t=e.target.closest("a");if(t){const{href:n,protocol:a,hostname:o,pathname:s,hash:r,target:i}=t,c=window.location;e.ctrlKey||e.shiftKey||e.altKey||e.metaKey||"_blank"===i||a!==c.protocol||o!==c.hostname||(e.preventDefault(),s===c.pathname?r&&r!==c.hash&&(history.pushState(null,"",r),E(t,r,t.classList.contains("header-anchor"))):l(n))}}),{capture:!0}),window.addEventListener("popstate",(e=>{u(location.href,e.state&&e.state.scrollPosition||0)})),window.addEventListener("hashchange",(e=>{e.preventDefault()}))),{route:r,go:l}}((e=>{let t=T(e);return s&&(o=t),(s||o===t)&&(t=t.replace(/\.js$/,".lean.js")),I?(s=!1,import(t)):require(t)}),an),i=S(nn.Layout);i.provide(A,r),i.component("Content",V),i.component("Debug",(()=>null));const l=P(r.route);return I&&j(r.route,l),Object.defineProperties(i.config.globalProperties,{$site:{get:()=>N.value},$siteByRoute:{get:()=>l.value},$page:{get:()=>r.route.data},$theme:{get:()=>l.value.themeConfig}}),nn.enhanceApp&&nn.enhanceApp({app:i,router:r,siteData:l}),{app:i,router:r}}if(I){const{app:e,router:t}=on();t.go().then((()=>{e.mount("#app")}))}export{on as createApp}; 2 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/_assets/common-af9ee497.js: -------------------------------------------------------------------------------- 1 | function e(e,t){const n=Object.create(null),o=e.split(",");for(let e=0;e!!n[e.toLowerCase()]:e=>!!n[e]}const t=e("Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl"),n=e("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function o(e){if(x(e)){const t={};for(let n=0;n{if(e){const n=e.split(s);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}function i(e){let t="";if(k(e))t=e;else if(x(e))for(let n=0;nnull==e?"":E(e)?JSON.stringify(e,u,2):String(e),u=(e,t)=>w(t)?{[`Map(${t.size})`]:[...t.entries()].reduce(((e,[t,n])=>(e[`${t} =>`]=n,e)),{})}:C(t)?{[`Set(${t.size})`]:[...t.values()]}:!E(t)||x(t)||M(t)?t:String(t),a={},f=[],p=()=>{},d=()=>!1,h=/^on[^a-z]/,g=e=>h.test(e),m=e=>e.startsWith("onUpdate:"),v=Object.assign,y=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},_=Object.prototype.hasOwnProperty,b=(e,t)=>_.call(e,t),x=Array.isArray,w=e=>"[object Map]"===P(e),C=e=>"[object Set]"===P(e),S=e=>"function"==typeof e,k=e=>"string"==typeof e,F=e=>"symbol"==typeof e,E=e=>null!==e&&"object"==typeof e,O=e=>E(e)&&S(e.then)&&S(e.catch),R=Object.prototype.toString,P=e=>R.call(e),M=e=>"[object Object]"===P(e),N=e=>k(e)&&"NaN"!==e&&"-"!==e[0]&&""+parseInt(e,10)===e,j=e(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),T=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},$=/-(\w)/g,A=T((e=>e.replace($,((e,t)=>t?t.toUpperCase():"")))),V=/\B([A-Z])/g,U=T((e=>e.replace(V,"-$1").toLowerCase())),I=T((e=>e.charAt(0).toUpperCase()+e.slice(1))),L=T((e=>e?`on${I(e)}`:"")),B=(e,t)=>e!==t&&(e==e||t==t),z=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},W=e=>{const t=parseFloat(e);return isNaN(t)?e:t},H=new WeakMap,q=[];let K;const J=Symbol(""),G=Symbol("");function Z(e,t=a){(function(e){return e&&!0===e._isEffect})(e)&&(e=e.raw);const n=function(e,t){const n=function(){if(!n.active)return t.scheduler?void 0:e();if(!q.includes(n)){Y(n);try{return te.push(ee),ee=!0,q.push(n),K=n,e()}finally{q.pop(),oe(),K=q[q.length-1]}}};return n.id=X++,n.allowRecurse=!!t.allowRecurse,n._isEffect=!0,n.active=!0,n.raw=e,n.deps=[],n.options=t,n}(e,t);return t.lazy||n(),n}function Q(e){e.active&&(Y(e),e.options.onStop&&e.options.onStop(),e.active=!1)}let X=0;function Y(e){const{deps:t}=e;if(t.length){for(let n=0;n{e&&e.forEach((e=>{(e!==K||e.allowRecurse)&&i.add(e)}))};if("clear"===t)l.forEach(c);else if("length"===n&&x(e))l.forEach(((e,t)=>{("length"===t||t>=o)&&c(e)}));else switch(void 0!==n&&c(l.get(n)),t){case"add":x(e)?N(n)&&c(l.get("length")):(c(l.get(J)),w(e)&&c(l.get(G)));break;case"delete":x(e)||(c(l.get(J)),w(e)&&c(l.get(G)));break;case"set":w(e)&&c(l.get(J))}i.forEach((e=>{e.options.scheduler?e.options.scheduler(e):e()}))}const le=new Set(Object.getOwnPropertyNames(Symbol).map((e=>Symbol[e])).filter(F)),ie=pe(),ce=pe(!1,!0),ue=pe(!0),ae=pe(!0,!0),fe={};function pe(e=!1,t=!1){return function(n,o,r){if("__v_isReactive"===o)return!e;if("__v_isReadonly"===o)return e;if("__v_raw"===o&&r===(e?Ie:Ue).get(n))return n;const s=x(n);if(s&&b(fe,o))return Reflect.get(fe,o,r);const l=Reflect.get(n,o,r);if(F(o)?le.has(o):"__proto__"===o||"__v_isRef"===o)return l;if(e||re(n,0,o),t)return l;if(Ze(l)){return!s||!N(o)?l.value:l}return E(l)?e?ze(l):Be(l):l}}["includes","indexOf","lastIndexOf"].forEach((e=>{const t=Array.prototype[e];fe[e]=function(...e){const n=Ke(this);for(let e=0,t=this.length;e{const t=Array.prototype[e];fe[e]=function(...e){ne();const n=t.apply(this,e);return oe(),n}}));function de(e=!1){return function(t,n,o,r){const s=t[n];if(!e&&(o=Ke(o),!x(t)&&Ze(s)&&!Ze(o)))return s.value=o,!0;const l=x(t)&&N(n)?Number(n)!0,deleteProperty:(e,t)=>!0},me=v({},he,{get:ce,set:de(!0)}),ve=(v({},ge,{get:ae}),e=>E(e)?Be(e):e),ye=e=>E(e)?ze(e):e,_e=e=>e,be=e=>Reflect.getPrototypeOf(e);function xe(e,t,n=!1,o=!1){const r=Ke(e=e.__v_raw),s=Ke(t);t!==s&&!n&&re(r,0,t),!n&&re(r,0,s);const{has:l}=be(r),i=n?ye:o?_e:ve;return l.call(r,t)?i(e.get(t)):l.call(r,s)?i(e.get(s)):void 0}function we(e,t=!1){const n=this.__v_raw,o=Ke(n),r=Ke(e);return e!==r&&!t&&re(o,0,e),!t&&re(o,0,r),e===r?n.has(e):n.has(e)||n.has(r)}function Ce(e,t=!1){return e=e.__v_raw,!t&&re(Ke(e),0,J),Reflect.get(e,"size",e)}function Se(e){e=Ke(e);const t=Ke(this),n=be(t).has.call(t,e),o=t.add(e);return n||se(t,"add",e,e),o}function ke(e,t){t=Ke(t);const n=Ke(this),{has:o,get:r}=be(n);let s=o.call(n,e);s||(e=Ke(e),s=o.call(n,e));const l=r.call(n,e),i=n.set(e,t);return s?B(t,l)&&se(n,"set",e,t):se(n,"add",e,t),i}function Fe(e){const t=Ke(this),{has:n,get:o}=be(t);let r=n.call(t,e);r||(e=Ke(e),r=n.call(t,e));o&&o.call(t,e);const s=t.delete(e);return r&&se(t,"delete",e,void 0),s}function Ee(){const e=Ke(this),t=0!==e.size,n=e.clear();return t&&se(e,"clear",void 0,void 0),n}function Oe(e,t){return function(n,o){const r=this,s=r.__v_raw,l=Ke(s),i=e?ye:t?_e:ve;return!e&&re(l,0,J),s.forEach(((e,t)=>n.call(o,i(e),i(t),r)))}}function Re(e,t,n){return function(...o){const r=this.__v_raw,s=Ke(r),l=w(s),i="entries"===e||e===Symbol.iterator&&l,c="keys"===e&&l,u=r[e](...o),a=t?ye:n?_e:ve;return!t&&re(s,0,c?G:J),{next(){const{value:e,done:t}=u.next();return t?{value:e,done:t}:{value:i?[a(e[0]),a(e[1])]:a(e),done:t}},[Symbol.iterator](){return this}}}}function Pe(e){return function(...t){return"delete"!==e&&this}}const Me={get(e){return xe(this,e)},get size(){return Ce(this)},has:we,add:Se,set:ke,delete:Fe,clear:Ee,forEach:Oe(!1,!1)},Ne={get(e){return xe(this,e,!1,!0)},get size(){return Ce(this)},has:we,add:Se,set:ke,delete:Fe,clear:Ee,forEach:Oe(!1,!0)},je={get(e){return xe(this,e,!0)},get size(){return Ce(this,!0)},has(e){return we.call(this,e,!0)},add:Pe("add"),set:Pe("set"),delete:Pe("delete"),clear:Pe("clear"),forEach:Oe(!0,!1)};function Te(e,t){const n=t?Ne:e?je:Me;return(t,o,r)=>"__v_isReactive"===o?!e:"__v_isReadonly"===o?e:"__v_raw"===o?t:Reflect.get(b(n,o)&&o in t?n:t,o,r)}["keys","values","entries",Symbol.iterator].forEach((e=>{Me[e]=Re(e,!1,!1),je[e]=Re(e,!0,!1),Ne[e]=Re(e,!1,!0)}));const $e={get:Te(!1,!1)},Ae={get:Te(!1,!0)},Ve={get:Te(!0,!1)},Ue=new WeakMap,Ie=new WeakMap;function Le(e){return e.__v_skip||!Object.isExtensible(e)?0:function(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((e=>P(e).slice(8,-1))(e))}function Be(e){return e&&e.__v_isReadonly?e:De(e,!1,he,$e)}function ze(e){return De(e,!0,ge,Ve)}function De(e,t,n,o){if(!E(e))return e;if(e.__v_raw&&(!t||!e.__v_isReactive))return e;const r=t?Ie:Ue,s=r.get(e);if(s)return s;const l=Le(e);if(0===l)return e;const i=new Proxy(e,2===l?o:n);return r.set(e,i),i}function We(e){return He(e)?We(e.__v_raw):!(!e||!e.__v_isReactive)}function He(e){return!(!e||!e.__v_isReadonly)}function qe(e){return We(e)||He(e)}function Ke(e){return e&&Ke(e.__v_raw)||e}function Je(e){return D(e,"__v_skip",!0),e}const Ge=e=>E(e)?Be(e):e;function Ze(e){return Boolean(e&&!0===e.__v_isRef)}function Qe(e){return function(e,t=!1){if(Ze(e))return e;return new Xe(e,t)}(e)}class Xe{constructor(e,t=!1){this._rawValue=e,this._shallow=t,this.__v_isRef=!0,this._value=t?e:Ge(e)}get value(){return re(Ke(this),0,"value"),this._value}set value(e){B(Ke(e),this._rawValue)&&(this._rawValue=e,this._value=this._shallow?e:Ge(e),se(Ke(this),"set","value",e))}}const Ye={get:(e,t,n)=>{return Ze(o=Reflect.get(e,t,n))?o.value:o;var o},set:(e,t,n,o)=>{const r=e[t];return Ze(r)&&!Ze(n)?(r.value=n,!0):Reflect.set(e,t,n,o)}};function et(e){return We(e)?e:new Proxy(e,Ye)}class tt{constructor(e,t){this._object=e,this._key=t,this.__v_isRef=!0}get value(){return this._object[this._key]}set value(e){this._object[this._key]=e}}class nt{constructor(e,t,n){this._setter=t,this._dirty=!0,this.__v_isRef=!0,this.effect=Z(e,{lazy:!0,scheduler:()=>{this._dirty||(this._dirty=!0,se(Ke(this),"set","value"))}}),this.__v_isReadonly=n}get value(){return this._dirty&&(this._value=this.effect(),this._dirty=!1),re(Ke(this),0,"value"),this._value}set value(e){this._setter(e)}}function ot(e,t,n,o){let r;try{r=o?e(...o):e()}catch(e){st(e,t,n)}return r}function rt(e,t,n,o){if(S(e)){const r=ot(e,t,n,o);return r&&O(r)&&r.catch((e=>{st(e,t,n)})),r}const r=[];for(let s=0;skt(e)-kt(t))),gt=0;gtnull==e.id?1/0:e.id;function Ft(e){it=!1,lt=!0,Ct(e),ct.sort(((e,t)=>kt(e)-kt(t)));try{for(ut=0;ute.trim())):t&&(r=n.map(W))}let i=L(A(t)),c=o[i];!c&&s&&(i=L(U(t)),c=o[i]),c&&rt(c,e,6,r);const u=o[i+"Once"];if(u){if(e.emitted){if(e.emitted[i])return}else(e.emitted={})[i]=!0;rt(u,e,6,r)}}function Ot(e,t,n=!1){if(!t.deopt&&void 0!==e.__emits)return e.__emits;const o=e.emits;let r={},s=!1;if(!S(e)){const o=e=>{s=!0,v(r,Ot(e,t,!0))};!n&&t.mixins.length&&t.mixins.forEach(o),e.extends&&o(e.extends),e.mixins&&e.mixins.forEach(o)}return o||s?(x(o)?o.forEach((e=>r[e]=null)):v(r,o),e.__emits=r):e.__emits=null}function Rt(e,t){return!(!e||!g(t))&&(t=t.replace(/Once$/,""),b(e,t[2].toLowerCase()+t.slice(3))||b(e,t.slice(2)))}let Pt=null;function Mt(e){Pt=e}function Nt(e){const{type:t,vnode:n,proxy:o,withProxy:r,props:s,propsOptions:[l],slots:i,attrs:c,emit:u,render:a,renderCache:f,data:p,setupState:d,ctx:h}=e;let g;Pt=e;try{let e;if(4&n.shapeFlag){const t=r||o;g=ho(a.call(t,t,f,s,d,p,h)),e=c}else{const n=t;0,g=ho(n.length>1?n(s,{attrs:c,slots:i,emit:u}):n(s,null)),e=t.props?c:Tt(c)}let v=g;if(!1!==t.inheritAttrs&&e){const t=Object.keys(e),{shapeFlag:n}=v;t.length&&(1&n||6&n)&&(l&&t.some(m)&&(e=$t(e,l)),v=uo(v,e))}n.dirs&&(v.dirs=v.dirs?v.dirs.concat(n.dirs):n.dirs),n.transition&&(v.transition=n.transition),g=v}catch(t){st(t,e,1),g=co(Zn)}return Pt=null,g}function jt(e){const t=e.filter((e=>!(oo(e)&&e.type===Zn&&"v-if"!==e.children)));return 1===t.length&&oo(t[0])?t[0]:null}const Tt=e=>{let t;for(const n in e)("class"===n||"style"===n||g(n))&&((t||(t={}))[n]=e[n]);return t},$t=(e,t)=>{const n={};for(const o in e)m(o)&&o.slice(9)in t||(n[o]=e[o]);return n};function At(e,t,n){const o=Object.keys(t);if(o.length!==Object.keys(e).length)return!0;for(let r=0;rIt+=e;function Bt(e,t,n={},o){let r=e[t];It++;const s=(eo(),no(Jn,{key:n.key},r?r(n):o?o():[],1===e._?64:-2));return It--,s}function zt(e,t=Pt){if(!t)return e;const n=(...n)=>{It||eo(!0);const o=Pt;Mt(t);const r=e(...n);return Mt(o),It||to(),r};return n._c=!0,n}let Dt=null;const Wt=[];function Ht(e){Wt.push(Dt=e)}function qt(){Wt.pop(),Dt=Wt[Wt.length-1]||null}function Kt(e){return t=>zt((function(){Ht(e);const n=t.apply(this,arguments);return qt(),n}))}function Jt(e,t,n,o=!1){const r={},s={};D(s,so,1),Gt(e,t,r,s),n?e.props=o?r:De(r,!1,me,Ae):e.type.props?e.props=r:e.props=s,e.attrs=s}function Gt(e,t,n,o){const[r,s]=e.propsOptions;if(t)for(const s in t){const l=t[s];if(j(s))continue;let i;r&&b(r,i=A(s))?n[i]=l:Rt(e.emitsOptions,s)||(o[s]=l)}if(s){const t=Ke(n);for(let o=0;o{l=!0;const[n,o]=Qt(e,t,!0);v(r,n),o&&s.push(...o)};!n&&t.mixins.length&&t.mixins.forEach(o),e.extends&&o(e.extends),e.mixins&&e.mixins.forEach(o)}if(!o&&!l)return e.__props=f;if(x(o))for(let e=0;e-1,l[1]=n<0||e-1||b(l,"default"))&&s.push(t)}}}return e.__props=[r,s]}function Xt(e){return"$"!==e[0]}function Yt(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:""}function en(e,t){return Yt(e)===Yt(t)}function tn(e,t){if(x(t)){for(let n=0,o=t.length;n{if(n.isUnmounted)return;ne(),To(n);const r=rt(t,n,e,o);return To(null),oe(),r});return o?r.unshift(s):r.push(s),s}}const on=e=>(t,n=jo)=>!$o&&nn(e,t,n),rn=on("bm"),sn=on("m"),ln=on("bu"),cn=on("u"),un=on("bum"),an=on("um"),fn=on("rtg"),pn=on("rtc");function dn(e,t){return mn(e,null,t)}const hn={};function gn(e,t,n){return mn(e,t,n)}function mn(e,t,{immediate:n,deep:o,flush:r,onTrack:s,onTrigger:l}=a,i=jo){let c,u,f=!1;if(Ze(e)?(c=()=>e.value,f=!!e._shallow):We(e)?(c=()=>e,o=!0):c=x(e)?()=>e.map((e=>Ze(e)?e.value:We(e)?yn(e):S(e)?ot(e,i,2):void 0)):S(e)?t?()=>ot(e,i,2):()=>{if(!i||!i.isUnmounted)return u&&u(),ot(e,i,3,[d])}:p,t&&o){const e=c;c=()=>yn(e())}const d=e=>{u=v.options.onStop=()=>{ot(e,i,4)}};let h=x(e)?[]:hn;const g=()=>{if(v.active)if(t){const e=v();(o||f||B(e,h))&&(u&&u(),rt(t,i,3,[e,h===hn?void 0:h,d]),h=e)}else v()};let m;g.allowRecurse=!!t,m="sync"===r?g:"post"===r?()=>Vn(g,i&&i.suspense):()=>{!i||i.isMounted?function(e){wt(e,ft,at,pt)}(g):g()};const v=Z(c,{lazy:!0,onTrack:s,onTrigger:l,scheduler:m});return Uo(v),t?n?g():h=v():"post"===r?Vn(v,i&&i.suspense):v(),()=>{Q(v),i&&y(i.effects,v)}}function vn(e,t,n){const o=this.proxy;return mn(k(e)?()=>o[e]:e.bind(o),t.bind(o),n,this)}function yn(e,t=new Set){if(!E(e)||t.has(e))return e;if(t.add(e),Ze(e))yn(e.value,t);else if(x(e))for(let n=0;n{yn(e,t)}));else for(const n in e)yn(e[n],t);return e}const _n=e=>e.type.__isKeepAlive;function bn(e,t,n=jo){const o=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}e()});if(nn(t,o,n),n){let e=n.parent;for(;e&&e.parent;)_n(e.parent.vnode)&&xn(o,t,n,e),e=e.parent}}function xn(e,t,n,o){const r=nn(t,e,o,!0);an((()=>{y(o[t],r)}),n)}const wn=e=>"_"===e[0]||"$stable"===e,Cn=e=>x(e)?e.map(ho):[ho(e)],Sn=(e,t,n)=>zt((e=>Cn(t(e))),n),kn=(e,t)=>{const n=e._ctx;for(const o in e){if(wn(o))continue;const r=e[o];if(S(r))t[o]=Sn(0,r,n);else if(null!=r){const e=Cn(r);t[o]=()=>e}}},Fn=(e,t)=>{const n=Cn(t);e.slots.default=()=>n};function En(e,t){if(null===Pt)return e;const n=Pt.proxy,o=e.dirs||(e.dirs=[]);for(let e=0;e(s.has(e)||(e&&S(e.install)?(s.add(e),e.install(i,...t)):S(e)&&(s.add(e),e(i,...t))),i),mixin:e=>(r.mixins.includes(e)||(r.mixins.push(e),(e.props||e.emits)&&(r.deopt=!0)),i),component:(e,t)=>t?(r.components[e]=t,i):r.components[e],directive:(e,t)=>t?(r.directives[e]=t,i):r.directives[e],mount(s,c){if(!l){const u=co(n,o);return u.appContext=r,c&&t?t(u,s):e(u,s),l=!0,i._container=s,s.__vue_app__=i,u.component.proxy}},unmount(){l&&e(null,i._container)},provide:(e,t)=>(r.provides[e]=t,i)};return i}}let Nn=!1;const jn=e=>/svg/.test(e.namespaceURI)&&"foreignObject"!==e.tagName,Tn=e=>8===e.nodeType;function $n(e){const{mt:t,p:n,o:{patchProp:o,nextSibling:r,parentNode:s,remove:l,insert:i,createComment:c}}=e,u=(n,o,l,i,c=!1)=>{const g=Tn(n)&&"["===n.data,m=()=>d(n,o,l,i,g),{type:v,ref:y,shapeFlag:_}=o,b=n.nodeType;o.el=n;let x=null;switch(v){case Gn:3!==b?x=m():(n.data!==o.children&&(Nn=!0,n.data=o.children),x=r(n));break;case Zn:x=8!==b||g?m():r(n);break;case Qn:if(1===b){x=n;const e=!o.children.length;for(let t=0;t{t(o,e,null,l,i,jn(e),c)},a=o.type.__asyncLoader;a?a().then(u):u(),x=g?h(n):r(n)}else 64&_?x=8!==b?m():o.type.hydrate(n,o,l,i,c,e,f):128&_&&(x=o.type.hydrate(n,o,l,i,jn(s(n)),c,e,u))}return null!=y&&l&&Un(y,null,l,i,o),x},a=(e,t,n,r,s)=>{s=s||!!t.dynamicChildren;const{props:i,patchFlag:c,shapeFlag:u,dirs:a}=t;if(-1!==c){if(a&&On(t,null,n,"created"),i)if(!s||16&c||32&c)for(const t in i)!j(t)&&g(t)&&o(e,t,null,i[t]);else i.onClick&&o(e,"onClick",null,i.onClick);let p;if((p=i&&i.onVnodeBeforeMount)&&Ln(p,n,t),a&&On(t,null,n,"beforeMount"),((p=i&&i.onVnodeMounted)||a)&&Ut((()=>{p&&Ln(p,n,t),a&&On(t,null,n,"mounted")}),r),16&u&&(!i||!i.innerHTML&&!i.textContent)){let o=f(e.firstChild,t,e,n,r,s);for(;o;){Nn=!0;const e=o;o=o.nextSibling,l(e)}}else 8&u&&e.textContent!==t.children&&(Nn=!0,e.textContent=t.children)}return e.nextSibling},f=(e,t,o,r,s,l)=>{l=l||!!t.dynamicChildren;const i=t.children,c=i.length;for(let t=0;t{const u=s(e),a=f(r(e),t,u,n,o,l);return a&&Tn(a)&&"]"===a.data?r(t.anchor=a):(Nn=!0,i(t.anchor=c("]"),u,a),a)},d=(e,t,o,i,c)=>{if(Nn=!0,t.el=null,c){const t=h(e);for(;;){const n=r(e);if(!n||n===t)break;l(n)}}const u=r(e),a=s(e);return l(e),n(null,t,a,u,o,i,jn(a)),u},h=e=>{let t=0;for(;e;)if((e=r(e))&&Tn(e)&&("["===e.data&&t++,"]"===e.data)){if(0===t)return r(e);t--}return e};return[(e,t)=>{Nn=!1,u(t.firstChild,e,null,null),St(),Nn&&console.error("Hydration completed but contains mismatches.")},u]}const An={scheduler:bt,allowRecurse:!0},Vn=Ut,Un=(e,t,n,o,r)=>{if(x(e))return void e.forEach(((e,s)=>Un(e,t&&(x(t)?t[s]:t),n,o,r)));let s;s=r?4&r.shapeFlag?r.component.exposed||r.component.proxy:r.el:null;const{i:l,r:i}=e,c=t&&t.r,u=l.refs===a?l.refs={}:l.refs,f=l.setupState;if(null!=c&&c!==i&&(k(c)?(u[c]=null,b(f,c)&&(f[c]=null)):Ze(c)&&(c.value=null)),k(i)){const e=()=>{u[i]=s,b(f,i)&&(f[i]=s)};s?(e.id=-1,Vn(e,o)):e()}else if(Ze(i)){const e=()=>{i.value=s};s?(e.id=-1,Vn(e,o)):e()}else S(i)&&ot(i,n,12,[s,u])};function In(e){return function(e,t){const{insert:n,remove:o,patchProp:r,forcePatchProp:s,createElement:l,createText:i,createComment:c,setText:u,setElementText:d,parentNode:h,nextSibling:g,setScopeId:m=p,cloneNode:y,insertStaticContent:_}=e,x=(e,t,n,o=null,r=null,s=null,l=!1,i=!1)=>{e&&!ro(e,t)&&(o=te(e),J(e,r,s,!0),e=null),-2===t.patchFlag&&(i=!1,t.dynamicChildren=null);const{type:c,ref:u,shapeFlag:a}=t;switch(c){case Gn:w(e,t,n,o);break;case Zn:C(e,t,n,o);break;case Qn:null==e&&S(t,n,o,l);break;case Jn:T(e,t,n,o,r,s,l,i);break;default:1&a?k(e,t,n,o,r,s,l,i):6&a?$(e,t,n,o,r,s,l,i):(64&a||128&a)&&c.process(e,t,n,o,r,s,l,i,le)}null!=u&&r&&Un(u,e&&e.ref,r,s,t)},w=(e,t,o,r)=>{if(null==e)n(t.el=i(t.children),o,r);else{const n=t.el=e.el;t.children!==e.children&&u(n,t.children)}},C=(e,t,o,r)=>{null==e?n(t.el=c(t.children||""),o,r):t.el=e.el},S=(e,t,n,o)=>{[e.el,e.anchor]=_(e.children,t,n,o)},k=(e,t,n,o,r,s,l,i)=>{l=l||"svg"===t.type,null==e?F(t,n,o,r,s,l,i):P(e,t,r,s,l,i)},F=(e,t,o,s,i,c,u)=>{let a,f;const{type:p,props:h,shapeFlag:g,transition:m,scopeId:v,patchFlag:_,dirs:b}=e;if(e.el&&void 0!==y&&-1===_)a=e.el=y(e.el);else{if(a=e.el=l(e.type,c,h&&h.is),8&g?d(a,e.children):16&g&&R(e.children,a,null,s,i,c&&"foreignObject"!==p,u||!!e.dynamicChildren),b&&On(e,null,s,"created"),h){for(const t in h)j(t)||r(a,t,null,h[t],c,e.children,s,i,ee);(f=h.onVnodeBeforeMount)&&Ln(f,s,e)}E(a,v,e,s)}b&&On(e,null,s,"beforeMount");const x=(!i||i&&!i.pendingBranch)&&m&&!m.persisted;x&&m.beforeEnter(a),n(a,t,o),((f=h&&h.onVnodeMounted)||x||b)&&Vn((()=>{f&&Ln(f,s,e),x&&m.enter(a),b&&On(e,null,s,"mounted")}),i)},E=(e,t,n,o)=>{if(t&&m(e,t),o){const r=o.type.__scopeId;r&&r!==t&&m(e,r+"-s"),n===o.subTree&&E(e,o.vnode.scopeId,o.vnode,o.parent)}},R=(e,t,n,o,r,s,l,i=0)=>{for(let c=i;c{const c=t.el=e.el;let{patchFlag:u,dynamicChildren:f,dirs:p}=t;u|=16&e.patchFlag;const h=e.props||a,g=t.props||a;let m;if((m=g.onVnodeBeforeUpdate)&&Ln(m,n,t,e),p&&On(t,e,n,"beforeUpdate"),u>0){if(16&u)N(c,t,h,g,n,o,l);else if(2&u&&h.class!==g.class&&r(c,"class",null,g.class,l),4&u&&r(c,"style",h.style,g.style,l),8&u){const i=t.dynamicProps;for(let t=0;t{m&&Ln(m,n,t,e),p&&On(t,e,n,"updated")}),o)},M=(e,t,n,o,r,s)=>{for(let l=0;l{if(n!==o){for(const u in o){if(j(u))continue;const a=o[u],f=n[u];(a!==f||s&&s(e,u))&&r(e,u,f,a,c,t.children,l,i,ee)}if(n!==a)for(const s in n)j(s)||s in o||r(e,s,n[s],null,c,t.children,l,i,ee)}},T=(e,t,o,r,s,l,c,u)=>{const a=t.el=e?e.el:i(""),f=t.anchor=e?e.anchor:i("");let{patchFlag:p,dynamicChildren:d}=t;p>0&&(u=!0),null==e?(n(a,o,r),n(f,o,r),R(t.children,o,f,s,l,c,u)):p>0&&64&p&&d?(M(e.dynamicChildren,d,o,s,l,c),(null!=t.key||s&&t===s.subTree)&&Bn(e,t,!0)):W(e,t,o,f,s,l,c,u)},$=(e,t,n,o,r,s,l,i)=>{null==e?512&t.shapeFlag?r.ctx.activate(t,n,o,l,i):V(t,n,o,r,s,l,i):I(e,t,i)},V=(e,t,n,o,r,s,l)=>{const i=e.component=function(e,t,n){const o=e.type,r=(t?t.appContext:e.appContext)||Mo,s={uid:No++,vnode:e,type:o,parent:t,appContext:r,root:null,next:null,subTree:null,update:null,render:null,proxy:null,exposed:null,withProxy:null,effects:null,provides:t?t.provides:Object.create(r.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Qt(o,r),emitsOptions:Ot(o,r),emit:null,emitted:null,ctx:a,data:a,props:a,attrs:a,slots:a,refs:a,setupState:a,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null};return s.ctx={_:s},s.root=t?t.root:s,s.emit=Et.bind(null,s),s}(e,o,r);if(_n(e)&&(i.ctx.renderer=le),function(e,t=!1){$o=t;const{props:n,children:o,shapeFlag:r}=e.vnode,s=4&r;Jt(e,n,s,t),((e,t)=>{if(32&e.vnode.shapeFlag){const n=t._;n?(e.slots=t,D(t,"_",n)):kn(t,e.slots={})}else e.slots={},t&&Fn(e,t);D(e.slots,so,1)})(e,o);const l=s?function(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=new Proxy(e.ctx,Ro);const{setup:o}=n;if(o){const n=e.setupContext=o.length>1?function(e){const t=t=>{e.exposed=et(t)};return{attrs:e.attrs,slots:e.slots,emit:e.emit,expose:t}}(e):null;jo=e,ne();const r=ot(o,e,0,[e.props,n]);if(oe(),jo=null,O(r)){if(t)return r.then((t=>{Ao(e,t)}));e.asyncDep=r}else Ao(e,r)}else Vo(e)}(e,t):void 0;$o=!1}(i),i.asyncDep){if(r&&r.registerDep(i,L),!e.el){const e=i.subTree=co(Zn);C(null,e,t,n)}}else L(i,e,t,n,r,s,l)},I=(e,t,n)=>{const o=t.component=e.component;if(function(e,t,n){const{props:o,children:r,component:s}=e,{props:l,children:i,patchFlag:c}=t,u=s.emitsOptions;if(t.dirs||t.transition)return!0;if(!(n&&c>=0))return!(!r&&!i||i&&i.$stable)||o!==l&&(o?!l||At(o,l,u):!!l);if(1024&c)return!0;if(16&c)return o?At(o,l,u):!!l;if(8&c){const e=t.dynamicProps;for(let t=0;t-1&&ct.splice(t,1)}(o.update),o.update()}else t.component=e.component,t.el=e.el,o.vnode=t},L=(e,t,n,o,r,s,l)=>{e.update=Z((function(){if(e.isMounted){let t,{next:n,bu:o,u:i,parent:c,vnode:u}=e,a=n;n?(n.el=u.el,B(e,n,l)):n=u,o&&z(o),(t=n.props&&n.props.onVnodeBeforeUpdate)&&Ln(t,c,n,u);const f=Nt(e),p=e.subTree;e.subTree=f,x(p,f,h(p.el),te(p),e,r,s),n.el=f.el,null===a&&function({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}(e,f.el),i&&Vn(i,r),(t=n.props&&n.props.onVnodeUpdated)&&Vn((()=>{Ln(t,c,n,u)}),r)}else{let l;const{el:i,props:c}=t,{bm:u,m:a,parent:f}=e;u&&z(u),(l=c&&c.onVnodeBeforeMount)&&Ln(l,f,t);const p=e.subTree=Nt(e);i&&ce?ce(t.el,p,e,r):(x(null,p,n,o,e,r,s),t.el=p.el),a&&Vn(a,r),(l=c&&c.onVnodeMounted)&&Vn((()=>{Ln(l,f,t)}),r);const{a:d}=e;d&&256&t.shapeFlag&&Vn(d,r),e.isMounted=!0}}),An)},B=(e,t,n)=>{t.component=e;const o=e.vnode.props;e.vnode=t,e.next=null,function(e,t,n,o){const{props:r,attrs:s,vnode:{patchFlag:l}}=e,i=Ke(r),[c]=e.propsOptions;if(!(o||l>0)||16&l){let o;Gt(e,t,r,s);for(const s in i)t&&(b(t,s)||(o=U(s))!==s&&b(t,o))||(c?!n||void 0===n[s]&&void 0===n[o]||(r[s]=Zt(c,t||a,s,void 0,e)):delete r[s]);if(s!==i)for(const e in s)t&&b(t,e)||delete s[e]}else if(8&l){const n=e.vnode.dynamicProps;for(let o=0;o{const{vnode:n,slots:o}=e;let r=!0,s=a;if(32&n.shapeFlag){const e=t._;e?1===e?r=!1:v(o,t):(r=!t.$stable,kn(t,o)),s=t}else t&&(Fn(e,t),s={default:1});if(r)for(const e in o)wn(e)||e in s||delete o[e]})(e,t.children),Ct(void 0,e.update)},W=(e,t,n,o,r,s,l,i=!1)=>{const c=e&&e.children,u=e?e.shapeFlag:0,a=t.children,{patchFlag:f,shapeFlag:p}=t;if(f>0){if(128&f)return void q(c,a,n,o,r,s,l,i);if(256&f)return void H(c,a,n,o,r,s,l,i)}8&p?(16&u&&ee(c,r,s),a!==c&&d(n,a)):16&u?16&p?q(c,a,n,o,r,s,l,i):ee(c,r,s,!0):(8&u&&d(n,""),16&p&&R(a,n,o,r,s,l,i))},H=(e,t,n,o,r,s,l,i)=>{t=t||f;const c=(e=e||f).length,u=t.length,a=Math.min(c,u);let p;for(p=0;pu?ee(e,r,s,!0,!1,a):R(t,n,o,r,s,l,i,a)},q=(e,t,n,o,r,s,l,i)=>{let c=0;const u=t.length;let a=e.length-1,p=u-1;for(;c<=a&&c<=p;){const o=e[c],u=t[c]=i?go(t[c]):ho(t[c]);if(!ro(o,u))break;x(o,u,n,null,r,s,l,i),c++}for(;c<=a&&c<=p;){const o=e[a],c=t[p]=i?go(t[p]):ho(t[p]);if(!ro(o,c))break;x(o,c,n,null,r,s,l,i),a--,p--}if(c>a){if(c<=p){const e=p+1,a=ep)for(;c<=a;)J(e[c],r,s,!0),c++;else{const d=c,h=c,g=new Map;for(c=h;c<=p;c++){const e=t[c]=i?go(t[c]):ho(t[c]);null!=e.key&&g.set(e.key,c)}let m,v=0;const y=p-h+1;let _=!1,b=0;const w=new Array(y);for(c=0;c=y){J(o,r,s,!0);continue}let u;if(null!=o.key)u=g.get(o.key);else for(m=h;m<=p;m++)if(0===w[m-h]&&ro(o,t[m])){u=m;break}void 0===u?J(o,r,s,!0):(w[u-h]=c+1,u>=b?b=u:_=!0,x(o,t[u],n,null,r,s,l,i),v++)}const C=_?function(e){const t=e.slice(),n=[0];let o,r,s,l,i;const c=e.length;for(o=0;o0&&(t[o]=n[s-1]),n[s]=o)}}s=n.length,l=n[s-1];for(;s-- >0;)n[s]=l,l=t[l];return n}(w):f;for(m=C.length-1,c=y-1;c>=0;c--){const e=h+c,i=t[e],a=e+1{const{el:l,type:i,transition:c,children:u,shapeFlag:a}=e;if(6&a)return void K(e.component.subTree,t,o,r);if(128&a)return void e.suspense.move(t,o,r);if(64&a)return void i.move(e,t,o,le);if(i===Jn){n(l,t,o);for(let e=0;ec.enter(l)),s);else{const{leave:e,delayLeave:r,afterLeave:s}=c,i=()=>n(l,t,o),u=()=>{e(l,(()=>{i(),s&&s()}))};r?r(l,i,u):u()}else n(l,t,o)},J=(e,t,n,o=!1,r=!1)=>{const{type:s,props:l,ref:i,children:c,dynamicChildren:u,shapeFlag:a,patchFlag:f,dirs:p}=e;if(null!=i&&t&&Un(i,null,t,n,null),256&a)return void t.ctx.deactivate(e);const d=1&a&&p;let h;if((h=l&&l.onVnodeBeforeUnmount)&&Ln(h,t,e),6&a)Y(e.component,n,o);else{if(128&a)return void e.suspense.unmount(n,o);d&&On(e,null,t,"beforeUnmount"),u&&(s!==Jn||f>0&&64&f)?ee(u,t,n,!1,!0):(s===Jn&&(128&f||256&f)||!r&&16&a)&&ee(c,t,n),64&a&&(o||!zn(e.props))&&e.type.remove(e,le),o&&G(e)}((h=l&&l.onVnodeUnmounted)||d)&&Vn((()=>{h&&Ln(h,t,e),d&&On(e,null,t,"unmounted")}),n)},G=e=>{const{type:t,el:n,anchor:r,transition:s}=e;if(t===Jn)return void X(n,r);const l=()=>{o(n),s&&!s.persisted&&s.afterLeave&&s.afterLeave()};if(1&e.shapeFlag&&s&&!s.persisted){const{leave:t,delayLeave:o}=s,r=()=>t(n,l);o?o(e.el,l,r):r()}else l()},X=(e,t)=>{let n;for(;e!==t;)n=g(e),o(e),e=n;o(t)},Y=(e,t,n)=>{const{bum:o,effects:r,update:s,subTree:l,um:i}=e;if(o&&z(o),r)for(let e=0;e{e.isUnmounted=!0}),t),t&&t.pendingBranch&&!t.isUnmounted&&e.asyncDep&&!e.asyncResolved&&e.suspenseId===t.pendingId&&(t.deps--,0===t.deps&&t.resolve())},ee=(e,t,n,o=!1,r=!1,s=0)=>{for(let l=s;l6&e.shapeFlag?te(e.component.subTree):128&e.shapeFlag?e.suspense.next():g(e.anchor||e.el),re=(e,t)=>{null==e?t._vnode&&J(t._vnode,null,null,!0):x(t._vnode||null,e,t),St(),t._vnode=e},le={p:x,um:J,m:K,r:G,mt:V,mc:R,pc:W,pbc:M,n:te,o:e};let ie,ce;t&&([ie,ce]=t(le));return{render:re,hydrate:ie,createApp:Mn(re,ie)}}(e,$n)}function Ln(e,t,n,o=null){rt(e,t,7,[n,o])}function Bn(e,t,n=!1){const o=e.children,r=t.children;if(x(o)&&x(r))for(let e=0;ee&&(e.disabled||""===e.disabled);function Dn(e){return qn("components",e)||e}const Wn=Symbol();function Hn(e){return qn("directives",e)}function qn(e,t,n=!0){const o=Pt||jo;if(o){const n=o.type;if("components"===e){const e=n.displayName||n.name;if(e&&(e===t||e===A(t)||e===I(A(t))))return n}return Kn(o[e]||n[e],t)||Kn(o.appContext[e],t)}}function Kn(e,t){return e&&(e[t]||e[A(t)]||e[I(A(t))])}const Jn=Symbol(void 0),Gn=Symbol(void 0),Zn=Symbol(void 0),Qn=Symbol(void 0),Xn=[];let Yn=null;function eo(e=!1){Xn.push(Yn=e?null:[])}function to(){Xn.pop(),Yn=Xn[Xn.length-1]||null}function no(e,t,n,o,r){const s=co(e,t,n,o,r,!0);return s.dynamicChildren=Yn||f,to(),Yn&&Yn.push(s),s}function oo(e){return!!e&&!0===e.__v_isVNode}function ro(e,t){return e.type===t.type&&e.key===t.key}const so="__vInternal",lo=({key:e})=>null!=e?e:null,io=({ref:e})=>null!=e?x(e)?e:{i:Pt,r:e}:null,co=function(e,t=null,n=null,r=0,s=null,l=!1){e&&e!==Wn||(e=Zn);if(oo(e)){const o=uo(e,t,!0);return n&&mo(o,n),o}c=e,S(c)&&"__vccOpts"in c&&(e=e.__vccOpts);var c;if(t){(qe(t)||so in t)&&(t=v({},t));let{class:e,style:n}=t;e&&!k(e)&&(t.class=i(e)),E(n)&&(qe(n)&&!x(n)&&(n=v({},n)),t.style=o(n))}const u=k(e)?1:(e=>e.__isSuspense)(e)?128:(e=>e.__isTeleport)(e)?64:E(e)?4:S(e)?2:0,a={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&lo(t),ref:t&&io(t),scopeId:Dt,children:null,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:u,patchFlag:r,dynamicProps:s,dynamicChildren:null,appContext:null};if(mo(a,n),128&u){const{content:e,fallback:t}=function(e){const{shapeFlag:t,children:n}=e;let o,r;return 32&t?(o=Vt(n.default),r=Vt(n.fallback)):(o=Vt(n),r=ho(null)),{content:o,fallback:r}}(a);a.ssContent=e,a.ssFallback=t}!l&&Yn&&(r>0||6&u)&&32!==r&&Yn.push(a);return a};function uo(e,t,n=!1){const{props:r,ref:s,patchFlag:l}=e,c=t?function(...e){const t=v({},e[0]);for(let n=1;n1)return n&&S(t)?t():t}}let _o=!1;function bo(e,t,n=[],o=[],r=[],s=!1){const{mixins:l,extends:i,data:c,computed:u,methods:f,watch:d,provide:h,inject:g,components:m,directives:y,beforeMount:_,mounted:b,beforeUpdate:w,updated:C,activated:k,deactivated:F,beforeDestroy:O,beforeUnmount:R,destroyed:P,unmounted:M,render:N,renderTracked:j,renderTriggered:T,errorCaptured:$,expose:A}=t,V=e.proxy,U=e.ctx,I=e.appContext.mixins;if(s&&N&&e.render===p&&(e.render=N),s||(_o=!0,xo("beforeCreate","bc",t,e,I),_o=!1,So(e,I,n,o,r)),i&&bo(e,i,n,o,r,!0),l&&So(e,l,n,o,r),g)if(x(g))for(let e=0;eko(e,t,V))),c&&ko(e,c,V)),u)for(const e in u){const t=u[e],n=Io({get:S(t)?t.bind(V,V):S(t.get)?t.get.bind(V,V):p,set:!S(t)&&S(t.set)?t.set.bind(V):p});Object.defineProperty(U,e,{enumerable:!0,configurable:!0,get:()=>n.value,set:e=>n.value=e})}var L;if(d&&o.push(d),!s&&o.length&&o.forEach((e=>{for(const t in e)Fo(e[t],U,V,t)})),h&&r.push(h),!s&&r.length&&r.forEach((e=>{const t=S(e)?e.call(V):e;for(const e in t)vo(e,t[e])})),s&&(m&&v(e.components||(e.components=v({},e.type.components)),m),y&&v(e.directives||(e.directives=v({},e.type.directives)),y)),s||xo("created","c",t,e,I),_&&rn(_.bind(V)),b&&sn(b.bind(V)),w&&ln(w.bind(V)),C&&cn(C.bind(V)),k&&bn(k.bind(V),"a",L),F&&function(e,t){bn(e,"da",t)}(F.bind(V)),$&&((e,t=jo)=>{nn("ec",e,t)})($.bind(V)),j&&pn(j.bind(V)),T&&fn(T.bind(V)),R&&un(R.bind(V)),M&&an(M.bind(V)),x(A)&&!s)if(A.length){const t=e.exposed||(e.exposed=et({}));A.forEach((e=>{t[e]=function(e,t){return Ze(e[t])?e[t]:new tt(e,t)}(V,e)}))}else e.exposed||(e.exposed=a)}function xo(e,t,n,o,r){Co(e,t,r,o);const{extends:s,mixins:l}=n;s&&wo(e,t,s,o),l&&Co(e,t,l,o);const i=n[e];i&&rt(i.bind(o.proxy),o,t)}function wo(e,t,n,o){n.extends&&wo(e,t,n.extends,o);const r=n[e];r&&rt(r.bind(o.proxy),o,t)}function Co(e,t,n,o){for(let r=0;r{let t=e;for(let e=0;en[o];if(k(e)){const n=t[e];S(n)&&gn(r,n)}else if(S(e))gn(r,e.bind(n));else if(E(e))if(x(e))e.forEach((e=>Fo(e,t,n,o)));else{const o=S(e.handler)?e.handler.bind(n):t[e.handler];S(o)&&gn(r,o,e)}}function Eo(e,t,n){const o=n.appContext.config.optionMergeStrategies,{mixins:r,extends:s}=t;s&&Eo(e,s,n),r&&r.forEach((t=>Eo(e,t,n)));for(const r in t)o&&b(o,r)?e[r]=o[r](e[r],t[r],n.proxy,r):e[r]=t[r]}const Oo=v(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>e.parent&&e.parent.proxy,$root:e=>e.root&&e.root.proxy,$emit:e=>e.emit,$options:e=>function(e){const t=e.type,{__merged:n,mixins:o,extends:r}=t;if(n)return n;const s=e.appContext.mixins;if(!s.length&&!o&&!r)return t;const l={};return s.forEach((t=>Eo(l,t,e))),Eo(l,t,e),t.__merged=l}(e),$forceUpdate:e=>()=>bt(e.update),$nextTick:e=>_t.bind(e.proxy),$watch:e=>vn.bind(e)}),Ro={get({_:e},t){const{ctx:n,setupState:o,data:r,props:s,accessCache:l,type:i,appContext:c}=e;if("__v_skip"===t)return!0;let u;if("$"!==t[0]){const i=l[t];if(void 0!==i)switch(i){case 0:return o[t];case 1:return r[t];case 3:return n[t];case 2:return s[t]}else{if(o!==a&&b(o,t))return l[t]=0,o[t];if(r!==a&&b(r,t))return l[t]=1,r[t];if((u=e.propsOptions[0])&&b(u,t))return l[t]=2,s[t];if(n!==a&&b(n,t))return l[t]=3,n[t];_o||(l[t]=4)}}const f=Oo[t];let p,d;return f?("$attrs"===t&&re(e,0,t),f(e)):(p=i.__cssModules)&&(p=p[t])?p:n!==a&&b(n,t)?(l[t]=3,n[t]):(d=c.config.globalProperties,b(d,t)?d[t]:void 0)},set({_:e},t,n){const{data:o,setupState:r,ctx:s}=e;if(r!==a&&b(r,t))r[t]=n;else if(o!==a&&b(o,t))o[t]=n;else if(t in e.props)return!1;return("$"!==t[0]||!(t.slice(1)in e))&&(s[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:o,appContext:r,propsOptions:s}},l){let i;return void 0!==n[l]||e!==a&&b(e,l)||t!==a&&b(t,l)||(i=s[0])&&b(i,l)||b(o,l)||b(Oo,l)||b(r.config.globalProperties,l)}},Po=v({},Ro,{get(e,t){if(t!==Symbol.unscopables)return Ro.get(e,t,e)},has:(e,n)=>"_"!==n[0]&&!t(n)}),Mo=Rn();let No=0;let jo=null;const To=e=>{jo=e};let $o=!1;function Ao(e,t,n){S(t)?e.render=t:E(t)&&(e.setupState=et(t)),Vo(e)}function Vo(e,t){const n=e.type;e.render||(e.render=n.render||p,e.render._rc&&(e.withProxy=new Proxy(e.ctx,Po))),jo=e,bo(e,n),jo=null}function Uo(e){jo&&(jo.effects||(jo.effects=[])).push(e)}function Io(e){const t=function(e){let t,n;return S(e)?(t=e,n=p):(t=e.get,n=e.set),new nt(t,n,S(e)||!e.set)}(e);return Uo(t.effect),t}function Lo(e){return S(e)?{setup:e,name:e.name}:e}function Bo(e,t,n){const o=arguments.length;return 2===o?E(t)&&!x(t)?oo(t)?co(e,null,[t]):co(e,t):co(e,null,t):(o>3?n=Array.prototype.slice.call(arguments,2):3===o&&oo(n)&&(n=[n]),co(e,t,n))}function zo(e,t){let n;if(x(e)||k(e)){n=new Array(e.length);for(let o=0,r=e.length;o{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n)=>t?Ho.createElementNS(Wo,e):Ho.createElement(e,n?{is:n}:void 0),createText:e=>Ho.createTextNode(e),createComment:e=>Ho.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Ho.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},cloneNode:e=>e.cloneNode(!0),insertStaticContent(e,t,n,o){const r=o?Ko||(Ko=Ho.createElementNS(Wo,"svg")):qo||(qo=Ho.createElement("div"));r.innerHTML=e;const s=r.firstChild;let l=s,i=l;for(;l;)i=l,Jo.insert(l,t,n),l=r.firstChild;return[s,i]}};const Go=/\s*!important$/;function Zo(e,t,n){if(x(n))n.forEach((n=>Zo(e,t,n)));else if(t.startsWith("--"))e.setProperty(t,n);else{const o=function(e,t){const n=Xo[t];if(n)return n;let o=A(t);if("filter"!==o&&o in e)return Xo[t]=o;o=I(o);for(let n=0;ndocument.createEvent("Event").timeStamp&&(er=()=>performance.now());let tr=0;const nr=Promise.resolve(),or=()=>{tr=0};function rr(e,t,n,o,r=null){const s=e._vei||(e._vei={}),l=s[t];if(o&&l)l.value=o;else{const[n,i]=function(e){let t;if(sr.test(e)){let n;for(t={};n=e.match(sr);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[e.slice(2).toLowerCase(),t]}(t);if(o){!function(e,t,n,o){e.addEventListener(t,n,o)}(e,n,s[t]=function(e,t){const n=e=>{(e.timeStamp||er())>=n.attached-1&&rt(function(e,t){if(x(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map((e=>t=>!t._stopped&&e(t)))}return t}(e,n.value),t,5,[e])};return n.value=e,n.attached=(()=>tr||(nr.then(or),tr=er()))(),n}(o,r),i)}else l&&(!function(e,t,n,o){e.removeEventListener(t,n,o)}(e,n,l,i),s[t]=void 0)}}const sr=/(?:Once|Passive|Capture)$/;const lr=/^on[a-z]/;const ir=v({patchProp:(e,t,o,r,s=!1,l,i,c,u)=>{switch(t){case"class":!function(e,t,n){if(null==t&&(t=""),n)e.setAttribute("class",t);else{const n=e._vtc;n&&(t=(t?[t,...n]:[...n]).join(" ")),e.className=t}}(e,r,s);break;case"style":!function(e,t,n){const o=e.style;if(n)if(k(n))t!==n&&(o.cssText=n);else{for(const e in n)Zo(o,e,n[e]);if(t&&!k(t))for(const e in t)null==n[e]&&Zo(o,e,"")}else e.removeAttribute("style")}(e,o,r);break;default:g(t)?m(t)||rr(e,t,0,r,i):function(e,t,n,o){if(o)return"innerHTML"===t||!!(t in e&&lr.test(t)&&S(n));if("spellcheck"===t||"draggable"===t)return!1;if("form"===t&&"string"==typeof n)return!1;if("list"===t&&"INPUT"===e.tagName)return!1;if(lr.test(t)&&k(n))return!1;return t in e}(e,t,r,s)?function(e,t,n,o,r,s,l){if("innerHTML"===t||"textContent"===t)return o&&l(o,r,s),void(e[t]=null==n?"":n);if("value"!==t||"PROGRESS"===e.tagName)if(""===n&&"boolean"==typeof e[t])e[t]=!0;else if(null==n&&"string"==typeof e[t])e[t]="",e.removeAttribute(t);else try{e[t]=n}catch(e){}else{e._value=n;const t=null==n?"":n;e.value!==t&&(e.value=t)}}(e,t,r,l,i,c,u):("true-value"===t?e._trueValue=r:"false-value"===t&&(e._falseValue=r),function(e,t,o,r){if(r&&t.startsWith("xlink:"))null==o?e.removeAttributeNS(Yo,t.slice(6,t.length)):e.setAttributeNS(Yo,t,o);else{const r=n(t);null==o||r&&!1===o?e.removeAttribute(t):e.setAttribute(t,r?"":o)}}(e,t,r,s))}},forcePatchProp:(e,t)=>"value"===t},Jo);let cr,ur=!1;const ar=(...e)=>{const t=(cr=ur?cr:In(ir),ur=!0,cr).createApp(...e),{mount:n}=t;return t.mount=e=>{const t=function(e){if(k(e)){return document.querySelector(e)}return e}(e);if(t)return n(t,!0)},t};export{zt as A,ar as B,Hn as C,En as D,fo as E,Jn as F,ze as a,Qe as b,Io as c,cn as d,an as e,Lo as f,gn as g,Bo as h,yo as i,no as j,co as k,Kt as l,Je as m,_t as n,sn as o,eo as p,Ht as q,Be as r,qt as s,c as t,po as u,ao as v,dn as w,Dn as x,zo as y,Bt as z}; 2 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/_assets/index.md.ff5beefb.js: -------------------------------------------------------------------------------- 1 | import{b as n,c as a,C as s,D as e,j as t,k as l,t as p,l as c,p as i,u as o,v as u,x as r,E as d}from"./common-af9ee497.js";const m=null!==document.ontouchstart?"click":"touchstart",k="__vue_click_away__",v=function(n,a,s){b(n);let e=s.context,t=a.value,l=!1;setTimeout((function(){l=!0}),0),n[k]=function(a){if((!n||!n.contains(a.target))&&t&&l&&"function"==typeof t)return t.call(e,a)},document.addEventListener(m,n[k],!1)},b=function(n){document.removeEventListener(m,n[k],!1),delete n[k]},h={install:function(n){n.directive("click-away",{mounted(n,a,s){v(n,a,s)},updated(n,a,s){!function(n,a,s){a.value!==a.oldValue&&v(n,a,s)}(n,a,s)},unmounted(n){b(n)}})}};var g={setup(){const s=n(null),e=a((()=>null===s.value?"Click Anywhere (Inside or Outside)":s.value?"You Clicked Outside":"You Clicked Inside"));return{outside:s,message:e,onClick:()=>{s.value=!1},onClickAway:()=>{s.value=!0}}},directives:{ClickAway:h}};const w=c("data-v-5d7790de")(((n,a,c,o,u,r)=>{const d=s("click-away");return e((i(),t("div",{class:"vca__container",onClick:a[1]||(a[1]=(...n)=>o.onClick(...n))},[l("h2",{class:[o.outside?"outside":"inside"],textContent:p(o.message)},null,10,["textContent"])],512)),[[d,o.onClickAway]])}));g.render=w,g.__scopeId="data-v-5d7790de";var y={setup(){const a=n(!1);return{open:a,onClick:()=>{a.value=!0},onClickAway:()=>{a.value=!1}}},directives:{ClickAway:h}};const x={key:0,class:"fixed z-10 inset-0 overflow-y-auto"},f={class:"flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"},C=l("div",{class:"fixed inset-0 transition-opacity"},[l("div",{class:"absolute inset-0 bg-gray-500 opacity-75"})],-1),A=l("span",{class:"hidden sm:inline-block sm:align-middle sm:h-screen"},null,-1),q=u("​ "),_={class:"inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6",role:"dialog","aria-modal":"true","aria-labelledby":"modal-headline"},E=l("div",null,[l("div",{class:"mt-3 text-center sm:mt-5"},[l("h3",{class:"text-lg leading-6 font-medium text-gray-900",id:"modal-headline"},"Click anywhere outside of the modal window to close it")])],-1);y.render=function(n,a,p,c,u,r){const d=s("click-away");return i(),t("div",null,[l("button",{class:"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2",type:"button",onClick:a[1]||(a[1]=(...n)=>c.onClick(...n))},"Open Modal"),c.open?(i(),t("div",x,[l("div",f,[C,A,q,e(l("div",_,[E],512),[[d,c.onClickAway]])])])):o("v-if",!0)])};var V={components:{Popup:y,Simple:g}};const I='{"title":"Vue Click Away","frontmatter":{},"headers":[{"level":2,"title":"Overview","slug":"overview"},{"level":2,"title":"Requirements","slug":"requirements"},{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Usage","slug":"usage"},{"level":3,"title":"Mixin","slug":"mixin"},{"level":2,"title":"Examples","slug":"examples"},{"level":3,"title":"Simple Example","slug":"simple-example"},{"level":3,"title":"Popup/Modal Example","slug":"popup-modal-example"}],"relativePath":"index.md","lastUpdated":1600710344537.8472}',j=d('

Vue Click Away

Overview

Detect if a click event happened outside of an element. Compatible with Vue 3.x.

Requirements

  • Vue 3.x

Installation

npm i vue3-click-away\n
1
yarn add vue3-click-away\n
1

Usage

TIP

By default the module exports a directive, you can also use this as a mixin which is documented below.

<template>\n  <div v-click-away="onClickAway">\n    ...\n  </div>\n</template>\n
1
2
3
4
5
import VueClickAway from "vue3-click-away";\nexport default {\n  directives: {\n    ClickAway: VueClickAway,\n  },\n  methods: {\n    onClickAway(event) {\n      console.log(event);\n    }\n  }\n}\n
1
2
3
4
5
6
7
8
9
10
11

Mixin

<template>\n  <div v-click-away="onClickAway">\n    ...\n  </div>\n</template>\n
1
2
3
4
5
import { mixin as VueClickAway } from "vue3-click-away";\nexport default {\n  mixins: [VueClickAway],\n  methods: {\n    onClickAway(event) {\n      console.log(event);\n    }\n  }\n}\n
1
2
3
4
5
6
7
8
9

Examples

Simple Example

',17),M={class:"mb-4"},O=l("h3",{id:"popup-modal-example"},[l("a",{class:"header-anchor",href:"#popup-modal-example","aria-hidden":"true"},"#"),u(" Popup/Modal Example")],-1),P={class:"mb-4"};V.render=function(n,a,s,e,p,c){const o=r("simple"),u=r("popup");return i(),t("div",null,[j,l("div",M,[l(o)]),O,l("div",P,[l(u)])])};export default V;export{I as __pageData}; 2 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/_assets/index.md.ff5beefb.lean.js: -------------------------------------------------------------------------------- 1 | import{b as n,c as a,C as s,D as e,j as t,k as l,t as p,l as c,p as i,u as o,v as u,x as r,E as d}from"./common-af9ee497.js";const m=null!==document.ontouchstart?"click":"touchstart",k="__vue_click_away__",v=function(n,a,s){b(n);let e=s.context,t=a.value,l=!1;setTimeout((function(){l=!0}),0),n[k]=function(a){if((!n||!n.contains(a.target))&&t&&l&&"function"==typeof t)return t.call(e,a)},document.addEventListener(m,n[k],!1)},b=function(n){document.removeEventListener(m,n[k],!1),delete n[k]},h={install:function(n){n.directive("click-away",{mounted(n,a,s){v(n,a,s)},updated(n,a,s){!function(n,a,s){a.value!==a.oldValue&&v(n,a,s)}(n,a,s)},unmounted(n){b(n)}})}};var g={setup(){const s=n(null),e=a((()=>null===s.value?"Click Anywhere (Inside or Outside)":s.value?"You Clicked Outside":"You Clicked Inside"));return{outside:s,message:e,onClick:()=>{s.value=!1},onClickAway:()=>{s.value=!0}}},directives:{ClickAway:h}};const w=c("data-v-5d7790de")(((n,a,c,o,u,r)=>{const d=s("click-away");return e((i(),t("div",{class:"vca__container",onClick:a[1]||(a[1]=(...n)=>o.onClick(...n))},[l("h2",{class:[o.outside?"outside":"inside"],textContent:p(o.message)},null,10,["textContent"])],512)),[[d,o.onClickAway]])}));g.render=w,g.__scopeId="data-v-5d7790de";var y={setup(){const a=n(!1);return{open:a,onClick:()=>{a.value=!0},onClickAway:()=>{a.value=!1}}},directives:{ClickAway:h}};const x={key:0,class:"fixed z-10 inset-0 overflow-y-auto"},f={class:"flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"},C=l("div",{class:"fixed inset-0 transition-opacity"},[l("div",{class:"absolute inset-0 bg-gray-500 opacity-75"})],-1),A=l("span",{class:"hidden sm:inline-block sm:align-middle sm:h-screen"},null,-1),q=u("​ "),_={class:"inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6",role:"dialog","aria-modal":"true","aria-labelledby":"modal-headline"},E=l("div",null,[l("div",{class:"mt-3 text-center sm:mt-5"},[l("h3",{class:"text-lg leading-6 font-medium text-gray-900",id:"modal-headline"},"Click anywhere outside of the modal window to close it")])],-1);y.render=function(n,a,p,c,u,r){const d=s("click-away");return i(),t("div",null,[l("button",{class:"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2",type:"button",onClick:a[1]||(a[1]=(...n)=>c.onClick(...n))},"Open Modal"),c.open?(i(),t("div",x,[l("div",f,[C,A,q,e(l("div",_,[E],512),[[d,c.onClickAway]])])])):o("v-if",!0)])};var V={components:{Popup:y,Simple:g}};const I='{"title":"Vue Click Away","frontmatter":{},"headers":[{"level":2,"title":"Overview","slug":"overview"},{"level":2,"title":"Requirements","slug":"requirements"},{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Usage","slug":"usage"},{"level":3,"title":"Mixin","slug":"mixin"},{"level":2,"title":"Examples","slug":"examples"},{"level":3,"title":"Simple Example","slug":"simple-example"},{"level":3,"title":"Popup/Modal Example","slug":"popup-modal-example"}],"relativePath":"index.md","lastUpdated":1600710344537.8472}',j=d('

Vue Click Away

Overview

Detect if a click event happened outside of an element. Compatible with Vue 3.x.

Requirements

  • Vue 3.x

Installation

npm i vue3-click-away\n
1
yarn add vue3-click-away\n
1

Usage

TIP

By default the module exports a directive, you can also use this as a mixin which is documented below.

<template>\n  <div v-click-away="onClickAway">\n    ...\n  </div>\n</template>\n
1
2
3
4
5
import VueClickAway from "vue3-click-away";\nexport default {\n  directives: {\n    ClickAway: VueClickAway,\n  },\n  methods: {\n    onClickAway(event) {\n      console.log(event);\n    }\n  }\n}\n
1
2
3
4
5
6
7
8
9
10
11

Mixin

<template>\n  <div v-click-away="onClickAway">\n    ...\n  </div>\n</template>\n
1
2
3
4
5
import { mixin as VueClickAway } from "vue3-click-away";\nexport default {\n  mixins: [VueClickAway],\n  methods: {\n    onClickAway(event) {\n      console.log(event);\n    }\n  }\n}\n
1
2
3
4
5
6
7
8
9

Examples

Simple Example

',17),M={class:"mb-4"},O=l("h3",{id:"popup-modal-example"},[l("a",{class:"header-anchor",href:"#popup-modal-example","aria-hidden":"true"},"#"),u(" Popup/Modal Example")],-1),P={class:"mb-4"};V.render=function(n,a,s,e,p,c){const o=r("simple"),u=r("popup");return i(),t("div",null,[j,l("div",M,[l(o)]),O,l("div",P,[l(u)])])};export default V;export{I as __pageData}; 2 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/_assets/style.910c7711.css: -------------------------------------------------------------------------------- 1 | .debug[data-v-5c157e32]{box-sizing:border-box;position:fixed;right:8px;bottom:8px;z-index:9999;border-radius:4px;width:74px;height:32px;color:#eee;overflow:hidden;cursor:pointer;background-color:rgba(0,0,0,.85);transition:.15s}.debug[data-v-5c157e32]:hover{background-color:rgba(0,0,0,.75)}.debug.open[data-v-5c157e32]{right:0;bottom:0;width:100%;height:100%;margin-top:0;border-radius:0;padding:0;overflow:scroll}@media (min-width:512px){.debug.open[data-v-5c157e32]{width:512px}}.debug.open[data-v-5c157e32]:hover{background-color:rgba(0,0,0,.85)}.title[data-v-5c157e32]{margin:0;padding:6px 16px;line-height:20px;font-size:13px}.block[data-v-5c157e32]{margin:2px 0 0;border-top:1px solid rgba(255,255,255,.16);padding:8px 16px;font-family:Hack,monospace;font-size:13px}.block+.block[data-v-5c157e32]{margin-top:8px}:root{--c-white:#ffffff;--c-black:#000000;--c-divider-light:rgba(60, 60, 67, .12);--c-divider-dark:rgba(84, 84, 88, .48);--c-text-light-1:#2c3e50;--c-text-light-2:#476582;--c-brand:#3eaf7c;--font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-family-mono:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace;--z-index-navbar:1100;--z-index-sidebar:1000;--header-height:3.6rem;--c-divider:var(--c-divider-light);--c-text:var(--c-text-light-1);--c-text-light:var(--c-text-light-2);--c-bg:var(--c-white);--code-line-height:24px;--code-font-family:var(--font-family-mono);--code-font-size:14px;--code-inline-bg-color:rgba(27, 31, 35, .05);--code-bg-color:#282c34}*,::after,::before{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:1.4;font-family:var(--font-family-base);font-size:16px;font-weight:400;color:var(--c-text);background-color:var(--c-bg);direction:ltr;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.25}b,h1,h2,h3,h4,h5,h6,strong{font-weight:600}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{margin-top:1.5rem;font-size:1.9rem}@media screen and (min-width:420px){h1{font-size:2.2rem}}h2{border-bottom:1px solid var(--c-divider);padding-bottom:.3rem;line-height:1.25;font-size:1.65rem;margin-top:20px;margin-bottom:20px}h2+h3{margin-top:1.5rem}h3{margin-top:2rem;font-size:1.35rem}h4{font-size:1.15rem}ol,p,ul{margin:1rem 0;line-height:1.7}[role=button],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}a{text-decoration:none;color:var(--c-brand)}a:hover{text-decoration:underline}a.header-anchor{float:left;margin-top:.125em;margin-left:-.87em;padding-right:.23em;font-size:.85em;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}img{max-width:100%}ol,ul{padding-left:1.25em}blockquote>p,li>ol,li>ul{margin:0}table{display:block;border-collapse:collapse;margin:1rem 0;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}blockquote{margin:1rem 0;border-left:.2rem solid #dfe2e5;padding:.25rem 0 .25rem 1rem;font-size:1rem;color:#999}.theme{font-size:16px;color:var(--c-text)}.theme .navbar{position:fixed;top:0;left:0;right:0;height:var(--header-height);background-color:#fff;border-bottom:1px solid var(--c-divider);z-index:var(--z-index-navbar);display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.5rem}.theme.sidebar-open .sidebar-mask{display:block}.theme.no-navbar>h1,.theme.no-navbar>h2,.theme.no-navbar>h3,.theme.no-navbar>h4,.theme.no-navbar>h5,.theme.no-navbar>h6{margin-top:1.5rem;padding-top:0}.theme.no-navbar aside{top:0}.sidebar-mask{z-index:2;position:fixed;width:100vw;height:100vh;display:none}.theme main{padding-top:var(--header-height)}@media screen and (min-width:960px){.theme main{padding-left:20rem}}@media screen and (min-width:720px){.theme.no-sidebar aside{display:none}.theme.no-sidebar main{margin-left:0}}@media screen and (max-width:959px){.theme aside{width:var(--sidebar-width)}.theme main{margin-left:16.4rem}}@media screen and (max-width:719px){.theme .navbar{padding-left:4rem}.theme main{margin-left:0}}.theme main.home{padding:var(--header-height) 2rem 0;max-width:960px;margin:0 auto;display:block}@media screen and (max-width:429px){.theme main.home{padding-left:1.5rem;padding-right:1.5rem}}code{margin:0;border-radius:3px;padding:.25rem .5rem;font-family:var(--code-font-family);font-size:var(--code-font-size);color:var(--c-text-light);background-color:var(--code-inline-bg-color)}code .token.deleted{color:#ec5975}code .token.inserted{color:var(--c-brand)}div[class*=language-]{position:relative;margin:1rem -1.5rem;background-color:var(--code-bg-color)}li>div[class*=language-]{border-radius:6px 0 0 6px;margin:1rem -1.5rem 1rem -1.25rem}@media (min-width:420px){div[class*=language-],li>div[class*=language-]{margin:1rem 0;border-radius:6px}}[class*=language-] code,[class*=language-] pre{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}[class*=language-] pre{position:relative;z-index:1;margin:0;padding:1.25rem 1.5rem;background:0 0;overflow-x:auto}[class*=language-] code{padding:0;line-height:var(--code-line-height);font-size:var(--code-font-size);color:#eee}.highlight-lines{position:absolute;top:0;bottom:0;left:0;padding:1.25rem 0;width:100%;line-height:var(--code-line-height);font-family:var(--code-font-family);font-size:var(--code-font-size);user-select:none}.highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode{padding-left:3.5rem}.line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid rgba(0,0,0,.5);padding:1.25rem 0;width:3.5rem;text-align:center;line-height:var(--code-line-height);font-family:var(--code-font-family);font-size:var(--code-font-size);color:#888}[class*=language-]:before{position:absolute;top:.6em;right:1em;z-index:2;font-size:.8rem;color:#888}[class~=language-html]:before,[class~=language-markup]:before{content:'html'}[class~=language-markdown]:before,[class~=language-md]:before{content:'md'}[class~=language-css]:before{content:'css'}[class~=language-sass]:before{content:'sass'}[class~=language-scss]:before{content:'scss'}[class~=language-less]:before{content:'less'}[class~=language-stylus]:before{content:'styl'}[class~=language-js]:before,[class~=language-typescript]:before{content:'js'}[class~=language-ts]:before,[class~=language-typescript]:before{content:'ts'}[class~=language-json]:before{content:'json'}[class~=language-rb]:before,[class~=language-ruby]:before{content:'rb'}[class~=language-py]:before,[class~=language-python]:before{content:'py'}[class~=language-bash]:before,[class~=language-sh]:before{content:'sh'}[class~=language-php]:before{content:'php'}[class~=language-go]:before{content:'go'}[class~=language-rust]:before{content:'rust'}[class~=language-java]:before{content:'java'}[class~=language-c]:before{content:'c'}[class~=language-yaml]:before{content:'yaml'}[class~=language-dockerfile]:before{content:'dockerfile'}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.custom-block.danger,.custom-block.tip,.custom-block.warning{margin:1rem 0;border-left:.5rem solid;padding:.1rem 1.5rem}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{border-color:#e7c000;color:#6b5900;background-color:rgba(255,229,100,.3)}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:var(--c-text)}.custom-block.danger{border-color:#c00;color:#4d0000;background-color:#ffe6e6}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:var(--c-text)}.custom-block.details{position:relative;display:block;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:0;cursor:pointer}.custom-block-title{margin-bottom:-.4rem;font-weight:600}.sidebar-links{margin:0;padding:0;list-style:none}.sidebar-link-item{display:block;margin:0;border-left:.25rem solid transparent;color:var(--c-text)}a.sidebar-link-item:hover{text-decoration:none;color:var(--c-brand)}a.sidebar-link-item.active{color:var(--c-brand)}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>.sidebar-link+.sidebar-link{padding-top:1rem}.sidebar>.sidebar-links>.sidebar-link>.sidebar-link-item{padding:.35rem 1.5rem .35rem 1.25rem;font-size:1.1rem;font-weight:700}.sidebar>.sidebar-links>.sidebar-link>a.sidebar-link-item.active{border-left-color:var(--c-brand);font-weight:600}.sidebar>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-link-item{display:block;padding:.35rem 1.5rem .35rem 2rem;line-height:1.4;font-size:1rem;font-weight:400}.sidebar>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>a.sidebar-link-item.active{border-left-color:var(--c-brand);font-weight:600}.sidebar>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-link-item{display:block;padding:.3rem 1.5rem .3rem 3rem;line-height:1.4;font-size:.9rem;font-weight:400}.sidebar>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-link-item{display:block;padding:.3rem 1.5rem .3rem 4rem;line-height:1.4;font-size:.9rem;font-weight:400}.nav-bar-title[data-v-57d278f5]{font-size:1.3rem;font-weight:600;color:var(--c-text)}.nav-bar-title[data-v-57d278f5]:hover{text-decoration:none}.logo[data-v-57d278f5]{margin-right:.75rem;height:1.3rem;vertical-align:bottom}.icon{position:relative;top:-1px;display:inline-block;color:#aaa;vertical-align:middle}.navbar-link[data-v-48f5fb8c]{position:relative;padding:0 1.5rem}.item[data-v-48f5fb8c]{display:block;margin-bottom:-2px;line-height:40px;font-size:1rem;font-weight:600;color:var(--c-text);white-space:nowrap}.item.active[data-v-48f5fb8c],.item[data-v-48f5fb8c]:hover{text-decoration:none;color:var(--c-brand)}@media (min-width:720px){.navbar-link[data-v-48f5fb8c]{padding:0}.dropdown-wrapper+.navbar-link[data-v-48f5fb8c],.navbar-link+.navbar-link[data-v-48f5fb8c]{padding-left:1.5rem}.item[data-v-48f5fb8c]{border-bottom:2px solid transparent;line-height:1.5rem;font-size:.9rem;font-weight:500}.item.active[data-v-48f5fb8c],.item[data-v-48f5fb8c]:hover{color:var(--c-text);border-bottom-color:var(--c-brand)}.item.external[data-v-48f5fb8c]:hover{border-bottom-color:transparent}}.dropdown-wrapper{position:relative;cursor:pointer;display:block;margin-left:1.5rem;height:1.8rem}.dropdown-wrapper .dropdown-title{font:inherit;color:var(--c-text);font-size:.9rem;font-weight:500;display:inline-block;height:1.75rem;line-height:1.75rem;padding:inherit;background:0 0;border:none}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{display:inline-block;vertical-align:middle;margin-top:-1px;margin-left:.4rem;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #aaa;border-bottom:0}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .nav-item{margin-left:.5rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;margin-left:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:var(--c-brand)}.dropdown-wrapper .nav-dropdown .dropdown-item a.active::after{content:'';width:0;height:0;border-left:5px solid var(--c-brand);border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 1.5px);left:8px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block}.dropdown-wrapper.open:blur{display:none}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}@media screen and (max-width:719px){.dropdown-wrapper{height:auto;margin-left:1.5rem}.dropdown-wrapper .dropdown-title{font-size:1rem;font-weight:600}.dropdown-wrapper .nav-dropdown{position:relative;top:none;right:none;border:none;padding:4px 0;background-color:transparent}.dropdown-wrapper:hover .nav-dropdown{display:none}.dropdown-wrapper.open .nav-dropdown{display:block}.dropdown-wrapper .nav-dropdown .dropdown-item .nav-item{margin:0;padding:0}.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link{font-size:.9rem}}.navbar-links[data-v-623c19fe]{padding:1rem 0;border-bottom:1px solid var(--c-divider)}@media (min-width:720px){.navbar-links[data-v-623c19fe]{display:flex;align-items:center;border-bottom:0}}.flex-grow[data-v-9c89b7e6]{flex-grow:1}.nav[data-v-9c89b7e6]{display:none}@media (min-width:720px){.nav[data-v-9c89b7e6]{display:block}}.hero[data-v-6126bc1a]{text-align:center}.hero img[data-v-6126bc1a]{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.hero h1[data-v-6126bc1a]{font-size:3rem}.hero .action[data-v-6126bc1a],.hero .description[data-v-6126bc1a],.hero h1[data-v-6126bc1a]{margin:1.8rem auto}.hero .description[data-v-6126bc1a]{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}[data-v-6126bc1a] .nav-link{display:inline-block;font-size:1.2rem;color:#fff;background-color:var(--c-brand);margin-left:0;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s;box-sizing:border-box;border-bottom:1px solid #389d70}[data-v-6126bc1a] .nav-link:hover{background-color:#4abf8a}.features[data-v-6126bc1a]{border-top:1px solid var(--c-divider);padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.feature[data-v-6126bc1a]{flex-grow:1;flex-basis:30%;max-width:30%}.feature h2[data-v-6126bc1a]{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.feature p[data-v-6126bc1a]{color:#4e6e8e}.footer[data-v-6126bc1a]{padding:2.5rem;border-top:1px solid var(--c-divider);text-align:center;color:#4e6e8e}@media screen and (max-width:429px){.hero img[data-v-6126bc1a]{max-height:210px;margin:2rem auto 1.2rem}.hero h1[data-v-6126bc1a]{font-size:2rem}.hero .action[data-v-6126bc1a],.hero .description[data-v-6126bc1a],.hero h1[data-v-6126bc1a]{margin:1.2rem auto}.hero .description[data-v-6126bc1a]{font-size:1.2rem}.hero .action-button[data-v-6126bc1a]{font-size:1rem;padding:.6rem 1.2rem}.feature h2[data-v-6126bc1a]{font-size:1.25rem}}.sidebar-button{position:absolute;top:.6rem;left:1rem;display:none;padding:.6rem;cursor:pointer}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media screen and (max-width:719px){.features[data-v-6126bc1a]{flex-direction:column}.feature[data-v-6126bc1a]{max-width:100%;padding:0 2.5rem}.sidebar-button{display:block}}.sidebar[data-v-096875e2]{position:fixed;top:var(--header-height);bottom:0;left:0;z-index:var(--z-index-sidebar);border-right:1px solid var(--c-divider);width:16.4rem;background-color:var(--c-bg);overflow-y:auto;transform:translateX(-100%);transition:transform .25s}.sidebar.open[data-v-096875e2]{transform:translateX(0)}.nav[data-v-096875e2]{display:block}@media (min-width:720px){.sidebar[data-v-096875e2]{transform:translateX(0)}.nav[data-v-096875e2]{display:none}}.link[data-v-a83574f8]{display:inline-block;font-size:1rem;font-weight:500;color:var(--c-text-light)}.link[data-v-a83574f8]:hover{text-decoration:none;color:var(--c-brand)}.icon[data-v-a83574f8]{margin-left:4px}.last-updated[data-v-d5f61e8a]{display:inline-block;margin:0;line-height:1.4;font-size:.9rem;color:var(--c-text-light)}.prefix[data-v-d5f61e8a]{display:inline-block;font-weight:500}.datetime[data-v-d5f61e8a]{display:inline-block;margin-left:6px;font-weight:400}.page-footer[data-v-ae772eca]{padding-top:1rem;padding-bottom:1rem;overflow:auto}.updated[data-v-ae772eca]{padding-top:4px}@media (min-width:960px){.sidebar[data-v-096875e2]{width:20rem}.last-updated[data-v-d5f61e8a]{font-size:1rem}.page-footer[data-v-ae772eca]{display:flex;justify-content:space-between;align-items:center}.updated[data-v-ae772eca]{padding-top:0}}.next-and-prev-link[data-v-e91280cc]{padding-top:1rem}.container[data-v-e91280cc]{display:flex;justify-content:space-between;border-top:1px solid var(--c-divider);padding-top:1rem}.next[data-v-e91280cc],.prev[data-v-e91280cc]{display:flex;flex-shrink:0;width:50%}.prev[data-v-e91280cc]{justify-content:flex-start;padding-right:12px}.next[data-v-e91280cc]{justify-content:flex-end;padding-left:12px}.link[data-v-e91280cc]{display:inline-flex;align-items:center;max-width:100%;font-size:1rem;font-weight:500}.text[data-v-e91280cc]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon[data-v-e91280cc]{display:block;flex-shrink:0;width:16px;height:16px;fill:var(--c-text);transform:translateY(1px)}.icon-prev[data-v-e91280cc]{margin-right:8px}.icon-next[data-v-e91280cc]{margin-left:8px}.page[data-v-3517865e]{margin:0 auto;padding:0 1.5rem 4rem;max-width:48rem}.content[data-v-3517865e]{padding-bottom:1.5rem}.vca__container[data-v-5d7790de]{padding:10px;border:2px dashed red}h2[data-v-5d7790de]{cursor:pointer;border-bottom:none;text-align:center} -------------------------------------------------------------------------------- /docs/.vitepress/module.js: -------------------------------------------------------------------------------- 1 | const clickEventType = document.ontouchstart !== null ? "click" : "touchstart"; 2 | const UNIQUE_ID = "__vue_click_away__"; 3 | 4 | const onMounted = function (el, binding, vnode) { 5 | onUnmounted(el); 6 | let vm = vnode.context; 7 | let callback = binding.value; 8 | let nextTick = false; 9 | setTimeout(function () { 10 | nextTick = true; 11 | }, 0); 12 | 13 | el[UNIQUE_ID] = function (event) { 14 | if ((!el || !el.contains(event.target)) && callback && nextTick && typeof callback === "function") { 15 | return callback.call(vm, event); 16 | } 17 | }; 18 | 19 | document.addEventListener(clickEventType, el[UNIQUE_ID], false); 20 | }; 21 | 22 | const onUnmounted = function (el) { 23 | document.removeEventListener(clickEventType, el[UNIQUE_ID], false); 24 | delete el[UNIQUE_ID]; 25 | }; 26 | 27 | const onUpdated = function (el, binding, vnode) { 28 | if (binding.value === binding.oldValue) { 29 | return; 30 | } 31 | 32 | onMounted(el, binding, vnode); 33 | }; 34 | 35 | const plugin = { 36 | install: function (app) { 37 | app.directive('click-away', directive); 38 | } 39 | }; 40 | const directive = { 41 | mounted: onMounted, 42 | updated: onUpdated, 43 | unmounted: onUnmounted 44 | }; 45 | const mixin = { 46 | directives: { 47 | ClickAway: directive 48 | } 49 | }; 50 | 51 | export default plugin; 52 | export { directive, mixin }; 53 | //# sourceMappingURL=module.js.map 54 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | # Vue Click Away 2 | 3 | ## Overview 4 | 5 | Detect if a click event happened outside of an element. Compatible with Vue 3.x. 6 | 7 | ## Requirements 8 | 9 | - Vue 3.x 10 | 11 | ## Installation 12 | 13 |
14 | 15 | ``` 16 | npm i vue3-click-away 17 | ``` 18 | 19 |
20 | 21 | 22 |
23 | 24 | ``` 25 | yarn add vue3-click-away 26 | ``` 27 |
28 | 29 | ## Usage 30 | 31 | :::tip 32 | By default the module exports a plugin, but you can also use this as a mixin which is documented below or as a directive. 33 | ::: 34 | 35 |
36 | 37 | ```js 38 | import { createApp } from "vue"; 39 | import App from "./App.vue"; 40 | import VueClickAway from "vue3-click-away"; 41 | 42 | const app = createApp(App); 43 | 44 | app.use(VueClickAway) 45 | app.mount('#app') 46 | ``` 47 |
48 | 49 |
50 | 51 | ```vue 52 | 57 | 58 | 67 | ``` 68 |
69 | 70 | or with Vue Composition API & Typescript 71 | 72 |
73 | 74 | ```vue 75 | 80 | 81 | 94 | ``` 95 |
96 | 97 | ### Directive 98 | 99 | ```html 100 | 105 | ``` 106 | 107 |

108 | 109 | ```js 110 | import { directive } from "vue3-click-away"; 111 | export default { 112 | directives: { 113 | ClickAway: directive 114 | }, 115 | methods: { 116 | onClickAway(event) { 117 | console.log(event); 118 | } 119 | } 120 | } 121 | ``` 122 | 123 | ### Mixin 124 | 125 |
126 | 127 | ```html 128 | 133 | ``` 134 |
135 | 136 | 137 |
138 | 139 | ```js 140 | import { mixin as VueClickAway } from "vue3-click-away"; 141 | export default { 142 | mixins: [VueClickAway], 143 | methods: { 144 | onClickAway(event) { 145 | console.log(event); 146 | } 147 | } 148 | } 149 | ``` 150 |
151 | 152 | ## Examples 153 | 154 | ### Simple Example 155 | 156 |
157 | 158 |
159 | 160 | ### Popup/Modal Example 161 | 162 |
163 | 164 |
165 | 166 | 176 | 177 | 183 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const clickEventType = () => { 2 | return document.ontouchstart !== null ? "click" : "touchstart"; 3 | }; 4 | 5 | const UNIQUE_ID = "__vue_click_away__"; 6 | 7 | const onMounted = (el, binding, vnode) => { 8 | onUnmounted(el); 9 | 10 | let vm = vnode.context; 11 | let callback = binding.value; 12 | 13 | let nextTick = false; 14 | setTimeout(function () { 15 | nextTick = true; 16 | }, 0); 17 | 18 | el[UNIQUE_ID] = (event) => { 19 | if ( 20 | (!el || !el.contains(event.target)) && 21 | callback && 22 | nextTick && 23 | typeof callback === "function" 24 | ) { 25 | return callback.call(vm, event); 26 | } 27 | }; 28 | 29 | document.addEventListener(clickEventType(), el[UNIQUE_ID], false); 30 | }; 31 | 32 | const onUnmounted = (el) => { 33 | document.removeEventListener(clickEventType(), el[UNIQUE_ID], false); 34 | delete el[UNIQUE_ID]; 35 | }; 36 | 37 | const onUpdated = (el, binding, vnode) => { 38 | if (binding.value === binding.oldValue) { 39 | return; 40 | } 41 | onMounted(el, binding, vnode); 42 | }; 43 | 44 | const plugin = { 45 | install: (app) => { 46 | app.directive('click-away', directive) 47 | } 48 | } 49 | 50 | const directive = { 51 | mounted: onMounted, 52 | updated: onUpdated, 53 | unmounted: onUnmounted, 54 | }; 55 | 56 | const mixin = { 57 | directives: { ClickAway: directive }, 58 | }; 59 | 60 | export { 61 | directive, 62 | mixin 63 | } 64 | 65 | export default plugin; 66 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-click-away", 3 | "version": "1.2.4", 4 | "description": "Vue 3.0 Compatible Click Away Directive", 5 | "main": "dist/common.js", 6 | "module": "dist/module.js", 7 | "typings": "dist/types/index.d.ts", 8 | "types": "dist/types/index.d.ts", 9 | "files": [ 10 | "dist" 11 | ], 12 | "scripts": { 13 | "build": "rollup -c", 14 | "docs:dev": "vitepress dev docs", 15 | "docs:build": "vitepress build docs", 16 | "docs:serve": "vitepress serve docs" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/VinceG/vue-click-away.git" 21 | }, 22 | "keywords": [ 23 | "vue", 24 | "vue.js", 25 | "vue3", 26 | "3.0", 27 | "clickaway", 28 | "outside", 29 | "click", 30 | "away", 31 | "clickoutside" 32 | ], 33 | "author": { 34 | "name": "Vincent Gabriel", 35 | "email": "vadimg88@gmail.com", 36 | "url": "https://github.com/vinceg" 37 | }, 38 | "contributors": [ 39 | { 40 | "name": "Denis Karabaza", 41 | "email": "denis.karabaza@gmail.com", 42 | "url": "https://github.com/simplesmiler" 43 | } 44 | ], 45 | "license": "MIT", 46 | "bugs": { 47 | "url": "https://github.com/VinceG/vue-click-away/issues" 48 | }, 49 | "homepage": "https://github.com/VinceG/vue-click-away#readme", 50 | "devDependencies": { 51 | "@babel/core": "^7.11.6", 52 | "@babel/plugin-transform-arrow-functions": "^7.10.4", 53 | "rollup": "^2.27.1", 54 | "rollup-plugin-babel": "^4.4.0", 55 | "rollup-plugin-copy": "^3.3.0", 56 | "vitepress": "^0.9.0" 57 | }, 58 | "dependencies": {} 59 | } 60 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from "./package.json"; 2 | import copy from "rollup-plugin-copy"; 3 | import babel from "rollup-plugin-babel" 4 | 5 | export default [ 6 | { 7 | input: "index.js", 8 | output: [ 9 | { 10 | file: pkg.main, 11 | format: "cjs", 12 | exports: "named", 13 | sourcemap: true, 14 | }, 15 | { 16 | file: pkg.module, 17 | format: "es", 18 | sourcemap: true, 19 | } 20 | ], 21 | plugins: [ 22 | babel({ 23 | exclude: "node_modules/**", 24 | plugins: ['@babel/plugin-transform-arrow-functions'] 25 | }), 26 | copy({ 27 | targets: [ 28 | { src: "types/*", dest: "dist/types" }, 29 | { src: "dist/module.js", dest: "docs/.vitepress" }, 30 | ], 31 | }), 32 | ], 33 | }, 34 | ]; 35 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Plugin } from "vue"; 2 | 3 | declare const VueClickAwayPlugin: Plugin; 4 | 5 | declare const directive: Directive; 6 | declare const mixin: { 7 | directives: { 8 | ClickAway: Directive; 9 | }; 10 | }; 11 | 12 | export { mixin, directive }; 13 | export default VueClickAwayPlugin; 14 | --------------------------------------------------------------------------------