bkp

src/components/eli/EliTabela/EliTabelaBody.vue

@@ -0,0 +1,136 @@
+<template>
+  <tbody class="eli-tabela__tbody">
+    <tr
+      v-for="(linha, i) in linhas"
+      :key="`tr-${i}`"
+      class="eli-tabela__tr"
+      :class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
+    >
+      <td
+        v-for="(coluna, j) in colunas"
+        :key="`td-${i}-${j}`"
+        class="eli-tabela__td"
+        :class="[
+          coluna.acao ? 'eli-tabela__td--clicavel' : undefined,
+          obterClasseAlinhamento(coluna.alinhamento),
+        ]"
+        @click="coluna.acao ? () => coluna.acao?.() : undefined"
+      >
+        <span
+          v-if="Boolean(coluna.truncar)"
+          class="eli-tabela__celula-conteudo"
+          :style="coluna.largura_maxima ? { maxWidth: obterMaxWidth(coluna.largura_maxima) } : undefined"
+          :title="obterTooltipCelula(coluna.celula(linha as never))"
+        >
+          <EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
+        </span>
+
+        <EliTabelaCelula v-else :celula="(coluna.celula(linha as never) as never)" />
+      </td>
+
+      <td v-if="temAcoes" class="eli-tabela__td eli-tabela__td--acoes" :key="`td-${i}-acoes`">
+        <div
+          class="eli-tabela__acoes-container"
+          :class="[menuAberto === i ? 'eli-tabela__acoes-container--aberto' : undefined]"
+        >
+          <button
+            class="eli-tabela__acoes-toggle"
+            type="button"
+            :id="`eli-tabela-acoes-toggle-${i}`"
+            :disabled="!possuiAcoes(i)"
+            :aria-haspopup="'menu'"
+            :aria-expanded="menuAberto === i ? 'true' : 'false'"
+            :aria-controls="possuiAcoes(i) ? `eli-tabela-acoes-menu-${i}` : undefined"
+            :aria-label="possuiAcoes(i) ? 'Ações da linha' : 'Nenhuma ação disponível'"
+            :title="possuiAcoes(i) ? 'Ações' : 'Nenhuma ação disponível'"
+            @click.stop="emitToggleMenu(i, $event)"
+          >
+            <MoreVertical class="eli-tabela__acoes-toggle-icone" :size="18" :stroke-width="2" />
+          </button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { MoreVertical } from "lucide-vue-next";
+import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
+import type { EliColuna } from "./types-eli-tabela";
+
+export default defineComponent({
+  name: "EliTabelaBody",
+  components: {
+    EliTabelaCelula,
+    MoreVertical,
+  },
+  props: {
+    colunas: {
+      type: Array as PropType<Array<EliColuna<any>>>,
+      required: true,
+    },
+    linhas: {
+      type: Array as PropType<Array<unknown>>,
+      required: true,
+    },
+    temAcoes: {
+      type: Boolean,
+      required: true,
+    },
+    menuAberto: {
+      type: Number as PropType<number | null>,
+      required: true,
+    },
+    possuiAcoes: {
+      type: Function as PropType<(i: number) => boolean>,
+      required: true,
+    },
+  },
+  emits: {
+    toggleMenu(payload: { indice: number; evento: MouseEvent }) {
+      return payload && typeof payload.indice === "number";
+    },
+  },
+  setup(_props, { emit }) {
+    function obterClasseAlinhamento(alinhamento?: string) {
+      if (alinhamento === "direita") return "eli-tabela__celula--direita";
+      if (alinhamento === "centro") return "eli-tabela__celula--centro";
+      return "eli-tabela__celula--esquerda";
+    }
+
+    function obterMaxWidth(largura?: number | string) {
+      if (largura === undefined || largura === null) return undefined;
+      return typeof largura === "number" ? `${largura}px` : String(largura);
+    }
+
+    function obterTooltipCelula(celula: unknown) {
+      if (!Array.isArray(celula)) return undefined;
+
+      const tipo = celula[0];
+      const dados = celula[1] as any;
+
+      if (tipo === "textoSimples") {
+        return typeof dados?.texto === "string" ? dados.texto : undefined;
+      }
+
+      if (tipo === "numero") {
+        return typeof dados?.numero === "number" ? String(dados.numero) : undefined;
+      }
+
+      return undefined;
+    }
+
+    function emitToggleMenu(indice: number, evento: MouseEvent) {
+      emit("toggleMenu", { indice, evento });
+    }
+
+    return {
+      obterClasseAlinhamento,
+      obterMaxWidth,
+      obterTooltipCelula,
+      emitToggleMenu,
+    };
+  },
+});
+</script>