@datametria/vue-components 1.1.2 → 1.1.3

package/ACCESSIBILITY.md

@@ -1,78 +0,0 @@
-# ♿ Acessibilidade - DATAMETRIA Vue Components
-
-## 🎯 Conformidade WCAG 2.1 AA
-
-Todos os componentes seguem as diretrizes **WCAG 2.1 nível AA**.
-
-## ✅ Features de Acessibilidade
-
-### 1. **Navegação por Teclado**
-- ✅ Todos os componentes interativos são acessíveis via teclado
-- ✅ Focus visível com `outline` e `box-shadow`
-- ✅ Tab order lógico
-
-### 2. **ARIA Attributes**
-- ✅ `aria-label`, `aria-describedby`, `aria-busy`
-- ✅ `role` apropriado para cada componente
-- ✅ Estados dinâmicos (`aria-disabled`, `aria-checked`)
-
-### 3. **Contraste de Cores**
-- ✅ Contraste mínimo 4.5:1 para texto normal
-- ✅ Contraste mínimo 3:1 para texto grande
-- ✅ Brand colors testadas: #0072CE, #4B0078
-
-### 4. **Touch Targets**
-- ✅ Mínimo 44x44px em mobile (WCAG 2.5.5)
-- ✅ Espaçamento adequado entre elementos
-- ✅ `-webkit-tap-highlight-color: transparent`
-
-### 5. **Screen Readers**
-- ✅ Labels descritivos
-- ✅ Estados anunciados (loading, error, success)
-- ✅ Estrutura semântica HTML
-
-## 📋 Checklist por Componente
-
-### DatametriaButton
-- ✅ `aria-busy` quando loading
-- ✅ `aria-disabled` quando disabled
-- ✅ Focus visível
-- ✅ Min-height 44px em mobile
-
-### DatametriaInput
-- ✅ `<label>` associado com `for`
-- ✅ `aria-describedby` para mensagens de erro
-- ✅ `required` attribute
-- ✅ Focus ring visível
-
-### DatametriaCheckbox
-- ✅ Input nativo para compatibilidade
-- ✅ Label clicável
-- ✅ Estados visuais claros
-
-### DatametriaModal
-- ✅ `role="dialog"`
-- ✅ `aria-modal="true"`
-- ✅ Focus trap
-- ✅ ESC para fechar
-
-### DatametriaAlert
-- ✅ `role="alert"` para anúncio automático
-- ✅ Ícones com `aria-hidden="true"`
-- ✅ Texto descritivo
-
-## 🧪 Testes de Acessibilidade
-
-```bash
-# Instalar ferramentas
-npm install -D @axe-core/vue vitest-axe
-
-# Rodar testes
-npm run test:a11y
-```
-
-## 📚 Recursos
-
-- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
-- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
-- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

package/DESIGN-SYSTEM.md

@@ -1,70 +0,0 @@
-# 🎨 Design System Integration
-
-## Brand Colors
-
-```css
---dm-primary: #0072CE    /* Azul DATAMETRIA */
---dm-secondary: #4B0078  /* Roxo DATAMETRIA */
-```
-
-## Design Tokens
-
-Todos os componentes usam **CSS Custom Properties** do Design System:
-
-### Colors
-- `--dm-primary`, `--dm-secondary`
-- `--dm-success`, `--dm-error`, `--dm-warning`
-- `--dm-gray-50` até `--dm-gray-900`
-
-### Spacing
-- `--dm-space-2` (0.5rem)
-- `--dm-space-3` (0.75rem)
-- `--dm-space-4` (1rem)
-
-### Typography
-- `--dm-text-sm` (0.875rem)
-- `--dm-text-base` (1rem)
-- `--dm-text-lg` (1.125rem)
-
-### Effects
-- `--dm-radius` (0.375rem)
-- `--dm-transition` (200ms ease-in-out)
-- `--dm-focus-ring` (box-shadow para focus)
-
-## Responsive Design
-
-### Breakpoints
-- Mobile: < 640px
-- Tablet: 640px - 1024px
-- Desktop: > 1024px
-
-### Typography Scaling
-```css
-@media (max-width: 640px) {
-  --dm-text-sm: 0.8rem;
-  --dm-text-base: 0.9rem;
-}
-```
-
-## Touch Targets
-
-Todos os elementos interativos têm **mínimo 44x44px** em mobile (WCAG 2.5.5).
-
-## Dark Mode
-
-Suporte nativo via `useTheme()` composable:
-
-```typescript
-const { isDark, toggleTheme } = useTheme()
-```
-
-## Customização
-
-Override tokens no seu projeto:
-
-```css
-:root {
-  --dm-primary: #YOUR_COLOR;
-  --dm-radius: 0.5rem;
-}
-```

