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 13:38:24 -03:00
parent 0144788548
commit e7357e064a
19 changed files with 14478 additions and 1364 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dist/eli-vue.css vendored
View file

File diff suppressed because one or more lines are too long

14010
dist/eli-vue.es.js vendored
View file

File diff suppressed because it is too large Load diff

72
dist/eli-vue.umd.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/types/componentes/EliEntrada/EliEntradaDataHora.vue.d.ts vendored
View file

@ -206,7 +206,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
max: string | undefined;
densidade: CampoDensidade;
variante: CampoVariante;
value: string | null | undefined;
opcoes: {
rotulo: string;
placeholder?: string;
@ -222,6 +221,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
densidade?: import("../../tipos").CampoDensidade;
variante?: import("../../tipos").CampoVariante;
};
value: string | null | undefined;
placeholder: string;
rotulo: string;
modelValue: string | null;

2
dist/types/componentes/EliEntrada/registryEliEntradas.d.ts vendored
View file

@ -325,7 +325,6 @@ export declare const registryTabelaCelulas: {
max: string | undefined;
densidade: import("../../tipos/entrada.js").CampoDensidade;
variante: import("../../tipos/entrada.js").CampoVariante;
value: string | null | undefined;
opcoes: {
rotulo: string;
placeholder?: string;
@ -341,6 +340,7 @@ export declare const registryTabelaCelulas: {
densidade?: import("../../tipos/entrada.js").CampoDensidade;
variante?: import("../../tipos/entrada.js").CampoVariante;
};
value: string | null | undefined;
placeholder: string;
rotulo: string;
modelValue: string | null;

4
dist/types/componentes/EliEntrada/tiposEntradas.d.ts vendored
View file

@ -90,3 +90,7 @@ export type PadroesEntradas = {
* Ex.: "texto" | "numero"
*/
export type TipoEntrada = keyof PadroesEntradas;
export type PadraoComponenteEntrada<T extends TipoEntrada> = readonly [T, PadroesEntradas[T]['opcoes']];
export type ComponenteEntrada = {
[K in TipoEntrada]: PadraoComponenteEntrada<K>;
}[TipoEntrada];

549
dist/types/componentes/EliTabela/EliTabela.vue.d.ts vendored
View file

@ -7,6 +7,8 @@ import { PropType } from "vue";
import type { EliColuna } from "./types-eli-tabela";
/** Tipos da configuração/contrato da tabela */
import type { EliTabelaConsulta } from "./types-eli-tabela";
import type { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
import { operadores as Operadores } from "p-comuns";
import { type EliTabelaColunasConfig } from "./colunasStorage";
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/** Configuração principal da tabela (colunas, consulta e ações) */
@ -20,6 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
carregando: import("vue").Ref<boolean, boolean>;
erro: import("vue").Ref<string | null, string | null>;
linhas: import("vue").Ref<unknown[], unknown[]>;
linhasPaginadas: import("vue").ComputedRef<unknown[]>;
quantidadeFiltrada: import("vue").ComputedRef<number>;
quantidade: import("vue").Ref<number, number>;
menuAberto: import("vue").Ref<number | null, number | null>;
valorBusca: import("vue").Ref<string, string>;
@ -28,6 +32,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
direcaoOrdenacao: import("vue").Ref<"desc" | "asc", "desc" | "asc">;
totalPaginas: import("vue").ComputedRef<number>;
exibirBusca: import("vue").ComputedRef<boolean>;
exibirFiltroAvancado: import("vue").ComputedRef<boolean>;
acoesCabecalho: import("vue").ComputedRef<{
icone?: import("lucide-vue-next").LucideIcon;
cor?: string;
@ -50,8 +55,77 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
colunasInvisiveisEfetivas: import("vue").ComputedRef<EliColuna<any>[]>;
linhasExpandidas: import("vue").Ref<Record<number, boolean>, Record<number, boolean>>;
abrirModalColunas: () => void;
abrirModalFiltro: () => void;
fecharModalColunas: () => void;
salvarModalColunas: (cfg: EliTabelaColunasConfig) => void;
modalFiltroAberto: import("vue").Ref<boolean, boolean>;
filtrosUi: import("vue").Ref<{
coluna: string | number | symbol;
operador: keyof typeof Operadores;
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
limiteCaracteres?: number | undefined;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep" | undefined;
}] | readonly ["dataHora", {
rotulo: string;
placeholder?: string | undefined;
modo?: "data" | "dataHora" | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
dica?: string | undefined;
dicaPersistente?: boolean | undefined;
min?: string | undefined;
max?: string | undefined;
densidade?: import("../../tipos/entrada.js").CampoDensidade | undefined;
variante?: import("../../tipos/entrada.js").CampoVariante | undefined;
}] | readonly ["numero", {
rotulo: string;
placeholder?: string | undefined;
sufixo?: string | undefined;
prefixo?: string | undefined;
precisao?: number | undefined;
}];
valor: any;
}[], {
coluna: string | number | symbol;
operador: keyof typeof Operadores;
entrada: ComponenteEntrada;
valor: any;
}[] | {
coluna: string | number | symbol;
operador: keyof typeof Operadores;
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
limiteCaracteres?: number | undefined;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep" | undefined;
}] | readonly ["dataHora", {
rotulo: string;
placeholder?: string | undefined;
modo?: "data" | "dataHora" | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
dica?: string | undefined;
dicaPersistente?: boolean | undefined;
min?: string | undefined;
max?: string | undefined;
densidade?: import("../../tipos/entrada.js").CampoDensidade | undefined;
variante?: import("../../tipos/entrada.js").CampoVariante | undefined;
}] | readonly ["numero", {
rotulo: string;
placeholder?: string | undefined;
sufixo?: string | undefined;
prefixo?: string | undefined;
precisao?: number | undefined;
}];
valor: any;
}[]>;
salvarFiltrosAvancados: (novo: any[]) => void;
limparFiltrosAvancados: () => void;
fecharModalFiltro: () => void;
alternarLinhaExpandida: (indice: number) => void;
alternarOrdenacao: (chave?: string) => void;
atualizarBusca: (texto: string) => void;
@ -103,6 +177,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
required: false;
default: boolean;
};
exibirBotaoFiltroAvancado: {
type: BooleanConstructor;
required: false;
default: boolean;
};
valorBusca: {
type: StringConstructor;
required: true;
@ -132,9 +211,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
temAcoesCabecalho: import("vue").ComputedRef<boolean>;
emitBuscar: (texto: string) => void;
emitColunas: () => void;
emitFiltroAvancado: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
buscar(valor: string): boolean;
colunas(): true;
filtroAvancado(): true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
exibirBusca: {
type: BooleanConstructor;
@ -145,6 +226,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
required: false;
default: boolean;
};
exibirBotaoFiltroAvancado: {
type: BooleanConstructor;
required: false;
default: boolean;
};
valorBusca: {
type: StringConstructor;
required: true;
@ -173,8 +259,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}>> & Readonly<{
onBuscar?: ((valor: string) => any) | undefined;
onColunas?: (() => any) | undefined;
onFiltroAvancado?: (() => any) | undefined;
}>, {
exibirBotaoColunas: boolean;
exibirBotaoFiltroAvancado: boolean;
}, {}, {
EliTabelaCaixaDeBusca: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
modelo: {
@ -633,6 +721,467 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
onFechar?: (() => any) | undefined;
onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined;
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
EliTabelaModalFiltroAvancado: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
aberto: {
type: BooleanConstructor;
required: true;
};
filtrosBase: {
type: PropType<Array<{
coluna: string | number | symbol;
operador: Operadores | keyof typeof Operadores;
entrada: ComponenteEntrada;
}>>;
required: true;
};
modelo: {
type: PropType<Array<any>>;
required: true;
};
}>, {
linhas: import("vue").Ref<{
coluna: string | number | symbol;
operador: "in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull";
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
limiteCaracteres?: number | undefined;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep" | undefined;
}] | readonly ["dataHora", {
rotulo: string;
placeholder?: string | undefined;
modo?: "data" | "dataHora" | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
dica?: string | undefined;
dicaPersistente?: boolean | undefined;
min?: string | undefined;
max?: string | undefined;
densidade?: import("../../tipos/entrada.js").CampoDensidade | undefined;
variante?: import("../../tipos/entrada.js").CampoVariante | undefined;
}] | readonly ["numero", {
rotulo: string;
placeholder?: string | undefined;
sufixo?: string | undefined;
prefixo?: string | undefined;
precisao?: number | undefined;
}];
valor: any;
}[], {
coluna: string | number | symbol;
operador: "in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull";
entrada: ComponenteEntrada;
valor: any;
}[] | {
coluna: string | number | symbol;
operador: "in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull";
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
limiteCaracteres?: number | undefined;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep" | undefined;
}] | readonly ["dataHora", {
rotulo: string;
placeholder?: string | undefined;
modo?: "data" | "dataHora" | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
dica?: string | undefined;
dicaPersistente?: boolean | undefined;
min?: string | undefined;
max?: string | undefined;
densidade?: import("../../tipos/entrada.js").CampoDensidade | undefined;
variante?: import("../../tipos/entrada.js").CampoVariante | undefined;
}] | readonly ["numero", {
rotulo: string;
placeholder?: string | undefined;
sufixo?: string | undefined;
prefixo?: string | undefined;
precisao?: number | undefined;
}];
valor: any;
}[]>;
operadoresDisponiveis: ("in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull")[];
colunasDisponiveis: import("vue").Ref<string[], string[]>;
componenteEntrada: (entrada: ComponenteEntrada) => import("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
limiteCaracteres?: number;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
}>;
required: true;
};
}>, {
attrs: {
[x: string]: unknown;
};
emit: ((event: "update:value", _v: string | null | undefined) => void) & ((event: "input", _v: string | null | undefined) => void) & ((event: "change", _v: string | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
localValue: import("vue").WritableComputedRef<string | null | undefined, string | null | undefined>;
inputHtmlType: import("vue").ComputedRef<"text" | "email" | "url">;
inputMode: import("vue").ComputedRef<string | undefined>;
onInput: (e: Event) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:value": (_v: string | null | undefined) => true;
input: (_v: string | null | undefined) => true;
change: (_v: string | null | undefined) => true;
focus: () => true;
blur: () => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
limiteCaracteres?: number;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
}>;
required: true;
};
}>> & Readonly<{
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
onInput?: ((_v: string | null | undefined) => any) | undefined;
onChange?: ((_v: string | null | undefined) => any) | undefined;
onFocus?: (() => any) | undefined;
onBlur?: (() => any) | undefined;
}>, {
value: string | null | undefined;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | import("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: PropType<number | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
sufixo?: string;
prefixo?: string;
precisao?: number;
}>;
required: true;
};
}>, {
attrs: {
[x: string]: unknown;
};
emit: ((event: "update:value", _v: number | null | undefined) => void) & ((event: "input", _v: number | null | undefined) => void) & ((event: "change", _v: number | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
displayValue: import("vue").Ref<string, string>;
isInteiro: import("vue").ComputedRef<boolean>;
onUpdateModelValue: (texto: string) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:value": (_v: number | null | undefined) => true;
input: (_v: number | null | undefined) => true;
change: (_v: number | null | undefined) => true;
focus: () => true;
blur: () => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
value: {
type: PropType<number | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
sufixo?: string;
prefixo?: string;
precisao?: number;
}>;
required: true;
};
}>> & Readonly<{
"onUpdate:value"?: ((_v: number | null | undefined) => any) | undefined;
onInput?: ((_v: number | null | undefined) => any) | undefined;
onChange?: ((_v: number | null | undefined) => any) | undefined;
onFocus?: (() => any) | undefined;
onBlur?: (() => any) | undefined;
}>, {
value: number | null | undefined;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | import("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
modo?: "data" | "dataHora";
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
min?: string;
max?: string;
densidade?: import("../../tipos/entrada.js").CampoDensidade;
variante?: import("../../tipos/entrada.js").CampoVariante;
}>;
required: false;
default: undefined;
};
modelValue: {
type: PropType<string | null>;
default: null;
};
modo: {
type: PropType<"data" | "dataHora" | undefined>;
default: undefined;
};
rotulo: {
type: StringConstructor;
default: undefined;
};
placeholder: {
type: StringConstructor;
default: undefined;
};
desabilitado: {
type: BooleanConstructor;
default: undefined;
};
limpavel: {
type: BooleanConstructor;
default: undefined;
};
erro: {
type: BooleanConstructor;
default: undefined;
};
mensagensErro: {
type: PropType<string | string[]>;
default: undefined;
};
dica: {
type: StringConstructor;
default: undefined;
};
dicaPersistente: {
type: BooleanConstructor;
default: undefined;
};
densidade: {
type: PropType<import("../../tipos/entrada.js").CampoDensidade>;
default: undefined;
};
variante: {
type: PropType<import("../../tipos/entrada.js").CampoVariante>;
default: undefined;
};
min: {
type: PropType<string | undefined>;
default: undefined;
};
max: {
type: PropType<string | undefined>;
default: undefined;
};
}>, {
attrs: {
[x: string]: unknown;
};
valor: import("vue").WritableComputedRef<string, string>;
tipoInput: import("vue").ComputedRef<"date" | "datetime-local">;
minLocal: import("vue").ComputedRef<string | undefined>;
maxLocal: import("vue").ComputedRef<string | undefined>;
opcoesEfetivas: import("vue").ComputedRef<{
rotulo: string;
placeholder?: string;
} & {
modo?: "data" | "dataHora";
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
min?: string;
max?: string;
densidade?: import("../../tipos/entrada.js").CampoDensidade;
variante?: import("../../tipos/entrada.js").CampoVariante;
}>;
desabilitadoEfetivo: import("vue").ComputedRef<boolean>;
emitCompatFocus: () => void;
emitCompatBlur: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:value": (_v: string | null) => true;
input: (_v: string | null) => true;
change: (_v: string | null) => true;
"update:modelValue": (_v: string | null) => true;
alterar: (_v: string | null) => true;
foco: () => true;
desfoco: () => true;
focus: () => true;
blur: () => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
modo?: "data" | "dataHora";
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
min?: string;
max?: string;
densidade?: import("../../tipos/entrada.js").CampoDensidade;
variante?: import("../../tipos/entrada.js").CampoVariante;
}>;
required: false;
default: undefined;
};
modelValue: {
type: PropType<string | null>;
default: null;
};
modo: {
type: PropType<"data" | "dataHora" | undefined>;
default: undefined;
};
rotulo: {
type: StringConstructor;
default: undefined;
};
placeholder: {
type: StringConstructor;
default: undefined;
};
desabilitado: {
type: BooleanConstructor;
default: undefined;
};
limpavel: {
type: BooleanConstructor;
default: undefined;
};
erro: {
type: BooleanConstructor;
default: undefined;
};
mensagensErro: {
type: PropType<string | string[]>;
default: undefined;
};
dica: {
type: StringConstructor;
default: undefined;
};
dicaPersistente: {
type: BooleanConstructor;
default: undefined;
};
densidade: {
type: PropType<import("../../tipos/entrada.js").CampoDensidade>;
default: undefined;
};
variante: {
type: PropType<import("../../tipos/entrada.js").CampoVariante>;
default: undefined;
};
min: {
type: PropType<string | undefined>;
default: undefined;
};
max: {
type: PropType<string | undefined>;
default: undefined;
};
}>> & Readonly<{
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
onInput?: ((_v: string | null) => any) | undefined;
onChange?: ((_v: string | null) => any) | undefined;
onFocus?: (() => any) | undefined;
onBlur?: (() => any) | undefined;
onAlterar?: ((_v: string | null) => any) | undefined;
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
onFoco?: (() => any) | undefined;
onDesfoco?: (() => any) | undefined;
}>, {
modo: "data" | "dataHora" | undefined;
limpavel: boolean;
erro: boolean;
mensagensErro: string | string[];
dica: string;
dicaPersistente: boolean;
min: string | undefined;
max: string | undefined;
densidade: import("../../tipos/entrada.js").CampoDensidade;
variante: import("../../tipos/entrada.js").CampoVariante;
opcoes: {
rotulo: string;
placeholder?: string;
} & {
modo?: "data" | "dataHora";
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
min?: string;
max?: string;
densidade?: import("../../tipos/entrada.js").CampoDensidade;
variante?: import("../../tipos/entrada.js").CampoVariante;
};
value: string | null | undefined;
placeholder: string;
rotulo: string;
modelValue: string | null;
desabilitado: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
opcoesEntrada: (entrada: ComponenteEntrada) => any;
adicionar: () => void;
remover: (idx: number) => void;
emitFechar: () => void;
emitSalvar: () => void;
emitLimpar: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
fechar: () => true;
limpar: () => true;
salvar: (_linhas: any[]) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
aberto: {
type: BooleanConstructor;
required: true;
};
filtrosBase: {
type: PropType<Array<{
coluna: string | number | symbol;
operador: Operadores | keyof typeof Operadores;
entrada: ComponenteEntrada;
}>>;
required: true;
};
modelo: {
type: PropType<Array<any>>;
required: true;
};
}>> & Readonly<{
onFechar?: (() => any) | undefined;
onSalvar?: ((_linhas: any[]) => any) | undefined;
onLimpar?: (() => any) | undefined;
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
declare const _default: typeof __VLS_export;
export default _default;

14
dist/types/componentes/EliTabela/EliTabelaCabecalho.vue.d.ts vendored
View file

@ -9,6 +9,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
required: false;
default: boolean;
};
exibirBotaoFiltroAvancado: {
type: BooleanConstructor;
required: false;
default: boolean;
};
valorBusca: {
type: StringConstructor;
required: true;
@ -26,9 +31,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
temAcoesCabecalho: import("vue").ComputedRef<boolean>;
emitBuscar: (texto: string) => void;
emitColunas: () => void;
emitFiltroAvancado: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
buscar(valor: string): boolean;
colunas(): true;
filtroAvancado(): true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
exibirBusca: {
type: BooleanConstructor;
@ -39,6 +46,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
required: false;
default: boolean;
};
exibirBotaoFiltroAvancado: {
type: BooleanConstructor;
required: false;
default: boolean;
};
valorBusca: {
type: StringConstructor;
required: true;
@ -55,8 +67,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}>> & Readonly<{
onBuscar?: ((valor: string) => any) | undefined;
onColunas?: (() => any) | undefined;
onFiltroAvancado?: (() => any) | undefined;
}>, {
exibirBotaoColunas: boolean;
exibirBotaoFiltroAvancado: boolean;
}, {}, {
EliTabelaCaixaDeBusca: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
modelo: {

462
dist/types/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue.d.ts vendored Normal file
View file

@ -0,0 +1,462 @@
import { PropType } from "vue";
import { operadores as Operadores } from "p-comuns";
import type { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
import type { EliTabelaConsulta } from "./types-eli-tabela";
type Operador = keyof typeof Operadores;
type FiltroBase<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>[number];
type LinhaFiltro<T> = {
coluna: keyof T;
operador: Operador;
entrada: ComponenteEntrada;
valor: any;
};
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
aberto: {
type: BooleanConstructor;
required: true;
};
filtrosBase: {
type: PropType<Array<FiltroBase<any>>>;
required: true;
};
modelo: {
type: PropType<Array<any>>;
required: true;
};
}>, {
linhas: import("vue").Ref<{
coluna: string | number | symbol;
operador: Operador;
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
limiteCaracteres?: number | undefined;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep" | undefined;
}] | readonly ["dataHora", {
rotulo: string;
placeholder?: string | undefined;
modo?: "data" | "dataHora" | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
dica?: string | undefined;
dicaPersistente?: boolean | undefined;
min?: string | undefined;
max?: string | undefined;
densidade?: import("../../tipos").CampoDensidade | undefined;
variante?: import("../../tipos").CampoVariante | undefined;
}] | readonly ["numero", {
rotulo: string;
placeholder?: string | undefined;
sufixo?: string | undefined;
prefixo?: string | undefined;
precisao?: number | undefined;
}];
valor: any;
}[], LinhaFiltro<any>[] | {
coluna: string | number | symbol;
operador: Operador;
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
limiteCaracteres?: number | undefined;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep" | undefined;
}] | readonly ["dataHora", {
rotulo: string;
placeholder?: string | undefined;
modo?: "data" | "dataHora" | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
dica?: string | undefined;
dicaPersistente?: boolean | undefined;
min?: string | undefined;
max?: string | undefined;
densidade?: import("../../tipos").CampoDensidade | undefined;
variante?: import("../../tipos").CampoVariante | undefined;
}] | readonly ["numero", {
rotulo: string;
placeholder?: string | undefined;
sufixo?: string | undefined;
prefixo?: string | undefined;
precisao?: number | undefined;
}];
valor: any;
}[]>;
operadoresDisponiveis: ("in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull")[];
colunasDisponiveis: import("vue").Ref<string[], string[]>;
componenteEntrada: (entrada: ComponenteEntrada) => import("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
limiteCaracteres?: number;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
}>;
required: true;
};
}>, {
attrs: {
[x: string]: unknown;
};
emit: ((event: "update:value", _v: string | null | undefined) => void) & ((event: "input", _v: string | null | undefined) => void) & ((event: "change", _v: string | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
localValue: import("vue").WritableComputedRef<string | null | undefined, string | null | undefined>;
inputHtmlType: import("vue").ComputedRef<"text" | "email" | "url">;
inputMode: import("vue").ComputedRef<string | undefined>;
onInput: (e: Event) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:value": (_v: string | null | undefined) => true;
input: (_v: string | null | undefined) => true;
change: (_v: string | null | undefined) => true;
focus: () => true;
blur: () => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
limiteCaracteres?: number;
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
}>;
required: true;
};
}>> & Readonly<{
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
onInput?: ((_v: string | null | undefined) => any) | undefined;
onChange?: ((_v: string | null | undefined) => any) | undefined;
onFocus?: (() => any) | undefined;
onBlur?: (() => any) | undefined;
}>, {
value: string | null | undefined;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | import("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: PropType<number | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
sufixo?: string;
prefixo?: string;
precisao?: number;
}>;
required: true;
};
}>, {
attrs: {
[x: string]: unknown;
};
emit: ((event: "update:value", _v: number | null | undefined) => void) & ((event: "input", _v: number | null | undefined) => void) & ((event: "change", _v: number | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
displayValue: import("vue").Ref<string, string>;
isInteiro: import("vue").ComputedRef<boolean>;
onUpdateModelValue: (texto: string) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:value": (_v: number | null | undefined) => true;
input: (_v: number | null | undefined) => true;
change: (_v: number | null | undefined) => true;
focus: () => true;
blur: () => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
value: {
type: PropType<number | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
sufixo?: string;
prefixo?: string;
precisao?: number;
}>;
required: true;
};
}>> & Readonly<{
"onUpdate:value"?: ((_v: number | null | undefined) => any) | undefined;
onInput?: ((_v: number | null | undefined) => any) | undefined;
onChange?: ((_v: number | null | undefined) => any) | undefined;
onFocus?: (() => any) | undefined;
onBlur?: (() => any) | undefined;
}>, {
value: number | null | undefined;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | import("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
modo?: "data" | "dataHora";
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
min?: string;
max?: string;
densidade?: import("../../tipos").CampoDensidade;
variante?: import("../../tipos").CampoVariante;
}>;
required: false;
default: undefined;
};
modelValue: {
type: PropType<string | null>;
default: null;
};
modo: {
type: PropType<"data" | "dataHora" | undefined>;
default: undefined;
};
rotulo: {
type: StringConstructor;
default: undefined;
};
placeholder: {
type: StringConstructor;
default: undefined;
};
desabilitado: {
type: BooleanConstructor;
default: undefined;
};
limpavel: {
type: BooleanConstructor;
default: undefined;
};
erro: {
type: BooleanConstructor;
default: undefined;
};
mensagensErro: {
type: PropType<string | string[]>;
default: undefined;
};
dica: {
type: StringConstructor;
default: undefined;
};
dicaPersistente: {
type: BooleanConstructor;
default: undefined;
};
densidade: {
type: PropType<import("../../tipos").CampoDensidade>;
default: undefined;
};
variante: {
type: PropType<import("../../tipos").CampoVariante>;
default: undefined;
};
min: {
type: PropType<string | undefined>;
default: undefined;
};
max: {
type: PropType<string | undefined>;
default: undefined;
};
}>, {
attrs: {
[x: string]: unknown;
};
valor: import("vue").WritableComputedRef<string, string>;
tipoInput: import("vue").ComputedRef<"date" | "datetime-local">;
minLocal: import("vue").ComputedRef<string | undefined>;
maxLocal: import("vue").ComputedRef<string | undefined>;
opcoesEfetivas: import("vue").ComputedRef<{
rotulo: string;
placeholder?: string;
} & {
modo?: "data" | "dataHora";
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
min?: string;
max?: string;
densidade?: import("../../tipos").CampoDensidade;
variante?: import("../../tipos").CampoVariante;
}>;
desabilitadoEfetivo: import("vue").ComputedRef<boolean>;
emitCompatFocus: () => void;
emitCompatBlur: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:value": (_v: string | null) => true;
input: (_v: string | null) => true;
change: (_v: string | null) => true;
"update:modelValue": (_v: string | null) => true;
alterar: (_v: string | null) => true;
foco: () => true;
desfoco: () => true;
focus: () => true;
blur: () => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
};
opcoes: {
type: PropType<{
rotulo: string;
placeholder?: string;
} & {
modo?: "data" | "dataHora";
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
min?: string;
max?: string;
densidade?: import("../../tipos").CampoDensidade;
variante?: import("../../tipos").CampoVariante;
}>;
required: false;
default: undefined;
};
modelValue: {
type: PropType<string | null>;
default: null;
};
modo: {
type: PropType<"data" | "dataHora" | undefined>;
default: undefined;
};
rotulo: {
type: StringConstructor;
default: undefined;
};
placeholder: {
type: StringConstructor;
default: undefined;
};
desabilitado: {
type: BooleanConstructor;
default: undefined;
};
limpavel: {
type: BooleanConstructor;
default: undefined;
};
erro: {
type: BooleanConstructor;
default: undefined;
};
mensagensErro: {
type: PropType<string | string[]>;
default: undefined;
};
dica: {
type: StringConstructor;
default: undefined;
};
dicaPersistente: {
type: BooleanConstructor;
default: undefined;
};
densidade: {
type: PropType<import("../../tipos").CampoDensidade>;
default: undefined;
};
variante: {
type: PropType<import("../../tipos").CampoVariante>;
default: undefined;
};
min: {
type: PropType<string | undefined>;
default: undefined;
};
max: {
type: PropType<string | undefined>;
default: undefined;
};
}>> & Readonly<{
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
onInput?: ((_v: string | null) => any) | undefined;
onChange?: ((_v: string | null) => any) | undefined;
onFocus?: (() => any) | undefined;
onBlur?: (() => any) | undefined;
onAlterar?: ((_v: string | null) => any) | undefined;
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
onFoco?: (() => any) | undefined;
onDesfoco?: (() => any) | undefined;
}>, {
modo: "data" | "dataHora" | undefined;
limpavel: boolean;
erro: boolean;
mensagensErro: string | string[];
dica: string;
dicaPersistente: boolean;
min: string | undefined;
max: string | undefined;
densidade: import("../../tipos").CampoDensidade;
variante: import("../../tipos").CampoVariante;
opcoes: {
rotulo: string;
placeholder?: string;
} & {
modo?: "data" | "dataHora";
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
min?: string;
max?: string;
densidade?: import("../../tipos").CampoDensidade;
variante?: import("../../tipos").CampoVariante;
};
value: string | null | undefined;
placeholder: string;
rotulo: string;
modelValue: string | null;
desabilitado: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
opcoesEntrada: (entrada: ComponenteEntrada) => any;
adicionar: () => void;
remover: (idx: number) => void;
emitFechar: () => void;
emitSalvar: () => void;
emitLimpar: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
fechar: () => true;
limpar: () => true;
salvar: (_linhas: any[]) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
aberto: {
type: BooleanConstructor;
required: true;
};
filtrosBase: {
type: PropType<Array<FiltroBase<any>>>;
required: true;
};
modelo: {
type: PropType<Array<any>>;
required: true;
};
}>> & Readonly<{
onFechar?: (() => any) | undefined;
onSalvar?: ((_linhas: any[]) => any) | undefined;
onLimpar?: (() => any) | undefined;
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
declare const _default: typeof __VLS_export;
export default _default;

5
dist/types/componentes/EliTabela/filtroAvancadoStorage.d.ts vendored Normal file
View file

@ -0,0 +1,5 @@
import type { EliTabelaConsulta } from "./types-eli-tabela";
export type EliTabelaFiltroAvancadoSalvo<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>;
export declare function carregarFiltroAvancado<T>(nomeTabela: string): EliTabelaFiltroAvancadoSalvo<T>;
export declare function salvarFiltroAvancado<T>(nomeTabela: string, filtros: EliTabelaFiltroAvancadoSalvo<T>): void;
export declare function limparFiltroAvancado(nomeTabela: string): void;

10
dist/types/componentes/EliTabela/types-eli-tabela.d.ts vendored
View file

@ -1,6 +1,9 @@
import type { tipoResposta } from "p-respostas";
import type { LucideIcon } from "lucide-vue-next";
import type { TipoTabelaCelula, TiposTabelaCelulas } from "./celulas/tiposTabelaCelulas";
import { operadores, zFiltro } from "p-comuns";
import { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
export type tipoFiltro = ReturnType<(typeof zFiltro)["parse"]>;
export type ComponenteCelulaBase<T extends TipoTabelaCelula> = readonly [T, TiposTabelaCelulas[T]];
export type ComponenteCelula = {
[K in TipoTabelaCelula]: ComponenteCelulaBase<K>;
@ -66,6 +69,7 @@ export type EliTabelaConsulta<T> = {
* ordenação (`coluna_ordem`/`direcao_ordem`) e paginação (`offSet`/`limit`).
*/
consulta: (parametrosConsulta?: {
filtros?: tipoFiltro[];
coluna_ordem?: keyof T;
direcao_ordem?: "asc" | "desc";
offSet?: number;
@ -93,4 +97,10 @@ export type EliTabelaConsulta<T> = {
/** Função executada ao clicar no botão. */
acao: () => void;
}[];
/** configuração para aplicação dos filtros padrões */
filtroAvancado?: {
coluna: keyof T;
operador: operadores | keyof typeof operadores;
entrada: ComponenteEntrada;
}[];
};

7
package.json
View file

@ -1,6 +1,6 @@
{
"name": "eli-vue",
"version": "0.1.62",
"version": "0.1.66",
"private": false,
"main": "./dist/eli-vue.umd.js",
"module": "./dist/eli-vue.es.js",
@ -35,9 +35,12 @@
"vuetify": "^3.11.2"
},
"dependencies": {
"cross-fetch": "^4.1.0",
"dayjs": "^1.11.19",
"lucide-vue-next": "^0.563.0",
"p-comuns": "git+https://git2.idz.one/publico/_comuns.git",
"p-respostas": "git+https://git2.idz.one/publico/_respostas.git"
"p-respostas": "git+https://git2.idz.one/publico/_respostas.git",
"uuid": "^13.0.0",
"zod": "^4.3.6"
}
}

39
pnpm-lock.yaml generated
View file

@ -8,6 +8,9 @@ importers:
.:
dependencies:
cross-fetch:
specifier: ^4.1.0
version: 4.1.0
dayjs:
specifier: ^1.11.19
version: 1.11.19
@ -16,10 +19,16 @@ importers:
version: 0.563.0(vue@3.5.25(typescript@5.9.3))
p-comuns:
specifier: git+https://git2.idz.one/publico/_comuns.git
version: git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@11.1.0)(zod@4.1.4)
version: git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)(zod@4.3.6)
p-respostas:
specifier: git+https://git2.idz.one/publico/_respostas.git
version: git+https://git2.idz.one/publico/_respostas.git#8c24d790ace7255404745dcbdf12c5396e8b9843(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@11.1.0)
version: git+https://git2.idz.one/publico/_respostas.git#8c24d790ace7255404745dcbdf12c5396e8b9843(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)
uuid:
specifier: ^13.0.0
version: 13.0.0
zod:
specifier: ^4.3.6
version: 4.3.6
devDependencies:
'@mdi/font':
specifier: ^7.4.47
@ -674,8 +683,8 @@ packages:
resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
engines: {node: '>=4'}
uuid@11.1.0:
resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
uuid@13.0.0:
resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==}
hasBin: true
vite-plugin-vuetify@2.1.2:
@ -767,6 +776,9 @@ packages:
zod@4.1.4:
resolution: {integrity: sha512-2YqJuWkU6IIK9qcE4k1lLLhyZ6zFw7XVRdQGpV97jEIZwTrscUw+DY31Xczd8nwaoksyJUIxCojZXwckJovWxA==}
zod@4.3.6:
resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
snapshots:
'@babel/helper-string-parser@7.27.1': {}
@ -1200,16 +1212,23 @@ snapshots:
dependencies:
whatwg-url: 5.0.0
p-comuns@git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@11.1.0)(zod@4.1.4):
p-comuns@git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)(zod@4.1.4):
dependencies:
cross-fetch: 4.1.0
dayjs: 1.11.19
uuid: 11.1.0
uuid: 13.0.0
zod: 4.1.4
p-respostas@git+https://git2.idz.one/publico/_respostas.git#8c24d790ace7255404745dcbdf12c5396e8b9843(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@11.1.0):
p-comuns@git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)(zod@4.3.6):
dependencies:
p-comuns: git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@11.1.0)(zod@4.1.4)
cross-fetch: 4.1.0
dayjs: 1.11.19
uuid: 13.0.0
zod: 4.3.6
p-respostas@git+https://git2.idz.one/publico/_respostas.git#8c24d790ace7255404745dcbdf12c5396e8b9843(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0):
dependencies:
p-comuns: git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)(zod@4.1.4)
zod: 4.1.4
transitivePeerDependencies:
- cross-fetch
@ -1290,7 +1309,7 @@ snapshots:
upath@2.0.1: {}
uuid@11.1.0: {}
uuid@13.0.0: {}
vite-plugin-vuetify@2.1.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2))(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2):
dependencies:
@ -1349,3 +1368,5 @@ snapshots:
webidl-conversions: 3.0.1
zod@4.1.4: {}
zod@4.3.6: {}

