feat: Use vueuse click outside directive

Author: Jasenkoo

package-lock.json

@@ -84,6 +84,7 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.6",
+    "@vueuse/core": "^13.0.0",
     "date-fns": "^4.1.0"
   },
   "peerDependencies": {

package.json

@@ -1,8 +1,8 @@
 import { onMounted, ref } from 'vue';
 import { offset, useFloating } from '@floating-ui/vue';
+import { onClickOutside } from '@vueuse/core';
 import { useContext } from '@packages/composables/useContext';
 import { DpRootKey } from '@packages/components/DpRoot';
-import { onClickOutside } from '@packages/directives/clickOutside';
 import type { DpMenuProps } from '@packages/components/DpMenu';
 
 export const useDpMenu = (props: DpMenuProps) => {
@@ -38,7 +38,7 @@ export const useDpMenu = (props: DpMenuProps) => {
         closeMenu();
     };
 
-    onClickOutside(menuRef, triggerRef, handleClickOutside);
+    onClickOutside(menuRef, handleClickOutside, { ignore: [triggerRef] });
 
     return { menuRef, floatingStyles, menuDisplay };
 };

src/packages/components/DpMenu/useDpMenu.ts

@@ -44,6 +44,7 @@ export const DpRoot = {
     setup(props: DpRootProps, { slots, attrs, emit }: SetupContext) {
         useRoot(props, emit);
 
+        // todo - expose global functions
         return () => h(props.as, { ...attrs }, slots.default?.());
     },
 };