build
This commit is contained in:
parent
63d943d0df
commit
f396203085
22 changed files with 1476 additions and 1357 deletions
289
IA.md
289
IA.md
|
|
@ -15,6 +15,7 @@ Biblioteca (Design System) de componentes para **Vue 3** com **TypeScript** e in
|
|||
|
||||
- O `eli-vue` **não cria** nem configura Vuetify no seu projeto.
|
||||
- `vue` e `vuetify` são **peerDependencies**: o projeto consumidor precisa ter ambos instalados.
|
||||
- O pacote utiliza internamente **lucide-vue-next** para ícones.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -29,9 +30,11 @@ pnpm add eli-vue
|
|||
Se o projeto ainda não tiver as peer dependencies, instale também:
|
||||
|
||||
```bash
|
||||
pnpm add vue vuetify
|
||||
pnpm add vue vuetify lucide-vue-next
|
||||
```
|
||||
|
||||
> Nota: `lucide-vue-next` é recomendado para passar ícones compatíveis aos componentes (como `EliTabela`).
|
||||
|
||||
---
|
||||
|
||||
## Uso recomendado
|
||||
|
|
@ -82,6 +85,28 @@ import "eli-vue/dist/eli-vue.css";
|
|||
|
||||
---
|
||||
|
||||
## Tipagem e Helpers
|
||||
|
||||
O pacote exporta tipos e funções utilitárias essenciais para o desenvolvimento com TypeScript.
|
||||
|
||||
```ts
|
||||
import {
|
||||
// Componentes
|
||||
EliTabela,
|
||||
|
||||
// Helpers
|
||||
celulaTabela,
|
||||
|
||||
// Tipos
|
||||
EliTabelaConsulta,
|
||||
EliColuna,
|
||||
EliTabelaAcao,
|
||||
CartaoStatus // Tipos compartilhados
|
||||
} from "eli-vue";
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Exemplos mínimos
|
||||
|
||||
### Botão
|
||||
|
|
@ -214,6 +239,7 @@ import { defineComponent, ref } from "vue";
|
|||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
// Exemplo de valor ISO vindo do backend/banco
|
||||
const dataHora = ref<string | null>("2026-01-09T16:15:00Z");
|
||||
const data = ref<string | null>("2026-01-09T00:00:00-03:00");
|
||||
return { dataHora, data };
|
||||
|
|
@ -224,71 +250,173 @@ export default defineComponent({
|
|||
|
||||
---
|
||||
|
||||
## EliTabela (com filtro avançado)
|
||||
## Outros Componentes
|
||||
|
||||
O componente `EliTabela` suporta:
|
||||
- ordenação
|
||||
- paginação
|
||||
- caixa de busca
|
||||
- **filtro avançado (modal)**
|
||||
### EliBadge (Indicador)
|
||||
|
||||
### Contrato da tabela (resumo)
|
||||
Badge aprimorado que suporta raios predefinidos ("suave" | "pill").
|
||||
|
||||
O tipo principal é `EliTabelaConsulta<T>` (genérico), exportado de `eli-vue`.
|
||||
|
||||
O `filtroAvancado` é uma lista de filtros pré-definidos (o usuário só escolhe quais usar e informa valores):
|
||||
|
||||
```ts
|
||||
filtroAvancado?: {
|
||||
rotulo: string
|
||||
coluna: keyof T
|
||||
operador: string // ex.: "like", "=", ">", "in", "isNull"
|
||||
entrada: ["texto" | "numero" | "dataHora", { rotulo: string; ... }]
|
||||
}[]
|
||||
```vue
|
||||
<template>
|
||||
<EliBadge :badge="3" color="error" radius="pill">
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</EliBadge>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Exemplo mínimo
|
||||
### EliCartao
|
||||
|
||||
```ts
|
||||
import { EliTabela, celulaTabela } from "eli-vue";
|
||||
import type { EliTabelaConsulta } from "eli-vue";
|
||||
import type { ComponenteEntrada } from "eli-vue/dist/types/componentes/EliEntrada/tiposEntradas";
|
||||
Cartão padronizado para representar itens de domínio (ex: propostas) com status coloridos automaticamente.
|
||||
|
||||
type Linha = { nome: string; documento: string; email: string };
|
||||
> **Importante**: O status deve ser um dos valores do tipo `CartaoStatus` ("novo" | "rascunho" | "vendido" | "cancelado").
|
||||
|
||||
const tabela: EliTabelaConsulta<Linha> = {
|
||||
nome: "Exemplo",
|
||||
mostrarCaixaDeBusca: true,
|
||||
registros_por_consulta: 10,
|
||||
colunas: [
|
||||
{ rotulo: "Nome", celula: (l) => celulaTabela("textoSimples", { texto: l.nome }), visivel: true },
|
||||
],
|
||||
filtroAvancado: [
|
||||
{
|
||||
rotulo: "Documento",
|
||||
coluna: "documento",
|
||||
operador: "like",
|
||||
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as unknown as ComponenteEntrada,
|
||||
},
|
||||
],
|
||||
consulta: async () => ({
|
||||
cod: 0,
|
||||
eCerto: true,
|
||||
eErro: false,
|
||||
mensagem: undefined,
|
||||
valor: { quantidade: 0, valores: [] },
|
||||
}),
|
||||
};
|
||||
```vue
|
||||
<template>
|
||||
<EliCartao
|
||||
titulo="Proposta #123"
|
||||
status="novo"
|
||||
variant="outlined"
|
||||
>
|
||||
<!-- Conteúdo principal (default slot) -->
|
||||
<div class="text-body-2">Cliente: ACME Corp</div>
|
||||
<div class="text-caption text-medium-emphasis">Criado há 2 dias</div>
|
||||
|
||||
<!-- Ações (slot 'acoes') -->
|
||||
<template #acoes>
|
||||
<EliBotao variant="text" size="small">Ver detalhes</EliBotao>
|
||||
</template>
|
||||
</EliCartao>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
// O tipo CartaoStatus é exportado para ajudar na tipagem
|
||||
import type { CartaoStatus } from "eli-vue";
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const statusAtual: CartaoStatus = "novo";
|
||||
return { statusAtual };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Células da EliTabela (celulaTabela)
|
||||
## EliTabela (Tabela Avançada)
|
||||
|
||||
O `eli-vue` expõe o helper `celulaTabela(tipo, dados)` para construir células tipadas.
|
||||
O componente `EliTabela` suporta ordenação, paginação, busca e **filtro avançado**.
|
||||
Para type-safety, recomenda-se definir a estrutura da consulta usando `EliTabelaConsulta<T>`.
|
||||
|
||||
Tipos disponíveis atualmente:
|
||||
### Exemplo Completo Tipado
|
||||
|
||||
```ts
|
||||
import { defineComponent } from "vue";
|
||||
import { EliTabela, celulaTabela } from "eli-vue";
|
||||
import type { EliTabelaConsulta } from "eli-vue";
|
||||
import type { ComponenteEntrada } from "eli-vue/dist/types/componentes/EliEntrada/tiposEntradas";
|
||||
// ^ Nota: Tipos internos podem precisar de caminho completo se não exportados na raiz.
|
||||
// Melhor prática: use 'any' ou 'unknown' castado se o tipo não estiver disponível,
|
||||
// mas `EliTabelaConsulta` geralmente infere.
|
||||
|
||||
import { BadgeCheck, Pencil } from "lucide-vue-next";
|
||||
|
||||
// 1. Defina o tipo da linha
|
||||
type Usuario = {
|
||||
id: number;
|
||||
nome: string;
|
||||
documento: string;
|
||||
email: string;
|
||||
ativo: boolean;
|
||||
criado_em: string;
|
||||
};
|
||||
|
||||
// 2. Defina a configuração da tabela
|
||||
const tabelaUsuarios: EliTabelaConsulta<Usuario> = {
|
||||
nome: "Usuarios",
|
||||
mostrarCaixaDeBusca: true,
|
||||
registros_por_consulta: 10,
|
||||
|
||||
// Colunas
|
||||
colunas: [
|
||||
{
|
||||
rotulo: "Nome",
|
||||
celula: (row) => celulaTabela("textoSimples", { texto: row.nome }),
|
||||
visivel: true,
|
||||
coluna_ordem: "nome" // Habilita ordenação
|
||||
},
|
||||
{
|
||||
rotulo: "Status",
|
||||
visivel: true,
|
||||
celula: (row) => celulaTabela("tags", {
|
||||
opcoes: [
|
||||
row.ativo
|
||||
? { rotulo: "Ativo", cor: "success", icone: BadgeCheck }
|
||||
: { rotulo: "Inativo", cor: "error" }
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
rotulo: "Criado em",
|
||||
visivel: true,
|
||||
celula: (row) => celulaTabela("data", {
|
||||
valor: row.criado_em,
|
||||
formato: "data_hora"
|
||||
})
|
||||
}
|
||||
],
|
||||
|
||||
// Ações de linha (botões à direita)
|
||||
acoesLinha: [
|
||||
{
|
||||
rotulo: "Editar",
|
||||
icone: Pencil,
|
||||
cor: "primary",
|
||||
acao: (row) => console.log("Editar", row.id)
|
||||
}
|
||||
],
|
||||
|
||||
// Filtro Avançado (definição dos campos de filtro)
|
||||
filtroAvancado: [
|
||||
{
|
||||
rotulo: "Documento",
|
||||
coluna: "documento",
|
||||
operador: "like", // like, =, >, <, etc
|
||||
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as any,
|
||||
},
|
||||
{
|
||||
rotulo: "Criado em (Início)",
|
||||
coluna: "criado_em",
|
||||
operador: ">=",
|
||||
entrada: ["dataHora", { rotulo: "A partir de", modo: "data" }] as any
|
||||
}
|
||||
],
|
||||
|
||||
// Função de consulta (simulada ou API real)
|
||||
consulta: async (params) => {
|
||||
console.log("Consultando com:", params);
|
||||
// params contém: { filtro, coluna_ordem, direcao_ordem, offSet, limit, texto_busca }
|
||||
|
||||
return {
|
||||
cod: 0,
|
||||
eCerto: true,
|
||||
eErro: false,
|
||||
mensagem: undefined,
|
||||
valor: {
|
||||
quantidade: 1,
|
||||
valores: [
|
||||
{ id: 1, nome: "Luiz", documento: "123", email: "a@a.com", ativo: true, criado_em: "2024-01-01" }
|
||||
]
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Tipos de Células (`celulaTabela`)
|
||||
|
||||
Helper: `celulaTabela(tipo, dados)`
|
||||
|
||||
- `textoSimples`: `{ texto: string; acao?: () => void }`
|
||||
- `textoTruncado`: `{ texto: string; acao?: () => void }`
|
||||
|
|
@ -296,35 +424,6 @@ Tipos disponíveis atualmente:
|
|||
- `tags`: `{ opcoes: { rotulo: string; cor?: string; icone?: LucideIcon; acao?: () => void }[] }`
|
||||
- `data`: `{ valor: string; formato: "data" | "data_hora" | "relativo"; acao?: () => void }`
|
||||
|
||||
### Exemplo: célula `tags`
|
||||
|
||||
```ts
|
||||
import { celulaTabela } from "eli-vue";
|
||||
import { BadgeCheck, Pencil } from "lucide-vue-next";
|
||||
|
||||
celula: (l) =>
|
||||
celulaTabela("tags", {
|
||||
opcoes: [
|
||||
{ rotulo: "Ativo", cor: "success", icone: BadgeCheck },
|
||||
{ rotulo: "Editar", cor: "primary", icone: Pencil, acao: () => editar(l) },
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
### Exemplo: célula `data`
|
||||
|
||||
```ts
|
||||
import { celulaTabela } from "eli-vue";
|
||||
|
||||
celula: (l) =>
|
||||
celulaTabela("data", {
|
||||
valor: l.criado_em, // ISO
|
||||
formato: "data", // "data" | "data_hora" | "relativo"
|
||||
})
|
||||
```
|
||||
|
||||
> Observação: em modo simulação/local, a tabela pode buscar uma lista completa e aplicar filtro/paginação localmente.
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting (para IAs)
|
||||
|
|
@ -332,20 +431,24 @@ celula: (l) =>
|
|||
### 1) “Failed to resolve component”
|
||||
|
||||
Provável causa: componente não foi registrado.
|
||||
|
||||
- Se estiver usando plugin: confirme `app.use(EliVue)`
|
||||
- Se estiver importando direto: registre localmente no componente
|
||||
|
||||
### 2) Estilos não aplicam
|
||||
|
||||
Confirme que o projeto importou:
|
||||
|
||||
- `vuetify/styles`
|
||||
- `eli-vue/dist/eli-vue.css`
|
||||
|
||||
### 3) Ícones não aparecem
|
||||
### 3) Erro de tipo em `celulaTabela`
|
||||
|
||||
Alguns exemplos usam `<v-icon>` (MDI). O `eli-vue` **não instala** ícones automaticamente no projeto consumidor.
|
||||
Verifique se você importou `celulaTabela` de `eli-vue`.
|
||||
Certifique-se de que o segundo argumento corresponde ao tipo da célula (ex: `textoSimples` pede `{ texto: string }`).
|
||||
|
||||
### 4) Ícones não aparecem
|
||||
|
||||
O `eli-vue` espera ícones do pacote `lucide-vue-next` (ou compatíveis com Component type do Vue).
|
||||
Certifique-se de passar o componente do ícone (ex: `Pencil`), e não string.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -353,19 +456,17 @@ Alguns exemplos usam `<v-icon>` (MDI). O `eli-vue` **não instala** ícones auto
|
|||
|
||||
Quando for integrar `eli-vue` num projeto existente:
|
||||
|
||||
1) Verifique se **Vue 3** e **Vuetify 3** já estão configurados.
|
||||
2) Prefira usar o **plugin** do `eli-vue` (simplifica registro).
|
||||
1) Verifique se **Vue 3**, **Vuetify 3** e **lucide-vue-next** estão instalados.
|
||||
2) Prefira usar o **plugin** do `eli-vue` (simplifica registro global).
|
||||
3) Garanta o import do CSS do pacote (`eli-vue/dist/eli-vue.css`).
|
||||
4) Ao ver erros de tipos, valide se o projeto está usando TypeScript e se o build está resolvendo `types` corretamente.
|
||||
4) Use `celulaTabela` para construir colunas de tabelas de forma tipada.
|
||||
5) Ao definir tabelas, use `EliTabelaConsulta<T>` para garantir que colunas e filtros batam com o tipo de dados.
|
||||
|
||||
---
|
||||
|
||||
## Quando este arquivo deve ser atualizado
|
||||
|
||||
Atualize este `IA.md` quando houver mudanças em qualquer um destes pontos:
|
||||
|
||||
- caminho/nome do CSS em `dist/`
|
||||
- forma de instalação e/ou peerDependencies
|
||||
- forma de uso do plugin/export principal
|
||||
- lista de exports públicos (novos componentes, renomes, remoções)
|
||||
- mudanças de comportamento relevantes para consumo
|
||||
Atualize este `IA.md` quando houver mudanças em:
|
||||
- Estrutura de exports (novos componentes ou helpers).
|
||||
- Tipagem das células ou entradas.
|
||||
- Dependências obrigatórias.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue