bkp
This commit is contained in:
parent
933ba17ae8
commit
4cc8bb736d
6 changed files with 1129 additions and 977 deletions
|
|
@ -1,5 +1,14 @@
|
|||
<template>
|
||||
<div class="eli-tabela">
|
||||
<div
|
||||
v-if="isDev"
|
||||
style="position: fixed; left: 8px; bottom: 8px; z-index: 999999; background: rgba(185,28,28,0.9); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; max-width: 500px;"
|
||||
>
|
||||
<div><b>EliTabela debug</b></div>
|
||||
<div>menuAberto: {{ menuAberto }}</div>
|
||||
<div>menuPos: top={{ menuPopupPos.top }}, left={{ menuPopupPos.left }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="carregando" class="eli-tabela eli-tabela--carregando" aria-busy="true">
|
||||
Carregando...
|
||||
</div>
|
||||
|
|
@ -147,54 +156,68 @@
|
|||
: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)"
|
||||
@click.stop="toggleMenu(i, $event)"
|
||||
>
|
||||
<MoreVertical class="eli-tabela__acoes-toggle-icone" :size="18" :stroke-width="2" />
|
||||
</button>
|
||||
|
||||
<ul
|
||||
v-if="menuAberto === i && possuiAcoes(i)"
|
||||
:id="`eli-tabela-acoes-menu-${i}`"
|
||||
class="eli-tabela__acoes-menu"
|
||||
role="menu"
|
||||
:aria-labelledby="`eli-tabela-acoes-toggle-${i}`"
|
||||
>
|
||||
<li
|
||||
v-for="item in acoesDisponiveisPorLinha(i)"
|
||||
:key="`acao-${i}-${item.indice}`"
|
||||
class="eli-tabela__acoes-item"
|
||||
role="none"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="eli-tabela__acoes-item-botao"
|
||||
:style="{ color: item.acao.cor }"
|
||||
role="menuitem"
|
||||
:aria-label="item.acao.rotulo"
|
||||
:title="item.acao.rotulo"
|
||||
@click.stop="
|
||||
() => {
|
||||
menuAberto = null;
|
||||
item.acao.acao(linha as never);
|
||||
}
|
||||
"
|
||||
>
|
||||
<component
|
||||
:is="item.acao.icone"
|
||||
class="eli-tabela__acoes-item-icone"
|
||||
:size="16"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
<span class="eli-tabela__acoes-item-texto">{{ item.acao.rotulo }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Menu teleportado para o body para evitar limitações de z-index/stacking do <table> -->
|
||||
<Teleport to="body">
|
||||
<ul
|
||||
v-if="menuAberto !== null && possuiAcoes(menuAberto)"
|
||||
:id="`eli-tabela-acoes-menu-${menuAberto}`"
|
||||
ref="menuPopup"
|
||||
class="eli-tabela__acoes-menu"
|
||||
role="menu"
|
||||
:aria-labelledby="`eli-tabela-acoes-toggle-${menuAberto}`"
|
||||
:style="{
|
||||
position: 'fixed',
|
||||
top: `${menuPopupPos.top}px`,
|
||||
left: `${menuPopupPos.left}px`,
|
||||
zIndex: 999999,
|
||||
}"
|
||||
>
|
||||
<li
|
||||
v-for="item in acoesDisponiveisPorLinha(menuAberto)"
|
||||
:key="`acao-${menuAberto}-${item.indice}`"
|
||||
class="eli-tabela__acoes-item"
|
||||
role="none"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="eli-tabela__acoes-item-botao"
|
||||
:style="{ color: item.acao.cor }"
|
||||
role="menuitem"
|
||||
:aria-label="item.acao.rotulo"
|
||||
:title="item.acao.rotulo"
|
||||
@click.stop="
|
||||
() => {
|
||||
const indice = menuAberto;
|
||||
const linha = indice === null ? null : linhas[indice];
|
||||
menuAberto = null;
|
||||
if (linha !== null && linha !== undefined) {
|
||||
item.acao.acao(linha as never);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<component
|
||||
:is="item.acao.icone"
|
||||
class="eli-tabela__acoes-item-icone"
|
||||
:size="16"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
<span class="eli-tabela__acoes-item-texto">{{ item.acao.rotulo }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</Teleport>
|
||||
|
||||
<EliTabelaPaginacao
|
||||
v-if="totalPaginas > 1 && quantidade > 0"
|
||||
:pagina="paginaAtual"
|
||||
|
|
@ -241,6 +264,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props) {
|
||||
const isDev = import.meta.env.DEV;
|
||||
const carregando = ref(false);
|
||||
const erro = ref<string | null>(null);
|
||||
const linhas = ref<unknown[]>([]);
|
||||
|
|
@ -248,7 +272,8 @@ export default defineComponent({
|
|||
|
||||
const acoesVisiveis = ref<boolean[][]>([]);
|
||||
const menuAberto = ref<number | null>(null);
|
||||
const menuElementos = new Map<number, HTMLElement>();
|
||||
const menuPopup = ref<HTMLElement | null>(null);
|
||||
const menuPopupPos = ref({ top: 0, left: 0 });
|
||||
|
||||
const valorBusca = ref<string>("");
|
||||
const paginaAtual = ref(1);
|
||||
|
|
@ -283,19 +308,38 @@ export default defineComponent({
|
|||
|
||||
let carregamentoSequencial = 0;
|
||||
|
||||
function registrarMenuElemento(indice: number, elemento: HTMLElement | null) {
|
||||
if (elemento) {
|
||||
menuElementos.set(indice, elemento);
|
||||
} else {
|
||||
menuElementos.delete(indice);
|
||||
function atualizarPosicaoMenu(anchor: HTMLElement) {
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
const gap = 8;
|
||||
|
||||
// Alinha no canto inferior direito do botão.
|
||||
// Se estourar a tela para baixo, abre para cima.
|
||||
const alturaMenu = menuPopup.value?.offsetHeight ?? 0;
|
||||
const larguraMenu = menuPopup.value?.offsetWidth ?? 180;
|
||||
|
||||
let top = rect.bottom + gap;
|
||||
const left = rect.right - larguraMenu;
|
||||
|
||||
if (alturaMenu && top + alturaMenu > window.innerHeight - gap) {
|
||||
top = rect.top - gap - alturaMenu;
|
||||
}
|
||||
|
||||
menuPopupPos.value = {
|
||||
top: Math.max(gap, Math.round(top)),
|
||||
left: Math.max(gap, Math.round(left)),
|
||||
};
|
||||
}
|
||||
|
||||
function handleClickFora(evento: MouseEvent) {
|
||||
if (menuAberto.value === null) return;
|
||||
|
||||
const container = menuElementos.get(menuAberto.value);
|
||||
if (container && container.contains(evento.target as Node)) return;
|
||||
const alvo = evento.target as Node;
|
||||
if (menuPopup.value && menuPopup.value.contains(alvo)) return;
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[EliTabela] click fora => fechar menu", { menuAberto: menuAberto.value });
|
||||
}
|
||||
|
||||
menuAberto.value = null;
|
||||
}
|
||||
|
|
@ -394,9 +438,39 @@ export default defineComponent({
|
|||
return acoesDisponiveisPorLinha(i).length > 0;
|
||||
}
|
||||
|
||||
function toggleMenu(i: number) {
|
||||
function toggleMenu(i: number, evento?: MouseEvent) {
|
||||
if (!possuiAcoes(i)) return;
|
||||
menuAberto.value = menuAberto.value === i ? null : i;
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[EliTabela] toggleMenu (antes)", { i, atual: menuAberto.value });
|
||||
}
|
||||
|
||||
if (menuAberto.value === i) {
|
||||
menuAberto.value = null;
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[EliTabela] toggleMenu => fechou", { i });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
menuAberto.value = i;
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[EliTabela] toggleMenu => abriu", { i });
|
||||
}
|
||||
|
||||
// posiciona assim que abrir
|
||||
const anchor = (evento?.currentTarget as HTMLElement | null) ?? null;
|
||||
if (anchor) {
|
||||
// primeiro posicionamento (antes do menu medir)
|
||||
atualizarPosicaoMenu(anchor);
|
||||
// reposiciona no próximo frame para pegar altura real
|
||||
requestAnimationFrame(() => atualizarPosicaoMenu(anchor));
|
||||
}
|
||||
}
|
||||
|
||||
async function carregar() {
|
||||
|
|
@ -405,7 +479,6 @@ export default defineComponent({
|
|||
erro.value = null;
|
||||
acoesVisiveis.value = [];
|
||||
menuAberto.value = null;
|
||||
menuElementos.clear();
|
||||
|
||||
const limite = Math.max(1, registrosPorConsulta.value);
|
||||
const offset = (paginaAtual.value - 1) * limite;
|
||||
|
|
@ -512,7 +585,6 @@ export default defineComponent({
|
|||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener("click", handleClickFora);
|
||||
menuElementos.clear();
|
||||
});
|
||||
|
||||
watch(
|
||||
|
|
@ -537,7 +609,6 @@ export default defineComponent({
|
|||
() => props.tabela,
|
||||
() => {
|
||||
menuAberto.value = null;
|
||||
menuElementos.clear();
|
||||
colunaOrdenacao.value = null;
|
||||
direcaoOrdenacao.value = "asc";
|
||||
valorBusca.value = "";
|
||||
|
|
@ -562,11 +633,11 @@ export default defineComponent({
|
|||
|
||||
watch(linhas, () => {
|
||||
menuAberto.value = null;
|
||||
menuElementos.clear();
|
||||
});
|
||||
|
||||
return {
|
||||
// state
|
||||
isDev,
|
||||
tabela,
|
||||
carregando,
|
||||
erro,
|
||||
|
|
@ -600,10 +671,13 @@ export default defineComponent({
|
|||
alternarOrdenacao,
|
||||
atualizarBusca,
|
||||
irParaPagina,
|
||||
registrarMenuElemento,
|
||||
acoesDisponiveisPorLinha,
|
||||
possuiAcoes,
|
||||
toggleMenu,
|
||||
|
||||
// popup
|
||||
menuPopup,
|
||||
menuPopupPos,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -869,10 +943,11 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
.eli-tabela__acoes-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 8px;
|
||||
right: 0;
|
||||
/*
|
||||
O menu é renderizado via Teleport e posicionado com `position: fixed`
|
||||
via style inline, para não sofrer com as limitações de stacking/z-index
|
||||
de elementos dentro de <table>.
|
||||
*/
|
||||
min-width: 180px;
|
||||
padding: 6px 0;
|
||||
margin: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue