README

Componentes Vue 3 e CSS para projetos Laravel - Tema Rumo BR. Uma biblioteca completa de componentes UI baseados em shadcn/ui, prontos para uso em aplicações Laravel com Vue 3.

📋 Requisitos

PHP 8.1 ou superior
Laravel 10.0 ou superior (suporta Laravel 11 e 12)
Vue 3.3 ou superior
Node.js e NPM (para build dos assets)

🚀 Instalação

1. Instalar via Composer

composer require nunes/rumobr-theme

2. Publicar Componentes e Assets

php artisan rumobr-theme:publish

Este comando publica:

Componentes Vue em resources/js/components/
Páginas de exemplo em resources/js/pages/
CSS em resources/css/

Para sobrescrever arquivos existentes, use a flag --force:

php artisan rumobr-theme:publish --force

3. Compilar Assets

npm run build

ou em modo de desenvolvimento:

npm run dev

📦 Componentes Disponíveis

Componentes UI Base

O pacote inclui uma biblioteca completa de componentes UI baseados em shadcn/ui:

Navegação e Layout

Alert - Alertas e notificações
Avatar - Avatar de usuário
Badge - Badges e etiquetas
Breadcrumb - Navegação breadcrumb completa
Button - Botões com múltiplas variantes
Card - Cards com header, content e footer
Dialog - Modais e diálogos
Dropdown Menu - Menus dropdown
Navigation Menu - Menu de navegação
Separator - Separadores visuais
Sheet - Painéis laterais (drawer)
Sidebar - Sistema completo de sidebar
Tooltip - Tooltips informativos

Formulários

Checkbox - Checkboxes
Input - Campos de entrada
Input OTP - Input para códigos OTP
Label - Labels para formulários
Toggle Group - Grupo de toggles

Feedback e Utilitários

Collapsible - Elementos colapsáveis
Skeleton - Placeholders de carregamento
Spinner - Indicadores de carregamento

Componentes de Layout

AppShell - Shell principal da aplicação
AppHeader - Cabeçalho da aplicação
AppSidebar - Sidebar da aplicação
AppContent - Container de conteúdo
AppLogo - Logo da aplicação
AppLogoIcon - Ícone do logo
Breadcrumbs - Componente de breadcrumbs
Heading - Títulos e cabeçalhos

Componentes de Navegação

NavMain - Navegação principal
NavFooter - Rodapé de navegação
NavUser - Menu do usuário
UserMenuContent - Conteúdo do menu do usuário
UserInfo - Informações do usuário

Componentes Funcionais

Modal - Modal customizado
AlertError - Alertas de erro
AlertGeral - Alertas gerais
InputError - Mensagens de erro para inputs
TextLink - Links estilizados
DeleteUser - Componente para deletar usuário
TwoFactorSetupModal - Modal de configuração 2FA
TwoFactorRecoveryCodes - Códigos de recuperação 2FA
AppearanceTabs - Tabs de aparência (tema claro/escuro)
PlaceholderPattern - Padrões de placeholder

💻 Uso

Importar Componentes

Após publicar os componentes, você pode importá-los em seu app.js ou resources/js/app.js:

import { createApp } from 'vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import AppShell from '@/components/AppShell.vue';
import AppHeader from '@/components/AppHeader.vue';
import AppSidebar from '@/components/AppSidebar.vue';

// Importar CSS
import '@/css/app.css';

const app = createApp({});

// Registrar componentes globalmente (opcional)
app.component('Button', Button);
app.component('Card', Card);
app.component('CardContent', CardContent);
app.component('CardHeader', CardHeader);
app.component('CardTitle', CardTitle);

app.mount('#app');

Exemplo de Uso - Button

<template>
  <Button variant="default" size="lg">
    Clique aqui
  </Button>
  
  <Button variant="destructive" size="sm">
    Deletar
  </Button>
  
  <Button variant="outline" :disabled="isLoading">
    Salvar
  </Button>
</template>

<script setup>
import { Button } from '@/components/ui/button';
</script>

Exemplo de Uso - Card

<template>
  <Card>
    <CardHeader>
      <CardTitle>Título do Card</CardTitle>
    </CardHeader>
    <CardContent>
      <p>Conteúdo do card aqui...</p>
    </CardContent>
  </Card>
</template>

<script setup>
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
</script>

Exemplo de Uso - Dialog (Modal)

<template>
  <Dialog v-model:open="isOpen">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Título do Modal</DialogTitle>
      </DialogHeader>
      <p>Conteúdo do modal aqui...</p>
    </DialogContent>
  </Dialog>
</template>

<script setup>
import { ref } from 'vue';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';

const isOpen = ref(false);
</script>

Exemplo de Uso - Layout Completo

<template>
  <AppShell>
    <AppSidebar />
    <div class="flex flex-col flex-1">
      <AppHeader :breadcrumbs="breadcrumbs" />
      <AppContent>
        <!-- Seu conteúdo aqui -->
      </AppContent>
    </div>
  </AppShell>
</template>

<script setup>
import AppShell from '@/components/AppShell.vue';
import AppSidebar from '@/components/AppSidebar.vue';
import AppHeader from '@/components/AppHeader.vue';
import AppContent from '@/components/AppContent.vue';

const breadcrumbs = [
  { title: 'Home', href: '/' },
  { title: 'Dashboard', href: '/dashboard' },
];
</script>

📁 Estrutura de Arquivos Publicados

Após executar php artisan rumobr-theme:publish, os seguintes arquivos serão criados:

resources/
├── js/
│   ├── components/
│   │   ├── ui/              # Componentes UI base
│   │   ├── AppShell.vue
│   │   ├── AppHeader.vue
│   │   ├── AppSidebar.vue
│   │   └── ...              # Outros componentes
│   └── pages/
│       └── padrao/          # Páginas de exemplo
│           ├── AlertasToast.vue
│           ├── Botoes.vue
│           ├── Cores.vue
│           ├── Inputs.vue
│           └── Modal.vue
└── css/
    └── app.css              # Estilos CSS

🎨 Páginas de Exemplo

O pacote inclui páginas de exemplo que demonstram o uso dos componentes:

AlertasToast.vue - Exemplos de alertas e toasts
Botoes.vue - Exemplos de botões e variantes
Cores.vue - Paleta de cores do tema
Inputs.vue - Exemplos de campos de formulário
Modal.vue - Exemplos de modais e diálogos

🔧 Configuração

O Service Provider é registrado automaticamente pelo Laravel. Não é necessária configuração adicional.

📝 Comandos Disponíveis

Publicar Assets

php artisan rumobr-theme:publish

Publica todos os componentes, páginas e CSS.

Publicar com Força

php artisan rumobr-theme:publish --force

Sobrescreve arquivos existentes.

🧪 Testes

composer test

phpunit

🎯 Suporte

Issues: GitHub Issues
Source: GitHub Repository
Email: leandro.nunes@rumobr.com

👤 Autor

Leandro Nunes

GitHub: @leandrorumobr
Email: leandro.nunes@rumobr.com

📄 Licença

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

🙏 Agradecimentos

Este projeto utiliza componentes baseados em shadcn/ui e Reka UI.

Desenvolvido com ❤️ pela equipe Rumo BR

nunes / rumobr-theme

Maintainers

Package info

Statistics

Security