bkp

dist/types/components/eli/EliTabela/EliTabela.vue.d.ts

@@ -290,7 +290,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         ArrowUp: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         ArrowDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         isOrdenavel: (coluna: any) => boolean;
-        obterClasseAlinhamento: (alinhamento?: string) => "eli-tabela__celula--direita" | "eli-tabela__celula--centro" | "eli-tabela__celula--esquerda";
         emitAlternarOrdenacao: (chave: string) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         alternarOrdenacao(chave: string): boolean;
@@ -365,9 +364,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     }>, {
         ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
-        obterClasseAlinhamento: (alinhamento?: string) => "eli-tabela__celula--direita" | "eli-tabela__celula--centro" | "eli-tabela__celula--esquerda";
-        obterMaxWidth: (largura?: number | string) => string | undefined;
-        obterTooltipCelula: (celula: unknown) => any;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         colunas: {
             type: PropType<Array<EliColuna<any>>>;
@@ -420,6 +416,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             dadosParaComponente: import("vue").ComputedRef<{
                 texto: string;
                 acao?: () => void;
+            } | {
+                texto: string;
+                acao?: () => void;
             } | {
                 numero: number;
                 acao?: () => void;
@@ -459,6 +458,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
                 dadosParaComponente: import("vue").ComputedRef<{
                     texto: string;
                     acao?: () => void;
+                } | {
+                    texto: string;
+                    acao?: () => void;
                 } | {
                     numero: number;
                     acao?: () => void;
@@ -595,6 +597,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             type: PropType<EliTabelaColunasConfig>;
             required: true;
         };
+        colunas: {
+            type: PropType<Array<EliColuna<any>>>;
+            required: true;
+        };
     }>, {
         visiveisLocal: import("vue").Ref<string[], string[]>;
         invisiveisLocal: import("vue").Ref<string[], string[]>;
@@ -619,6 +625,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             type: PropType<EliTabelaColunasConfig>;
             required: true;
         };
+        colunas: {
+            type: PropType<Array<EliColuna<any>>>;
+            required: true;
+        };
     }>> & Readonly<{
         onFechar?: (() => any) | undefined;
         onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined;

dist/types/components/eli/EliTabela/EliTabelaBody.vue.d.ts

@@ -44,9 +44,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
-    obterClasseAlinhamento: (alinhamento?: string) => "eli-tabela__celula--direita" | "eli-tabela__celula--centro" | "eli-tabela__celula--esquerda";
-    obterMaxWidth: (largura?: number | string) => string | undefined;
-    obterTooltipCelula: (celula: unknown) => any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     colunas: {
         type: PropType<Array<EliColuna<any>>>;
@@ -99,6 +96,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         dadosParaComponente: import("vue").ComputedRef<{
             texto: string;
             acao?: () => void;
+        } | {
+            texto: string;
+            acao?: () => void;
         } | {
             numero: number;
             acao?: () => void;
@@ -138,6 +138,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             dadosParaComponente: import("vue").ComputedRef<{
                 texto: string;
                 acao?: () => void;
+            } | {
+                texto: string;
+                acao?: () => void;
             } | {
                 numero: number;
                 acao?: () => void;

dist/types/components/eli/EliTabela/EliTabelaDetalhesLinha.vue.d.ts

@@ -29,6 +29,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         dadosParaComponente: import("vue").ComputedRef<{
             texto: string;
             acao?: () => void;
+        } | {
+            texto: string;
+            acao?: () => void;
         } | {
             numero: number;
             acao?: () => void;

dist/types/components/eli/EliTabela/EliTabelaHead.vue.d.ts

@@ -25,7 +25,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     ArrowUp: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     ArrowDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     isOrdenavel: (coluna: any) => boolean;
-    obterClasseAlinhamento: (alinhamento?: string) => "eli-tabela__celula--direita" | "eli-tabela__celula--centro" | "eli-tabela__celula--esquerda";
     emitAlternarOrdenacao: (chave: string) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     alternarOrdenacao(chave: string): boolean;

dist/types/components/eli/EliTabela/EliTabelaModalColunas.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from "vue";
 import type { EliTabelaColunasConfig } from "./colunasStorage";
+import type { EliColuna } from "./types-eli-tabela";
 type OrigemLista = "visiveis" | "invisiveis";
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     aberto: {
@@ -14,6 +15,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<EliTabelaColunasConfig>;
         required: true;
     };
+    colunas: {
+        type: PropType<Array<EliColuna<any>>>;
+        required: true;
+    };
 }>, {
     visiveisLocal: import("vue").Ref<string[], string[]>;
     invisiveisLocal: import("vue").Ref<string[], string[]>;
@@ -38,6 +43,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<EliTabelaColunasConfig>;
         required: true;
     };
+    colunas: {
+        type: PropType<Array<EliColuna<any>>>;
+        required: true;
+    };
 }>> & Readonly<{
     onFechar?: (() => any) | undefined;
     onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined;

dist/types/components/eli/EliTabela/celulas/EliTabelaCelula.vue.d.ts

@@ -11,6 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     dadosParaComponente: import("vue").ComputedRef<{
         texto: string;
         acao?: () => void;
+    } | {
+        texto: string;
+        acao?: () => void;
     } | {
         numero: number;
         acao?: () => void;

dist/types/components/eli/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue.d.ts

@@ -0,0 +1,18 @@
+import { PropType } from "vue";
+import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    dados: {
+        type: PropType<TiposTabelaCelulas["textoTruncado"]>;
+    };
+}>, {
+    dados: {
+        texto: string;
+        acao?: () => void;
+    } | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    dados: {
+        type: PropType<TiposTabelaCelulas["textoTruncado"]>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

dist/types/components/eli/EliTabela/celulas/registryTabelaCelulas.d.ts

@@ -13,6 +13,20 @@ export declare const registryTabelaCelulas: {
             type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoSimples"]>;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    readonly textoTruncado: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        dados: {
+            type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoTruncado"]>;
+        };
+    }>, {
+        dados: {
+            texto: string;
+            acao?: () => void;
+        } | undefined;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        dados: {
+            type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoTruncado"]>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     readonly numero: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         dados: {
             type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["numero"]>;

dist/types/components/eli/EliTabela/celulas/tiposTabelaCelulas.d.ts

@@ -6,6 +6,10 @@ export type TiposTabelaCelulas = {
         texto: string;
         acao?: () => void;
     };
+    textoTruncado: {
+        texto: string;
+        acao?: () => void;
+    };
     numero: {
         numero: number;
         acao?: () => void;

dist/types/components/eli/EliTabela/types-eli-tabela.d.ts

@@ -7,7 +7,6 @@ export type ComponenteCelula = {
 }[TipoTabelaCelula];
 export declare const celulaTabela: <T extends TipoTabelaCelula>(tipo: T, dados: TiposTabelaCelulas[T]) => ComponenteCelulaBase<T>;
 export type { TipoTabelaCelula, TiposTabelaCelulas };
-export type EliAlinhamentoColuna = "esquerda" | "centro" | "direita";
 export type EliColuna<T> = {
     /** Texto exibido no cabeçalho da coluna. */
     rotulo: string;
@@ -15,24 +14,16 @@ export type EliColuna<T> = {
     celula: (linha: T) => ComponenteCelula;
     /** Ação opcional disparada ao clicar na célula. */
     acao?: () => void;
-    /** Alinhamento do conteúdo da coluna (cabeçalho e células). */
-    alinhamento?: EliAlinhamentoColuna;
-    /**
-     * Quando `true`, tenta truncar (ellipsis) conteúdos textuais longos.
-     * Observação: o tooltip automático só é aplicado quando o conteúdo renderizado
-     * da célula é um `string`/`number`.
-     */
-    truncar?: boolean;
-    /**
-     * Largura máxima usada quando `truncar` estiver ativo.
-     * Exemplos: `240` (px), `"18rem"`, `"30ch"`.
-     */
-    largura_maxima?: number | string;
     /**
      * Campo de ordenação associado à coluna. Caso informado, a coluna passa a
      * exibir controles de ordenação e utiliza o valor como chave para o backend.
      */
     coluna_ordem?: keyof T;
+    /**
+     * indica que a coluna será visivel, se false incia em detalhe
+     * Caso já tenha salvo a propriedade de visibilidade será adotado a propriedade salva
+     */
+    visivel: boolean;
 };
 export type EliConsultaPaginada<T> = {
     /** Registros retornados na consulta. */

src/components/eli/EliTabela/EliTabela.css

@@ -95,26 +95,7 @@
   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);

src/components/eli/EliTabela/EliTabela.vue

@@ -23,6 +23,7 @@
         :aberto="modalColunasAberto"
         :rotulosColunas="rotulosColunas"
         :configInicial="configColunas"
+        :colunas="tabela.colunas"
         @fechar="fecharModalColunas"
         @salvar="salvarModalColunas"
       />
@@ -171,11 +172,20 @@ export default defineComponent({
 
     const colunasInvisiveisEfetivas = computed(() => {
       const colunas = props.tabela.colunas as Array<EliColuna<any>>;
-      const invisiveisSet = new Set(configColunas.value.invisiveis ?? []);
+
+      const configTemDados =
+        (configColunas.value.visiveis?.length ?? 0) > 0 ||
+        (configColunas.value.invisiveis?.length ?? 0) > 0;
+
+      const invisiveisBaseRotulos = configTemDados
+        ? configColunas.value.invisiveis ?? []
+        : colunas.filter((c) => c.visivel === false).map((c) => c.rotulo);
+
+      const invisiveisSet = new Set(invisiveisBaseRotulos);
       const base = colunas.filter((c) => invisiveisSet.has(c.rotulo));
 
-      // ordenação: usa a lista salva de invisíveis (se existir), senão segue ordem original
+      // ordenação: usa a lista (salva ou derivada do default) e adiciona novas ao final
-      const ordemSalva = configColunas.value.invisiveis ?? [];
+      const ordemSalva = invisiveisBaseRotulos;
       const mapa = new Map<string, EliColuna<any>>();
       for (const c of base) {
         if (!mapa.has(c.rotulo)) mapa.set(c.rotulo, c);
@@ -198,14 +208,25 @@ export default defineComponent({
     const colunasEfetivas = computed(() => {
       const colunas = props.tabela.colunas;
       const todosRotulos = rotulosColunas.value;
-      const invisiveisSet = new Set(configColunas.value.invisiveis ?? []);
 
-      // default: todas visiveis; so some se estiver explicitamente em invisiveis
+      const configTemDados =
+        (configColunas.value.visiveis?.length ?? 0) > 0 ||
+        (configColunas.value.invisiveis?.length ?? 0) > 0;
+
+      const invisiveisBaseRotulos = configTemDados
+        ? configColunas.value.invisiveis ?? []
+        : (props.tabela.colunas as Array<EliColuna<any>>)
+            .filter((c) => c.visivel === false)
+            .map((c) => c.rotulo);
+
+      const invisiveisSet = new Set(invisiveisBaseRotulos);
+
+      // base visiveis: remove invisiveis
       const visiveisBaseRotulos = todosRotulos.filter((r) => !invisiveisSet.has(r));
       const visiveisSet = new Set(visiveisBaseRotulos);
 
       // aplica ordem salva; novas (sem definicao) entram no fim, respeitando ordem original
-      const ordemSalva = configColunas.value.visiveis ?? [];
+      const ordemSalva = configTemDados ? configColunas.value.visiveis ?? [] : [];
       const ordemFinal: string[] = [];
 
       for (const r of ordemSalva) {

src/components/eli/EliTabela/EliTabelaBody.vue

@@ -29,22 +29,10 @@
           v-for="(coluna, j) in colunas"
           :key="`td-${i}-${j}`"
           class="eli-tabela__td"
-          :class="[
+          :class="[coluna.acao ? 'eli-tabela__td--clicavel' : undefined]"
-            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`">
@@ -145,40 +133,9 @@ export default defineComponent({
     },
   },
   setup() {
-    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;
-    }
-
     return {
       ChevronRight,
       ChevronDown,
-      obterClasseAlinhamento,
-      obterMaxWidth,
-      obterTooltipCelula,
     };
   },
 });

src/components/eli/EliTabela/EliTabelaHead.vue

@@ -7,10 +7,7 @@
         v-for="(coluna, idx) in colunas"
         :key="`th-${idx}`"
         class="eli-tabela__th"
-        :class="[
+        :class="[isOrdenavel(coluna) ? 'eli-tabela__th--ordenavel' : undefined]"
-          isOrdenavel(coluna) ? 'eli-tabela__th--ordenavel' : undefined,
-          obterClasseAlinhamento(coluna.alinhamento),
-        ]"
         scope="col"
       >
         <button
@@ -91,12 +88,6 @@ export default defineComponent({
       return coluna?.coluna_ordem !== undefined && coluna?.coluna_ordem !== null;
     }
 
-    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 emitAlternarOrdenacao(chave: string) {
       emit("alternarOrdenacao", chave);
     }
@@ -105,7 +96,6 @@ export default defineComponent({
       ArrowUp,
       ArrowDown,
       isOrdenavel,
-      obterClasseAlinhamento,
       emitAlternarOrdenacao,
     };
   },

src/components/eli/EliTabela/EliTabelaModalColunas.vue

@@ -74,6 +74,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from "vue";
 import type { EliTabelaColunasConfig } from "./colunasStorage";
+import type { EliColuna } from "./types-eli-tabela";
 
 type OrigemLista = "visiveis" | "invisiveis";
 
@@ -100,6 +101,10 @@ export default defineComponent({
       type: Object as PropType<EliTabelaColunasConfig>,
       required: true,
     },
+    colunas: {
+      type: Array as PropType<Array<EliColuna<any>>>,
+      required: true,
+    },
   },
   emits: {
     fechar() {
@@ -115,9 +120,18 @@ export default defineComponent({
 
     function sincronizarEstado() {
       const todos = props.rotulosColunas;
-      const invisiveisSet = new Set(props.configInicial.invisiveis ?? []);
+      const configTemDados =
+        (props.configInicial.visiveis?.length ?? 0) > 0 ||
+        (props.configInicial.invisiveis?.length ?? 0) > 0;
+
+      const invisiveisPadraoSet = new Set(
+        props.colunas.filter((c) => c.visivel === false).map((c) => c.rotulo)
+      );
+
+      const invisiveisSet = configTemDados
+        ? new Set(props.configInicial.invisiveis ?? [])
+        : invisiveisPadraoSet;
 
-      // default: todas visíveis
       const baseVisiveis = todos.filter((r) => !invisiveisSet.has(r));
 
       // ordenação: aplica ordem salva (visiveis) e adiciona novas ao final
@@ -139,7 +153,7 @@ export default defineComponent({
     }
 
     watch(
-      () => [props.aberto, props.rotulosColunas, props.configInicial] as const,
+      () => [props.aberto, props.rotulosColunas, props.configInicial, props.colunas] as const,
       () => {
         if (props.aberto) sincronizarEstado();
       },

src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue

@@ -1,5 +1,13 @@
 <template>
+  <button
+    v-if="dados?.acao"
+    type="button"
+    class="eli-tabela__celula-link"
+    @click.stop.prevent="dados.acao()"
+  >
     {{ String(dados?.numero).replace('.', ',') }}
+  </button>
+  <span v-else>{{ String(dados?.numero).replace('.', ',') }}</span>
 </template>
 
 <script lang="ts">
@@ -27,4 +35,25 @@ export default defineComponent({
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.eli-tabela__celula-link {
+  all: unset;
+  display: inline;
+  color: #2563eb;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: rgba(37, 99, 235, 0.55);
+  text-underline-offset: 2px;
+}
+
+.eli-tabela__celula-link:hover {
+  color: #1d4ed8;
+  text-decoration-color: rgba(29, 78, 216, 0.75);
+}
+
+.eli-tabela__celula-link:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.45);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+</style>

src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue

@@ -1,5 +1,13 @@
 <template>
+  <button
+    v-if="dados?.acao"
+    type="button"
+    class="eli-tabela__celula-link"
+    @click.stop.prevent="dados.acao()"
+  >
     {{ dados?.texto }}
+  </button>
+  <span v-else>{{ dados?.texto }}</span>
 </template>
 
 <script lang="ts">
@@ -27,4 +35,25 @@ export default defineComponent({
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.eli-tabela__celula-link {
+  all: unset;
+  display: inline;
+  color: #2563eb;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: rgba(37, 99, 235, 0.55);
+  text-underline-offset: 2px;
+}
+
+.eli-tabela__celula-link:hover {
+  color: #1d4ed8;
+  text-decoration-color: rgba(29, 78, 216, 0.75);
+}
+
+.eli-tabela__celula-link:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.45);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+</style>

src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue

@@ -0,0 +1,63 @@
+<template>
+
+  <!-- TODO: Validar de ação está cehgando aqui-->
+  <button
+    v-if="dados?.acao"
+    type="button"
+    class="eli-tabela__texto-truncado eli-tabela__celula-link"
+    :title="dados?.texto"
+    @click.stop.prevent="dados.acao()"
+  >
+    {{ dados?.texto }}
+  </button>
+  <span v-else class="eli-tabela__texto-truncado" :title="dados?.texto">{{ dados?.texto }}</span>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
+
+export default defineComponent({
+  name: "EliTabelaCelulaTextoTruncado",
+  props: {
+    dados: {
+      type: Object as PropType<TiposTabelaCelulas["textoTruncado"]>,
+    },
+  },
+  setup({ dados }) {
+    return { dados };
+  },
+});
+</script>
+
+<style scoped>
+.eli-tabela__texto-truncado {
+  display: inline-block;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.eli-tabela__celula-link {
+  all: unset;
+  display: inline;
+  color: #2563eb;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: rgba(37, 99, 235, 0.55);
+  text-underline-offset: 2px;
+}
+
+.eli-tabela__celula-link:hover {
+  color: #1d4ed8;
+  text-decoration-color: rgba(29, 78, 216, 0.75);
+}
+
+.eli-tabela__celula-link:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.45);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+</style>

src/components/eli/EliTabela/celulas/registryTabelaCelulas.ts

@@ -1,10 +1,12 @@
 import type { Component } from "vue";
 
 import EliTabelaCelulaTextoSimples from "./EliTabelaCelulaTextoSimples.vue";
+import EliTabelaCelulaTextoTruncado from "./EliTabelaCelulaTextoTruncado.vue";
 import EliTabelaCelulaNumero from "./EliTabelaCelulaNumero.vue";
 import type { TipoTabelaCelula } from "./tiposTabelaCelulas";
 
 export const registryTabelaCelulas = {
   textoSimples: EliTabelaCelulaTextoSimples,
+  textoTruncado: EliTabelaCelulaTextoTruncado,
   numero: EliTabelaCelulaNumero,
 } as const satisfies Record<TipoTabelaCelula, Component>;

src/components/eli/EliTabela/celulas/tiposTabelaCelulas.ts

@@ -7,6 +7,10 @@ export type TiposTabelaCelulas = {
     texto: string;
     acao?: () => void;
   };
+  textoTruncado: {
+    texto: string;
+    acao?: () => void;
+  };
   numero: {
     numero: number;
     acao?: () => void;

src/components/eli/EliTabela/types-eli-tabela.ts

@@ -24,7 +24,6 @@ export type { TipoTabelaCelula, TiposTabelaCelulas };
 
 
 
-export type EliAlinhamentoColuna = "esquerda" | "centro" | "direita";
 
 export type EliColuna<T> = {
   /** Texto exibido no cabeçalho da coluna. */
@@ -32,25 +31,20 @@ export type EliColuna<T> = {
   /** Função responsável por renderizar o conteúdo da célula. */
   celula: (linha: T) => ComponenteCelula;
   /** Ação opcional disparada ao clicar na célula. */
-  acao?: () => void;
+
-  /** Alinhamento do conteúdo da coluna (cabeçalho e células). */
+  // TODO: Ação passou a receber o objeto
-  alinhamento?: EliAlinhamentoColuna;
+  acao?: (linha:T) => void;
-  /**
-   * Quando `true`, tenta truncar (ellipsis) conteúdos textuais longos.
-   * Observação: o tooltip automático só é aplicado quando o conteúdo renderizado
-   * da célula é um `string`/`number`.
-   */
-  truncar?: boolean;
-  /**
-   * Largura máxima usada quando `truncar` estiver ativo.
-   * Exemplos: `240` (px), `"18rem"`, `"30ch"`.
-   */
-  largura_maxima?: number | string;
   /**
    * Campo de ordenação associado à coluna. Caso informado, a coluna passa a
    * exibir controles de ordenação e utiliza o valor como chave para o backend.
    */
   coluna_ordem?: keyof T;
+  
+  /**
+   * indica que a coluna será visivel, se false incia em detalhe
+   * Caso já tenha salvo a propriedade de visibilidade será adotado a propriedade salva
+   */
+  visivel: boolean
 };
 
 export type EliConsultaPaginada<T> = {

src/playground/tabela.playground.vue

@@ -289,34 +289,35 @@ export default defineComponent({
           rotulo: "Empreendedor",
           celula: (l) => celulaTabela('textoSimples', { texto: l.empreendedor }),
           coluna_ordem: "empreendedor",
+          visivel: true,
         },
         {
           rotulo: "Empreendimento",
           celula: (l) => celulaTabela('textoSimples', { texto: l.empreendimento }),
           coluna_ordem: "empreendimento",
+          visivel: true,
         },
         {
           rotulo: "Documento",
           celula: (l) => celulaTabela('textoSimples', { texto: l.documento }),
           coluna_ordem: "documento",
-          alinhamento: "direita",
+          visivel: false,
         },
         {
           rotulo: "E-mail",
-          celula: (l) => celulaTabela('textoSimples', { texto: l.email }),
+          celula: (l) => celulaTabela('textoTruncado', { texto: l.email }),
           coluna_ordem: "email",
-          truncar: true,
+          visivel: true,
-          largura_maxima: 260,
+          acao: (l) => {
-          acao: () => {
             // Exemplo de ação: poderia abrir detalhes
-            console.log("Clicou na coluna e-mail");
+            alert(`Clicou em ${l.email}`);
           },
         },
         {
           rotulo: "Telefone",
           celula: (l) => celulaTabela('textoSimples', { texto: l.telefone }),
           coluna_ordem: "telefone",
-          alinhamento: "direita",
+          visivel: true,
         },
       ],
       acoesLinha: acoesLinha,