feat(onClickOutside): add bubble modifier to directive (#2183)

packages/core/onClickOutside/demo.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { OnClickOutsideHandler } from '@vueuse/core'
 import { onClickOutside } from '@vueuse/core'
+import { vOnClickOutside } from './directive'
 
 const modal = ref(false)
 const modalRef = ref(null)
@@ -14,28 +16,23 @@ onClickOutside(
 )
 
 const dropdown = ref(false)
-const dropdownRef = ref(null)
-
-onClickOutside(
-  dropdownRef,
-  (event) => {
-    console.log(event)
-    dropdown.value = false
-  },
-)
+const dropdownHandler: OnClickOutsideHandler = (event) => {
+  console.log(event)
+  dropdown.value = false
+}
 </script>
 
 <template>
   <button @click="modal = true">
     Open Modal
   </button>
   <div class="ml-2 relative inline-block">
-    <button @click="dropdown = true">
-      Open Dropdown
+    <button @click.stop="dropdown = !dropdown">
+      Toggle Dropdown
     </button>
     <div
       v-if="dropdown"
-      ref="dropdownRef"
+      v-on-click-outside.bubble="dropdownHandler"
       class="dropdown-inner"
     >
       Click outside of the dropdown to close it.

packages/core/onClickOutside/directive.ts

@@ -1,19 +1,26 @@
-import type { FunctionDirective } from 'vue-demi'
+import { directiveHooks } from '@vueuse/shared'
+import type { ObjectDirective } from 'vue-demi'
 import { onClickOutside } from '.'
+import type { OnClickOutsideHandler, OnClickOutsideOptions } from '.'
 
-const handler = (): FunctionDirective<any, <E = PointerEvent>(evt: E) => void> => {
-  let stop = null as unknown as ReturnType<typeof onClickOutside>
-  return (el, binding) => {
-    if (stop) {
-      stop()
-      stop = onClickOutside(el, binding.value)
-      return
+export const vOnClickOutside: ObjectDirective<
+HTMLElement,
+OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]
+> = {
+  [directiveHooks.mounted](el, binding) {
+    const capture = !binding.modifiers.bubble
+    if (typeof binding.value === 'function') {
+      (el as any).__onClickOutside_stop = onClickOutside(el, binding.value, { capture })
     }
-    stop = onClickOutside(el, binding.value)
-  }
+    else {
+      const [handler, options] = binding.value
+      ;(el as any).__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options))
+    }
+  },
+  [directiveHooks.unmounted](el) {
+    (el as any).__onClickOutside_stop()
+  },
 }
 
-export const vOnClickOutside = handler()
-
 // alias
 export { vOnClickOutside as VOnClickOutside }

packages/core/onClickOutside/index.ts

@@ -23,6 +23,8 @@ export interface OnClickOutsideOptions extends ConfigurableWindow {
   detectIframe?: boolean
 }
 
+export type OnClickOutsideHandler<T extends { detectIframe: OnClickOutsideOptions['detectIframe'] } = { detectIframe: false }> = (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void
+
 /**
  * Listen for clicks outside of an element.
  *
@@ -33,7 +35,7 @@ export interface OnClickOutsideOptions extends ConfigurableWindow {
  */
 export function onClickOutside<T extends OnClickOutsideOptions>(
   target: MaybeElementRef,
-  handler: (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void,
+  handler: OnClickOutsideHandler<{ detectIframe: T['detectIframe'] }>,
   options: T = {} as T,
 ) {
   const { window = defaultWindow, ignore, capture = true, detectIframe = false } = options