bkp

src/components/eli/EliTabela/EliTabela.vue

@@ -37,6 +37,8 @@ export default defineComponent({
     const colunaOrdenacao = ref<string | null>(null);
     const direcaoOrdenacao = ref<"asc" | "desc">("asc");
     const exibirBusca = computed(() => Boolean(props.tabela.mostrarCaixaDeBusca));
+    const acoesCabecalho = computed(() => props.tabela.acoesTabela ?? []);
+    const temAcoesCabecalho = computed(() => acoesCabecalho.value.length > 0);
     const registrosPorConsulta = computed(() => {
       const valor = props.tabela.registros_por_consulta;
       if (typeof valor === "number" && valor > 0) {
@@ -235,15 +237,15 @@ export default defineComponent({
           return;
         }
 
-        const acoes = tabelaConfig.acoesLinha ?? [];
+        const acoesLinhaConfiguradas = tabelaConfig.acoesLinha ?? [];
 
-        if (!acoes.length) {
+        if (!acoesLinhaConfiguradas.length) {
           acoesVisiveis.value = [];
           return;
         }
 
         const preResultado = valores.map(() =>
-          acoes.map((acao) => {
+          acoesLinhaConfiguradas.map((acao) => {
             if (acao.exibir === undefined) {
               return true;
             }
@@ -261,7 +263,7 @@ export default defineComponent({
         const visibilidade = await Promise.all(
           valores.map(async (linha) =>
             Promise.all(
-              acoes.map(async (acao) => {
+              acoesLinhaConfiguradas.map(async (acao) => {
                 if (acao.exibir === undefined) {
                   return true;
                 }
@@ -372,8 +374,8 @@ export default defineComponent({
       }
 
       const colunas = tabela.colunas;
-      const acoes = tabela.acoesLinha ?? [];
-      const temAcoes = acoes.length > 0;
+      const acoesLinha = tabela.acoesLinha ?? [];
+      const temAcoes = acoesLinha.length > 0;
 
       if (!linhas.value.length) {
         return renderVazio(tabela.mensagemVazio);
@@ -445,12 +447,49 @@ export default defineComponent({
 
       const conteudoTabela: ReturnType<typeof h>[] = [];
 
-      if (exibirBusca.value) {
+      if (exibirBusca.value || temAcoesCabecalho.value) {
+        const botoes = acoesCabecalho.value.map((botao, indice) =>
+          h(
+            "button",
+            {
+              key: `${botao.rotulo}-${indice}`,
+              type: "button",
+              class: "eli-tabela__acoes-cabecalho-botao",
+              // Quando `cor` for informada, tratamos como cor de destaque do botão.
+              // Também ajustamos o texto/ícone para branco para manter contraste.
+              style: botao.cor
+                ? {
+                    backgroundColor: botao.cor,
+                    color: "#fff",
+                  }
+                : undefined,
+              onClick: botao.acao,
+            },
+            [
+              botao.icone
+                ? h(botao.icone, {
+                    class: "eli-tabela__acoes-cabecalho-icone",
+                    size: 16,
+                    strokeWidth: 2,
+                  })
+                : null,
+              h("span", { class: "eli-tabela__acoes-cabecalho-rotulo" }, botao.rotulo),
+            ]
+          )
+        );
+
         conteudoTabela.push(
-          h(EliTabelaCaixaDeBusca, {
-            modelo: valorBusca.value,
-            onBuscar: atualizarBusca,
-          })
+          h("div", { class: "eli-tabela__cabecalho" }, [
+            exibirBusca.value
+              ? h(EliTabelaCaixaDeBusca, {
+                  modelo: valorBusca.value,
+                  onBuscar: atualizarBusca,
+                })
+              : null,
+            temAcoesCabecalho.value
+              ? h("div", { class: "eli-tabela__acoes-cabecalho" }, botoes)
+              : null,
+          ])
         );
       }
 
@@ -486,7 +525,7 @@ export default defineComponent({
 
               if (temAcoes) {
                 const visibilidade = acoesVisiveis.value[i] ?? [];
-                const acoesDisponiveis = acoes
+                const acoesDisponiveis = acoesLinha
                   .map((acao, indice) => {
                     const fallbackVisivel =
                       acao.exibir === undefined
@@ -503,7 +542,7 @@ export default defineComponent({
                   })
                   .filter((item) => item.visivel);
 
-                  const possuiAcoes = acoesDisponiveis.length > 0;
+                const possuiAcoes = acoesDisponiveis.length > 0;
 
                 if (!possuiAcoes && menuAberto.value === i) {
                   menuAberto.value = null;
@@ -603,7 +642,7 @@ export default defineComponent({
                   classesContainer.push("eli-tabela__acoes-container--aberto");
                 }
 
-                  celulas.push(
+                celulas.push(
                   h(
                     "td",
                     {
@@ -796,6 +835,55 @@ export default defineComponent({
   z-index: 200;
 }
 
+.eli-tabela__cabecalho {
+  display: flex;
+  align-items: center;
+  /* Ações ficam imediatamente à direita da busca (em vez de ir para a extrema direita) */
+  justify-content: flex-start;
+  gap: 12px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.eli-tabela__acoes-cabecalho {
+  display: inline-flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.eli-tabela__acoes-cabecalho-botao {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 9999px;
+  border: none;
+  background: rgba(37, 99, 235, 0.12);
+  color: rgba(37, 99, 235, 0.95);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.eli-tabela__acoes-cabecalho-botao:hover,
+.eli-tabela__acoes-cabecalho-botao:focus-visible {
+  background: rgba(37, 99, 235, 0.2);
+}
+
+.eli-tabela__acoes-cabecalho-botao:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.35);
+  outline-offset: 2px;
+}
+
+.eli-tabela__acoes-cabecalho-icone {
+  display: inline-block;
+}
+
+.eli-tabela__acoes-cabecalho-rotulo {
+  line-height: 1;
+}
+
 .eli-tabela__acoes-toggle {
   display: inline-flex;
   align-items: center;