⬅️ Back to Table of Contents

📄 directive.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	4
📊 Variables & Constants	2
🟢 Vue Composition API	2
📑 Type Aliases	2

📚 Table of Contents

• Imports
• Variables & Constants
• Vue Composition API
• Functions
• Type Aliases

🛠️ File Location:

📂 packages/core/useElementVisibility/directive.ts

📦 Imports

Name	Source
ObjectDirective	vue
UseElementVisibilityOptions	./index
watch	vue
useElementVisibility	./index

---

Variables & Constants

Name	Type	Kind	Value	Exported
handler	any	const	binding.value	✗
vElementVisibility	`ObjectDirective<
HTMLElement,
BindingValueFunction	BindingValueArray
>| const |{
mounted(el, binding) {
if (typeof binding.value === 'function') {
const handler = binding.value
const isVisible = useElementVisibility(el)
watch(isVisible, v => handler(v), { immediate: true })
}
else {
const [handler, options] = binding.value
const isVisible = useElementVisibility(el, options)
watch(isVisible, v => handler(v), { immediate: true })
}
},
}`	✓

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none
watch	watch	none	none

---

Functions

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

Code

mounted(el, binding) {
    if (typeof binding.value === 'function') {
      const handler = binding.value
      const isVisible = useElementVisibility(el)
      watch(isVisible, v => handler(v), { immediate: true })
    }
    else {
      const [handler, options] = binding.value
      const isVisible = useElementVisibility(el, options)
      watch(isVisible, v => handler(v), { immediate: true })
    }
  }

• Parameters:
• el: any
• binding: any
• Return Type: void
• Calls:
• useElementVisibility (from ./index)
• watch (from vue)
• handler

---

Type Aliases

BindingValueFunction

type BindingValueFunction = (state: boolean) => void;

BindingValueArray

type BindingValueArray = [BindingValueFunction, UseElementVisibilityOptions];

---