diff --git a/dist/types/components/eli/EliTabela/EliTabela.vue.d.ts b/dist/types/components/eli/EliTabela/EliTabela.vue.d.ts index ac7f3ad..53b035c 100644 --- a/dist/types/components/eli/EliTabela/EliTabela.vue.d.ts +++ b/dist/types/components/eli/EliTabela/EliTabela.vue.d.ts @@ -290,7 +290,6 @@ declare const __VLS_export: import("vue").DefineComponent; ArrowDown: import("vue").FunctionalComponent; 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, { ChevronRight: import("vue").FunctionalComponent; ChevronDown: import("vue").FunctionalComponent; - 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>>; @@ -420,6 +416,9 @@ declare const __VLS_export: import("vue").DefineComponent void; + } | { + texto: string; + acao?: () => void; } | { numero: number; acao?: () => void; @@ -459,6 +458,9 @@ declare const __VLS_export: import("vue").DefineComponent void; + } | { + texto: string; + acao?: () => void; } | { numero: number; acao?: () => void; @@ -595,6 +597,10 @@ declare const __VLS_export: import("vue").DefineComponent; required: true; }; + colunas: { + type: PropType>>; + required: true; + }; }>, { visiveisLocal: import("vue").Ref; invisiveisLocal: import("vue").Ref; @@ -619,6 +625,10 @@ declare const __VLS_export: import("vue").DefineComponent; required: true; }; + colunas: { + type: PropType>>; + required: true; + }; }>> & Readonly<{ onFechar?: (() => any) | undefined; onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined; diff --git a/dist/types/components/eli/EliTabela/EliTabelaBody.vue.d.ts b/dist/types/components/eli/EliTabela/EliTabelaBody.vue.d.ts index bd96750..ac564d3 100644 --- a/dist/types/components/eli/EliTabela/EliTabelaBody.vue.d.ts +++ b/dist/types/components/eli/EliTabela/EliTabelaBody.vue.d.ts @@ -44,9 +44,6 @@ declare const __VLS_export: import("vue").DefineComponent, { ChevronRight: import("vue").FunctionalComponent; ChevronDown: import("vue").FunctionalComponent; - 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>>; @@ -99,6 +96,9 @@ declare const __VLS_export: import("vue").DefineComponent void; + } | { + texto: string; + acao?: () => void; } | { numero: number; acao?: () => void; @@ -138,6 +138,9 @@ declare const __VLS_export: import("vue").DefineComponent void; + } | { + texto: string; + acao?: () => void; } | { numero: number; acao?: () => void; diff --git a/dist/types/components/eli/EliTabela/EliTabelaDetalhesLinha.vue.d.ts b/dist/types/components/eli/EliTabela/EliTabelaDetalhesLinha.vue.d.ts index 4abd012..65d7d33 100644 --- a/dist/types/components/eli/EliTabela/EliTabelaDetalhesLinha.vue.d.ts +++ b/dist/types/components/eli/EliTabela/EliTabelaDetalhesLinha.vue.d.ts @@ -29,6 +29,9 @@ declare const __VLS_export: import("vue").DefineComponent void; + } | { + texto: string; + acao?: () => void; } | { numero: number; acao?: () => void; diff --git a/dist/types/components/eli/EliTabela/EliTabelaHead.vue.d.ts b/dist/types/components/eli/EliTabela/EliTabelaHead.vue.d.ts index db9effe..4c1aa97 100644 --- a/dist/types/components/eli/EliTabela/EliTabelaHead.vue.d.ts +++ b/dist/types/components/eli/EliTabela/EliTabelaHead.vue.d.ts @@ -25,7 +25,6 @@ declare const __VLS_export: import("vue").DefineComponent; ArrowDown: import("vue").FunctionalComponent; 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; diff --git a/dist/types/components/eli/EliTabela/EliTabelaModalColunas.vue.d.ts b/dist/types/components/eli/EliTabela/EliTabelaModalColunas.vue.d.ts index 419977e..b186112 100644 --- a/dist/types/components/eli/EliTabela/EliTabelaModalColunas.vue.d.ts +++ b/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; required: true; }; + colunas: { + type: PropType>>; + required: true; + }; }>, { visiveisLocal: import("vue").Ref; invisiveisLocal: import("vue").Ref; @@ -38,6 +43,10 @@ declare const __VLS_export: import("vue").DefineComponent; required: true; }; + colunas: { + type: PropType>>; + required: true; + }; }>> & Readonly<{ onFechar?: (() => any) | undefined; onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined; diff --git a/dist/types/components/eli/EliTabela/celulas/EliTabelaCelula.vue.d.ts b/dist/types/components/eli/EliTabela/celulas/EliTabelaCelula.vue.d.ts index ed608c8..e0bd3b7 100644 --- a/dist/types/components/eli/EliTabela/celulas/EliTabelaCelula.vue.d.ts +++ b/dist/types/components/eli/EliTabela/celulas/EliTabelaCelula.vue.d.ts @@ -11,6 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent void; + } | { + texto: string; + acao?: () => void; } | { numero: number; acao?: () => void; diff --git a/dist/types/components/eli/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue.d.ts b/dist/types/components/eli/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue.d.ts new file mode 100644 index 0000000..4b31116 --- /dev/null +++ b/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; + }; +}>, { + dados: { + texto: string; + acao?: () => void; + } | undefined; +}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + }; +}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; +declare const _default: typeof __VLS_export; +export default _default; diff --git a/dist/types/components/eli/EliTabela/celulas/registryTabelaCelulas.d.ts b/dist/types/components/eli/EliTabela/celulas/registryTabelaCelulas.d.ts index 8787c2e..8d25a24 100644 --- a/dist/types/components/eli/EliTabela/celulas/registryTabelaCelulas.d.ts +++ b/dist/types/components/eli/EliTabela/celulas/registryTabelaCelulas.d.ts @@ -13,6 +13,20 @@ export declare const registryTabelaCelulas: { type: import("vue").PropType; }; }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; + readonly textoTruncado: import("vue").DefineComponent; + }; + }>, { + dados: { + texto: string; + acao?: () => void; + } | undefined; + }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; + }; + }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; readonly numero: import("vue").DefineComponent; diff --git a/dist/types/components/eli/EliTabela/celulas/tiposTabelaCelulas.d.ts b/dist/types/components/eli/EliTabela/celulas/tiposTabelaCelulas.d.ts index d761d91..44ee6f9 100644 --- a/dist/types/components/eli/EliTabela/celulas/tiposTabelaCelulas.d.ts +++ b/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; diff --git a/dist/types/components/eli/EliTabela/types-eli-tabela.d.ts b/dist/types/components/eli/EliTabela/types-eli-tabela.d.ts index 1135aa6..a55527c 100644 --- a/dist/types/components/eli/EliTabela/types-eli-tabela.d.ts +++ b/dist/types/components/eli/EliTabela/types-eli-tabela.d.ts @@ -7,7 +7,6 @@ export type ComponenteCelula = { }[TipoTabelaCelula]; export declare const celulaTabela: (tipo: T, dados: TiposTabelaCelulas[T]) => ComponenteCelulaBase; export type { TipoTabelaCelula, TiposTabelaCelulas }; -export type EliAlinhamentoColuna = "esquerda" | "centro" | "direita"; export type EliColuna = { /** Texto exibido no cabeçalho da coluna. */ rotulo: string; @@ -15,24 +14,16 @@ export type EliColuna = { 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 = { /** Registros retornados na consulta. */ diff --git a/src/components/eli/EliTabela/EliTabela.css b/src/components/eli/EliTabela/EliTabela.css index 9d2563a..cbc5f4a 100644 --- a/src/components/eli/EliTabela/EliTabela.css +++ b/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); diff --git a/src/components/eli/EliTabela/EliTabela.vue b/src/components/eli/EliTabela/EliTabela.vue index f12f586..7f404fd 100644 --- a/src/components/eli/EliTabela/EliTabela.vue +++ b/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>; - 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 - const ordemSalva = configColunas.value.invisiveis ?? []; + // ordenação: usa a lista (salva ou derivada do default) e adiciona novas ao final + const ordemSalva = invisiveisBaseRotulos; const mapa = new Map>(); 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>) + .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) { diff --git a/src/components/eli/EliTabela/EliTabelaBody.vue b/src/components/eli/EliTabela/EliTabelaBody.vue index adadd9f..18e3487 100644 --- a/src/components/eli/EliTabela/EliTabelaBody.vue +++ b/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="[ - coluna.acao ? 'eli-tabela__td--clicavel' : undefined, - obterClasseAlinhamento(coluna.alinhamento), - ]" + :class="[coluna.acao ? 'eli-tabela__td--clicavel' : undefined]" @click="coluna.acao ? () => coluna.acao?.() : undefined" > - - - - - + @@ -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, }; }, }); diff --git a/src/components/eli/EliTabela/EliTabelaHead.vue b/src/components/eli/EliTabela/EliTabelaHead.vue index 0cd741b..ed314a6 100644 --- a/src/components/eli/EliTabela/EliTabelaHead.vue +++ b/src/components/eli/EliTabela/EliTabelaHead.vue @@ -7,10 +7,7 @@ v-for="(coluna, idx) in colunas" :key="`th-${idx}`" class="eli-tabela__th" - :class="[ - isOrdenavel(coluna) ? 'eli-tabela__th--ordenavel' : undefined, - obterClasseAlinhamento(coluna.alinhamento), - ]" + :class="[isOrdenavel(coluna) ? 'eli-tabela__th--ordenavel' : undefined]" scope="col" >