Package Exports

@datametria/vue-components

Readme

@datametria/vue-components

Vue.js Component Library com Sistema de Theming Multi-Brand/Multi-Tenant

🚀 Demo • 📖 Documentação • 🐛 Reportar Bug • 💡 Solicitar Feature • 🔄 Migration Guide

Versão: 2.1.0 Data: 19/11/2025 Autor: Vander Loto - CTO DATAMETRIA

🎯 Sobre o Projeto

Visão Geral

Biblioteca completa de componentes Vue.js 3 com suporte a theming multi-brand/multi-tenant, design system DATAMETRIA e compliance WCAG 2.1 AA. Desenvolvida com foco em reutilização, qualidade e performance.

Objetivos

🎨 Theming Flexível: Sistema multi-brand/multi-tenant com CSS Variables
📱 Backward Compatible: 100% compatível com v1.x
⚡ Performance: Zero overhead, bundle otimizado
♿ Acessibilidade: WCAG 2.1 AA compliant
🧪 Qualidade: 98.2% cobertura de testes

Benefícios

✅ 30+ Componentes: Com theming integrado
✅ TypeScript: Type safety completo
✅ Responsive: Mobile-first design
✅ Dark Mode: Suporte nativo
✅ Tree Shaking: Bundle otimizado

🌟 Novidades v2.0

Sistema de Theming Multi-Brand/Multi-Tenant

🎨 ThemeProvider: Componente para gerenciar temas
🔄 CSS Variables: Tokens customizáveis com fallback automático
🎯 useTheme: Composable para acessar tema
🏢 Multi-Tenant: Suporte a múltiplas marcas simultaneamente
📱 Backward Compatible: 100% compatível com v1.x

Novidades v2.1.0

🏗️ Novos Componentes de Navegação
- DatametriaSidebar: Sidebar lateral com colapso
- DatametriaFloatingBar: Barra flutuante para ações rápidas
⬆️ DatametriaTabs Melhorado
- Variantes: default, pills, underline
- Orientação: horizontal e vertical
- Ícones, badges e tabs desabilitáveis
🧪 Testes: +62 testes (100% coverage)
📚 Documentação: 3 novos guias completos

📦 Instalação

NPM

npm install @datametria/vue-components@^2.1.0

Yarn

yarn add @datametria/vue-components@^2.1.0

Pré-requisitos

Vue.js: 3.3+
Node.js: 18+
TypeScript: 5.3+ (opcional, mas recomendado)

🚀 Uso Básico

Sem Theming (v1.x compatível)

<template>
  <div>
    <DatametriaButton variant="primary">Botão Padrão</DatametriaButton>
    <DatametriaCard>
      <h3>Card Padrão</h3>
      <p>Usando design system DATAMETRIA.</p>
    </DatametriaCard>
  </div>
</template>

<script setup lang="ts">
import { DatametriaButton, DatametriaCard } from '@datametria/vue-components'
</script>

Com Theming (v2.0)

<template>
  <ThemeProvider :theme="meuTema">
    <div>
      <DatametriaButton variant="primary">Botão Customizado</DatametriaButton>
      <DatametriaCard>
        <h3>Card Customizado</h3>
        <p>Usando tema personalizado.</p>
      </DatametriaCard>
    </div>
  </ThemeProvider>
</template>

<script setup lang="ts">
import { ThemeProvider, DatametriaButton, DatametriaCard } from '@datametria/vue-components'
import type { Theme } from '@datametria/vue-components'

