Skip to content

⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

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

📚 Table of Contents

🛠️ File Location:

📂 packages/core/useTextDirection/index.ts

📦 Imports

Name Source
ConfigurableDocument ../_configurable
MaybeElement ../unrefElement
tryOnMounted @vueuse/shared
computed vue
deepRef vue
defaultDocument ../_configurable
useMutationObserver ../useMutationObserver

Vue Composition API

Name Type Reactive Variables Composables
computed computed none none

Functions

useTextDirection(options: UseTextDirectionOptions): any

Code 
export function useTextDirection(options: UseTextDirectionOptions = {}) {
  const {
    document = defaultDocument,
    selector = 'html',
    observe = false,
    initialValue = 'ltr',
  } = options

  function getValue() {
    return document?.querySelector(selector)?.getAttribute('dir') as UseTextDirectionValue ?? initialValue
  }

  const dir = deepRef<UseTextDirectionValue>(getValue())

  tryOnMounted(() => dir.value = getValue())

  if (observe && document) {
    useMutationObserver(
      document.querySelector(selector) as MaybeElement,
      () => dir.value = getValue(),
      { attributes: true },
    )
  }

  return computed<UseTextDirectionValue>({
    get() {
      return dir.value
    },
    set(v) {
      dir.value = v
      if (!document)
        return
      if (dir.value)
        document.querySelector(selector)?.setAttribute('dir', dir.value)
      else
        document.querySelector(selector)?.removeAttribute('dir')
    },
  })
}

  • JSDoc: 

    /**
 * Reactive dir of the element's text.
 *
 * @see https://vueuse.org/useTextDirection
 */

  • Parameters:

  • options: UseTextDirectionOptions
  • Return Type: any
  • Calls:
  • document?.querySelector(selector)?.getAttribute
  • deepRef (from vue)
  • getValue
  • tryOnMounted (from @vueuse/shared)
  • useMutationObserver (from ../useMutationObserver)
  • document.querySelector
  • computed (from vue)
  • document.querySelector(selector)?.setAttribute
  • document.querySelector(selector)?.removeAttribute

getValue(): UseTextDirectionValue

Code 
function getValue() {
    return document?.querySelector(selector)?.getAttribute('dir') as UseTextDirectionValue ?? initialValue
  }
  • Return Type: UseTextDirectionValue
  • Calls:
  • document?.querySelector(selector)?.getAttribute

Interfaces

UseTextDirectionOptions

Interface Code 
export interface UseTextDirectionOptions extends ConfigurableDocument {
  /**
   * CSS Selector for the target element applying to
   *
   * @default 'html'
   */
  selector?: string
  /**
   * Observe `document.querySelector(selector)` changes using MutationObserve
   *
   * @default false
   */
  observe?: boolean
  /**
   * Initial value
   *
   * @default 'ltr'
   */
  initialValue?: UseTextDirectionValue
}

Properties

Name Type Optional Description
selector string ✓
observe boolean ✓
initialValue UseTextDirectionValue ✓

Type Aliases

UseTextDirectionValue

type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto';