@datametria/vue-components 1.1.3 → 2.0.1

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

@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaTable from '../DatametriaTable.vue'
+
+describe('DatametriaTable', () => {
+  const columns = [
+    { key: 'name', label: 'Name' },
+    { key: 'email', label: 'Email' },
+    { key: 'age', label: 'Age' }
+  ]
+
+  const data = [
+    { name: 'John Doe', email: 'john@example.com', age: 30 },
+    { name: 'Jane Smith', email: 'jane@example.com', age: 25 }
+  ]
+
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaTable, {
+      props: { columns, data }
+    })
+    expect(wrapper.find('.datametria-table').exists()).toBe(true)
+  })
+
+  it('renders table headers correctly', () => {
+    const wrapper = mount(DatametriaTable, {
+      props: { columns, data }
+    })
+    const headers = wrapper.findAll('.datametria-table__th')
+    expect(headers).toHaveLength(3)
+    expect(headers[0].text()).toBe('Name')
+    expect(headers[1].text()).toBe('Email')
+    expect(headers[2].text()).toBe('Age')
+  })
+
+  it('renders table rows correctly', () => {
+    const wrapper = mount(DatametriaTable, {
+      props: { columns, data }
+    })
+    const rows = wrapper.findAll('.datametria-table__tr')
+    expect(rows).toHaveLength(2)
+  })
+
+  it('renders table cells correctly', () => {
+    const wrapper = mount(DatametriaTable, {
+      props: { columns, data }
+    })
+    const cells = wrapper.findAll('.datametria-table__td')
+    expect(cells[0].text()).toBe('John Doe')
+    expect(cells[1].text()).toBe('john@example.com')
+    expect(cells[2].text()).toBe('30')
+  })
+
+  it('shows empty state when no data', () => {
+    const wrapper = mount(DatametriaTable, {
+      props: { columns, data: [] }
+    })
+    expect(wrapper.find('.datametria-table__empty').exists()).toBe(true)
+    expect(wrapper.find('.datametria-table__empty').text()).toBe('Nenhum dado disponível')
+  })
+
+  it('renders custom empty slot', () => {
+    const wrapper = mount(DatametriaTable, {
+      props: { columns, data: [] },
+      slots: { empty: 'Custom empty message' }
+    })
+    expect(wrapper.find('.datametria-table__empty').text()).toBe('Custom empty message')
+  })
+
+  it('applies column width when specified', () => {
+    const columnsWithWidth = [
+      { key: 'name', label: 'Name', width: '200px' },
+      { key: 'email', label: 'Email' }
+    ]
+    const wrapper = mount(DatametriaTable, {
+      props: { columns: columnsWithWidth, data }
+    })
+    const firstHeader = wrapper.find('.datametria-table__th')
+    expect(firstHeader.attributes('style')).toContain('width: 200px')
+  })
+
+  it('renders custom cell slot', () => {
+    const wrapper = mount(DatametriaTable, {
+      props: { columns, data },
+      slots: {
+        'cell-name': '<strong>Custom Name</strong>'
+      }
+    })
+    expect(wrapper.html()).toContain('<strong>Custom Name</strong>')
+  })
+
+  it('uses CSS variables with fallbacks', () => {
+    const wrapper = mount(DatametriaTable, {
+      props: { columns, data }
+    })
+    expect(wrapper.html()).toContain('datametria-table')
+  })
+})

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

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaTextarea from '../DatametriaTextarea.vue'
+
+describe('DatametriaTextarea', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaTextarea)
+    expect(wrapper.find('.dm-textarea').exists()).toBe(true)
+  })
+
+  it('renders label when provided', () => {
+    const wrapper = mount(DatametriaTextarea, {
+      props: { label: 'Textarea Label' }
+    })
+    expect(wrapper.find('.dm-textarea__label').text()).toContain('Textarea Label')
+  })
+
+  it('shows required indicator', () => {
+    const wrapper = mount(DatametriaTextarea, {
+      props: { label: 'Test', required: true }
+    })
+    expect(wrapper.find('.dm-textarea__required').exists()).toBe(true)
+  })
+
+  it('binds modelValue correctly', () => {
+    const wrapper = mount(DatametriaTextarea, {
+      props: { modelValue: 'test value' }
+    })
+    expect((wrapper.find('textarea').element as HTMLTextAreaElement).value).toBe('test value')
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const wrapper = mount(DatametriaTextarea)
+    await wrapper.find('textarea').setValue('new value')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
+  })
+
+  it('applies disabled state', () => {
+    const wrapper = mount(DatametriaTextarea, {
+      props: { disabled: true }
+    })
+    expect(wrapper.find('textarea').attributes('disabled')).toBeDefined()
+  })
+
+  it('shows error message', () => {
+    const wrapper = mount(DatametriaTextarea, {
+      props: { error: 'Error text' }
+    })
+    expect(wrapper.find('.dm-textarea__error').text()).toBe('Error text')
+  })
+
+  it('shows character counter when maxLength provided', () => {
+    const wrapper = mount(DatametriaTextarea, {
+      props: { maxLength: 100, modelValue: 'test' }
+    })
+    expect(wrapper.find('.dm-textarea__counter').exists()).toBe(true)
+    expect(wrapper.find('.dm-textarea__counter').text()).toContain('4/100')
+  })
+
+  it('applies custom rows', () => {
+    const wrapper = mount(DatametriaTextarea, {
+      props: { rows: 10 }
+    })
+    expect(wrapper.find('textarea').attributes('rows')).toBe('10')
+  })
+})

package/src/components/__tests__/DatametriaToast.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaToast from '../DatametriaToast.vue'
+
+describe('DatametriaToast', () => {
+  it('renders with primary variant', () => {
+    // Create body element for Teleport
+    const body = document.createElement('div')
+    document.body.appendChild(body)
+    
+    const wrapper = mount(DatametriaToast, {
+      props: { 
+        message: 'Test message',
+        variant: 'primary',
+        modelValue: true
+      },
+      attachTo: body
+    })
+    
+    // Check if toast exists in document body
+    const toast = document.querySelector('.dm-toast')
+    expect(toast).toBeTruthy()
+    expect(toast.classList.contains('dm-toast--primary')).toBe(true)
+    
+    wrapper.unmount()
+    document.body.removeChild(body)
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaToast, {
+      props: { 
+        message: 'Test',
+        variant: 'invalid',
+        modelValue: true
+      }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaToast] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+})

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

@@ -0,0 +1,99 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaToast from '../DatametriaToast.vue'
+
+describe.skip('DatametriaToast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders correctly when visible', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test message', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast')
+  })
+
+  it('displays message correctly', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test message', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('Test message')
+  })
+
+  it('applies success variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Success', variant: 'success', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--success')
+  })
+
+  it('applies error variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Error', variant: 'error', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--error')
+  })
+
+  it('applies warning variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Warning', variant: 'warning', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--warning')
+  })
+
+  it('applies primary variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Primary', variant: 'primary', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--primary')
+  })
+
+  it('applies info variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Info', variant: 'info', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--info')
+  })
+
+  it('renders close button when closable', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', closable: true, modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast__close')
+  })
+
+  it('does not render close button when not closable', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', closable: false, modelValue: true }
+    })
+    expect(wrapper.html()).not.toContain('dm-toast__close')
+  })
+
+  it('emits update:modelValue when close called', async () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', closable: true, modelValue: true }
+    })
+    await (wrapper.vm as any).close()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  it('emits close event when close called', async () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', closable: true, modelValue: true }
+    })
+    await (wrapper.vm as any).close()
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('uses CSS variables with fallbacks', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('--dm-')
+  })
+})

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
+  }
 }