publico/vue-componentes
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adicionado detalhes

Browse source
This commit is contained in:
Luiz Silva 2026-01-28 19:28:34 -03:00
parent 133f32e4f7
commit 5c587c9232
9 changed files with 496 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

97
dist/types/components/eli/EliTabela/EliTabela.vue.d.ts vendored
View file

@ -4,6 +4,7 @@
*/
/** Dependências do Vue (Composition API) */
import { PropType } from "vue";
import type { EliColuna } from "./types-eli-tabela";
/** Tipos da configuração/contrato da tabela */
import type { EliTabelaConsulta } from "./types-eli-tabela";
import { type EliTabelaColunasConfig } from "./colunasStorage";
@ -45,9 +46,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
visiveis: string[];
invisiveis: string[];
}>;
temColunasInvisiveis: import("vue").ComputedRef<boolean>;
colunasInvisiveisEfetivas: import("vue").ComputedRef<EliColuna<any>[]>;
linhasExpandidas: import("vue").Ref<Record<number, boolean>, Record<number, boolean>>;
abrirModalColunas: () => void;
fecharModalColunas: () => void;
salvarModalColunas: (cfg: EliTabelaColunasConfig) => void;
alternarLinhaExpandida: (indice: number) => void;
alternarOrdenacao: (chave?: string) => void;
atualizarBusca: (texto: string) => void;
irParaPagina: (pagina: number) => void;
@ -262,13 +267,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
EliTabelaHead: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
colunas: {
type: PropType<Array<import("./types-eli-tabela").EliColuna<any>>>;
type: PropType<Array<EliColuna<any>>>;
required: true;
};
temAcoes: {
type: BooleanConstructor;
required: true;
};
temColunasInvisiveis: {
type: BooleanConstructor;
required: true;
};
colunaOrdenacao: {
type: PropType<string | null>;
required: true;
@ -287,13 +296,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
alternarOrdenacao(chave: string): boolean;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
colunas: {
type: PropType<Array<import("./types-eli-tabela").EliColuna<any>>>;
type: PropType<Array<EliColuna<any>>>;
required: true;
};
temAcoes: {
type: BooleanConstructor;
required: true;
};
temColunasInvisiveis: {
type: BooleanConstructor;
required: true;
};
colunaOrdenacao: {
type: PropType<string | null>;
required: true;
@ -310,7 +323,19 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
EliTabelaBody: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
colunas: {
type: PropType<Array<import("./types-eli-tabela").EliColuna<any>>>;
type: PropType<Array<EliColuna<any>>>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
temColunasInvisiveis: {
type: BooleanConstructor;
required: true;
};
linhasExpandidas: {
type: PropType<Record<number, boolean>>;
required: true;
};
linhas: {
@ -333,13 +358,31 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<(indice: number, evento: MouseEvent) => void>;
required: true;
};
alternarLinhaExpandida: {
type: PropType<(indice: number) => void>;
required: true;
};
}>, {
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<import("./types-eli-tabela").EliColuna<any>>>;
type: PropType<Array<EliColuna<any>>>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
temColunasInvisiveis: {
type: BooleanConstructor;
required: true;
};
linhasExpandidas: {
type: PropType<Record<number, boolean>>;
required: true;
};
linhas: {
@ -362,6 +405,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<(indice: number, evento: MouseEvent) => void>;
required: true;
};
alternarLinhaExpandida: {
type: PropType<(indice: number) => void>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {
EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
celula: {
@ -383,7 +430,49 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
required: true;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
EliTabelaDetalhesLinha: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
linha: {
type: PropType<unknown>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
linha: {
type: PropType<unknown>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {
EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
celula: {
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
required: true;
};
}>, {
Componente: import("vue").ComputedRef<import("vue").Component>;
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;
}>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
celula: {
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
MoreVertical: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
EliTabelaMenuAcoes: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
menuAberto: {

76
dist/types/components/eli/EliTabela/EliTabelaBody.vue.d.ts vendored
View file

@ -5,6 +5,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<Array<EliColuna<any>>>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
temColunasInvisiveis: {
type: BooleanConstructor;
required: true;
};
linhasExpandidas: {
type: PropType<Record<number, boolean>>;
required: true;
};
linhas: {
type: PropType<Array<unknown>>;
required: true;
@ -25,7 +37,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<(indice: number, evento: MouseEvent) => void>;
required: true;
};
alternarLinhaExpandida: {
type: PropType<(indice: number) => void>;
required: true;
};
}>, {
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;
@ -34,6 +52,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<Array<EliColuna<any>>>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
temColunasInvisiveis: {
type: BooleanConstructor;
required: true;
};
linhasExpandidas: {
type: PropType<Record<number, boolean>>;
required: true;
};
linhas: {
type: PropType<Array<unknown>>;
required: true;
@ -54,6 +84,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<(indice: number, evento: MouseEvent) => void>;
required: true;
};
alternarLinhaExpandida: {
type: PropType<(indice: number) => void>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {
EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
celula: {
@ -75,7 +109,49 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
required: true;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
EliTabelaDetalhesLinha: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
linha: {
type: PropType<unknown>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
linha: {
type: PropType<unknown>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {
EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
celula: {
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
required: true;
};
}>, {
Componente: import("vue").ComputedRef<import("vue").Component>;
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;
}>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
celula: {
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
MoreVertical: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
declare const _default: typeof __VLS_export;
export default _default;

44
dist/types/components/eli/EliTabela/EliTabelaDetalhesLinha.vue.d.ts vendored Normal file
View file

@ -0,0 +1,44 @@
import { PropType } from "vue";
import type { EliColuna } from "./types-eli-tabela";
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
linha: {
type: PropType<unknown>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
linha: {
type: PropType<unknown>;
required: true;
};
colunasInvisiveis: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {
EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
celula: {
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
required: true;
};
}>, {
Componente: import("vue").ComputedRef<import("vue").Component>;
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;
}>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
celula: {
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
declare const _default: typeof __VLS_export;
export default _default;

8
dist/types/components/eli/EliTabela/EliTabelaHead.vue.d.ts vendored
View file

@ -9,6 +9,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: BooleanConstructor;
required: true;
};
temColunasInvisiveis: {
type: BooleanConstructor;
required: true;
};
colunaOrdenacao: {
type: PropType<string | null>;
required: true;
@ -34,6 +38,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: BooleanConstructor;
required: true;
};
temColunasInvisiveis: {
type: BooleanConstructor;
required: true;
};
colunaOrdenacao: {
type: PropType<string | null>;
required: true;

78
src/components/eli/EliTabela/EliTabela.css
View file

@ -311,3 +311,81 @@
flex: 1;
text-align: left;
}
/* =========================
* Expander (colunas invisíveis)
* ========================= */
.eli-tabela__th--expander,
.eli-tabela__td--expander {
width: 42px;
padding: 6px 8px;
text-align: center;
vertical-align: middle;
}
.eli-tabela__expander-botao {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 9999px;
border: none;
background: transparent;
color: rgba(15, 23, 42, 0.72);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.eli-tabela__expander-botao:hover,
.eli-tabela__expander-botao:focus-visible {
background-color: rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.95);
}
.eli-tabela__expander-botao:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.45);
outline-offset: 2px;
}
.eli-tabela__expander-botao--ativo {
background-color: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.95);
}
.eli-tabela__td--detalhes {
padding: 12px;
}
.eli-tabela__tr--detalhes .eli-tabela__td {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.eli-tabela__detalhes {
display: grid;
gap: 10px;
padding-left: 4px;
}
.eli-tabela__detalhe {
display: grid;
grid-template-columns: 180px 1fr;
gap: 10px;
align-items: start;
}
.eli-tabela__detalhe-rotulo {
font-weight: 600;
color: rgba(15, 23, 42, 0.85);
}
.eli-tabela__detalhe-valor {
min-width: 0;
}
@media (max-width: 720px) {
.eli-tabela__detalhe {
grid-template-columns: 1fr;
}
}

55
src/components/eli/EliTabela/EliTabela.vue
View file

@ -31,6 +31,7 @@
<EliTabelaHead
:colunas="colunasEfetivas"
:temAcoes="temAcoes"
:temColunasInvisiveis="temColunasInvisiveis"
:colunaOrdenacao="colunaOrdenacao"
:direcaoOrdenacao="direcaoOrdenacao"
@alternar-ordenacao="alternarOrdenacao"
@ -38,11 +39,15 @@
<EliTabelaBody
:colunas="colunasEfetivas"
:colunasInvisiveis="colunasInvisiveisEfetivas"
:temColunasInvisiveis="temColunasInvisiveis"
:linhasExpandidas="linhasExpandidas"
:linhas="linhas"
:temAcoes="temAcoes"
:menuAberto="menuAberto"
:possuiAcoes="possuiAcoes"
:toggleMenu="toggleMenu"
:alternarLinhaExpandida="alternarLinhaExpandida"
/>
</table>
@ -93,6 +98,7 @@ import EliTabelaBody from "./EliTabelaBody.vue";
import EliTabelaMenuAcoes from "./EliTabelaMenuAcoes.vue";
import EliTabelaPaginacao from "./EliTabelaPaginacao.vue";
import EliTabelaModalColunas from "./EliTabelaModalColunas.vue";
import type { EliColuna } from "./types-eli-tabela";
/** Tipos da configuração/contrato da tabela */
import type { EliTabelaConsulta } from "./types-eli-tabela";
import {
@ -158,8 +164,37 @@ export default defineComponent({
carregarConfigColunas(props.tabela.nome)
);
/** Linhas expandidas (para exibir colunas invisíveis) */
const linhasExpandidas = ref<Record<number, boolean>>({});
const rotulosColunas = computed(() => props.tabela.colunas.map((c) => c.rotulo));
const colunasInvisiveisEfetivas = computed(() => {
const colunas = props.tabela.colunas as Array<EliColuna<any>>;
const invisiveisSet = new Set(configColunas.value.invisiveis ?? []);
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 ?? [];
const mapa = new Map<string, EliColuna<any>>();
for (const c of base) {
if (!mapa.has(c.rotulo)) mapa.set(c.rotulo, c);
}
const ordenadas: Array<EliColuna<any>> = [];
for (const r of ordemSalva) {
const c = mapa.get(r);
if (c) ordenadas.push(c);
}
for (const c of base) {
if (!ordenadas.includes(c)) ordenadas.push(c);
}
return ordenadas;
});
const temColunasInvisiveis = computed(() => colunasInvisiveisEfetivas.value.length > 0);
const colunasEfetivas = computed(() => {
const colunas = props.tabela.colunas;
const todosRotulos = rotulosColunas.value;
@ -202,6 +237,17 @@ export default defineComponent({
configColunas.value = cfg;
salvarConfigColunas(props.tabela.nome, cfg);
modalColunasAberto.value = false;
// ao mudar colunas, fecha detalhes expandidos
linhasExpandidas.value = {};
}
function alternarLinhaExpandida(indice: number) {
const atual = Boolean(linhasExpandidas.value[indice]);
linhasExpandidas.value = {
...linhasExpandidas.value,
[indice]: !atual,
};
}
/** Registros por consulta (normaliza para inteiro positivo) */
@ -383,6 +429,7 @@ export default defineComponent({
erro.value = null;
acoesVisiveis.value = [];
menuAberto.value = null;
linhasExpandidas.value = {};
const limite = Math.max(1, registrosPorConsulta.value);
const offset = (paginaAtual.value - 1) * limite;
@ -523,6 +570,7 @@ export default defineComponent({
valorBusca.value = "";
modalColunasAberto.value = false;
configColunas.value = carregarConfigColunas(props.tabela.nome);
linhasExpandidas.value = {};
if (paginaAtual.value !== 1) {
paginaAtual.value = 1;
} else {
@ -546,6 +594,7 @@ export default defineComponent({
/** Watch: mudança nas linhas fecha o menu aberto */
watch(linhas, () => {
menuAberto.value = null;
linhasExpandidas.value = {};
});
/** Exposição para o template (state, computed, helpers e actions) */
@ -574,10 +623,16 @@ export default defineComponent({
modalColunasAberto,
configColunas,
temColunasInvisiveis,
colunasInvisiveisEfetivas,
linhasExpandidas,
abrirModalColunas,
fecharModalColunas,
salvarModalColunas,
alternarLinhaExpandida,
// actions
alternarOrdenacao,
atualizarBusca,

61
src/components/eli/EliTabela/EliTabelaBody.vue
View file

@ -1,11 +1,30 @@
<template>
<tbody class="eli-tabela__tbody">
<template v-for="(linha, i) in linhas" :key="`grp-${i}`">
<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-if="temColunasInvisiveis" class="eli-tabela__td eli-tabela__td--expander" :key="`td-${i}-exp`">
<button
type="button"
class="eli-tabela__expander-botao"
:class="[linhasExpandidas?.[i] ? 'eli-tabela__expander-botao--ativo' : undefined]"
:aria-expanded="linhasExpandidas?.[i] ? 'true' : 'false'"
:aria-label="linhasExpandidas?.[i] ? 'Ocultar colunas ocultas' : 'Mostrar colunas ocultas'"
:title="linhasExpandidas?.[i] ? 'Ocultar detalhes' : 'Mostrar detalhes'"
@click.stop="alternarLinhaExpandida(i)"
>
<component
:is="linhasExpandidas?.[i] ? ChevronDown : ChevronRight"
class="eli-tabela__expander-icone"
:size="16"
:stroke-width="2"
aria-hidden="true"
/>
</button>
</td>
<td
v-for="(coluna, j) in colunas"
:key="`td-${i}-${j}`"
@ -50,26 +69,56 @@
</div>
</td>
</tr>
<tr
v-if="temColunasInvisiveis && Boolean(linhasExpandidas?.[i])"
class="eli-tabela__tr eli-tabela__tr--detalhes"
:class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
>
<td
class="eli-tabela__td eli-tabela__td--detalhes"
:colspan="(temColunasInvisiveis ? 1 : 0) + colunas.length + (temAcoes ? 1 : 0)"
>
<EliTabelaDetalhesLinha :linha="linha" :colunasInvisiveis="colunasInvisiveis" />
</td>
</tr>
</template>
</tbody>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { MoreVertical } from "lucide-vue-next";
import { ChevronDown, ChevronRight, MoreVertical } from "lucide-vue-next";
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
import EliTabelaDetalhesLinha from "./EliTabelaDetalhesLinha.vue";
import type { EliColuna } from "./types-eli-tabela";
export default defineComponent({
name: "EliTabelaBody",
components: {
EliTabelaCelula,
EliTabelaDetalhesLinha,
MoreVertical,
ChevronRight,
ChevronDown,
},
props: {
colunas: {
type: Array as PropType<Array<EliColuna<any>>>,
required: true,
},
colunasInvisiveis: {
type: Array as PropType<Array<EliColuna<any>>>,
required: true,
},
temColunasInvisiveis: {
type: Boolean,
required: true,
},
linhasExpandidas: {
type: Object as PropType<Record<number, boolean>>,
required: true,
},
linhas: {
type: Array as PropType<Array<unknown>>,
required: true,
@ -90,6 +139,10 @@ export default defineComponent({
type: Function as PropType<(indice: number, evento: MouseEvent) => void>,
required: true,
},
alternarLinhaExpandida: {
type: Function as PropType<(indice: number) => void>,
required: true,
},
},
setup() {
function obterClasseAlinhamento(alinhamento?: string) {
@ -121,6 +174,8 @@ export default defineComponent({
}
return {
ChevronRight,
ChevronDown,
obterClasseAlinhamento,
obterMaxWidth,
obterTooltipCelula,

35
src/components/eli/EliTabela/EliTabelaDetalhesLinha.vue Normal file
View file

@ -0,0 +1,35 @@
<template>
<div class="eli-tabela__detalhes">
<div v-for="(coluna, idx) in colunasInvisiveis" :key="`det-${idx}-${coluna.rotulo}`" class="eli-tabela__detalhe">
<div class="eli-tabela__detalhe-rotulo">{{ coluna.rotulo }}</div>
<div class="eli-tabela__detalhe-valor">
<EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
import type { EliColuna } from "./types-eli-tabela";
export default defineComponent({
name: "EliTabelaDetalhesLinha",
components: { EliTabelaCelula },
props: {
linha: {
type: null as unknown as PropType<unknown>,
required: true,
},
colunasInvisiveis: {
type: Array as PropType<Array<EliColuna<any>>>,
required: true,
},
},
});
</script>
<style scoped>
/* estilos base ficam no EliTabela.css (global do componente) */
</style>

6
src/components/eli/EliTabela/EliTabelaHead.vue
View file

@ -1,6 +1,8 @@
<template>
<thead class="eli-tabela__thead">
<tr class="eli-tabela__tr eli-tabela__tr--header">
<th v-if="temColunasInvisiveis" class="eli-tabela__th eli-tabela__th--expander" scope="col"></th>
<th
v-for="(coluna, idx) in colunas"
:key="`th-${idx}`"
@ -66,6 +68,10 @@ export default defineComponent({
type: Boolean,
required: true,
},
temColunasInvisiveis: {
type: Boolean,
required: true,
},
colunaOrdenacao: {
type: String as PropType<string | null>,
required: true,