🚚 Moves ClickOutside into directives directory

src/directives/ClickOutside.js

@@ -0,0 +1,41 @@
+/**
+ * A Vue directive to trigger an event when the user
+ * clicks anywhere other than the specified elements
+ * Used to close context menus popup modals and tips
+ * Dashy: Licensed under MIT - (C) Alicia Sykes 2022
+ */
+
+const instances = []; // List of click event instances
+
+/* Trigger action when click anywhere, except target elem */
+function onDocumentClick(event, elem, action) {
+  const { target } = event;
+  if (elem !== target && !elem.contains(target)) {
+    action(event);
+  }
+}
+
+export default {
+  /* Add event listeners */
+  bind(element, binding) {
+    const elem = element;
+    elem.dataset.outsideClickIndex = instances.length;
+
+    const action = binding.value;
+    const click = (event) => {
+      onDocumentClick(event, elem, action);
+    };
+
+    document.addEventListener('click', click);
+    document.addEventListener('touchstart', click);
+    instances.push(click);
+  },
+  /* Remove event listeners */
+  unbind(elem) {
+    if (!elem.dataset) return;
+    const index = elem.dataset.outsideClickIndex;
+    const handler = instances[index];
+    document.removeEventListener('click', handler);
+    instances.splice(index, 1);
+  },
+};

src/main.js

@@ -16,9 +16,9 @@ import Dashy from '@/App.vue';          // Main Dashy Vue app
 import router from '@/router';          // Router, for navigation
 import store from '@/store';            // Store, for local state management
 import serviceWorker from '@/utils/InitServiceWorker'; // Service worker initialization
-import clickOutside from '@/utils/ClickOutside';      // Directive for closing popups, modals, etc
 import { messages } from '@/utils/languages';         // Language texts
 import ErrorReporting from '@/utils/ErrorReporting';  // Error reporting initializer (off)
+import clickOutside from '@/directives/ClickOutside'; // Directive for closing popups, modals, etc
 import { toastedOptions, tooltipOptions, language as defaultLanguage } from '@/utils/defaults';
 import { initKeycloakAuth, isKeycloakEnabled } from '@/utils/KeycloakAuth';