bkp

src/playground/tabela.playground.vue

@@ -2,7 +2,8 @@
   <section class="stack">
     <h2>EliTabela</h2>
 
-    <EliTabela :tabela="tabelaOk" />
+    <!-- Exemplo: botão de ação "Novo" no cabeçalho que adiciona uma linha -->
+    <EliTabela :tabela="tabelaOk" :key="versaoTabelaOk" />
 
     <EliTabela :tabela="tabelaVazia" />
 
@@ -11,9 +12,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import { codigosResposta } from "p-respostas";
-import { Eye, Trash2 } from "lucide-vue-next";
+import { Eye, Plus, Trash2 } from "lucide-vue-next";
 import { EliTabela } from "@/components/eli/EliTabela";
 import type { EliTabelaConsulta } from "@/components/eli/EliTabela";
 
@@ -29,7 +30,7 @@ export default defineComponent({
   name: "TabelaPlayground",
   components: { EliTabela },
   setup() {
-    const acoesTabela: EliTabelaConsulta<Linha>["acoesLinha"] = [
+    const acoesLinha: EliTabelaConsulta<Linha>["acoesLinha"] = [
       {
         icone: Eye,
         cor: "#2563eb",
@@ -49,7 +50,7 @@ export default defineComponent({
       },
     ];
 
-    const linhasPadrao: Linha[] = [
+    const linhasPadrao = ref<Linha[]>([
       {
         empreendedor: "Maria Silva",
         empreendimento: "Doces da Maria",
@@ -197,7 +198,25 @@ export default defineComponent({
         email: "viviane@castroarte.com",
         telefone: "(81) 98787-1212",
       },
-    ];
+    ]);
+
+    // Incrementamos a chave para forçar o EliTabela a recarregar a consulta.
+    // (Como o componente não expõe um método público de refresh)
+    const versaoTabelaOk = ref(0);
+
+    function adicionarLinha() {
+      const proximo = linhasPadrao.value.length + 1;
+
+      linhasPadrao.value.unshift({
+        empreendedor: `Novo Empreendedor ${proximo}`,
+        empreendimento: `Novo Empreendimento ${proximo}`,
+        documento: "00.000.000/0000-00",
+        email: `novo${proximo}@exemplo.com`,
+        telefone: "(00) 90000-0000",
+      });
+
+      versaoTabelaOk.value++;
+    }
 
 
     const filtrarPorBusca = (linhas: Linha[], texto?: string) => {
@@ -256,6 +275,14 @@ export default defineComponent({
     const tabelaOk: EliTabelaConsulta<Linha> = {
       registros_por_consulta: 10,
       mostrarCaixaDeBusca: true,
+      acoesTabela: [
+        {
+          icone: Plus,
+          cor: "#16a34a",
+          rotulo: "Novo",
+          acao: adicionarLinha,
+        },
+      ],
       colunas: [
         {
           rotulo: "Empreendedor",
@@ -287,9 +314,9 @@ export default defineComponent({
           coluna_ordem: "telefone",
         },
       ],
-      acoesLinha: acoesTabela,
+      acoesLinha: acoesLinha,
       consulta: async (parametrosConsulta) => {
-        const ordenadas = ordenarLinhas(linhasPadrao, parametrosConsulta);
+        const ordenadas = ordenarLinhas(linhasPadrao.value, parametrosConsulta);
         const valores = aplicarPaginacao(ordenadas, parametrosConsulta);
 
         return {
@@ -322,14 +349,14 @@ export default defineComponent({
         };
       },
       mensagemVazio: "Nada para mostrar aqui.",
-      acoesLinha: acoesTabela,
+      acoesLinha: acoesLinha,
     };
 
     const tabelaErro: EliTabelaConsulta<Linha> = {
       registros_por_consulta: tabelaOk.registros_por_consulta,
       mostrarCaixaDeBusca: tabelaOk.mostrarCaixaDeBusca,
       colunas: tabelaOk.colunas,
-      acoesLinha: acoesTabela,
+      acoesLinha: acoesLinha,
       consulta: async (_parametrosConsulta) => {
         return {
           cod: codigosResposta.erroConhecido,
@@ -341,7 +368,7 @@ export default defineComponent({
       },
     };
 
-    return { tabelaOk, tabelaVazia, tabelaErro };
+    return { tabelaOk, tabelaVazia, tabelaErro, versaoTabelaOk };
   },
 });
 </script>