build
This commit is contained in:
parent
8a5596e860
commit
57325f6744
100 changed files with 16153 additions and 4623 deletions
25
IA.md
25
IA.md
|
|
@ -370,6 +370,31 @@ filtroAvancado: [
|
|||
]
|
||||
```
|
||||
|
||||
### Botões de Ação da Tabela (`acoesTabela`)
|
||||
|
||||
Além das ações por linha, você pode adicionar botões de ação globais à tabela.
|
||||
|
||||
```ts
|
||||
acoesTabela: [
|
||||
{
|
||||
rotulo: "Novo Usuário",
|
||||
icone: Plus,
|
||||
posicao: "superior", // Ao lado da busca
|
||||
acao: () => console.log("Criar novo")
|
||||
},
|
||||
{
|
||||
rotulo: "Exportar Relatório",
|
||||
icone: Download,
|
||||
posicao: "inferior", // No rodapé, alinhado à esquerda
|
||||
acao: () => console.log("Exportar")
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
- **`posicao: 'superior'`**: Exibidos à direita da caixa de busca.
|
||||
- **`posicao: 'inferior'`**: Exibidos no rodapé da tabela, **alinhados à esquerda** (enquanto a paginação fica à direita).
|
||||
- **Estilo**: Por padrão, botões inferiores possuem fundo branco, **borda verde** (`outline`) e texto verde. Caso uma `cor` personalizada seja informada, ela será usada para a borda e texto.
|
||||
|
||||
### Processando a Consulta
|
||||
|
||||
A função `consulta` recebe um objeto com todos os parâmetros necessários para buscar os dados corretamente.
|
||||
|
|
|
|||
17
biome.json
Executable file
17
biome.json
Executable file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
|
||||
"extends": ["./node_modules/p-comuns/Documentos/biome.json"],
|
||||
"files": {
|
||||
"includes": ["src/**/*.{js,ts,jsx,tsx,vue}"]
|
||||
},
|
||||
"linter": {
|
||||
"rules": {
|
||||
"suspicious": {
|
||||
"noExplicitAny": "error"
|
||||
},
|
||||
"style": {
|
||||
"noNonNullAssertion": "error"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15086
dist/eli-vue.es.js
vendored
15086
dist/eli-vue.es.js
vendored
File diff suppressed because one or more lines are too long
73
dist/eli-vue.umd.js
vendored
73
dist/eli-vue.umd.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { CampoDensidade, CampoVariante } from "../../tipos";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
type EntradaDataHora = PadroesEntradas["dataHora"];
|
||||
|
|
@ -17,6 +17,8 @@ type PropsAntigas = {
|
|||
min?: string;
|
||||
max?: string;
|
||||
};
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
value: {
|
||||
type: PropType<EntradaDataHora["value"]>;
|
||||
|
|
@ -186,15 +188,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
default: undefined;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||
onInput?: ((_v: string | null) => any) | undefined;
|
||||
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||
onChange?: ((_v: string | null) => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
|
||||
onAlterar?: ((_v: string | null) => any) | undefined;
|
||||
onFoco?: (() => any) | undefined;
|
||||
onDesfoco?: (() => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
}>, {
|
||||
modo: "data" | "dataHora" | undefined;
|
||||
limpavel: boolean;
|
||||
|
|
@ -222,10 +224,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
variante?: import("../../tipos").CampoVariante;
|
||||
};
|
||||
value: string | null | undefined;
|
||||
placeholder: string;
|
||||
modelValue: string | null;
|
||||
rotulo: string;
|
||||
placeholder: string;
|
||||
desabilitado: boolean;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
type EntradaNumero = PadroesEntradas["numero"];
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
/** Interface padrão (EliEntrada): value + opcoes. */
|
||||
value: {
|
||||
|
|
@ -15,7 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
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);
|
||||
emit: ((event: "input", _v: number | null | undefined) => void) & ((event: "update:value", _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;
|
||||
|
|
@ -37,13 +39,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
required: true;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:value"?: ((_v: number | null | undefined) => any) | undefined;
|
||||
onInput?: ((_v: number | null | undefined) => any) | undefined;
|
||||
"onUpdate:value"?: ((_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>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
type EntradaParagrafo = PadroesEntradas["paragrafo"];
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
value: {
|
||||
type: PropType<EntradaParagrafo["value"]>;
|
||||
|
|
@ -14,22 +16,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
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);
|
||||
emit: ((event: "input", _v: string | null | undefined) => void) & ((event: "update:value", _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>;
|
||||
opcoes: {
|
||||
rotulo: string;
|
||||
placeholder?: string;
|
||||
} & {
|
||||
linhas?: number;
|
||||
limiteCaracteres?: number;
|
||||
limpavel?: boolean;
|
||||
erro?: boolean;
|
||||
mensagensErro?: string | string[];
|
||||
dica?: string;
|
||||
dicaPersistente?: boolean;
|
||||
densidade?: import("../..").CampoDensidade;
|
||||
variante?: import("../..").CampoVariante;
|
||||
};
|
||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
"update:value": (_v: EntradaParagrafo["value"]) => true;
|
||||
input: (_v: EntradaParagrafo["value"]) => true;
|
||||
|
|
@ -46,8 +34,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
required: true;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
|
||||
onInput?: ((_v: string | null | undefined) => any) | undefined;
|
||||
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
|
||||
onChange?: ((_v: string | null | undefined) => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
|
|
@ -67,7 +55,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
hideSpinButtons: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
clearable: boolean;
|
||||
clearIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||
active: boolean;
|
||||
|
|
@ -455,7 +442,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
hideSpinButtons: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
clearable: boolean;
|
||||
clearIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||
active: boolean;
|
||||
|
|
@ -530,7 +516,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
hideSpinButtons: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
clearable: boolean;
|
||||
clearIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||
active: boolean;
|
||||
|
|
@ -912,7 +897,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
hideSpinButtons: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
clearable: boolean;
|
||||
clearIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||
active: boolean;
|
||||
|
|
@ -948,7 +932,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
hideSpinButtons: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
clearable: boolean;
|
||||
clearIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||
active: boolean;
|
||||
|
|
@ -1300,7 +1283,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
hint?: string | undefined;
|
||||
"onClick:prepend"?: ((args_0: MouseEvent) => void) | undefined;
|
||||
"onClick:append"?: ((args_0: MouseEvent) => void) | undefined;
|
||||
}, "disabled" | "style" | "density" | "error" | "direction" | "reset" | "isValid" | "resetValidation" | "validate" | "centerAffix" | "errorMessages" | "focused" | "glow" | "hideSpinButtons" | "maxErrors" | "messages" | "persistentHint" | "readonly" | "rules"> & import("vue").ShallowUnwrapRef<{
|
||||
}, "disabled" | "error" | "style" | "isValid" | "reset" | "resetValidation" | "validate" | "centerAffix" | "density" | "direction" | "errorMessages" | "focused" | "glow" | "hideSpinButtons" | "maxErrors" | "messages" | "persistentHint" | "readonly" | "rules"> & import("vue").ShallowUnwrapRef<{
|
||||
reset: () => Promise<void>;
|
||||
resetValidation: () => Promise<void>;
|
||||
validate: (silent?: boolean) => Promise<string[]>;
|
||||
|
|
@ -1309,7 +1292,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
}> & import("vue").ComponentCustomProperties & import("vuetify/lib/util/defineComponent.mjs").GenericProps<{
|
||||
modelValue?: unknown;
|
||||
"onUpdate:modelValue"?: ((value: unknown) => void) | undefined;
|
||||
}, import("vuetify/lib/components/VInput/VInput.mjs").VInputSlots>, "name" | "color" | "disabled" | keyof import("vue").VNodeProps | "class" | "style" | "label" | "density" | "error" | "id" | "width" | "direction" | "theme" | "appendIcon" | "baseColor" | "prependIcon" | "modelValue" | "$children" | "v-slots" | "v-slot:append" | "v-slot:default" | "v-slot:prepend" | "onUpdate:modelValue" | "centerAffix" | "errorMessages" | "focused" | "glow" | "hideSpinButtons" | "maxErrors" | "messages" | "persistentHint" | "readonly" | "rules" | "onUpdate:focused" | "validateOn" | "validationValue" | "maxWidth" | "minWidth" | "iconColor" | "hideDetails" | "hint" | "onClick:prepend" | "onClick:append" | "v-slot:details" | "v-slot:message">, `$${any}`> & {
|
||||
}, import("vuetify/lib/components/VInput/VInput.mjs").VInputSlots>, "name" | "color" | "disabled" | "error" | "label" | "style" | "class" | keyof import("vue").VNodeProps | "modelValue" | "onUpdate:modelValue" | "centerAffix" | "density" | "direction" | "errorMessages" | "focused" | "glow" | "hideSpinButtons" | "maxErrors" | "messages" | "persistentHint" | "readonly" | "rules" | "theme" | "onUpdate:focused" | "validateOn" | "validationValue" | "maxWidth" | "minWidth" | "width" | "id" | "appendIcon" | "baseColor" | "iconColor" | "prependIcon" | "hideDetails" | "hint" | "onClick:prepend" | "onClick:append" | "$children" | "v-slot:append" | "v-slot:default" | "v-slot:details" | "v-slot:message" | "v-slot:prepend" | "v-slots">, `$${any}`> & {
|
||||
_allExposed: {
|
||||
reset: () => Promise<void>;
|
||||
resetValidation: () => Promise<void>;
|
||||
|
|
@ -1336,7 +1319,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
hideSpinButtons: boolean;
|
||||
persistentHint: boolean;
|
||||
messages: string | readonly string[];
|
||||
direction: "horizontal" | "vertical";
|
||||
clearable: boolean;
|
||||
clearIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||
active: boolean;
|
||||
|
|
@ -1446,11 +1428,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
direction: {
|
||||
type: PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
"onClick:prepend": PropType<(args_0: MouseEvent) => void>;
|
||||
"onClick:append": PropType<(args_0: MouseEvent) => void>;
|
||||
appendInnerIcon: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||
|
|
@ -1568,11 +1545,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: PropType<string | readonly string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
direction: {
|
||||
type: PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
"onClick:prepend": PropType<(args_0: MouseEvent) => void>;
|
||||
"onClick:append": PropType<(args_0: MouseEvent) => void>;
|
||||
appendInnerIcon: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||
|
|
@ -1638,5 +1610,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
modelModifiers: PropType<Record<string, boolean>>;
|
||||
}>>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
type EntradaTexto = PadroesEntradas["texto"];
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
/** Interface padrão (EliEntrada): value + opcoes. */
|
||||
value: {
|
||||
|
|
@ -15,7 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
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);
|
||||
emit: ((event: "input", _v: string | null | undefined) => void) & ((event: "update:value", _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>;
|
||||
|
|
@ -38,13 +40,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
required: true;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
|
||||
onInput?: ((_v: string | null | undefined) => any) | undefined;
|
||||
"onUpdate:value"?: ((_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>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
6
dist/types/componentes/EliEntrada/index.d.ts
vendored
6
dist/types/componentes/EliEntrada/index.d.ts
vendored
|
|
@ -1,7 +1,7 @@
|
|||
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||
import EliEntradaParagrafo from "./EliEntradaParagrafo.vue";
|
||||
import EliEntradaSelecao from "./EliEntradaSelecao.vue";
|
||||
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora, EliEntradaParagrafo, EliEntradaSelecao };
|
||||
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora, EliEntradaParagrafo, EliEntradaSelecao, };
|
||||
export type { PadroesEntradas, TipoEntrada } from "./tiposEntradas";
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -137,7 +137,10 @@ export type PadroesEntradas = {
|
|||
* Ex.: "texto" | "numero"
|
||||
*/
|
||||
export type TipoEntrada = keyof PadroesEntradas;
|
||||
export type PadraoComponenteEntrada<T extends TipoEntrada> = readonly [T, PadroesEntradas[T]['opcoes']];
|
||||
export type PadraoComponenteEntrada<T extends TipoEntrada> = readonly [
|
||||
T,
|
||||
PadroesEntradas[T]["opcoes"]
|
||||
];
|
||||
export type ComponenteEntrada = {
|
||||
[K in TipoEntrada]: PadraoComponenteEntrada<K>;
|
||||
}[TipoEntrada];
|
||||
|
|
|
|||
448
dist/types/componentes/EliTabela/EliTabela.vue.d.ts
vendored
448
dist/types/componentes/EliTabela/EliTabela.vue.d.ts
vendored
|
|
@ -1,13 +1,10 @@
|
|||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
import { PropType } from "vue";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
/** Tipos da configuração/contrato da tabela */
|
||||
import type { tipoEliTabelaConsulta } from "./types-eli-tabela";
|
||||
import { type PropType } from "vue";
|
||||
import { type EliTabelaColunasConfig } from "./colunasStorage";
|
||||
/** Tipos da configuração/contrato da tabela */
|
||||
import type { parametrosConsulta, tipoEliColuna, tipoEliTabelaConsulta } from "./types-eli-tabela";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
/** Configuração principal da tabela (colunas, consulta e ações) */
|
||||
tabela: {
|
||||
|
|
@ -24,7 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
filtrosAvancadosAtivos: import("vue").ComputedRef<{
|
||||
coluna: string;
|
||||
valor: any;
|
||||
operador: "in" | "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "isNull";
|
||||
operador: "=" | "!=" | ">" | ">=" | "<" | "<=" | "like" | "in" | "isNull";
|
||||
ou?: boolean | undefined;
|
||||
}[]>;
|
||||
quantidadeFiltrada: import("vue").ComputedRef<number>;
|
||||
|
|
@ -38,15 +35,27 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
registrosPorConsulta: import("vue").ComputedRef<number>;
|
||||
exibirBusca: import("vue").ComputedRef<boolean>;
|
||||
exibirFiltroAvancado: import("vue").ComputedRef<boolean>;
|
||||
acoesCabecalho: import("vue").ComputedRef<{
|
||||
acoesSuperiores: import("vue").ComputedRef<{
|
||||
posicao: "superior" | "inferior";
|
||||
icone?: import("lucide-vue-next").LucideIcon;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: () => void;
|
||||
acao: (parametrosConsulta?: parametrosConsulta<any> | undefined) => void;
|
||||
atualizarConsulta?: () => Promise<void>;
|
||||
editarLista?: ((lista: any[]) => Promise<any[]>) | undefined;
|
||||
}[]>;
|
||||
temAcoesCabecalho: import("vue").ComputedRef<boolean>;
|
||||
temAcoesSuperiores: import("vue").ComputedRef<boolean>;
|
||||
acoesInferiores: import("vue").ComputedRef<{
|
||||
posicao: "superior" | "inferior";
|
||||
icone?: import("lucide-vue-next").LucideIcon;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: (parametrosConsulta?: parametrosConsulta<any> | undefined) => void;
|
||||
atualizarConsulta?: () => Promise<void>;
|
||||
editarLista?: ((lista: any[]) => Promise<any[]>) | undefined;
|
||||
}[]>;
|
||||
temAcoesInferiores: import("vue").ComputedRef<boolean>;
|
||||
parametrosConsultaAtuais: import("vue").ComputedRef<parametrosConsulta<any>>;
|
||||
temAcoes: import("vue").ComputedRef<boolean>;
|
||||
totalColunas: import("vue").ComputedRef<number>;
|
||||
colunasEfetivas: import("vue").ComputedRef<any[]>;
|
||||
|
|
@ -140,6 +149,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: StringConstructor;
|
||||
required: true;
|
||||
};
|
||||
parametrosConsulta: {
|
||||
type: PropType<any>;
|
||||
required: false;
|
||||
};
|
||||
acoesCabecalho: {
|
||||
type: PropType<Array<{
|
||||
icone
|
||||
|
|
@ -147,17 +160,23 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any;
|
||||
cor
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: string;
|
||||
rotulo: string;
|
||||
acao: () => void;
|
||||
acao: (params
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any) => void;
|
||||
}>>;
|
||||
required: true;
|
||||
};
|
||||
|
|
@ -189,6 +208,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: StringConstructor;
|
||||
required: true;
|
||||
};
|
||||
parametrosConsulta: {
|
||||
type: PropType<any>;
|
||||
required: false;
|
||||
};
|
||||
acoesCabecalho: {
|
||||
type: PropType<Array<{
|
||||
icone
|
||||
|
|
@ -196,23 +219,29 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any;
|
||||
cor
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: string;
|
||||
rotulo: string;
|
||||
acao: () => void;
|
||||
acao: (params
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any) => void;
|
||||
}>>;
|
||||
required: true;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
onBuscar?: ((valor: string) => any) | undefined;
|
||||
onColunas?: (() => any) | undefined;
|
||||
onBuscar?: ((valor: string) => any) | undefined;
|
||||
onFiltroAvancado?: (() => any) | undefined;
|
||||
}>, {
|
||||
exibirBotaoColunas: boolean;
|
||||
|
|
@ -474,21 +503,21 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: string;
|
||||
icone
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: import("lucide-vue-next").LucideIcon;
|
||||
acao
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: () => void;
|
||||
}[];
|
||||
} | {
|
||||
|
|
@ -547,21 +576,21 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: string;
|
||||
icone
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: import("lucide-vue-next").LucideIcon;
|
||||
acao
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Dependências do Vue (Composition API) */
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: () => void;
|
||||
}[];
|
||||
} | {
|
||||
|
|
@ -658,6 +687,38 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: NumberConstructor;
|
||||
required: false;
|
||||
};
|
||||
acoes: {
|
||||
type: PropType<Array<{
|
||||
icone
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any;
|
||||
cor
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: string;
|
||||
rotulo: string;
|
||||
acao: (params
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any) => void;
|
||||
}>>;
|
||||
required: false;
|
||||
default: () => never[];
|
||||
};
|
||||
parametrosConsulta: {
|
||||
type: PropType<any>;
|
||||
required: false;
|
||||
};
|
||||
}>, {
|
||||
botoes: import("vue").ComputedRef<{
|
||||
label: string;
|
||||
|
|
@ -685,9 +746,54 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: NumberConstructor;
|
||||
required: false;
|
||||
};
|
||||
acoes: {
|
||||
type: PropType<Array<{
|
||||
icone
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any;
|
||||
cor
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: string;
|
||||
rotulo: string;
|
||||
acao: (params
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any) => void;
|
||||
}>>;
|
||||
required: false;
|
||||
default: () => never[];
|
||||
};
|
||||
parametrosConsulta: {
|
||||
type: PropType<any>;
|
||||
required: false;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
onAlterar?: ((pagina: number) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
}>, {
|
||||
acoes: {
|
||||
icone?: any;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: (params
|
||||
/**
|
||||
* EliTabela
|
||||
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||
*/
|
||||
/** Enum de códigos de resposta utilizado na consulta */
|
||||
?: any) => void;
|
||||
}[];
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
EliTabelaModalColunas: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
aberto: {
|
||||
type: BooleanConstructor;
|
||||
|
|
@ -746,7 +852,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: PropType<Array<{
|
||||
coluna: string | number | symbol;
|
||||
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
|
||||
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
|
||||
entrada: import("../EliEntrada/tiposEntradas").ComponenteEntrada;
|
||||
}>>;
|
||||
required: true;
|
||||
};
|
||||
|
|
@ -773,8 +879,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
dicaPersistente?: boolean | undefined;
|
||||
min?: string | undefined;
|
||||
max?: string | undefined;
|
||||
densidade?: import("../../index.js").CampoDensidade | undefined;
|
||||
variante?: import("../../index.js").CampoVariante | undefined;
|
||||
densidade?: import("../..").CampoDensidade | undefined;
|
||||
variante?: import("../..").CampoVariante | undefined;
|
||||
}] | readonly ["numero", {
|
||||
rotulo: string;
|
||||
placeholder?: string | undefined;
|
||||
|
|
@ -791,8 +897,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
mensagensErro?: string | string[] | undefined;
|
||||
dica?: string | undefined;
|
||||
dicaPersistente?: boolean | undefined;
|
||||
densidade?: import("../../index.js").CampoDensidade | undefined;
|
||||
variante?: import("../../index.js").CampoVariante | undefined;
|
||||
densidade?: import("../..").CampoDensidade | undefined;
|
||||
variante?: import("../..").CampoVariante | undefined;
|
||||
}] | readonly ["selecao", {
|
||||
rotulo: string;
|
||||
placeholder?: string | undefined;
|
||||
|
|
@ -808,14 +914,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
mensagensErro?: string | string[] | undefined;
|
||||
dica?: string | undefined;
|
||||
dicaPersistente?: boolean | undefined;
|
||||
densidade?: import("../../index.js").CampoDensidade | undefined;
|
||||
variante?: import("../../index.js").CampoVariante | undefined;
|
||||
densidade?: import("../..").CampoDensidade | undefined;
|
||||
variante?: import("../..").CampoVariante | undefined;
|
||||
}];
|
||||
operador: string;
|
||||
valor: any;
|
||||
}[], {
|
||||
coluna: string | number | symbol;
|
||||
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
|
||||
entrada: import("../EliEntrada/tiposEntradas").ComponenteEntrada;
|
||||
operador: string;
|
||||
valor: any;
|
||||
}[] | {
|
||||
|
|
@ -836,8 +942,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
dicaPersistente?: boolean | undefined;
|
||||
min?: string | undefined;
|
||||
max?: string | undefined;
|
||||
densidade?: import("../../index.js").CampoDensidade | undefined;
|
||||
variante?: import("../../index.js").CampoVariante | undefined;
|
||||
densidade?: import("../..").CampoDensidade | undefined;
|
||||
variante?: import("../..").CampoVariante | undefined;
|
||||
}] | readonly ["numero", {
|
||||
rotulo: string;
|
||||
placeholder?: string | undefined;
|
||||
|
|
@ -854,8 +960,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
mensagensErro?: string | string[] | undefined;
|
||||
dica?: string | undefined;
|
||||
dicaPersistente?: boolean | undefined;
|
||||
densidade?: import("../../index.js").CampoDensidade | undefined;
|
||||
variante?: import("../../index.js").CampoVariante | undefined;
|
||||
densidade?: import("../..").CampoDensidade | undefined;
|
||||
variante?: import("../..").CampoVariante | undefined;
|
||||
}] | readonly ["selecao", {
|
||||
rotulo: string;
|
||||
placeholder?: string | undefined;
|
||||
|
|
@ -871,8 +977,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
mensagensErro?: string | string[] | undefined;
|
||||
dica?: string | undefined;
|
||||
dicaPersistente?: boolean | undefined;
|
||||
densidade?: import("../../index.js").CampoDensidade | undefined;
|
||||
variante?: import("../../index.js").CampoVariante | undefined;
|
||||
densidade?: import("../..").CampoDensidade | undefined;
|
||||
variante?: import("../..").CampoVariante | undefined;
|
||||
}];
|
||||
operador: string;
|
||||
valor: any;
|
||||
|
|
@ -880,117 +986,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
opcoesParaAdicionar: import("vue").ComputedRef<{
|
||||
coluna: string | number | symbol;
|
||||
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
|
||||
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
|
||||
entrada: import("../EliEntrada/tiposEntradas").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;
|
||||
};
|
||||
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<{
|
||||
componenteEntrada: (entrada: import("../EliEntrada/tiposEntradas").ComponenteEntrada) => import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
value: {
|
||||
type: PropType<string | null | undefined>;
|
||||
default: undefined;
|
||||
|
|
@ -1008,8 +1007,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../index.js").CampoDensidade;
|
||||
variante?: import("../../index.js").CampoVariante;
|
||||
densidade?: import("../..").CampoDensidade;
|
||||
variante?: import("../..").CampoVariante;
|
||||
}>;
|
||||
required: false;
|
||||
default: undefined;
|
||||
|
|
@ -1055,11 +1054,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
default: undefined;
|
||||
};
|
||||
densidade: {
|
||||
type: PropType<import("../../index.js").CampoDensidade>;
|
||||
type: PropType<import("../..").CampoDensidade>;
|
||||
default: undefined;
|
||||
};
|
||||
variante: {
|
||||
type: PropType<import("../../index.js").CampoVariante>;
|
||||
type: PropType<import("../..").CampoVariante>;
|
||||
default: undefined;
|
||||
};
|
||||
min: {
|
||||
|
|
@ -1090,8 +1089,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../index.js").CampoDensidade;
|
||||
variante?: import("../../index.js").CampoVariante;
|
||||
densidade?: import("../..").CampoDensidade;
|
||||
variante?: import("../..").CampoVariante;
|
||||
}>;
|
||||
desabilitadoEfetivo: import("vue").ComputedRef<boolean>;
|
||||
emitCompatFocus: () => void;
|
||||
|
|
@ -1124,8 +1123,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../index.js").CampoDensidade;
|
||||
variante?: import("../../index.js").CampoVariante;
|
||||
densidade?: import("../..").CampoDensidade;
|
||||
variante?: import("../..").CampoVariante;
|
||||
}>;
|
||||
required: false;
|
||||
default: undefined;
|
||||
|
|
@ -1171,11 +1170,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
default: undefined;
|
||||
};
|
||||
densidade: {
|
||||
type: PropType<import("../../index.js").CampoDensidade>;
|
||||
type: PropType<import("../..").CampoDensidade>;
|
||||
default: undefined;
|
||||
};
|
||||
variante: {
|
||||
type: PropType<import("../../index.js").CampoVariante>;
|
||||
type: PropType<import("../..").CampoVariante>;
|
||||
default: undefined;
|
||||
};
|
||||
min: {
|
||||
|
|
@ -1187,15 +1186,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
default: undefined;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||
onInput?: ((_v: string | null) => any) | undefined;
|
||||
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||
onChange?: ((_v: string | null) => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
|
||||
onAlterar?: ((_v: string | null) => any) | undefined;
|
||||
onFoco?: (() => any) | undefined;
|
||||
onDesfoco?: (() => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
}>, {
|
||||
modo: "data" | "dataHora" | undefined;
|
||||
limpavel: boolean;
|
||||
|
|
@ -1205,8 +1204,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
dicaPersistente: boolean;
|
||||
min: string | undefined;
|
||||
max: string | undefined;
|
||||
densidade: import("../../index.js").CampoDensidade;
|
||||
variante: import("../../index.js").CampoVariante;
|
||||
densidade: import("../..").CampoDensidade;
|
||||
variante: import("../..").CampoVariante;
|
||||
opcoes: {
|
||||
rotulo: string;
|
||||
placeholder?: string;
|
||||
|
|
@ -1219,16 +1218,123 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../index.js").CampoDensidade;
|
||||
variante?: import("../../index.js").CampoVariante;
|
||||
densidade?: import("../..").CampoDensidade;
|
||||
variante?: import("../..").CampoVariante;
|
||||
};
|
||||
value: string | null | undefined;
|
||||
placeholder: string;
|
||||
modelValue: string | null;
|
||||
rotulo: string;
|
||||
placeholder: string;
|
||||
desabilitado: boolean;
|
||||
}, {}, {}, {}, 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: "input", _v: number | null | undefined) => void) & ((event: "update:value", _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<{
|
||||
onInput?: ((_v: number | null | undefined) => any) | undefined;
|
||||
"onUpdate:value"?: ((_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;
|
||||
} & {
|
||||
limiteCaracteres?: number;
|
||||
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
|
||||
}>;
|
||||
required: true;
|
||||
};
|
||||
}>, {
|
||||
attrs: {
|
||||
[x: string]: unknown;
|
||||
};
|
||||
emit: ((event: "input", _v: string | null | undefined) => void) & ((event: "update:value", _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<{
|
||||
onInput?: ((_v: string | null | undefined) => any) | undefined;
|
||||
"onUpdate:value"?: ((_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>;
|
||||
opcoesEntrada: (entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada) => any;
|
||||
opcoesEntrada: (entrada: import("../EliEntrada/tiposEntradas").ComponenteEntrada) => any;
|
||||
adicionar: () => void;
|
||||
remover: (idx: number) => void;
|
||||
emitFechar: () => void;
|
||||
|
|
@ -1237,7 +1343,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
rotuloDoFiltro: (f: {
|
||||
coluna: string | number | symbol;
|
||||
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
|
||||
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
|
||||
entrada: import("../EliEntrada/tiposEntradas").ComponenteEntrada;
|
||||
}) => string;
|
||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
fechar: () => true;
|
||||
|
|
@ -1252,7 +1358,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: PropType<Array<{
|
||||
coluna: string | number | symbol;
|
||||
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
|
||||
entrada: import("../EliEntrada/tiposEntradas.js").ComponenteEntrada;
|
||||
entrada: import("../EliEntrada/tiposEntradas").ComponenteEntrada;
|
||||
}>>;
|
||||
required: true;
|
||||
};
|
||||
|
|
@ -1266,5 +1372,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
onLimpar?: (() => any) | undefined;
|
||||
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
colunas: {
|
||||
type: PropType<Array<tipoEliColuna<any>>>;
|
||||
|
|
@ -182,5 +184,3 @@ 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, {}>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
exibirBusca: {
|
||||
type: BooleanConstructor;
|
||||
|
|
@ -18,12 +20,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: StringConstructor;
|
||||
required: true;
|
||||
};
|
||||
parametrosConsulta: {
|
||||
type: PropType<any>;
|
||||
required: false;
|
||||
};
|
||||
acoesCabecalho: {
|
||||
type: PropType<Array<{
|
||||
icone?: any;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: () => void;
|
||||
acao: (params?: any) => void;
|
||||
}>>;
|
||||
required: true;
|
||||
};
|
||||
|
|
@ -55,18 +61,22 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: StringConstructor;
|
||||
required: true;
|
||||
};
|
||||
parametrosConsulta: {
|
||||
type: PropType<any>;
|
||||
required: false;
|
||||
};
|
||||
acoesCabecalho: {
|
||||
type: PropType<Array<{
|
||||
icone?: any;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: () => void;
|
||||
acao: (params?: any) => void;
|
||||
}>>;
|
||||
required: true;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
onBuscar?: ((valor: string) => any) | undefined;
|
||||
onColunas?: (() => any) | undefined;
|
||||
onBuscar?: ((valor: string) => any) | undefined;
|
||||
onFiltroAvancado?: (() => any) | undefined;
|
||||
}>, {
|
||||
exibirBotaoColunas: boolean;
|
||||
|
|
@ -97,5 +107,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
Search: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
modelo: {
|
||||
type: StringConstructor;
|
||||
|
|
@ -22,5 +24,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
}, {}, {
|
||||
Search: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
isDev: {
|
||||
type: BooleanConstructor;
|
||||
|
|
@ -32,5 +34,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
required: true;
|
||||
};
|
||||
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
linha: {
|
||||
type: PropType<unknown>;
|
||||
|
|
@ -56,5 +58,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
};
|
||||
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
carregando: {
|
||||
type: BooleanConstructor;
|
||||
|
|
@ -30,5 +32,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
}>> & Readonly<{}>, {
|
||||
mensagemVazio: string | undefined;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
colunas: {
|
||||
type: PropType<Array<tipoEliColuna<any>>>;
|
||||
|
|
@ -55,5 +57,3 @@ 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, {}>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tipoEliTabelaAcao } from "./types-eli-tabela";
|
||||
type ItemAcao<T> = {
|
||||
acao: tipoEliTabelaAcao<T>;
|
||||
indice: number;
|
||||
visivel: boolean;
|
||||
};
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
menuAberto: {
|
||||
type: PropType<number | null>;
|
||||
|
|
@ -62,5 +64,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
linha: unknown;
|
||||
}) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { EliTabelaColunasConfig } from "./colunasStorage";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
type OrigemLista = "visiveis" | "invisiveis";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
aberto: {
|
||||
type: BooleanConstructor;
|
||||
|
|
@ -51,5 +53,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
onFechar?: (() => any) | undefined;
|
||||
onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
|
||||
import type { tipoEliTabelaConsulta } from "./types-eli-tabela";
|
||||
type FiltroBase<T> = NonNullable<tipoEliTabelaConsulta<T>["filtroAvancado"]>[number];
|
||||
|
|
@ -9,6 +9,8 @@ type LinhaFiltro<T> = {
|
|||
valor: any;
|
||||
};
|
||||
declare function rotuloDoFiltro(f: FiltroBase<any>): string;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
aberto: {
|
||||
type: BooleanConstructor;
|
||||
|
|
@ -147,113 +149,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
}[]>;
|
||||
colunaParaAdicionar: 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;
|
||||
|
|
@ -450,15 +345,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
default: undefined;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||
onInput?: ((_v: string | null) => any) | undefined;
|
||||
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||
onChange?: ((_v: string | null) => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
|
||||
onAlterar?: ((_v: string | null) => any) | undefined;
|
||||
onFoco?: (() => any) | undefined;
|
||||
onDesfoco?: (() => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
}>, {
|
||||
modo: "data" | "dataHora" | undefined;
|
||||
limpavel: boolean;
|
||||
|
|
@ -486,10 +381,117 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
variante?: import("../..").CampoVariante;
|
||||
};
|
||||
value: string | null | undefined;
|
||||
placeholder: string;
|
||||
modelValue: string | null;
|
||||
rotulo: string;
|
||||
placeholder: string;
|
||||
desabilitado: boolean;
|
||||
}, {}, {}, {}, 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: "input", _v: number | null | undefined) => void) & ((event: "update:value", _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<{
|
||||
onInput?: ((_v: number | null | undefined) => any) | undefined;
|
||||
"onUpdate:value"?: ((_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;
|
||||
} & {
|
||||
limiteCaracteres?: number;
|
||||
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
|
||||
}>;
|
||||
required: true;
|
||||
};
|
||||
}>, {
|
||||
attrs: {
|
||||
[x: string]: unknown;
|
||||
};
|
||||
emit: ((event: "input", _v: string | null | undefined) => void) & ((event: "update:value", _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<{
|
||||
onInput?: ((_v: string | null | undefined) => any) | undefined;
|
||||
"onUpdate:value"?: ((_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>;
|
||||
opcoesEntrada: (entrada: ComponenteEntrada) => any;
|
||||
adicionar: () => void;
|
||||
|
|
@ -520,5 +522,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
onSalvar?: ((_linhas: any[]) => any) | undefined;
|
||||
onLimpar?: (() => any) | undefined;
|
||||
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import { type PropType } from "vue";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
pagina: {
|
||||
type: NumberConstructor;
|
||||
|
|
@ -11,6 +14,20 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: NumberConstructor;
|
||||
required: false;
|
||||
};
|
||||
acoes: {
|
||||
type: PropType<Array<{
|
||||
icone?: any;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: (params?: any) => void;
|
||||
}>>;
|
||||
required: false;
|
||||
default: () => never[];
|
||||
};
|
||||
parametrosConsulta: {
|
||||
type: PropType<any>;
|
||||
required: false;
|
||||
};
|
||||
}>, {
|
||||
botoes: import("vue").ComputedRef<{
|
||||
label: string;
|
||||
|
|
@ -38,8 +55,27 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: NumberConstructor;
|
||||
required: false;
|
||||
};
|
||||
acoes: {
|
||||
type: PropType<Array<{
|
||||
icone?: any;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: (params?: any) => void;
|
||||
}>>;
|
||||
required: false;
|
||||
default: () => never[];
|
||||
};
|
||||
parametrosConsulta: {
|
||||
type: PropType<any>;
|
||||
required: false;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
onAlterar?: ((pagina: number) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
}>, {
|
||||
acoes: {
|
||||
icone?: any;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: (params?: any) => void;
|
||||
}[];
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import type { Component } from "vue";
|
||||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tipoComponenteCelula } from "../types-eli-tabela";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
celula: {
|
||||
type: PropType<tipoComponenteCelula>;
|
||||
|
|
@ -37,5 +39,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
required: true;
|
||||
};
|
||||
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
dados: {
|
||||
type: PropType<tiposTabelaCelulas["data"]>;
|
||||
|
|
@ -18,5 +20,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
required: false;
|
||||
};
|
||||
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
dados: {
|
||||
type: PropType<tiposTabelaCelulas["numero"]>;
|
||||
|
|
@ -17,5 +19,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: PropType<tiposTabelaCelulas["numero"]>;
|
||||
};
|
||||
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
dados: {
|
||||
type: PropType<tiposTabelaCelulas["tags"]>;
|
||||
|
|
@ -679,5 +681,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||
}>>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
dados: {
|
||||
type: PropType<tiposTabelaCelulas["textoSimples"]>;
|
||||
|
|
@ -14,5 +16,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: PropType<tiposTabelaCelulas["textoSimples"]>;
|
||||
};
|
||||
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
dados: {
|
||||
type: PropType<tiposTabelaCelulas["textoTruncado"]>;
|
||||
|
|
@ -14,5 +16,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
type: PropType<tiposTabelaCelulas["textoTruncado"]>;
|
||||
};
|
||||
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
2
dist/types/componentes/EliTabela/index.d.ts
vendored
2
dist/types/componentes/EliTabela/index.d.ts
vendored
|
|
@ -1,4 +1,4 @@
|
|||
export * from "./celulas/tiposTabelaCelulas";
|
||||
export { default as EliTabela } from "./EliTabela.vue";
|
||||
export * from "./types-eli-tabela";
|
||||
export * from "./celulas/tiposTabelaCelulas";
|
||||
export { celulaTabela } from "./types-eli-tabela";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
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";
|
||||
import type { operadores, zFiltro } from "p-comuns";
|
||||
import type { tipoResposta } from "p-respostas";
|
||||
import type { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
|
||||
import type { tiposTabelaCelulas, tipoTabelaCelula } from "./celulas/tiposTabelaCelulas";
|
||||
export type tipoFiltro = ReturnType<(typeof zFiltro)["parse"]>;
|
||||
export type tipoComponenteCelulaBase<T extends tipoTabelaCelula> = readonly [T, tiposTabelaCelulas[T]];
|
||||
export type tipoComponenteCelulaBase<T extends tipoTabelaCelula> = readonly [
|
||||
T,
|
||||
tiposTabelaCelulas[T]
|
||||
];
|
||||
export type tipoComponenteCelula = {
|
||||
[K in tipoTabelaCelula]: tipoComponenteCelulaBase<K>;
|
||||
}[tipoTabelaCelula];
|
||||
|
|
@ -48,6 +51,15 @@ export type tipoEliTabelaAcao<T> = {
|
|||
*/
|
||||
exibir?: boolean | ((linha: T) => Promise<boolean> | boolean);
|
||||
};
|
||||
export type parametrosConsulta<T> = {
|
||||
filtros?: tipoFiltro[];
|
||||
coluna_ordem?: keyof T;
|
||||
direcao_ordem?: "asc" | "desc";
|
||||
offSet?: number;
|
||||
limit?: number;
|
||||
/** Texto digitado na caixa de busca, quando habilitada. */
|
||||
texto_busca?: string;
|
||||
};
|
||||
/**
|
||||
* Estrutura de dados para uma tabela alimentada por uma consulta.
|
||||
*
|
||||
|
|
@ -68,15 +80,7 @@ export type tipoEliTabelaConsulta<T> = {
|
|||
* Função responsável por buscar os dados. Recebe parâmetros opcionais de
|
||||
* 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;
|
||||
limit?: number;
|
||||
/** Texto digitado na caixa de busca, quando habilitada. */
|
||||
texto_busca?: string;
|
||||
}) => Promise<tipoResposta<tipoEliConsultaPaginada<T>>>;
|
||||
consulta: (parametrosConsulta?: parametrosConsulta<T>) => Promise<tipoResposta<tipoEliConsultaPaginada<T>>>;
|
||||
/** Quantidade máxima de botões exibidos na paginação (padrão `7`). */
|
||||
maximo_botoes_paginacao?: number;
|
||||
/** Mensagem exibida quando a consulta retorna ok porém sem dados. */
|
||||
|
|
@ -88,6 +92,8 @@ export type tipoEliTabelaConsulta<T> = {
|
|||
* Seu uso mais comum será para criar novos registros, mas poderá ter outras utilidades.
|
||||
*/
|
||||
acoesTabela?: {
|
||||
/** superio será exibido a direita da caixa de busca, inferior a direita da paginação */
|
||||
posicao: "superior" | "inferior";
|
||||
/** Ícone (Lucide) exibido no botão */
|
||||
icone?: LucideIcon;
|
||||
/** Cor aplicada ao botão. */
|
||||
|
|
@ -95,7 +101,7 @@ export type tipoEliTabelaConsulta<T> = {
|
|||
/** Texto descritivo da ação. */
|
||||
rotulo: string;
|
||||
/** Função executada ao clicar no botão. */
|
||||
acao: () => void;
|
||||
acao: (parametrosConsulta?: parametrosConsulta<T>) => void;
|
||||
/**
|
||||
* Callback opcional para forçar atualização da consulta.
|
||||
* Observação: o componente `EliTabela` pode ignorar isso dependendo do modo de uso.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { BotaoTamanho, BotaoVariante } from "../../tipos";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
color: {
|
||||
type: StringConstructor;
|
||||
|
|
@ -49,5 +51,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
disabled: boolean;
|
||||
loading: boolean;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
24
dist/types/componentes/cartao/EliCartao.vue.d.ts
vendored
24
dist/types/componentes/cartao/EliCartao.vue.d.ts
vendored
|
|
@ -1,6 +1,17 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { CartaoStatus } from "../../tipos";
|
||||
type CartaoVariante = "outlined" | "flat" | "elevated" | "tonal";
|
||||
/**
|
||||
* EliCartao
|
||||
*
|
||||
* Um cartão de domínio para listas/pipelines (ex.: oportunidades/propostas) com:
|
||||
* - título
|
||||
* - status padronizado (novo/rascunho/vendido/cancelado)
|
||||
* - slot padrão para conteúdo
|
||||
* - slot opcional para ações
|
||||
*/
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
/** Título de fallback caso o slot `titulo` não seja usado. */
|
||||
titulo: {
|
||||
|
|
@ -135,14 +146,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
radius: import("../..").IndicadorPresetRaio | import("../..").CssLength;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
/**
|
||||
* EliCartao
|
||||
*
|
||||
* Um cartão de domínio para listas/pipelines (ex.: oportunidades/propostas) com:
|
||||
* - título
|
||||
* - status padronizado (novo/rascunho/vendido/cancelado)
|
||||
* - slot padrão para conteúdo
|
||||
* - slot opcional para ações
|
||||
*/
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { PropType } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
import type { CssLength, IndicadorLocalizacao, IndicadorOffset, IndicadorPresetRaio } from "../../tipos";
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
color: {
|
||||
type: StringConstructor;
|
||||
|
|
@ -83,5 +85,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|||
badge: string | number | undefined;
|
||||
radius: IndicadorPresetRaio | CssLength;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
||||
nome: import("vue").Ref<string, string>;
|
||||
email: import("vue").Ref<string, string>;
|
||||
|
|
@ -154,7 +156,7 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|||
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);
|
||||
emit: ((event: "input", _v: string | null | undefined) => void) & ((event: "update:value", _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>;
|
||||
|
|
@ -181,8 +183,8 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|||
required: true;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
|
||||
onInput?: ((_v: string | null | undefined) => any) | undefined;
|
||||
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
|
||||
onChange?: ((_v: string | null | undefined) => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
|
|
@ -190,5 +192,3 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|||
value: string | null | undefined;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
|
|
|
|||
6
dist/types/index.d.ts
vendored
6
dist/types/index.d.ts
vendored
|
|
@ -1,15 +1,15 @@
|
|||
import type { Plugin } from "vue";
|
||||
import "./styles/eli-vue-fonts.css";
|
||||
import { EliOlaMundo } from "./componentes/ola_mundo";
|
||||
import { EliBotao } from "./componentes/botao";
|
||||
import { EliBadge } from "./componentes/indicador";
|
||||
import { EliCartao } from "./componentes/cartao";
|
||||
import { EliBadge } from "./componentes/indicador";
|
||||
import { EliOlaMundo } from "./componentes/ola_mundo";
|
||||
export { EliOlaMundo };
|
||||
export { EliBotao };
|
||||
export { EliBadge };
|
||||
export { EliCartao };
|
||||
export * from "./componentes/EliTabela";
|
||||
export * from "./componentes/EliEntrada";
|
||||
export * from "./componentes/EliTabela";
|
||||
export * from "./tipos";
|
||||
declare const EliVue: Plugin;
|
||||
export default EliVue;
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "eli-vue",
|
||||
"version": "0.1.91",
|
||||
"version": "0.1.94",
|
||||
"private": false,
|
||||
"main": "./dist/eli-vue.umd.js",
|
||||
"module": "./dist/eli-vue.es.js",
|
||||
|
|
@ -13,17 +13,21 @@
|
|||
}
|
||||
},
|
||||
"scripts": {
|
||||
"biome": "pnpm exec biome check --write",
|
||||
"check": "pnpm run biome && npx tsc --noEmit",
|
||||
"prebuild": "npm version patch --no-git-tag-version",
|
||||
"build:types": "vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
|
||||
"build": "vite build && npm run build:types",
|
||||
"dev": "vite",
|
||||
"preview": "vite preview"
|
||||
"build": "pnpm run biome && vite build && npm run build:types",
|
||||
"dev": "pnpm run biome && pnpm run fechar && vite",
|
||||
"preview": "vite preview",
|
||||
"fechar": "fuser -k 5555/tcp || true"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.4.0",
|
||||
"vuetify": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "2.4.0",
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@vitejs/plugin-vue": "^5.0.0",
|
||||
"sass": "^1.94.2",
|
||||
|
|
|
|||
790
pnpm-lock.yaml
generated
790
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -23,28 +23,28 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import type { CampoDensidade, CampoVariante } from "../../tipos";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
import { dayjsbr } from "p-comuns"
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
import type { CampoDensidade, CampoVariante } from "../../tipos"
|
||||
import type { PadroesEntradas } from "./tiposEntradas"
|
||||
|
||||
type EntradaDataHora = PadroesEntradas["dataHora"];
|
||||
type EntradaDataHora = PadroesEntradas["dataHora"]
|
||||
|
||||
type PropsAntigas = {
|
||||
modo?: "data" | "dataHora";
|
||||
rotulo?: string;
|
||||
placeholder?: string;
|
||||
desabilitado?: boolean;
|
||||
limpavel?: boolean;
|
||||
erro?: boolean;
|
||||
mensagensErro?: string | string[];
|
||||
dica?: string;
|
||||
dicaPersistente?: boolean;
|
||||
densidade?: CampoDensidade;
|
||||
variante?: CampoVariante;
|
||||
min?: string;
|
||||
max?: string;
|
||||
};
|
||||
modo?: "data" | "dataHora"
|
||||
rotulo?: string
|
||||
placeholder?: string
|
||||
desabilitado?: boolean
|
||||
limpavel?: boolean
|
||||
erro?: boolean
|
||||
mensagensErro?: string | string[]
|
||||
dica?: string
|
||||
dicaPersistente?: boolean
|
||||
densidade?: CampoDensidade
|
||||
variante?: CampoVariante
|
||||
min?: string
|
||||
max?: string
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliEntradaDataHora",
|
||||
|
|
@ -66,7 +66,10 @@ export default defineComponent({
|
|||
type: String as PropType<string | null>,
|
||||
default: null,
|
||||
},
|
||||
modo: { type: String as PropType<PropsAntigas["modo"]>, default: undefined },
|
||||
modo: {
|
||||
type: String as PropType<PropsAntigas["modo"]>,
|
||||
default: undefined,
|
||||
},
|
||||
rotulo: { type: String, default: undefined },
|
||||
placeholder: { type: String, default: undefined },
|
||||
desabilitado: { type: Boolean, default: undefined },
|
||||
|
|
@ -100,7 +103,7 @@ export default defineComponent({
|
|||
setup(props, { emit, attrs }) {
|
||||
const opcoesEfetivas = computed<EntradaDataHora["opcoes"]>(() => {
|
||||
// 1) se veio `opcoes` (novo), usa
|
||||
if (props.opcoes) return props.opcoes;
|
||||
if (props.opcoes) return props.opcoes
|
||||
|
||||
// 2) fallback: constrói a partir das props antigas
|
||||
return {
|
||||
|
|
@ -116,86 +119,90 @@ export default defineComponent({
|
|||
variante: props.variante,
|
||||
min: props.min,
|
||||
max: props.max,
|
||||
};
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
const modoEfetivo = computed<"data" | "dataHora">(
|
||||
() => opcoesEfetivas.value.modo ?? "dataHora"
|
||||
);
|
||||
() => opcoesEfetivas.value.modo ?? "dataHora",
|
||||
)
|
||||
|
||||
const desabilitadoEfetivo = computed<boolean>(() => Boolean(props.desabilitado));
|
||||
const desabilitadoEfetivo = computed<boolean>(() =>
|
||||
Boolean(props.desabilitado),
|
||||
)
|
||||
|
||||
const tipoInput = computed<"date" | "datetime-local">(() =>
|
||||
modoEfetivo.value === "data" ? "date" : "datetime-local"
|
||||
);
|
||||
modoEfetivo.value === "data" ? "date" : "datetime-local",
|
||||
)
|
||||
|
||||
function isoParaInputDatetime(valorIso: string): string {
|
||||
if (modoEfetivo.value === "data") {
|
||||
return dayjs(valorIso).format("YYYY-MM-DD");
|
||||
return dayjsbr(valorIso).format("YYYY-MM-DD")
|
||||
}
|
||||
return dayjs(valorIso).format("YYYY-MM-DDTHH:mm");
|
||||
return dayjsbr(valorIso).format("YYYY-MM-DDTHH:mm")
|
||||
}
|
||||
|
||||
function inputDatetimeParaIsoLocal(valorInput: string): string {
|
||||
if (modoEfetivo.value === "data") {
|
||||
return dayjs(`${valorInput}T00:00`).format();
|
||||
return dayjsbr(`${valorInput}T00:00`).format()
|
||||
}
|
||||
return dayjs(valorInput).format();
|
||||
return dayjsbr(valorInput).format()
|
||||
}
|
||||
|
||||
const effectiveModelValue = computed<string | null>(() => {
|
||||
// Prioridade: value (novo) se vier definido; senão usa modelValue (antigo)
|
||||
return props.value !== undefined ? (props.value ?? null) : props.modelValue;
|
||||
});
|
||||
return props.value !== undefined
|
||||
? (props.value ?? null)
|
||||
: props.modelValue
|
||||
})
|
||||
|
||||
const valor = computed<string>({
|
||||
get: () => {
|
||||
if (!effectiveModelValue.value) return "";
|
||||
return isoParaInputDatetime(effectiveModelValue.value);
|
||||
if (!effectiveModelValue.value) return ""
|
||||
return isoParaInputDatetime(effectiveModelValue.value)
|
||||
},
|
||||
set: (v) => {
|
||||
const normalizado = v && v.length > 0 ? v : null;
|
||||
const normalizado = v && v.length > 0 ? v : null
|
||||
if (!normalizado) {
|
||||
emit("update:value", null);
|
||||
emit("input", null);
|
||||
emit("change", null);
|
||||
emit("update:value", null)
|
||||
emit("input", null)
|
||||
emit("change", null)
|
||||
|
||||
emit("update:modelValue", null);
|
||||
emit("alterar", null);
|
||||
return;
|
||||
emit("update:modelValue", null)
|
||||
emit("alterar", null)
|
||||
return
|
||||
}
|
||||
|
||||
const valorEmitido = inputDatetimeParaIsoLocal(normalizado);
|
||||
const valorEmitido = inputDatetimeParaIsoLocal(normalizado)
|
||||
|
||||
emit("update:value", valorEmitido);
|
||||
emit("input", valorEmitido);
|
||||
emit("change", valorEmitido);
|
||||
emit("update:value", valorEmitido)
|
||||
emit("input", valorEmitido)
|
||||
emit("change", valorEmitido)
|
||||
|
||||
emit("update:modelValue", valorEmitido);
|
||||
emit("alterar", valorEmitido);
|
||||
emit("update:modelValue", valorEmitido)
|
||||
emit("alterar", valorEmitido)
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const minLocal = computed<string | undefined>(() => {
|
||||
const min = opcoesEfetivas.value.min;
|
||||
if (!min) return undefined;
|
||||
return isoParaInputDatetime(min);
|
||||
});
|
||||
const min = opcoesEfetivas.value.min
|
||||
if (!min) return undefined
|
||||
return isoParaInputDatetime(min)
|
||||
})
|
||||
|
||||
const maxLocal = computed<string | undefined>(() => {
|
||||
const max = opcoesEfetivas.value.max;
|
||||
if (!max) return undefined;
|
||||
return isoParaInputDatetime(max);
|
||||
});
|
||||
const max = opcoesEfetivas.value.max
|
||||
if (!max) return undefined
|
||||
return isoParaInputDatetime(max)
|
||||
})
|
||||
|
||||
function emitCompatFocus() {
|
||||
emit("foco");
|
||||
emit("focus");
|
||||
emit("foco")
|
||||
emit("focus")
|
||||
}
|
||||
|
||||
function emitCompatBlur() {
|
||||
emit("desfoco");
|
||||
emit("blur");
|
||||
emit("desfoco")
|
||||
emit("blur")
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -208,9 +215,9 @@ export default defineComponent({
|
|||
desabilitadoEfetivo,
|
||||
emitCompatFocus,
|
||||
emitCompatBlur,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -25,87 +25,90 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref, watch } from "vue";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
import { computed, defineComponent, type PropType, ref, watch } from "vue"
|
||||
import type { PadroesEntradas } from "./tiposEntradas"
|
||||
|
||||
type EntradaNumero = PadroesEntradas["numero"];
|
||||
type EntradaNumero = PadroesEntradas["numero"]
|
||||
|
||||
function casasDecimaisFromPrecisao(precisao: number): number {
|
||||
if (!Number.isFinite(precisao) || precisao <= 0) return 0;
|
||||
if (precisao >= 1) return 0;
|
||||
if (!Number.isFinite(precisao) || precisao <= 0) return 0
|
||||
if (precisao >= 1) return 0
|
||||
|
||||
// Preferência por contar casas decimais na representação (ex.: 0.01 -> 2)
|
||||
const texto = precisao.toString();
|
||||
const texto = precisao.toString()
|
||||
if (texto.includes("e-")) {
|
||||
const [, exp] = texto.split("e-");
|
||||
const n = Number(exp);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
const [, exp] = texto.split("e-")
|
||||
const n = Number(exp)
|
||||
return Number.isFinite(n) ? n : 0
|
||||
}
|
||||
const idx = texto.indexOf(".");
|
||||
if (idx === -1) return 0;
|
||||
const dec = texto.slice(idx + 1).replace(/0+$/, "");
|
||||
return dec.length;
|
||||
const idx = texto.indexOf(".")
|
||||
if (idx === -1) return 0
|
||||
const dec = texto.slice(idx + 1).replace(/0+$/, "")
|
||||
return dec.length
|
||||
}
|
||||
|
||||
function parseNumero(texto: string): number | null {
|
||||
const normalizado = (texto ?? "").trim().replace(/,/g, ".");
|
||||
if (!normalizado) return null;
|
||||
const n = Number(normalizado);
|
||||
if (Number.isNaN(n)) return null;
|
||||
return n;
|
||||
const normalizado = (texto ?? "").trim().replace(/,/g, ".")
|
||||
if (!normalizado) return null
|
||||
const n = Number(normalizado)
|
||||
if (Number.isNaN(n)) return null
|
||||
return n
|
||||
}
|
||||
|
||||
function formatarNumero(value: number | null | undefined, casas: number | null) {
|
||||
if (value === null || value === undefined) return "";
|
||||
if (casas === null) return String(value);
|
||||
function formatarNumero(
|
||||
value: number | null | undefined,
|
||||
casas: number | null,
|
||||
) {
|
||||
if (value === null || value === undefined) return ""
|
||||
if (casas === null) return String(value)
|
||||
|
||||
// Garantimos que o texto visual corresponda ao value (fixed).
|
||||
const fixed = Number(value).toFixed(Math.max(0, casas));
|
||||
const fixed = Number(value).toFixed(Math.max(0, casas))
|
||||
// Exibe com vírgula (pt-BR)
|
||||
return fixed.replace(/\./g, ",");
|
||||
return fixed.replace(/\./g, ",")
|
||||
}
|
||||
|
||||
function somenteNumeros(texto: string) {
|
||||
return (texto ?? "").replace(/\D+/g, "");
|
||||
return (texto ?? "").replace(/\D+/g, "")
|
||||
}
|
||||
|
||||
function somenteNumerosESeparadorDecimal(texto: string) {
|
||||
// Mantém apenas números e UM separador decimal ("," ou "."), sem sinais.
|
||||
// Implementação baseada em regex + colapso de separadores.
|
||||
const limpo = (texto ?? "").replace(/[^0-9.,]+/g, "");
|
||||
const matchSep = limpo.match(/[.,]/);
|
||||
if (!matchSep) return limpo;
|
||||
const limpo = (texto ?? "").replace(/[^0-9.,]+/g, "")
|
||||
const matchSep = limpo.match(/[.,]/)
|
||||
if (!matchSep) return limpo
|
||||
|
||||
const sep = matchSep[0];
|
||||
const idx = limpo.indexOf(sep);
|
||||
const antesRaw = limpo.slice(0, idx).replace(/[.,]/g, "");
|
||||
const depois = limpo.slice(idx + 1).replace(/[.,]/g, "");
|
||||
const sep = matchSep[0]
|
||||
const idx = limpo.indexOf(sep)
|
||||
const antesRaw = limpo.slice(0, idx).replace(/[.,]/g, "")
|
||||
const depois = limpo.slice(idx + 1).replace(/[.,]/g, "")
|
||||
|
||||
// Se o usuário começa pelo separador (",4"), normalizamos para "0,4".
|
||||
const antes = antesRaw.length ? antesRaw : "0";
|
||||
return `${antes}${sep}${depois}`;
|
||||
const antes = antesRaw.length ? antesRaw : "0"
|
||||
return `${antes}${sep}${depois}`
|
||||
}
|
||||
|
||||
function limitarCasasDecimais(texto: string, casas: number | null) {
|
||||
if (casas === null) return texto;
|
||||
if (casas <= 0) return texto.replace(/[.,]/g, "");
|
||||
if (casas === null) return texto
|
||||
if (casas <= 0) return texto.replace(/[.,]/g, "")
|
||||
|
||||
const matchSep = texto.match(/[.,]/);
|
||||
if (!matchSep) return texto;
|
||||
const sep = matchSep[0];
|
||||
const idx = texto.indexOf(sep);
|
||||
const matchSep = texto.match(/[.,]/)
|
||||
if (!matchSep) return texto
|
||||
const sep = matchSep[0]
|
||||
const idx = texto.indexOf(sep)
|
||||
|
||||
const inteiro = texto.slice(0, idx);
|
||||
const frac = texto.slice(idx + 1);
|
||||
return `${inteiro}${sep}${frac.slice(0, casas)}`;
|
||||
const inteiro = texto.slice(0, idx)
|
||||
const frac = texto.slice(idx + 1)
|
||||
return `${inteiro}${sep}${frac.slice(0, casas)}`
|
||||
}
|
||||
|
||||
function valorParcialDecimal(texto: string): number | null {
|
||||
// Regra (B): se o usuário digitou "1," ou "1." emite 1.
|
||||
const m = texto.match(/^(\d+)[.,]$/);
|
||||
if (!m) return null;
|
||||
const n = Number(m[1]);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
const m = texto.match(/^(\d+)[.,]$/)
|
||||
if (!m) return null
|
||||
const n = Number(m[1])
|
||||
return Number.isNaN(n) ? null : n
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -133,25 +136,25 @@ export default defineComponent({
|
|||
setup(props, { attrs, emit }) {
|
||||
// Se `precisao` não existir => não limitamos casas (mas ainda bloqueamos caracteres inválidos).
|
||||
const casasDecimais = computed<number | null>(() => {
|
||||
const p = props.opcoes?.precisao;
|
||||
if (p === undefined || p === null) return null;
|
||||
return casasDecimaisFromPrecisao(p);
|
||||
});
|
||||
const p = props.opcoes?.precisao
|
||||
if (p === undefined || p === null) return null
|
||||
return casasDecimaisFromPrecisao(p)
|
||||
})
|
||||
|
||||
const isInteiro = computed(() => {
|
||||
// quando não existe precisão, tratamos como decimal livre
|
||||
return casasDecimais.value === 0;
|
||||
});
|
||||
return casasDecimais.value === 0
|
||||
})
|
||||
|
||||
const isFixedPoint = computed(() => {
|
||||
// Quando precisao existe e é < 1, controlamos a vírgula automaticamente.
|
||||
const casas = casasDecimais.value;
|
||||
return casas !== null && casas > 0;
|
||||
});
|
||||
const casas = casasDecimais.value
|
||||
return casas !== null && casas > 0
|
||||
})
|
||||
|
||||
// Controle do texto exibido: impede o campo de ficar com caracteres inválidos.
|
||||
const displayValue = ref<string>("");
|
||||
const ultimoEmitido = ref<EntradaNumero["value"] | undefined>(undefined);
|
||||
const displayValue = ref<string>("")
|
||||
const ultimoEmitido = ref<EntradaNumero["value"] | undefined>(undefined)
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
|
|
@ -159,63 +162,71 @@ export default defineComponent({
|
|||
// Se foi uma atualização resultante do que acabamos de emitir, não sobrescreve.
|
||||
// Isso evita o efeito de "apagar" o texto ao digitar algo parcial (ex.: "1,")
|
||||
// quando o valor emitido é `1` ou `null`.
|
||||
if (v === ultimoEmitido.value) return;
|
||||
|
||||
displayValue.value = formatarNumero(v as any, casasDecimais.value);
|
||||
ultimoEmitido.value = v;
|
||||
if (v === ultimoEmitido.value) return
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic format
|
||||
displayValue.value = formatarNumero(v as any, casasDecimais.value)
|
||||
ultimoEmitido.value = v
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function onUpdateModelValue(texto: string) {
|
||||
// Modo fixed-point: usuário digita números continuamente e a vírgula é inserida automaticamente.
|
||||
if (isFixedPoint.value) {
|
||||
const casas = casasDecimais.value ?? 0;
|
||||
const digitos = somenteNumeros(texto);
|
||||
const casas = casasDecimais.value ?? 0
|
||||
const digitos = somenteNumeros(texto)
|
||||
// ex.: casas=2, "1" => 0.01 ; "123" => 1.23
|
||||
const baseInt = digitos ? Number(digitos) : 0;
|
||||
const divisor = Math.pow(10, casas);
|
||||
const n = digitos ? baseInt / divisor : null;
|
||||
const baseInt = digitos ? Number(digitos) : 0
|
||||
const divisor = 10 ** casas
|
||||
const n = digitos ? baseInt / divisor : null
|
||||
|
||||
const out = (n === null ? null : n) as EntradaNumero["value"];
|
||||
ultimoEmitido.value = out;
|
||||
emit("update:value", out);
|
||||
emit("input", out);
|
||||
emit("change", out);
|
||||
const out = (n === null ? null : n) as EntradaNumero["value"]
|
||||
ultimoEmitido.value = out
|
||||
emit("update:value", out)
|
||||
emit("input", out)
|
||||
emit("change", out)
|
||||
|
||||
// display deve ser sempre o reflexo do value
|
||||
displayValue.value = formatarNumero(out as any, casas);
|
||||
return;
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic format
|
||||
displayValue.value = formatarNumero(out as any, casas)
|
||||
return
|
||||
}
|
||||
|
||||
// Modo livre (sem precisao) ou inteiro: aceita números e 1 separador (no caso livre)
|
||||
const base = isInteiro.value ? somenteNumeros(texto) : somenteNumerosESeparadorDecimal(texto);
|
||||
const textoFiltrado = isInteiro.value ? base : limitarCasasDecimais(base, casasDecimais.value);
|
||||
const base = isInteiro.value
|
||||
? somenteNumeros(texto)
|
||||
: somenteNumerosESeparadorDecimal(texto)
|
||||
const textoFiltrado = isInteiro.value
|
||||
? base
|
||||
: limitarCasasDecimais(base, casasDecimais.value)
|
||||
|
||||
// Emissão:
|
||||
// - vazio => null
|
||||
// - decimal parcial ("1,") => 1 (regra B)
|
||||
// - caso geral => parse normal
|
||||
let out: EntradaNumero["value"] = null;
|
||||
let out: EntradaNumero["value"] = null
|
||||
if (textoFiltrado) {
|
||||
const parcial = isInteiro.value ? null : valorParcialDecimal(textoFiltrado);
|
||||
const n = parcial ?? parseNumero(textoFiltrado);
|
||||
out = (n === null ? null : n) as EntradaNumero["value"];
|
||||
const parcial = isInteiro.value
|
||||
? null
|
||||
: valorParcialDecimal(textoFiltrado)
|
||||
const n = parcial ?? parseNumero(textoFiltrado)
|
||||
out = (n === null ? null : n) as EntradaNumero["value"]
|
||||
}
|
||||
|
||||
ultimoEmitido.value = out;
|
||||
ultimoEmitido.value = out
|
||||
|
||||
emit("update:value", out);
|
||||
emit("input", out);
|
||||
emit("change", out);
|
||||
emit("update:value", out)
|
||||
emit("input", out)
|
||||
emit("change", out)
|
||||
|
||||
// display deve sempre corresponder ao value final
|
||||
displayValue.value = formatarNumero(out as any, casasDecimais.value);
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic format
|
||||
displayValue.value = formatarNumero(out as any, casasDecimais.value)
|
||||
}
|
||||
|
||||
return { attrs, emit, displayValue, isInteiro, onUpdateModelValue };
|
||||
return { attrs, emit, displayValue, isInteiro, onUpdateModelValue }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import { VTextarea } from "vuetify/components";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
import { VTextarea } from "vuetify/components"
|
||||
import type { PadroesEntradas } from "./tiposEntradas"
|
||||
|
||||
type EntradaParagrafo = PadroesEntradas["paragrafo"];
|
||||
type EntradaParagrafo = PadroesEntradas["paragrafo"]
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliEntradaParagrafo",
|
||||
|
|
@ -52,15 +52,15 @@ export default defineComponent({
|
|||
const localValue = computed<EntradaParagrafo["value"]>({
|
||||
get: () => props.value,
|
||||
set: (v) => {
|
||||
emit("update:value", v);
|
||||
emit("input", v);
|
||||
emit("change", v);
|
||||
emit("update:value", v)
|
||||
emit("input", v)
|
||||
emit("change", v)
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
return { attrs, emit, localValue, opcoes: props.opcoes };
|
||||
return { attrs, emit, localValue }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -23,12 +23,19 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
|
||||
import { VSelect } from "vuetify/components";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
onMounted,
|
||||
type PropType,
|
||||
ref,
|
||||
watch,
|
||||
} from "vue"
|
||||
import { VSelect } from "vuetify/components"
|
||||
import type { PadroesEntradas } from "./tiposEntradas"
|
||||
|
||||
type EntradaSelecao = PadroesEntradas["selecao"];
|
||||
type ItemSelecao = { chave: string; rotulo: string };
|
||||
type EntradaSelecao = PadroesEntradas["selecao"]
|
||||
type ItemSelecao = { chave: string; rotulo: string }
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliEntradaSelecao",
|
||||
|
|
@ -52,29 +59,29 @@ export default defineComponent({
|
|||
blur: () => true,
|
||||
},
|
||||
setup(props, { attrs, emit }) {
|
||||
const itens = ref<ItemSelecao[]>([]);
|
||||
const carregando = ref(false);
|
||||
const itens = ref<ItemSelecao[]>([])
|
||||
const carregando = ref(false)
|
||||
|
||||
const localValue = computed<EntradaSelecao["value"]>({
|
||||
get: () => props.value,
|
||||
set: (v) => {
|
||||
emit("update:value", v);
|
||||
emit("input", v);
|
||||
emit("change", v);
|
||||
emit("update:value", v)
|
||||
emit("input", v)
|
||||
emit("change", v)
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
async function carregarItens() {
|
||||
carregando.value = true;
|
||||
carregando.value = true
|
||||
try {
|
||||
const resultado = await props.opcoes.itens();
|
||||
const lista = Array.isArray(resultado) ? resultado : [];
|
||||
const resultado = await props.opcoes.itens()
|
||||
const lista = Array.isArray(resultado) ? resultado : []
|
||||
|
||||
// Força reatividade mesmo quando Vuetify mantém cache interno.
|
||||
// (garante que `items` mude de referência)
|
||||
itens.value = [...lista];
|
||||
itens.value = [...lista]
|
||||
} finally {
|
||||
carregando.value = false;
|
||||
carregando.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,27 +89,27 @@ export default defineComponent({
|
|||
watch(
|
||||
() => props.opcoes.itens,
|
||||
() => {
|
||||
void carregarItens();
|
||||
}
|
||||
);
|
||||
void carregarItens()
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
void carregarItens();
|
||||
});
|
||||
void carregarItens()
|
||||
})
|
||||
|
||||
// Debug (playground): ajuda a identificar se os itens chegaram.
|
||||
watch(
|
||||
itens,
|
||||
(v) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.debug("[EliEntradaSelecao] itens:", v);
|
||||
console.debug("[EliEntradaSelecao] itens:", v)
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
return { attrs, emit, localValue, opcoes: props.opcoes, itens, carregando };
|
||||
return { attrs, emit, localValue, itens, carregando }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -15,13 +15,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
import { formatarCpfCnpj } from "./utils/cpfCnpj";
|
||||
import { formatTelefone } from "./utils/telefone";
|
||||
import { formatarCep } from "./utils/cep";
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
import type { PadroesEntradas } from "./tiposEntradas"
|
||||
import { formatarCep } from "./utils/cep"
|
||||
import { formatarCpfCnpj } from "./utils/cpfCnpj"
|
||||
import { formatTelefone } from "./utils/telefone"
|
||||
|
||||
type EntradaTexto = PadroesEntradas["texto"];
|
||||
type EntradaTexto = PadroesEntradas["texto"]
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliEntradaTexto",
|
||||
|
|
@ -46,56 +46,57 @@ export default defineComponent({
|
|||
blur: () => true,
|
||||
},
|
||||
setup(props, { attrs, emit }) {
|
||||
const formato = computed(() => props.opcoes?.formato ?? "texto");
|
||||
const formato = computed(() => props.opcoes?.formato ?? "texto")
|
||||
|
||||
const localValue = computed<EntradaTexto["value"]>({
|
||||
get: () => props.value,
|
||||
set: (v) => {
|
||||
emit("update:value", v);
|
||||
emit("input", v);
|
||||
emit("change", v);
|
||||
emit("update:value", v)
|
||||
emit("input", v)
|
||||
emit("change", v)
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const inputHtmlType = computed(() => {
|
||||
if (formato.value === "email") return "email";
|
||||
if (formato.value === "url") return "url";
|
||||
return "text";
|
||||
});
|
||||
if (formato.value === "email") return "email"
|
||||
if (formato.value === "url") return "url"
|
||||
return "text"
|
||||
})
|
||||
|
||||
const inputMode = computed<string | undefined>(() => {
|
||||
if (formato.value === "telefone") return "tel";
|
||||
if (formato.value === "cpfCnpj" || formato.value === "cep") return "numeric";
|
||||
return undefined;
|
||||
});
|
||||
if (formato.value === "telefone") return "tel"
|
||||
if (formato.value === "cpfCnpj" || formato.value === "cep")
|
||||
return "numeric"
|
||||
return undefined
|
||||
})
|
||||
|
||||
function aplicarFormato(valor: string) {
|
||||
switch (formato.value) {
|
||||
case "telefone":
|
||||
return formatTelefone(valor);
|
||||
return formatTelefone(valor)
|
||||
case "cpfCnpj":
|
||||
return formatarCpfCnpj(valor);
|
||||
return formatarCpfCnpj(valor)
|
||||
case "cep":
|
||||
return formatarCep(valor);
|
||||
return formatarCep(valor)
|
||||
default:
|
||||
return valor;
|
||||
return valor
|
||||
}
|
||||
}
|
||||
|
||||
function onInput(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const resultado = aplicarFormato(target.value);
|
||||
const target = e.target as HTMLInputElement
|
||||
const resultado = aplicarFormato(target.value)
|
||||
|
||||
// garante que o input mostre o valor formatado
|
||||
target.value = resultado;
|
||||
target.value = resultado
|
||||
|
||||
// regra do projeto: value sempre igual ao que aparece
|
||||
localValue.value = resultado;
|
||||
localValue.value = resultado
|
||||
}
|
||||
|
||||
return { attrs, emit, localValue, inputHtmlType, inputMode, onInput };
|
||||
return { attrs, emit, localValue, inputHtmlType, inputMode, onInput }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||
import EliEntradaParagrafo from "./EliEntradaParagrafo.vue";
|
||||
import EliEntradaSelecao from "./EliEntradaSelecao.vue";
|
||||
import EliEntradaDataHora from "./EliEntradaDataHora.vue"
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue"
|
||||
import EliEntradaParagrafo from "./EliEntradaParagrafo.vue"
|
||||
import EliEntradaSelecao from "./EliEntradaSelecao.vue"
|
||||
import EliEntradaTexto from "./EliEntradaTexto.vue"
|
||||
|
||||
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora, EliEntradaParagrafo, EliEntradaSelecao };
|
||||
export type { PadroesEntradas, TipoEntrada } from "./tiposEntradas";
|
||||
export {
|
||||
EliEntradaTexto,
|
||||
EliEntradaNumero,
|
||||
EliEntradaDataHora,
|
||||
EliEntradaParagrafo,
|
||||
EliEntradaSelecao,
|
||||
}
|
||||
export type { PadroesEntradas, TipoEntrada } from "./tiposEntradas"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
import type { Component } from "vue";
|
||||
import type { Component } from "vue"
|
||||
import EliEntradaDataHora from "./EliEntradaDataHora.vue"
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue"
|
||||
import EliEntradaParagrafo from "./EliEntradaParagrafo.vue"
|
||||
import EliEntradaSelecao from "./EliEntradaSelecao.vue"
|
||||
import EliEntradaTexto from "./EliEntradaTexto.vue"
|
||||
|
||||
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||
import EliEntradaParagrafo from "./EliEntradaParagrafo.vue";
|
||||
import EliEntradaSelecao from "./EliEntradaSelecao.vue";
|
||||
|
||||
import type { TipoEntrada } from "./tiposEntradas";
|
||||
import type { TipoEntrada } from "./tiposEntradas"
|
||||
|
||||
export const registryTabelaCelulas = {
|
||||
texto: EliEntradaTexto,
|
||||
|
|
@ -14,4 +13,4 @@ export const registryTabelaCelulas = {
|
|||
dataHora: EliEntradaDataHora,
|
||||
paragrafo: EliEntradaParagrafo,
|
||||
selecao: EliEntradaSelecao,
|
||||
} as const satisfies Record<TipoEntrada, Component>;
|
||||
} as const satisfies Record<TipoEntrada, Component>
|
||||
|
|
|
|||
|
|
@ -59,8 +59,6 @@ export type PadroesEntradas = {
|
|||
numero: tipoPadraoEntrada<
|
||||
number | null | undefined,
|
||||
{
|
||||
|
||||
|
||||
/** Unidade de medida (ex.: "kg", "m³") */
|
||||
sufixo?: string
|
||||
|
||||
|
|
@ -187,12 +185,11 @@ export type PadroesEntradas = {
|
|||
*/
|
||||
export type TipoEntrada = keyof PadroesEntradas
|
||||
|
||||
|
||||
|
||||
|
||||
export type PadraoComponenteEntrada<T extends TipoEntrada> =
|
||||
readonly [T, PadroesEntradas[T]['opcoes']]
|
||||
export type PadraoComponenteEntrada<T extends TipoEntrada> = readonly [
|
||||
T,
|
||||
PadroesEntradas[T]["opcoes"],
|
||||
]
|
||||
|
||||
export type ComponenteEntrada = {
|
||||
[K in TipoEntrada]: PadraoComponenteEntrada<K>
|
||||
}[TipoEntrada]
|
||||
}[TipoEntrada]
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
function somenteNumeros(valor: string) {
|
||||
return valor.replace(/\D+/g, "");
|
||||
return valor.replace(/\D+/g, "")
|
||||
}
|
||||
|
||||
/** Formata CEP no padrão 00000-000 */
|
||||
export function formatarCep(valor: string) {
|
||||
const digitos = somenteNumeros(valor);
|
||||
if (!digitos) return "";
|
||||
return digitos.replace(/^(\d{5})(\d)/, "$1-$2").slice(0, 9);
|
||||
const digitos = somenteNumeros(valor)
|
||||
if (!digitos) return ""
|
||||
return digitos.replace(/^(\d{5})(\d)/, "$1-$2").slice(0, 9)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
function somenteNumeros(v: string): string {
|
||||
return v.replace(/\D+/g, "");
|
||||
return v.replace(/\D+/g, "")
|
||||
}
|
||||
|
||||
export function formatarCpfCnpj(v: string): string {
|
||||
const d = somenteNumeros(v);
|
||||
const d = somenteNumeros(v)
|
||||
|
||||
// CPF
|
||||
if (d.length <= 11) {
|
||||
|
|
@ -11,7 +11,7 @@ export function formatarCpfCnpj(v: string): string {
|
|||
.replace(/(\d{3})(\d)/, "$1.$2")
|
||||
.replace(/(\d{3})(\d)/, "$1.$2")
|
||||
.replace(/(\d{3})(\d{1,2})$/, "$1-$2")
|
||||
.slice(0, 14);
|
||||
.slice(0, 14)
|
||||
}
|
||||
|
||||
// CNPJ
|
||||
|
|
@ -20,5 +20,5 @@ export function formatarCpfCnpj(v: string): string {
|
|||
.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")
|
||||
.replace(/\.(\d{3})(\d)/, ".$1/$2")
|
||||
.replace(/(\d{4})(\d)/, "$1-$2")
|
||||
.slice(0, 18);
|
||||
.slice(0, 18)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,28 +2,28 @@
|
|||
* Remove tudo que não é número
|
||||
*/
|
||||
export function sanitizeTelefone(value: string): string {
|
||||
return value.replace(/\D+/g, "");
|
||||
return value.replace(/\D+/g, "")
|
||||
}
|
||||
|
||||
/**
|
||||
* Aplica máscara dinâmica de telefone BR
|
||||
*/
|
||||
export function formatTelefone(value: string): string {
|
||||
const digits = sanitizeTelefone(value);
|
||||
const digits = sanitizeTelefone(value)
|
||||
|
||||
if (!digits) return "";
|
||||
if (!digits) return ""
|
||||
|
||||
// (99) 9999-9999
|
||||
if (digits.length <= 10) {
|
||||
return digits
|
||||
.replace(/^(\d{2})(\d)/, "($1) $2")
|
||||
.replace(/(\d{4})(\d)/, "$1-$2")
|
||||
.slice(0, 14);
|
||||
.slice(0, 14)
|
||||
}
|
||||
|
||||
// (99) 99999-9999
|
||||
return digits
|
||||
.replace(/^(\d{2})(\d)/, "($1) $2")
|
||||
.replace(/(\d{5})(\d)/, "$1-$2")
|
||||
.slice(0, 15);
|
||||
.slice(0, 15)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,6 +147,31 @@
|
|||
z-index: 200;
|
||||
}
|
||||
|
||||
.eli-tabela__rodape {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.eli-tabela__paginacao {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.eli-tabela__acoes-inferiores {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.eli-tabela__cabecalho {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -73,11 +73,11 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import { ChevronDown, ChevronRight, MoreVertical } from "lucide-vue-next";
|
||||
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
|
||||
import EliTabelaDetalhesLinha from "./EliTabelaDetalhesLinha.vue";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
import { ChevronDown, ChevronRight, MoreVertical } from "lucide-vue-next"
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue"
|
||||
import EliTabelaDetalhesLinha from "./EliTabelaDetalhesLinha.vue"
|
||||
import type { tipoEliColuna } from "./types-eli-tabela"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaBody",
|
||||
|
|
@ -90,10 +90,12 @@ export default defineComponent({
|
|||
},
|
||||
props: {
|
||||
colunas: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic column
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
colunasInvisiveis: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic column
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -134,7 +136,7 @@ export default defineComponent({
|
|||
return {
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
type="button"
|
||||
class="eli-tabela__acoes-cabecalho-botao"
|
||||
:style="botao.cor ? { backgroundColor: botao.cor, color: '#fff' } : undefined"
|
||||
@click="botao.acao"
|
||||
@click="botao.acao(parametrosConsulta)"
|
||||
>
|
||||
<component
|
||||
v-if="botao.icone"
|
||||
|
|
@ -46,8 +46,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import EliTabelaCaixaDeBusca from "./EliTabelaCaixaDeBusca.vue";
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
import EliTabelaCaixaDeBusca from "./EliTabelaCaixaDeBusca.vue"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCabecalho",
|
||||
|
|
@ -71,13 +71,20 @@ export default defineComponent({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
parametrosConsulta: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic params
|
||||
type: Object as PropType<any>,
|
||||
required: false,
|
||||
},
|
||||
acoesCabecalho: {
|
||||
type: Array as PropType<
|
||||
Array<{
|
||||
icone?: any;
|
||||
cor?: string;
|
||||
rotulo: string;
|
||||
acao: () => void;
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic icon
|
||||
icone?: any
|
||||
cor?: string
|
||||
rotulo: string
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic action
|
||||
acao: (params?: any) => void
|
||||
}>
|
||||
>,
|
||||
required: true,
|
||||
|
|
@ -85,33 +92,33 @@ export default defineComponent({
|
|||
},
|
||||
emits: {
|
||||
buscar(valor: string) {
|
||||
return typeof valor === "string";
|
||||
return typeof valor === "string"
|
||||
},
|
||||
colunas() {
|
||||
return true;
|
||||
return true
|
||||
},
|
||||
filtroAvancado() {
|
||||
return true;
|
||||
return true
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const temAcoesCabecalho = computed(() => props.acoesCabecalho.length > 0);
|
||||
const temAcoesCabecalho = computed(() => props.acoesCabecalho.length > 0)
|
||||
|
||||
function emitBuscar(texto: string) {
|
||||
emit("buscar", texto);
|
||||
emit("buscar", texto)
|
||||
}
|
||||
|
||||
function emitColunas() {
|
||||
emit("colunas");
|
||||
emit("colunas")
|
||||
}
|
||||
|
||||
function emitFiltroAvancado() {
|
||||
emit("filtroAvancado");
|
||||
emit("filtroAvancado")
|
||||
}
|
||||
|
||||
return { temAcoesCabecalho, emitBuscar, emitColunas, emitFiltroAvancado };
|
||||
return { temAcoesCabecalho, emitBuscar, emitColunas, emitFiltroAvancado }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watch } from "vue";
|
||||
import { Search } from "lucide-vue-next";
|
||||
import { Search } from "lucide-vue-next"
|
||||
import { defineComponent, ref, watch } from "vue"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCaixaDeBusca",
|
||||
|
|
@ -38,7 +38,7 @@ export default defineComponent({
|
|||
},
|
||||
emits: {
|
||||
buscar(valor: string) {
|
||||
return typeof valor === "string";
|
||||
return typeof valor === "string"
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
|
|
@ -46,24 +46,24 @@ export default defineComponent({
|
|||
* Estado local da entrada para que o usuário possa digitar livremente antes
|
||||
* de disparar uma nova consulta.
|
||||
*/
|
||||
const texto = ref(props.modelo ?? "");
|
||||
const texto = ref(props.modelo ?? "")
|
||||
|
||||
watch(
|
||||
() => props.modelo,
|
||||
(novo) => {
|
||||
if (novo !== undefined && novo !== texto.value) {
|
||||
texto.value = novo;
|
||||
texto.value = novo
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
)
|
||||
|
||||
function emitirBusca() {
|
||||
emit("buscar", texto.value.trim());
|
||||
emit("buscar", texto.value.trim())
|
||||
}
|
||||
|
||||
return { texto, emitirBusca };
|
||||
return { texto, emitirBusca }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaDebug",
|
||||
|
|
@ -30,5 +30,5 @@ export default defineComponent({
|
|||
required: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue"
|
||||
import type { tipoEliColuna } from "./types-eli-tabela"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaDetalhesLinha",
|
||||
|
|
@ -23,11 +23,12 @@ export default defineComponent({
|
|||
required: true,
|
||||
},
|
||||
colunasInvisiveis: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic column
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaEstados",
|
||||
|
|
@ -36,5 +36,5 @@ export default defineComponent({
|
|||
default: undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -49,15 +49,16 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import { ArrowDown, ArrowUp } from "lucide-vue-next";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
import { ArrowDown, ArrowUp } from "lucide-vue-next"
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
import type { tipoEliColuna } from "./types-eli-tabela"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaHead",
|
||||
components: { ArrowUp, ArrowDown },
|
||||
props: {
|
||||
colunas: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic column
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -80,16 +81,17 @@ export default defineComponent({
|
|||
},
|
||||
emits: {
|
||||
alternarOrdenacao(chave: string) {
|
||||
return typeof chave === "string" && chave.length > 0;
|
||||
return typeof chave === "string" && chave.length > 0
|
||||
},
|
||||
},
|
||||
setup(_props, { emit }) {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic column
|
||||
function isOrdenavel(coluna: any) {
|
||||
return coluna?.coluna_ordem !== undefined && coluna?.coluna_ordem !== null;
|
||||
return coluna?.coluna_ordem !== undefined && coluna?.coluna_ordem !== null
|
||||
}
|
||||
|
||||
function emitAlternarOrdenacao(chave: string) {
|
||||
emit("alternarOrdenacao", chave);
|
||||
emit("alternarOrdenacao", chave)
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -97,7 +99,7 @@ export default defineComponent({
|
|||
ArrowDown,
|
||||
isOrdenavel,
|
||||
emitAlternarOrdenacao,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -43,14 +43,14 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref } from "vue";
|
||||
import type { tipoEliTabelaAcao } from "./types-eli-tabela";
|
||||
import { computed, defineComponent, type PropType, ref } from "vue"
|
||||
import type { tipoEliTabelaAcao } from "./types-eli-tabela"
|
||||
|
||||
type ItemAcao<T> = {
|
||||
acao: tipoEliTabelaAcao<T>;
|
||||
indice: number;
|
||||
visivel: boolean;
|
||||
};
|
||||
acao: tipoEliTabelaAcao<T>
|
||||
indice: number
|
||||
visivel: boolean
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaMenuAcoes",
|
||||
|
|
@ -64,6 +64,7 @@ export default defineComponent({
|
|||
required: true,
|
||||
},
|
||||
acoes: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic typing needed
|
||||
type: Array as PropType<Array<ItemAcao<any>>>,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -74,22 +75,24 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
emits: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic typing needed
|
||||
executar(payload: { acao: tipoEliTabelaAcao<any>; linha: unknown }) {
|
||||
return payload !== null && typeof payload === "object";
|
||||
return payload !== null && typeof payload === "object"
|
||||
},
|
||||
},
|
||||
setup(props, { emit, expose }) {
|
||||
const menuEl = ref<HTMLElement | null>(null);
|
||||
expose({ menuEl });
|
||||
const menuEl = ref<HTMLElement | null>(null)
|
||||
expose({ menuEl })
|
||||
|
||||
const possuiAcoes = computed(() => props.acoes.length > 0);
|
||||
const possuiAcoes = computed(() => props.acoes.length > 0)
|
||||
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic typing needed
|
||||
function emitExecutar(item: { acao: tipoEliTabelaAcao<any> }) {
|
||||
if (!props.linha) return;
|
||||
emit("executar", { acao: item.acao, linha: props.linha });
|
||||
if (!props.linha) return
|
||||
emit("executar", { acao: item.acao, linha: props.linha })
|
||||
}
|
||||
|
||||
return { menuEl, possuiAcoes, emitExecutar };
|
||||
return { menuEl, possuiAcoes, emitExecutar }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -72,19 +72,19 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, watch } from "vue";
|
||||
import type { EliTabelaColunasConfig } from "./colunasStorage";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
import { defineComponent, type PropType, ref, watch } from "vue"
|
||||
import type { EliTabelaColunasConfig } from "./colunasStorage"
|
||||
import type { tipoEliColuna } from "./types-eli-tabela"
|
||||
|
||||
type OrigemLista = "visiveis" | "invisiveis";
|
||||
type OrigemLista = "visiveis" | "invisiveis"
|
||||
|
||||
type DragPayload = {
|
||||
rotulo: string;
|
||||
origem: OrigemLista;
|
||||
index: number;
|
||||
};
|
||||
rotulo: string
|
||||
origem: OrigemLista
|
||||
index: number
|
||||
}
|
||||
|
||||
const DRAG_MIME = "application/x-eli-tabela-coluna";
|
||||
const DRAG_MIME = "application/x-eli-tabela-coluna"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaModalColunas",
|
||||
|
|
@ -102,80 +102,89 @@ export default defineComponent({
|
|||
required: true,
|
||||
},
|
||||
colunas: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic typing needed
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
fechar() {
|
||||
return true;
|
||||
return true
|
||||
},
|
||||
salvar(_config: EliTabelaColunasConfig) {
|
||||
return true;
|
||||
return true
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const visiveisLocal = ref<string[]>([]);
|
||||
const invisiveisLocal = ref<string[]>([]);
|
||||
const visiveisLocal = ref<string[]>([])
|
||||
const invisiveisLocal = ref<string[]>([])
|
||||
|
||||
function sincronizarEstado() {
|
||||
const todos = props.rotulosColunas;
|
||||
const todos = props.rotulosColunas
|
||||
const configTemDados =
|
||||
(props.configInicial.visiveis?.length ?? 0) > 0 ||
|
||||
(props.configInicial.invisiveis?.length ?? 0) > 0;
|
||||
(props.configInicial.invisiveis?.length ?? 0) > 0
|
||||
|
||||
const invisiveisPadraoSet = new Set(
|
||||
props.colunas.filter((c) => c.visivel === false).map((c) => c.rotulo)
|
||||
);
|
||||
props.colunas.filter((c) => c.visivel === false).map((c) => c.rotulo),
|
||||
)
|
||||
|
||||
const invisiveisSet = configTemDados
|
||||
? new Set(props.configInicial.invisiveis ?? [])
|
||||
: invisiveisPadraoSet;
|
||||
: invisiveisPadraoSet
|
||||
|
||||
const baseVisiveis = todos.filter((r) => !invisiveisSet.has(r));
|
||||
const baseVisiveis = todos.filter((r) => !invisiveisSet.has(r))
|
||||
|
||||
// ordenação: aplica ordem salva (visiveis) e adiciona novas ao final
|
||||
const ordemSalva = props.configInicial.visiveis ?? [];
|
||||
const setVis = new Set(baseVisiveis);
|
||||
const ordenadas: string[] = [];
|
||||
const ordemSalva = props.configInicial.visiveis ?? []
|
||||
const setVis = new Set(baseVisiveis)
|
||||
const ordenadas: string[] = []
|
||||
|
||||
for (const r of ordemSalva) {
|
||||
if (setVis.has(r)) ordenadas.push(r);
|
||||
if (setVis.has(r)) ordenadas.push(r)
|
||||
}
|
||||
for (const r of baseVisiveis) {
|
||||
if (!ordenadas.includes(r)) ordenadas.push(r);
|
||||
if (!ordenadas.includes(r)) ordenadas.push(r)
|
||||
}
|
||||
|
||||
visiveisLocal.value = ordenadas;
|
||||
visiveisLocal.value = ordenadas
|
||||
|
||||
// invisíveis: somente as que existem na tabela
|
||||
invisiveisLocal.value = todos.filter((r) => invisiveisSet.has(r));
|
||||
invisiveisLocal.value = todos.filter((r) => invisiveisSet.has(r))
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.aberto, props.rotulosColunas, props.configInicial, props.colunas] as const,
|
||||
() =>
|
||||
[
|
||||
props.aberto,
|
||||
props.rotulosColunas,
|
||||
props.configInicial,
|
||||
props.colunas,
|
||||
] as const,
|
||||
() => {
|
||||
if (props.aberto) sincronizarEstado();
|
||||
if (props.aberto) sincronizarEstado()
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
{ deep: true, immediate: true },
|
||||
)
|
||||
|
||||
function emitFechar() {
|
||||
emit("fechar");
|
||||
emit("fechar")
|
||||
}
|
||||
|
||||
function emitSalvar() {
|
||||
emit("salvar", {
|
||||
visiveis: [...visiveisLocal.value],
|
||||
invisiveis: [...invisiveisLocal.value],
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function writeDragData(e: DragEvent, payload: DragPayload) {
|
||||
try {
|
||||
e.dataTransfer?.setData(DRAG_MIME, JSON.stringify(payload));
|
||||
e.dataTransfer?.setData("text/plain", payload.rotulo);
|
||||
e.dataTransfer!.effectAllowed = "move";
|
||||
e.dataTransfer?.setData(DRAG_MIME, JSON.stringify(payload))
|
||||
e.dataTransfer?.setData("text/plain", payload.rotulo)
|
||||
if (e.dataTransfer) {
|
||||
e.dataTransfer.effectAllowed = "move"
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
|
@ -183,72 +192,93 @@ export default defineComponent({
|
|||
|
||||
function readDragData(e: DragEvent): DragPayload | null {
|
||||
try {
|
||||
const raw = e.dataTransfer?.getData(DRAG_MIME);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw);
|
||||
if (!parsed || typeof parsed.rotulo !== "string" || (parsed.origem !== "visiveis" && parsed.origem !== "invisiveis")) {
|
||||
return null;
|
||||
const raw = e.dataTransfer?.getData(DRAG_MIME)
|
||||
if (!raw) return null
|
||||
const parsed = JSON.parse(raw)
|
||||
if (
|
||||
!parsed ||
|
||||
typeof parsed.rotulo !== "string" ||
|
||||
(parsed.origem !== "visiveis" && parsed.origem !== "invisiveis")
|
||||
) {
|
||||
return null
|
||||
}
|
||||
return parsed as DragPayload;
|
||||
return parsed as DragPayload
|
||||
} catch {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function removerDaOrigem(payload: DragPayload) {
|
||||
const origemArr = payload.origem === "visiveis" ? visiveisLocal.value : invisiveisLocal.value;
|
||||
const idx = origemArr.indexOf(payload.rotulo);
|
||||
if (idx >= 0) origemArr.splice(idx, 1);
|
||||
const origemArr =
|
||||
payload.origem === "visiveis"
|
||||
? visiveisLocal.value
|
||||
: invisiveisLocal.value
|
||||
const idx = origemArr.indexOf(payload.rotulo)
|
||||
if (idx >= 0) origemArr.splice(idx, 1)
|
||||
}
|
||||
|
||||
function inserirNoDestino(destino: OrigemLista, rotulo: string, index: number | null) {
|
||||
const arr = destino === "visiveis" ? visiveisLocal.value : invisiveisLocal.value;
|
||||
function inserirNoDestino(
|
||||
destino: OrigemLista,
|
||||
rotulo: string,
|
||||
index: number | null,
|
||||
) {
|
||||
const arr =
|
||||
destino === "visiveis" ? visiveisLocal.value : invisiveisLocal.value
|
||||
// remove duplicatas
|
||||
const existing = arr.indexOf(rotulo);
|
||||
if (existing >= 0) arr.splice(existing, 1);
|
||||
const existing = arr.indexOf(rotulo)
|
||||
if (existing >= 0) arr.splice(existing, 1)
|
||||
|
||||
if (index === null || index < 0 || index > arr.length) {
|
||||
arr.push(rotulo);
|
||||
arr.push(rotulo)
|
||||
} else {
|
||||
arr.splice(index, 0, rotulo);
|
||||
arr.splice(index, 0, rotulo)
|
||||
}
|
||||
}
|
||||
|
||||
function onDragStart(e: DragEvent, rotulo: string, origem: OrigemLista, index: number) {
|
||||
writeDragData(e, { rotulo, origem, index });
|
||||
function onDragStart(
|
||||
e: DragEvent,
|
||||
rotulo: string,
|
||||
origem: OrigemLista,
|
||||
index: number,
|
||||
) {
|
||||
writeDragData(e, { rotulo, origem, index })
|
||||
}
|
||||
|
||||
function onDropItem(e: DragEvent, destino: OrigemLista, index: number) {
|
||||
const payload = readDragData(e);
|
||||
if (!payload) return;
|
||||
const payload = readDragData(e)
|
||||
if (!payload) return
|
||||
|
||||
// remove da origem e insere no destino na posição do item
|
||||
removerDaOrigem(payload);
|
||||
inserirNoDestino(destino, payload.rotulo, index);
|
||||
removerDaOrigem(payload)
|
||||
inserirNoDestino(destino, payload.rotulo, index)
|
||||
|
||||
// garante que uma coluna não fique nos 2 lados
|
||||
if (destino === "visiveis") {
|
||||
const idxInv = invisiveisLocal.value.indexOf(payload.rotulo);
|
||||
if (idxInv >= 0) invisiveisLocal.value.splice(idxInv, 1);
|
||||
const idxInv = invisiveisLocal.value.indexOf(payload.rotulo)
|
||||
if (idxInv >= 0) invisiveisLocal.value.splice(idxInv, 1)
|
||||
} else {
|
||||
const idxVis = visiveisLocal.value.indexOf(payload.rotulo);
|
||||
if (idxVis >= 0) visiveisLocal.value.splice(idxVis, 1);
|
||||
const idxVis = visiveisLocal.value.indexOf(payload.rotulo)
|
||||
if (idxVis >= 0) visiveisLocal.value.splice(idxVis, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function onDropLista(e: DragEvent, destino: OrigemLista, _index: number | null) {
|
||||
const payload = readDragData(e);
|
||||
if (!payload) return;
|
||||
function onDropLista(
|
||||
e: DragEvent,
|
||||
destino: OrigemLista,
|
||||
_index: number | null,
|
||||
) {
|
||||
const payload = readDragData(e)
|
||||
if (!payload) return
|
||||
|
||||
removerDaOrigem(payload);
|
||||
inserirNoDestino(destino, payload.rotulo, null);
|
||||
removerDaOrigem(payload)
|
||||
inserirNoDestino(destino, payload.rotulo, null)
|
||||
|
||||
if (destino === "visiveis") {
|
||||
const idxInv = invisiveisLocal.value.indexOf(payload.rotulo);
|
||||
if (idxInv >= 0) invisiveisLocal.value.splice(idxInv, 1);
|
||||
const idxInv = invisiveisLocal.value.indexOf(payload.rotulo)
|
||||
if (idxInv >= 0) invisiveisLocal.value.splice(idxInv, 1)
|
||||
} else {
|
||||
const idxVis = visiveisLocal.value.indexOf(payload.rotulo);
|
||||
if (idxVis >= 0) visiveisLocal.value.splice(idxVis, 1);
|
||||
const idxVis = visiveisLocal.value.indexOf(payload.rotulo)
|
||||
if (idxVis >= 0) visiveisLocal.value.splice(idxVis, 1)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -260,9 +290,9 @@ export default defineComponent({
|
|||
onDragStart,
|
||||
onDropItem,
|
||||
onDropLista,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -74,27 +74,39 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref, watch } from "vue";
|
||||
import { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora } from "../EliEntrada";
|
||||
import type { ComponenteEntrada, TipoEntrada } from "../EliEntrada/tiposEntradas";
|
||||
import type { tipoEliTabelaConsulta } from "./types-eli-tabela";
|
||||
import { computed, defineComponent, type PropType, ref, watch } from "vue"
|
||||
import {
|
||||
EliEntradaDataHora,
|
||||
EliEntradaNumero,
|
||||
EliEntradaTexto,
|
||||
} from "../EliEntrada"
|
||||
import type {
|
||||
ComponenteEntrada,
|
||||
TipoEntrada,
|
||||
} from "../EliEntrada/tiposEntradas"
|
||||
import type { tipoEliTabelaConsulta } from "./types-eli-tabela"
|
||||
|
||||
type FiltroBase<T> = NonNullable<tipoEliTabelaConsulta<T>["filtroAvancado"]>[number];
|
||||
type FiltroBase<T> = NonNullable<
|
||||
tipoEliTabelaConsulta<T>["filtroAvancado"]
|
||||
>[number]
|
||||
|
||||
type LinhaFiltro<T> = {
|
||||
coluna: keyof T;
|
||||
entrada: ComponenteEntrada;
|
||||
operador: string;
|
||||
valor: any;
|
||||
};
|
||||
|
||||
function isTipoEntrada(v: unknown): v is TipoEntrada {
|
||||
return v === "texto" || v === "numero" || v === "dataHora";
|
||||
coluna: keyof T
|
||||
entrada: ComponenteEntrada
|
||||
operador: string
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic value
|
||||
valor: any
|
||||
}
|
||||
|
||||
function isTipoEntrada(v: unknown): v is TipoEntrada {
|
||||
return v === "texto" || v === "numero" || v === "dataHora"
|
||||
}
|
||||
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic typing needed
|
||||
function rotuloDoFiltro(f: FiltroBase<any>) {
|
||||
const rotulo = (f?.entrada?.[1] as any)?.rotulo;
|
||||
return rotulo ? String(rotulo) : String(f?.coluna ?? "Filtro");
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic access
|
||||
const rotulo = (f?.entrada?.[1] as any)?.rotulo
|
||||
return rotulo ? String(rotulo) : String(f?.coluna ?? "Filtro")
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -102,10 +114,12 @@ export default defineComponent({
|
|||
props: {
|
||||
aberto: { type: Boolean, required: true },
|
||||
filtrosBase: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic filter type
|
||||
type: Array as PropType<Array<FiltroBase<any>>>,
|
||||
required: true,
|
||||
},
|
||||
modelo: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic model
|
||||
type: Array as PropType<Array<any>>,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -113,67 +127,82 @@ export default defineComponent({
|
|||
emits: {
|
||||
fechar: () => true,
|
||||
limpar: () => true,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic lines
|
||||
salvar: (_linhas: any[]) => true,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const linhas = ref<Array<LinhaFiltro<any>>>([]);
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic value
|
||||
const linhas = ref<Array<LinhaFiltro<any>>>([])
|
||||
|
||||
const colunaParaAdicionar = ref<string>("");
|
||||
const colunaParaAdicionar = ref<string>("")
|
||||
|
||||
const colunasDisponiveis = computed(() => (props.filtrosBase ?? []).map((b) => String(b.coluna)));
|
||||
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)));
|
||||
});
|
||||
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];
|
||||
if (tipo === "numero") return EliEntradaNumero;
|
||||
if (tipo === "dataHora") return EliEntradaDataHora;
|
||||
return EliEntradaTexto;
|
||||
const tipo = entrada?.[0]
|
||||
if (tipo === "numero") return EliEntradaNumero
|
||||
if (tipo === "dataHora") return EliEntradaDataHora
|
||||
return EliEntradaTexto
|
||||
}
|
||||
|
||||
function opcoesEntrada(entrada: ComponenteEntrada) {
|
||||
// o rótulo vem do próprio componente (entrada[1].rotulo)
|
||||
return (entrada?.[1] as any) ?? { rotulo: "" };
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic options
|
||||
return (entrada?.[1] as any) ?? { rotulo: "" }
|
||||
}
|
||||
|
||||
function valorInicialPorEntrada(entrada: ComponenteEntrada) {
|
||||
const tipo = entrada?.[0];
|
||||
if (tipo === "numero") return null;
|
||||
return "";
|
||||
const tipo = entrada?.[0]
|
||||
if (tipo === "numero") return null
|
||||
return ""
|
||||
}
|
||||
|
||||
function normalizarModelo() {
|
||||
const base = props.filtrosBase ?? [];
|
||||
const modelo = Array.isArray(props.modelo) ? props.modelo : [];
|
||||
const base = props.filtrosBase ?? []
|
||||
const modelo = Array.isArray(props.modelo) ? props.modelo : []
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic model
|
||||
linhas.value = modelo.map((m: any) => {
|
||||
// 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);
|
||||
const baseItem =
|
||||
base.find((b) => String(b.coluna) === String(m.coluna)) ?? base[0]
|
||||
const entrada = (baseItem?.entrada ?? m.entrada) as ComponenteEntrada
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic column
|
||||
const col = (baseItem?.coluna ?? m.coluna) as any
|
||||
const op = String(baseItem?.operador ?? "=")
|
||||
const val = m.valor ?? valorInicialPorEntrada(entrada)
|
||||
|
||||
return {
|
||||
coluna: col,
|
||||
operador: op,
|
||||
entrada,
|
||||
valor: val,
|
||||
} as LinhaFiltro<any>;
|
||||
});
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic cast
|
||||
} as LinhaFiltro<any>
|
||||
})
|
||||
|
||||
// se vazio e existe base, adiciona 1 linha default
|
||||
// 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))) continue;
|
||||
l.operador = String((base.find((b) => String(b.coluna) === String(l.coluna))?.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;
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic sanity
|
||||
l.entrada = ["texto", { rotulo: "Valor" }] as any
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -181,38 +210,42 @@ export default defineComponent({
|
|||
watch(
|
||||
() => [props.aberto, props.filtrosBase, props.modelo] as const,
|
||||
() => {
|
||||
if (props.aberto) normalizarModelo();
|
||||
if (props.aberto) normalizarModelo()
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
{ deep: true, immediate: true },
|
||||
)
|
||||
|
||||
function adicionar() {
|
||||
if (!colunaParaAdicionar.value) return;
|
||||
const b0 = (props.filtrosBase ?? []).find((b) => String(b.coluna) === String(colunaParaAdicionar.value));
|
||||
if (!b0) return;
|
||||
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;
|
||||
if (linhas.value.some((l) => String(l.coluna) === String(b0.coluna)))
|
||||
return
|
||||
|
||||
linhas.value.push({
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic column
|
||||
coluna: b0.coluna as any,
|
||||
entrada: b0.entrada,
|
||||
operador: String(b0.operador ?? "="),
|
||||
valor: valorInicialPorEntrada(b0.entrada),
|
||||
});
|
||||
})
|
||||
|
||||
colunaParaAdicionar.value = "";
|
||||
colunaParaAdicionar.value = ""
|
||||
}
|
||||
|
||||
function remover(idx: number) {
|
||||
linhas.value.splice(idx, 1);
|
||||
linhas.value.splice(idx, 1)
|
||||
}
|
||||
|
||||
function emitFechar() {
|
||||
emit("fechar");
|
||||
emit("fechar")
|
||||
}
|
||||
|
||||
function emitLimpar() {
|
||||
emit("limpar");
|
||||
emit("limpar")
|
||||
}
|
||||
|
||||
function emitSalvar() {
|
||||
|
|
@ -221,8 +254,8 @@ export default defineComponent({
|
|||
linhas.value.map((l) => ({
|
||||
coluna: l.coluna,
|
||||
valor: l.valor,
|
||||
}))
|
||||
);
|
||||
})),
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -238,9 +271,9 @@ export default defineComponent({
|
|||
emitSalvar,
|
||||
emitLimpar,
|
||||
rotuloDoFiltro,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,82 @@
|
|||
<template>
|
||||
<nav
|
||||
v-if="totalPaginasExibidas > 1"
|
||||
class="eli-tabela__paginacao"
|
||||
role="navigation"
|
||||
aria-label="Paginação de resultados"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="eli-tabela__pagina-botao"
|
||||
:disabled="anteriorDesabilitado"
|
||||
aria-label="Página anterior"
|
||||
@click="irParaPagina(paginaAtual - 1)"
|
||||
<div class="eli-tabela__rodape">
|
||||
<div
|
||||
v-if="acoes.length > 0"
|
||||
class="eli-tabela__acoes-inferiores"
|
||||
style="margin-right: auto"
|
||||
>
|
||||
<button
|
||||
v-for="(botao, indice) in acoes"
|
||||
:key="`${botao.rotulo}-${indice}`"
|
||||
type="button"
|
||||
class="eli-tabela__acao-inferior"
|
||||
:style="botao.cor ? { borderColor: botao.cor, color: botao.cor } : undefined"
|
||||
@click="botao.acao(parametrosConsulta)"
|
||||
>
|
||||
<component
|
||||
v-if="botao.icone"
|
||||
:is="botao.icone"
|
||||
class="eli-tabela__acoes-cabecalho-icone"
|
||||
:size="16"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
<span class="eli-tabela__acoes-cabecalho-rotulo">{{ botao.rotulo }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
v-if="totalPaginasExibidas > 1"
|
||||
class="eli-tabela__paginacao"
|
||||
role="navigation"
|
||||
aria-label="Paginação de resultados"
|
||||
>
|
||||
<<
|
||||
</button>
|
||||
|
||||
<template v-for="(item, index) in botoes" :key="`${item.label}-${index}`">
|
||||
<span
|
||||
v-if="item.ehEllipsis"
|
||||
class="eli-tabela__pagina-ellipsis"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="eli-tabela__pagina-botao"
|
||||
:class="item.ativo ? 'eli-tabela__pagina-botao--ativo' : undefined"
|
||||
:disabled="item.ativo"
|
||||
:aria-current="item.ativo ? 'page' : undefined"
|
||||
:aria-label="`Ir para página ${item.label}`"
|
||||
@click="irParaPagina(item.pagina)"
|
||||
:disabled="anteriorDesabilitado"
|
||||
aria-label="Página anterior"
|
||||
@click="irParaPagina(paginaAtual - 1)"
|
||||
>
|
||||
{{ item.label }}
|
||||
<<
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="eli-tabela__pagina-botao"
|
||||
:disabled="proximaDesabilitada"
|
||||
aria-label="Próxima página"
|
||||
@click="irParaPagina(paginaAtual + 1)"
|
||||
>
|
||||
>>
|
||||
</button>
|
||||
</nav>
|
||||
<template v-for="(item, index) in botoes" :key="`${item.label}-${index}`">
|
||||
<span
|
||||
v-if="item.ehEllipsis"
|
||||
class="eli-tabela__pagina-ellipsis"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="eli-tabela__pagina-botao"
|
||||
:class="item.ativo ? 'eli-tabela__pagina-botao--ativo' : undefined"
|
||||
:disabled="item.ativo"
|
||||
:aria-current="item.ativo ? 'page' : undefined"
|
||||
:aria-label="`Ir para página ${item.label}`"
|
||||
@click="irParaPagina(item.pagina)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="eli-tabela__pagina-botao"
|
||||
:disabled="proximaDesabilitada"
|
||||
aria-label="Próxima página"
|
||||
@click="irParaPagina(paginaAtual + 1)"
|
||||
>
|
||||
>>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from "vue";
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaPaginacao",
|
||||
|
|
@ -67,10 +93,29 @@ export default defineComponent({
|
|||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
acoes: {
|
||||
type: Array as PropType<
|
||||
Array<{
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic icon
|
||||
icone?: any
|
||||
cor?: string
|
||||
rotulo: string
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic action
|
||||
acao: (params?: any) => void
|
||||
}>
|
||||
>,
|
||||
required: false,
|
||||
default: () => [],
|
||||
},
|
||||
parametrosConsulta: {
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic params
|
||||
type: Object as PropType<any>,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
alterar(pagina: number) {
|
||||
return Number.isFinite(pagina);
|
||||
return Number.isFinite(pagina)
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
|
|
@ -79,12 +124,12 @@ export default defineComponent({
|
|||
* uma navegação confortável, mesmo quando o consumidor não informa o valor.
|
||||
*/
|
||||
const maximoBotoesVisiveis = computed(() => {
|
||||
const valor = props.maximoBotoes;
|
||||
const valor = props.maximoBotoes
|
||||
if (typeof valor === "number" && valor >= 5) {
|
||||
return Math.floor(valor);
|
||||
return Math.floor(valor)
|
||||
}
|
||||
return 7;
|
||||
});
|
||||
return 7
|
||||
})
|
||||
|
||||
/**
|
||||
* Constrói a lista de botões/reticências que serão exibidos na paginação.
|
||||
|
|
@ -92,62 +137,62 @@ export default defineComponent({
|
|||
* demais de forma dinâmica ao redor da página atual.
|
||||
*/
|
||||
const botoes = computed(() => {
|
||||
const total = props.totalPaginas;
|
||||
const atual = props.pagina;
|
||||
const limite = maximoBotoesVisiveis.value;
|
||||
const total = props.totalPaginas
|
||||
const atual = props.pagina
|
||||
const limite = maximoBotoesVisiveis.value
|
||||
const resultado: Array<{
|
||||
label: string;
|
||||
pagina?: number;
|
||||
ativo?: boolean;
|
||||
ehEllipsis?: boolean;
|
||||
}> = [];
|
||||
label: string
|
||||
pagina?: number
|
||||
ativo?: boolean
|
||||
ehEllipsis?: boolean
|
||||
}> = []
|
||||
|
||||
const adicionarPagina = (pagina: number) => {
|
||||
resultado.push({
|
||||
label: String(pagina),
|
||||
pagina,
|
||||
ativo: pagina === atual,
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const adicionarReticencias = () => {
|
||||
resultado.push({ label: "…", ehEllipsis: true });
|
||||
};
|
||||
resultado.push({ label: "…", ehEllipsis: true })
|
||||
}
|
||||
|
||||
if (total <= limite) {
|
||||
for (let pagina = 1; pagina <= total; pagina += 1) {
|
||||
adicionarPagina(pagina);
|
||||
adicionarPagina(pagina)
|
||||
}
|
||||
return resultado;
|
||||
return resultado
|
||||
}
|
||||
|
||||
const visiveisCentrais = Math.max(3, limite - 2);
|
||||
let inicio = Math.max(2, atual - Math.floor(visiveisCentrais / 2));
|
||||
let fim = inicio + visiveisCentrais - 1;
|
||||
const visiveisCentrais = Math.max(3, limite - 2)
|
||||
let inicio = Math.max(2, atual - Math.floor(visiveisCentrais / 2))
|
||||
let fim = inicio + visiveisCentrais - 1
|
||||
|
||||
if (fim >= total) {
|
||||
fim = total - 1;
|
||||
inicio = fim - visiveisCentrais + 1;
|
||||
fim = total - 1
|
||||
inicio = fim - visiveisCentrais + 1
|
||||
}
|
||||
|
||||
adicionarPagina(1);
|
||||
adicionarPagina(1)
|
||||
|
||||
if (inicio > 2) {
|
||||
adicionarReticencias();
|
||||
adicionarReticencias()
|
||||
}
|
||||
|
||||
for (let pagina = inicio; pagina <= fim; pagina += 1) {
|
||||
adicionarPagina(pagina);
|
||||
adicionarPagina(pagina)
|
||||
}
|
||||
|
||||
if (fim < total - 1) {
|
||||
adicionarReticencias();
|
||||
adicionarReticencias()
|
||||
}
|
||||
|
||||
adicionarPagina(total);
|
||||
adicionarPagina(total)
|
||||
|
||||
return resultado;
|
||||
});
|
||||
return resultado
|
||||
})
|
||||
|
||||
/**
|
||||
* Emite a requisição de mudança de página garantindo que o valor esteja
|
||||
|
|
@ -155,18 +200,20 @@ export default defineComponent({
|
|||
*/
|
||||
function irParaPagina(pagina: number | undefined) {
|
||||
if (!pagina) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
const alvo = Math.min(Math.max(1, pagina), props.totalPaginas);
|
||||
const alvo = Math.min(Math.max(1, pagina), props.totalPaginas)
|
||||
if (alvo !== props.pagina) {
|
||||
emit("alterar", alvo);
|
||||
emit("alterar", alvo)
|
||||
}
|
||||
}
|
||||
|
||||
const anteriorDesabilitado = computed(() => props.pagina <= 1);
|
||||
const proximaDesabilitada = computed(() => props.pagina >= props.totalPaginas);
|
||||
const paginaAtual = computed(() => props.pagina);
|
||||
const totalPaginasExibidas = computed(() => props.totalPaginas);
|
||||
const anteriorDesabilitado = computed(() => props.pagina <= 1)
|
||||
const proximaDesabilitada = computed(
|
||||
() => props.pagina >= props.totalPaginas,
|
||||
)
|
||||
const paginaAtual = computed(() => props.pagina)
|
||||
const totalPaginasExibidas = computed(() => props.totalPaginas)
|
||||
|
||||
return {
|
||||
botoes,
|
||||
|
|
@ -175,9 +222,9 @@ export default defineComponent({
|
|||
proximaDesabilitada,
|
||||
paginaAtual,
|
||||
totalPaginasExibidas,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -241,4 +288,31 @@ export default defineComponent({
|
|||
color: rgba(107, 114, 128, 0.85);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.eli-tabela__acao-inferior {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #16a34a; /* default green */
|
||||
background: #ffffff;
|
||||
color: #16a34a;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.eli-tabela__acao-inferior:hover,
|
||||
.eli-tabela__acao-inferior:focus-visible {
|
||||
background-color: #f0fdf4;
|
||||
}
|
||||
|
||||
.eli-tabela__acao-inferior:focus-visible {
|
||||
outline: 2px solid #16a34a;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,15 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { Component } from "vue";
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import type { Component } from "vue"
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
|
||||
import type { tipoComponenteCelula, tipoTabelaCelula, tiposTabelaCelulas } from "../types-eli-tabela";
|
||||
import { registryTabelaCelulas } from "./registryTabelaCelulas";
|
||||
import type {
|
||||
tipoComponenteCelula,
|
||||
tiposTabelaCelulas,
|
||||
tipoTabelaCelula,
|
||||
} from "../types-eli-tabela"
|
||||
import { registryTabelaCelulas } from "./registryTabelaCelulas"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelula",
|
||||
|
|
@ -24,16 +28,20 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props) {
|
||||
const tipo = computed(() => props.celula[0] as tipoTabelaCelula);
|
||||
const dados = computed(() => props.celula[1] as tiposTabelaCelulas[tipoTabelaCelula]);
|
||||
const tipo = computed(() => props.celula[0] as tipoTabelaCelula)
|
||||
const dados = computed(
|
||||
() => props.celula[1] as tiposTabelaCelulas[tipoTabelaCelula],
|
||||
)
|
||||
|
||||
// Observação: mantemos o registry tipado, mas o TS do template não consegue
|
||||
// fazer narrowing do componente com base em `tipo`, então tipamos como `Component`.
|
||||
const Componente = computed(() => registryTabelaCelulas[tipo.value] as unknown as Component);
|
||||
const Componente = computed(
|
||||
() => registryTabelaCelulas[tipo.value] as unknown as Component,
|
||||
)
|
||||
|
||||
const dadosParaComponente = computed(() => dados.value);
|
||||
const dadosParaComponente = computed(() => dados.value)
|
||||
|
||||
return { Componente, dadosParaComponente };
|
||||
return { Componente, dadosParaComponente }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,14 +12,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
|
||||
// Necessário para `fromNow()`.
|
||||
dayjs.extend(relativeTime);
|
||||
import { dayjsbr } from "p-comuns"
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaData",
|
||||
|
|
@ -31,27 +26,27 @@ export default defineComponent({
|
|||
},
|
||||
setup({ dados }) {
|
||||
const textoData = computed(() => {
|
||||
const valorIso = dados?.valor;
|
||||
if (!valorIso) return "";
|
||||
const valorIso = dados?.valor
|
||||
if (!valorIso) return ""
|
||||
|
||||
const formato = dados?.formato ?? "data";
|
||||
const formato = dados?.formato ?? "data"
|
||||
|
||||
if (formato === "relativo") {
|
||||
return dayjs(valorIso).fromNow();
|
||||
return dayjsbr(valorIso).fromNow()
|
||||
}
|
||||
|
||||
if (formato === "data_hora") {
|
||||
// Padrão pt-BR simples (sem depender de locale do dayjs)
|
||||
return dayjs(valorIso).format("DD/MM/YYYY HH:mm");
|
||||
// Padrão pt-BR simples (sem depender de locale do dayjsbr)
|
||||
return dayjsbr(valorIso).format("DD/MM/YYYY HH:mm")
|
||||
}
|
||||
|
||||
// formato === "data"
|
||||
return dayjs(valorIso).format("DD/MM/YYYY");
|
||||
});
|
||||
return dayjsbr(valorIso).format("DD/MM/YYYY")
|
||||
})
|
||||
|
||||
return { dados, textoData };
|
||||
return { dados, textoData }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,22 @@
|
|||
<span v-else>{{ textoNumero }}</span>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue"
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaNumero",
|
||||
|
|
@ -25,15 +38,15 @@ export default defineComponent({
|
|||
setup({ dados }) {
|
||||
const textoNumero = computed(() => {
|
||||
// Mantemos o comportamento anterior (trocar "." por ","), mas agora suportamos prefixo/sufixo.
|
||||
const numero = String(dados?.numero).replace(".", ",");
|
||||
const prefixo = dados?.prefixo?.trim();
|
||||
const sufixo = dados?.sufixo?.trim();
|
||||
const numero = String(dados?.numero).replace(".", ",")
|
||||
const prefixo = dados?.prefixo?.trim()
|
||||
const sufixo = dados?.sufixo?.trim()
|
||||
|
||||
const inicio = prefixo ? `${prefixo} ` : "";
|
||||
const fim = sufixo ? ` ${sufixo}` : "";
|
||||
const inicio = prefixo ? `${prefixo} ` : ""
|
||||
const fim = sufixo ? ` ${sufixo}` : ""
|
||||
|
||||
return `${inicio}${numero}${fim}`;
|
||||
});
|
||||
return `${inicio}${numero}${fim}`
|
||||
})
|
||||
|
||||
return { dados, textoNumero }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import { VChip } from "vuetify/components";
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
import { VChip } from "vuetify/components"
|
||||
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaTags",
|
||||
|
|
@ -38,9 +38,9 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup({ dados }) {
|
||||
return { dados };
|
||||
return { dados }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue"
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaTextoSimples",
|
||||
|
|
@ -23,12 +23,9 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
setup({ dados }) {
|
||||
return { dados }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaTextoTruncado",
|
||||
|
|
@ -24,9 +24,9 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup({ dados }) {
|
||||
return { dados };
|
||||
return { dados }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import type { Component } from "vue";
|
||||
|
||||
import EliTabelaCelulaTextoSimples from "./EliTabelaCelulaTextoSimples.vue";
|
||||
import EliTabelaCelulaTextoTruncado from "./EliTabelaCelulaTextoTruncado.vue";
|
||||
import EliTabelaCelulaNumero from "./EliTabelaCelulaNumero.vue";
|
||||
import EliTabelaCelulaTags from "./EliTabelaCelulaTags.vue";
|
||||
import EliTabelaCelulaData from "./EliTabelaCelulaData.vue";
|
||||
import type { tipoTabelaCelula } from "./tiposTabelaCelulas";
|
||||
import type { Component } from "vue"
|
||||
import EliTabelaCelulaData from "./EliTabelaCelulaData.vue"
|
||||
import EliTabelaCelulaNumero from "./EliTabelaCelulaNumero.vue"
|
||||
import EliTabelaCelulaTags from "./EliTabelaCelulaTags.vue"
|
||||
import EliTabelaCelulaTextoSimples from "./EliTabelaCelulaTextoSimples.vue"
|
||||
import EliTabelaCelulaTextoTruncado from "./EliTabelaCelulaTextoTruncado.vue"
|
||||
import type { tipoTabelaCelula } from "./tiposTabelaCelulas"
|
||||
|
||||
export const registryTabelaCelulas = {
|
||||
textoSimples: EliTabelaCelulaTextoSimples,
|
||||
|
|
@ -13,4 +12,4 @@ export const registryTabelaCelulas = {
|
|||
numero: EliTabelaCelulaNumero,
|
||||
tags: EliTabelaCelulaTags,
|
||||
data: EliTabelaCelulaData,
|
||||
} as const satisfies Record<tipoTabelaCelula, Component>;
|
||||
} as const satisfies Record<tipoTabelaCelula, Component>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,48 @@
|
|||
/**
|
||||
* Tipagem dos dados de entrada dos componentes de celulas
|
||||
* Tipagem dos dados de entrada dos componentes de celulas
|
||||
*/
|
||||
|
||||
import type { LucideIcon } from "lucide-vue-next";
|
||||
import type { LucideIcon } from "lucide-vue-next"
|
||||
|
||||
export type tiposTabelaCelulas = {
|
||||
textoSimples: {
|
||||
texto: string;
|
||||
acao?: () => void;
|
||||
};
|
||||
texto: string
|
||||
acao?: () => void
|
||||
}
|
||||
textoTruncado: {
|
||||
texto: string;
|
||||
acao?: () => void;
|
||||
};
|
||||
texto: string
|
||||
acao?: () => void
|
||||
}
|
||||
numero: {
|
||||
numero: number;
|
||||
numero: number
|
||||
/** Texto opcional exibido antes do número (ex.: "R$", "≈"). */
|
||||
prefixo?: string;
|
||||
prefixo?: string
|
||||
/** Texto opcional exibido depois do número (ex.: "kg", "%"). */
|
||||
sufixo?: string;
|
||||
acao?: () => void;
|
||||
};
|
||||
sufixo?: string
|
||||
acao?: () => void
|
||||
}
|
||||
|
||||
tags: {
|
||||
opcoes: {
|
||||
/** Texto exibido dentro da tag. */
|
||||
rotulo: string;
|
||||
rotulo: string
|
||||
/** Cor do chip (segue as cores do Vuetify, ex.: "primary", "success", "error"). */
|
||||
cor?: string;
|
||||
cor?: string
|
||||
/** Ícone (Lucide) opcional exibido antes do rótulo. */
|
||||
icone?: LucideIcon;
|
||||
icone?: LucideIcon
|
||||
/** Ação opcional da tag. Quando existir, o chip vira clicável. */
|
||||
acao?: () => void;
|
||||
}[];
|
||||
};
|
||||
acao?: () => void
|
||||
}[]
|
||||
}
|
||||
|
||||
data: {
|
||||
/** Valor em ISO 8601 (ex.: "2026-01-09T16:15:00Z"). */
|
||||
valor: string;
|
||||
valor: string
|
||||
/** Define o formato de exibição. */
|
||||
formato: "data" | "data_hora" | "relativo";
|
||||
formato: "data" | "data_hora" | "relativo"
|
||||
/** Ação opcional ao clicar no valor. */
|
||||
acao?: () => void;
|
||||
};
|
||||
};
|
||||
|
||||
export type tipoTabelaCelula = keyof tiposTabelaCelulas;
|
||||
acao?: () => void
|
||||
}
|
||||
}
|
||||
|
||||
export type tipoTabelaCelula = keyof tiposTabelaCelulas
|
||||
|
|
|
|||
|
|
@ -1,40 +1,55 @@
|
|||
export type EliTabelaColunasConfig = {
|
||||
/** Rotulos das colunas visiveis (em ordem). */
|
||||
visiveis: string[];
|
||||
visiveis: string[]
|
||||
/** Rotulos das colunas invisiveis. */
|
||||
invisiveis: string[];
|
||||
};
|
||||
invisiveis: string[]
|
||||
}
|
||||
|
||||
const STORAGE_PREFIX = "eli:tabela";
|
||||
const STORAGE_PREFIX = "eli:tabela"
|
||||
|
||||
export function storageKeyColunas(nomeTabela: string) {
|
||||
return `${STORAGE_PREFIX}:${nomeTabela}:colunas`;
|
||||
return `${STORAGE_PREFIX}:${nomeTabela}:colunas`
|
||||
}
|
||||
|
||||
function normalizarConfig(valor: unknown): EliTabelaColunasConfig {
|
||||
if (!valor || typeof valor !== "object") {
|
||||
return { visiveis: [], invisiveis: [] };
|
||||
return { visiveis: [], invisiveis: [] }
|
||||
}
|
||||
|
||||
const v = valor as any;
|
||||
const visiveis = Array.isArray(v.visiveis) ? v.visiveis.filter((x: any) => typeof x === "string") : [];
|
||||
const invisiveis = Array.isArray(v.invisiveis) ? v.invisiveis.filter((x: any) => typeof x === "string") : [];
|
||||
return { visiveis, invisiveis };
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic config
|
||||
const v = valor as any
|
||||
const visiveis = Array.isArray(v.visiveis)
|
||||
? // biome-ignore lint/suspicious/noExplicitAny: dynamic array item
|
||||
v.visiveis.filter((x: any) => typeof x === "string")
|
||||
: []
|
||||
const invisiveis = Array.isArray(v.invisiveis)
|
||||
? // biome-ignore lint/suspicious/noExplicitAny: dynamic array item
|
||||
v.invisiveis.filter((x: any) => typeof x === "string")
|
||||
: []
|
||||
return { visiveis, invisiveis }
|
||||
}
|
||||
|
||||
export function carregarConfigColunas(nomeTabela: string): EliTabelaColunasConfig {
|
||||
export function carregarConfigColunas(
|
||||
nomeTabela: string,
|
||||
): EliTabelaColunasConfig {
|
||||
try {
|
||||
const raw = window.localStorage.getItem(storageKeyColunas(nomeTabela));
|
||||
if (!raw) return { visiveis: [], invisiveis: [] };
|
||||
return normalizarConfig(JSON.parse(raw));
|
||||
const raw = window.localStorage.getItem(storageKeyColunas(nomeTabela))
|
||||
if (!raw) return { visiveis: [], invisiveis: [] }
|
||||
return normalizarConfig(JSON.parse(raw))
|
||||
} catch {
|
||||
return { visiveis: [], invisiveis: [] };
|
||||
return { visiveis: [], invisiveis: [] }
|
||||
}
|
||||
}
|
||||
|
||||
export function salvarConfigColunas(nomeTabela: string, config: EliTabelaColunasConfig) {
|
||||
export function salvarConfigColunas(
|
||||
nomeTabela: string,
|
||||
config: EliTabelaColunasConfig,
|
||||
) {
|
||||
try {
|
||||
window.localStorage.setItem(storageKeyColunas(nomeTabela), JSON.stringify(normalizarConfig(config)));
|
||||
window.localStorage.setItem(
|
||||
storageKeyColunas(nomeTabela),
|
||||
JSON.stringify(normalizarConfig(config)),
|
||||
)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
|
@ -42,7 +57,7 @@ export function salvarConfigColunas(nomeTabela: string, config: EliTabelaColunas
|
|||
|
||||
export function limparConfigColunas(nomeTabela: string) {
|
||||
try {
|
||||
window.localStorage.removeItem(storageKeyColunas(nomeTabela));
|
||||
window.localStorage.removeItem(storageKeyColunas(nomeTabela))
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,35 @@
|
|||
export type EliTabelaFiltroAvancadoSalvo<T> = Array<{
|
||||
coluna: keyof T
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dynamic value
|
||||
valor: any
|
||||
}>;
|
||||
}>
|
||||
|
||||
function key(nomeTabela: string) {
|
||||
return `eli_tabela:${nomeTabela}:filtro_avancado`;
|
||||
return `eli_tabela:${nomeTabela}:filtro_avancado`
|
||||
}
|
||||
|
||||
export function carregarFiltroAvancado<T>(nomeTabela: string): EliTabelaFiltroAvancadoSalvo<T> {
|
||||
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);
|
||||
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>)
|
||||
: // biome-ignore lint/suspicious/noExplicitAny: dynamic cast
|
||||
([] as any)
|
||||
} catch {
|
||||
return [] as unknown as EliTabelaFiltroAvancadoSalvo<T>;
|
||||
return [] as unknown as EliTabelaFiltroAvancadoSalvo<T>
|
||||
}
|
||||
}
|
||||
|
||||
export function salvarFiltroAvancado<T>(nomeTabela: string, filtros: EliTabelaFiltroAvancadoSalvo<T>) {
|
||||
export function salvarFiltroAvancado<T>(
|
||||
nomeTabela: string,
|
||||
filtros: EliTabelaFiltroAvancadoSalvo<T>,
|
||||
) {
|
||||
try {
|
||||
localStorage.setItem(key(nomeTabela), JSON.stringify(filtros ?? []));
|
||||
localStorage.setItem(key(nomeTabela), JSON.stringify(filtros ?? []))
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
|
@ -28,7 +37,7 @@ export function salvarFiltroAvancado<T>(nomeTabela: string, filtros: EliTabelaFi
|
|||
|
||||
export function limparFiltroAvancado(nomeTabela: string) {
|
||||
try {
|
||||
localStorage.removeItem(key(nomeTabela));
|
||||
localStorage.removeItem(key(nomeTabela))
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
export { default as EliTabela } from "./EliTabela.vue";
|
||||
|
||||
export * from "./types-eli-tabela";
|
||||
export * from "./celulas/tiposTabelaCelulas";
|
||||
export * from "./celulas/tiposTabelaCelulas"
|
||||
export { default as EliTabela } from "./EliTabela.vue"
|
||||
export * from "./types-eli-tabela"
|
||||
|
||||
// Helper para construção de células tipadas.
|
||||
export { celulaTabela } from "./types-eli-tabela";
|
||||
export { celulaTabela } from "./types-eli-tabela"
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
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";
|
||||
import type { LucideIcon } from "lucide-vue-next"
|
||||
import type { operadores, zFiltro } from "p-comuns"
|
||||
import type { tipoResposta } from "p-respostas"
|
||||
import type { ComponenteEntrada } from "../EliEntrada/tiposEntradas"
|
||||
import type {
|
||||
tiposTabelaCelulas,
|
||||
tipoTabelaCelula,
|
||||
} from "./celulas/tiposTabelaCelulas"
|
||||
|
||||
// `p-comuns` expõe `zFiltro` (schema). Inferimos o tipo a partir do `parse`.
|
||||
export type tipoFiltro = ReturnType<(typeof zFiltro)["parse"]>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export type tipoComponenteCelulaBase<T extends tipoTabelaCelula> =
|
||||
readonly [T, tiposTabelaCelulas[T]]
|
||||
export type tipoComponenteCelulaBase<T extends tipoTabelaCelula> = readonly [
|
||||
T,
|
||||
tiposTabelaCelulas[T],
|
||||
]
|
||||
|
||||
export type tipoComponenteCelula = {
|
||||
[K in tipoTabelaCelula]: tipoComponenteCelulaBase<K>
|
||||
|
|
@ -25,54 +26,60 @@ export const celulaTabela = <T extends tipoTabelaCelula>(
|
|||
return [tipo, dados] as const
|
||||
}
|
||||
|
||||
export type { tipoTabelaCelula, tiposTabelaCelulas };
|
||||
|
||||
|
||||
|
||||
export type { tipoTabelaCelula, tiposTabelaCelulas }
|
||||
|
||||
export type tipoEliColuna<T> = {
|
||||
/** Texto exibido no cabeçalho da coluna. */
|
||||
rotulo: string;
|
||||
rotulo: string
|
||||
/** Função responsável por renderizar o conteúdo da célula. */
|
||||
celula: (linha: T) => tipoComponenteCelula;
|
||||
celula: (linha: T) => tipoComponenteCelula
|
||||
/** Ação opcional disparada ao clicar na célula. */
|
||||
|
||||
/**
|
||||
* 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;
|
||||
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 tipoEliConsultaPaginada<T> = {
|
||||
/** Registros retornados na consulta. */
|
||||
valores: T[];
|
||||
valores: T[]
|
||||
/** Total de registros disponíveis no backend. */
|
||||
quantidade: number;
|
||||
};
|
||||
quantidade: number
|
||||
}
|
||||
|
||||
export type tipoEliTabelaAcao<T> = {
|
||||
/** Ícone (Lucide) exibido para representar a ação. */
|
||||
icone: LucideIcon;
|
||||
icone: LucideIcon
|
||||
/** Cor aplicada ao ícone e rótulo. */
|
||||
cor: string;
|
||||
cor: string
|
||||
/** Texto descritivo da ação. */
|
||||
rotulo: string;
|
||||
rotulo: string
|
||||
/** Função executada quando o usuário ativa a ação. */
|
||||
acao: (linha: T) => void;
|
||||
acao: (linha: T) => void
|
||||
/**
|
||||
* Define se a ação deve ser exibida para a linha. Pode ser um booleano fixo
|
||||
* ou uma função (sincrona/assíncrona) que recebe a linha para decisão dinâmica.
|
||||
*/
|
||||
exibir?: boolean | ((linha: T) => Promise<boolean> | boolean);
|
||||
};
|
||||
exibir?: boolean | ((linha: T) => Promise<boolean> | boolean)
|
||||
}
|
||||
|
||||
export type parametrosConsulta<T> = {
|
||||
filtros?: tipoFiltro[]
|
||||
coluna_ordem?: keyof T
|
||||
direcao_ordem?: "asc" | "desc"
|
||||
offSet?: number
|
||||
limit?: number
|
||||
/** Texto digitado na caixa de busca, quando habilitada. */
|
||||
texto_busca?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Estrutura de dados para uma tabela alimentada por uma consulta.
|
||||
|
|
@ -85,45 +92,40 @@ export type tipoEliTabelaConsulta<T> = {
|
|||
/** nome da tabela, um identificador unico */
|
||||
nome: string
|
||||
/** Indica se a caixa de busca deve ser exibida acima da tabela. */
|
||||
mostrarCaixaDeBusca?: boolean;
|
||||
mostrarCaixaDeBusca?: boolean
|
||||
/** Lista de colunas da tabela. */
|
||||
colunas: tipoEliColuna<T>[];
|
||||
colunas: tipoEliColuna<T>[]
|
||||
/** Quantidade de registros solicitados por consulta (padrão `10`). */
|
||||
registros_por_consulta?: number;
|
||||
registros_por_consulta?: number
|
||||
/**
|
||||
* Função responsável por buscar os dados. Recebe parâmetros opcionais de
|
||||
* 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;
|
||||
limit?: number;
|
||||
/** Texto digitado na caixa de busca, quando habilitada. */
|
||||
texto_busca?: string;
|
||||
}) => Promise<tipoResposta<tipoEliConsultaPaginada<T>>>;
|
||||
consulta: (
|
||||
parametrosConsulta?: parametrosConsulta<T>,
|
||||
) => Promise<tipoResposta<tipoEliConsultaPaginada<T>>>
|
||||
/** Quantidade máxima de botões exibidos na paginação (padrão `7`). */
|
||||
maximo_botoes_paginacao?: number;
|
||||
maximo_botoes_paginacao?: number
|
||||
/** Mensagem exibida quando a consulta retorna ok porém sem dados. */
|
||||
mensagemVazio?: string;
|
||||
mensagemVazio?: string
|
||||
/** Ações exibidas à direita de cada linha. */
|
||||
acoesLinha?: tipoEliTabelaAcao<T>[];
|
||||
acoesLinha?: tipoEliTabelaAcao<T>[]
|
||||
/**
|
||||
* Configurações dos botões que serão inseridos a direita da caixa de busca.
|
||||
* Seu uso mais comum será para criar novos registros, mas poderá ter outras utilidades.
|
||||
*/
|
||||
acoesTabela?: {
|
||||
/** superio será exibido a direita da caixa de busca, inferior a direita da paginação */
|
||||
posicao: "superior" | "inferior"
|
||||
|
||||
/** Ícone (Lucide) exibido no botão */
|
||||
icone?: LucideIcon;
|
||||
icone?: LucideIcon
|
||||
/** Cor aplicada ao botão. */
|
||||
cor?: string;
|
||||
cor?: string
|
||||
/** Texto descritivo da ação. */
|
||||
rotulo: string;
|
||||
rotulo: string
|
||||
/** Função executada ao clicar no botão. */
|
||||
acao: () => void;
|
||||
acao: (parametrosConsulta?: parametrosConsulta<T>) => void
|
||||
|
||||
/**
|
||||
* Callback opcional para forçar atualização da consulta.
|
||||
|
|
@ -135,14 +137,11 @@ export type tipoEliTabelaConsulta<T> = {
|
|||
* Observação: o componente `EliTabela` pode ignorar isso dependendo do modo de uso.
|
||||
*/
|
||||
editarLista?: (lista: T[]) => Promise<T[]>
|
||||
}[];
|
||||
|
||||
filtroAvancado?: {
|
||||
coluna: keyof T,
|
||||
operador: operadores | keyof typeof operadores,
|
||||
entrada: ComponenteEntrada
|
||||
}[]
|
||||
|
||||
|
||||
};
|
||||
|
||||
filtroAvancado?: {
|
||||
coluna: keyof T
|
||||
operador: operadores | keyof typeof operadores
|
||||
entrada: ComponenteEntrada
|
||||
}[]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,27 +13,27 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import type { BotaoTamanho, BotaoVariante } from "../../tipos";
|
||||
import { defineComponent, type PropType } from "vue"
|
||||
import type { BotaoTamanho, BotaoVariante } from "../../tipos"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliBotao",
|
||||
|
||||
inheritAttrs: false,
|
||||
name: "EliBotao",
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "primary"
|
||||
},
|
||||
inheritAttrs: false,
|
||||
|
||||
variant: {
|
||||
type: String as PropType<BotaoVariante>,
|
||||
default: "elevated",
|
||||
},
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
},
|
||||
|
||||
size: {
|
||||
type: String as PropType<BotaoTamanho>,
|
||||
variant: {
|
||||
type: String as PropType<BotaoVariante>,
|
||||
default: "elevated",
|
||||
},
|
||||
|
||||
size: {
|
||||
type: String as PropType<BotaoTamanho>,
|
||||
default: "default",
|
||||
},
|
||||
|
||||
|
|
@ -46,7 +46,6 @@ export default defineComponent({
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export { default as EliBotao } from "./EliBotao.vue";
|
||||
export { default as EliBotao } from "./EliBotao.vue"
|
||||
|
|
|
|||
|
|
@ -35,11 +35,11 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import type { CartaoStatus } from "../../tipos";
|
||||
import { EliBadge } from "../indicador";
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
import type { CartaoStatus } from "../../tipos"
|
||||
import { EliBadge } from "../indicador"
|
||||
|
||||
type CartaoVariante = "outlined" | "flat" | "elevated" | "tonal";
|
||||
type CartaoVariante = "outlined" | "flat" | "elevated" | "tonal"
|
||||
|
||||
/**
|
||||
* EliCartao
|
||||
|
|
@ -83,27 +83,27 @@ export default defineComponent({
|
|||
setup(props, { emit }) {
|
||||
const rotuloStatus = computed(() => {
|
||||
// Mantém label em PT-BR (não abreviar)
|
||||
return props.status;
|
||||
});
|
||||
return props.status
|
||||
})
|
||||
|
||||
const corStatus = computed(() => {
|
||||
// Cor neutra por padrão e semântica por status
|
||||
switch (props.status) {
|
||||
case "novo":
|
||||
return "primary";
|
||||
return "primary"
|
||||
case "rascunho":
|
||||
return "secondary";
|
||||
return "secondary"
|
||||
case "vendido":
|
||||
return "success";
|
||||
return "success"
|
||||
case "cancelado":
|
||||
return "error";
|
||||
return "error"
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const classeStatus = computed(() => `eli-cartao--${props.status}`);
|
||||
const classeStatus = computed(() => `eli-cartao--${props.status}`)
|
||||
|
||||
function onClick() {
|
||||
emit("clicar", props.status);
|
||||
emit("clicar", props.status)
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -111,9 +111,9 @@ export default defineComponent({
|
|||
corStatus,
|
||||
classeStatus,
|
||||
onClick,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
export { default as EliCartao } from "./EliCartao.vue";
|
||||
|
||||
export { default as EliCartao } from "./EliCartao.vue"
|
||||
|
|
|
|||
|
|
@ -20,18 +20,18 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import { computed, defineComponent, type PropType } from "vue"
|
||||
import type {
|
||||
CssLength,
|
||||
IndicadorLocalizacao,
|
||||
IndicadorOffset,
|
||||
IndicadorPresetRaio,
|
||||
} from "../../tipos";
|
||||
} from "../../tipos"
|
||||
|
||||
const RADIUS_MAP: Record<IndicadorPresetRaio, string> = {
|
||||
suave: "4px",
|
||||
pill: "10px",
|
||||
};
|
||||
suave: "4px",
|
||||
pill: "10px",
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliBadge",
|
||||
|
|
@ -82,33 +82,32 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
setup(props) {
|
||||
|
||||
const resolvedRadius = computed(() => {
|
||||
// preset conhecido
|
||||
if (props.radius in RADIUS_MAP) {
|
||||
return RADIUS_MAP[props.radius as IndicadorPresetRaio];
|
||||
return RADIUS_MAP[props.radius as IndicadorPresetRaio]
|
||||
}
|
||||
|
||||
// valor custom (ex: "8px", "50%", "0")
|
||||
return props.radius;
|
||||
});
|
||||
return props.radius
|
||||
})
|
||||
const showBadge = computed(() => {
|
||||
// se for dot, respeita visible
|
||||
if (props.dot) return props.visible;
|
||||
if (props.dot) return props.visible
|
||||
|
||||
// se tiver badge, respeita visible
|
||||
if (props.badge !== undefined) return props.visible;
|
||||
if (props.badge !== undefined) return props.visible
|
||||
|
||||
return false;
|
||||
});
|
||||
return false
|
||||
})
|
||||
|
||||
const badgeStyle = computed(() => ({
|
||||
"--eli-badge-radius": resolvedRadius.value,
|
||||
}));
|
||||
}))
|
||||
|
||||
return { showBadge, badgeStyle };
|
||||
return { showBadge, badgeStyle }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export { default as EliBadge } from "./EliBadge.vue";
|
||||
export { default as EliBadge } from "./EliBadge.vue"
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import EliBotao from "../botao/EliBotao.vue";
|
||||
import EliBadge from "../indicador/EliBadge.vue";
|
||||
import EliEntradaTexto from "../EliEntrada/EliEntradaTexto.vue";
|
||||
import { defineComponent, ref } from "vue"
|
||||
import EliBotao from "../botao/EliBotao.vue"
|
||||
import EliEntradaTexto from "../EliEntrada/EliEntradaTexto.vue"
|
||||
import EliBadge from "../indicador/EliBadge.vue"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliOlaMundo",
|
||||
|
|
@ -62,18 +62,18 @@ export default defineComponent({
|
|||
EliEntradaTexto,
|
||||
},
|
||||
setup() {
|
||||
const nome = ref("");
|
||||
const cep = ref("");
|
||||
const telefone = ref("");
|
||||
const email = ref("");
|
||||
const documento = ref("");
|
||||
const nome = ref("")
|
||||
const cep = ref("")
|
||||
const telefone = ref("")
|
||||
const email = ref("")
|
||||
const documento = ref("")
|
||||
return {
|
||||
nome,
|
||||
email,
|
||||
documento,
|
||||
telefone,
|
||||
cep,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export { default as EliOlaMundo } from "./EliOlaMundo.vue";
|
||||
export { default as EliOlaMundo } from "./EliOlaMundo.vue"
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export const gif_quero_quero = 'https://paiol.idz.one/estaticos/quero-quero.gif'
|
||||
export const gif_quero_quero = "https://paiol.idz.one/estaticos/quero-quero.gif"
|
||||
|
|
|
|||
58
src/index.ts
58
src/index.ts
|
|
@ -1,43 +1,43 @@
|
|||
import type { App, Plugin } from "vue";
|
||||
import "./styles/eli-vue-fonts.css";
|
||||
import { EliOlaMundo } from "./componentes/ola_mundo";
|
||||
import { EliBotao } from "./componentes/botao";
|
||||
import { EliBadge } from "./componentes/indicador";
|
||||
import { EliCartao } from "./componentes/cartao";
|
||||
import { EliTabela } from "./componentes/EliTabela";
|
||||
import type { App, Plugin } from "vue"
|
||||
import "./styles/eli-vue-fonts.css"
|
||||
import { EliBotao } from "./componentes/botao"
|
||||
import { EliCartao } from "./componentes/cartao"
|
||||
import {
|
||||
EliEntradaTexto,
|
||||
EliEntradaNumero,
|
||||
EliEntradaDataHora,
|
||||
EliEntradaNumero,
|
||||
EliEntradaParagrafo,
|
||||
EliEntradaSelecao,
|
||||
} from "./componentes/EliEntrada";
|
||||
EliEntradaTexto,
|
||||
} from "./componentes/EliEntrada"
|
||||
import { EliTabela } from "./componentes/EliTabela"
|
||||
import { EliBadge } from "./componentes/indicador"
|
||||
import { EliOlaMundo } from "./componentes/ola_mundo"
|
||||
|
||||
export { EliOlaMundo };
|
||||
export { EliBotao };
|
||||
export { EliBadge };
|
||||
export { EliCartao };
|
||||
export { EliOlaMundo }
|
||||
export { EliBotao }
|
||||
export { EliBadge }
|
||||
export { EliCartao }
|
||||
|
||||
export * from "./componentes/EliEntrada"
|
||||
// Exportar tudo (componentes + types + helpers) de Tabela e Entrada
|
||||
export * from "./componentes/EliTabela";
|
||||
export * from "./componentes/EliEntrada";
|
||||
export * from "./componentes/EliTabela"
|
||||
|
||||
// Exportar tipos compartilhados (ex: CartaoStatus)
|
||||
export * from "./tipos";
|
||||
export * from "./tipos"
|
||||
|
||||
const EliVue: Plugin = {
|
||||
install(app: App) {
|
||||
app.component("EliOlaMundo", EliOlaMundo);
|
||||
app.component("EliBotao", EliBotao);
|
||||
app.component("EliBadge", EliBadge);
|
||||
app.component("EliCartao", EliCartao);
|
||||
app.component("EliTabela", EliTabela);
|
||||
app.component("EliEntradaTexto", EliEntradaTexto);
|
||||
app.component("EliEntradaNumero", EliEntradaNumero);
|
||||
app.component("EliEntradaDataHora", EliEntradaDataHora);
|
||||
app.component("EliEntradaParagrafo", EliEntradaParagrafo);
|
||||
app.component("EliEntradaSelecao", EliEntradaSelecao);
|
||||
app.component("EliOlaMundo", EliOlaMundo)
|
||||
app.component("EliBotao", EliBotao)
|
||||
app.component("EliBadge", EliBadge)
|
||||
app.component("EliCartao", EliCartao)
|
||||
app.component("EliTabela", EliTabela)
|
||||
app.component("EliEntradaTexto", EliEntradaTexto)
|
||||
app.component("EliEntradaNumero", EliEntradaNumero)
|
||||
app.component("EliEntradaDataHora", EliEntradaDataHora)
|
||||
app.component("EliEntradaParagrafo", EliEntradaParagrafo)
|
||||
app.component("EliEntradaSelecao", EliEntradaSelecao)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default EliVue;
|
||||
export default EliVue
|
||||
|
|
|
|||
|
|
@ -27,14 +27,14 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import BotaoPlayground from "./botao.playground.vue";
|
||||
import IndicadorPlayground from "./indicador.playground.vue";
|
||||
import CartaoPlayground from "./cartao.playground.vue";
|
||||
import EntradasPlayground from "./entradas.playground.vue";
|
||||
import DataHoraPlayground from "./data_hora.playground.vue";
|
||||
import TabelaPlayground from "./tabela.playground.vue";
|
||||
import OlaMundoPlayground from "./ola_mundo.playground.vue";
|
||||
import { defineComponent } from "vue"
|
||||
import BotaoPlayground from "./botao.playground.vue"
|
||||
import CartaoPlayground from "./cartao.playground.vue"
|
||||
import DataHoraPlayground from "./data_hora.playground.vue"
|
||||
import EntradasPlayground from "./entradas.playground.vue"
|
||||
import IndicadorPlayground from "./indicador.playground.vue"
|
||||
import OlaMundoPlayground from "./ola_mundo.playground.vue"
|
||||
import TabelaPlayground from "./tabela.playground.vue"
|
||||
|
||||
type AbaPlayground =
|
||||
| "botao"
|
||||
|
|
@ -43,7 +43,7 @@ type AbaPlayground =
|
|||
| "entradas"
|
||||
| "data_hora"
|
||||
| "tabela"
|
||||
| "ola_mundo";
|
||||
| "ola_mundo"
|
||||
|
||||
const mapaHashParaAba: Record<string, AbaPlayground> = {
|
||||
botao: "botao",
|
||||
|
|
@ -53,7 +53,7 @@ const mapaHashParaAba: Record<string, AbaPlayground> = {
|
|||
"data-hora": "data_hora",
|
||||
tabela: "tabela",
|
||||
demo: "ola_mundo",
|
||||
};
|
||||
}
|
||||
|
||||
const mapaAbaParaHash: Record<AbaPlayground, string> = {
|
||||
botao: "botao",
|
||||
|
|
@ -63,7 +63,7 @@ const mapaAbaParaHash: Record<AbaPlayground, string> = {
|
|||
data_hora: "data-hora",
|
||||
tabela: "tabela",
|
||||
ola_mundo: "demo",
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "App",
|
||||
|
|
@ -85,61 +85,67 @@ export default defineComponent({
|
|||
body: "",
|
||||
},
|
||||
googleSansCheck: "(checando...)" as string,
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.sincronizarAbaComHash();
|
||||
window.addEventListener("hashchange", this.sincronizarAbaComHash);
|
||||
this.sincronizarAbaComHash()
|
||||
window.addEventListener("hashchange", this.sincronizarAbaComHash)
|
||||
|
||||
// Coleta variáveis de fonte e confirma carregamento via FontFaceSet.
|
||||
this.fontVars.eli = getComputedStyle(document.documentElement).getPropertyValue("--eli-font-family").trim();
|
||||
this.fontVars.v = getComputedStyle(document.documentElement).getPropertyValue("--v-font-family").trim();
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily;
|
||||
this.fontVars.eli = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--eli-font-family")
|
||||
.trim()
|
||||
this.fontVars.v = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--v-font-family")
|
||||
.trim()
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily
|
||||
|
||||
// Espera fonts carregarem e então checa se o navegador considera Google Sans disponível
|
||||
// (isso não garante 100% que TODOS pesos/estilos foram baixados, mas confirma que a face existe/foi carregada)
|
||||
document.fonts.ready
|
||||
.then(() => {
|
||||
this.googleSansCheck = String(document.fonts.check('12px "Google Sans"'));
|
||||
this.googleSansCheck = String(
|
||||
document.fonts.check('12px "Google Sans"'),
|
||||
)
|
||||
// atualiza body depois do load, pois pode mudar após o font-face carregar
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily;
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily
|
||||
})
|
||||
.catch(() => {
|
||||
this.googleSansCheck = "erro";
|
||||
});
|
||||
this.googleSansCheck = "erro"
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("hashchange", this.sincronizarAbaComHash);
|
||||
window.removeEventListener("hashchange", this.sincronizarAbaComHash)
|
||||
},
|
||||
watch: {
|
||||
aba() {
|
||||
this.sincronizarHashComAba();
|
||||
this.sincronizarHashComAba()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
normalizarHash() {
|
||||
const valor = window.location.hash.replace(/^#\/?/, "").trim();
|
||||
return valor;
|
||||
const valor = window.location.hash.replace(/^#\/?/, "").trim()
|
||||
return valor
|
||||
},
|
||||
sincronizarAbaComHash() {
|
||||
const hash = this.normalizarHash();
|
||||
const hash = this.normalizarHash()
|
||||
|
||||
const aba = mapaHashParaAba[hash] ?? "botao";
|
||||
const aba = mapaHashParaAba[hash] ?? "botao"
|
||||
|
||||
if (this.aba !== aba) {
|
||||
this.aba = aba;
|
||||
this.aba = aba
|
||||
}
|
||||
|
||||
// Se a URL estiver vazia/fora do padrão, normalizamos.
|
||||
this.sincronizarHashComAba();
|
||||
this.sincronizarHashComAba()
|
||||
},
|
||||
sincronizarHashComAba() {
|
||||
const destino = `#/${mapaAbaParaHash[this.aba]}`;
|
||||
const destino = `#/${mapaAbaParaHash[this.aba]}`
|
||||
|
||||
if (window.location.hash !== destino) {
|
||||
window.location.hash = destino;
|
||||
window.location.hash = destino
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,17 +17,17 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { EliBotao } from "@/componentes/botao";
|
||||
import { defineComponent, ref } from "vue"
|
||||
import { EliBotao } from "@/componentes/botao"
|
||||
|
||||
export default defineComponent({
|
||||
name: "BotaoPlayground",
|
||||
components: { EliBotao },
|
||||
setup() {
|
||||
const contador = ref(0);
|
||||
return { contador };
|
||||
const contador = ref(0)
|
||||
return { contador }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -44,32 +44,32 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { EliBadge } from "@/componentes/indicador";
|
||||
import { EliBotao } from "@/componentes/botao";
|
||||
import { EliEntradaTexto } from "@/componentes/EliEntrada";
|
||||
import { EliCartao } from "@/componentes/cartao";
|
||||
import type { CartaoStatus } from "@/tipos";
|
||||
import { defineComponent, ref } from "vue"
|
||||
import { EliBotao } from "@/componentes/botao"
|
||||
import { EliCartao } from "@/componentes/cartao"
|
||||
import { EliEntradaTexto } from "@/componentes/EliEntrada"
|
||||
import { EliBadge } from "@/componentes/indicador"
|
||||
import type { CartaoStatus } from "@/tipos"
|
||||
|
||||
type Card = {
|
||||
id: string;
|
||||
titulo: string;
|
||||
cliente: string;
|
||||
valor: string;
|
||||
vencimento: string;
|
||||
};
|
||||
id: string
|
||||
titulo: string
|
||||
cliente: string
|
||||
valor: string
|
||||
vencimento: string
|
||||
}
|
||||
|
||||
type Coluna = {
|
||||
status: CartaoStatus;
|
||||
titulo: string;
|
||||
itens: Card[];
|
||||
};
|
||||
status: CartaoStatus
|
||||
titulo: string
|
||||
itens: Card[]
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "CartaoPlayground",
|
||||
components: { EliBadge, EliBotao, EliEntradaTexto, EliCartao },
|
||||
setup() {
|
||||
const filtro = ref("");
|
||||
const filtro = ref("")
|
||||
|
||||
const colunas = ref<Coluna[]>([
|
||||
{
|
||||
|
|
@ -116,14 +116,14 @@ export default defineComponent({
|
|||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
])
|
||||
|
||||
function itensFiltrados(itens: Card[]) {
|
||||
const q = filtro.value.trim().toLowerCase();
|
||||
if (!q) return itens;
|
||||
const q = filtro.value.trim().toLowerCase()
|
||||
if (!q) return itens
|
||||
return itens.filter((i) =>
|
||||
`${i.titulo} ${i.cliente} ${i.valor}`.toLowerCase().includes(q)
|
||||
);
|
||||
`${i.titulo} ${i.cliente} ${i.valor}`.toLowerCase().includes(q),
|
||||
)
|
||||
}
|
||||
|
||||
function criar() {
|
||||
|
|
@ -134,7 +134,7 @@ export default defineComponent({
|
|||
cliente: "(definir)",
|
||||
valor: "R$ 0,00",
|
||||
vencimento: "--/--/----",
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function abrir(_item: Card) {
|
||||
|
|
@ -145,9 +145,9 @@ export default defineComponent({
|
|||
// Abrir modal/rota de edição
|
||||
}
|
||||
|
||||
return { filtro, colunas, itensFiltrados, criar, abrir, editar };
|
||||
return { filtro, colunas, itensFiltrados, criar, abrir, editar }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -98,34 +98,34 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from "vue";
|
||||
import { EliEntradaDataHora } from "@/componentes/EliEntrada";
|
||||
import { VDivider } from "vuetify/components";
|
||||
import { computed, defineComponent, ref } from "vue"
|
||||
import { VDivider } from "vuetify/components"
|
||||
import { EliEntradaDataHora } from "@/componentes/EliEntrada"
|
||||
|
||||
export default defineComponent({
|
||||
name: "DataHoraPlayground",
|
||||
components: { EliEntradaDataHora, VDivider },
|
||||
setup() {
|
||||
const dataHora = ref<string | null>("2026-01-09T13:15:00-03:00");
|
||||
const dataHora = ref<string | null>("2026-01-09T13:15:00-03:00")
|
||||
|
||||
const somenteData = ref<string | null>("2026-01-09T00:00:00-03:00");
|
||||
const somenteData = ref<string | null>("2026-01-09T00:00:00-03:00")
|
||||
|
||||
// Valor vindo do backend em UTC/Z (exibir local, manter como UTC no estado)
|
||||
const dataHoraUtcEntrada = ref<string | null>("2026-01-09T16:15:00Z");
|
||||
const dataHoraUtcEntrada = ref<string | null>("2026-01-09T16:15:00Z")
|
||||
|
||||
// Exemplo com min/max
|
||||
const min = ref("2026-01-09T08:00:00-03:00");
|
||||
const max = ref("2026-01-09T18:00:00-03:00");
|
||||
const dataHoraComLimite = ref<string | null>("2026-01-09T09:00:00-03:00");
|
||||
const min = ref("2026-01-09T08:00:00-03:00")
|
||||
const max = ref("2026-01-09T18:00:00-03:00")
|
||||
const dataHoraComLimite = ref<string | null>("2026-01-09T09:00:00-03:00")
|
||||
|
||||
// Obrigatório (mostra erro quando null)
|
||||
const dataHoraObrigatoria = ref<string | null>(null);
|
||||
const dataHoraObrigatoria = ref<string | null>(null)
|
||||
|
||||
// Desabilitado
|
||||
const dataHoraDesabilitado = ref<string | null>("2026-01-09T10:30:00-03:00");
|
||||
const dataHoraDesabilitado = ref<string | null>("2026-01-09T10:30:00-03:00")
|
||||
|
||||
// Saída: sempre ISO com offset local
|
||||
const dataHoraUtcEmitida = ref<string | null>("2026-01-09T16:15:00Z");
|
||||
const dataHoraUtcEmitida = ref<string | null>("2026-01-09T16:15:00Z")
|
||||
|
||||
const debug = computed(() =>
|
||||
JSON.stringify(
|
||||
|
|
@ -141,9 +141,9 @@ export default defineComponent({
|
|||
max: max.value,
|
||||
},
|
||||
null,
|
||||
2
|
||||
)
|
||||
);
|
||||
2,
|
||||
),
|
||||
)
|
||||
|
||||
return {
|
||||
dataHora,
|
||||
|
|
@ -156,9 +156,9 @@ export default defineComponent({
|
|||
dataHoraDesabilitado,
|
||||
dataHoraUtcEmitida,
|
||||
debug,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -112,8 +112,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { EliEntradaNumero, EliEntradaParagrafo, EliEntradaSelecao, EliEntradaTexto } from "../index";
|
||||
import { defineComponent } from "vue"
|
||||
import {
|
||||
EliEntradaNumero,
|
||||
EliEntradaParagrafo,
|
||||
EliEntradaSelecao,
|
||||
EliEntradaTexto,
|
||||
} from "../index"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EntradasPlayground",
|
||||
|
|
@ -126,12 +131,12 @@ export default defineComponent({
|
|||
methods: {
|
||||
async itensCategorias() {
|
||||
// Exemplo async (simula consulta)
|
||||
await new Promise((r) => setTimeout(r, 600));
|
||||
await new Promise((r) => setTimeout(r, 600))
|
||||
return [
|
||||
{ chave: "a", rotulo: "Categoria A" },
|
||||
{ chave: "b", rotulo: "Categoria B" },
|
||||
{ chave: "c", rotulo: "Categoria C" },
|
||||
];
|
||||
]
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -141,7 +146,7 @@ export default defineComponent({
|
|||
selecao: null as string | null,
|
||||
numero: null as number | null,
|
||||
numeroDecimal: null as number | null,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -29,18 +29,18 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { EliBadge } from "@/componentes/indicador";
|
||||
import { EliBotao } from "@/componentes/botao";
|
||||
import { defineComponent, ref } from "vue"
|
||||
import { EliBotao } from "@/componentes/botao"
|
||||
import { EliBadge } from "@/componentes/indicador"
|
||||
|
||||
export default defineComponent({
|
||||
name: "IndicadorPlayground",
|
||||
components: { EliBadge, EliBotao },
|
||||
setup() {
|
||||
const mostrar = ref(true);
|
||||
return { mostrar };
|
||||
const mostrar = ref(true)
|
||||
return { mostrar }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import { createApp } from "vue"
|
||||
import App from "./App.vue"
|
||||
|
||||
// Vuetify
|
||||
import "vuetify/styles";
|
||||
import "@mdi/font/css/materialdesignicons.css";
|
||||
import { createVuetify } from "vuetify";
|
||||
import * as components from "vuetify/components";
|
||||
import * as directives from "vuetify/directives";
|
||||
import "vuetify/styles"
|
||||
import "@mdi/font/css/materialdesignicons.css"
|
||||
import { createVuetify } from "vuetify"
|
||||
import * as components from "vuetify/components"
|
||||
import * as directives from "vuetify/directives"
|
||||
|
||||
// Estilos globais da lib (font-face + variáveis de fonte)
|
||||
// Importamos DEPOIS do Vuetify para garantir que `--v-font-family` seja sobrescrito.
|
||||
import "../styles/eli-vue-fonts.css";
|
||||
import "../styles/eli-vue-fonts.css"
|
||||
|
||||
const themeDefault = {
|
||||
dark: false,
|
||||
|
|
@ -152,7 +152,7 @@ const themeDefault = {
|
|||
"cyan-800": "#055160",
|
||||
"cyan-900": "#032830",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const vuetify = createVuetify({
|
||||
components,
|
||||
|
|
@ -163,19 +163,32 @@ const vuetify = createVuetify({
|
|||
themeDefault,
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const app = createApp(App);
|
||||
const app = createApp(App)
|
||||
|
||||
// Debug rápido: confirma fonte efetiva no playground (ver no DevTools console)
|
||||
// Observação: isso é só para o playground, não afeta o build da lib.
|
||||
if (import.meta.env.DEV) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[eli-vue] --v-font-family:", getComputedStyle(document.documentElement).getPropertyValue("--v-font-family"));
|
||||
console.log(
|
||||
"[eli-vue] --v-font-family:",
|
||||
getComputedStyle(document.documentElement).getPropertyValue(
|
||||
"--v-font-family",
|
||||
),
|
||||
)
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[eli-vue] --eli-font-family:", getComputedStyle(document.documentElement).getPropertyValue("--eli-font-family"));
|
||||
console.log(
|
||||
"[eli-vue] --eli-font-family:",
|
||||
getComputedStyle(document.documentElement).getPropertyValue(
|
||||
"--eli-font-family",
|
||||
),
|
||||
)
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[eli-vue] body font-family:", getComputedStyle(document.body).fontFamily);
|
||||
console.log(
|
||||
"[eli-vue] body font-family:",
|
||||
getComputedStyle(document.body).fontFamily,
|
||||
)
|
||||
}
|
||||
|
||||
app.use(vuetify).mount("#app");
|
||||
app.use(vuetify).mount("#app")
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { EliOlaMundo } from "@/componentes/ola_mundo";
|
||||
import { defineComponent } from "vue"
|
||||
import { EliOlaMundo } from "@/componentes/ola_mundo"
|
||||
|
||||
export default defineComponent({
|
||||
name: "OlaMundoPlayground",
|
||||
components: { EliOlaMundo },
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { codigosResposta } from "p-respostas";
|
||||
import { BadgeCheck, Eye, Pencil, Plus, Trash2 } from "lucide-vue-next";
|
||||
import { celulaTabela, EliTabela } from "@/componentes/EliTabela";
|
||||
import type { ComponenteEntrada } from "@/componentes/EliEntrada/tiposEntradas";
|
||||
import type { tipoEliTabelaConsulta } from "@/componentes/EliTabela";
|
||||
import type { tipoFiltro } from "@/componentes/EliTabela/types-eli-tabela";
|
||||
import { BadgeCheck, Eye, Pencil, Plus, Trash2 } from "lucide-vue-next"
|
||||
import { codigosResposta } from "p-respostas"
|
||||
import { defineComponent, ref } from "vue"
|
||||
import type { ComponenteEntrada } from "@/componentes/EliEntrada/tiposEntradas"
|
||||
import type { tipoEliTabelaConsulta } from "@/componentes/EliTabela"
|
||||
import { celulaTabela, EliTabela } from "@/componentes/EliTabela"
|
||||
import type { tipoFiltro } from "@/componentes/EliTabela/types-eli-tabela"
|
||||
|
||||
type Linha = {
|
||||
empreendedor: string;
|
||||
empreendimento: string;
|
||||
documento: string;
|
||||
email: string;
|
||||
telefone: string;
|
||||
faturamento: number;
|
||||
peso_kg: number;
|
||||
criado_em: string;
|
||||
atualizado_em: string;
|
||||
};
|
||||
empreendedor: string
|
||||
empreendimento: string
|
||||
documento: string
|
||||
email: string
|
||||
telefone: string
|
||||
faturamento: number
|
||||
peso_kg: number
|
||||
criado_em: string
|
||||
atualizado_em: string
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "TabelaPlayground",
|
||||
|
|
@ -42,7 +42,7 @@ export default defineComponent({
|
|||
cor: "#2563eb",
|
||||
rotulo: "Detalhes",
|
||||
acao: (linha) => {
|
||||
console.log("Visualizar detalhes de", linha.empreendedor);
|
||||
console.log("Visualizar detalhes de", linha.empreendedor)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -50,18 +50,19 @@ export default defineComponent({
|
|||
cor: "#dc2626",
|
||||
rotulo: "Remover",
|
||||
acao: (linha) => {
|
||||
console.log("Remover cadastro de", linha.empreendedor);
|
||||
console.log("Remover cadastro de", linha.empreendedor)
|
||||
},
|
||||
exibir: (linha) => !linha.empreendimento.toLowerCase().includes("café"),
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
const linhasPadrao = ref<Linha[]>([
|
||||
{
|
||||
empreendedor: "Maria Silva",
|
||||
empreendimento: "Doces da Maria",
|
||||
documento: "12.345.678/0001-90",
|
||||
email: "contato.comercial.super.longo@doces-da-maria-exemplo-muito-grande.com.br",
|
||||
email:
|
||||
"contato.comercial.super.longo@doces-da-maria-exemplo-muito-grande.com.br",
|
||||
telefone: "(11) 91234-5678",
|
||||
faturamento: 12500.5,
|
||||
peso_kg: 12.4,
|
||||
|
|
@ -288,14 +289,16 @@ export default defineComponent({
|
|||
criado_em: "2026-01-01T09:00:00-03:00",
|
||||
atualizado_em: "2026-01-17T09:30:00-03:00",
|
||||
},
|
||||
]);
|
||||
])
|
||||
|
||||
// Incrementamos a chave para forçar o EliTabela a recarregar a consulta.
|
||||
// (Como o componente não expõe um método público de refresh)
|
||||
const versaoTabelaOk = ref(0);
|
||||
const versaoTabelaOk = ref(0)
|
||||
|
||||
function adicionarLinha() {
|
||||
const proximo = linhasPadrao.value.length + 1;
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
function adicionarLinha(params?: any) {
|
||||
if (params) console.log("Adicionar Linha, parametros:", params)
|
||||
const proximo = linhasPadrao.value.length + 1
|
||||
|
||||
linhasPadrao.value.unshift({
|
||||
empreendedor: `Novo Empreendedor ${proximo}`,
|
||||
|
|
@ -307,42 +310,47 @@ export default defineComponent({
|
|||
peso_kg: 0,
|
||||
criado_em: new Date().toISOString(),
|
||||
atualizado_em: new Date().toISOString(),
|
||||
});
|
||||
})
|
||||
|
||||
versaoTabelaOk.value++;
|
||||
versaoTabelaOk.value++
|
||||
}
|
||||
|
||||
|
||||
const filtrarPorBusca = (linhas: Linha[], texto?: string) => {
|
||||
const termo = texto?.trim().toLowerCase();
|
||||
const termo = texto?.trim().toLowerCase()
|
||||
if (!termo) {
|
||||
return [...linhas];
|
||||
return [...linhas]
|
||||
}
|
||||
|
||||
return linhas.filter((linha) => {
|
||||
const campos = [linha.empreendedor, linha.empreendimento];
|
||||
return campos.some((valor) => valor.toLowerCase().includes(termo));
|
||||
});
|
||||
};
|
||||
const campos = [linha.empreendedor, linha.empreendimento]
|
||||
return campos.some((valor) => valor.toLowerCase().includes(termo))
|
||||
})
|
||||
}
|
||||
|
||||
const compararOperador = (operador: string, valorLinha: any, valorFiltro: any): boolean => {
|
||||
const compararOperador = (
|
||||
operador: string,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
valorLinha: any,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
valorFiltro: any,
|
||||
): boolean => {
|
||||
switch (operador) {
|
||||
case "=":
|
||||
return valorLinha == valorFiltro;
|
||||
return valorLinha == valorFiltro
|
||||
case "!=":
|
||||
return valorLinha != valorFiltro;
|
||||
return valorLinha != valorFiltro
|
||||
case ">":
|
||||
return Number(valorLinha) > Number(valorFiltro);
|
||||
return Number(valorLinha) > Number(valorFiltro)
|
||||
case ">=":
|
||||
return Number(valorLinha) >= Number(valorFiltro);
|
||||
return Number(valorLinha) >= Number(valorFiltro)
|
||||
case "<":
|
||||
return Number(valorLinha) < Number(valorFiltro);
|
||||
return Number(valorLinha) < Number(valorFiltro)
|
||||
case "<=":
|
||||
return Number(valorLinha) <= Number(valorFiltro);
|
||||
return Number(valorLinha) <= Number(valorFiltro)
|
||||
case "like": {
|
||||
const a = String(valorLinha ?? "").toLowerCase();
|
||||
const b = String(valorFiltro ?? "").toLowerCase();
|
||||
return a.includes(b);
|
||||
const a = String(valorLinha ?? "").toLowerCase()
|
||||
const b = String(valorFiltro ?? "").toLowerCase()
|
||||
return a.includes(b)
|
||||
}
|
||||
case "in": {
|
||||
const arr = Array.isArray(valorFiltro)
|
||||
|
|
@ -350,93 +358,129 @@ export default defineComponent({
|
|||
: String(valorFiltro ?? "")
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
return arr.includes(String(valorLinha));
|
||||
.filter(Boolean)
|
||||
return arr.includes(String(valorLinha))
|
||||
}
|
||||
case "isNull":
|
||||
return valorLinha === null || valorLinha === undefined || valorLinha === "";
|
||||
return (
|
||||
valorLinha === null || valorLinha === undefined || valorLinha === ""
|
||||
)
|
||||
default:
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const filtrarPorFiltrosAvancados = (linhas: Linha[], filtros?: tipoFiltro[]) => {
|
||||
const lista = [...linhas];
|
||||
if (!filtros?.length) return lista;
|
||||
const filtrarPorFiltrosAvancados = (
|
||||
linhas: Linha[],
|
||||
filtros?: tipoFiltro[],
|
||||
) => {
|
||||
const lista = [...linhas]
|
||||
if (!filtros?.length) return lista
|
||||
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
return lista.filter((linha: any) => {
|
||||
return filtros.every((f) => {
|
||||
const vLinha = linha?.[String((f as any).coluna)];
|
||||
return compararOperador(String((f as any).operador), vLinha, (f as any).valor);
|
||||
});
|
||||
});
|
||||
};
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
const vLinha = linha?.[String((f as any).coluna)]
|
||||
return compararOperador(
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
String((f as any).operador),
|
||||
vLinha,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
(f as any).valor,
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const ordenarLinhas = (linhas: Linha[], parametros?: { coluna_ordem?: keyof Linha; direcao_ordem?: "asc" | "desc" }) => {
|
||||
if (!parametros?.coluna_ordem) return [...linhas];
|
||||
const ordenarLinhas = (
|
||||
linhas: Linha[],
|
||||
parametros?: {
|
||||
coluna_ordem?: keyof Linha
|
||||
direcao_ordem?: "asc" | "desc"
|
||||
},
|
||||
) => {
|
||||
if (!parametros?.coluna_ordem) return [...linhas]
|
||||
|
||||
const direcao = parametros.direcao_ordem ?? "asc";
|
||||
const chave = parametros.coluna_ordem;
|
||||
const multiplicador = direcao === "asc" ? 1 : -1;
|
||||
const direcao = parametros.direcao_ordem ?? "asc"
|
||||
const chave = parametros.coluna_ordem
|
||||
const multiplicador = direcao === "asc" ? 1 : -1
|
||||
|
||||
return [...linhas].sort((a, b) => {
|
||||
const valorA = a[chave];
|
||||
const valorB = b[chave];
|
||||
const valorA = a[chave]
|
||||
const valorB = b[chave]
|
||||
|
||||
return (
|
||||
multiplicador *
|
||||
String(valorA ?? "").localeCompare(String(valorB ?? ""), "pt-BR", {
|
||||
sensitivity: "base",
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const tabelaOk: tipoEliTabelaConsulta<Linha> = {
|
||||
nome: 'Exemplo',
|
||||
nome: "Exemplo",
|
||||
registros_por_consulta: 10,
|
||||
mostrarCaixaDeBusca: true,
|
||||
acoesTabela: [
|
||||
{
|
||||
posicao: "superior",
|
||||
icone: Plus,
|
||||
cor: "#16a34a",
|
||||
rotulo: "Novo",
|
||||
rotulo: "Novo (Superior)",
|
||||
acao: adicionarLinha,
|
||||
},
|
||||
{
|
||||
posicao: "inferior",
|
||||
icone: Plus,
|
||||
cor: "#2563eb",
|
||||
rotulo: "Novo (Inferior)",
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
acao: (params: any) => {
|
||||
console.log("Ação inferior clicada com params:", params)
|
||||
adicionarLinha(params)
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
colunas: [
|
||||
{
|
||||
rotulo: "Empreendedor",
|
||||
celula: (l) => celulaTabela('textoSimples', { texto: l.empreendedor }),
|
||||
celula: (l) =>
|
||||
celulaTabela("textoSimples", { texto: l.empreendedor }),
|
||||
coluna_ordem: "empreendedor",
|
||||
visivel: true,
|
||||
},
|
||||
{
|
||||
rotulo: "Empreendimento",
|
||||
celula: (l) => celulaTabela('textoSimples', { texto: l.empreendimento }),
|
||||
celula: (l) =>
|
||||
celulaTabela("textoSimples", { texto: l.empreendimento }),
|
||||
coluna_ordem: "empreendimento",
|
||||
visivel: true,
|
||||
},
|
||||
{
|
||||
rotulo: "Documento",
|
||||
celula: (l) => celulaTabela('textoSimples', { texto: l.documento }),
|
||||
celula: (l) => celulaTabela("textoSimples", { texto: l.documento }),
|
||||
coluna_ordem: "documento",
|
||||
visivel: false,
|
||||
},
|
||||
{
|
||||
rotulo: "E-mail",
|
||||
celula: (l) => celulaTabela('textoTruncado', {
|
||||
texto: l.email, acao: () => {
|
||||
// Exemplo de ação: poderia abrir detalhes
|
||||
alert(`Clicou em ${l.email}`);
|
||||
}
|
||||
}),
|
||||
celula: (l) =>
|
||||
celulaTabela("textoTruncado", {
|
||||
texto: l.email,
|
||||
acao: () => {
|
||||
// Exemplo de ação: poderia abrir detalhes
|
||||
alert(`Clicou em ${l.email}`)
|
||||
},
|
||||
}),
|
||||
coluna_ordem: "email",
|
||||
visivel: true,
|
||||
},
|
||||
{
|
||||
rotulo: "Telefone",
|
||||
celula: (l) => celulaTabela('textoSimples', { texto: l.telefone }),
|
||||
celula: (l) => celulaTabela("textoSimples", { texto: l.telefone }),
|
||||
coluna_ordem: "telefone",
|
||||
visivel: true,
|
||||
},
|
||||
|
|
@ -447,7 +491,8 @@ export default defineComponent({
|
|||
numero: l.faturamento,
|
||||
prefixo: "R$",
|
||||
// Exemplo de ação (clicável)
|
||||
acao: () => alert(`Faturamento de ${l.empreendedor}: R$ ${l.faturamento}`),
|
||||
acao: () =>
|
||||
alert(`Faturamento de ${l.empreendedor}: R$ ${l.faturamento}`),
|
||||
}),
|
||||
visivel: true,
|
||||
},
|
||||
|
|
@ -475,7 +520,7 @@ export default defineComponent({
|
|||
cor: "primary",
|
||||
icone: Pencil,
|
||||
acao: () => {
|
||||
alert(`Editar ${l.empreendedor}`);
|
||||
alert(`Editar ${l.empreendedor}`)
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -508,39 +553,46 @@ export default defineComponent({
|
|||
coluna: "empreendedor",
|
||||
operador: "like",
|
||||
entrada: ["texto", { rotulo: "Empreendedor" }] as ComponenteEntrada,
|
||||
|
||||
},
|
||||
{
|
||||
coluna: "documento",
|
||||
operador: "like",
|
||||
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as ComponenteEntrada,
|
||||
|
||||
entrada: [
|
||||
"texto",
|
||||
{ rotulo: "Documento", formato: "cpfCnpj" },
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
coluna: "email",
|
||||
operador: "like",
|
||||
entrada: ["texto", { rotulo: "E-mail", formato: "email" }] as ComponenteEntrada,
|
||||
|
||||
entrada: [
|
||||
"texto",
|
||||
{ rotulo: "E-mail", formato: "email" },
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
],
|
||||
consulta: async (parametrosConsulta) => {
|
||||
// Agora a EliTabela envia paginação/ordenação/busca OU filtros avançados para a consulta.
|
||||
// (busca tem prioridade; quando existe texto_busca, filtros não vêm no payload)
|
||||
|
||||
const limite = Math.max(1, Number(parametrosConsulta?.limit ?? 10));
|
||||
const offset = Math.max(0, Number(parametrosConsulta?.offSet ?? 0));
|
||||
const limite = Math.max(1, Number(parametrosConsulta?.limit ?? 10))
|
||||
const offset = Math.max(0, Number(parametrosConsulta?.offSet ?? 0))
|
||||
|
||||
// 1) filtra (busca OU filtro avançado)
|
||||
const base = [...linhasPadrao.value];
|
||||
const base = [...linhasPadrao.value]
|
||||
const filtradas = parametrosConsulta?.texto_busca
|
||||
? filtrarPorBusca(base, parametrosConsulta.texto_busca)
|
||||
: filtrarPorFiltrosAvancados(base, (parametrosConsulta as any)?.filtros);
|
||||
: filtrarPorFiltrosAvancados(
|
||||
base,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
(parametrosConsulta as any)?.filtros,
|
||||
)
|
||||
|
||||
// 2) ordena
|
||||
const ordenadas = ordenarLinhas(filtradas, parametrosConsulta);
|
||||
const ordenadas = ordenarLinhas(filtradas, parametrosConsulta)
|
||||
|
||||
// 3) pagina
|
||||
const valores = ordenadas.slice(offset, offset + limite);
|
||||
const valores = ordenadas.slice(offset, offset + limite)
|
||||
|
||||
return {
|
||||
cod: codigosResposta.sucesso,
|
||||
|
|
@ -551,9 +603,9 @@ export default defineComponent({
|
|||
quantidade: ordenadas.length,
|
||||
valores,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const tabelaVazia: tipoEliTabelaConsulta<Linha> = {
|
||||
nome: "Exemplo",
|
||||
|
|
@ -570,11 +622,11 @@ export default defineComponent({
|
|||
quantidade: 0,
|
||||
valores: [],
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
mensagemVazio: "Nada para mostrar aqui.",
|
||||
acoesLinha: acoesLinha,
|
||||
};
|
||||
}
|
||||
|
||||
const tabelaErro: tipoEliTabelaConsulta<Linha> = {
|
||||
nome: "Exemplo",
|
||||
|
|
@ -589,13 +641,13 @@ export default defineComponent({
|
|||
eErro: true,
|
||||
mensagem: "Falha ao buscar dados",
|
||||
valor: undefined,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return { tabelaOk, tabelaVazia, tabelaErro, versaoTabelaOk };
|
||||
return { tabelaOk, tabelaVazia, tabelaErro, versaoTabelaOk }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
* Mantidos separados do componente para facilitar reuso e padronização.
|
||||
*/
|
||||
|
||||
export type BotaoVariante = "elevated" | "flat" | "outlined" | "text" | "tonal";
|
||||
|
||||
export type BotaoTamanho = "x-small" | "small" | "default" | "large";
|
||||
export type BotaoVariante = "elevated" | "flat" | "outlined" | "text" | "tonal"
|
||||
|
||||
export type BotaoTamanho = "x-small" | "small" | "default" | "large"
|
||||
|
|
|
|||
|
|
@ -2,5 +2,4 @@
|
|||
* Tipos do componente EliCartao.
|
||||
*/
|
||||
|
||||
export type CartaoStatus = "novo" | "rascunho" | "vendido" | "cancelado";
|
||||
|
||||
export type CartaoStatus = "novo" | "rascunho" | "vendido" | "cancelado"
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@ export type CampoVariante =
|
|||
| "solo"
|
||||
| "solo-filled"
|
||||
| "solo-inverted"
|
||||
| "underlined";
|
||||
| "underlined"
|
||||
|
||||
export type CampoDensidade = "default" | "comfortable" | "compact";
|
||||
export type CampoDensidade = "default" | "comfortable" | "compact"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export * from "./botao";
|
||||
export * from "./cartao";
|
||||
export * from "./entrada";
|
||||
export * from "./indicador";
|
||||
export * from "./botao"
|
||||
export * from "./cartao"
|
||||
export * from "./entrada"
|
||||
export * from "./indicador"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export type IndicadorLocalizacao =
|
|||
| "bottom center"
|
||||
| "top left"
|
||||
| "left center"
|
||||
| "bottom left";
|
||||
| "bottom left"
|
||||
|
||||
export type IndicadorOffset =
|
||||
| "-20"
|
||||
|
|
@ -21,9 +21,8 @@ export type IndicadorOffset =
|
|||
| "20"
|
||||
| "15"
|
||||
| "10"
|
||||
| "5";
|
||||
| "5"
|
||||
|
||||
export type IndicadorPresetRaio = "suave" | "pill";
|
||||
|
||||
export type CssLength = `${number}px` | `${number}rem` | `${number}%` | "0";
|
||||
export type IndicadorPresetRaio = "suave" | "pill"
|
||||
|
||||
export type CssLength = `${number}px` | `${number}rem` | `${number}%` | "0"
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ export default defineConfig({
|
|||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5555,
|
||||
strictPort: true,
|
||||
},
|
||||
build: {
|
||||
lib: {
|
||||
entry: path.resolve(__dirname, "src/index.ts"),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue