From b08d7a70c9b30192dd568340c9d25cfbc8ce3180 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Thu, 8 Sep 2022 22:14:28 +0300
Subject: [PATCH 1/4] feat(onClickOutside): add `bubble` modifier to directive

---
 packages/core/onClickOutside/directive.ts | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/core/onClickOutside/directive.ts b/packages/core/onClickOutside/directive.ts
index fe41f7a28cb..09f65c133b8 100644
--- a/packages/core/onClickOutside/directive.ts
+++ b/packages/core/onClickOutside/directive.ts
@@ -1,19 +1,12 @@
 import type { FunctionDirective } from 'vue-demi'
 import { onClickOutside } 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
-    }
-    stop = onClickOutside(el, binding.value)
-  }
+export const vOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => void> = (el, binding) => {
+  const stop = onClickOutside(el, (...args) => {
+    binding.value(...args)
+    stop && stop()
+  }, { capture: !binding.modifiers.bubble })
 }
 
-export const vOnClickOutside = handler()
-
 // alias
 export { vOnClickOutside as VOnClickOutside }

From 9b58ea44a5375a42211edcdda8150f742ab6b451 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 9 Sep 2022 03:23:56 +0300
Subject: [PATCH 2/4] fix: migrate to `ObjectDirective`

---
 packages/core/onClickOutside/demo.vue     | 21 ++++++++----------
 packages/core/onClickOutside/directive.ts | 26 +++++++++++++++++------
 packages/core/onClickOutside/index.ts     |  4 +++-
 3 files changed, 32 insertions(+), 19 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 09f65c133b8..486ad446f4c 100644
--- a/packages/core/onClickOutside/directive.ts
+++ b/packages/core/onClickOutside/directive.ts
@@ -1,11 +1,25 @@
-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 '.'
 
-export const vOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => void> = (el, binding) => {
-  const stop = onClickOutside(el, (...args) => {
-    binding.value(...args)
-    stop && stop()
-  }, { capture: !binding.modifiers.bubble })
+export const vOnClickOutside: ObjectDirective<
+HTMLElement,
+OnClickOutsideHandler | [OnClickOutsideHandler<{ detectIframe: true }>, 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 })
+    }
+    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()
+  },
 }
 
 // alias
diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts
index c2d49d18526..d7b3b849cca 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

From eabd59d47fb8a2948b84a45c0c477f836ba7fc90 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 9 Sep 2022 03:39:04 +0300
Subject: [PATCH 3/4] chore: remove unecessary object

---
 packages/core/onClickOutside/directive.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/onClickOutside/directive.ts b/packages/core/onClickOutside/directive.ts
index 486ad446f4c..15f0fbbb47f 100644
--- a/packages/core/onClickOutside/directive.ts
+++ b/packages/core/onClickOutside/directive.ts
@@ -14,7 +14,7 @@ OnClickOutsideHandler | [OnClickOutsideHandler<{ detectIframe: true }>, OnClickO
     }
     else {
       const [handler, options] = binding.value
-      ;(el as any).__onClickOutside_stop = onClickOutside(el, handler, Object.assign({}, { capture }, options))
+      ;(el as any).__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options))
     }
   },
   [directiveHooks.unmounted](el) {

From e0f2d27a7653f3a3caae3cb405c16cd1639755dc Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Fri, 9 Sep 2022 03:54:17 +0300
Subject: [PATCH 4/4] refactor: use `any` on event handler if `options` object
 is provided

---
 packages/core/onClickOutside/directive.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/onClickOutside/directive.ts b/packages/core/onClickOutside/directive.ts
index 15f0fbbb47f..2acd1fd697e 100644
--- a/packages/core/onClickOutside/directive.ts
+++ b/packages/core/onClickOutside/directive.ts
@@ -5,7 +5,7 @@ import type { OnClickOutsideHandler, OnClickOutsideOptions } from '.'
 
 export const vOnClickOutside: ObjectDirective<
 HTMLElement,
-OnClickOutsideHandler | [OnClickOutsideHandler<{ detectIframe: true }>, OnClickOutsideOptions]
+OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]
 > = {
   [directiveHooks.mounted](el, binding) {
     const capture = !binding.modifiers.bubble