diff --git a/src/components/eli/EliTabela/types-eli-tabela.ts b/src/components/eli/EliTabela/types-eli-tabela.ts index f77df38..811dddc 100644 --- a/src/components/eli/EliTabela/types-eli-tabela.ts +++ b/src/components/eli/EliTabela/types-eli-tabela.ts @@ -5,22 +5,39 @@ import type { VNodeChild } from "vue"; export type ComponenteCelula = VNodeChild; export type EliColuna = { + /** Texto exibido no cabeçalho da coluna. */ rotulo: string; + /** Função responsável por renderizar o conteúdo da célula. */ celula: (linha: T) => ComponenteCelula; + /** Ação opcional disparada ao clicar na célula. */ 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; }; export type EliConsultaPaginada = { + /** Registros retornados na consulta. */ valores: T[]; + /** Total de registros disponíveis no backend. */ quantidade: number; }; export type EliTabelaAcao = { + /** Ícone (Lucide) exibido para representar a ação. */ icone: LucideIcon; + /** Cor aplicada ao ícone e rótulo. */ cor: string; + /** Texto descritivo da ação. */ rotulo: string; + /** Função executada quando o usuário ativa a ação. */ 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); }; @@ -28,19 +45,27 @@ export type EliTabelaAcao = { * Estrutura de dados para uma tabela alimentada por uma consulta. * * - `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 = { + /** Lista de colunas da tabela. */ colunas: EliColuna[]; + /** Quantidade de registros solicitados por consulta (padrão `10`). */ 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?: { coluna_ordem?: keyof T; direcao_ordem?: "asc" | "desc"; offSet?: number; limit?: number; }) => Promise>>; + /** Quantidade máxima de botões exibidos na paginação (padrão `7`). */ maximo_botoes_paginacao?: number; /** Mensagem exibida quando a consulta retorna ok porém sem dados. */ mensagemVazio?: string; + /** Ações exibidas à direita de cada linha. */ acoes?: EliTabelaAcao[]; }; diff --git a/src/playground/tabela.playground.vue b/src/playground/tabela.playground.vue index 6e90683..a45a0e1 100644 --- a/src/playground/tabela.playground.vue +++ b/src/playground/tabela.playground.vue @@ -18,8 +18,11 @@ import { EliTabela } from "@/components/eli/EliTabela"; import type { EliTabelaConsulta } from "@/components/eli/EliTabela"; type Linha = { - nome: string; + empreendedor: string; + empreendimento: string; + documento: string; email: string; + telefone: string; }; export default defineComponent({ @@ -32,7 +35,7 @@ export default defineComponent({ cor: "#2563eb", rotulo: "Detalhes", 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", rotulo: "Remover", 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[] = [ - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - { nome: "Ana", email: "ana@eli.com" }, - { nome: "Bruno", email: "bruno@eli.com" }, - { nome: "Carla", email: "carla@eli.com" }, - - - + { + empreendedor: "Maria Silva", + empreendimento: "Doces da Maria", + documento: "12.345.678/0001-90", + email: "contato@docesdamaria.com", + telefone: "(11) 91234-5678", + }, + { + empreendedor: "João Pereira", + empreendimento: "Café Peregrino", + documento: "98.765.432/0001-12", + email: "contato@cafeperegrino.com", + telefone: "(11) 93456-7810", + }, + { + empreendedor: "Ana Costa", + empreendimento: "Flor de Sal Gastronomia", + documento: "45.678.912/0001-55", + email: "ana@flordesal.com", + telefone: "(21) 99876-5432", + }, + { + empreendedor: "Rafael Lima", + empreendimento: "Tech Agro Solutions", + documento: "07.654.321/0001-00", + email: "rafael@techagro.com", + telefone: "(31) 94567-8899", + }, + { + empreendedor: "Juliana Torres", + empreendimento: "Torres Moda Sustentável", + documento: "33.210.987/0001-44", + email: "juliana@torresmoda.com", + telefone: "(71) 97766-5544", + }, + { + empreendedor: "Marcos Vieira", + empreendimento: "Padaria Pão Quentinho", + documento: "21.109.876/0001-32", + email: "marcos@paoquentinho.com", + telefone: "(48) 99654-3210", + }, + { + empreendedor: "Bianca Rocha", + empreendimento: "Studio Beleza em Casa", + documento: "54.321.098/0001-21", + email: "contato@belezaemcasa.com", + telefone: "(85) 98877-1122", + }, + { + empreendedor: "Caio Albuquerque", + empreendimento: "Albuquerque Engenharia Verde", + documento: "65.432.109/0001-09", + email: "caio@engenhariaverde.com", + telefone: "(61) 98123-4567", + }, + { + empreendedor: "Fernanda Almeida", + empreendimento: "Faz Bem Produtos Naturais", + documento: "87.654.210/0001-98", + email: "fernanda@fazbem.com", + telefone: "(41) 99777-6655", + }, + { + empreendedor: "Gabriel Martins", + empreendimento: "Martins Tech Repair", + documento: "19.876.543/0001-76", + email: "suporte@martinstech.com", + telefone: "(19) 98888-9090", + }, + { + empreendedor: "Helena Duarte", + empreendimento: "Ateliê Costura Criativa", + documento: "23.456.789/0001-65", + email: "helena@costuracriativa.com", + telefone: "(51) 98765-4433", + }, + { + 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 = ( linhas: Linha[], parametros?: { coluna_ordem?: keyof Linha; direcao_ordem?: "asc" | "desc" } @@ -170,12 +240,22 @@ export default defineComponent({ }; const tabelaOk: EliTabelaConsulta = { - registros_por_consulta: 2, + registros_por_consulta: 10, colunas: [ { - rotulo: "Nome", - celula: (l) => l.nome, - coluna_ordem: "nome", + rotulo: "Empreendedor", + celula: (l) => l.empreendedor, + coluna_ordem: "empreendedor", + }, + { + rotulo: "Empreendimento", + celula: (l) => l.empreendimento, + coluna_ordem: "empreendimento", + }, + { + rotulo: "Documento", + celula: (l) => l.documento, + coluna_ordem: "documento", }, { rotulo: "E-mail", @@ -183,9 +263,14 @@ export default defineComponent({ coluna_ordem: "email", acao: () => { // 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, consulta: async (parametrosConsulta) => {