feat(onClickOutside): add ignore option (vitest-dev#1205)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/onClickOutside/demo.vue

@@ -29,11 +29,15 @@ onClickOutside(
   <button @click="modal = true">
     Open Modal
   </button>
-  <div class="relative inline-block ml-2">
+  <div class="ml-2 relative inline-block">
     <button @click="dropdown = true">
       Open Dropdown
     </button>
-    <div v-if="dropdown" ref="dropdownRef" class="dropdown-inner">
+    <div
+      v-if="dropdown"
+      ref="dropdownRef"
+      class="dropdown-inner"
+    >
       Click outside of the dropdown to close it.
     </div>
   </div>

packages/core/onClickOutside/index.ts

@@ -5,6 +5,13 @@ import { useEventListener } from '../useEventListener'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
+export interface OnClickOutsideOptions extends ConfigurableWindow {
+  /**
+   * List of elements that should not trigger the event.
+   */
+  ignore?: MaybeElementRef[]
+}
+
 /**
  * Listen for clicks outside of an element.
  *
@@ -16,9 +23,9 @@ import { defaultWindow } from '../_configurable'
 export function onClickOutside(
   target: MaybeElementRef,
   handler: (evt: PointerEvent) => void,
-  options: ConfigurableWindow = {},
+  options: OnClickOutsideOptions = {},
 ) {
-  const { window = defaultWindow } = options
+  const { window = defaultWindow, ignore } = options
 
   if (!window)
     return
@@ -27,10 +34,19 @@ export function onClickOutside(
 
   const listener = (event: PointerEvent) => {
     const el = unrefElement(target)
+    const composedPath = event.composedPath()
 
-    if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
+    if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
       return
 
+    if (ignore && ignore.length > 0) {
+      if (ignore.some((target) => {
+        const el = unrefElement(target)
+        return el && (event.target === el || composedPath.includes(el))
+      }))
+        return
+    }
+
     handler(event)
   }