feat: Added outside click directive

frappe/public/js/frappe/views/components/DeskModuleBox.vue

@@ -12,12 +12,14 @@
     <div class="flush-top">
       <div class="module-box-content">
         <div class="level">
-          <a class="module-box-link" :href="type === 'module' ? '#modules/' + module_name : link">
+          <div class="module-box-link">
             <h4 class="h4">
-              <i :class="icon" style="color:#8d99a6;font-size:18px;margin-right:6px;"></i>
-              {{ label }}
+              <a :href="type === 'module' ? '#modules/' + module_name : link">
+                <i :class="icon" style="color:#8d99a6;font-size:18px;margin-right:6px;"></i>
+                {{ label }}
+              </a>
             </h4>
-          </a>
+          </div>
           <dropdown v-if="links && links.length" :items="links">
             <span class="pull-right">
               <i class="octicon octicon-chevron-down"></i>
@@ -93,7 +95,6 @@ export default {
 .module-box {
   border-radius: 4px;
   padding: 5px 15px;
-  padding-top: 3px;
   display: block;
   background-color: #ffffff;
 }
@@ -102,7 +103,7 @@ export default {
   background-color: #fafbfc;
 }
 
-.octicon-three-bars:hover {
+.octicon-chevron-down:hover {
   cursor: pointer;
 }
 

frappe/public/js/frappe/views/components/Popover.vue

@@ -1,55 +1,77 @@
 <template>
-  <div
-    class="inline-block relative"
-    :class="{ 'w-full': this.fullwidth }"
-    v-on-outside-click="closePopover"
-  >
+  <div class="inline-block relative" :class="{ 'w-full': this.fullwidth }" v-outside="closePopover">
     <div @click="togglePopover">
       <slot :togglePopover="togglePopover" :closePopover="closePopover"></slot>
     </div>
-    <div
-      v-show="isOpen"
-      class="absolute mt-default z-20"
-      :class="popoverClasses"
-    >
+    <div v-show="isOpen" class="absolute mt-default z-20" :class="popoverClasses">
       <slot name="popover-content"></slot>
     </div>
   </div>
 </template>
 <script>
+let instances = [];
+
+function onDocumentClick(e, el, fn) {
+  let target = e.target;
+  if (el !== target && !el.contains(target)) {
+    fn(e);
+  }
+}
+
 export default {
-  name: 'Popover',
+  name: "Popover",
   props: {
     align: {
-      default: 'left',
+      default: "left"
     },
     fullwidth: {
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
-      isOpen: false,
+      isOpen: false
+    };
+  },
+  directives: {
+    outside: {
+      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);
+      }
     }
   },
   computed: {
     popoverClasses() {
       return {
-        'pin-r': this.align === 'right',
-        'pin-l': this.align === 'left',
-        'w-full': this.fullwidth === true,
-      }
-    },
+        "pin-r": this.align === "right",
+        "pin-l": this.align === "left",
+        "w-full": this.fullwidth === true
+      };
+    }
   },
   methods: {
     togglePopover() {
-      this.isOpen = !this.isOpen
+      this.isOpen = !this.isOpen;
     },
     closePopover() {
-      this.isOpen = false
-    },
-  },
-}
+      this.isOpen = false;
+    }
+  }
+};
 </script>
 <style scoped>
 .relative {