bkp

src/components/eli/EliTabela/EliTabela.vue

@@ -140,6 +140,53 @@ export default defineComponent({
       return filhos as never;
     }
 
+    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 renderConteudoCelula(valor: unknown, coluna: (typeof props.tabela.colunas)[number]) {
+      const filhos = normalizarFilhos(valor);
+      const truncar = Boolean(coluna.truncar);
+
+      if (!truncar) {
+        return filhos;
+      }
+
+      // Só truncamos de forma segura quando o conteúdo é textual.
+      if (typeof filhos !== "string" && typeof filhos !== "number") {
+        return filhos;
+      }
+
+      const tooltip = String(filhos);
+
+      return h(
+        "span",
+        {
+          class: "eli-tabela__celula-conteudo",
+          style: coluna.largura_maxima
+            ? {
+                maxWidth: obterMaxWidth(coluna.largura_maxima),
+              }
+            : undefined,
+          title: tooltip,
+        },
+        tooltip
+      );
+    }
+
     function renderErro(mensagem: string) {
       return h(
         "div",
@@ -428,6 +475,7 @@ export default defineComponent({
             class: [
               "eli-tabela__th",
               ordenavel ? "eli-tabela__th--ordenavel" : undefined,
+              obterClasseAlinhamento(coluna.alinhamento),
             ],
             scope: "col",
           },
@@ -515,11 +563,12 @@ export default defineComponent({
                     class: [
                       "eli-tabela__td",
                       coluna.acao ? "eli-tabela__td--clicavel" : undefined,
+                      obterClasseAlinhamento(coluna.alinhamento),
                     ],
                     key: `${i}-${j}`,
                     onClick: coluna.acao ? () => coluna.acao?.() : undefined,
                   },
-                  normalizarFilhos(coluna.celula(linha as never))
+                  renderConteudoCelula(coluna.celula(linha as never), coluna)
                 )
               );
 
@@ -663,7 +712,10 @@ export default defineComponent({
 
               return h(
                 "tr",
-                { class: "eli-tabela__tr", key: i },
+                {
+                  class: ["eli-tabela__tr", i % 2 === 1 ? "eli-tabela__tr--zebra" : undefined],
+                  key: i,
+                },
                 celulas
               );
             })
@@ -710,6 +762,10 @@ export default defineComponent({
   overflow: visible;
 }
 
+.eli-tabela__tbody .eli-tabela__tr--zebra .eli-tabela__td {
+  background: rgba(15, 23, 42, 0.02);
+}
+
 .eli-tabela__th,
 .eli-tabela__td {
   padding: 10px 12px;
@@ -786,6 +842,27 @@ export default defineComponent({
   background: rgba(0, 0, 0, 0.03);
 }
 
+.eli-tabela__celula--esquerda {
+  text-align: left;
+}
+
+.eli-tabela__celula--centro {
+  text-align: center;
+}
+
+.eli-tabela__celula--direita {
+  text-align: right;
+}
+
+.eli-tabela__celula-conteudo {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
 .eli-tabela--erro {
   border: 1px solid rgba(220, 53, 69, 0.35);
   border-radius: 12px;
@@ -836,10 +913,11 @@ export default defineComponent({
 }
 
 .eli-tabela__cabecalho {
+  width: 100%;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  /* Ações ficam imediatamente à direita da busca (em vez de ir para a extrema direita) */
-  justify-content: flex-start;
+  justify-content: flex-end;
   gap: 12px;
   margin-bottom: 12px;
   flex-wrap: wrap;