feat: add use-click-outside hook

src/hooks/use-click-outside.ts

@@ -0,0 +1,23 @@
+import { Ref, onMounted } from 'vue';
+import { useHandler } from './use-handler';
+
+export type UseClickOutsideOpitons = {
+  event: string;
+  callback: EventListener;
+  element: Ref<Element>;
+  flag?: Ref<boolean>;
+};
+
+export function useClickOutside(options: UseClickOutsideOpitons) {
+  const { event = 'click', callback, element, flag } = options;
+
+  function onClick(event: Event) {
+    if (!element.value.contains(event.target as Node)) {
+      callback(event);
+    }
+  }
+
+  onMounted(() => {
+    useHandler(document, event, onClick, false, flag);
+  });
+}

src/hooks/use-handler.ts

@@ -9,16 +9,16 @@ import {
 } from 'vue';
 
 export function useHandler(
-  target: HTMLElement | Document | Window,
+  target: EventTarget,
   event: string,
-  handler: any,
+  handler: EventListener,
   passive = false,
-  ref?: Ref<boolean>
+  flag?: Ref<boolean>
 ) {
   let binded: boolean;
 
   function add() {
-    if (binded || (ref && !ref.value)) {
+    if (binded || (flag && !flag.value)) {
       return;
     }
 
@@ -33,9 +33,9 @@ export function useHandler(
     }
   }
 
-  if (ref) {
+  if (flag) {
     watch(() => {
-      ref.value ? add() : remove();
+      flag.value ? add() : remove();
     });
   }