bkp

src/playground/data_hora.playground.vue

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