Anjuna Components

Biblioteca de componentes Vue 3 moderna, com TypeScript e tipagens incluídas.

Instalação

npm install @edilsonjrdev99/anjuna-components-ui

Dependências necessárias:

npm install vue @lucide/vue

Uso

Importe o CSS global uma vez na entrada da sua aplicação:

import '@edilsonjrdev99/anjuna-components-ui/style.css'

Depois importe os componentes onde precisar:

import { Button, Input, Modal } from '@edilsonjrdev99/anjuna-components-ui'

<template>
  <Button variant="primary" @click="salvar">Salvar</Button>
</template>

Componentes disponíveis

| Componente | Descrição | | --- | --- | | Accordion | Seções expansíveis | | Alert | Mensagens de alerta e feedback | | Avatar | Imagem ou iniciais de usuário | | Badge | Etiqueta de status ou contagem | | Breadcrumb | Navegação hierárquica | | Button | Botão com variantes e tamanhos | | ButtonIcon | Botão apenas com ícone | | Card | Container de conteúdo | | Checkbox | Caixa de seleção | | ColorSwatch | Amostra de cor selecionável | | Drawer | Painel lateral deslizante | | EmptyState | Estado vazio com ação | | Input | Campo de texto | | Modal | Diálogo/modal | | Pagination | Navegação entre páginas | | Price | Exibição de preço formatado | | Progress | Barra de progresso | | QuantityInput | Input de quantidade com incremento/decremento | | Radio | Botão de seleção única | | Rating | Avaliação por estrelas | | Select | Campo de seleção customizado | | Tabs | Abas de navegação | | Tag | Etiqueta removível | | Toggle | Chave liga/desliga | | Tooltip | Dica flutuante | | ToastProvider + useToast | Notificações toast |

Toast

O Toast requer o ToastProvider na raiz da aplicação e o composable useToast para disparar notificações:

// main.ts
import { createApp } from 'vue'
import { ToastProvider } from '@edilsonjrdev99/anjuna-components-ui'

const app = createApp(App)
app.component('ToastProvider', ToastProvider)

<template>
  <ToastProvider />
</template>

import { useToast } from '@edilsonjrdev99/anjuna-components-ui'

const { toast } = useToast()

toast('Mensagem simples')
toast.success('Salvo com sucesso!')
toast.error('Algo deu errado.')
toast.warning('Atenção!')

Design tokens

Importe o style.css para ter acesso às variáveis CSS globais com suporte automático a light/dark via prefers-color-scheme:

• --color-bg — background da página
• --color-text — cor de texto

Stack

• Vue 3 com <script setup> + TypeScript
• Vite — bundler
• Lucide Vue — ícones