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

aplicado Filtro

Browse source
This commit is contained in:
Luiz Silva 2026-01-29 15:33:42 -03:00
parent e7357e064a
commit 1e3c4026e8
12 changed files with 1507 additions and 12626 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

13786
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

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

@ -7,8 +7,6 @@ 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) */
@ -61,66 +59,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
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;
@ -728,9 +672,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
};
filtrosBase: {
type: PropType<Array<{
rotulo: string;
coluna: string | number | symbol;
operador: Operadores | keyof typeof Operadores;
entrada: ComponenteEntrada;
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
}>>;
required: true;
};
@ -741,7 +686,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}>, {
linhas: import("vue").Ref<{
coluna: string | number | symbol;
operador: "in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull";
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
@ -767,15 +711,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
prefixo?: string | undefined;
precisao?: number | undefined;
}];
operador: string;
valor: any;
}[], {
coluna: string | number | symbol;
operador: "in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull";
entrada: ComponenteEntrada;
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
operador: string;
valor: any;
}[] | {
coluna: string | number | symbol;
operador: "in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull";
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
@ -801,11 +745,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
prefixo?: string | undefined;
precisao?: number | undefined;
}];
operador: string;
valor: any;
}[]>;
operadoresDisponiveis: ("in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull")[];
colunasDisponiveis: import("vue").Ref<string[], string[]>;
componenteEntrada: (entrada: ComponenteEntrada) => import("vue").DefineComponent<import("vue").ExtractPropTypes<{
opcoesParaAdicionar: import("vue").ComputedRef<{
rotulo: string;
coluna: string | number | symbol;
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
}[]>;
colunaParaAdicionar: import("vue").Ref<string, string>;
componenteEntrada: (entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada) => import("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
default: undefined;
@ -1150,12 +1100,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
modelValue: string | null;
desabilitado: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
opcoesEntrada: (entrada: ComponenteEntrada) => any;
opcoesEntrada: (entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada) => any;
adicionar: () => void;
remover: (idx: number) => void;
emitFechar: () => void;
emitSalvar: () => void;
emitLimpar: () => void;
rotuloDoFiltro: (f: {
rotulo: string;
coluna: string | number | symbol;
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
}) => string;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
fechar: () => true;
limpar: () => true;
@ -1167,9 +1123,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
};
filtrosBase: {
type: PropType<Array<{
rotulo: string;
coluna: string | number | symbol;
operador: Operadores | keyof typeof Operadores;
entrada: ComponenteEntrada;
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
}>>;
required: true;
};

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

@ -1,15 +1,14 @@
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;
operador: string;
valor: any;
};
declare function rotuloDoFiltro(f: FiltroBase<any>): string;
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
aberto: {
type: BooleanConstructor;
@ -26,7 +25,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
}>, {
linhas: import("vue").Ref<{
coluna: string | number | symbol;
operador: Operador;
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
@ -52,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
prefixo?: string | undefined;
precisao?: number | undefined;
}];
operador: string;
valor: any;
}[], LinhaFiltro<any>[] | {
coluna: string | number | symbol;
operador: Operador;
entrada: readonly ["texto", {
rotulo: string;
placeholder?: string | undefined;
@ -81,10 +79,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
prefixo?: string | undefined;
precisao?: number | undefined;
}];
operador: string;
valor: any;
}[]>;
operadoresDisponiveis: ("in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull")[];
colunasDisponiveis: import("vue").Ref<string[], string[]>;
opcoesParaAdicionar: import("vue").ComputedRef<{
rotulo: string;
coluna: string | number | symbol;
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
entrada: ComponenteEntrada;
}[]>;
colunaParaAdicionar: import("vue").Ref<string, string>;
componenteEntrada: (entrada: ComponenteEntrada) => import("vue").DefineComponent<import("vue").ExtractPropTypes<{
value: {
type: PropType<string | null | undefined>;
@ -436,6 +440,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
emitFechar: () => void;
emitSalvar: () => void;
emitLimpar: () => void;
rotuloDoFiltro: typeof rotuloDoFiltro;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
fechar: () => true;
limpar: () => true;

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

@ -1,5 +1,7 @@
import type { EliTabelaConsulta } from "./types-eli-tabela";
export type EliTabelaFiltroAvancadoSalvo<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>;
export type EliTabelaFiltroAvancadoSalvo<T> = Array<{
coluna: keyof T;
valor: any;
}>;
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;

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

@ -99,6 +99,7 @@ export type EliTabelaConsulta<T> = {
}[];
/** configuração para aplicação dos filtros padrões */
filtroAvancado?: {
rotulo: string;
coluna: keyof T;
operador: operadores | keyof typeof operadores;
entrada: ComponenteEntrada;

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "eli-vue",
"version": "0.1.66",
"version": "0.1.68",
"private": false,
"main": "./dist/eli-vue.umd.js",
"module": "./dist/eli-vue.es.js",

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

@ -115,8 +115,7 @@ 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";
// operadores usados no tipo de configuração; o operador aplicado vem travado no filtroAvancado.
import {
carregarConfigColunas,
salvarConfigColunas,
@ -177,14 +176,10 @@ export default defineComponent({
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
);
const filtrosUi = ref<Array<LinhaFiltroUI<any>>>(carregarFiltroAvancado<any>(props.tabela.nome) as any);
function abrirModalFiltro() {
modalFiltroAberto.value = true;
@ -209,15 +204,22 @@ export default defineComponent({
}
const filtrosAvancadosAtivos = computed<tipoFiltro[]>(() => {
// converte UI -> tipoFiltro (p-comuns)
// Operador vem travado na definição (`tabela.filtroAvancado`).
const base = (props.tabela.filtroAvancado ?? []) as Array<{ coluna: string; operador: any }>;
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[];
.filter((f) => f && f.coluna !== undefined)
.map((f) => {
const b = base.find((x) => String(x.coluna) === String(f.coluna));
if (!b) return null;
return {
coluna: String(b.coluna),
operador: b.operador as any,
valor: (f as any).valor,
} as tipoFiltro;
})
.filter(Boolean) as tipoFiltro[];
});
/** Alias reativo da prop tabela */

110
src/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue
View file

@ -14,19 +14,7 @@
</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 v-for="(linha, idx) in linhas" :key="String(linha.coluna)" class="eli-tabela-modal-filtro__linha">
<div class="eli-tabela-modal-filtro__entrada">
<component
:is="componenteEntrada(linha.entrada)"
@ -49,8 +37,19 @@
</div>
<div class="eli-tabela-modal-filtro__acoes">
<button type="button" class="eli-tabela-modal-filtro__botao" @click="adicionar" :disabled="!filtrosBase.length">
Adicionar filtro
<select v-model="colunaParaAdicionar" class="eli-tabela-modal-filtro__select" :disabled="!opcoesParaAdicionar.length">
<option disabled value="">Selecione um filtro…</option>
<option v-for="o in opcoesParaAdicionar" :key="String(o.coluna)" :value="String(o.coluna)">
{{ rotuloDoFiltro(o) }}
</option>
</select>
<button
type="button"
class="eli-tabela-modal-filtro__botao"
@click="adicionar"
:disabled="!colunaParaAdicionar"
>
Adicionar
</button>
</div>
</div>
@ -71,20 +70,17 @@
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";
import { operadores as Operadores } from "p-comuns";
import { computed, defineComponent, PropType, ref, watch } from "vue";
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;
operador: string;
valor: any;
};
@ -92,6 +88,11 @@ function isTipoEntrada(v: unknown): v is TipoEntrada {
return v === "texto" || v === "numero" || v === "dataHora";
}
function rotuloDoFiltro(f: FiltroBase<any>) {
const rotulo = (f?.entrada?.[1] as any)?.rotulo;
return rotulo ? String(rotulo) : String(f?.coluna ?? "Filtro");
}
export default defineComponent({
name: "EliTabelaModalFiltroAvancado",
props: {
@ -113,9 +114,14 @@ export default defineComponent({
setup(props, { emit }) {
const linhas = ref<Array<LinhaFiltro<any>>>([]);
const operadoresDisponiveis = Object.keys(Operadores) as Operador[];
const colunaParaAdicionar = ref<string>("");
const colunasDisponiveis = ref<string[]>([]);
const colunasDisponiveis = computed(() => (props.filtrosBase ?? []).map((b) => String(b.coluna)));
const opcoesParaAdicionar = computed(() => {
const usadas = new Set(linhas.value.map((l) => String(l.coluna)));
return (props.filtrosBase ?? []).filter((b) => !usadas.has(String(b.coluna)));
});
function componenteEntrada(entrada: ComponenteEntrada) {
const tipo = entrada?.[0];
@ -125,12 +131,8 @@ export default defineComponent({
}
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" };
// o rótulo vem do próprio componente (entrada[1].rotulo)
return (entrada?.[1] as any) ?? { rotulo: "" };
}
function valorInicialPorEntrada(entrada: ComponenteEntrada) {
@ -141,13 +143,13 @@ export default defineComponent({
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;
// operador vem travado no base
const baseItem = base.find((b) => String(b.coluna) === String(m.coluna)) ?? base[0];
const entrada = (baseItem?.entrada ?? m.entrada) as ComponenteEntrada;
const col = (baseItem?.coluna ?? m.coluna) as any;
const op = String(baseItem?.operador ?? "=");
const val = m.valor ?? valorInicialPorEntrada(entrada);
return {
@ -159,26 +161,12 @@ export default defineComponent({
});
// 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),
},
];
}
// não auto-adiciona; usuário escolhe quais filtros quer usar
// 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 = "=";
}
if (!colunasDisponiveis.value.includes(String(l.coluna))) continue;
l.operador = String((base.find((b) => String(b.coluna) === String(l.coluna))?.operador ?? "="));
// sanity
if (l.entrada && !isTipoEntrada(l.entrada[0])) {
l.entrada = ["texto", { rotulo: "Valor" }] as any;
@ -195,14 +183,20 @@ export default defineComponent({
);
function adicionar() {
if (!props.filtrosBase.length) return;
const b0 = props.filtrosBase[0];
if (!colunaParaAdicionar.value) return;
const b0 = (props.filtrosBase ?? []).find((b) => String(b.coluna) === String(colunaParaAdicionar.value));
if (!b0) return;
// evita repetição
if (linhas.value.some((l) => String(l.coluna) === String(b0.coluna))) return;
linhas.value.push({
coluna: b0.coluna as any,
operador: (b0.operador as any) ?? "=",
entrada: b0.entrada,
operador: String(b0.operador ?? "="),
valor: valorInicialPorEntrada(b0.entrada),
});
colunaParaAdicionar.value = "";
}
function remover(idx: number) {
@ -222,8 +216,6 @@ export default defineComponent({
"salvar",
linhas.value.map((l) => ({
coluna: l.coluna,
operador: l.operador,
entrada: l.entrada,
valor: l.valor,
}))
);
@ -231,15 +223,17 @@ export default defineComponent({
return {
linhas,
operadoresDisponiveis,
colunasDisponiveis,
opcoesParaAdicionar,
colunaParaAdicionar,
componenteEntrada,
opcoesEntrada,
adicionar,
remover,
// exibimos operador fixo só como texto
emitFechar,
emitSalvar,
emitLimpar,
rotuloDoFiltro,
};
},
});
@ -312,7 +306,7 @@ export default defineComponent({
.eli-tabela-modal-filtro__linha {
display: grid;
grid-template-columns: 220px 120px 1fr 34px;
grid-template-columns: 1fr 34px;
gap: 10px;
align-items: center;
}

7
src/componentes/EliTabela/filtroAvancadoStorage.ts
View file

@ -1,6 +1,7 @@
import type { EliTabelaConsulta } from "./types-eli-tabela";
export type EliTabelaFiltroAvancadoSalvo<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>;
export type EliTabelaFiltroAvancadoSalvo<T> = Array<{
coluna: keyof T
valor: any
}>;
function key(nomeTabela: string) {
return `eli_tabela:${nomeTabela}:filtro_avancado`;

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

@ -328,16 +328,19 @@ export default defineComponent({
coluna: "empreendedor",
operador: "like",
entrada: ["texto", { rotulo: "Empreendedor" }] as ComponenteEntrada,
rotulo: 'Empreendedor'
},
{
coluna: "documento",
operador: "like",
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as ComponenteEntrada,
'rotulo': 'Documento'
},
{
coluna: "email",
operador: "like",
entrada: ["texto", { rotulo: "E-mail", formato: "email" }] as ComponenteEntrada,
rotulo: 'E-mail'
},
],
consulta: async (parametrosConsulta) => {