bkp

src/playground/tabela.playground.vue

@@ -0,0 +1,131 @@
+<template>
+  <section class="stack">
+    <h2>EliTabela</h2>
+
+    <EliTabela :tabela="tabelaOk" />
+
+    <EliTabela :tabela="tabelaVazia" />
+
+    <EliTabela :tabela="tabelaErro" />
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { codigosResposta } from "p-respostas";
+import { Eye, Trash2 } from "lucide-vue-next";
+import { EliTabela } from "@/components/eli/EliTabela";
+import type { EliTabelaConsulta } from "@/components/eli/EliTabela";
+
+type Linha = {
+  nome: string;
+  email: string;
+};
+
+export default defineComponent({
+  name: "TabelaPlayground",
+  components: { EliTabela },
+  setup() {
+    const acoesTabela: EliTabelaConsulta<Linha>["acoes"] = [
+      {
+        icone: Eye,
+        cor: "#2563eb",
+        rotulo: "Detalhes",
+        acao: (linha) => {
+          console.log("Visualizar detalhes de", linha.nome);
+        },
+      },
+      {
+        icone: Trash2,
+        cor: "#dc2626",
+        rotulo: "Remover",
+        acao: (linha) => {
+          console.log("Remover registro de", linha.nome);
+        },
+        exibir: async () => {
+          await new Promise((resolve) => setTimeout(resolve, 250));
+          return true;
+        },
+      },
+    ];
+
+    const tabelaOk: EliTabelaConsulta<Linha> = {
+      colunas: [
+        {
+          rotulo: "Nome",
+          celula: (l) => l.nome,
+        },
+        {
+          rotulo: "E-mail",
+          celula: (l) => l.email,
+          acao: () => {
+            // Exemplo de ação: poderia abrir detalhes
+            console.log("clicou na coluna e-mail");
+          },
+        },
+      ],
+      acoes: acoesTabela,
+      resposta: async () => {
+        return {
+          cod: codigosResposta.sucesso,
+          eCerto: true,
+          eErro: false,
+          mensagem: undefined,
+          valor: {
+            quantidade: 2,
+            valores: [
+              { nome: "Ana", email: "ana@eli.com" },
+              { nome: "Bruno", email: "bruno@eli.com" },
+            ],
+          },
+        };
+      },
+    };
+
+    const tabelaVazia: EliTabelaConsulta<Linha> = {
+      colunas: tabelaOk.colunas,
+      resposta: async () => {
+        return {
+          cod: codigosResposta.sucesso,
+          eCerto: true,
+          eErro: false,
+          mensagem: undefined,
+          valor: {
+            quantidade: 0,
+            valores: [],
+          },
+        };
+      },
+      mensagemVazio: "Nada para mostrar aqui.",
+      acoes: acoesTabela,
+    };
+
+    const tabelaErro: EliTabelaConsulta<Linha> = {
+      colunas: tabelaOk.colunas,
+      acoes: acoesTabela,
+      resposta: async () => {
+        return {
+          cod: codigosResposta.erroConhecido,
+          eCerto: false,
+          eErro: true,
+          mensagem: "Falha ao buscar dados",
+          valor: undefined,
+        };
+      },
+    };
+
+    return { tabelaOk, tabelaVazia, tabelaErro };
+  },
+});
+</script>
+
+<style scoped>
+.stack {
+  display: grid;
+  gap: 16px;
+}
+
+.stack :deep(.eli-tabela) {
+  max-width: 900px;
+}
+</style>