const meuTema: Theme = {
  name: 'Minha Empresa',
  tokens: {
    colors: {
      primary: '#ff6b35',
      secondary: '#004e89',
      success: '#22c55e',
      warning: '#eab308',
      error: '#ef4444',
      info: '#3b82f6',
      neutral: {
        50: '#f8fafc',
        100: '#f1f5f9',
        200: '#e2e8f0',
        300: '#cbd5e1',
        400: '#94a3b8',
        500: '#64748b',
        600: '#475569',
        700: '#334155',
        800: '#1e293b',
        900: '#0f172a'
      }
    },
    typography: {
      fontFamily: {
        sans: 'Inter, sans-serif',
        mono: 'JetBrains Mono, monospace'
      },
      fontSize: {
        xs: '0.75rem',
        sm: '0.875rem',
        base: '1rem',
        lg: '1.125rem',
        xl: '1.25rem',
        '2xl': '1.5rem'
      },
      fontWeight: {
        normal: 400,
        medium: 500,
        semibold: 600,
        bold: 700
      },
      lineHeight: {
        tight: 1.25,
        normal: 1.5,
        relaxed: 1.75
      }
    },
    spacing: {
      0: '0',
      1: '0.25rem',
      2: '0.5rem',
      3: '0.75rem',
      4: '1rem',
      6: '1.5rem',
      8: '2rem',
      12: '3rem',
      16: '4rem'
    },
    radius: {
      none: '0',
      sm: '0.25rem',
      md: '0.375rem',
      lg: '0.5rem',
      full: '9999px'
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)'
    },
    transitions: {
      fast: '150ms ease',
      base: '250ms ease',
      slow: '350ms ease'
    }
  }
}
</script>

🎨 Sistema de Theming

useTheme Composable

<template>
  <div>
    <h1 :style="{ color: theme.tokens.colors.primary }">
      Título com cor do tema
    </h1>
    <p>Tema atual: {{ theme.name }}</p>
  </div>
</template>

<script setup lang="ts">
import { useTheme } from '@datametria/vue-components'

const theme = useTheme()
</script>

Temas Pré-definidos

<script setup lang="ts">
import {
  ThemeProvider,
  datametriaTheme,
  defaultTheme
} from '@datametria/vue-components'

// Usar tema DATAMETRIA (padrão)
const tema = datametriaTheme

// Ou tema genérico
const tema = defaultTheme
</script>

Multi-Tenant

<template>
  <div>
    <select v-model="tenantAtual">
      <option value="datametria">DATAMETRIA</option>
      <option value="clienteA">Cliente A</option>
      <option value="clienteB">Cliente B</option>
    </select>

    <ThemeProvider :theme="temas[tenantAtual]">
      <MeuApp />
    </ThemeProvider>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { datametriaTheme } from '@datametria/vue-components'

const tenantAtual = ref('datametria')
const temas = {
  datametria: datametriaTheme,
  clienteA: clienteATheme,
  clienteB: clienteBTheme
}
</script>

📚 Componentes Disponíveis

Forms & Inputs (13 componentes)

DatametriaButton - Botão com múltiplas variações + theming
DatametriaInput - Input com validação + theming
DatametriaPasswordInput - Input de senha com força + theming
DatametriaSelect - Select customizável + theming
DatametriaCheckbox - Checkbox estilizado + theming
DatametriaRadio - Radio button + theming
DatametriaSwitch - Toggle switch + theming
DatametriaTextarea - Textarea redimensionável + theming
DatametriaDatePicker - Seletor de data + theming
DatametriaTimePicker - Seletor de hora + theming
DatametriaSlider - Slider de valores + theming
DatametriaFileUpload - Upload de arquivos + theming
DatametriaAutocomplete - Busca com autocomplete + theming

DatametriaCard - Card container + theming
DatametriaModal - Modal dialog + theming
DatametriaContainer - Container responsivo + theming
DatametriaGrid - Sistema de grid + theming
DatametriaDivider - Divisor visual + theming

Feedback (6 componentes)

DatametriaAlert - Alertas contextuais + theming
DatametriaToast - Notificações toast + theming
DatametriaTooltip - Tooltip informativo + theming
DatametriaSkeleton - Loading skeleton + theming
DatametriaProgress - Barra de progresso + theming
DatametriaSpinner - Loading spinner + theming

Data Display (5 componentes)

DatametriaTable - Tabela básica + theming
DatametriaSortableTable - Tabela com ordenação + theming
DatametriaAvatar - Avatar de usuário + theming
DatametriaBadge - Badge de status + theming
DatametriaChip - Chip removível + theming

DatametriaNavbar - Barra de navegação + theming
DatametriaSidebar - Sidebar lateral com colapso + theming ✨ NOVO v2.1
DatametriaFloatingBar - Barra flutuante para ações + theming ✨ NOVO v2.1
DatametriaMenu - Menu dropdown + theming
DatametriaBreadcrumb - Navegação breadcrumb + theming
DatametriaTabs - Abas navegáveis (melhorado v2.1) + theming

Theming System (3 componentes)

