⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	8
📊 Variables & Constants	3
🟢 Vue Composition API	1
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

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

🛠️ File Location:

📂 packages/core/useMouseInElement/index.ts

📦 Imports

Name	Source
MaybeElementRef	../unrefElement
UseMouseOptions	../useMouse
shallowRef	vue
watch	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useEventListener	../useEventListener
useMouse	../useMouse

---

Variables & Constants

Name	Type	Kind	Value	Exported
type	UseMouseCoordType | UseMouseEventExtractor	const	options.type || 'page'	✗
elX	number	const	x.value - elementPositionX.value	✗
elY	number	const	y.value - elementPositionY.value	✗

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

useMouseInElement(target: MaybeElementRef, options: MouseInElementOptions): { x: any; y: any; sourceType: any; elementX: any; elementY: any; elementPositionX: any; elementPositionY: any; elementHeight: any; elementWidth: any; isOutside: any; stop: () => void; }

Code

export function useMouseInElement(
  target?: MaybeElementRef,
  options: MouseInElementOptions = {},
) {
  const {
    handleOutside = true,
    window = defaultWindow,
  } = options
  const type = options.type || 'page'

  const { x, y, sourceType } = useMouse(options)

  const targetRef = shallowRef(target ?? window?.document.body)
  const elementX = shallowRef(0)
  const elementY = shallowRef(0)
  const elementPositionX = shallowRef(0)
  const elementPositionY = shallowRef(0)
  const elementHeight = shallowRef(0)
  const elementWidth = shallowRef(0)
  const isOutside = shallowRef(true)

  let stop = () => {}

  if (window) {
    stop = watch(
      [targetRef, x, y],
      () => {
        const el = unrefElement(targetRef)
        if (!el || !(el instanceof Element))
          return

        const {
          left,
          top,
          width,
          height,
        } = el.getBoundingClientRect()

        elementPositionX.value = left + (type === 'page' ? window.pageXOffset : 0)
        elementPositionY.value = top + (type === 'page' ? window.pageYOffset : 0)
        elementHeight.value = height
        elementWidth.value = width

        const elX = x.value - elementPositionX.value
        const elY = y.value - elementPositionY.value
        isOutside.value = width === 0 || height === 0
          || elX < 0 || elY < 0
          || elX > width || elY > height

        if (handleOutside || !isOutside.value) {
          elementX.value = elX
          elementY.value = elY
        }
      },
      { immediate: true },
    )

    useEventListener(
      document,
      'mouseleave',
      () => isOutside.value = true,
      { passive: true },
    )
  }

  return {
    x,
    y,
    sourceType,
    elementX,
    elementY,
    elementPositionX,
    elementPositionY,
    elementHeight,
    elementWidth,
    isOutside,
    stop,
  }
}

• JSDoc:

  /**
   * Reactive mouse position related to an element.
   *
   * @see https://vueuse.org/useMouseInElement
   * @param target
   * @param options
   */
  

• Parameters:

• target: MaybeElementRef
• options: MouseInElementOptions
• Return Type: { x: any; y: any; sourceType: any; elementX: any; elementY: any; elementPositionX: any; elementPositionY: any; elementHeight: any; elementWidth: any; isOutside: any; stop: () => void; }
• Calls:
• useMouse (from ../useMouse)
• shallowRef (from vue)
• watch (from vue)
• unrefElement (from ../unrefElement)
• el.getBoundingClientRect
• useEventListener (from ../useEventListener)

stop(): void

Code

() => {}

• Return Type: void

---

Interfaces

MouseInElementOptions

Interface Code

export interface MouseInElementOptions extends UseMouseOptions {
  handleOutside?: boolean
}

Properties

Name	Type	Optional	Description
handleOutside	boolean	✓

---

Type Aliases

UseMouseInElementReturn

type UseMouseInElementReturn = ReturnType<typeof useMouseInElement>;

---