refactor: clickOutside directive change, ref (#30)

Author: Jasenkoo

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -1,6 +1,7 @@
 <template>
     <div :class="wrapperClass">
         <DatepickerInput
+            ref="inputRef"
             v-bind="{
                 placeholder,
                 hideInputIcon,
@@ -29,7 +30,7 @@
         <teleport :to="teleport" :disabled="inline" v-if="isOpen">
             <DatepickerMenu
                 v-if="isOpen"
-                v-click-outside-directive.dp__menu="closeMenu"
+                ref="dpMenuRef"
                 :class="theme"
                 :style="menuPosition"
                 v-bind="{
@@ -113,13 +114,14 @@
         WeekStartNum,
         WeekStartStr,
     } from './interfaces';
-    import { clickOutsideDirective as vClickOutsideDirective } from './directives/clickOutside';
+    // import { clickOutsideDirective as vClickOutsideDirective } from './directives/clickOutside';
     import { getDateHours, getDateMinutes, getDefaultPattern } from './utils/date-utils';
     import { getDefaultTextInputOptions, getDefaultFilters } from './utils/util';
     import { usePosition } from './components/composition/position';
     import { useExternalInternalMapper } from './components/composition/external-internal-mapper';
     import { isString } from './utils/type-guard';
     import { mapSlots } from './components/composition/slots';
+    import { onClickOutside } from './directives/clickOutside';
 
     const emit = defineEmits(['update:modelValue', 'textSubmit', 'closed', 'cleared']);
     const props = defineProps({
@@ -197,6 +199,8 @@
     const slots = useSlots();
     const isOpen = ref(false);
     const modelValue = toRef(props, 'modelValue');
+    const dpMenuRef = ref(null);
+    const inputRef = ref(null);
 
     onMounted(() => {
         parseExternalModelValue(props.modelValue);
@@ -398,6 +402,8 @@
         }
     };
 
+    onClickOutside(dpMenuRef, inputRef, closeMenu);
+
     defineExpose({
         closeMenu,
         selectDate,

src/Vue3DatePicker/directives/clickOutside.ts

@@ -1,42 +1,82 @@
-import { DirectiveBinding } from 'vue';
-
-interface CustomHTMLElement extends Partial<HTMLElement> {
-    clickOutsideEvent: (ev: MouseEvent) => void;
-    contains: (param: unknown) => boolean;
-}
-
-export const clickOutsideDirective = {
-    beforeMount(el: CustomHTMLElement, binding: DirectiveBinding): void {
-        const em = binding.instance;
-        const sameEl = Object.keys(binding.modifiers);
-
-        el.clickOutsideEvent = (event: MouseEvent) => {
-            const path = event.composedPath ? event.composedPath() : undefined;
-
-            if (em && path && !path.includes(em.$el)) {
-                if (sameEl.length > 0) {
-                    if (
-                        !sameEl.some((className) =>
-                            path.some((elm) => {
-                                if ((elm as Element).className && typeof (elm as Element)?.className === 'string') {
-                                    return (elm as Element).className.includes(className);
-                                }
-                            }),
-                        )
-                    ) {
-                        binding.value(event, el);
-                    }
-                } else {
-                    if (!em.$el.contains(event.target as HTMLElement)) {
-                        binding.value(event, el);
-                    }
-                }
-            }
-        };
-
-        document.body.addEventListener('click', el.clickOutsideEvent, false);
-    },
-    unmounted(el: CustomHTMLElement): void {
-        document.body.removeEventListener('click', el.clickOutsideEvent);
-    },
+// Following code is a port of @vueuse/core clickOutside hook
+import { unref, ComponentPublicInstance, watch, getCurrentScope, onScopeDispose } from 'vue';
+import { Fn, MaybeElementRef, MaybeRef, OnClickOutsideEvents, OnClickOutsideOptions } from '../interfaces';
+
+const defaultWindow = typeof window !== 'undefined' ? window : undefined;
+
+const noop = () => {
+    return;
+};
+
+const unrefElement = (elRef: MaybeElementRef): HTMLElement | SVGElement | undefined => {
+    const plain = unref(elRef);
+    return (plain as ComponentPublicInstance)?.$el ?? plain;
+};
+
+const tryOnScopeDispose = (fn: Fn): boolean => {
+    if (getCurrentScope()) {
+        onScopeDispose(fn);
+        return true;
+    }
+    return false;
+};
+
+const useEventListener = (
+    target: MaybeRef<EventTarget> | undefined,
+    event: string,
+    listener: EventListener,
+    options: Record<string, boolean>,
+): (() => void) => {
+    if (!target) return noop;
+
+    let cleanup = noop;
+
+    const stopWatch = watch(
+        () => unref(target),
+        (el) => {
+            cleanup();
+            if (!el) return;
+
+            el.addEventListener(event, listener, options);
+
+            cleanup = () => {
+                el.removeEventListener(event, listener, options);
+                cleanup = noop;
+            };
+        },
+        { immediate: true, flush: 'post' },
+    );
+
+    const stop = () => {
+        stopWatch();
+        cleanup();
+    };
+
+    tryOnScopeDispose(stop);
+
+    return stop;
+};
+
+export const onClickOutside = <E extends keyof OnClickOutsideEvents = 'pointerdown'>(
+    target: MaybeElementRef,
+    inputRef: MaybeElementRef,
+    handler: (evt: OnClickOutsideEvents[E]) => void,
+    options: OnClickOutsideOptions<E> = {},
+): (() => void) | undefined => {
+    const { window = defaultWindow, event = 'pointerdown' } = options;
+
+    if (!window) return;
+
+    const listener = (event: OnClickOutsideEvents[E]) => {
+        const el = unrefElement(target);
+        const inputEl = unrefElement(inputRef);
+
+        if (!el || !inputEl) return;
+
+        if (el === event.target || event.composedPath().includes(el) || event.composedPath().includes(inputEl)) return;
+
+        handler(event);
+    };
+
+    return useEventListener(window, event, listener as EventListener, { passive: true });
 };

src/Vue3DatePicker/interfaces.ts

@@ -1,3 +1,5 @@
+import { ComponentPublicInstance, Ref } from 'vue';
+
 export type DynamicClass = Record<string, boolean>;
 
 export interface IDefaultSelect<T = number> {
@@ -107,3 +109,20 @@ export interface UseMonthYearPick {
     year: number;
     month: number;
 }
+
+export type MaybeRef<T> = T | Ref<T>;
+export type Fn = () => void;
+
+export interface ConfigurableWindow {
+    window?: Window;
+}
+
+export type MaybeElementRef = MaybeRef<HTMLElement | SVGElement | ComponentPublicInstance | undefined | null>;
+export type OnClickOutsideEvents = Pick<
+    WindowEventMap,
+    'click' | 'mousedown' | 'mouseup' | 'touchstart' | 'touchend' | 'pointerdown' | 'pointerup'
+>;
+
+export interface OnClickOutsideOptions<E extends keyof OnClickOutsideEvents> extends ConfigurableWindow {
+    event?: E;
+}