@datametria/vue-components

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

# npm
npm install @datametria/vue-components

# yarn
yarn add @datametria/vue-components

# pnpm
pnpm add @datametria/vue-components

🚀 Uso Rápido

Importação Global

// 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)

<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)

<!-- 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)

<!-- 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)

<!-- 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)

<!-- 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)

<!-- 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

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

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

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

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

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

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

/* 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

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

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

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 para detalhes completos.

📚 Documentação Completa

• 📖 README.md - Este arquivo
• ♿ ACCESSIBILITY.md - Guia WCAG 2.1 AA
• 🎨 DESIGN-SYSTEM.md - Design tokens e uso
• 📊 PROGRESS.md - Status de implementação
• 🎓 LESSONS-LEARNED.md - Lições aprendidas
• 📦 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

# 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
• Dalila Rodrigues - Tech Lead

🔗 Links

• 📦 NPM Package
• 🐙 GitHub Repository
• 🌐 DATAMETRIA Website
• 💬 Discord Community

Desenvolvido com ❤️ pela equipe DATAMETRIA