bkp
This commit is contained in:
parent
de7c19be24
commit
6aedf2469f
20 changed files with 2032 additions and 1541 deletions
2
dist/eli-vue.css
vendored
2
dist/eli-vue.css
vendored
File diff suppressed because one or more lines are too long
2074
dist/eli-vue.es.js
vendored
2074
dist/eli-vue.es.js
vendored
File diff suppressed because it is too large
Load diff
30
dist/eli-vue.umd.js
vendored
30
dist/eli-vue.umd.js
vendored
File diff suppressed because one or more lines are too long
231
dist/types/componentes/EliEntrada/EliEntradaDataHora.vue.d.ts
vendored
Normal file
231
dist/types/componentes/EliEntrada/EliEntradaDataHora.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
import { PropType } from "vue";
|
||||
import type { CampoDensidade, CampoVariante } from "../../tipos";
|
||||
import type { PadroesEntradas } from "./tiposEntradas";
|
||||
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;
|
||||
};
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
value: {
|
||||
type: PropType<EntradaDataHora["value"]>;
|
||||
default: undefined;
|
||||
};
|
||||
opcoes: {
|
||||
type: PropType<EntradaDataHora["opcoes"]>;
|
||||
required: false;
|
||||
default: undefined;
|
||||
};
|
||||
modelValue: {
|
||||
type: PropType<string | null>;
|
||||
default: null;
|
||||
};
|
||||
modo: {
|
||||
type: PropType<PropsAntigas["modo"]>;
|
||||
default: undefined;
|
||||
};
|
||||
rotulo: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
placeholder: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
desabilitado: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
limpavel: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
erro: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
mensagensErro: {
|
||||
type: PropType<string | string[]>;
|
||||
default: undefined;
|
||||
};
|
||||
dica: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
dicaPersistente: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
densidade: {
|
||||
type: PropType<CampoDensidade>;
|
||||
default: undefined;
|
||||
};
|
||||
variante: {
|
||||
type: PropType<CampoVariante>;
|
||||
default: undefined;
|
||||
};
|
||||
min: {
|
||||
type: PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
max: {
|
||||
type: PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
}>, {
|
||||
attrs: {
|
||||
[x: string]: unknown;
|
||||
};
|
||||
valor: import("vue").WritableComputedRef<string, string>;
|
||||
tipoInput: import("vue").ComputedRef<"date" | "datetime-local">;
|
||||
minLocal: import("vue").ComputedRef<string | undefined>;
|
||||
maxLocal: import("vue").ComputedRef<string | undefined>;
|
||||
opcoesEfetivas: import("vue").ComputedRef<{
|
||||
rotulo: string;
|
||||
placeholder?: string;
|
||||
} & {
|
||||
modo?: "data" | "dataHora";
|
||||
limpavel?: boolean;
|
||||
erro?: boolean;
|
||||
mensagensErro?: string | string[];
|
||||
dica?: string;
|
||||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../tipos").CampoDensidade;
|
||||
variante?: import("../../tipos").CampoVariante;
|
||||
}>;
|
||||
desabilitadoEfetivo: import("vue").ComputedRef<boolean>;
|
||||
emitCompatFocus: () => void;
|
||||
emitCompatBlur: () => void;
|
||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
"update:value": (_v: string | null) => true;
|
||||
input: (_v: string | null) => true;
|
||||
change: (_v: string | null) => true;
|
||||
"update:modelValue": (_v: string | null) => true;
|
||||
alterar: (_v: string | null) => true;
|
||||
foco: () => true;
|
||||
desfoco: () => true;
|
||||
focus: () => true;
|
||||
blur: () => true;
|
||||
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
value: {
|
||||
type: PropType<EntradaDataHora["value"]>;
|
||||
default: undefined;
|
||||
};
|
||||
opcoes: {
|
||||
type: PropType<EntradaDataHora["opcoes"]>;
|
||||
required: false;
|
||||
default: undefined;
|
||||
};
|
||||
modelValue: {
|
||||
type: PropType<string | null>;
|
||||
default: null;
|
||||
};
|
||||
modo: {
|
||||
type: PropType<PropsAntigas["modo"]>;
|
||||
default: undefined;
|
||||
};
|
||||
rotulo: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
placeholder: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
desabilitado: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
limpavel: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
erro: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
mensagensErro: {
|
||||
type: PropType<string | string[]>;
|
||||
default: undefined;
|
||||
};
|
||||
dica: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
dicaPersistente: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
densidade: {
|
||||
type: PropType<CampoDensidade>;
|
||||
default: undefined;
|
||||
};
|
||||
variante: {
|
||||
type: PropType<CampoVariante>;
|
||||
default: undefined;
|
||||
};
|
||||
min: {
|
||||
type: PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
max: {
|
||||
type: PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
|
||||
onChange?: ((_v: string | null) => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
onInput?: ((_v: string | null) => any) | undefined;
|
||||
onAlterar?: ((_v: string | null) => any) | undefined;
|
||||
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||
onFoco?: (() => any) | undefined;
|
||||
onDesfoco?: (() => any) | undefined;
|
||||
}>, {
|
||||
placeholder: string;
|
||||
modelValue: string | null;
|
||||
value: string | null | undefined;
|
||||
max: string | undefined;
|
||||
min: string | undefined;
|
||||
erro: boolean;
|
||||
rotulo: string;
|
||||
modo: "data" | "dataHora" | undefined;
|
||||
limpavel: boolean;
|
||||
mensagensErro: string | string[];
|
||||
dica: string;
|
||||
dicaPersistente: boolean;
|
||||
densidade: CampoDensidade;
|
||||
variante: CampoVariante;
|
||||
opcoes: {
|
||||
rotulo: string;
|
||||
placeholder?: string;
|
||||
} & {
|
||||
modo?: "data" | "dataHora";
|
||||
limpavel?: boolean;
|
||||
erro?: boolean;
|
||||
mensagensErro?: string | string[];
|
||||
dica?: string;
|
||||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../tipos").CampoDensidade;
|
||||
variante?: import("../../tipos").CampoVariante;
|
||||
};
|
||||
desabilitado: boolean;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
3
dist/types/componentes/EliEntrada/index.d.ts
vendored
3
dist/types/componentes/EliEntrada/index.d.ts
vendored
|
|
@ -1,4 +1,5 @@
|
|||
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||
export { EliEntradaTexto, EliEntradaNumero };
|
||||
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora };
|
||||
export type { PadroesEntradas, TipoEntrada } from "./tiposEntradas";
|
||||
|
|
|
|||
|
|
@ -103,4 +103,242 @@ export declare const registryTabelaCelulas: {
|
|||
}>, {
|
||||
value: number | null | undefined;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
readonly dataHora: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
value: {
|
||||
type: import("vue").PropType<string | null | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
opcoes: {
|
||||
type: import("vue").PropType<{
|
||||
rotulo: string;
|
||||
placeholder?: string;
|
||||
} & {
|
||||
modo?: "data" | "dataHora";
|
||||
limpavel?: boolean;
|
||||
erro?: boolean;
|
||||
mensagensErro?: string | string[];
|
||||
dica?: string;
|
||||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../tipos/campo.js").CampoDensidade;
|
||||
variante?: import("../../tipos/campo.js").CampoVariante;
|
||||
}>;
|
||||
required: false;
|
||||
default: undefined;
|
||||
};
|
||||
modelValue: {
|
||||
type: import("vue").PropType<string | null>;
|
||||
default: null;
|
||||
};
|
||||
modo: {
|
||||
type: import("vue").PropType<"data" | "dataHora" | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
rotulo: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
placeholder: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
desabilitado: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
limpavel: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
erro: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
mensagensErro: {
|
||||
type: import("vue").PropType<string | string[]>;
|
||||
default: undefined;
|
||||
};
|
||||
dica: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
dicaPersistente: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
densidade: {
|
||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoDensidade>;
|
||||
default: undefined;
|
||||
};
|
||||
variante: {
|
||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoVariante>;
|
||||
default: undefined;
|
||||
};
|
||||
min: {
|
||||
type: import("vue").PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
max: {
|
||||
type: import("vue").PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
}>, {
|
||||
attrs: {
|
||||
[x: string]: unknown;
|
||||
};
|
||||
valor: import("vue").WritableComputedRef<string, string>;
|
||||
tipoInput: import("vue").ComputedRef<"date" | "datetime-local">;
|
||||
minLocal: import("vue").ComputedRef<string | undefined>;
|
||||
maxLocal: import("vue").ComputedRef<string | undefined>;
|
||||
opcoesEfetivas: import("vue").ComputedRef<{
|
||||
rotulo: string;
|
||||
placeholder?: string;
|
||||
} & {
|
||||
modo?: "data" | "dataHora";
|
||||
limpavel?: boolean;
|
||||
erro?: boolean;
|
||||
mensagensErro?: string | string[];
|
||||
dica?: string;
|
||||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../tipos/campo.js").CampoDensidade;
|
||||
variante?: import("../../tipos/campo.js").CampoVariante;
|
||||
}>;
|
||||
desabilitadoEfetivo: import("vue").ComputedRef<boolean>;
|
||||
emitCompatFocus: () => void;
|
||||
emitCompatBlur: () => void;
|
||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
"update:value": (_v: string | null) => true;
|
||||
input: (_v: string | null) => true;
|
||||
change: (_v: string | null) => true;
|
||||
"update:modelValue": (_v: string | null) => true;
|
||||
alterar: (_v: string | null) => true;
|
||||
foco: () => true;
|
||||
desfoco: () => true;
|
||||
focus: () => true;
|
||||
blur: () => true;
|
||||
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
value: {
|
||||
type: import("vue").PropType<string | null | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
opcoes: {
|
||||
type: import("vue").PropType<{
|
||||
rotulo: string;
|
||||
placeholder?: string;
|
||||
} & {
|
||||
modo?: "data" | "dataHora";
|
||||
limpavel?: boolean;
|
||||
erro?: boolean;
|
||||
mensagensErro?: string | string[];
|
||||
dica?: string;
|
||||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../tipos/campo.js").CampoDensidade;
|
||||
variante?: import("../../tipos/campo.js").CampoVariante;
|
||||
}>;
|
||||
required: false;
|
||||
default: undefined;
|
||||
};
|
||||
modelValue: {
|
||||
type: import("vue").PropType<string | null>;
|
||||
default: null;
|
||||
};
|
||||
modo: {
|
||||
type: import("vue").PropType<"data" | "dataHora" | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
rotulo: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
placeholder: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
desabilitado: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
limpavel: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
erro: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
mensagensErro: {
|
||||
type: import("vue").PropType<string | string[]>;
|
||||
default: undefined;
|
||||
};
|
||||
dica: {
|
||||
type: StringConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
dicaPersistente: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
densidade: {
|
||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoDensidade>;
|
||||
default: undefined;
|
||||
};
|
||||
variante: {
|
||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoVariante>;
|
||||
default: undefined;
|
||||
};
|
||||
min: {
|
||||
type: import("vue").PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
max: {
|
||||
type: import("vue").PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
|
||||
onChange?: ((_v: string | null) => any) | undefined;
|
||||
onFocus?: (() => any) | undefined;
|
||||
onBlur?: (() => any) | undefined;
|
||||
onInput?: ((_v: string | null) => any) | undefined;
|
||||
onAlterar?: ((_v: string | null) => any) | undefined;
|
||||
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||
onFoco?: (() => any) | undefined;
|
||||
onDesfoco?: (() => any) | undefined;
|
||||
}>, {
|
||||
placeholder: string;
|
||||
modelValue: string | null;
|
||||
value: string | null | undefined;
|
||||
max: string | undefined;
|
||||
min: string | undefined;
|
||||
erro: boolean;
|
||||
rotulo: string;
|
||||
modo: "data" | "dataHora" | undefined;
|
||||
limpavel: boolean;
|
||||
mensagensErro: string | string[];
|
||||
dica: string;
|
||||
dicaPersistente: boolean;
|
||||
densidade: import("../../tipos/campo.js").CampoDensidade;
|
||||
variante: import("../../tipos/campo.js").CampoVariante;
|
||||
opcoes: {
|
||||
rotulo: string;
|
||||
placeholder?: string;
|
||||
} & {
|
||||
modo?: "data" | "dataHora";
|
||||
limpavel?: boolean;
|
||||
erro?: boolean;
|
||||
mensagensErro?: string | string[];
|
||||
dica?: string;
|
||||
dicaPersistente?: boolean;
|
||||
min?: string;
|
||||
max?: string;
|
||||
densidade?: import("../../tipos/campo.js").CampoDensidade;
|
||||
variante?: import("../../tipos/campo.js").CampoVariante;
|
||||
};
|
||||
desabilitado: boolean;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -57,6 +57,28 @@ export type PadroesEntradas = {
|
|||
*/
|
||||
precisao?: number;
|
||||
}>;
|
||||
dataHora: tipoPadraoEntrada<string | null | undefined, {
|
||||
/** Define o tipo de entrada. - `dataHora`: datetime-local - `data`: date */
|
||||
modo?: "data" | "dataHora";
|
||||
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||
limpavel?: boolean;
|
||||
/** Estado de erro (visual). */
|
||||
erro?: boolean;
|
||||
/** Mensagens de erro. */
|
||||
mensagensErro?: string | string[];
|
||||
/** Texto de apoio. */
|
||||
dica?: string;
|
||||
/** Mantém a dica sempre visível. */
|
||||
dicaPersistente?: boolean;
|
||||
/** Valor mínimo permitido (ISO 8601 - offset ou Z). */
|
||||
min?: string;
|
||||
/** Valor máximo permitido (ISO 8601 - offset ou Z). */
|
||||
max?: string;
|
||||
/** Densidade do campo (Vuetify). */
|
||||
densidade?: import("../../tipos").CampoDensidade;
|
||||
/** Variante do v-text-field (Vuetify). */
|
||||
variante?: import("../../tipos").CampoVariante;
|
||||
}>;
|
||||
};
|
||||
/**
|
||||
* União dos tipos de entrada suportados.
|
||||
|
|
|
|||
|
|
@ -1,221 +0,0 @@
|
|||
import { PropType } from "vue";
|
||||
import type { CampoDensidade, CampoVariante } from "../../tipos";
|
||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||
/**
|
||||
* Valor em ISO 8601:
|
||||
* - com offset (ex.: `2026-01-09T13:15:00-03:00`)
|
||||
* - ou UTC absoluto (ex.: `2026-01-09T16:15:00Z`)
|
||||
*/
|
||||
modelValue: {
|
||||
type: PropType<string | null>;
|
||||
default: null;
|
||||
};
|
||||
/**
|
||||
* Define o tipo de entrada.
|
||||
* - `dataHora`: usa `datetime-local`
|
||||
* - `data`: usa `date`
|
||||
*/
|
||||
modo: {
|
||||
type: PropType<"data" | "dataHora">;
|
||||
default: string;
|
||||
};
|
||||
/** Rótulo exibido no v-text-field (Vuetify). */
|
||||
rotulo: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/** Placeholder do input. */
|
||||
placeholder: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/** Desabilita a interação. */
|
||||
desabilitado: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||
limpavel: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/** Estado de erro (visual). */
|
||||
erro: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/** Mensagens de erro. */
|
||||
mensagensErro: {
|
||||
type: PropType<string | string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
/** Texto de apoio. */
|
||||
dica: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/** Mantém a dica sempre visível. */
|
||||
dicaPersistente: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/** Densidade do campo (Vuetify). */
|
||||
densidade: {
|
||||
type: PropType<CampoDensidade>;
|
||||
default: string;
|
||||
};
|
||||
/** Variante do v-text-field (Vuetify). */
|
||||
variante: {
|
||||
type: PropType<CampoVariante>;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* Valor mínimo permitido.
|
||||
* ISO 8601 (offset ou `Z`).
|
||||
*/
|
||||
min: {
|
||||
type: PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* Valor máximo permitido.
|
||||
* ISO 8601 (offset ou `Z`).
|
||||
*/
|
||||
max: {
|
||||
type: PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
}>, {
|
||||
attrs: {
|
||||
[x: string]: unknown;
|
||||
};
|
||||
valor: import("vue").WritableComputedRef<string, string>;
|
||||
emit: ((event: "update:modelValue", _valor: string | null) => void) & ((event: "alterar", _valor: string | null) => void) & ((event: "foco") => void) & ((event: "desfoco") => void);
|
||||
minLocal: import("vue").ComputedRef<string | undefined>;
|
||||
maxLocal: import("vue").ComputedRef<string | undefined>;
|
||||
tipoInput: import("vue").ComputedRef<"date" | "datetime-local">;
|
||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
/** v-model padrão. */
|
||||
"update:modelValue": (_valor: string | null) => true;
|
||||
/** Alias para consumidores que querem um evento semântico. */
|
||||
alterar: (_valor: string | null) => true;
|
||||
foco: () => true;
|
||||
desfoco: () => true;
|
||||
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
/**
|
||||
* Valor em ISO 8601:
|
||||
* - com offset (ex.: `2026-01-09T13:15:00-03:00`)
|
||||
* - ou UTC absoluto (ex.: `2026-01-09T16:15:00Z`)
|
||||
*/
|
||||
modelValue: {
|
||||
type: PropType<string | null>;
|
||||
default: null;
|
||||
};
|
||||
/**
|
||||
* Define o tipo de entrada.
|
||||
* - `dataHora`: usa `datetime-local`
|
||||
* - `data`: usa `date`
|
||||
*/
|
||||
modo: {
|
||||
type: PropType<"data" | "dataHora">;
|
||||
default: string;
|
||||
};
|
||||
/** Rótulo exibido no v-text-field (Vuetify). */
|
||||
rotulo: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/** Placeholder do input. */
|
||||
placeholder: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/** Desabilita a interação. */
|
||||
desabilitado: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||
limpavel: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/** Estado de erro (visual). */
|
||||
erro: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/** Mensagens de erro. */
|
||||
mensagensErro: {
|
||||
type: PropType<string | string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
/** Texto de apoio. */
|
||||
dica: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/** Mantém a dica sempre visível. */
|
||||
dicaPersistente: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/** Densidade do campo (Vuetify). */
|
||||
densidade: {
|
||||
type: PropType<CampoDensidade>;
|
||||
default: string;
|
||||
};
|
||||
/** Variante do v-text-field (Vuetify). */
|
||||
variante: {
|
||||
type: PropType<CampoVariante>;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* Valor mínimo permitido.
|
||||
* ISO 8601 (offset ou `Z`).
|
||||
*/
|
||||
min: {
|
||||
type: PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* Valor máximo permitido.
|
||||
* ISO 8601 (offset ou `Z`).
|
||||
*/
|
||||
max: {
|
||||
type: PropType<string | undefined>;
|
||||
default: undefined;
|
||||
};
|
||||
}>> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((_valor: string | null) => any) | undefined;
|
||||
onAlterar?: ((_valor: string | null) => any) | undefined;
|
||||
onFoco?: (() => any) | undefined;
|
||||
onDesfoco?: (() => any) | undefined;
|
||||
}>, {
|
||||
placeholder: string;
|
||||
modelValue: string | null;
|
||||
modo: "data" | "dataHora";
|
||||
rotulo: string;
|
||||
desabilitado: boolean;
|
||||
limpavel: boolean;
|
||||
erro: boolean;
|
||||
mensagensErro: string | string[];
|
||||
dica: string;
|
||||
dicaPersistente: boolean;
|
||||
densidade: CampoDensidade;
|
||||
variante: CampoVariante;
|
||||
min: string | undefined;
|
||||
max: string | undefined;
|
||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||
/**
|
||||
* EliDataHora
|
||||
*
|
||||
* Campo para entrada de data + hora.
|
||||
*
|
||||
* Modelo:
|
||||
* - O componente **recebe** `modelValue` em ISO 8601 (UTC `Z` ou com offset)
|
||||
* - Converte para horário local para exibir (`date` ou `datetime-local`)
|
||||
* - Ao editar, **emite** ISO 8601 com o **offset local**
|
||||
*/
|
||||
declare const _default: typeof __VLS_export;
|
||||
export default _default;
|
||||
2
dist/types/componentes/data_hora/index.d.ts
vendored
2
dist/types/componentes/data_hora/index.d.ts
vendored
|
|
@ -1 +1 @@
|
|||
export { default as EliDataHora } from "./EliDataHora.vue";
|
||||
export { default as EliEntradaDataHora } from "../EliEntrada/EliEntradaDataHora.vue";
|
||||
|
|
|
|||
6
dist/types/index.d.ts
vendored
6
dist/types/index.d.ts
vendored
|
|
@ -5,16 +5,14 @@ import { EliBotao } from "./componentes/botao";
|
|||
import { EliBadge } from "./componentes/indicador";
|
||||
import { EliInput } from "./componentes/campo";
|
||||
import { EliCartao } from "./componentes/cartao";
|
||||
import { EliDataHora } from "./componentes/data_hora";
|
||||
import { EliTabela } from "./componentes/EliTabela";
|
||||
import { EliEntradaTexto, EliEntradaNumero } from "./componentes/EliEntrada";
|
||||
import { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora } from "./componentes/EliEntrada";
|
||||
export { EliOlaMundo };
|
||||
export { EliBotao };
|
||||
export { EliBadge };
|
||||
export { EliInput };
|
||||
export { EliCartao };
|
||||
export { EliDataHora };
|
||||
export { EliTabela };
|
||||
export { EliEntradaTexto, EliEntradaNumero };
|
||||
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora };
|
||||
declare const EliVue: Plugin;
|
||||
export default EliVue;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "eli-vue",
|
||||
"version": "0.1.58",
|
||||
"version": "0.1.60",
|
||||
"private": false,
|
||||
"main": "./dist/eli-vue.umd.js",
|
||||
"module": "./dist/eli-vue.es.js",
|
||||
|
|
|
|||
220
src/componentes/EliEntrada/EliEntradaDataHora.vue
Normal file
220
src/componentes/EliEntrada/EliEntradaDataHora.vue
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<div class="eli-data-hora">
|
||||
<v-text-field
|
||||
v-model="valor"
|
||||
:type="tipoInput"
|
||||
:label="opcoesEfetivas.rotulo"
|
||||
:placeholder="opcoesEfetivas.placeholder"
|
||||
:disabled="desabilitadoEfetivo"
|
||||
:clearable="Boolean(opcoesEfetivas.limpavel)"
|
||||
:error="Boolean(opcoesEfetivas.erro)"
|
||||
:error-messages="opcoesEfetivas.mensagensErro"
|
||||
:hint="opcoesEfetivas.dica"
|
||||
:persistent-hint="Boolean(opcoesEfetivas.dicaPersistente)"
|
||||
:density="opcoesEfetivas.densidade ?? 'comfortable'"
|
||||
:variant="opcoesEfetivas.variante ?? 'outlined'"
|
||||
:min="minLocal"
|
||||
:max="maxLocal"
|
||||
v-bind="attrs"
|
||||
@focus="emitCompatFocus"
|
||||
@blur="emitCompatBlur"
|
||||
/>
|
||||
</div>
|
||||
</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";
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliEntradaDataHora",
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
// --- Novo padrão EliEntrada ---
|
||||
value: {
|
||||
type: String as PropType<EntradaDataHora["value"]>,
|
||||
default: undefined,
|
||||
},
|
||||
opcoes: {
|
||||
type: Object as PropType<EntradaDataHora["opcoes"]>,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
|
||||
// --- Compatibilidade com componente antigo EliDataHora ---
|
||||
modelValue: {
|
||||
type: String as PropType<string | null>,
|
||||
default: null,
|
||||
},
|
||||
modo: { type: String as PropType<PropsAntigas["modo"]>, default: undefined },
|
||||
rotulo: { type: String, default: undefined },
|
||||
placeholder: { type: String, default: undefined },
|
||||
desabilitado: { type: Boolean, default: undefined },
|
||||
limpavel: { type: Boolean, default: undefined },
|
||||
erro: { type: Boolean, default: undefined },
|
||||
mensagensErro: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
default: undefined,
|
||||
},
|
||||
dica: { type: String, default: undefined },
|
||||
dicaPersistente: { type: Boolean, default: undefined },
|
||||
densidade: { type: String as PropType<CampoDensidade>, default: undefined },
|
||||
variante: { type: String as PropType<CampoVariante>, default: undefined },
|
||||
min: { type: String as PropType<string | undefined>, default: undefined },
|
||||
max: { type: String as PropType<string | undefined>, default: undefined },
|
||||
},
|
||||
emits: {
|
||||
// Novo padrão
|
||||
"update:value": (_v: string | null) => true,
|
||||
input: (_v: string | null) => true, // compat Vue2
|
||||
change: (_v: string | null) => true,
|
||||
|
||||
// Compat antigo
|
||||
"update:modelValue": (_v: string | null) => true,
|
||||
alterar: (_v: string | null) => true,
|
||||
foco: () => true,
|
||||
desfoco: () => true,
|
||||
focus: () => true,
|
||||
blur: () => true,
|
||||
},
|
||||
setup(props, { emit, attrs }) {
|
||||
const opcoesEfetivas = computed<EntradaDataHora["opcoes"]>(() => {
|
||||
// 1) se veio `opcoes` (novo), usa
|
||||
if (props.opcoes) return props.opcoes;
|
||||
|
||||
// 2) fallback: constrói a partir das props antigas
|
||||
return {
|
||||
rotulo: props.rotulo ?? "Data e hora",
|
||||
placeholder: props.placeholder ?? "",
|
||||
modo: props.modo ?? "dataHora",
|
||||
limpavel: props.limpavel,
|
||||
erro: props.erro,
|
||||
mensagensErro: props.mensagensErro,
|
||||
dica: props.dica,
|
||||
dicaPersistente: props.dicaPersistente,
|
||||
densidade: props.densidade,
|
||||
variante: props.variante,
|
||||
min: props.min,
|
||||
max: props.max,
|
||||
};
|
||||
});
|
||||
|
||||
const modoEfetivo = computed<"data" | "dataHora">(
|
||||
() => opcoesEfetivas.value.modo ?? "dataHora"
|
||||
);
|
||||
|
||||
const desabilitadoEfetivo = computed<boolean>(() => Boolean(props.desabilitado));
|
||||
|
||||
const tipoInput = computed<"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 dayjs(valorIso).format("YYYY-MM-DDTHH:mm");
|
||||
}
|
||||
|
||||
function inputDatetimeParaIsoLocal(valorInput: string): string {
|
||||
if (modoEfetivo.value === "data") {
|
||||
return dayjs(`${valorInput}T00:00`).format();
|
||||
}
|
||||
return dayjs(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;
|
||||
});
|
||||
|
||||
const valor = computed<string>({
|
||||
get: () => {
|
||||
if (!effectiveModelValue.value) return "";
|
||||
return isoParaInputDatetime(effectiveModelValue.value);
|
||||
},
|
||||
set: (v) => {
|
||||
const normalizado = v && v.length > 0 ? v : null;
|
||||
if (!normalizado) {
|
||||
emit("update:value", null);
|
||||
emit("input", null);
|
||||
emit("change", null);
|
||||
|
||||
emit("update:modelValue", null);
|
||||
emit("alterar", null);
|
||||
return;
|
||||
}
|
||||
|
||||
const valorEmitido = inputDatetimeParaIsoLocal(normalizado);
|
||||
|
||||
emit("update:value", valorEmitido);
|
||||
emit("input", valorEmitido);
|
||||
emit("change", 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 maxLocal = computed<string | undefined>(() => {
|
||||
const max = opcoesEfetivas.value.max;
|
||||
if (!max) return undefined;
|
||||
return isoParaInputDatetime(max);
|
||||
});
|
||||
|
||||
function emitCompatFocus() {
|
||||
emit("foco");
|
||||
emit("focus");
|
||||
}
|
||||
|
||||
function emitCompatBlur() {
|
||||
emit("desfoco");
|
||||
emit("blur");
|
||||
}
|
||||
|
||||
return {
|
||||
attrs,
|
||||
valor,
|
||||
tipoInput,
|
||||
minLocal,
|
||||
maxLocal,
|
||||
opcoesEfetivas,
|
||||
desabilitadoEfetivo,
|
||||
emitCompatFocus,
|
||||
emitCompatBlur,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.eli-data-hora {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
176
src/componentes/EliEntrada/README.md
Normal file
176
src/componentes/EliEntrada/README.md
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
# EliEntrada (Padrão de Entradas)
|
||||
|
||||
Esta pasta define o **padrão EliEntrada**: um conjunto de componentes de entrada (inputs) com uma **API uniforme**.
|
||||
|
||||
> TL;DR
|
||||
> - Toda entrada recebe **`value`** (estado) e **`opcoes`** (configuração).
|
||||
> - O padrão de uso é **`v-model:value`**.
|
||||
> - Mantemos compatibilidade com Vue 2 via evento **`input`**.
|
||||
|
||||
---
|
||||
|
||||
## Para humanos (uso no dia-a-dia)
|
||||
|
||||
### Conceito
|
||||
|
||||
Um componente **EliEntrada** recebe **duas propriedades**:
|
||||
|
||||
- `value`: o valor atual do campo (entrada e saída)
|
||||
- `opcoes`: um objeto que configura o componente (rótulo, placeholder e opções específicas do tipo)
|
||||
|
||||
Essa padronização facilita:
|
||||
- gerar formulários dinamicamente
|
||||
- trocar tipos de entrada com o mínimo de refactor
|
||||
- documentar e tipar de forma previsível
|
||||
|
||||
### Tipos e contratos
|
||||
|
||||
Os contratos ficam em: [`tiposEntradas.ts`](./tiposEntradas.ts)
|
||||
|
||||
- `PadroesEntradas`: mapa de tipos suportados (ex.: `texto`, `numero`, `dataHora`)
|
||||
- `TipoEntrada`: união das chaves do mapa (ex.: `"texto" | "numero" | "dataHora"`)
|
||||
|
||||
### Componentes disponíveis
|
||||
|
||||
#### 1) `EliEntradaTexto`
|
||||
|
||||
**Value**: `string | null | undefined`
|
||||
|
||||
**Opções** (além de `rotulo`/`placeholder`):
|
||||
- `limiteCaracteres?: number`
|
||||
|
||||
Exemplo:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<EliEntradaTexto
|
||||
v-model:value="nome"
|
||||
:opcoes="{ rotulo: 'Nome', placeholder: 'Digite seu nome', limiteCaracteres: 50 }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { EliEntradaTexto } from '@/index'
|
||||
|
||||
const nome = ref<string | null>(null)
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 2) `EliEntradaNumero`
|
||||
|
||||
**Value**: `number | null | undefined`
|
||||
|
||||
**Opções**:
|
||||
- `precisao?: number`
|
||||
- `1` => inteiro
|
||||
- `0.1` => 1 casa decimal
|
||||
- `0.01` => 2 casas decimais
|
||||
- `prefixo?: string` (ex.: `"R$"`)
|
||||
- `sufixo?: string` (ex.: `"kg"`)
|
||||
|
||||
Comportamento:
|
||||
- Quando `precisao < 1` o componente entra em modo **fixed-point**: você digita números continuamente e ele insere a vírgula automaticamente.
|
||||
- O que é exibido sempre corresponde ao `value` emitido.
|
||||
|
||||
Exemplos:
|
||||
|
||||
```vue
|
||||
<EliEntradaNumero
|
||||
v-model:value="quantidade"
|
||||
:opcoes="{ rotulo: 'Quantidade', placeholder: 'Ex: 10', precisao: 1, sufixo: 'kg' }"
|
||||
/>
|
||||
|
||||
<EliEntradaNumero
|
||||
v-model:value="preco"
|
||||
:opcoes="{ rotulo: 'Preço', placeholder: 'Digite', precisao: 0.01, prefixo: 'R$' }"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 3) `EliEntradaDataHora`
|
||||
|
||||
**Value**: `string | null | undefined` (ISO 8601 com offset ou `Z`)
|
||||
|
||||
**Opções**:
|
||||
- `modo?: "data" | "dataHora"` (default: `dataHora`)
|
||||
- `min?: string` (ISO)
|
||||
- `max?: string` (ISO)
|
||||
- `limpavel?: boolean`
|
||||
- `erro?: boolean`
|
||||
- `mensagensErro?: string | string[]`
|
||||
- `dica?: string`
|
||||
- `dicaPersistente?: boolean`
|
||||
- `densidade?: CampoDensidade`
|
||||
- `variante?: CampoVariante`
|
||||
|
||||
Importante:
|
||||
- O input nativo `datetime-local` não carrega timezone.
|
||||
- O componente converte ISO (Z/offset) para **local** para exibir.
|
||||
- Ao alterar, emite ISO 8601 com o **offset local**.
|
||||
|
||||
Exemplo:
|
||||
|
||||
```vue
|
||||
<EliEntradaDataHora
|
||||
v-model:value="agendamento"
|
||||
:opcoes="{ rotulo: 'Agendar', modo: 'dataHora', min, max, limpavel: true }"
|
||||
/>
|
||||
```
|
||||
|
||||
### Compatibilidade Vue 2 / Vue 3
|
||||
|
||||
Padrão recomendado (Vue 3):
|
||||
- `v-model:value`
|
||||
|
||||
Compat Vue 2:
|
||||
- todos os EliEntradas também emitem `input`.
|
||||
- isso permite consumir com o padrão `value + input` quando necessário.
|
||||
|
||||
### Playground
|
||||
|
||||
- Entradas: `src/playground/entradas.playground.vue`
|
||||
- Data/hora: `src/playground/data_hora.playground.vue`
|
||||
|
||||
---
|
||||
|
||||
## Para IA (contratos, invariantes e padrões de evolução)
|
||||
|
||||
### Contratos (não quebrar)
|
||||
|
||||
1) **Todo EliEntrada tem**:
|
||||
- prop `value`
|
||||
- prop `opcoes`
|
||||
- evento `update:value`
|
||||
|
||||
2) **Compatibilidade**:
|
||||
- emitir `input` (compat Vue 2) é obrigatório
|
||||
|
||||
3) **Tipagem**:
|
||||
- `PadroesEntradas` é a fonte única do contrato (value/opcoes)
|
||||
- `TipoEntrada = keyof PadroesEntradas`
|
||||
|
||||
4) **Sanitização/Normalização**:
|
||||
- `EliEntradaNumero` deve bloquear caracteres inválidos e manter display coerente com `value`
|
||||
- `EliEntradaDataHora` deve receber/emitir ISO e converter para local apenas para exibição
|
||||
|
||||
### Como adicionar uma nova entrada (checklist)
|
||||
|
||||
1) Adicionar chave em `PadroesEntradas` em `tiposEntradas.ts`
|
||||
2) Criar `EliEntradaX.vue` seguindo o padrão:
|
||||
- `value` + `opcoes`
|
||||
- emite `update:value`, `input`, `change`
|
||||
3) Exportar no `src/componentes/EliEntrada/index.ts`
|
||||
4) Registrar no `src/componentes/EliEntrada/registryEliEntradas.ts`
|
||||
5) Criar/atualizar playground (`src/playground/*.playground.vue`)
|
||||
6) Validar `pnpm -s run build:types` e `pnpm -s run build`
|
||||
|
||||
### Padrões de mudança (refactors seguros)
|
||||
|
||||
- Se precisar mudar o contrato, faça **migração incremental**:
|
||||
- manter props/eventos antigos como fallback temporário
|
||||
- atualizar playground e exemplos
|
||||
- rodar `build:types` para garantir geração de `.d.ts`
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||
|
||||
export { EliEntradaTexto, EliEntradaNumero };
|
||||
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora };
|
||||
export type { PadroesEntradas, TipoEntrada } from "./tiposEntradas";
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@ import type { Component } from "vue";
|
|||
|
||||
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||
|
||||
import type { TipoEntrada } from "./tiposEntradas";
|
||||
|
||||
export const registryTabelaCelulas = {
|
||||
texto: EliEntradaTexto,
|
||||
numero: EliEntradaNumero,
|
||||
dataHora: EliEntradaDataHora,
|
||||
} as const satisfies Record<TipoEntrada, Component>;
|
||||
|
|
|
|||
|
|
@ -72,6 +72,41 @@ export type PadroesEntradas = {
|
|||
precisao?: number
|
||||
}
|
||||
>
|
||||
|
||||
dataHora: tipoPadraoEntrada<
|
||||
string | null | undefined,
|
||||
{
|
||||
/** Define o tipo de entrada. - `dataHora`: datetime-local - `data`: date */
|
||||
modo?: "data" | "dataHora"
|
||||
|
||||
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||
limpavel?: boolean
|
||||
|
||||
/** Estado de erro (visual). */
|
||||
erro?: boolean
|
||||
|
||||
/** Mensagens de erro. */
|
||||
mensagensErro?: string | string[]
|
||||
|
||||
/** Texto de apoio. */
|
||||
dica?: string
|
||||
|
||||
/** Mantém a dica sempre visível. */
|
||||
dicaPersistente?: boolean
|
||||
|
||||
/** Valor mínimo permitido (ISO 8601 - offset ou Z). */
|
||||
min?: string
|
||||
|
||||
/** Valor máximo permitido (ISO 8601 - offset ou Z). */
|
||||
max?: string
|
||||
|
||||
/** Densidade do campo (Vuetify). */
|
||||
densidade?: import("../../tipos").CampoDensidade
|
||||
|
||||
/** Variante do v-text-field (Vuetify). */
|
||||
variante?: import("../../tipos").CampoVariante
|
||||
}
|
||||
>
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,231 +0,0 @@
|
|||
<template>
|
||||
<div class="eli-data-hora">
|
||||
<!--
|
||||
Implementação propositalmente “simples” e estável:
|
||||
- Usa o input nativo `datetime-local` (ou `date`) dentro do v-text-field.
|
||||
- Evita depender de componentes experimentais (labs) do Vuetify.
|
||||
- Recebe ISO 8601 (UTC/offset) e emite ISO 8601 com offset local.
|
||||
|
||||
Observação importante:
|
||||
- `datetime-local` NÃO armazena timezone.
|
||||
- Este componente converte a entrada para local para exibir ao usuário.
|
||||
-->
|
||||
<v-text-field
|
||||
v-model="valor"
|
||||
:type="tipoInput"
|
||||
:label="rotulo"
|
||||
:placeholder="placeholder"
|
||||
:disabled="desabilitado"
|
||||
:clearable="limpavel"
|
||||
:error="erro"
|
||||
:error-messages="mensagensErro"
|
||||
:hint="dica"
|
||||
:persistent-hint="dicaPersistente"
|
||||
:density="densidade"
|
||||
:variant="variante"
|
||||
:min="minLocal"
|
||||
:max="maxLocal"
|
||||
v-bind="attrs"
|
||||
@focus="emit('foco')"
|
||||
@blur="emit('desfoco')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import type { CampoDensidade, CampoVariante } from "../../tipos";
|
||||
|
||||
/**
|
||||
* EliDataHora
|
||||
*
|
||||
* Campo para entrada de data + hora.
|
||||
*
|
||||
* Modelo:
|
||||
* - O componente **recebe** `modelValue` em ISO 8601 (UTC `Z` ou com offset)
|
||||
* - Converte para horário local para exibir (`date` ou `datetime-local`)
|
||||
* - Ao editar, **emite** ISO 8601 com o **offset local**
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: "EliDataHora",
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
/**
|
||||
* Valor em ISO 8601:
|
||||
* - com offset (ex.: `2026-01-09T13:15:00-03:00`)
|
||||
* - ou UTC absoluto (ex.: `2026-01-09T16:15:00Z`)
|
||||
*/
|
||||
modelValue: {
|
||||
type: String as PropType<string | null>,
|
||||
default: null,
|
||||
},
|
||||
|
||||
/**
|
||||
* Define o tipo de entrada.
|
||||
* - `dataHora`: usa `datetime-local`
|
||||
* - `data`: usa `date`
|
||||
*/
|
||||
modo: {
|
||||
type: String as PropType<"data" | "dataHora">,
|
||||
default: "dataHora",
|
||||
},
|
||||
|
||||
/** Rótulo exibido no v-text-field (Vuetify). */
|
||||
rotulo: {
|
||||
type: String,
|
||||
default: "Data e hora",
|
||||
},
|
||||
|
||||
/** Placeholder do input. */
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
|
||||
/** Desabilita a interação. */
|
||||
desabilitado: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||
limpavel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
/** Estado de erro (visual). */
|
||||
erro: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
/** Mensagens de erro. */
|
||||
mensagensErro: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
/** Texto de apoio. */
|
||||
dica: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
|
||||
/** Mantém a dica sempre visível. */
|
||||
dicaPersistente: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
/** Densidade do campo (Vuetify). */
|
||||
densidade: {
|
||||
type: String as PropType<CampoDensidade>,
|
||||
default: "comfortable",
|
||||
},
|
||||
|
||||
/** Variante do v-text-field (Vuetify). */
|
||||
variante: {
|
||||
type: String as PropType<CampoVariante>,
|
||||
default: "outlined",
|
||||
},
|
||||
|
||||
/**
|
||||
* Valor mínimo permitido.
|
||||
* ISO 8601 (offset ou `Z`).
|
||||
*/
|
||||
min: {
|
||||
// ISO 8601 (offset ou Z)
|
||||
type: String as PropType<string | undefined>,
|
||||
default: undefined,
|
||||
},
|
||||
|
||||
/**
|
||||
* Valor máximo permitido.
|
||||
* ISO 8601 (offset ou `Z`).
|
||||
*/
|
||||
max: {
|
||||
// ISO 8601 (offset ou Z)
|
||||
type: String as PropType<string | undefined>,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
|
||||
emits: {
|
||||
/** v-model padrão. */
|
||||
"update:modelValue": (_valor: string | null) => true,
|
||||
/** Alias para consumidores que querem um evento semântico. */
|
||||
alterar: (_valor: string | null) => true,
|
||||
foco: () => true,
|
||||
desfoco: () => true,
|
||||
},
|
||||
|
||||
setup(props, { emit, attrs }) {
|
||||
const tipoInput = computed<"date" | "datetime-local">(() =>
|
||||
props.modo === "data" ? "date" : "datetime-local"
|
||||
);
|
||||
|
||||
// Converte ISO (Z/offset) para o formato que o `datetime-local` aceita.
|
||||
function isoParaInputDatetime(valorIso: string): string {
|
||||
// `dayjs(valorIso)` interpreta ISO com timezone e converte para o local do usuário.
|
||||
if (props.modo === "data") {
|
||||
return dayjs(valorIso).format("YYYY-MM-DD");
|
||||
}
|
||||
|
||||
return dayjs(valorIso).format("YYYY-MM-DDTHH:mm");
|
||||
}
|
||||
|
||||
// Converte o valor do input (`YYYY-MM-DDTHH:mm`) para ISO 8601 com offset local.
|
||||
function inputDatetimeParaIsoLocal(valorInput: string): string {
|
||||
// `format()` retorna ISO 8601 com offset local.
|
||||
// Em modo `data`, normalizamos para o começo do dia (00:00:00) no fuso local.
|
||||
if (props.modo === "data") {
|
||||
return dayjs(`${valorInput}T00:00`).format();
|
||||
}
|
||||
|
||||
return dayjs(valorInput).format();
|
||||
}
|
||||
|
||||
const valor = computed<string>({
|
||||
get: () => {
|
||||
if (!props.modelValue) return "";
|
||||
return isoParaInputDatetime(props.modelValue);
|
||||
},
|
||||
set: (v) => {
|
||||
// O `datetime-local` entrega string ou "" quando limpo.
|
||||
const normalizado = v && v.length > 0 ? v : null;
|
||||
if (!normalizado) {
|
||||
emit("update:modelValue", null);
|
||||
emit("alterar", null);
|
||||
return;
|
||||
}
|
||||
|
||||
const valorEmitido = inputDatetimeParaIsoLocal(normalizado);
|
||||
emit("update:modelValue", valorEmitido);
|
||||
emit("alterar", valorEmitido);
|
||||
},
|
||||
});
|
||||
|
||||
const minLocal = computed<string | undefined>(() => {
|
||||
if (!props.min) return undefined;
|
||||
return isoParaInputDatetime(props.min);
|
||||
});
|
||||
|
||||
const maxLocal = computed<string | undefined>(() => {
|
||||
if (!props.max) return undefined;
|
||||
return isoParaInputDatetime(props.max);
|
||||
});
|
||||
|
||||
return { attrs, valor, emit, minLocal, maxLocal, tipoInput };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.eli-data-hora {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1 +1 @@
|
|||
export { default as EliDataHora } from "./EliDataHora.vue";
|
||||
export { default as EliEntradaDataHora } from "../EliEntrada/EliEntradaDataHora.vue";
|
||||
|
|
@ -5,18 +5,16 @@ import { EliBotao } from "./componentes/botao";
|
|||
import { EliBadge } from "./componentes/indicador";
|
||||
import { EliInput } from "./componentes/campo";
|
||||
import { EliCartao } from "./componentes/cartao";
|
||||
import { EliDataHora } from "./componentes/data_hora";
|
||||
import { EliTabela } from "./componentes/EliTabela";
|
||||
import { EliEntradaTexto, EliEntradaNumero } from "./componentes/EliEntrada";
|
||||
import { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora } from "./componentes/EliEntrada";
|
||||
|
||||
export { EliOlaMundo };
|
||||
export { EliBotao };
|
||||
export { EliBadge };
|
||||
export { EliInput };
|
||||
export { EliCartao };
|
||||
export { EliDataHora };
|
||||
export { EliTabela };
|
||||
export { EliEntradaTexto, EliEntradaNumero };
|
||||
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora };
|
||||
|
||||
const EliVue: Plugin = {
|
||||
install(app: App) {
|
||||
|
|
@ -25,10 +23,10 @@ const EliVue: Plugin = {
|
|||
app.component("EliBadge", EliBadge);
|
||||
app.component("EliInput", EliInput);
|
||||
app.component("EliCartao", EliCartao);
|
||||
app.component("EliDataHora", EliDataHora);
|
||||
app.component("EliTabela", EliTabela);
|
||||
app.component("EliEntradaTexto", EliEntradaTexto);
|
||||
app.component("EliEntradaNumero", EliEntradaNumero);
|
||||
app.component("EliEntradaDataHora", EliEntradaDataHora);
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,52 @@
|
|||
<section class="stack">
|
||||
<h2>EliDataHora (entrada de data e hora)</h2>
|
||||
|
||||
<h3 class="mt-2">Novo padrão (EliEntradaDataHora: value + opcoes)</h3>
|
||||
|
||||
<div class="grid">
|
||||
<!-- variação 1: padrão -->
|
||||
<EliDataHora v-model="dataHora" />
|
||||
<EliEntradaDataHora
|
||||
v-model:value="dataHora"
|
||||
:opcoes="{
|
||||
rotulo: 'Data e hora (novo)',
|
||||
placeholder: 'Selecione',
|
||||
modo: 'dataHora',
|
||||
}"
|
||||
/>
|
||||
|
||||
<EliEntradaDataHora
|
||||
v-model:value="somenteData"
|
||||
:opcoes="{
|
||||
rotulo: 'Somente data (novo)',
|
||||
modo: 'data',
|
||||
dica: 'Emite ISO com offset local às 00:00:00',
|
||||
dicaPersistente: true,
|
||||
}"
|
||||
/>
|
||||
|
||||
<EliEntradaDataHora
|
||||
v-model:value="dataHoraComLimite"
|
||||
:opcoes="{
|
||||
rotulo: 'Agendamento (novo, com limite)',
|
||||
modo: 'dataHora',
|
||||
min,
|
||||
max,
|
||||
limpavel: true,
|
||||
dica: 'Escolha um horário dentro do intervalo',
|
||||
dicaPersistente: true,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-divider class="my-6" />
|
||||
|
||||
<h3 class="mt-2">Compat (API antiga usando o mesmo componente)</h3>
|
||||
|
||||
<div class="grid">
|
||||
<!-- variação 1: padrão (API antiga via props) -->
|
||||
<EliEntradaDataHora v-model="dataHora" />
|
||||
|
||||
<!-- variação 1a: somente data -->
|
||||
<EliDataHora
|
||||
<EliEntradaDataHora
|
||||
v-model="somenteData"
|
||||
modo="data"
|
||||
rotulo="Somente data"
|
||||
|
|
@ -16,7 +56,7 @@
|
|||
/>
|
||||
|
||||
<!-- variação 1b: recebendo UTC (Z) e exibindo local -->
|
||||
<EliDataHora
|
||||
<EliEntradaDataHora
|
||||
v-model="dataHoraUtcEntrada"
|
||||
rotulo="Entrada vinda do backend (UTC/Z)"
|
||||
dica="O valor chega em UTC, mas o campo mostra em horário local"
|
||||
|
|
@ -24,7 +64,7 @@
|
|||
/>
|
||||
|
||||
<!-- variação 2: com limites min/max -->
|
||||
<EliDataHora
|
||||
<EliEntradaDataHora
|
||||
v-model="dataHoraComLimite"
|
||||
rotulo="Agendamento (com limite)"
|
||||
:min="min"
|
||||
|
|
@ -35,21 +75,17 @@
|
|||
/>
|
||||
|
||||
<!-- variação 3: estado de erro + desabilitado -->
|
||||
<EliDataHora
|
||||
<EliEntradaDataHora
|
||||
v-model="dataHoraObrigatoria"
|
||||
rotulo="Obrigatório"
|
||||
:erro="!dataHoraObrigatoria"
|
||||
:mensagens-erro="!dataHoraObrigatoria ? ['Obrigatório'] : []"
|
||||
/>
|
||||
|
||||
<EliDataHora
|
||||
v-model="dataHoraDesabilitado"
|
||||
rotulo="Desabilitado"
|
||||
desabilitado
|
||||
/>
|
||||
<EliEntradaDataHora v-model="dataHoraDesabilitado" rotulo="Desabilitado" desabilitado />
|
||||
|
||||
<!-- variação 4: saída sempre em ISO com offset local -->
|
||||
<EliDataHora
|
||||
<EliEntradaDataHora
|
||||
v-model="dataHoraUtcEmitida"
|
||||
rotulo="Emitindo ISO com offset local"
|
||||
dica="Ao alterar, o v-model vira ISO 8601 com offset do seu fuso"
|
||||
|
|
@ -63,11 +99,12 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from "vue";
|
||||
import { EliDataHora } from "@/componentes/data_hora";
|
||||
import { EliEntradaDataHora } from "@/componentes/EliEntrada";
|
||||
import { VDivider } from "vuetify/components";
|
||||
|
||||
export default defineComponent({
|
||||
name: "DataHoraPlayground",
|
||||
components: { EliDataHora },
|
||||
components: { EliEntradaDataHora, VDivider },
|
||||
setup() {
|
||||
const dataHora = ref<string | null>("2026-01-09T13:15:00-03:00");
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue