From 5a9768e6054d00335a2da60c855641bdbca614fa Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 16 Sep 2022 05:42:21 +0300
Subject: [PATCH] feat(onClickOutside): add `bubble` modifier to directive
 (#2183)

---
 packages/core/onClickOutside/demo.vue     | 21 +++++++--------
 packages/core/onClickOutside/directive.ts | 31 ++++++++++++++---------
 packages/core/onClickOutside/index.ts     |  4 ++-
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/packages/core/onClickOutside/demo.vue b/packages/core/onClickOutside/demo.vue
index 533ada38144..4ffc6f407a4 100644
--- a/packages/core/onClickOutside/demo.vue
+++ b/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,15 +16,10 @@ 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>
@@ -30,12 +27,12 @@ onClickOutside(
     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.
diff --git a/packages/core/onClickOutside/directive.ts b/packages/core/onClickOutside/directive.ts
index fe41f7a28cb..2acd1fd697e 100644
--- a/packages/core/onClickOutside/directive.ts
+++ b/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 }
diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts
index 7da5e51f683..81bd6e512d7 100644
--- a/packages/core/onClickOutside/index.ts
+++ b/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