181
src/componentes/EliTabela/EliTabela.vue
View file

@ -13,10 +13,12 @@
<EliTabelaCabecalho
v-if="exibirBusca || temAcoesCabecalho"
:exibirBusca="exibirBusca"
:exibirBotaoFiltroAvancado="exibirFiltroAvancado"
:valorBusca="valorBusca"
:acoesCabecalho="acoesCabecalho"
@buscar="atualizarBusca"
@colunas="abrirModalColunas"
@filtroAvancado="abrirModalFiltro"
/>
<EliTabelaModalColunas
@ -28,6 +30,15 @@
@salvar="salvarModalColunas"
/>
<EliTabelaModalFiltroAvancado
:aberto="modalFiltroAberto"
:filtrosBase="tabela.filtroAvancado ?? []"
:modelo="filtrosUi"
@fechar="fecharModalFiltro"
@limpar="limparFiltrosAvancados"
@salvar="salvarFiltrosAvancados"
/>
<table class="eli-tabela__table">
<EliTabelaHead
:colunas="colunasEfetivas"
@ -43,7 +54,7 @@
:colunasInvisiveis="colunasInvisiveisEfetivas"
:temColunasInvisiveis="temColunasInvisiveis"
:linhasExpandidas="linhasExpandidas"
:linhas="linhas"
:linhas="linhasPaginadas"
:temAcoes="temAcoes"
:menuAberto="menuAberto"
:possuiAcoes="possuiAcoes"
@ -57,12 +68,12 @@
:menuAberto="menuAberto"
:posicao="menuPopupPos"
:acoes="menuAberto === null ? [] : acoesDisponiveisPorLinha(menuAberto)"
:linha="menuAberto === null ? null : linhas[menuAberto]"
:linha="menuAberto === null ? null : linhasPaginadas[menuAberto]"
@executar="({ acao, linha }) => { menuAberto = null; acao.acao(linha as never); }"
/>
<EliTabelaPaginacao
v-if="totalPaginas > 1 && quantidade > 0"
v-if="totalPaginas > 1 && quantidadeFiltrada > 0"
:pagina="paginaAtual"
:totalPaginas="totalPaginas"
:maximoBotoes="tabela.maximo_botoes_paginacao"
@ -99,15 +110,25 @@ import EliTabelaBody from "./EliTabelaBody.vue";
import EliTabelaMenuAcoes from "./EliTabelaMenuAcoes.vue";
import EliTabelaPaginacao from "./EliTabelaPaginacao.vue";
import EliTabelaModalColunas from "./EliTabelaModalColunas.vue";
import EliTabelaModalFiltroAvancado from "./EliTabelaModalFiltroAvancado.vue";
import type { EliColuna } from "./types-eli-tabela";
/** Tipos da configuração/contrato da tabela */
import type { EliTabelaConsulta } from "./types-eli-tabela";
import type { tipoFiltro } from "./types-eli-tabela";
import type { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
import { operadores as Operadores } from "p-comuns";
import {
carregarConfigColunas,
salvarConfigColunas,
type EliTabelaColunasConfig,
} from "./colunasStorage";
import {
carregarFiltroAvancado,
salvarFiltroAvancado,
limparFiltroAvancado,
} from "./filtroAvancadoStorage";
export default defineComponent({
name: "EliTabela",
inheritAttrs: false,
@ -120,6 +141,7 @@ export default defineComponent({
EliTabelaMenuAcoes,
EliTabelaPaginacao,
EliTabelaModalColunas,
EliTabelaModalFiltroAvancado,
},
props: {
/** Configuração principal da tabela (colunas, consulta e ações) */
@ -151,6 +173,53 @@ export default defineComponent({
const colunaOrdenacao = ref<string | null>(null);
const direcaoOrdenacao = ref<"asc" | "desc">("asc");
/** Filtro avançado (config + estado modal) */
const modalFiltroAberto = ref(false);
type LinhaFiltroUI<T> = {
coluna: keyof T;
operador: keyof typeof Operadores;
entrada: ComponenteEntrada;
valor: any;
};
const filtrosUi = ref<Array<LinhaFiltroUI<any>>>(
carregarFiltroAvancado<any>(props.tabela.nome) as any
);
function abrirModalFiltro() {
modalFiltroAberto.value = true;
}
function fecharModalFiltro() {
modalFiltroAberto.value = false;
}
function limparFiltrosAvancados() {
filtrosUi.value = [];
limparFiltroAvancado(props.tabela.nome);
modalFiltroAberto.value = false;
if (paginaAtual.value !== 1) paginaAtual.value = 1;
}
function salvarFiltrosAvancados(novo: any[]) {
filtrosUi.value = (novo ?? []) as any;
salvarFiltroAvancado(props.tabela.nome, (novo ?? []) as any);
modalFiltroAberto.value = false;
if (paginaAtual.value !== 1) paginaAtual.value = 1;
}
const filtrosAvancadosAtivos = computed<tipoFiltro[]>(() => {
// converte UI -> tipoFiltro (p-comuns)
return (filtrosUi.value ?? [])
.filter((f) => f && f.coluna && f.operador)
.map((f) => ({
coluna: String(f.coluna),
operador: f.operador as any,
valor: f.valor,
// sem OR no primeiro momento
})) as tipoFiltro[];
});
/** Alias reativo da prop tabela */
const tabela = computed(() => props.tabela);
@ -280,20 +349,91 @@ export default defineComponent({
return 10;
});
/** Total de páginas calculado com base na quantidade */
function aplicarFiltroTexto(linhasIn: unknown[]) {
const q = (valorBusca.value ?? "").trim().toLowerCase();
if (!q) return linhasIn;
// filtro simples: stringifica o objeto
return linhasIn.filter((l) => JSON.stringify(l).toLowerCase().includes(q));
}
function compararOperador(operador: string, valorLinha: any, valorFiltro: any): boolean {
switch (operador) {
case "=":
return valorLinha == valorFiltro;
case "!=":
return valorLinha != valorFiltro;
case ">":
return Number(valorLinha) > Number(valorFiltro);
case ">=":
return Number(valorLinha) >= Number(valorFiltro);
case "<":
return Number(valorLinha) < Number(valorFiltro);
case "<=":
return Number(valorLinha) <= Number(valorFiltro);
case "like": {
const a = String(valorLinha ?? "").toLowerCase();
const b = String(valorFiltro ?? "").toLowerCase();
return a.includes(b);
}
case "in": {
// aceita "a,b,c" ou array
const arr = Array.isArray(valorFiltro)
? valorFiltro
: String(valorFiltro ?? "")
.split(",")
.map((s) => s.trim())
.filter(Boolean);
return arr.includes(String(valorLinha));
}
case "isNull":
return valorLinha === null || valorLinha === undefined || valorLinha === "";
default:
return true;
}
}
function aplicarFiltroAvancado(linhasIn: unknown[]) {
const filtros = filtrosAvancadosAtivos.value;
if (!filtros.length) return linhasIn;
return linhasIn.filter((l: any) => {
return filtros.every((f) => {
const vLinha = l?.[f.coluna as any];
return compararOperador(String(f.operador), vLinha, (f as any).valor);
});
});
}
const linhasFiltradas = computed(() => {
const base = linhas.value ?? [];
return aplicarFiltroAvancado(aplicarFiltroTexto(base));
});
/** Quantidade agora segue a filtragem local */
const quantidadeFiltrada = computed(() => linhasFiltradas.value.length);
/** Total de páginas calculado com base no filtrado */
const totalPaginas = computed(() => {
const limite = registrosPorConsulta.value;
if (!limite || limite <= 0) return 1;
const total = quantidade.value;
const total = quantidadeFiltrada.value;
if (!total) return 1;
return Math.max(1, Math.ceil(total / limite));
});
const linhasPaginadas = computed(() => {
const limite = Math.max(1, registrosPorConsulta.value);
const offset = (paginaAtual.value - 1) * limite;
return linhasFiltradas.value.slice(offset, offset + limite);
});
/** Indica se existem ações por linha */
const temAcoes = computed(() => (props.tabela.acoesLinha ?? []).length > 0);
const exibirFiltroAvancado = computed(() => (props.tabela.filtroAvancado ?? []).length > 0);
/** Sequencial para evitar race conditions entre consultas */
let carregamentoSequencial = 0;
@ -452,8 +592,10 @@ export default defineComponent({
menuAberto.value = null;
linhasExpandidas.value = {};
// Em modo simulação (filtro local), sempre buscamos a lista completa.
// A paginação é aplicada APÓS a filtragem.
const limite = Math.max(1, registrosPorConsulta.value);
const offset = (paginaAtual.value - 1) * limite;
const offset = 0;
const parametrosConsulta: {
coluna_ordem?: never;
@ -463,12 +605,10 @@ export default defineComponent({
texto_busca?: string;
} = {
offSet: offset,
limit: limite,
limit: 999999,
};
if (valorBusca.value) {
parametrosConsulta.texto_busca = valorBusca.value;
}
// texto_busca ficará somente para filtragem local.
if (colunaOrdenacao.value) {
parametrosConsulta.coluna_ordem = colunaOrdenacao.value as never;
@ -489,12 +629,12 @@ export default defineComponent({
}
const valores = res.valor?.valores ?? [];
const total = res.valor?.quantidade ?? valores.length;
const total = valores.length;
linhas.value = valores;
quantidade.value = total;
const totalPaginasRecalculado = Math.max(1, Math.ceil((total || 0) / limite));
const totalPaginasRecalculado = Math.max(1, Math.ceil((quantidadeFiltrada.value || 0) / limite));
if (paginaAtual.value > totalPaginasRecalculado) {
paginaAtual.value = totalPaginasRecalculado;
return;
@ -578,7 +718,10 @@ export default defineComponent({
/** Watch: mudança de página dispara nova consulta */
watch(paginaAtual, (nova, antiga) => {
if (nova !== antiga) void carregar();
// paginação local não precisa recarregar
if (nova !== antiga) {
// noop
}
});
/** Watch: troca de configuração reseta estados e recarrega */
@ -590,7 +733,9 @@ export default defineComponent({
direcaoOrdenacao.value = "asc";
valorBusca.value = "";
modalColunasAberto.value = false;
modalFiltroAberto.value = false;
configColunas.value = carregarConfigColunas(props.tabela.nome);
filtrosUi.value = carregarFiltroAvancado<any>(props.tabela.nome) as any;
linhasExpandidas.value = {};
if (paginaAtual.value !== 1) {
paginaAtual.value = 1;
@ -626,6 +771,8 @@ export default defineComponent({
carregando,
erro,
linhas,
linhasPaginadas,
quantidadeFiltrada,
quantidade,
menuAberto,
valorBusca,
@ -636,6 +783,7 @@ export default defineComponent({
// computed
exibirBusca,
exibirFiltroAvancado,
acoesCabecalho,
temAcoesCabecalho,
temAcoes,
@ -649,9 +797,16 @@ export default defineComponent({
linhasExpandidas,
abrirModalColunas,
abrirModalFiltro,
fecharModalColunas,
salvarModalColunas,
modalFiltroAberto,
filtrosUi,
salvarFiltrosAvancados,
limparFiltrosAvancados,
fecharModalFiltro,
alternarLinhaExpandida,
// actions

23
src/componentes/EliTabela/EliTabelaCabecalho.vue
View file

@ -10,6 +10,15 @@
>
Colunas
</button>
<button
v-if="exibirBotaoFiltroAvancado"
type="button"
class="eli-tabela__acoes-cabecalho-botao eli-tabela__acoes-cabecalho-botao--filtro"
@click="emitFiltroAvancado"
>
Filtro
</button>
<EliTabelaCaixaDeBusca :modelo="valorBusca" @buscar="emitBuscar" />
</div>
@ -53,6 +62,11 @@ export default defineComponent({
required: false,
default: true,
},
exibirBotaoFiltroAvancado: {
type: Boolean,
required: false,
default: false,
},
valorBusca: {
type: String,
required: true,
@ -76,6 +90,9 @@ export default defineComponent({
colunas() {
return true;
},
filtroAvancado() {
return true;
},
},
setup(props, { emit }) {
const temAcoesCabecalho = computed(() => props.acoesCabecalho.length > 0);
@ -88,7 +105,11 @@ export default defineComponent({
emit("colunas");
}
return { temAcoesCabecalho, emitBuscar, emitColunas };
function emitFiltroAvancado() {
emit("filtroAvancado");
}
return { temAcoesCabecalho, emitBuscar, emitColunas, emitFiltroAvancado };
},
});
</script>

397
src/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue Normal file
View file

@ -0,0 +1,397 @@
<template>
<div v-if="aberto" class="eli-tabela-modal-filtro__overlay" role="presentation" @click.self="emitFechar">
<div class="eli-tabela-modal-filtro__modal" role="dialog" aria-modal="true" aria-label="Filtro avançado">
<header class="eli-tabela-modal-filtro__header">
<h3 class="eli-tabela-modal-filtro__titulo">Filtro avançado</h3>
<button type="button" class="eli-tabela-modal-filtro__fechar" aria-label="Fechar" @click="emitFechar">
×
</button>
</header>
<div class="eli-tabela-modal-filtro__conteudo">
<div v-if="!filtrosBase.length" class="eli-tabela-modal-filtro__vazio">
Nenhum filtro configurado na tabela.
</div>
<div v-else class="eli-tabela-modal-filtro__lista">
<div v-for="(linha, idx) in linhas" :key="idx" class="eli-tabela-modal-filtro__linha">
<select v-model="linha.coluna" class="eli-tabela-modal-filtro__select">
<option v-for="opt in colunasDisponiveis" :key="String(opt)" :value="opt">
{{ String(opt) }}
</option>
</select>
<select v-model="linha.operador" class="eli-tabela-modal-filtro__select">
<option v-for="op in operadoresDisponiveis" :key="op" :value="op">
{{ op }}
</option>
</select>
<div class="eli-tabela-modal-filtro__entrada">
<component
:is="componenteEntrada(linha.entrada)"
v-model:value="linha.valor"
:opcoes="opcoesEntrada(linha.entrada)"
density="compact"
/>
</div>
<button
type="button"
class="eli-tabela-modal-filtro__remover"
title="Remover"
aria-label="Remover"
@click="remover(idx)"
>
×
</button>
</div>
</div>
<div class="eli-tabela-modal-filtro__acoes">
<button type="button" class="eli-tabela-modal-filtro__botao" @click="adicionar" :disabled="!filtrosBase.length">
Adicionar filtro
</button>
</div>
</div>
<footer class="eli-tabela-modal-filtro__footer">
<button type="button" class="eli-tabela-modal-filtro__botao eli-tabela-modal-filtro__botao--sec" @click="emitLimpar">
Limpar
</button>
<button type="button" class="eli-tabela-modal-filtro__botao eli-tabela-modal-filtro__botao--sec" @click="emitFechar">
Cancelar
</button>
<button type="button" class="eli-tabela-modal-filtro__botao eli-tabela-modal-filtro__botao--prim" @click="emitSalvar">
Aplicar
</button>
</footer>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";
import { operadores as Operadores } from "p-comuns";
import { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora } from "../EliEntrada";
import type { ComponenteEntrada, TipoEntrada } from "../EliEntrada/tiposEntradas";
import type { EliTabelaConsulta } from "./types-eli-tabela";
type Operador = keyof typeof Operadores;
type FiltroBase<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>[number];
type LinhaFiltro<T> = {
coluna: keyof T;
operador: Operador;
entrada: ComponenteEntrada;
valor: any;
};
function isTipoEntrada(v: unknown): v is TipoEntrada {
return v === "texto" || v === "numero" || v === "dataHora";
}
export default defineComponent({
name: "EliTabelaModalFiltroAvancado",
props: {
aberto: { type: Boolean, required: true },
filtrosBase: {
type: Array as PropType<Array<FiltroBase<any>>>,
required: true,
},
modelo: {
type: Array as PropType<Array<any>>,
required: true,
},
},
emits: {
fechar: () => true,
limpar: () => true,
salvar: (_linhas: any[]) => true,
},
setup(props, { emit }) {
const linhas = ref<Array<LinhaFiltro<any>>>([]);
const operadoresDisponiveis = Object.keys(Operadores) as Operador[];
const colunasDisponiveis = ref<string[]>([]);
function componenteEntrada(entrada: ComponenteEntrada) {
const tipo = entrada?.[0];
if (tipo === "numero") return EliEntradaNumero;
if (tipo === "dataHora") return EliEntradaDataHora;
return EliEntradaTexto;
}
function opcoesEntrada(entrada: ComponenteEntrada) {
const opcoes = entrada?.[1] as any;
// garante rotulo para não ficar vazio visualmente dentro do modal
if (opcoes && typeof opcoes === "object" && !opcoes.rotulo) {
return { ...opcoes, rotulo: "Valor" };
}
return opcoes ?? { rotulo: "Valor" };
}
function valorInicialPorEntrada(entrada: ComponenteEntrada) {
const tipo = entrada?.[0];
if (tipo === "numero") return null;
return "";
}
function normalizarModelo() {
const base = props.filtrosBase ?? [];
colunasDisponiveis.value = base.map((b) => String(b.coluna));
const modelo = Array.isArray(props.modelo) ? props.modelo : [];
linhas.value = modelo.map((m: any) => {
const entrada = m.entrada as ComponenteEntrada;
const col = m.coluna as any;
const op = (m.operador ?? "=") as Operador;
const val = m.valor ?? valorInicialPorEntrada(entrada);
return {
coluna: col,
operador: op,
entrada,
valor: val,
} as LinhaFiltro<any>;
});
// se vazio e existe base, adiciona 1 linha default
if (!linhas.value.length && base.length) {
const b0 = base[0];
linhas.value = [
{
coluna: b0.coluna as any,
operador: (b0.operador as any) ?? "=",
entrada: b0.entrada,
valor: valorInicialPorEntrada(b0.entrada),
},
];
}
// se algum filtro mudou a coluna para valor inválido, ajusta
for (const l of linhas.value) {
if (!colunasDisponiveis.value.includes(String(l.coluna))) {
l.coluna = (base[0]?.coluna as any) ?? l.coluna;
}
if (!operadoresDisponiveis.includes(l.operador)) {
l.operador = "=";
}
// sanity
if (l.entrada && !isTipoEntrada(l.entrada[0])) {
l.entrada = ["texto", { rotulo: "Valor" }] as any;
}
}
}
watch(
() => [props.aberto, props.filtrosBase, props.modelo] as const,
() => {
if (props.aberto) normalizarModelo();
},
{ deep: true, immediate: true }
);
function adicionar() {
if (!props.filtrosBase.length) return;
const b0 = props.filtrosBase[0];
linhas.value.push({
coluna: b0.coluna as any,
operador: (b0.operador as any) ?? "=",
entrada: b0.entrada,
valor: valorInicialPorEntrada(b0.entrada),
});
}
function remover(idx: number) {
linhas.value.splice(idx, 1);
}
function emitFechar() {
emit("fechar");
}
function emitLimpar() {
emit("limpar");
}
function emitSalvar() {
emit(
"salvar",
linhas.value.map((l) => ({
coluna: l.coluna,
operador: l.operador,
entrada: l.entrada,
valor: l.valor,
}))
);
}
return {
linhas,
operadoresDisponiveis,
colunasDisponiveis,
componenteEntrada,
opcoesEntrada,
adicionar,
remover,
emitFechar,
emitSalvar,
emitLimpar,
};
},
});
</script>
<style scoped>
.eli-tabela-modal-filtro__overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.35);
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.eli-tabela-modal-filtro__modal {
width: min(980px, 100%);
background: #fff;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.25);
overflow: hidden;
}
.eli-tabela-modal-filtro__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.eli-tabela-modal-filtro__titulo {
font-size: 1rem;
margin: 0;
}
.eli-tabela-modal-filtro__fechar {
width: 34px;
height: 34px;
border-radius: 10px;
border: none;
background: transparent;
cursor: pointer;
font-size: 22px;
line-height: 1;
color: rgba(15, 23, 42, 0.8);
}
.eli-tabela-modal-filtro__fechar:hover,
.eli-tabela-modal-filtro__fechar:focus-visible {
background: rgba(15, 23, 42, 0.06);
}
.eli-tabela-modal-filtro__conteudo {
padding: 16px;
}
.eli-tabela-modal-filtro__vazio {
opacity: 0.75;
font-size: 0.9rem;
}
.eli-tabela-modal-filtro__lista {
display: grid;
gap: 10px;
}
.eli-tabela-modal-filtro__linha {
display: grid;
grid-template-columns: 220px 120px 1fr 34px;
gap: 10px;
align-items: center;
}
.eli-tabela-modal-filtro__select {
height: 34px;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.12);
padding: 0 10px;
background: #fff;
}
.eli-tabela-modal-filtro__entrada {
min-width: 0;
}
.eli-tabela-modal-filtro__remover {
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
cursor: pointer;
font-size: 18px;
line-height: 1;
color: rgba(15, 23, 42, 0.8);
}
.eli-tabela-modal-filtro__remover:hover,
.eli-tabela-modal-filtro__remover:focus-visible {
background: rgba(15, 23, 42, 0.06);
}
.eli-tabela-modal-filtro__acoes {
margin-top: 12px;
}
.eli-tabela-modal-filtro__footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 16px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.eli-tabela-modal-filtro__botao {
height: 34px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
cursor: pointer;
font-size: 0.9rem;
}
.eli-tabela-modal-filtro__botao:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.eli-tabela-modal-filtro__botao--sec:hover,
.eli-tabela-modal-filtro__botao--sec:focus-visible {
background: rgba(15, 23, 42, 0.06);
}
.eli-tabela-modal-filtro__botao--prim {
border: none;
background: rgba(37, 99, 235, 0.95);
color: #fff;
}
.eli-tabela-modal-filtro__botao--prim:hover,
.eli-tabela-modal-filtro__botao--prim:focus-visible {
background: rgba(37, 99, 235, 1);
}
@media (max-width: 880px) {
.eli-tabela-modal-filtro__linha {
grid-template-columns: 1fr;
}
}
</style>

34
src/componentes/EliTabela/filtroAvancadoStorage.ts Normal file
View file

@ -0,0 +1,34 @@
import type { EliTabelaConsulta } from "./types-eli-tabela";
export type EliTabelaFiltroAvancadoSalvo<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>;
function key(nomeTabela: string) {
return `eli_tabela:${nomeTabela}:filtro_avancado`;
}
export function carregarFiltroAvancado<T>(nomeTabela: string): EliTabelaFiltroAvancadoSalvo<T> {
try {
const raw = localStorage.getItem(key(nomeTabela));
if (!raw) return [] as unknown as EliTabelaFiltroAvancadoSalvo<T>;
const parsed = JSON.parse(raw);
return Array.isArray(parsed) ? (parsed as EliTabelaFiltroAvancadoSalvo<T>) : ([] as any);
} catch {
return [] as unknown as EliTabelaFiltroAvancadoSalvo<T>;
}
}
export function salvarFiltroAvancado<T>(nomeTabela: string, filtros: EliTabelaFiltroAvancadoSalvo<T>) {
try {
localStorage.setItem(key(nomeTabela), JSON.stringify(filtros ?? []));
} catch {
// ignore
}
}
export function limparFiltroAvancado(nomeTabela: string) {
try {
localStorage.removeItem(key(nomeTabela));
} catch {
// ignore
}
}

7
src/componentes/EliTabela/types-eli-tabela.ts
View file

@ -1,10 +1,12 @@
import type { tipoResposta } from "p-respostas";
import type { LucideIcon } from "lucide-vue-next";
import type { TipoTabelaCelula, TiposTabelaCelulas } from "./celulas/tiposTabelaCelulas";
import { operadores, tipoFiltro } from "p-comuns";
import { TipoEntrada } from "../EliEntrada";
import { operadores, zFiltro } from "p-comuns";
import { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
// `p-comuns` expõe `zFiltro` (schema). Inferimos o tipo a partir do `parse`.
export type tipoFiltro = ReturnType<(typeof zFiltro)["parse"]>
@ -130,6 +132,7 @@ export type EliTabelaConsulta<T> = {
// Todo: quando exite aparace ap lado do obtão coluna o potão filtro avançado, onde abre um modal com dua colunas de compoentes que são contruidas conforme esse padrão
// todo: Os filtros criados deverão ser salvo em local storagem como um objeto tipofiltro[]
filtroAvancado?: {
rotulo: string,
coluna: keyof T,
operador: operadores | keyof typeof operadores,
entrada: ComponenteEntrada

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

@ -16,6 +16,7 @@ import { defineComponent, ref } from "vue";
import { codigosResposta } from "p-respostas";
import { Eye, Plus, Trash2 } from "lucide-vue-next";
import { celulaTabela, EliTabela } from "@/componentes/EliTabela";
import type { ComponenteEntrada } from "@/componentes/EliEntrada/tiposEntradas";
import type { EliTabelaConsulta } from "@/componentes/EliTabela";
type Linha = {
@ -322,9 +323,28 @@ export default defineComponent({
},
],
acoesLinha: acoesLinha,
filtroAvancado: [
{
coluna: "empreendedor",
operador: "like",
entrada: ["texto", { rotulo: "Empreendedor" }] as ComponenteEntrada,
},
{
coluna: "documento",
operador: "like",
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as ComponenteEntrada,
},
{
coluna: "email",
operador: "like",
entrada: ["texto", { rotulo: "E-mail", formato: "email" }] as ComponenteEntrada,
},
],
consulta: async (parametrosConsulta) => {
// No filtro avançado (modo simulação), a EliTabela busca a lista completa
// e pagina/filtra localmente.
const ordenadas = ordenarLinhas(linhasPadrao.value, parametrosConsulta);
const valores = aplicarPaginacao(ordenadas, parametrosConsulta);
const valores = ordenadas;
return {
cod: codigosResposta.sucesso,