melhoria na tabela

dist/types/componentes/EliTabela/EliTabela.vue.d.ts

@@ -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>;

package.json

@@ -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",

src/componentes/EliTabela/EliTabela.vue

@@ -8,84 +8,89 @@
       <div>quantidadeTotal: {{ quantidade }}</div>
     </EliTabelaDebug>
 
-    <EliTabelaEstados
+    <EliTabelaCabecalho
-      v-if="carregando || Boolean(erro) || !linhas.length"
+      v-if="exibirBusca || temAcoesCabecalho"
-      :carregando="carregando"
+      :exibirBusca="exibirBusca"
-      :erro="erro"
+      :exibirBotaoFiltroAvancado="exibirFiltroAvancado"
-      :mensagemVazio="tabela.mensagemVazio"
+      :valorBusca="valorBusca"
+      :acoesCabecalho="acoesCabecalho"
+      @buscar="atualizarBusca"
+      @colunas="abrirModalColunas"
+      @filtroAvancado="abrirModalFiltro"
     />
 
-    <template v-else>
+    <EliTabelaModalColunas
-      <EliTabelaCabecalho
+      :aberto="modalColunasAberto"
-        v-if="exibirBusca || temAcoesCabecalho"
+      :rotulosColunas="rotulosColunas"
-        :exibirBusca="exibirBusca"
+      :configInicial="configColunas"
-        :exibirBotaoFiltroAvancado="exibirFiltroAvancado"
+      :colunas="tabela.colunas"
-        :valorBusca="valorBusca"
+      @fechar="fecharModalColunas"
-        :acoesCabecalho="acoesCabecalho"
+      @salvar="salvarModalColunas"
-        @buscar="atualizarBusca"
+    />
-        @colunas="abrirModalColunas"
+
-        @filtroAvancado="abrirModalFiltro"
+    <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
+      <tbody v-if="carregando || Boolean(erro) || !linhas.length">
-        :aberto="modalColunasAberto"
+        <tr>
-        :rotulosColunas="rotulosColunas"
+          <td :colspan="totalColunas" style="padding: 0;">
-        :configInicial="configColunas"
+            <EliTabelaEstados
-        :colunas="tabela.colunas"
+              :carregando="carregando"
-        @fechar="fecharModalColunas"
+              :erro="erro"
-        @salvar="salvarModalColunas"
+              :mensagemVazio="tabela.mensagemVazio"
-      />
+              style="border: none; border-radius: 0;"
+            />
+          </td>
+        </tr>
+      </tbody>
 
-      <EliTabelaModalFiltroAvancado
+      <EliTabelaBody
-        :aberto="modalFiltroAberto"
+        v-else
-        :filtrosBase="tabela.filtroAvancado ?? []"
+        :colunas="colunasEfetivas"
-        :modelo="filtrosUi"
+        :colunasInvisiveis="colunasInvisiveisEfetivas"
-        @fechar="fecharModalFiltro"
+        :temColunasInvisiveis="temColunasInvisiveis"
-        @limpar="limparFiltrosAvancados"
+        :linhasExpandidas="linhasExpandidas"
-        @salvar="salvarFiltrosAvancados"
+        :linhas="linhasPaginadas"
-      />
+        :temAcoes="temAcoes"
-
-      <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"
         :menuAberto="menuAberto"
-        :posicao="menuPopupPos"
+        :possuiAcoes="possuiAcoes"
-        :acoes="menuAberto === null ? [] : acoesDisponiveisPorLinha(menuAberto)"
+        :toggleMenu="toggleMenu"
-        :linha="menuAberto === null ? null : linhasPaginadas[menuAberto]"
+        :alternarLinhaExpandida="alternarLinhaExpandida"
-        @executar="({ acao, linha }) => { menuAberto = null; acao.acao(linha as never); }"
       />
+    </table>
 
-      <EliTabelaPaginacao
+    <EliTabelaMenuAcoes
-        v-if="totalPaginas > 1 && quantidadeFiltrada > 0"
+      ref="menuPopup"
-        :pagina="paginaAtual"
+      :menuAberto="menuAberto"
-        :totalPaginas="totalPaginas"
+      :posicao="menuPopupPos"
-        :maximoBotoes="tabela.maximo_botoes_paginacao"
+      :acoes="menuAberto === null ? [] : acoesDisponiveisPorLinha(menuAberto)"
-        @alterar="irParaPagina"
+      :linha="menuAberto === null ? null : linhasPaginadas[menuAberto]"
-      />
+      @executar="({ acao, linha }) => { menuAberto = null; acao.acao(linha as never); }"
-    </template>
+    />
+
+    <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,