ThemeProvider - Provider de tema
useTheme - Composable para acessar tema
Presets: datametriaTheme, defaultTheme

Total: 32 componentes com theming

🎯 Características

✅ Theming v2.0

Multi-Brand: Suporte a múltiplas marcas
Multi-Tenant: Múltiplos tenants simultaneamente
CSS Variables: Tokens customizáveis
Fallback Values: Funciona sem ThemeProvider
Performance: Zero overhead

✅ Qualidade

TypeScript: Type safety completo
WCAG 2.1 AA: Compliance de acessibilidade
Responsive: Mobile-first design
Dark Mode: Suporte nativo
98.1% Coverage: Testes automatizados

✅ Developer Experience

Composition API: Vue 3 nativo
Tree Shaking: Bundle otimizado
Hot Reload: Desenvolvimento rápido
Storybook: Documentação interativa

📖 Documentação

Guias de Theming

Getting Started - Introdução ao sistema
Creating Themes - Criar temas customizados
Multi-Tenant - Sistema multi-tenant
Migration Guide - Migração v1 → v2

Exemplos

Multi-Tenant App - Aplicação demo
Storybook Setup - Configuração Storybook

API Reference

Components API - Referência completa de componentes
Theming API - API do sistema de theming
Types - Interfaces TypeScript

🔄 Migração v1.x → v2.0

Compatibilidade

✅ 100% Backward Compatible: Código v1.x funciona sem mudanças
✅ Opt-in Theming: ThemeProvider é opcional
✅ Zero Breaking Changes: Sem quebras de API

Migração Gradual

<!-- v1.x - Continua funcionando -->
<DatametriaButton variant="primary">Botão</DatametriaButton>

<!-- v2.0 - Com theming (opcional) -->
<ThemeProvider :theme="meuTema">
  <DatametriaButton variant="primary">Botão</DatametriaButton>
</ThemeProvider>

Consulte o Migration Guide para instruções detalhadas.

🛠️ Desenvolvimento

Scripts

# Desenvolvimento
npm run dev

# Build
npm run build

# Testes
npm run test
npm run test:coverage

# Linting
npm run lint
npm run type-check

Estrutura

src/
├── components/          # 32 componentes
├── composables/         # 10 composables
├── theme/              # Sistema de theming (novo!)
│   ├── ThemeProvider.vue
│   ├── useTheme.ts
│   ├── types.ts
│   ├── presets/
│   └── tokens/
├── types/              # Tipos TypeScript
└── index.ts            # Exports principais

Contribuindo

Fork o projeto
Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
Commit suas mudanças (git commit -m 'Add some AmazingFeature')
Push para a branch (git push origin feature/AmazingFeature)
Abra um Pull Request

📊 Métricas

Performance

Bundle Size: ~45KB (gzipped)
Render Time: < 100ms
Theme Switch: < 50ms
Tree Shaking: Suporte completo

Qualidade

Componentes: 32 com theming
Cobertura: 98.1% testes
TypeScript: 100% tipado
Acessibilidade: WCAG 2.1 AA

Compatibilidade

Vue.js: 3.3+
Browsers: Chrome 90+, Firefox 88+, Safari 14+
Node.js: 18+
TypeScript: 5.3+

📞 Suporte

Canais de Suporte

📧 Email: suporte@datametria.io
💬 Discord: discord.gg/kKYGmCC3
🐛 Issues: GitHub Issues
📖 Docs: Documentação Completa

Recursos Úteis

Theming Documentation - Documentação completa
Migration Guide - Guia de migração
Multi-Tenant Example - Exemplo prático
Storybook Setup - Configuração Storybook

📄 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

Resumo da Licença

✅ Uso Comercial: Permitido
✅ Modificação: Permitida
✅ Distribuição: Permitida
✅ Uso Privado: Permitido

🙏 Agradecimentos

Equipe DATAMETRIA

Vander Loto - CTO, Arquitetura e Implementação
Marcelo Cunha - CEO, Visão Estratégica
Dalila Rodrigues - Tech Lead, Qualidade e Supervisão

Tecnologias

Vue.js Team - Framework incrível
TypeScript Team - Type safety excepcional
Amazon Q Developer - 90% da implementação automatizada

Desenvolvido com ❤️ pela equipe DATAMETRIA

⭐ Se este projeto te ajudou, considere dar uma estrela! ⭐