@datametria/vue-components/src/composables/useAccessibilityScale.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

import { ref, computed, watch, onMounted } from 'vue'

/**
 * Composable para controle de escalabilidade de acessibilidade
 * Implementa escala controlada entre 0.8x e 2.0x conforme WCAG 2.1
 */
export function useAccessibilityScale() {
  const scale = ref(1.0)
  const STORAGE_KEY = 'datametria-accessibility-scale'
  const MIN_SCALE = 0.8
  const MAX_SCALE = 2.0

  // Computed para escala clampada
  const clampedScale = computed(() => 
    Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale.value))
  )

  // Computed para classe CSS
  const scaleClass = computed(() => {
    const s = clampedScale.value
    if (s <= 0.9) return 'scale-small'
    if (s >= 1.1) return 'scale-large'
    return 'scale-normal'
  })

  // Aplicar escala ao documento
  const applyScale = (newScale: number) => {
    const finalScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, newScale))
    document.documentElement.style.setProperty('--user-scale', finalScale.toString())
    scale.value = finalScale
  }

  // Salvar no localStorage
  const saveScale = (scaleValue: number) => {
    try {
      localStorage.setItem(STORAGE_KEY, scaleValue.toString())
    } catch (error) {
      console.warn('Failed to save accessibility scale:', error)
    }
  }

  // Carregar do localStorage
  const loadScale = (): number => {
    try {
      const saved = localStorage.getItem(STORAGE_KEY)
      return saved ? parseFloat(saved) : 1.0
    } catch (error) {
      console.warn('Failed to load accessibility scale:', error)
      return 1.0
    }
  }

  // Definir escala
  const setScale = (newScale: number) => {
    applyScale(newScale)
    saveScale(clampedScale.value)
  }

  // Incrementar escala
  const increaseScale = () => {
    setScale(scale.value + 0.1)
  }

  // Decrementar escala
  const decreaseScale = () => {
    setScale(scale.value - 0.1)
  }

  // Reset para padrão
  const resetScale = () => {
    setScale(1.0)
  }

  // Watch para mudanças na escala
  watch(scale, (newScale) => {
    applyScale(newScale)
  })

  // Inicializar na montagem
  onMounted(() => {
    const savedScale = loadScale()
    applyScale(savedScale)
  })

  return {
    scale: clampedScale,
    scaleClass,
    setScale,
    increaseScale,
    decreaseScale,
    resetScale,
    minScale: MIN_SCALE,
    maxScale: MAX_SCALE
  }
}