@datametria/vue-components 1.1.1

package/README.md

@@ -0,0 +1,473 @@
+# @datametria/vue-components
+
+[![npm version](https://img.shields.io/npm/v/@datametria/vue-components.svg)](https://www.npmjs.com/package/@datametria/vue-components)
+[![npm downloads](https://img.shields.io/npm/dm/@datametria/vue-components.svg)](https://www.npmjs.com/package/@datametria/vue-components)
+[![License](https://img.shields.io/npm/l/@datametria/vue-components)](https://github.com/datametria/DATAMETRIA-common-libraries/blob/main/LICENSE)
+[![Coverage](https://img.shields.io/badge/coverage-95.28%25-brightgreen)](./PROGRESS.md)
+[![Tests](https://img.shields.io/badge/tests-175%20passing-brightgreen)](./PROGRESS.md)
+
+> Biblioteca enterprise de componentes Vue.js 3 com Design System DATAMETRIA, acessibilidade WCAG 2.1 AA e 95.28% de cobertura de testes.
+
+## ✨ Features
+
+- 🎨 **26 Componentes** prontos para produção
+- 🧩 **6 Composables** reutilizáveis
+- ♿ **WCAG 2.1 AA** - Acessibilidade completa
+- 📱 **Mobile-first** - Responsivo em todos os dispositivos
+- 🌙 **Dark Mode** - Suporte nativo
+- 🎯 **TypeScript** - 100% tipado
+- ✅ **95.28% Coverage** - 175 testes passando
+- 🎨 **Design System** - Tokens CSS integrados
+
+## 📦 Instalação
+
+```bash
+# npm
+npm install @datametria/vue-components
+
+# yarn
+yarn add @datametria/vue-components
+
+# pnpm
+pnpm add @datametria/vue-components
+```
+
+## 🚀 Uso Rápido
+
+### Importação Global
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import DatametriaComponents from '@datametria/vue-components'
+import '@datametria/vue-components/style.css'
+
+const app = createApp(App)
+app.use(DatametriaComponents)
+app.mount('#app')
+```
+
+### Importação Individual (Recomendado)
+
+```vue
+<script setup lang="ts">
+import { DatametriaButton, DatametriaInput } from '@datametria/vue-components'
+import '@datametria/vue-components/style.css'
+import { ref } from 'vue'
+
+const email = ref('')
+const password = ref('')
+
+const handleLogin = () => {
+  console.log('Login:', email.value, password.value)
+}
+</script>
+
+<template>
+  <div class="login-form">
+    <DatametriaInput 
+      v-model="email" 
+      label="Email" 
+      type="email"
+      placeholder="seu@email.com" 
+    />
+    <DatametriaInput 
+      v-model="password" 
+      label="Senha" 
+      type="password" 
+    />
+    <DatametriaButton 
+      variant="primary" 
+      @click="handleLogin"
+    >
+      Entrar
+    </DatametriaButton>
+  </div>
+</template>
+```
+
+## 🎨 Componentes (26/56)
+
+### 🔘 Form Components (10)
+
+```vue
+<!-- Button com 4 variants e 3 sizes -->
+<DatametriaButton variant="primary" size="md" :loading="false">
+  Clique aqui
+</DatametriaButton>
+
+<!-- Input com validação -->
+<DatametriaInput 
+  v-model="value" 
+  label="Nome" 
+  :error="errorMessage"
+  required 
+/>
+
+<!-- Select com options -->
+<DatametriaSelect 
+  v-model="selected" 
+  :options="options" 
+  placeholder="Selecione..."
+/>
+
+<!-- Checkbox -->
+<DatametriaCheckbox v-model="checked" label="Aceito os termos" />
+
+<!-- Radio -->
+<DatametriaRadio v-model="selected" value="option1" label="Opção 1" />
+
+<!-- Switch -->
+<DatametriaSwitch v-model="enabled" label="Ativar notificações" />
+
+<!-- Textarea -->
+<DatametriaTextarea v-model="text" label="Mensagem" :maxlength="500" />
+
+<!-- DatePicker -->
+<DatametriaDatePicker v-model="date" label="Data" />
+
+<!-- FileUpload -->
+<DatametriaFileUpload v-model="files" :multiple="true" />
+
+<!-- Autocomplete -->
+<DatametriaAutocomplete 
+  v-model="selected" 
+  :options="options" 
+  placeholder="Buscar..."
+/>
+```
+
+### 📦 Layout Components (5)
+
+```vue
+<!-- Card com slots -->
+<DatametriaCard title="Título" subtitle="Subtítulo">
+  <template #header>Header customizado</template>
+  Conteúdo do card
+  <template #footer>Footer customizado</template>
+</DatametriaCard>
+
+<!-- Modal com teleport -->
+<DatametriaModal v-model="isOpen" title="Modal" size="md">
+  Conteúdo do modal
+</DatametriaModal>
+
+<!-- Container responsivo -->
+<DatametriaContainer size="lg" :fluid="false">
+  Conteúdo
+</DatametriaContainer>
+
+<!-- Grid responsivo -->
+<DatametriaGrid :cols="3" :gap="4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</DatametriaGrid>
+
+<!-- Divider -->
+<DatametriaDivider orientation="horizontal" :dashed="false" />
+```
+
+### 🔔 Feedback Components (4)
+
+```vue
+<!-- Alert -->
+<DatametriaAlert variant="success" :closable="true">
+  Operação realizada com sucesso!
+</DatametriaAlert>
+
+<!-- Toast -->
+<DatametriaToast 
+  v-model="showToast" 
+  variant="info" 
+  :duration="3000"
+>
+  Notificação
+</DatametriaToast>
+
+<!-- Progress -->
+<DatametriaProgress :value="75" variant="primary" />
+
+<!-- Spinner -->
+<DatametriaSpinner size="md" variant="primary" />
+```
+
+### 📊 Data Display (4)
+
+```vue
+<!-- Table -->
+<DatametriaTable :columns="columns" :data="data" />
+
+<!-- Avatar -->
+<DatametriaAvatar 
+  src="/avatar.jpg" 
+  alt="User" 
+  size="md" 
+  :rounded="true"
+/>
+
+<!-- Badge -->
+<DatametriaBadge variant="success" size="md">
+  Novo
+</DatametriaBadge>
+
+<!-- Chip -->
+<DatametriaChip 
+  variant="primary" 
+  :closable="true" 
+  @close="handleClose"
+>
+  Tag
+</DatametriaChip>
+```
+
+### 🧭 Navigation (3)
+
+```vue
+<!-- Navbar -->
+<DatametriaNavbar variant="primary" :sticky="true">
+  <template #brand>Logo</template>
+  <template #menu>Menu</template>
+  <template #actions>Actions</template>
+</DatametriaNavbar>
+
+<!-- Breadcrumb -->
+<DatametriaBreadcrumb :items="breadcrumbs" separator="/" />
+
+<!-- Tabs -->
+<DatametriaTabs v-model="activeTab" :tabs="tabs" />
+```
+
+## 🧩 Composables (6/8)
+
+### useTheme - Dark Mode
+
+```typescript
+import { useTheme } from '@datametria/vue-components'
+
+const { isDark, toggle, setDark, setLight } = useTheme()
+
+// Toggle dark mode
+toggle()
+
+// Set específico
+setDark()
+setLight()
+
+// Verifica estado
+console.log(isDark.value) // true/false
+```
+
+### useValidation - Validators
+
+```typescript
+import { useValidation } from '@datametria/vue-components'
+
+const { required, email, minLength, maxLength, pattern, custom } = useValidation()
+
+// Validar campo
+const isValid = required(value) // boolean
+const isEmail = email('test@example.com') // boolean
+const isMin = minLength(5)('texto') // boolean
+```
+
+### useAPI - HTTP Client
+
+```typescript
+import { useAPI } from '@datametria/vue-components'
+
+const { get, post, put, delete: del, loading, error, data } = useAPI()
+
+// GET request
+await get('/api/users')
+console.log(data.value) // Response data
+
+// POST request
+await post('/api/users', { name: 'John' })
+
+// Loading state
+console.log(loading.value) // true/false
+
+// Error handling
+if (error.value) {
+  console.error(error.value)
+}
+```
+
+### useLocalStorage - Sync Storage
+
+```typescript
+import { useLocalStorage } from '@datametria/vue-components'
+
+const user = useLocalStorage('user', { name: 'Default' })
+
+// Auto-sync com localStorage
+user.value = { name: 'John' }
+// localStorage.setItem('user', '{"name":"John"}')
+
+console.log(user.value) // { name: 'John' }
+```
+
+### useDebounce - Delay Input
+
+```typescript
+import { useDebounce } from '@datametria/vue-components'
+import { ref } from 'vue'
+
+const search = ref('')
+const debouncedSearch = useDebounce(search, 300)
+
+// search muda imediatamente
+// debouncedSearch muda após 300ms
+watch(debouncedSearch, (value) => {
+  console.log('Buscar:', value)
+})
+```
+
+### useClipboard - Copy/Paste
+
+```typescript
+import { useClipboard } from '@datametria/vue-components'
+
+const { copy, read, copied, error } = useClipboard()
+
+// Copiar texto
+await copy('Texto para copiar')
+console.log(copied.value) // true (auto-reset após 2s)
+
+// Ler clipboard
+const text = await read()
+console.log(text)
+```
+
+## 🎨 Design System
+
+### Brand Colors
+
+```css
+/* Primary */
+--dm-primary: #0072CE; /* Azul DATAMETRIA */
+--dm-primary-dark: #005ba3;
+--dm-primary-light: #3399ff;
+
+/* Secondary */
+--dm-secondary: #4B0078; /* Roxo DATAMETRIA */
+--dm-secondary-dark: #3a005c;
+--dm-secondary-light: #6b00a8;
+
+/* Semantic Colors */
+--dm-success: #10b981;
+--dm-warning: #f59e0b;
+--dm-error: #ef4444;
+--dm-info: #3b82f6;
+```
+
+### Spacing System
+
+```css
+--dm-space-1: 0.25rem;  /* 4px */
+--dm-space-2: 0.5rem;   /* 8px */
+--dm-space-3: 0.75rem;  /* 12px */
+--dm-space-4: 1rem;     /* 16px */
+--dm-space-6: 1.5rem;   /* 24px */
+--dm-space-8: 2rem;     /* 32px */
+```
+
+### Typography
+
+```css
+--dm-text-xs: 0.75rem;   /* 12px */
+--dm-text-sm: 0.875rem;  /* 14px */
+--dm-text-base: 1rem;    /* 16px */
+--dm-text-lg: 1.125rem;  /* 18px */
+--dm-text-xl: 1.25rem;   /* 20px */
+--dm-text-2xl: 1.5rem;   /* 24px */
+```
+
+### Features
+
+- ✅ **Design Tokens** - CSS Custom Properties
+- ✅ **WCAG 2.1 AA** - Contraste 4.5:1 mínimo
+- ✅ **Mobile-first** - Breakpoints responsivos
+- ✅ **Dark Mode** - Suporte nativo com useTheme
+- ✅ **TypeScript** - 100% tipado
+- ✅ **Tree-shaking** - Import apenas o necessário
+
+## 📊 Status do Projeto
+
+| Categoria | Implementado | Total | Progresso |
+|-----------|--------------|-------|-----------|
+| **Componentes** | 26 | 56 | 46% 🟡 |
+| **Composables** | 6 | 8 | 75% 🟡 |
+| **Testes** | 175 | 175 | 100% ✅ |
+| **Coverage** | 95.28% | 95% | 100% ✅ |
+| **Design System** | 100% | 100% | 100% ✅ |
+| **Acessibilidade** | 100% | 100% | 100% ✅ |
+| **Documentação** | 40% | 100% | 40% 🟡 |
+
+### Métricas de Qualidade
+
+- ✅ **175/175 testes passando** (100%)
+- ✅ **95.28% coverage** (statements)
+- ✅ **77.6% branches** | **76.38% functions**
+- ✅ **Composables: 100% coverage**
+- ✅ **Componentes: 94.09% coverage**
+
+Veja [PROGRESS.md](./PROGRESS.md) para detalhes completos.
+
+## 📚 Documentação Completa
+
+- 📖 [README.md](./README.md) - Este arquivo
+- ♿ [ACCESSIBILITY.md](./ACCESSIBILITY.md) - Guia WCAG 2.1 AA
+- 🎨 [DESIGN-SYSTEM.md](./DESIGN-SYSTEM.md) - Design tokens e uso
+- 📊 [PROGRESS.md](./PROGRESS.md) - Status de implementação
+- 🎓 [LESSONS-LEARNED.md](./LESSONS-LEARNED.md) - Lições aprendidas
+- 📦 [PUBLISHING.md](./PUBLISHING.md) - Guia de publicação NPM
+
+## 🤝 Contribuindo
+
+Contribuições são bem-vindas! Por favor:
+
+1. Fork o repositório
+2. Crie uma branch: `git checkout -b feature/nova-feature`
+3. Commit suas mudanças: `git commit -m 'feat: adiciona nova feature'`
+4. Push para a branch: `git push origin feature/nova-feature`
+5. Abra um Pull Request
+
+### Desenvolvimento Local
+
+```bash
+# Clone o repositório
+git clone https://github.com/datametria/DATAMETRIA-common-libraries.git
+cd DATAMETRIA-common-libraries/packages/vue-components
+
+# Instale dependências
+npm install
+
+# Rode testes
+npm test
+
+# Build
+npm run build
+```
+
+## 📄 Licença
+
+MIT © 2025 DATAMETRIA
+
+## 👥 Equipe
+
+- **Vander Loto** - CTO DATAMETRIA
+- **Marcelo Loto** - Tech Lead
+- **Dalila Rodrigues** - Senior Developer
+
+## 🔗 Links
+
+- 📦 [NPM Package](https://www.npmjs.com/package/@datametria/vue-components)
+- 🐙 [GitHub Repository](https://github.com/datametria/DATAMETRIA-common-libraries)
+- 🌐 [DATAMETRIA Website](https://datametria.io)
+- 💬 [Discord Community](https://discord.gg/kKYGmCC3)
+
+---
+
+**Desenvolvido com ❤️ pela equipe DATAMETRIA**