Hide visibility popover on click outside of element

client/src/components/ContentBlock.vue

@@ -6,6 +6,7 @@
           <eye-icon class="content-block__action-icon"></eye-icon>
         </a>
         <visibility-popover
+          @hide-me="showVisibility = false"
           :show="showVisibility"
           :content-block="contentBlock"
           class="content-block__visibility-menu"

client/src/components/VisibilityPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="visibility-menu" v-if="show">
+  <div class="visibility-menu" v-if="show" v-click-outside="hideVisibility">
     <h3 class="visibility-menu__title">Sichtbarkeit</h3>
     <div v-for="schoolClass in schoolClassVisibility" :key="schoolClass.id" class="visibility-menu__item">
       <checkbox :checked="!schoolClass.hidden"
@@ -58,7 +58,11 @@
             }
           }
         });
+      },
+      hideVisibility() {
+        this.$emit('hide-me');
       }
+
     },
 
     computed: {

client/src/main.js

@@ -40,10 +40,24 @@ Vue.use(VueAxios, axios);
 Vue.use(VueVimeoPlayer);
 
 Vue.use(VueScrollTo, {
-     duration: 500,
-     easing: 'ease-out',
-     offset: -50
- });
+  duration: 500,
+  easing: 'ease-out',
+  offset: -50
+});
+
+Vue.directive('click-outside', {
+  bind(el, binding, vnode) {
+    el.clickOutsideEvent = event => {
+      if (!(el === event.target || el.contains(event.target))) {
+        vnode.context[binding.expression](event);
+      }
+    };
+    document.body.addEventListener('click', el.clickOutsideEvent);
+  },
+  unbind(el) {
+    document.body.removeEventListener('click', el.clickOutsideEvent)
+  }
+});
 
 const apolloProvider = new VueApollo({
   defaultClient: apolloClient