⬅️ Back to Table of Contents

📄 useElementOverflow

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	9
🟢 Vue Composition API	1
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useElementOverflow/index.ts

📦 Imports

Name	Source
ConfigurableWindow	../_configurable
MaybeComputedElementRef	../unrefElement
computed	vue
shallowReadonly	vue
shallowRef	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useMutationObserver	../useMutationObserver
useResizeObserver	../useResizeObserver

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none

---

Functions

useElementOverflow(target: MaybeComputedElementRef, option: UseElementOverflowOptions): { isXOverflowed: any; isYOverflowed: any; stop: () => void;…

react a dom's overflow state

Parameters:

• target any: No description
• option any: No description

See: https://vueuse.org/useElementOverflow

Raw JSDoc

/**
 * react a dom's overflow state
 * @see https://vueuse.org/useElementOverflow
 * @param target
 * @param option
 */

Calls:

• shallowRef (from vue)
• computed (from vue)
• unrefElement (from ../unrefElement)
• Array.from(el.children).filter
• useResizeObserver (from ../useResizeObserver)
• update
• onResizeUpdated
• useMutationObserver (from ../useMutationObserver)
• onMutationUpdated
• shallowReadonly (from vue)

Internal Comments:

// stop effectScope (x2)
// update overflow state immediately (x2)

Code

export function useElementOverflow(target: MaybeComputedElementRef, option: UseElementOverflowOptions = {}) {
  const { observeMutation = false, onUpdated, window = defaultWindow } = option
  const isXOverflowed = shallowRef(false)
  const isYOverflowed = shallowRef(false)

  function update(htmlEl: HTMLElement) {
    isXOverflowed.value = htmlEl.scrollWidth > htmlEl.offsetWidth
    isYOverflowed.value = htmlEl.scrollHeight > htmlEl.offsetHeight
  }

  const onResizeUpdated = onUpdated as ResizeObserverCallback | undefined

  const targetEl = computed(() => {
    const el = unrefElement(target)
    if (!el || el instanceof SVGElement)
      return undefined

    return el
  })

  const targets = () => {
    const el = targetEl.value
    if (!el || el instanceof SVGElement)
      return []
    return [el, ...Array.from(el.children).filter(i => i instanceof HTMLElement)]
  }

  useResizeObserver(targets, (entries, observer) => {
    const el = targetEl.value
    if (el) {
      update(el)
    }
    onResizeUpdated?.(entries, observer)
  }, { window })

  if (observeMutation) {
    const onMutationUpdated = onUpdated as MutationCallback | undefined
    useMutationObserver(
      targets,
      (entries, observer) => {
        const el = targetEl.value
        if (el) {
          update(el)
        }
        onMutationUpdated?.(entries, observer)
      },
      {
        window,
        ...(typeof observeMutation === 'object'
          ? observeMutation
          : { childList: true, subtree: true, characterData: true }),
      },
    )
  }
  return {
    isXOverflowed: shallowReadonly(isXOverflowed),
    isYOverflowed: shallowReadonly(isYOverflowed),
    // stop effectScope
    stop,
    // update overflow state immediately
    update: () => {
      const el = targetEl.value
      if (el && window) {
        update(el)
      }
    },
  }
}

Internal helpers

Declared inside another function in this file.

useElementOverflow.update(htmlEl: HTMLElement): void

Parameters:

• htmlEl HTMLElement

Returns: void

Code

function update(htmlEl: HTMLElement) {
    isXOverflowed.value = htmlEl.scrollWidth > htmlEl.offsetWidth
    isYOverflowed.value = htmlEl.scrollHeight > htmlEl.offsetHeight
  }

targets(): any[]

Returns: any[]

Calls:

• Array.from(el.children).filter

Code

() => {
    const el = targetEl.value
    if (!el || el instanceof SVGElement)
      return []
    return [el, ...Array.from(el.children).filter(i => i instanceof HTMLElement)]
  }

useElementOverflow.update(): void

Returns: void

Calls:

• update

Code

() => {
      const el = targetEl.value
      if (el && window) {
        update(el)
      }
    }

---

Interfaces

UseElementOverflowOptions

Interface Code

export interface UseElementOverflowOptions extends ConfigurableWindow {
  /**
   * Use MutationObserver to observe the target and its children.
   *
   * @default false
   */
  observeMutation?: boolean | MutationObserverInit
  /**
   * Callback when observer triggered.
   */
  onUpdated?: ResizeObserverCallback | MutationCallback
}

Properties

Name	Type	Optional	Description
observeMutation	boolean \| MutationObserverInit	✓	not shown
onUpdated	ResizeObserverCallback \| MutationCallback	✓	not shown

---

Type Aliases

UseElementOverflowReturn

type UseElementOverflowReturn = ReturnType<typeof useElementOverflow>;

---

Generated by Syntax Scribe