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-29 08:49:40 -03:00
parent 5c587c9232
commit 4fd142ee70
22 changed files with 271 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -290,7 +290,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
ArrowUp: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
ArrowDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
isOrdenavel: (coluna: any) => boolean;
obterClasseAlinhamento: (alinhamento?: string) => "eli-tabela__celula--direita" | "eli-tabela__celula--centro" | "eli-tabela__celula--esquerda";
emitAlternarOrdenacao: (chave: string) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
alternarOrdenacao(chave: string): boolean;
@ -365,9 +364,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}>, {
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<EliColuna<any>>>;
@ -420,6 +416,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;
@ -459,6 +458,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;
@ -595,6 +597,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<EliTabelaColunasConfig>;
required: true;
};
colunas: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>, {
visiveisLocal: import("vue").Ref<string[], string[]>;
invisiveisLocal: import("vue").Ref<string[], string[]>;
@ -619,6 +625,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<EliTabelaColunasConfig>;
required: true;
};
colunas: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>> & Readonly<{
onFechar?: (() => any) | undefined;
onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined;

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

@ -44,9 +44,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}>, {
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<EliColuna<any>>>;
@ -99,6 +96,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;
@ -138,6 +138,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;

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

@ -29,6 +29,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;

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

@ -25,7 +25,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
ArrowUp: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
ArrowDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
isOrdenavel: (coluna: any) => boolean;
obterClasseAlinhamento: (alinhamento?: string) => "eli-tabela__celula--direita" | "eli-tabela__celula--centro" | "eli-tabela__celula--esquerda";
emitAlternarOrdenacao: (chave: string) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
alternarOrdenacao(chave: string): boolean;

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

@ -1,5 +1,6 @@
import { PropType } from "vue";
import type { EliTabelaColunasConfig } from "./colunasStorage";
import type { EliColuna } from "./types-eli-tabela";
type OrigemLista = "visiveis" | "invisiveis";
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
aberto: {
@ -14,6 +15,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<EliTabelaColunasConfig>;
required: true;
};
colunas: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>, {
visiveisLocal: import("vue").Ref<string[], string[]>;
invisiveisLocal: import("vue").Ref<string[], string[]>;
@ -38,6 +43,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
type: PropType<EliTabelaColunasConfig>;
required: true;
};
colunas: {
type: PropType<Array<EliColuna<any>>>;
required: true;
};
}>> & Readonly<{
onFechar?: (() => any) | undefined;
onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined;

3
dist/types/components/eli/EliTabela/celulas/EliTabelaCelula.vue.d.ts vendored
View file

@ -11,6 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
dadosParaComponente: import("vue").ComputedRef<{
texto: string;
acao?: () => void;
} | {
texto: string;
acao?: () => void;
} | {
numero: number;
acao?: () => void;

18
dist/types/components/eli/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue.d.ts vendored Normal file
View file

@ -0,0 +1,18 @@
import { PropType } from "vue";
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
dados: {
type: PropType<TiposTabelaCelulas["textoTruncado"]>;
};
}>, {
dados: {
texto: string;
acao?: () => void;
} | undefined;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
dados: {
type: PropType<TiposTabelaCelulas["textoTruncado"]>;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
declare const _default: typeof __VLS_export;
export default _default;

14
dist/types/components/eli/EliTabela/celulas/registryTabelaCelulas.d.ts vendored
View file

@ -13,6 +13,20 @@ export declare const registryTabelaCelulas: {
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoSimples"]>;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
readonly textoTruncado: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
dados: {
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoTruncado"]>;
};
}>, {
dados: {
texto: string;
acao?: () => void;
} | undefined;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
dados: {
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoTruncado"]>;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
readonly numero: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
dados: {
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["numero"]>;

4
dist/types/components/eli/EliTabela/celulas/tiposTabelaCelulas.d.ts vendored
View file

@ -6,6 +6,10 @@ export type TiposTabelaCelulas = {
texto: string;
acao?: () => void;
};
textoTruncado: {
texto: string;
acao?: () => void;
};
numero: {
numero: number;
acao?: () => void;

19
dist/types/components/eli/EliTabela/types-eli-tabela.d.ts vendored
View file

@ -7,7 +7,6 @@ export type ComponenteCelula = {
}[TipoTabelaCelula];
export declare const celulaTabela: <T extends TipoTabelaCelula>(tipo: T, dados: TiposTabelaCelulas[T]) => ComponenteCelulaBase<T>;
export type { TipoTabelaCelula, TiposTabelaCelulas };
export type EliAlinhamentoColuna = "esquerda" | "centro" | "direita";
export type EliColuna<T> = {
/** Texto exibido no cabeçalho da coluna. */
rotulo: string;
@ -15,24 +14,16 @@ export type EliColuna<T> = {
celula: (linha: T) => ComponenteCelula;
/** Ação opcional disparada ao clicar na célula. */
acao?: () => void;
/** Alinhamento do conteúdo da coluna (cabeçalho e células). */
alinhamento?: EliAlinhamentoColuna;
/**
* Quando `true`, tenta truncar (ellipsis) conteúdos textuais longos.
* Observação: o tooltip automático só é aplicado quando o conteúdo renderizado
* da célula é um `string`/`number`.
*/
truncar?: boolean;
/**
* Largura máxima usada quando `truncar` estiver ativo.
* Exemplos: `240` (px), `"18rem"`, `"30ch"`.
*/
largura_maxima?: number | string;
/**
* Campo de ordenação associado à coluna. Caso informado, a coluna passa a
* exibir controles de ordenação e utiliza o valor como chave para o backend.
*/
coluna_ordem?: keyof T;
/**
* indica que a coluna será visivel, se false incia em detalhe
* Caso já tenha salvo a propriedade de visibilidade será adotado a propriedade salva
*/
visivel: boolean;
};
export type EliConsultaPaginada<T> = {
/** Registros retornados na consulta. */

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

@ -95,26 +95,7 @@
background: rgba(0, 0, 0, 0.03);
}
.eli-tabela__celula--esquerda {
text-align: left;
}
.eli-tabela__celula--centro {
text-align: center;
}
.eli-tabela__celula--direita {
text-align: right;
}
.eli-tabela__celula-conteudo {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
}
.eli-tabela--erro {
border: 1px solid rgba(220, 53, 69, 0.35);

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

@ -23,6 +23,7 @@
:aberto="modalColunasAberto"
:rotulosColunas="rotulosColunas"
:configInicial="configColunas"
:colunas="tabela.colunas"
@fechar="fecharModalColunas"
@salvar="salvarModalColunas"
/>
@ -171,11 +172,20 @@ export default defineComponent({
const colunasInvisiveisEfetivas = computed(() => {
const colunas = props.tabela.colunas as Array<EliColuna<any>>;
const invisiveisSet = new Set(configColunas.value.invisiveis ?? []);
const configTemDados =
(configColunas.value.visiveis?.length ?? 0) > 0 ||
(configColunas.value.invisiveis?.length ?? 0) > 0;
const invisiveisBaseRotulos = configTemDados
? configColunas.value.invisiveis ?? []
: colunas.filter((c) => c.visivel === false).map((c) => c.rotulo);
const invisiveisSet = new Set(invisiveisBaseRotulos);
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 ?? [];
// ordenação: usa a lista (salva ou derivada do default) e adiciona novas ao final
const ordemSalva = invisiveisBaseRotulos;
const mapa = new Map<string, EliColuna<any>>();
for (const c of base) {
if (!mapa.has(c.rotulo)) mapa.set(c.rotulo, c);
@ -198,14 +208,25 @@ export default defineComponent({
const colunasEfetivas = computed(() => {
const colunas = props.tabela.colunas;
const todosRotulos = rotulosColunas.value;
const invisiveisSet = new Set(configColunas.value.invisiveis ?? []);
// default: todas visiveis; so some se estiver explicitamente em invisiveis
const configTemDados =
(configColunas.value.visiveis?.length ?? 0) > 0 ||
(configColunas.value.invisiveis?.length ?? 0) > 0;
const invisiveisBaseRotulos = configTemDados
? configColunas.value.invisiveis ?? []
: (props.tabela.colunas as Array<EliColuna<any>>)
.filter((c) => c.visivel === false)
.map((c) => c.rotulo);
const invisiveisSet = new Set(invisiveisBaseRotulos);
// base visiveis: remove invisiveis
const visiveisBaseRotulos = todosRotulos.filter((r) => !invisiveisSet.has(r));
const visiveisSet = new Set(visiveisBaseRotulos);
// aplica ordem salva; novas (sem definicao) entram no fim, respeitando ordem original
const ordemSalva = configColunas.value.visiveis ?? [];
const ordemSalva = configTemDados ? configColunas.value.visiveis ?? [] : [];
const ordemFinal: string[] = [];
for (const r of ordemSalva) {

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

@ -29,22 +29,10 @@
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),
]"
:class="[coluna.acao ? 'eli-tabela__td--clicavel' : undefined]"
@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)" />
<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`">
@ -145,40 +133,9 @@ export default defineComponent({
},
},
setup() {
function obterClasseAlinhamento(alinhamento?: string) {
if (alinhamento === "direita") return "eli-tabela__celula--direita";
if (alinhamento === "centro") return "eli-tabela__celula--centro";
return "eli-tabela__celula--esquerda";
}
function obterMaxWidth(largura?: number | string) {
if (largura === undefined || largura === null) return undefined;
return typeof largura === "number" ? `${largura}px` : String(largura);
}
function obterTooltipCelula(celula: unknown) {
if (!Array.isArray(celula)) return undefined;
const tipo = celula[0];
const dados = celula[1] as any;
if (tipo === "textoSimples") {
return typeof dados?.texto === "string" ? dados.texto : undefined;
}
if (tipo === "numero") {
return typeof dados?.numero === "number" ? String(dados.numero) : undefined;
}
return undefined;
}
return {
ChevronRight,
ChevronDown,
obterClasseAlinhamento,
obterMaxWidth,
obterTooltipCelula,
};
},
});

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

@ -7,10 +7,7 @@
v-for="(coluna, idx) in colunas"
:key="`th-${idx}`"
class="eli-tabela__th"
:class="[
isOrdenavel(coluna) ? 'eli-tabela__th--ordenavel' : undefined,
obterClasseAlinhamento(coluna.alinhamento),
]"
:class="[isOrdenavel(coluna) ? 'eli-tabela__th--ordenavel' : undefined]"
scope="col"
>
<button
@ -91,12 +88,6 @@ export default defineComponent({
return coluna?.coluna_ordem !== undefined && coluna?.coluna_ordem !== null;
}
function obterClasseAlinhamento(alinhamento?: string) {
if (alinhamento === "direita") return "eli-tabela__celula--direita";
if (alinhamento === "centro") return "eli-tabela__celula--centro";
return "eli-tabela__celula--esquerda";
}
function emitAlternarOrdenacao(chave: string) {
emit("alternarOrdenacao", chave);
}
@ -105,7 +96,6 @@ export default defineComponent({
ArrowUp,
ArrowDown,
isOrdenavel,
obterClasseAlinhamento,
emitAlternarOrdenacao,
};
},

20
src/components/eli/EliTabela/EliTabelaModalColunas.vue
View file

@ -74,6 +74,7 @@
<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";
import type { EliTabelaColunasConfig } from "./colunasStorage";
import type { EliColuna } from "./types-eli-tabela";
type OrigemLista = "visiveis" | "invisiveis";
@ -100,6 +101,10 @@ export default defineComponent({
type: Object as PropType<EliTabelaColunasConfig>,
required: true,
},
colunas: {
type: Array as PropType<Array<EliColuna<any>>>,
required: true,
},
},
emits: {
fechar() {
@ -115,9 +120,18 @@ export default defineComponent({
function sincronizarEstado() {
const todos = props.rotulosColunas;
const invisiveisSet = new Set(props.configInicial.invisiveis ?? []);
const configTemDados =
(props.configInicial.visiveis?.length ?? 0) > 0 ||
(props.configInicial.invisiveis?.length ?? 0) > 0;
const invisiveisPadraoSet = new Set(
props.colunas.filter((c) => c.visivel === false).map((c) => c.rotulo)
);
const invisiveisSet = configTemDados
? new Set(props.configInicial.invisiveis ?? [])
: invisiveisPadraoSet;
// default: todas visíveis
const baseVisiveis = todos.filter((r) => !invisiveisSet.has(r));
// ordenação: aplica ordem salva (visiveis) e adiciona novas ao final
@ -139,7 +153,7 @@ export default defineComponent({
}
watch(
() => [props.aberto, props.rotulosColunas, props.configInicial] as const,
() => [props.aberto, props.rotulosColunas, props.configInicial, props.colunas] as const,
() => {
if (props.aberto) sincronizarEstado();
},

33
src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue
View file

@ -1,5 +1,13 @@
<template>
{{ String(dados?.numero).replace('.', ',') }}
<button
v-if="dados?.acao"
type="button"
class="eli-tabela__celula-link"
@click.stop.prevent="dados.acao()"
>
{{ String(dados?.numero).replace('.', ',') }}
</button>
<span v-else>{{ String(dados?.numero).replace('.', ',') }}</span>
</template>
<script lang="ts">
@ -27,4 +35,25 @@ export default defineComponent({
})
</script>
<style scoped></style>
<style scoped>
.eli-tabela__celula-link {
all: unset;
display: inline;
color: #2563eb;
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(37, 99, 235, 0.55);
text-underline-offset: 2px;
}
.eli-tabela__celula-link:hover {
color: #1d4ed8;
text-decoration-color: rgba(29, 78, 216, 0.75);
}
.eli-tabela__celula-link:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.45);
outline-offset: 2px;
border-radius: 4px;
}
</style>

33
src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue
View file

@ -1,5 +1,13 @@
<template>
{{ dados?.texto }}
<button
v-if="dados?.acao"
type="button"
class="eli-tabela__celula-link"
@click.stop.prevent="dados.acao()"
>
{{ dados?.texto }}
</button>
<span v-else>{{ dados?.texto }}</span>
</template>
<script lang="ts">
@ -27,4 +35,25 @@ export default defineComponent({
})
</script>
<style scoped></style>
<style scoped>
.eli-tabela__celula-link {
all: unset;
display: inline;
color: #2563eb;
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(37, 99, 235, 0.55);
text-underline-offset: 2px;
}
.eli-tabela__celula-link:hover {
color: #1d4ed8;
text-decoration-color: rgba(29, 78, 216, 0.75);
}
.eli-tabela__celula-link:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.45);
outline-offset: 2px;
border-radius: 4px;
}
</style>

63
src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue Normal file
View file

@ -0,0 +1,63 @@
<template>
<!-- TODO: Validar de ação está cehgando aqui-->
<button
v-if="dados?.acao"
type="button"
class="eli-tabela__texto-truncado eli-tabela__celula-link"
:title="dados?.texto"
@click.stop.prevent="dados.acao()"
>
{{ dados?.texto }}
</button>
<span v-else class="eli-tabela__texto-truncado" :title="dados?.texto">{{ dados?.texto }}</span>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
export default defineComponent({
name: "EliTabelaCelulaTextoTruncado",
props: {
dados: {
type: Object as PropType<TiposTabelaCelulas["textoTruncado"]>,
},
},
setup({ dados }) {
return { dados };
},
});
</script>
<style scoped>
.eli-tabela__texto-truncado {
display: inline-block;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
}
.eli-tabela__celula-link {
all: unset;
display: inline;
color: #2563eb;
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(37, 99, 235, 0.55);
text-underline-offset: 2px;
}
.eli-tabela__celula-link:hover {
color: #1d4ed8;
text-decoration-color: rgba(29, 78, 216, 0.75);
}
.eli-tabela__celula-link:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.45);
outline-offset: 2px;
border-radius: 4px;
}
</style>

2
src/components/eli/EliTabela/celulas/registryTabelaCelulas.ts
View file

@ -1,10 +1,12 @@
import type { Component } from "vue";
import EliTabelaCelulaTextoSimples from "./EliTabelaCelulaTextoSimples.vue";
import EliTabelaCelulaTextoTruncado from "./EliTabelaCelulaTextoTruncado.vue";
import EliTabelaCelulaNumero from "./EliTabelaCelulaNumero.vue";
import type { TipoTabelaCelula } from "./tiposTabelaCelulas";
export const registryTabelaCelulas = {
textoSimples: EliTabelaCelulaTextoSimples,
textoTruncado: EliTabelaCelulaTextoTruncado,
numero: EliTabelaCelulaNumero,
} as const satisfies Record<TipoTabelaCelula, Component>;

4
src/components/eli/EliTabela/celulas/tiposTabelaCelulas.ts
View file

@ -7,6 +7,10 @@ export type TiposTabelaCelulas = {
texto: string;
acao?: () => void;
};
textoTruncado: {
texto: string;
acao?: () => void;
};
numero: {
numero: number;
acao?: () => void;

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

@ -24,7 +24,6 @@ export type { TipoTabelaCelula, TiposTabelaCelulas };
export type EliAlinhamentoColuna = "esquerda" | "centro" | "direita";
export type EliColuna<T> = {
/** Texto exibido no cabeçalho da coluna. */
@ -32,25 +31,20 @@ export type EliColuna<T> = {
/** Função responsável por renderizar o conteúdo da célula. */
celula: (linha: T) => ComponenteCelula;
/** Ação opcional disparada ao clicar na célula. */
acao?: () => void;
/** Alinhamento do conteúdo da coluna (cabeçalho e células). */
alinhamento?: EliAlinhamentoColuna;
/**
* Quando `true`, tenta truncar (ellipsis) conteúdos textuais longos.
* Observação: o tooltip automático só é aplicado quando o conteúdo renderizado
* da célula é um `string`/`number`.
*/
truncar?: boolean;
/**
* Largura máxima usada quando `truncar` estiver ativo.
* Exemplos: `240` (px), `"18rem"`, `"30ch"`.
*/
largura_maxima?: number | string;
// TODO: Ação passou a receber o objeto
acao?: (linha:T) => void;
/**
* Campo de ordenação associado à coluna. Caso informado, a coluna passa a
* exibir controles de ordenação e utiliza o valor como chave para o backend.
*/
coluna_ordem?: keyof T;
/**
* indica que a coluna será visivel, se false incia em detalhe
* Caso já tenha salvo a propriedade de visibilidade será adotado a propriedade salva
*/
visivel: boolean
};
export type EliConsultaPaginada<T> = {

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

@ -289,34 +289,35 @@ export default defineComponent({
rotulo: "Empreendedor",
celula: (l) => celulaTabela('textoSimples', { texto: l.empreendedor }),
coluna_ordem: "empreendedor",
visivel: true,
},
{
rotulo: "Empreendimento",
celula: (l) => celulaTabela('textoSimples', { texto: l.empreendimento }),
coluna_ordem: "empreendimento",
visivel: true,
},
{
rotulo: "Documento",
celula: (l) => celulaTabela('textoSimples', { texto: l.documento }),
coluna_ordem: "documento",
alinhamento: "direita",
visivel: false,
},
{
rotulo: "E-mail",
celula: (l) => celulaTabela('textoSimples', { texto: l.email }),
celula: (l) => celulaTabela('textoTruncado', { texto: l.email }),
coluna_ordem: "email",
truncar: true,
largura_maxima: 260,
acao: () => {
visivel: true,
acao: (l) => {
// Exemplo de ação: poderia abrir detalhes
console.log("Clicou na coluna e-mail");
alert(`Clicou em ${l.email}`);
},
},
{
rotulo: "Telefone",
celula: (l) => celulaTabela('textoSimples', { texto: l.telefone }),
coluna_ordem: "telefone",
alinhamento: "direita",
visivel: true,
},
],
acoesLinha: acoesLinha,