adicionado detalhes
This commit is contained in:
parent
133f32e4f7
commit
5c587c9232
9 changed files with 496 additions and 50 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,75 +1,124 @@
|
|||
<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"
|
||||
<template v-for="(linha, i) in linhas" :key="`grp-${i}`">
|
||||
<tr
|
||||
class="eli-tabela__tr"
|
||||
:class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : 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]"
|
||||
>
|
||||
<td v-if="temColunasInvisiveis" class="eli-tabela__td eli-tabela__td--expander" :key="`td-${i}-exp`">
|
||||
<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="toggleMenu(i, $event)"
|
||||
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)"
|
||||
>
|
||||
<MoreVertical class="eli-tabela__acoes-toggle-icone" :size="18" :stroke-width="2" />
|
||||
<component
|
||||
:is="linhasExpandidas?.[i] ? ChevronDown : ChevronRight"
|
||||
class="eli-tabela__expander-icone"
|
||||
:size="16"
|
||||
:stroke-width="2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
|
||||
<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="toggleMenu(i, $event)"
|
||||
>
|
||||
<MoreVertical class="eli-tabela__acoes-toggle-icone" :size="18" :stroke-width="2" />
|
||||
</button>
|
||||
</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
35
src/components/eli/EliTabela/EliTabelaDetalhesLinha.vue
Normal 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>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue