⬅️ Back to Table of Contents

📄 onClickOutside/directive

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	5
📊 Variables & Constants	3
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Type Aliases

🛠️ File Location:

📂 packages/core/onClickOutside/directive.ts

📦 Imports

Name	Source
OnClickOutsideHandler	@vueuse/core
OnClickOutsideOptions	@vueuse/core
Fn	@vueuse/shared
ObjectDirective	vue
onClickOutside	@vueuse/core

---

Variables & Constants

Name	Type	Kind	Value	Exported
stopClickOutsideMap	WeakMap<HTMLElement, any>	const	new WeakMap<HTMLElement, StopHandle>()	✗
vOnClickOutside	ObjectDirective< HTMLElement, OnClick...	const	{ mounted(el, binding) { const capture = !binding.modifiers.bubble let stop: ...	✓
VOnClickOutside	ObjectDirective<HTMLElement, any>	const	vOnClickOutside	✓

---

Functions

mounted(el: any, binding: any): void

Parameters:

• el any
• binding any

Returns: void

Calls:

• onClickOutside (from @vueuse/core)
• Object.assign
• stopClickOutsideMap.set

Code

mounted(el, binding) {
    const capture = !binding.modifiers.bubble
    let stop: StopHandle
    if (typeof binding.value === 'function') {
      stop = onClickOutside(el, binding.value, { capture })
    }
    else {
      const [handler, options] = binding.value
      stop = onClickOutside(el, handler, Object.assign({ capture }, options))
    }
    stopClickOutsideMap.set(el, stop)
  }

unmounted(el: any): void

Parameters:

• el any

Returns: void

Calls:

• stopClickOutsideMap.get
• stop
• stop?.stop
• stopClickOutsideMap.delete

Code

unmounted(el) {
    const stop = stopClickOutsideMap.get(el)
    if (stop && typeof stop === 'function') {
      stop()
    }
    else {
      stop?.stop()
    }
    stopClickOutsideMap.delete(el)
  }

---

Type Aliases

StopHandle

type StopHandle = Fn | { stop: Fn, cancel: Fn, trigger: (event: Event) => void };

---

Generated by Syntax Scribe