vue-componentes/src/playground/data_hora.playground.vue

<template>
  <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">
      <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 -->
      <EliEntradaDataHora
        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 -->
      <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"
        dica-persistente
      />

      <!-- variação 2: com limites min/max -->
      <EliEntradaDataHora
        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 -->
      <EliEntradaDataHora
        v-model="dataHoraObrigatoria"
        rotulo="Obrigatório"
        :erro="!dataHoraObrigatoria"
        :mensagens-erro="!dataHoraObrigatoria ? ['Obrigatório'] : []"
      />

      <EliEntradaDataHora v-model="dataHoraDesabilitado" rotulo="Desabilitado" desabilitado />

      <!-- variação 4: saída sempre em ISO com offset local -->
      <EliEntradaDataHora
        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 { EliEntradaDataHora } from "@/componentes/EliEntrada";
import { VDivider } from "vuetify/components";

export default defineComponent({
  name: "DataHoraPlayground",
  components: { EliEntradaDataHora, VDivider },
  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>