140 lines
4.4 KiB
Vue
140 lines
4.4 KiB
Vue
<template>
|
|
<tbody class="eli-tabela__tbody">
|
|
<template v-for="(linha, i) in linhas" :key="`grp-${i}`">
|
|
<tr
|
|
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}`"
|
|
class="eli-tabela__td"
|
|
>
|
|
<EliTabelaCelula :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 { 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,
|
|
},
|
|
temAcoes: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
menuAberto: {
|
|
type: Number as PropType<number | null>,
|
|
required: true,
|
|
},
|
|
possuiAcoes: {
|
|
type: Function as PropType<(i: number) => boolean>,
|
|
required: true,
|
|
},
|
|
toggleMenu: {
|
|
type: Function as PropType<(indice: number, evento: MouseEvent) => void>,
|
|
required: true,
|
|
},
|
|
alternarLinhaExpandida: {
|
|
type: Function as PropType<(indice: number) => void>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup() {
|
|
return {
|
|
ChevronRight,
|
|
ChevronDown,
|
|
};
|
|
},
|
|
});
|
|
</script>
|