adicoonado compoente de dataehora

src/playground/App.vue

@@ -7,6 +7,7 @@
       <v-tab value="indicador">Indicador</v-tab>
       <v-tab value="cartao">Cartão</v-tab>
       <v-tab value="campo">Campo</v-tab>
+      <v-tab value="data_hora">Data e hora</v-tab>
       <v-tab value="ola_mundo">Demo</v-tab>
     </v-tabs>
 
@@ -16,6 +17,7 @@
     <IndicadorPlayground v-else-if="aba === 'indicador'" />
     <CartaoPlayground v-else-if="aba === 'cartao'" />
     <CampoPlayground v-else-if="aba === 'campo'" />
+    <DataHoraPlayground v-else-if="aba === 'data_hora'" />
     <OlaMundoPlayground v-else />
   </v-container>
 </template>
@@ -26,6 +28,7 @@ import BotaoPlayground from "./botao.playground.vue";
 import IndicadorPlayground from "./indicador.playground.vue";
 import CartaoPlayground from "./cartao.playground.vue";
 import CampoPlayground from "./campo.playground.vue";
+import DataHoraPlayground from "./data_hora.playground.vue";
 import OlaMundoPlayground from "./ola_mundo.playground.vue";
 
 export default defineComponent({
@@ -35,11 +38,18 @@ export default defineComponent({
     IndicadorPlayground,
     CartaoPlayground,
     CampoPlayground,
+    DataHoraPlayground,
     OlaMundoPlayground,
   },
   data() {
     return {
-      aba: "botao" as "botao" | "indicador" | "cartao" | "campo" | "ola_mundo",
+      aba: "botao" as
+        | "botao"
+        | "indicador"
+        | "cartao"
+        | "campo"
+        | "data_hora"
+        | "ola_mundo",
     };
   }
 })

src/playground/data_hora.playground.vue

@@ -0,0 +1,145 @@
+<template>
+  <section class="stack">
+    <h2>EliDataHora (entrada de data e hora)</h2>
+
+    <div class="grid">
+      <!-- variação 1: padrão -->
+      <EliDataHora v-model="dataHora" />
+
+      <!-- variação 1a: somente data -->
+      <EliDataHora
+        v-model="somenteData"
+        modo="data"
+        rotulo="Somente data"
+        dica="Emite ISO com offset local às 00:00:00"
+        dica-persistente
+      />
+
+      <!-- variação 1b: recebendo UTC (Z) e exibindo local -->
+      <EliDataHora
+        v-model="dataHoraUtcEntrada"
+        rotulo="Entrada vinda do backend (UTC/Z)"
+        dica="O valor chega em UTC, mas o campo mostra em horário local"
+        dica-persistente
+      />
+
+      <!-- variação 2: com limites min/max -->
+      <EliDataHora
+        v-model="dataHoraComLimite"
+        rotulo="Agendamento (com limite)"
+        :min="min"
+        :max="max"
+        dica="Escolha um horário dentro do intervalo"
+        dica-persistente
+        limpavel
+      />
+
+      <!-- variação 3: estado de erro + desabilitado -->
+      <EliDataHora
+        v-model="dataHoraObrigatoria"
+        rotulo="Obrigatório"
+        :erro="!dataHoraObrigatoria"
+        :mensagens-erro="!dataHoraObrigatoria ? ['Obrigatório'] : []"
+      />
+
+      <EliDataHora
+        v-model="dataHoraDesabilitado"
+        rotulo="Desabilitado"
+        desabilitado
+      />
+
+      <!-- variação 4: saída sempre em ISO com offset local -->
+      <EliDataHora
+        v-model="dataHoraUtcEmitida"
+        rotulo="Emitindo ISO com offset local"
+        dica="Ao alterar, o v-model vira ISO 8601 com offset do seu fuso"
+        dica-persistente
+      />
+    </div>
+
+    <pre class="debug">{{ debug }}</pre>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from "vue";
+import { EliDataHora } from "@/componentes/data_hora";
+
+export default defineComponent({
+  name: "DataHoraPlayground",
+  components: { EliDataHora },
+  setup() {
+    const dataHora = ref<string | null>("2026-01-09T13:15:00-03:00");
+
+    const somenteData = ref<string | null>("2026-01-09T00:00:00-03:00");
+
+    // Valor vindo do backend em UTC/Z (exibir local, manter como UTC no estado)
+    const dataHoraUtcEntrada = ref<string | null>("2026-01-09T16:15:00Z");
+
+    // Exemplo com min/max
+    const min = ref("2026-01-09T08:00:00-03:00");
+    const max = ref("2026-01-09T18:00:00-03:00");
+    const dataHoraComLimite = ref<string | null>("2026-01-09T09:00:00-03:00");
+
+    // Obrigatório (mostra erro quando null)
+    const dataHoraObrigatoria = ref<string | null>(null);
+
+    // Desabilitado
+    const dataHoraDesabilitado = ref<string | null>("2026-01-09T10:30:00-03:00");
+
+    // Saída: sempre ISO com offset local
+    const dataHoraUtcEmitida = ref<string | null>("2026-01-09T16:15:00Z");
+
+    const debug = computed(() =>
+      JSON.stringify(
+        {
+          dataHora: dataHora.value,
+          somenteData: somenteData.value,
+          dataHoraUtcEntrada: dataHoraUtcEntrada.value,
+          dataHoraComLimite: dataHoraComLimite.value,
+          dataHoraObrigatoria: dataHoraObrigatoria.value,
+          dataHoraDesabilitado: dataHoraDesabilitado.value,
+          dataHoraUtcEmitida: dataHoraUtcEmitida.value,
+          min: min.value,
+          max: max.value,
+        },
+        null,
+        2
+      )
+    );
+
+    return {
+      dataHora,
+      somenteData,
+      dataHoraUtcEntrada,
+      min,
+      max,
+      dataHoraComLimite,
+      dataHoraObrigatoria,
+      dataHoraDesabilitado,
+      dataHoraUtcEmitida,
+      debug,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.stack {
+  display: grid;
+  gap: 16px;
+}
+
+.grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.debug {
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+  overflow: auto;
+}
+</style>