Outside click directive

ui/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown show" ref="dropdownMenu">
+  <div class="dropdown show" ref="dropdownMenu" v-on-outside-click="hideDropdown">
       <button
         :id="_uid"
         class="btn btn-sm btn-light dropdown-toggle"
@@ -28,27 +28,17 @@ export default {
   data() {
     return {
       isShown: false
-    }
+    };
   },
-  methods:{
-      documentClick(e) {
-        let el = this.$refs.dropdownMenu;
-        let target = e.target;
-        if ((el !== target) && (!el.contains(target))) {
-          this.isShown = false;
-        }
-      }
-    },
-    created () {
-      document.addEventListener('click', this.documentClick);
-    },
-    destroyed () {
-      document.removeEventListener('click', this.documentClick);
+  methods: {
+    hideDropdown() {
+      this.isShown = false;
     }
+  }
 };
 </script>
 <style lang="scss">
-@import "../styles/variables.scss";
+@import '../styles/variables.scss';
 $dropdown-link-active-bg: $gray-300;
 
 .dropdown-item {
@@ -57,5 +47,4 @@ $dropdown-link-active-bg: $gray-300;
     @include gradient-bg($dropdown-link-active-bg);
   }
 }
-
 </style>

ui/plugins/frappeVue.js

@@ -11,6 +11,7 @@ import Button from '../components/Button';
 import Indicator from '../components/Indicator';
 import modalPlugin from '../components/Modal/plugin';
 import formModalPlugin from '../plugins/formModal';
+import outsideClickDirective from './outsideClickDirective';
 
 export default function installFrappePlugin(Vue) {
   Vue.component('not-found', NotFound);
@@ -18,6 +19,7 @@ export default function installFrappePlugin(Vue) {
   Vue.component('frappe-control', FrappeControl);
   Vue.component('f-button', Button);
   Vue.component('indicator', Indicator);
+  Vue.directive('on-outside-click', outsideClickDirective);
 
   Vue.use(modalPlugin);
   Vue.use(formModalPlugin);

ui/plugins/outsideClickDirective.js

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+
+let instances = [];
+
+function onDocumentClick(e, el, fn) {
+  let target = e.target;
+  if ((el !== target) && (!el.contains(target))) {
+    fn(e);
+  }
+}
+
+export default {
+  bind(el, binding) {
+    el.dataset.outsideClickIndex = instances.length;
+
+    const fn = binding.value;
+    const click = function (e) {
+      onDocumentClick(e, el, fn)
+    };
+
+    document.addEventListener('click', click);
+    instances.push(click);
+  },
+  unbind(el) {
+    const index = el.dataset.outsideClickIndex;
+    const handler = instances[index];
+    document.addEventListener('click', handler);
+    instances.splice(index, 1);
+  }
+};