publico/vue-componentes
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bkp

Browse source
This commit is contained in:
Luiz Silva 2026-01-27 13:25:09 -03:00
parent e1fec007b6
commit 4414eb0be6
2 changed files with 201 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/eli/EliTabela/types-eli-tabela.ts
View file

@ -5,22 +5,39 @@ import type { VNodeChild } from "vue";
export type ComponenteCelula = VNodeChild; export type ComponenteCelula = VNodeChild;
export type EliColuna<T> = { export type EliColuna<T> = {
/** Texto exibido no cabeçalho da coluna. */
rotulo: string; rotulo: string;
/** Função responsável por renderizar o conteúdo da célula. */
celula: (linha: T) => ComponenteCelula; celula: (linha: T) => ComponenteCelula;
/** Ação opcional disparada ao clicar na célula. */
acao?: () => void; acao?: () => void;
/**
* Campo de ordenação associado à coluna. Caso informado, a coluna passa a
* exibir controles de ordenação e utiliza o valor como chave para o backend.
*/
coluna_ordem?: keyof T; coluna_ordem?: keyof T;
}; };
export type EliConsultaPaginada<T> = { export type EliConsultaPaginada<T> = {
/** Registros retornados na consulta. */
valores: T[]; valores: T[];
/** Total de registros disponíveis no backend. */
quantidade: number; quantidade: number;
}; };
export type EliTabelaAcao<T> = { export type EliTabelaAcao<T> = {
/** Ícone (Lucide) exibido para representar a ação. */
icone: LucideIcon; icone: LucideIcon;
/** Cor aplicada ao ícone e rótulo. */
cor: string; cor: string;
/** Texto descritivo da ação. */
rotulo: string; rotulo: string;
/** Função executada quando o usuário ativa a ação. */
acao: (linha: T) => void; acao: (linha: T) => void;
/**
* Define se a ação deve ser exibida para a linha. Pode ser um booleano fixo
* ou uma função (sincrona/assíncrona) que recebe a linha para decisão dinâmica.
*/
exibir?: boolean | ((linha: T) => Promise<boolean> | boolean); exibir?: boolean | ((linha: T) => Promise<boolean> | boolean);
}; };
@ -28,19 +45,27 @@ export type EliTabelaAcao<T> = {
* Estrutura de dados para uma tabela alimentada por uma consulta. * Estrutura de dados para uma tabela alimentada por uma consulta.
* *
* - `colunas`: definição de colunas e como renderizar cada célula * - `colunas`: definição de colunas e como renderizar cada célula
* - `consulta`: função que recupera os dados, com suporte a ordenação * - `consulta`: função que recupera os dados, com suporte a ordenação/paginação
*/ */
export type EliTabelaConsulta<T> = { export type EliTabelaConsulta<T> = {
/** Lista de colunas da tabela. */
colunas: EliColuna<T>[]; colunas: EliColuna<T>[];
/** Quantidade de registros solicitados por consulta (padrão `10`). */
registros_por_consulta?: number; registros_por_consulta?: number;
/**
* Função responsável por buscar os dados. Recebe parâmetros opcionais de
* ordenação (`coluna_ordem`/`direcao_ordem`) e paginação (`offSet`/`limit`).
*/
consulta: (parametrosConsulta?: { consulta: (parametrosConsulta?: {
coluna_ordem?: keyof T; coluna_ordem?: keyof T;
direcao_ordem?: "asc" | "desc"; direcao_ordem?: "asc" | "desc";
offSet?: number; offSet?: number;
limit?: number; limit?: number;
}) => Promise<tipoResposta<EliConsultaPaginada<T>>>; }) => Promise<tipoResposta<EliConsultaPaginada<T>>>;
/** Quantidade máxima de botões exibidos na paginação (padrão `7`). */
maximo_botoes_paginacao?: number; maximo_botoes_paginacao?: number;
/** Mensagem exibida quando a consulta retorna ok porém sem dados. */ /** Mensagem exibida quando a consulta retorna ok porém sem dados. */
mensagemVazio?: string; mensagemVazio?: string;
/** Ações exibidas à direita de cada linha. */
acoes?: EliTabelaAcao<T>[]; acoes?: EliTabelaAcao<T>[];
}; };

265
src/playground/tabela.playground.vue
View file

@ -18,8 +18,11 @@ import { EliTabela } from "@/components/eli/EliTabela";
import type { EliTabelaConsulta } from "@/components/eli/EliTabela"; import type { EliTabelaConsulta } from "@/components/eli/EliTabela";
type Linha = { type Linha = {
nome: string; empreendedor: string;
empreendimento: string;
documento: string;
email: string; email: string;
telefone: string;
}; };
export default defineComponent({ export default defineComponent({
@ -32,7 +35,7 @@ export default defineComponent({
cor: "#2563eb", cor: "#2563eb",
rotulo: "Detalhes", rotulo: "Detalhes",
acao: (linha) => { acao: (linha) => {
console.log("Visualizar detalhes de", linha.nome); console.log("Visualizar detalhes de", linha.empreendedor);
}, },
}, },
{ {
@ -40,96 +43,163 @@ export default defineComponent({
cor: "#dc2626", cor: "#dc2626",
rotulo: "Remover", rotulo: "Remover",
acao: (linha) => { acao: (linha) => {
console.log("Remover registro de", linha.nome); console.log("Remover cadastro de", linha.empreendedor);
}, },
exibir: (linha) => linha.email !== "ana@eli.com", exibir: (linha) => !linha.empreendimento.toLowerCase().includes("café"),
}, },
]; ];
const linhasPadrao: Linha[] = [ const linhasPadrao: Linha[] = [
{ nome: "Ana", email: "ana@eli.com" }, {
{ nome: "Bruno", email: "bruno@eli.com" }, empreendedor: "Maria Silva",
{ nome: "Carla", email: "carla@eli.com" }, empreendimento: "Doces da Maria",
documento: "12.345.678/0001-90",
{ nome: "Ana", email: "ana@eli.com" }, email: "contato@docesdamaria.com",
{ nome: "Bruno", email: "bruno@eli.com" }, telefone: "(11) 91234-5678",
{ nome: "Carla", email: "carla@eli.com" }, },
{
empreendedor: "João Pereira",
{ nome: "Ana", email: "ana@eli.com" }, empreendimento: "Café Peregrino",
{ nome: "Bruno", email: "bruno@eli.com" }, documento: "98.765.432/0001-12",
{ nome: "Carla", email: "carla@eli.com" }, email: "contato@cafeperegrino.com",
telefone: "(11) 93456-7810",
},
{ nome: "Ana", email: "ana@eli.com" }, {
{ nome: "Bruno", email: "bruno@eli.com" }, empreendedor: "Ana Costa",
{ nome: "Carla", email: "carla@eli.com" }, empreendimento: "Flor de Sal Gastronomia",
documento: "45.678.912/0001-55",
email: "ana@flordesal.com",
{ nome: "Ana", email: "ana@eli.com" }, telefone: "(21) 99876-5432",
{ nome: "Bruno", email: "bruno@eli.com" }, },
{ nome: "Carla", email: "carla@eli.com" }, {
empreendedor: "Rafael Lima",
empreendimento: "Tech Agro Solutions",
{ nome: "Ana", email: "ana@eli.com" }, documento: "07.654.321/0001-00",
{ nome: "Bruno", email: "bruno@eli.com" }, email: "rafael@techagro.com",
{ nome: "Carla", email: "carla@eli.com" }, telefone: "(31) 94567-8899",
},
{
{ nome: "Ana", email: "ana@eli.com" }, empreendedor: "Juliana Torres",
{ nome: "Bruno", email: "bruno@eli.com" }, empreendimento: "Torres Moda Sustentável",
{ nome: "Carla", email: "carla@eli.com" }, documento: "33.210.987/0001-44",
email: "juliana@torresmoda.com",
telefone: "(71) 97766-5544",
},
{ nome: "Ana", email: "ana@eli.com" }, {
{ nome: "Bruno", email: "bruno@eli.com" }, empreendedor: "Marcos Vieira",
{ nome: "Carla", email: "carla@eli.com" }, empreendimento: "Padaria Pão Quentinho",
documento: "21.109.876/0001-32",
email: "marcos@paoquentinho.com",
telefone: "(48) 99654-3210",
{ nome: "Ana", email: "ana@eli.com" }, },
{ nome: "Bruno", email: "bruno@eli.com" }, {
{ nome: "Carla", email: "carla@eli.com" }, empreendedor: "Bianca Rocha",
empreendimento: "Studio Beleza em Casa",
documento: "54.321.098/0001-21",
email: "contato@belezaemcasa.com",
{ nome: "Ana", email: "ana@eli.com" }, telefone: "(85) 98877-1122",
{ nome: "Bruno", email: "bruno@eli.com" }, },
{ nome: "Carla", email: "carla@eli.com" }, {
empreendedor: "Caio Albuquerque",
empreendimento: "Albuquerque Engenharia Verde",
documento: "65.432.109/0001-09",
{ nome: "Ana", email: "ana@eli.com" }, email: "caio@engenhariaverde.com",
{ nome: "Bruno", email: "bruno@eli.com" }, telefone: "(61) 98123-4567",
{ nome: "Carla", email: "carla@eli.com" }, },
{
empreendedor: "Fernanda Almeida",
{ nome: "Ana", email: "ana@eli.com" }, empreendimento: "Faz Bem Produtos Naturais",
{ nome: "Bruno", email: "bruno@eli.com" }, documento: "87.654.210/0001-98",
{ nome: "Carla", email: "carla@eli.com" }, email: "fernanda@fazbem.com",
telefone: "(41) 99777-6655",
},
{
{ nome: "Ana", email: "ana@eli.com" }, empreendedor: "Gabriel Martins",
{ nome: "Bruno", email: "bruno@eli.com" }, empreendimento: "Martins Tech Repair",
{ nome: "Carla", email: "carla@eli.com" }, documento: "19.876.543/0001-76",
email: "suporte@martinstech.com",
telefone: "(19) 98888-9090",
},
{ nome: "Ana", email: "ana@eli.com" }, {
{ nome: "Bruno", email: "bruno@eli.com" }, empreendedor: "Helena Duarte",
{ nome: "Carla", email: "carla@eli.com" }, empreendimento: "Ateliê Costura Criativa",
documento: "23.456.789/0001-65",
email: "helena@costuracriativa.com",
{ nome: "Ana", email: "ana@eli.com" }, telefone: "(51) 98765-4433",
{ nome: "Bruno", email: "bruno@eli.com" }, },
{ nome: "Carla", email: "carla@eli.com" }, {
empreendedor: "Igor Santos",
empreendimento: "Santos Consultoria Financeira",
documento: "43.219.876/0001-54",
email: "igor@santosconsultoria.com",
telefone: "(31) 99332-1100",
},
{
empreendedor: "Jéssica Nunes",
empreendimento: "Nunes Eventos & Decoração",
documento: "09.876.543/0001-33",
email: "jessica@nunesdecora.com",
telefone: "(62) 99922-3344",
},
{
empreendedor: "Leonardo Prado",
empreendimento: "Prado Bike Courier",
documento: "72.345.098/0001-27",
email: "contato@pradobike.com",
telefone: "(47) 98444-6677",
},
{
empreendedor: "Marina Lopes",
empreendimento: "Lopes Design Digital",
documento: "56.789.012/0001-11",
email: "marina@lopesdesign.com",
telefone: "(27) 99911-2233",
},
{
empreendedor: "Nicolas Teixeira",
empreendimento: "QualiVida Fitness",
documento: "34.567.890/0001-02",
email: "nicolas@qualivida.com",
telefone: "(92) 99456-7788",
},
{
empreendedor: "Olívia Azevedo",
empreendimento: "Azevedo Pet Care",
documento: "88.901.234/0001-45",
email: "olivia@petcare.com",
telefone: "(16) 99788-6655",
},
{
empreendedor: "Paulo Henrique",
empreendimento: "Henrique Soluções Elétricas",
documento: "44.556.778/0001-90",
email: "paulo@solucoeseletricas.com",
telefone: "(13) 98810-2020",
},
{
empreendedor: "Renata Souza",
empreendimento: "Souza Traduções Especializadas",
documento: "11.223.344/0001-08",
email: "renata@souzatraducoes.com",
telefone: "(24) 99661-7788",
},
{
empreendedor: "Tiago Moura",
empreendimento: "Moura Agro Sustentável",
documento: "78.912.345/0001-67",
email: "tiago@mouraagro.com",
telefone: "(68) 99999-4545",
},
{
empreendedor: "Viviane Castro",
empreendimento: "Castro Arte & Cerâmica",
documento: "32.165.498/0001-87",
email: "viviane@castroarte.com",
telefone: "(81) 98787-1212",
},
]; ];
const ordenarLinhas = ( const ordenarLinhas = (
linhas: Linha[], linhas: Linha[],
parametros?: { coluna_ordem?: keyof Linha; direcao_ordem?: "asc" | "desc" } parametros?: { coluna_ordem?: keyof Linha; direcao_ordem?: "asc" | "desc" }
@ -170,12 +240,22 @@ export default defineComponent({
}; };
const tabelaOk: EliTabelaConsulta<Linha> = { const tabelaOk: EliTabelaConsulta<Linha> = {
registros_por_consulta: 2, registros_por_consulta: 10,
colunas: [ colunas: [
{ {
rotulo: "Nome", rotulo: "Empreendedor",
celula: (l) => l.nome, celula: (l) => l.empreendedor,
coluna_ordem: "nome", coluna_ordem: "empreendedor",
},
{
rotulo: "Empreendimento",
celula: (l) => l.empreendimento,
coluna_ordem: "empreendimento",
},
{
rotulo: "Documento",
celula: (l) => l.documento,
coluna_ordem: "documento",
}, },
{ {
rotulo: "E-mail", rotulo: "E-mail",
@ -183,9 +263,14 @@ export default defineComponent({
coluna_ordem: "email", coluna_ordem: "email",
acao: () => { acao: () => {
// Exemplo de ação: poderia abrir detalhes // Exemplo de ação: poderia abrir detalhes
console.log("clicou na coluna e-mail"); console.log("Clicou na coluna e-mail");
}, },
}, },
{
rotulo: "Telefone",
celula: (l) => l.telefone,
coluna_ordem: "telefone",
},
], ],
acoes: acoesTabela, acoes: acoesTabela,
consulta: async (parametrosConsulta) => { consulta: async (parametrosConsulta) => {