build

README.md

@@ -43,6 +43,10 @@ src/
       EliBadge.vue
       index.ts
       README.md
+    data_hora/
+      EliDataHora.vue
+      index.ts
+      README.md
   tipos/
     botao.ts
     campo.ts
@@ -124,7 +128,7 @@ createApp(App)
 ### 2) Importação direta de componentes
 
 ```ts
-import { EliBotao, EliInput, EliBadge } from "eli-vue";
+import { EliBotao, EliInput, EliBadge, EliDataHora } from "eli-vue";
 ```
 
 ## Exemplos rápidos de uso
@@ -166,6 +170,33 @@ export default defineComponent({
 </template>
 ```
 
+### EliDataHora
+
+> Entrada/saída sempre em **ISO 8601**.
+> - Aceita UTC absoluto (`Z`) ou com offset.
+> - Emite ISO com **offset local**.
+
+```vue
+<template>
+  <EliDataHora v-model="agendamento" rotulo="Agendamento" />
+  <EliDataHora v-model="nascimento" modo="data" rotulo="Nascimento" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { EliDataHora } from "eli-vue";
+
+export default defineComponent({
+  components: { EliDataHora },
+  setup() {
+    const agendamento = ref<string | null>("2026-01-09T16:15:00Z");
+    const nascimento = ref<string | null>("2026-01-09T00:00:00-03:00");
+    return { agendamento, nascimento };
+  },
+});
+</script>
+```
+
 ## Troubleshooting (problemas comuns)
 
 ### 1) "Failed to resolve component" / componente não registrado

dist/eli-vue.css

@@ -1 +1 @@
-[data-v-de2fbf2f] .v-badge__badge,[data-v-de2fbf2f] .v-badge__content{border-radius:var(--eli-badge-radius)!important}.eli-input[data-v-2f57f5c8]{width:100%}.checkbox-group[data-v-2f57f5c8]{display:flex;gap:8px;flex-wrap:wrap}.cursor-pointer[data-v-2f57f5c8]{cursor:pointer}.eli-cartao[data-v-6c492bd9]{border-radius:12px}.eli-cartao__titulo[data-v-6c492bd9]{display:flex;align-items:center;justify-content:space-between;gap:12px}.eli-cartao__titulo-texto[data-v-6c492bd9]{min-width:0}.eli-cartao__conteudo[data-v-6c492bd9]{padding-top:8px}.eli-cartao__acoes[data-v-6c492bd9]{padding-top:0}.eli-cartao--cancelado[data-v-6c492bd9]{opacity:.85}.eli-data-hora[data-v-523063f3]{width:100%}
+[data-v-de2fbf2f] .v-badge__badge,[data-v-de2fbf2f] .v-badge__content{border-radius:var(--eli-badge-radius)!important}.eli-input[data-v-2f57f5c8]{width:100%}.checkbox-group[data-v-2f57f5c8]{display:flex;gap:8px;flex-wrap:wrap}.cursor-pointer[data-v-2f57f5c8]{cursor:pointer}.eli-cartao[data-v-6c492bd9]{border-radius:12px}.eli-cartao__titulo[data-v-6c492bd9]{display:flex;align-items:center;justify-content:space-between;gap:12px}.eli-cartao__titulo-texto[data-v-6c492bd9]{min-width:0}.eli-cartao__conteudo[data-v-6c492bd9]{padding-top:8px}.eli-cartao__acoes[data-v-6c492bd9]{padding-top:0}.eli-cartao--cancelado[data-v-6c492bd9]{opacity:.85}.eli-data-hora[data-v-71afabb6]{width:100%}

dist/eli-vue.es.js

@@ -1094,7 +1094,7 @@ function ct(e, t, c, y, v, w) {
     }), null, 16, ["modelValue", "type", "label", "placeholder", "disabled", "clearable", "error", "error-messages", "hint", "persistent-hint", "density", "variant", "min", "max"])
   ]);
 }
-const pt = /* @__PURE__ */ J(ft, [["render", ct], ["__scopeId", "data-v-523063f3"]]), kt = {
+const pt = /* @__PURE__ */ J(ft, [["render", ct], ["__scopeId", "data-v-71afabb6"]]), kt = {
   install(e) {
     e.component("EliOlaMundo", tt), e.component("EliBotao", Ve), e.component("EliBadge", le), e.component("EliInput", Se), e.component("EliCartao", lt), e.component("EliDataHora", pt);
   }

dist/types/componentes/data_hora/EliDataHora.vue.d.ts

@@ -213,9 +213,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
  * 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 no `datetime-local`.
- * - Ao editar, **emite** ISO 8601 com o **offset local**.
+ * - 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;

package.json

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

src/componentes/data_hora/EliDataHora.vue

@@ -2,13 +2,13 @@
   <div class="eli-data-hora">
     <!--
       Implementação propositalmente “simples” e estável:
-      - Usa o input nativo `datetime-local` dentro do v-text-field.
+      - Usa o input nativo `datetime-local` (ou `date`) dentro do v-text-field.
       - Evita depender de componentes experimentais (labs) do Vuetify.
-      - Mantém v-model como string ISO local: `YYYY-MM-DDTHH:mm`.
+      - Recebe ISO 8601 (UTC/offset) e emite ISO 8601 com offset local.
 
       Observação importante:
       - `datetime-local` NÃO armazena timezone.
-      - Se o projeto precisar persistir em UTC, converta no consumidor.
+      - Este componente converte a entrada para local para exibir ao usuário.
     -->
     <v-text-field
       v-model="valor"
@@ -43,9 +43,9 @@ import type { CampoDensidade, CampoVariante } from "../../tipos";
  * 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 no `datetime-local`.
- * - Ao editar, **emite** ISO 8601 com o **offset local**.
+ * - 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",