melhoria no IA.md

This commit is contained in:
Luiz Silva 2026-02-12 17:54:50 -03:00
parent f396203085
commit cb81107199

122
IA.md
View file

@ -309,17 +309,115 @@ export default defineComponent({
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>`.
### Barra de Busca e Filtros
O `EliTabela` oferece duas formas principais de filtrar dados:
1. **Busca Textual Simples**: Uma caixa de busca global.
2. **Filtro Avançado**: Um modal para composição de filtros específicos por coluna.
#### 1. Busca Textual Simples
Para habilitar, defina `mostrarCaixaDeBusca: true`.
O termo digitado será passado para a função `consulta` no parâmetro `texto_busca`.
```ts
mostrarCaixaDeBusca: true,
consulta: async ({ texto_busca }) => {
// Use 'texto_busca' para filtrar no backend (ex: ILIKE %texto%)
}
```
#### 2. Filtro Avançado
Permite que o usuário crie filtros complexos (ex: "Data > X" E "Status = Y").
Você define os campos disponíveis em `filtroAvancado`.
Cada definição de filtro precisa de:
- `rotulo`: Nome exibido ao usuário.
- `coluna`: Chave do dado (`keyof T`) a ser filtrada.
- `operador`: Operação padrão (ex: `like`, `=`, `>`, `<`, `>=`, `<=`, `!=`, `in`, `between`).
- `entrada`: Definição do componente de entrada (`EliEntrada*`) usado para capturar o valor.
> **Dica de Tipagem**: O campo `entrada` espera uma tupla `[Tipo, Opcoes]`. Devido à complexidade do TypeScript, pode ser necessário usar `as any` ou castar para `ComponenteEntrada`.
```ts
filtroAvancado: [
{
rotulo: "Nome do Cliente",
coluna: "nome", // chave em T
operador: "like",
// Configuração do input (igual ao usar EliEntradaTexto)
entrada: ["texto", { rotulo: "Digite o nome", placeholder: "Ex: João" }] as any,
},
{
rotulo: "Data de Criação",
coluna: "criado_em",
operador: ">=",
// Configuração do input (EliEntradaDataHora)
entrada: ["dataHora", { rotulo: "A partir de", modo: "data" }] as any,
},
{
rotulo: "Status",
coluna: "status",
operador: "=",
// Configuração do input com seleção
entrada: ["selecao", {
rotulo: "Selecione",
itens: () => [
{ chave: "ativo", rotulo: "Ativo" },
{ chave: "inativo", rotulo: "Inativo" }
]
}] as any
}
]
```
### Processando a Consulta
A função `consulta` recebe um objeto com todos os parâmetros necessários para buscar os dados corretamente.
```ts
consulta: async (params) => {
const {
offSet, // Paginação: pular N registros
limit, // Paginação: limite por página
texto_busca, // Busca simples (string | undefined)
coluna_ordem, // Ordenação: qual coluna
direcao_ordem, // Ordenação: "asc" | "desc"
filtros // Array de filtros aplicados pelo usuário
} = params;
// Exemplo de estrutura de 'filtros':
// [
// { coluna: "nome", operador: "like", valor: "Ana" },
// { coluna: "criado_em", operador: ">=", valor: "2024-01-01" }
// ]
console.log("Buscando dados...", params);
// ... chamada à API ...
return {
cod: 0,
eCerto: true,
eErro: false,
mensagem: undefined,
valor: {
// Retorne SEMPRE o total real de registros para a paginação funcionar
quantidade: 100,
valores: [ /* ... array de T ... */ ]
},
};
},
```
### 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.
// Tipos auxiliares (opcionais, mas úteis)
import { BadgeCheck, Pencil } from "lucide-vue-next";
// 1. Defina o tipo da linha
@ -338,13 +436,13 @@ const tabelaUsuarios: EliTabelaConsulta<Usuario> = {
mostrarCaixaDeBusca: true,
registros_por_consulta: 10,
// Colunas
// Colunas Visuais
colunas: [
{
rotulo: "Nome",
celula: (row) => celulaTabela("textoSimples", { texto: row.nome }),
visivel: true,
coluna_ordem: "nome" // Habilita ordenação
coluna_ordem: "nome" // Habilita ordenação por esta coluna
},
{
rotulo: "Status",
@ -377,12 +475,12 @@ const tabelaUsuarios: EliTabelaConsulta<Usuario> = {
}
],
// Filtro Avançado (definição dos campos de filtro)
// Definição dos Filtros Avançados disponíveis
filtroAvancado: [
{
rotulo: "Documento",
coluna: "documento",
operador: "like", // like, =, >, <, etc
operador: "like",
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as any,
},
{
@ -393,10 +491,10 @@ const tabelaUsuarios: EliTabelaConsulta<Usuario> = {
}
],
// Função de consulta (simulada ou API real)
// Função de consulta
consulta: async (params) => {
console.log("Consultando com:", params);
// params contém: { filtro, coluna_ordem, direcao_ordem, offSet, limit, texto_busca }
// Aqui você conectaria com sua API, passando params.filtros, params.texto_busca, etc.
console.log("Filtros aplicados:", params.filtros);
return {
cod: 0,