@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/__tests__/index.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import * as exports from '@/index'
+
+describe('Package Exports', () => {
+  it('exports all components', () => {
+    expect(exports.DatametriaButton).toBeDefined()
+    expect(exports.DatametriaInput).toBeDefined()
+    expect(exports.DatametriaSelect).toBeDefined()
+    expect(exports.DatametriaCheckbox).toBeDefined()
+    expect(exports.DatametriaRadio).toBeDefined()
+    expect(exports.DatametriaSwitch).toBeDefined()
+    expect(exports.DatametriaTextarea).toBeDefined()
+    expect(exports.DatametriaDatePicker).toBeDefined()
+    expect(exports.DatametriaFileUpload).toBeDefined()
+    expect(exports.DatametriaAutocomplete).toBeDefined()
+    expect(exports.DatametriaCard).toBeDefined()
+    expect(exports.DatametriaModal).toBeDefined()
+    expect(exports.DatametriaContainer).toBeDefined()
+    expect(exports.DatametriaGrid).toBeDefined()
+    expect(exports.DatametriaDivider).toBeDefined()
+    expect(exports.DatametriaAlert).toBeDefined()
+    expect(exports.DatametriaToast).toBeDefined()
+    expect(exports.DatametriaProgress).toBeDefined()
+    expect(exports.DatametriaSpinner).toBeDefined()
+    expect(exports.DatametriaTable).toBeDefined()
+    expect(exports.DatametriaAvatar).toBeDefined()
+    expect(exports.DatametriaBadge).toBeDefined()
+    expect(exports.DatametriaChip).toBeDefined()
+    expect(exports.DatametriaNavbar).toBeDefined()
+    expect(exports.DatametriaBreadcrumb).toBeDefined()
+    expect(exports.DatametriaTabs).toBeDefined()
+  })
+
+  it('exports all composables', () => {
+    expect(exports.useTheme).toBeDefined()
+    expect(exports.useValidation).toBeDefined()
+    expect(exports.useAPI).toBeDefined()
+    expect(exports.useLocalStorage).toBeDefined()
+    expect(exports.useDebounce).toBeDefined()
+    expect(exports.useClipboard).toBeDefined()
+  })
+
+  // Types são apenas TypeScript, não valores JavaScript exportáveis
+  it('exports types (TypeScript only)', () => {
+    // Types não podem ser testados em runtime
+    expect(true).toBe(true)
+  })
+})

package/src/composables/useAccessibilityScale.ts

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

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