@datametria/vue-components 1.1.2 → 1.2.0

package/src/composables/useAccessibilityScale.ts

@@ -0,0 +1,95 @@
+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
+  }
+}

package/src/composables/useBreakpoints.ts

@@ -0,0 +1,83 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export const breakpoints = {
+  xs: 475,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536
+} as const
+
+export type Breakpoint = keyof typeof breakpoints
+
+export function useBreakpoints() {
+  const windowWidth = ref(0)
+  
+  const updateWidth = () => {
+    windowWidth.value = window.innerWidth
+  }
+
+  const isGreaterOrEqual = (breakpoint: Breakpoint) => {
+    return windowWidth.value >= breakpoints[breakpoint]
+  }
+
+  const isLessOrEqual = (breakpoint: Breakpoint) => {
+    return windowWidth.value <= breakpoints[breakpoint]
+  }
+
+  const isBetween = (min: Breakpoint, max: Breakpoint) => {
+    return windowWidth.value >= breakpoints[min] && windowWidth.value <= breakpoints[max]
+  }
+
+  const getCurrentBreakpoint = (): Breakpoint => {
+    const width = windowWidth.value
+    
+    if (width >= breakpoints['2xl']) return '2xl'
+    if (width >= breakpoints.xl) return 'xl'
+    if (width >= breakpoints.lg) return 'lg'
+    if (width >= breakpoints.md) return 'md'
+    if (width >= breakpoints.sm) return 'sm'
+    return 'xs'
+  }
+
+  // Reactive breakpoint checks
+  const isXs = () => windowWidth.value < breakpoints.sm
+  const isSm = () => isGreaterOrEqual('sm') && windowWidth.value < breakpoints.md
+  const isMd = () => isGreaterOrEqual('md') && windowWidth.value < breakpoints.lg
+  const isLg = () => isGreaterOrEqual('lg') && windowWidth.value < breakpoints.xl
+  const isXl = () => isGreaterOrEqual('xl') && windowWidth.value < breakpoints['2xl']
+  const is2xl = () => isGreaterOrEqual('2xl')
+
+  // Mobile/tablet/desktop helpers
+  const isMobile = () => windowWidth.value < breakpoints.md
+  const isTablet = () => isBetween('md', 'lg')
+  const isDesktop = () => isGreaterOrEqual('lg')
+
+  onMounted(() => {
+    updateWidth()
+    window.addEventListener('resize', updateWidth)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateWidth)
+  })
+
+  return {
+    windowWidth,
+    breakpoints,
+    isGreaterOrEqual,
+    isLessOrEqual,
+    isBetween,
+    getCurrentBreakpoint,
+    isXs,
+    isSm,
+    isMd,
+    isLg,
+    isXl,
+    is2xl,
+    isMobile,
+    isTablet,
+    isDesktop
+  }
+}

package/src/composables/useHapticFeedback.ts

@@ -0,0 +1,440 @@
+import { ref, computed } from 'vue'
+
+type HapticType = 'light' | 'medium' | 'heavy' | 'selection' | 'impact' | 'notification'
+type NotificationType = 'success' | 'warning' | 'error'
+
+interface HapticOptions {
+  enabled?: boolean
+  fallbackToVisual?: boolean
+  visualDuration?: number
+}
+
+/**
+ * Composable para feedback háptico e visual
+ * Suporta dispositivos iOS/Android com fallback visual
+ */
+export function useHapticFeedback(options: HapticOptions = {}) {
+  const {
+    enabled = true,
+    fallbackToVisual = true,
+    visualDuration = 150
+  } = options
+
+  const isSupported = ref(false)
+  const isEnabled = ref(enabled)
+  const activeVisualFeedback = ref<string | null>(null)
+
+  // Detectar suporte a haptic feedback
+  const detectHapticSupport = () => {
+    // Haptic Feedback API (iOS/Android)
+    if ('hapticFeedback' in navigator && (navigator as any).hapticFeedback) {
+      return true
+    }
+
+    // Web Vibration API
+    if ('vibrate' in navigator && typeof (navigator as any).vibrate === 'function') {
+      return true
+    }
+
+    return false
+  }
+
+  // Executar vibração nativa
+  const executeNativeVibration = (pattern: number | number[]) => {
+    if (!('vibrate' in navigator) || typeof (navigator as any).vibrate !== 'function') return false
+
+    try {
+      return (navigator as any).vibrate(pattern)
+    } catch (error) {
+      console.warn('Haptic feedback failed:', error)
+      return false
+    }
+  }
+
+  // Feedback visual como fallback
+  const executeVisualFeedback = (type: HapticType, element?: HTMLElement) => {
+    if (!fallbackToVisual) return
+
+    const feedbackId = `visual-${Date.now()}`
+    activeVisualFeedback.value = feedbackId
+
+    // Aplicar efeito visual ao elemento
+    if (element) {
+      const originalTransform = element.style.transform
+      const originalTransition = element.style.transition
+
+      element.style.transition = 'transform 75ms ease-out'
+      
+      switch (type) {
+        case 'light':
+          element.style.transform = 'scale(0.98)'
+          break
+        case 'medium':
+          element.style.transform = 'scale(0.95)'
+          break
+        case 'heavy':
+          element.style.transform = 'scale(0.92)'
+          break
+        case 'selection':
+          element.style.transform = 'scale(1.02)'
+          break
+        default:
+          element.style.transform = 'scale(0.97)'
+      }
+
+      setTimeout(() => {
+        element.style.transform = originalTransform
+        setTimeout(() => {
+          element.style.transition = originalTransition
+          if (activeVisualFeedback.value === feedbackId) {
+            activeVisualFeedback.value = null
+          }
+        }, 75)
+      }, 75)
+    }
+
+    // Limpar feedback visual após duração
+    setTimeout(() => {
+      if (activeVisualFeedback.value === feedbackId) {
+        activeVisualFeedback.value = null
+      }
+    }, visualDuration)
+  }
+
+  // Feedback leve (toque suave)
+  const light = (element?: HTMLElement) => {
+    if (!isEnabled.value) return
+
+    let success = false
+
+    if (isSupported.value) {
+      success = executeNativeVibration(10)
+    }
+
+    if (!success && fallbackToVisual) {
+      executeVisualFeedback('light', element)
+    }
+  }
+
+  // Feedback médio (toque moderado)
+  const medium = (element?: HTMLElement) => {
+    if (!isEnabled.value) return
+
+    let success = false
+
+    if (isSupported.value) {
+      success = executeNativeVibration(20)
+    }
+
+    if (!success && fallbackToVisual) {
+      executeVisualFeedback('medium', element)
+    }
+  }
+
+  // Feedback pesado (toque forte)
+  const heavy = (element?: HTMLElement) => {
+    if (!isEnabled.value) return
+
+    let success = false
+
+    if (isSupported.value) {
+      success = executeNativeVibration(40)
+    }
+
+    if (!success && fallbackToVisual) {
+      executeVisualFeedback('heavy', element)
+    }
+  }
+
+  // Feedback de seleção
+  const selection = (element?: HTMLElement) => {
+    if (!isEnabled.value) return
+
+    let success = false
+
+    if (isSupported.value) {
+      success = executeNativeVibration(5)
+    }
+
+    if (!success && fallbackToVisual) {
+      executeVisualFeedback('selection', element)
+    }
+  }
+
+  // Feedback de impacto
+  const impact = (intensity: 'light' | 'medium' | 'heavy' = 'medium', element?: HTMLElement) => {
+    switch (intensity) {
+      case 'light':
+        light(element)
+        break
+      case 'medium':
+        medium(element)
+        break
+      case 'heavy':
+        heavy(element)
+        break
+    }
+  }
+
+  // Feedback de notificação
+  const notification = (type: NotificationType, element?: HTMLElement) => {
+    if (!isEnabled.value) return
+
+    let pattern: number[]
+    
+    switch (type) {
+      case 'success':
+        pattern = [10, 50, 10]
+        break
+      case 'warning':
+        pattern = [20, 100, 20, 100, 20]
+        break
+      case 'error':
+        pattern = [50, 100, 50, 100, 50]
+        break
+    }
+
+    let success = false
+
+    if (isSupported.value) {
+      success = executeNativeVibration(pattern)
+    }
+
+    if (!success && fallbackToVisual) {
+      executeVisualFeedback('notification', element)
+    }
+  }
+
+  // Padrão customizado
+  const custom = (pattern: number | number[], element?: HTMLElement) => {
+    if (!isEnabled.value) return
+
+    let success = false
+
+    if (isSupported.value) {
+      success = executeNativeVibration(pattern)
+    }
+
+    if (!success && fallbackToVisual) {
+      executeVisualFeedback('medium', element)
+    }
+  }
+
+  // Habilitar/desabilitar feedback
+  const enable = () => {
+    isEnabled.value = true
+  }
+
+  const disable = () => {
+    isEnabled.value = false
+  }
+
+  const toggle = () => {
+    isEnabled.value = !isEnabled.value
+  }
+
+  // Computed
+  const canVibrate = computed(() => isSupported.value && isEnabled.value)
+  const hasVisualFeedback = computed(() => activeVisualFeedback.value !== null)
+
+  // Método principal para feedback háptico
+  const triggerHaptic = (type: HapticType | NotificationType = 'light') => {
+    if (!isEnabled.value) return false
+
+    // Tentar haptic feedback nativo primeiro
+    if ('hapticFeedback' in navigator && (navigator as any).hapticFeedback) {
+      try {
+        return (navigator as any).hapticFeedback.impact(type)
+      } catch (error) {
+        console.warn('Haptic feedback failed:', error)
+      }
+    }
+
+    // Fallback para vibration API
+    if ('vibrate' in navigator && typeof (navigator as any).vibrate === 'function') {
+      let pattern: number | number[]
+      
+      switch (type) {
+        case 'light':
+          pattern = 10
+          break
+        case 'medium':
+          pattern = 20
+          break
+        case 'heavy':
+          pattern = 30
+          break
+        case 'success':
+          pattern = [10, 50, 10]
+          break
+        case 'warning':
+          pattern = [20, 100, 20]
+          break
+        case 'error':
+          pattern = [50, 100, 50, 100, 50]
+          break
+        default:
+          pattern = 10
+      }
+
+      try {
+        return (navigator as any).vibrate(pattern)
+      } catch (error) {
+        console.warn('Vibration failed:', error)
+        return false
+      }
+    }
+
+    return false
+  }
+
+  // Injetar CSS para animações visuais
+  const injectVisualCSS = () => {
+    const styleId = 'haptic-keyframes'
+    
+    if (document.getElementById(styleId)) return
+
+    const style = document.createElement('style')
+    style.id = styleId
+    style.textContent = `
+      @keyframes haptic-pulse-light {
+        0% { transform: scale(1); }
+        50% { transform: scale(0.98); }
+        100% { transform: scale(1); }
+      }
+      
+      @keyframes haptic-pulse-medium {
+        0% { transform: scale(1); }
+        50% { transform: scale(0.95); }
+        100% { transform: scale(1); }
+      }
+      
+      @keyframes haptic-pulse-heavy {
+        0% { transform: scale(1); }
+        50% { transform: scale(0.92); }
+        100% { transform: scale(1); }
+      }
+      
+      @keyframes haptic-success {
+        0% { transform: scale(1); filter: brightness(1); }
+        50% { transform: scale(1.02); filter: brightness(1.1); }
+        100% { transform: scale(1); filter: brightness(1); }
+      }
+      
+      @keyframes haptic-error {
+        0% { transform: translateX(0); }
+        25% { transform: translateX(-2px); }
+        75% { transform: translateX(2px); }
+        100% { transform: translateX(0); }
+      }
+      
+      @media (prefers-reduced-motion: reduce) {
+        @keyframes haptic-pulse-light,
+        @keyframes haptic-pulse-medium,
+        @keyframes haptic-pulse-heavy,
+        @keyframes haptic-success,
+        @keyframes haptic-error {
+          0%, 100% { transform: none; filter: none; }
+        }
+      }
+    `
+    
+    document.head.appendChild(style)
+  }
+
+  // Feedback visual
+  const triggerVisualFeedback = (element: HTMLElement | null, type: HapticType | NotificationType) => {
+    if (!element) return
+
+    injectVisualCSS()
+
+    const originalAnimation = element.style.animation
+    let animation: string
+    let duration: number
+
+    switch (type) {
+      case 'light':
+        animation = 'haptic-pulse-light 0.15s ease-out'
+        duration = 150
+        break
+      case 'medium':
+        animation = 'haptic-pulse-medium 0.2s ease-out'
+        duration = 200
+        break
+      case 'heavy':
+        animation = 'haptic-pulse-heavy 0.25s ease-out'
+        duration = 250
+        break
+      case 'success':
+        animation = 'haptic-success 0.3s ease-out'
+        duration = 300
+        break
+      case 'warning':
+        animation = 'haptic-pulse-medium 0.2s ease-out'
+        duration = 200
+        break
+      case 'error':
+        animation = 'haptic-error 0.4s ease-out'
+        duration = 400
+        break
+      default:
+        animation = 'haptic-pulse-light 0.15s ease-out'
+        duration = 150
+    }
+
+    element.style.animation = animation
+
+    setTimeout(() => {
+      element.style.animation = originalAnimation
+    }, duration)
+  }
+
+  // Feedback combinado (háptico + visual)
+  const feedback = (element: HTMLElement | null, type: HapticType | NotificationType) => {
+    const hapticResult = triggerHaptic(type)
+    triggerVisualFeedback(element, type)
+    return hapticResult
+  }
+
+  // Verificar suporte (método público)
+  const checkSupport = () => {
+    const hasSupport = detectHapticSupport()
+    isSupported.value = hasSupport
+    return hasSupport
+  }
+
+  // Inicializar detecção de suporte
+  checkSupport()
+
+  return {
+    // Estado
+    isSupported,
+    isEnabled,
+    canVibrate,
+    hasVisualFeedback,
+    activeVisualFeedback,
+
+    // Métodos principais (compatíveis com testes)
+    triggerHaptic,
+    triggerVisualFeedback,
+    feedback,
+    checkSupport,
+
+    // Métodos de feedback específicos
+    light,
+    medium,
+    heavy,
+    selection,
+    impact,
+    notification,
+    custom,
+
+    // Controles
+    enable,
+    disable,
+    toggle,
+
+    // Utilitários
+    detectHapticSupport
+  }
+}