melhoria na tabela

This commit is contained in:
Luiz Silva 2026-02-15 10:38:42 -03:00
parent 87520552b4
commit 2f01368305
5 changed files with 719 additions and 695 deletions

1239
dist/eli-vue.es.js vendored

File diff suppressed because it is too large Load diff

18
dist/eli-vue.umd.js vendored

File diff suppressed because one or more lines are too long

View file

@ -48,6 +48,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}[]>;
temAcoesCabecalho: import("vue").ComputedRef<boolean>;
temAcoes: import("vue").ComputedRef<boolean>;
totalColunas: import("vue").ComputedRef<number>;
colunasEfetivas: import("vue").ComputedRef<any[]>;
rotulosColunas: import("vue").ComputedRef<string[]>;
modalColunasAberto: import("vue").Ref<boolean, boolean>;

View file

@ -1,6 +1,6 @@
{
"name": "eli-vue",
"version": "0.1.89",
"version": "0.1.90",
"private": false,
"main": "./dist/eli-vue.umd.js",
"module": "./dist/eli-vue.es.js",

View file

@ -8,84 +8,89 @@
<div>quantidadeTotal: {{ quantidade }}</div>
</EliTabelaDebug>
<EliTabelaEstados
v-if="carregando || Boolean(erro) || !linhas.length"
:carregando="carregando"
:erro="erro"
:mensagemVazio="tabela.mensagemVazio"
<EliTabelaCabecalho
v-if="exibirBusca || temAcoesCabecalho"
:exibirBusca="exibirBusca"
:exibirBotaoFiltroAvancado="exibirFiltroAvancado"
:valorBusca="valorBusca"
:acoesCabecalho="acoesCabecalho"
@buscar="atualizarBusca"
@colunas="abrirModalColunas"
@filtroAvancado="abrirModalFiltro"
/>
<template v-else>
<EliTabelaCabecalho
v-if="exibirBusca || temAcoesCabecalho"
:exibirBusca="exibirBusca"
:exibirBotaoFiltroAvancado="exibirFiltroAvancado"
:valorBusca="valorBusca"
:acoesCabecalho="acoesCabecalho"
@buscar="atualizarBusca"
@colunas="abrirModalColunas"
@filtroAvancado="abrirModalFiltro"
<EliTabelaModalColunas
:aberto="modalColunasAberto"
:rotulosColunas="rotulosColunas"
:configInicial="configColunas"
:colunas="tabela.colunas"
@fechar="fecharModalColunas"
@salvar="salvarModalColunas"
/>
<EliTabelaModalFiltroAvancado
:aberto="modalFiltroAberto"
:filtrosBase="tabela.filtroAvancado ?? []"
:modelo="filtrosUi"
@fechar="fecharModalFiltro"
@limpar="limparFiltrosAvancados"
@salvar="salvarFiltrosAvancados"
/>
<table class="eli-tabela__table">
<EliTabelaHead
:colunas="colunasEfetivas"
:temAcoes="temAcoes"
:temColunasInvisiveis="temColunasInvisiveis"
:colunaOrdenacao="colunaOrdenacao"
:direcaoOrdenacao="direcaoOrdenacao"
@alternar-ordenacao="alternarOrdenacao"
/>
<EliTabelaModalColunas
:aberto="modalColunasAberto"
:rotulosColunas="rotulosColunas"
:configInicial="configColunas"
:colunas="tabela.colunas"
@fechar="fecharModalColunas"
@salvar="salvarModalColunas"
/>
<tbody v-if="carregando || Boolean(erro) || !linhas.length">
<tr>
<td :colspan="totalColunas" style="padding: 0;">
<EliTabelaEstados
:carregando="carregando"
:erro="erro"
:mensagemVazio="tabela.mensagemVazio"
style="border: none; border-radius: 0;"
/>
</td>
</tr>
</tbody>
<EliTabelaModalFiltroAvancado
:aberto="modalFiltroAberto"
:filtrosBase="tabela.filtroAvancado ?? []"
:modelo="filtrosUi"
@fechar="fecharModalFiltro"
@limpar="limparFiltrosAvancados"
@salvar="salvarFiltrosAvancados"
/>
<table class="eli-tabela__table">
<EliTabelaHead
:colunas="colunasEfetivas"
:temAcoes="temAcoes"
:temColunasInvisiveis="temColunasInvisiveis"
:colunaOrdenacao="colunaOrdenacao"
:direcaoOrdenacao="direcaoOrdenacao"
@alternar-ordenacao="alternarOrdenacao"
/>
<EliTabelaBody
:colunas="colunasEfetivas"
:colunasInvisiveis="colunasInvisiveisEfetivas"
:temColunasInvisiveis="temColunasInvisiveis"
:linhasExpandidas="linhasExpandidas"
:linhas="linhasPaginadas"
:temAcoes="temAcoes"
:menuAberto="menuAberto"
:possuiAcoes="possuiAcoes"
:toggleMenu="toggleMenu"
:alternarLinhaExpandida="alternarLinhaExpandida"
/>
</table>
<EliTabelaMenuAcoes
ref="menuPopup"
<EliTabelaBody
v-else
:colunas="colunasEfetivas"
:colunasInvisiveis="colunasInvisiveisEfetivas"
:temColunasInvisiveis="temColunasInvisiveis"
:linhasExpandidas="linhasExpandidas"
:linhas="linhasPaginadas"
:temAcoes="temAcoes"
:menuAberto="menuAberto"
:posicao="menuPopupPos"
:acoes="menuAberto === null ? [] : acoesDisponiveisPorLinha(menuAberto)"
:linha="menuAberto === null ? null : linhasPaginadas[menuAberto]"
@executar="({ acao, linha }) => { menuAberto = null; acao.acao(linha as never); }"
:possuiAcoes="possuiAcoes"
:toggleMenu="toggleMenu"
:alternarLinhaExpandida="alternarLinhaExpandida"
/>
</table>
<EliTabelaPaginacao
v-if="totalPaginas > 1 && quantidadeFiltrada > 0"
:pagina="paginaAtual"
:totalPaginas="totalPaginas"
:maximoBotoes="tabela.maximo_botoes_paginacao"
@alterar="irParaPagina"
/>
</template>
<EliTabelaMenuAcoes
ref="menuPopup"
:menuAberto="menuAberto"
:posicao="menuPopupPos"
:acoes="menuAberto === null ? [] : acoesDisponiveisPorLinha(menuAberto)"
:linha="menuAberto === null ? null : linhasPaginadas[menuAberto]"
@executar="({ acao, linha }) => { menuAberto = null; acao.acao(linha as never); }"
/>
<EliTabelaPaginacao
v-if="totalPaginas > 1 && quantidadeFiltrada > 0"
:pagina="paginaAtual"
:totalPaginas="totalPaginas"
:maximoBotoes="tabela.maximo_botoes_paginacao"
@alterar="irParaPagina"
/>
</div>
</template>
@ -331,6 +336,14 @@ export default defineComponent({
return ordemFinal.map((r) => mapa.get(r)).filter(Boolean);
});
const totalColunas = computed(() => {
return (
colunasEfetivas.value.length +
(temAcoes.value ? 1 : 0) +
(temColunasInvisiveis.value ? 1 : 0)
);
});
function abrirModalColunas() {
modalColunasAberto.value = true;
}
@ -745,6 +758,7 @@ export default defineComponent({
acoesCabecalho,
temAcoesCabecalho,
temAcoes,
totalColunas,
colunasEfetivas,
rotulosColunas,
modalColunasAberto,