This commit is contained in:
Luiz Silva 2026-01-29 10:51:13 -03:00
parent de7c19be24
commit 6aedf2469f
20 changed files with 2032 additions and 1541 deletions

2
dist/eli-vue.css vendored

File diff suppressed because one or more lines are too long

2074
dist/eli-vue.es.js vendored

File diff suppressed because it is too large Load diff

30
dist/eli-vue.umd.js vendored

File diff suppressed because one or more lines are too long

View 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;

View file

@ -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";

View file

@ -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>;
};

View file

@ -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.

View file

@ -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;

View file

@ -1 +1 @@
export { default as EliDataHora } from "./EliDataHora.vue";
export { default as EliEntradaDataHora } from "../EliEntrada/EliEntradaDataHora.vue";

View file

@ -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;

View file

@ -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",

View 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>

View 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`

View file

@ -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";

View file

@ -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>;

View file

@ -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
}
>
}
/**

View file

@ -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>

View file

@ -1 +1 @@
export { default as EliDataHora } from "./EliDataHora.vue";
export { default as EliEntradaDataHora } from "../EliEntrada/EliEntradaDataHora.vue";

View file

@ -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);
},
};

View file

@ -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");