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

bkp

Browse source
This commit is contained in:
Luiz Silva 2026-01-27 12:22:30 -03:00
parent 24c07da6f8
commit 052337b9da
4 changed files with 201 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,9 +6,9 @@
<script lang="ts">
import { defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, watch } from "vue";
import type { ComponentPublicInstance } from "vue";
import { MoreVertical } from "lucide-vue-next";
import { ArrowDown, ArrowUp, MoreVertical } from "lucide-vue-next";
import { codigosResposta } from "p-respostas";
import type { EliTabelaConsulta } from "./types";
import type { EliTabelaConsulta } from "./types-eli-tabela";
export default defineComponent({
name: "EliTabela",
@ -30,6 +30,8 @@ export default defineComponent({
const acoesVisiveis = ref<boolean[][]>([]);
const menuAberto = ref<number | null>(null);
const menuElementos = new Map<number, HTMLElement>();
const colunaOrdenacao = ref<string | null>(null);
const direcaoOrdenacao = ref<"asc" | "desc">("asc");
let carregamentoSequencial = 0;
function registrarMenuElemento(indice: number, elemento: HTMLElement | null) {
@ -50,6 +52,22 @@ export default defineComponent({
};
}
function alternarOrdenacao(chave?: string) {
if (!chave) {
return;
}
if (colunaOrdenacao.value === chave) {
direcaoOrdenacao.value =
direcaoOrdenacao.value === "asc" ? "desc" : "asc";
} else {
colunaOrdenacao.value = chave;
direcaoOrdenacao.value = "asc";
}
void carregar();
}
function handleClickFora(evento: MouseEvent) {
if (menuAberto.value === null) {
return;
@ -115,9 +133,16 @@ export default defineComponent({
menuAberto.value = null;
menuElementos.clear();
const parametrosOrdenacao = colunaOrdenacao.value
? {
coluna_ordem: colunaOrdenacao.value as never,
direcao_ordem: direcaoOrdenacao.value,
}
: undefined;
try {
const tabelaConfig = props.tabela;
const res = await tabelaConfig.resposta();
const res = await tabelaConfig.consulta(parametrosOrdenacao);
if (idCarregamento !== carregamentoSequencial) {
return;
@ -145,10 +170,15 @@ export default defineComponent({
const preResultado = valores.map(() =>
acoes.map((acao) => {
if (acao.exibir === undefined) {
return true;
}
if (typeof acao.exibir === "boolean") {
return acao.exibir;
}
return acao.exibir ? false : true;
return false;
})
);
@ -209,6 +239,8 @@ export default defineComponent({
() => {
menuAberto.value = null;
menuElementos.clear();
colunaOrdenacao.value = null;
direcaoOrdenacao.value = "asc";
// Caso a definição de tabela/consulta mude
void carregar();
}
@ -238,9 +270,59 @@ export default defineComponent({
return renderVazio(tabela.mensagemVazio);
}
const cabecalho = colunas.map((coluna) =>
h("th", { class: "eli-tabela__th", scope: "col" }, coluna.rotulo)
const cabecalho = colunas.map((coluna) => {
const chaveOrdenacao =
coluna.coluna_ordem !== undefined
? (coluna.coluna_ordem as unknown as string)
: undefined;
const ordenavel = Boolean(chaveOrdenacao);
const ativa = ordenavel && colunaOrdenacao.value === chaveOrdenacao;
const iconeOrdenacao = ordenavel
? ativa
? h(direcaoOrdenacao.value === "asc" ? ArrowUp : ArrowDown, {
class: "eli-tabela__th-icone",
size: 16,
strokeWidth: 2,
"aria-hidden": "true",
})
: h(ArrowUp, {
class: "eli-tabela__th-icone eli-tabela__th-icone--oculto",
size: 16,
strokeWidth: 2,
"aria-hidden": "true",
})
: null;
const conteudo = ordenavel
? h(
"button",
{
type: "button",
class: [
"eli-tabela__th-botao",
ativa ? "eli-tabela__th-botao--ativo" : undefined,
],
onClick: () => alternarOrdenacao(chaveOrdenacao),
},
[
h("span", { class: "eli-tabela__th-texto" }, coluna.rotulo),
iconeOrdenacao,
]
)
: h("span", { class: "eli-tabela__th-label" }, coluna.rotulo);
return h(
"th",
{
class: [
"eli-tabela__th",
ordenavel ? "eli-tabela__th--ordenavel" : undefined,
],
scope: "col",
},
conteudo
);
});
if (temAcoes) {
cabecalho.push(
@ -290,17 +372,20 @@ export default defineComponent({
if (temAcoes) {
const visibilidade = acoesVisiveis.value[i] ?? [];
const acoesDisponiveis = acoes
.map((acao, indice) => ({
.map((acao, indice) => {
const fallbackVisivel =
acao.exibir === undefined
? true
: typeof acao.exibir === "boolean"
? acao.exibir
: false;
return {
acao,
indice,
visivel:
visibilidade[indice] ??
(typeof acao.exibir === "boolean"
? acao.exibir
: acao.exibir
? false
: true),
}))
visivel: visibilidade[indice] ?? fallbackVisivel,
};
})
.filter((item) => item.visivel);
const possuiAcoes = acoesDisponiveis.length > 0;
@ -466,6 +551,57 @@ export default defineComponent({
background: rgba(0, 0, 0, 0.03);
}
.eli-tabela__th--ordenavel {
padding: 0;
}
.eli-tabela__th--ordenavel .eli-tabela__th-botao {
padding: 10px 12px;
}
.eli-tabela__th-botao {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 100%;
background: transparent;
border: none;
font: inherit;
color: inherit;
cursor: pointer;
text-align: left;
transition: color 0.2s ease;
}
.eli-tabela__th-botao:hover,
.eli-tabela__th-botao:focus-visible {
color: rgba(15, 23, 42, 0.85);
}
.eli-tabela__th-botao:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.45);
outline-offset: 2px;
}
.eli-tabela__th-botao--ativo {
color: rgba(37, 99, 235, 0.95);
}
.eli-tabela__th-texto {
flex: 1;
min-width: 0;
white-space: nowrap;
}
.eli-tabela__th-icone {
flex-shrink: 0;
}
.eli-tabela__th-icone--oculto {
opacity: 0;
}
.eli-tabela__tr:last-child .eli-tabela__td {
border-bottom: none;
}

2
src/components/eli/EliTabela/index.ts
View file

@ -1,4 +1,4 @@
export { default as EliTabela } from "./EliTabela.vue";
export * from "./types";
export * from "./types-eli-tabela";
export * from "./celulas/EliCelulaTextoSimples";

8
src/components/eli/EliTabela/types.ts → src/components/eli/EliTabela/types-eli-tabela.ts
View file

@ -8,6 +8,7 @@ export type EliColuna<T> = {
rotulo: string;
celula: (linha: T) => ComponenteCelula;
acao?: () => void;
coluna_ordem?: keyof T;
};
export type EliConsultaPaginada<T> = {
@ -27,11 +28,14 @@ export type EliTabelaAcao<T> = {
* Estrutura de dados para uma tabela alimentada por uma consulta.
*
* - `colunas`: definição de colunas e como renderizar cada célula
* - `resposta`: função assíncrona que retorna uma resposta padronizada
* - `consulta`: função que recupera os dados, com suporte a ordenação
*/
export type EliTabelaConsulta<T> = {
colunas: EliColuna<T>[];
resposta: () => Promise<tipoResposta<EliConsultaPaginada<T>>>;
consulta: (parametrosConsulta?: {
coluna_ordem?: keyof T;
direcao_ordem?: "asc" | "desc";
}) => Promise<tipoResposta<EliConsultaPaginada<T>>>;
/** Mensagem exibida quando a consulta retorna ok porém sem dados. */
mensagemVazio?: string;
acoes?: EliTabelaAcao<T>[];

53
src/playground/tabela.playground.vue
View file

@ -42,22 +42,52 @@ export default defineComponent({
acao: (linha) => {
console.log("Remover registro de", linha.nome);
},
exibir: async () => {
await new Promise((resolve) => setTimeout(resolve, 250));
return true;
},
exibir: (linha) => linha.email !== "ana@eli.com",
},
];
const linhasPadrao: Linha[] = [
{ nome: "Ana", email: "ana@eli.com" },
{ nome: "Bruno", email: "bruno@eli.com" },
{ nome: "Carla", email: "carla@eli.com" },
];
const ordenarLinhas = (
linhas: Linha[],
parametros?: { coluna_ordem?: keyof Linha; direcao_ordem?: "asc" | "desc" }
) => {
if (!parametros?.coluna_ordem) {
return [...linhas];
}
const direcao = parametros.direcao_ordem ?? "asc";
const chave = parametros.coluna_ordem;
const multiplicador = direcao === "asc" ? 1 : -1;
return [...linhas].sort((a, b) => {
const valorA = a[chave];
const valorB = b[chave];
return (
multiplicador *
String(valorA ?? "").localeCompare(String(valorB ?? ""), "pt-BR", {
sensitivity: "base",
})
);
});
};
const tabelaOk: EliTabelaConsulta<Linha> = {
colunas: [
{
rotulo: "Nome",
celula: (l) => l.nome,
coluna_ordem: "nome",
},
{
rotulo: "E-mail",
celula: (l) => l.email,
coluna_ordem: "email",
acao: () => {
// Exemplo de ação: poderia abrir detalhes
console.log("clicou na coluna e-mail");
@ -65,18 +95,17 @@ export default defineComponent({
},
],
acoes: acoesTabela,
resposta: async () => {
consulta: async (parametrosConsulta) => {
const valores = ordenarLinhas(linhasPadrao, parametrosConsulta);
return {
cod: codigosResposta.sucesso,
eCerto: true,
eErro: false,
mensagem: undefined,
valor: {
quantidade: 2,
valores: [
{ nome: "Ana", email: "ana@eli.com" },
{ nome: "Bruno", email: "bruno@eli.com" },
],
quantidade: valores.length,
valores,
},
};
},
@ -84,7 +113,7 @@ export default defineComponent({
const tabelaVazia: EliTabelaConsulta<Linha> = {
colunas: tabelaOk.colunas,
resposta: async () => {
consulta: async () => {
return {
cod: codigosResposta.sucesso,
eCerto: true,
@ -103,7 +132,7 @@ export default defineComponent({
const tabelaErro: EliTabelaConsulta<Linha> = {
colunas: tabelaOk.colunas,
acoes: acoesTabela,
resposta: async () => {
consulta: async () => {
return {
cod: codigosResposta.erroConhecido,
eCerto: false,