package/PROGRESS.md

@@ -1,327 +0,0 @@
-# 📊 Progresso de Implementação - @datametria/vue-components
-
-**Versão:** 1.3.0  
-**Última atualização:** 27/10/2025  
-**Meta:** 56 componentes + 8 composables  
-**Status:** 🎉 175/175 testes passando, 95.28% coverage
-
----
-
-## 🏆 Conquistas Recentes
-
-### 27/10/2025 - META ATINGIDA! 95.28% Coverage 🏆
-
-✅ **175/175 testes passando** (100%)  
-✅ **95.28% cobertura total** (statements) - META SUPERADA!  
-✅ **77.6% branches** | **76.38% functions**  
-✅ **41 arquivos de teste** (26 componentes + 6 composables + 1 index + expansões)  
-✅ **Composables 100% coverage** (statements)  
-✅ **Componentes 94.09% coverage** (statements)  
-✅ **Mocking avançado** com axios, navigator.clipboard, localStorage  
-✅ **Fake timers** para debounce e auto-reset  
-
-**Correções Finais (27/10/2025):**
-
-#### useAPI (3 correções)
-- ✅ Axios movido para dependencies (não devDependencies)
-- ✅ Error handling retorna `error.message` ao invés de Error object
-- ✅ BaseURL absoluta em testes (`http://localhost`)
-
-#### useLocalStorage (2 correções)
-- ✅ Implementado `watch()` para sincronizar com localStorage
-- ✅ NextTick aguarda watch antes de validar storage
-
-#### useValidation (1 correção)
-- ✅ Validators retornam boolean ao invés de objeto
-
-#### useTheme (1 correção)
-- ✅ Exportados métodos `setDark()` e `setLight()` além de `toggle()`
-
-#### src/index.ts (1 correção)
-- ✅ Types não são testados em runtime (apenas TypeScript)
-
-**Correções do Ciclo Anterior (27/10/2025):**
-
-#### DatametriaAutocomplete (2 correções)
-- ✅ Adicionado mensagem "No results" quando filteredOptions está vazio
-- ✅ Implementado `handleBlur()` com timeout de 200ms para fechar dropdown
-
-#### DatametriaFileUpload (2 correções)
-- ✅ Adicionada classe `dm-file-upload--dragging` no dragOver
-- ✅ Corrigido evento `update:modelValue` no drop
-
-#### DatametriaNavbar (3 correções)
-- ✅ Adicionadas props `sticky`, `transparent`, `bordered`
-- ✅ Implementado binding dinâmico de classes com array
-- ✅ Classes de variantes agora aplicadas corretamente
-
-#### useTheme (2 correções)
-- ✅ Auto-inicialização ao primeiro uso (carrega do localStorage)
-- ✅ Implementado listener para `matchMedia` (detecta preferência do sistema)
-- ✅ Adicionado flag `initialized` para evitar múltiplas inicializações
-
-**Lições Aprendidas:**
-- Import correto: `import '@testing-library/jest-dom/vitest'`
-- Peer dependencies: vitest e @vitest/coverage-v8 mesma major version
-- Classes CSS: usar prefixo completo `datametria-component--variant`
-- ESM: Scripts devem usar `import` ao invés de `require`
-- Teleport: Componentes com teleport precisam de target no DOM
-- Props obrigatórias: Sempre fornecer props required nos testes
-- Mocking: vi.mock() deve vir antes dos imports para funcionar
-- Fake Timers: vi.useFakeTimers() + vi.advanceTimersByTime() para testes assíncronos
-- Navigator API: Mockar navigator.clipboard com Object.assign()
-- LocalStorage: Limpar com localStorage.clear() no beforeEach()
-- Axios: Mockar com vi.mocked(axios).mockResolvedValue()
-- Composables: Testar todos os métodos e edge cases para alta cobertura
-- **Blur Events**: Usar setTimeout() para permitir clicks antes de fechar dropdowns
-- **Dynamic Classes**: Usar array syntax para múltiplas classes condicionais
-- **Auto-initialization**: Composables podem auto-inicializar no primeiro uso
-
----
-
-## 🎯 Visão Geral
-
-| Categoria | Implementado | Total | Progresso |
-|-----------|--------------|-------|-----------|
-| **Componentes** | 26 | 56 | 46% |
-| **Composables** | 6 | 8 | 75% |
-| **Design System** | ✅ | ✅ | 100% |
-| **Acessibilidade** | ✅ | ✅ | 100% |
-| **Responsividade** | ✅ | ✅ | 100% |
-
----
-
-## ✅ Componentes Implementados (14/56)
-
-### 🔘 Form Components (10/15)
-- [x] **DatametriaButton** - 4 variants, 3 sizes, loading, ARIA, responsive
-- [x] **DatametriaInput** - Label, validation, error, ARIA, responsive
-- [x] **DatametriaSelect** - Options, placeholder, validation, ARIA
-- [x] **DatametriaCheckbox** - Custom checkmark, label, ARIA
-- [x] **DatametriaRadio** - Circular checkmark, label, ARIA, group support
-- [x] **DatametriaSwitch** - Toggle animation, role="switch", ARIA
-- [x] **DatametriaTextarea** - Character counter, resize, validation, ARIA
-- [x] **DatametriaDatePicker** - Native date input, min/max, validation, ARIA
-- [x] **DatametriaFileUpload** - Drag-and-drop, multiple files, preview, size format
-- [x] **DatametriaAutocomplete** - Filter, keyboard nav, role="combobox", ARIA
-- [ ] DatametriaTimePicker
-- [ ] DatametriaSlider
-- [ ] DatametriaColorPicker
-- [ ] DatametriaMultiSelect
-- [ ] DatametriaRating
-
-### 📦 Layout Components (5/10)
-- [x] **DatametriaCard** - Header/footer slots, padding, variants
-- [x] **DatametriaModal** - Teleport, closable, size, ARIA
-- [x] **DatametriaContainer** - 4 sizes, fluid variant, padding responsivo
-- [x] **DatametriaGrid** - Cols/gap configuráveis, responsive breakpoints
-- [x] **DatametriaDivider** - Horizontal/vertical, dashed, label slot, role="separator"
-- [ ] DatametriaStack
-- [ ] DatametriaAccordion
-- [ ] DatametriaCollapse
-- [ ] DatametriaSidebar
-- [ ] DatametriaDrawer
-
-### 🔔 Feedback Components (4/8)
-- [x] **DatametriaAlert** - 4 variants, closable, ARIA
-- [x] **DatametriaToast** - Teleport, auto-close timer, 4 variants, role="alert", aria-live
-- [x] **DatametriaProgress** - role="progressbar", aria-valuenow, 4 variants, animado
-- [x] **DatametriaSpinner** - SVG animado, 3 sizes, 3 variants, role="status"
-- [ ] DatametriaNotification
-- [ ] DatametriaSkeleton
-- [ ] DatametriaTooltip
-
-### 📊 Data Display (4/10)
-- [x] **DatametriaTable** - Columns, slots, empty state
-- [x] **DatametriaAvatar** - Image/initials fallback, 4 sizes, rounded, error handling
-- [x] **DatametriaBadge** - 6 variants, 3 sizes, slot custom, aria-label
-- [x] **DatametriaChip** - 6 variants, closable, clickable, icon slot, keyboard nav
-- [ ] DatametriaList
-- [ ] DatametriaTimeline
-- [ ] DatametriaTree
-- [ ] DatametriaTag
-- [ ] DatametriaStatistic
-- [ ] DatametriaEmpty
-- [ ] DatametriaDescription
-
-### 🧭 Navigation (3/8)
-- [x] **DatametriaNavbar** - Slots (brand, menu, actions), toggle mobile, sticky, variants
-- [x] **DatametriaBreadcrumb** - aria-current, separator custom, click event
-- [x] **DatametriaTabs** - role="tablist", keyboard nav (arrows), indicator animado
-- [ ] DatametriaMenu
-- [ ] DatametriaPagination
-- [ ] DatametriaSteps
-- [ ] DatametriaDropdown
-- [ ] DatametriaLink
-
-### 🎨 Advanced (0/5)
-- [ ] DatametriaCarousel
-- [ ] DatametriaCalendar
-- [ ] DatametriaChart
-- [ ] DatametriaMap
-- [ ] DatametriaEditor
-
----
-
-## 🎨 Composables Implementados (6/8)
-
-### ✅ Core Composables (3/3)
-- [x] **useTheme** - Dark mode, localStorage, system preference
-- [x] **useValidation** - Validators (required, email, minLength, maxLength)
-- [x] **useAPI** - HTTP client (get, post, put, delete), loading/error
-
-### 📋 Utility Composables (3/5)
-- [x] **useLocalStorage** - Sync automático, JSON parse/stringify, watch deep
-- [x] **useDebounce** - Delay configurável (default 300ms), cleanup timeout
-- [x] **useClipboard** - Copy/read, estado copied (auto-reset 2s), error handling
-- [ ] useIntersectionObserver
-- [ ] useMediaQuery
-
----
-
-## 🎨 Design System
-
-### ✅ Implementado (100%)
-- [x] Design Tokens CSS (`design-tokens.css`)
-- [x] Brand Colors (#0072CE, #4B0078)
-- [x] Spacing System (--dm-space-*)
-- [x] Typography Scale (--dm-text-*)
-- [x] Color Palette (--dm-gray-*, semantic colors)
-- [x] Border Radius (--dm-radius)
-- [x] Transitions (--dm-transition)
-- [x] Focus Ring (--dm-focus-ring)
-- [x] Dark Mode Support
-
----
-
-## ♿ Acessibilidade
-
-### ✅ WCAG 2.1 AA (100%)
-- [x] ARIA Attributes (aria-label, aria-busy, aria-disabled)
-- [x] Keyboard Navigation
-- [x] Focus Visible (--dm-focus-ring)
-- [x] Screen Reader Support
-- [x] Contraste 4.5:1 mínimo
-- [x] Touch Targets 44x44px
-- [x] Semantic HTML
-- [x] Documentação (ACCESSIBILITY.md)
-
----
-
-## 📱 Responsividade
-
-### ✅ Mobile-First (100%)
-- [x] Breakpoints (mobile < 640px, tablet 640-1024px, desktop > 1024px)
-- [x] Typography Scaling
-- [x] Touch-Friendly (44px min-height)
-- [x] Tap Highlight Removed
-- [x] Responsive Spacing
-- [x] Fluid Typography
-
----
-
-## 📚 Documentação
-
-### ✅ Criada
-- [x] README.md - Instalação e uso básico
-- [x] ACCESSIBILITY.md - Guia de acessibilidade WCAG 2.1 AA
-- [x] DESIGN-SYSTEM.md - Integração Design System
-- [x] PROGRESS.md - Este arquivo
-
-### 📋 Pendente
-- [ ] CONTRIBUTING.md - Guia de contribuição
-- [ ] CHANGELOG.md - Histórico de versões
-- [ ] Storybook - Documentação interativa
-- [ ] API Reference - Documentação completa de props/events
-
----
-
-## 🚀 Roadmap
-
-### Q1 2026 - Foundation (Atual)
-- [x] Setup inicial do pacote NPM
-- [x] Design System integrado
-- [x] Acessibilidade WCAG 2.1 AA
-- [x] 26 componentes implementados (46%)
-- [x] 6 composables implementados (75%)
-- [x] Setup de testes (Vitest + Testing Library)
-- [x] 41 arquivos de teste criados (26 componentes + 6 composables + 1 index + expansões)
-- [x] 175 testes implementados ✅
-- [x] 100% testes passando (0 falhas) ✅
-- [x] 95.28% cobertura total atingida ✅ (META SUPERADA!)
-
-### Q2 2026 - Expansion
-- [ ] 30 componentes adicionais (total 56)
-- [ ] Cobertura de testes 95%+
-- [ ] Storybook completo
-- [ ] CI/CD pipeline
-- [ ] Publicação no NPM
-
-### Q3 2026 - Advanced
-- [ ] 28 componentes restantes
-- [ ] Composables avançados
-- [ ] Temas customizáveis
-- [ ] Playground online
-
----
-
-## 📊 Métricas
-
-| Métrica | Meta | Atual | Status |
-|---------|------|-------|--------|
-| **Componentes** | 56 | 26 | 🟡 46% |
-| **Composables** | 8 | 6 | 🟡 75% |
-| **Cobertura Testes** | 95% | 95.28% (175 testes, 0 falhas) | ✅ 100% da meta |
-| **Acessibilidade** | WCAG 2.1 AA | WCAG 2.1 AA | ✅ 100% |
-| **Design System** | 100% | 100% | ✅ 100% |
-| **Documentação** | 100% | 40% | 🟡 40% |
-
----
-
-## 🎯 Próximos Passos
-
-### Prioridade Alta
-1. ✅ ~~Implementar componentes form restantes (Radio, Switch, Textarea)~~ - Concluído
-2. ✅ ~~Implementar componentes form avançados (DatePicker, FileUpload, Autocomplete)~~ - Concluído
-3. ✅ ~~Implementar componentes navigation (Navbar, Tabs, Breadcrumb)~~ - Concluído
-4. ✅ ~~Implementar componentes feedback (Toast, Progress, Spinner)~~ - Concluído
-5. ✅ ~~Implementar componentes data display (Avatar, Badge, Chip)~~ - Concluído
-6. ✅ ~~Implementar componentes layout (Container, Grid, Divider)~~ - Concluído
-7. ✅ ~~Implementar composables utility (useLocalStorage, useDebounce, useClipboard)~~ - Concluído
-8. ✅ ~~Criar arquivo index.ts para exportar todos os componentes e composables~~ - Concluído
-9. ✅ ~~Atualizar package.json com exports e types~~ - Concluído
-10. ✅ ~~Setup de testes (Vitest + Testing Library)~~ - Concluído
-11. ✅ ~~Criar testes básicos para 26 componentes~~ - Concluído
-12. ✅ ~~Criar testes básicos para 6 composables~~ - Concluído
-13. ✅ ~~Expandir testes para composables~~ - Concluído
-14. ✅ ~~Corrigir falhas de testes (Autocomplete, FileUpload, Navbar, useTheme)~~ - Concluído
-15. ✅ ~~Atingir 100% testes passando~~ - Concluído (175/175)
-16. ✅ ~~Expandir para 95% cobertura~~ - Concluído (95.28%!)
-
-### Prioridade Média
-5. 📋 Implementar feedback components (Toast, Notification, Progress)
-6. 📋 Implementar data display (List, Timeline, Avatar)
-7. 📋 Criar Storybook
-8. 📋 CI/CD pipeline
-
-### Prioridade Baixa
-9. 🟢 Componentes advanced (Carousel, Calendar, Chart)
-10. 🟢 Temas customizáveis
-11. 🟢 Playground online
-
----
-
-## 📝 Notas
-
-- **Design System**: Totalmente integrado com CSS Custom Properties
-- **Acessibilidade**: Todos os componentes seguem WCAG 2.1 AA
-- **Responsividade**: Mobile-first com breakpoints definidos
-- **TypeScript**: 100% tipado com interfaces exportadas
-- **Vue 3**: Composition API com `<script setup>`
-- **I18n**: Não incluído - usuários devem usar vue-i18n ou solução própria
-- **Router**: Não incluído - usuários devem usar vue-router
-
----
-
-**Mantido por:** Vander Loto - CTO DATAMETRIA  
-**Próxima revisão:** 27/01/2026