ajuste nos componentes de calendarios

src/componentes/EliEntrada/EliEntradaDataHora/Calendario.css

@@ -3,10 +3,8 @@
    ───────────────────────────────────────────── */
 
 .eli-dh__popover {
-  position: absolute;
+  position: fixed;
-  top: calc(100% + 6px);
+  z-index: 99999;
-  left: 0;
-  z-index: 2000;
   background: var(--cor-eli-superficie, #fff);
   border: 1.5px solid var(--cor-eli-borda, #D5D8CC);
   border-radius: 14px;

src/componentes/EliEntrada/EliEntradaDataHora/Calendario.vue

@@ -67,6 +67,7 @@
               :aria-selected="cell.selecionado"
               :aria-label="`${cell.dia} de ${nomeMesAtual} de ${anoAtual}`"
               @click="$emit('selecionarDia', cell)"
+              @dblclick="$emit('confirmar')"
             >
               {{ cell.dia }}
             </button>
@@ -91,6 +92,8 @@
               @input="onHoraInput"
               @blur="onHoraBlur"
               @keydown="onHoraKeydown"
+              @focus="onInputFocusSelect"
+              @click.stop
             />
             <span class="eli-dh__hora-sep" aria-hidden="true">:</span>
             <input
@@ -105,6 +108,8 @@
               @input="onMinutoInput"
               @blur="onMinutoBlur"
               @keydown="onMinutoKeydown"
+              @focus="onInputFocusSelect"
+              @click.stop
             />
           </div>
         </div>
@@ -214,6 +219,10 @@ export default defineComponent({
         )
       }
     }
+    function onInputFocusSelect(e: Event) {
+      ;(e.target as HTMLInputElement).select()
+    }
+
     return {
       diasSemana,
       MESES,
@@ -225,6 +234,7 @@ export default defineComponent({
       onMinutoInput,
       onMinutoBlur,
       onMinutoKeydown,
+      onInputFocusSelect,
     }
   },
 })

src/componentes/EliEntrada/EliEntradaDataHora/EliEntradaDataHora.css

@@ -44,18 +44,29 @@
   opacity: 0.6;
 }
 
-.eli-dh__icone {
+.eli-dh__icone-btn {
-  flex-shrink: 0;
+  display: flex;
-  width: 20px;
+  align-items: center;
-  height: 20px;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
   color: var(--cor-eli-neutro, #5E6553);
   transition: color 0.18s;
+  border-radius: 4px;
+  flex-shrink: 0;
 }
 
-.eli-dh__campo--focado .eli-dh__icone {
+.eli-dh__icone-btn:hover:not(:disabled) {
   color: var(--cor-eli-primaria, #688C00);
 }
 
+.eli-dh__icone {
+  width: 20px;
+  height: 20px;
+}
+
 .eli-dh__conteudo {
   flex: 1;
   display: flex;
@@ -72,23 +83,35 @@
   letter-spacing: 0.02em;
   text-transform: uppercase;
   transition: color 0.18s;
+  cursor: pointer;
 }
 
 .eli-dh__campo--focado .eli-dh__rotulo { color: var(--cor-eli-primaria, #688C00); }
 .eli-dh__campo--erro .eli-dh__rotulo   { color: var(--cor-eli-erro, #C62828); }
 
-.eli-dh__valor {
+.eli-dh__input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
   font-size: 15px;
   font-weight: 500;
+  font-family: inherit;
   color: var(--cor-eli-neutro-escuro, #3E4436);
-  white-space: nowrap;
+  padding: 0;
-  overflow: hidden;
+  margin: 0;
-  text-overflow: ellipsis;
+  line-height: 1.2;
 }
 
-.eli-dh__valor--vazio {
+.eli-dh__input::placeholder {
   color: var(--cor-eli-borda-forte, #B5BAA8);
   font-weight: 400;
+  opacity: 1;
+}
+
+.eli-dh__input:disabled {
+  cursor: not-allowed;
+  color: var(--cor-eli-neutro, #5E6553);
 }
 
 .eli-dh__limpar {

src/componentes/EliEntrada/EliEntradaDataHora/calendarioHelpers.ts

@@ -67,7 +67,71 @@ export function formatarValor(
   modo: EntradaDataHora["opcoes"]["modo"],
 ): string {
   if (!valor) return ""
-  return modo === "data"
+  const d = dayjs(valor)
-    ? dayjs(valor).format("DD/MM/YYYY")
+  if (!d.isValid()) return ""
-    : dayjs(valor).format("DD/MM/YYYY HH:mm")
+  return modo === "data" ? d.format("DD/MM/YYYY") : d.format("DD/MM/YYYY HH:mm")
+}
+
+/**
+ * Aplica máscara visual de data/hora (DD/MM/YYYY ou DD/MM/YYYY HH:mm) em texto digitado.
+ */
+export function aplicarMascaraDataHora(valor: string, modo: "data" | "dataHora"): string {
+  const digitos = valor.replace(/\D/g, "")
+  if (!digitos) return ""
+
+  const dia = digitos.slice(0, 2)
+  const mes = digitos.slice(2, 4)
+  const ano = digitos.slice(4, 8)
+  const hora = digitos.slice(8, 10)
+  const minuto = digitos.slice(10, 12)
+
+  let res = dia
+  if (mes) res += `/${mes}`
+  if (ano) res += `/${ano}`
+
+  if (modo === "dataHora") {
+    if (hora) res += ` ${hora}`
+    if (minuto) res += `:${minuto}`
+  }
+
+  return res
+}
+
+/**
+ * Converte um texto mascarado (ex: "15/08/2026 14:30") em string ISO 8601 com fuso local.
+ */
+export function converterTextoParaIso(
+  texto: string,
+  modo: "data" | "dataHora",
+  horaMinutoPadrao?: { hora: string; minuto: string },
+): string | null {
+  const digitos = texto.replace(/\D/g, "")
+  if (digitos.length < 8) return null
+
+  const d = Number.parseInt(digitos.slice(0, 2), 10)
+  const m = Number.parseInt(digitos.slice(2, 4), 10)
+  const y = Number.parseInt(digitos.slice(4, 8), 10)
+
+  if (m < 1 || m > 12 || d < 1 || d > 31 || y < 1900 || y > 2100) return null
+
+  let h = 0
+  let min = 0
+
+  if (modo === "dataHora") {
+    if (digitos.length >= 10) {
+      h = Math.min(23, Number.parseInt(digitos.slice(8, 10), 10) || 0)
+    } else if (horaMinutoPadrao) {
+      h = Number.parseInt(horaMinutoPadrao.hora, 10) || 0
+    }
+
+    if (digitos.length >= 12) {
+      min = Math.min(59, Number.parseInt(digitos.slice(10, 12), 10) || 0)
+    } else if (horaMinutoPadrao) {
+      min = Number.parseInt(horaMinutoPadrao.minuto, 10) || 0
+    }
+  }
+
+  const strIso = `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}T${String(h).padStart(2, "0")}:${String(min).padStart(2, "0")}:00`
+  const dt = dayjs(strIso)
+  return dt.isValid() ? dt.format() : null
 }

src/componentes/EliEntrada/EliEntradaDataHora/index.vue

@@ -5,30 +5,49 @@
       :id="`eli-dh-campo-${uid}`"
       class="eli-dh__campo"
       :class="{
-        'eli-dh__campo--focado': aberto,
+        'eli-dh__campo--focado': aberto || focado,
         'eli-dh__campo--erro': Boolean(opcoesEfetivas.erro),
         'eli-dh__campo--desabilitado': desabilitadoEfetivo,
       }"
-      role="button"
-      :tabindex="desabilitadoEfetivo ? -1 : 0"
-      :aria-haspopup="true"
-      :aria-expanded="aberto"
-      :aria-label="opcoesEfetivas.rotulo"
       @click="abrirSeHabilitado"
-      @keydown.enter.prevent="abrirSeHabilitado"
-      @keydown.space.prevent="abrirSeHabilitado"
-      @keydown.escape="fechar"
     >
-      <svg class="eli-dh__icone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <button
-        <rect x="3" y="4" width="18" height="18" rx="3" ry="3" />
+        class="eli-dh__icone-btn"
-        <line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
+        type="button"
-      </svg>
+        tabindex="-1"
+        :title="`Abrir calendário (${opcoesEfetivas.rotulo})`"
+        :disabled="desabilitadoEfetivo"
+        @click.stop="alternarPopover"
+      >
+        <svg class="eli-dh__icone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <rect x="3" y="4" width="18" height="18" rx="3" ry="3" />
+          <line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
+        </svg>
+      </button>
+
       <div class="eli-dh__conteudo">
-        <span class="eli-dh__rotulo">{{ opcoesEfetivas.rotulo }}</span>
+        <label :for="`eli-dh-input-${uid}`" class="eli-dh__rotulo">{{ opcoesEfetivas.rotulo }}</label>
-        <span class="eli-dh__valor" :class="{ 'eli-dh__valor--vazio': !valorFormatado }">
+        <input
-          {{ valorFormatado || opcoesEfetivas.placeholder || 'Selecione...' }}
+          :id="`eli-dh-input-${uid}`"
-        </span>
+          class="eli-dh__input"
+          type="text"
+          inputmode="numeric"
+          :value="textoDigitado"
+          :placeholder="opcoesEfetivas.placeholder || (modoEfetivo === 'data' ? 'DD/MM/AAAA' : 'DD/MM/AAAA HH:mm')"
+          :disabled="desabilitadoEfetivo"
+          :readonly="Boolean(opcoesEfetivas.apenasLeitura)"
+          :aria-expanded="aberto"
+          :aria-haspopup="true"
+          :aria-label="opcoesEfetivas.rotulo"
+          @click="abrirSeHabilitado"
+          @input="onTextInput"
+          @blur="onInputBlur"
+          @focus="onInputFocus"
+          @keydown.down.prevent="abrirSeHabilitado"
+          @keydown.escape="fechar"
+        />
       </div>
+
       <button
         v-if="Boolean(opcoesEfetivas.limpavel) && valor && !desabilitadoEfetivo"
         class="eli-dh__limpar"
@@ -47,7 +66,7 @@
     <div v-if="mensagensVisiveis.length" class="eli-dh__mensagem eli-dh__mensagem--erro" role="alert">
       {{ mensagensVisiveis[0] }}
     </div>
-    <div v-else-if="opcoesEfetivas.dica && (opcoesEfetivas.dicaPersistente || aberto)" class="eli-dh__mensagem eli-dh__mensagem--dica">
+    <div v-else-if="opcoesEfetivas.dica && (opcoesEfetivas.dicaPersistente || aberto || focado)" class="eli-dh__mensagem eli-dh__mensagem--dica">
       {{ opcoesEfetivas.dica }}
     </div>
 
@@ -72,8 +91,8 @@
       @selecionarDia="selecionarDia"
       @mudarMes="mudarMes"
       @mudarAno="mudarAno"
-      @update:horaTemp="horaTemp = $event"
+      @update:horaTemp="atualizarHoraTemp"
-      @update:minutoTemp="minutoTemp = $event"
+      @update:minutoTemp="atualizarMinutoTemp"
     />
   </div>
 </template>

src/componentes/EliEntrada/EliEntradaDataHora/useDataHora.ts

@@ -3,7 +3,12 @@ import "dayjs/locale/pt-br"
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import type { CampoDensidade, CampoVariante } from "../../../tipos"
 import type { PadroesEntradas } from "../tiposEntradas"
-import { formatarValor, gerarCelulas } from "./calendarioHelpers"
+import {
+  aplicarMascaraDataHora,
+  converterTextoParaIso,
+  formatarValor,
+  gerarCelulas,
+} from "./calendarioHelpers"
 
 dayjs.locale("pt-br")
 
@@ -53,29 +58,31 @@ let contadorUid = 0
 export function useDataHora(props: Props, emit: EmitFn) {
   const uid = ++contadorUid
   const aberto = ref(false)
+  const focado = ref(false)
+  const textoDigitado = ref("")
   const estiloPopover = ref<Record<string, string>>({})
   const referencia = ref(dayjs())
   const diaSelecionado = ref<dayjs.Dayjs | null>(null)
   const horaTemp = ref("00")
   const minutoTemp = ref("00")
 
-  const opcoesEfetivas = computed<EntradaDataHora["opcoes"]>(
+  const opcoesEfetivas = computed<EntradaDataHora["opcoes"]>(() => {
-    () =>
+    const o = props.opcoes
-      props.opcoes ?? {
+    return {
-        rotulo: props.rotulo ?? "Data",
+      rotulo: o?.rotulo ?? props.rotulo ?? "Data",
-        placeholder: props.placeholder ?? "",
+      placeholder: o?.placeholder ?? props.placeholder ?? "",
-        modo: props.modo ?? "dataHora",
+      modo: o?.modo ?? props.modo ?? "dataHora",
-        limpavel: props.limpavel,
+      limpavel: o?.limpavel ?? props.limpavel,
-        erro: props.erro,
+      erro: o?.erro ?? props.erro,
-        mensagensErro: props.mensagensErro,
+      mensagensErro: o?.mensagensErro ?? props.mensagensErro,
-        dica: props.dica,
+      dica: o?.dica ?? props.dica,
-        dicaPersistente: props.dicaPersistente,
+      dicaPersistente: o?.dicaPersistente ?? props.dicaPersistente,
-        densidade: props.densidade,
+      densidade: o?.densidade ?? props.densidade,
-        variante: props.variante,
+      variante: o?.variante ?? props.variante,
-        min: props.min,
+      min: o?.min ?? props.min,
-        max: props.max,
+      max: o?.max ?? props.max,
-      },
+    }
-  )
+  })
 
   const modoEfetivo = computed<"data" | "dataHora">(() => opcoesEfetivas.value.modo ?? "dataHora")
   const desabilitadoEfetivo = computed<boolean>(() => Boolean(props.desabilitado))
@@ -123,15 +130,19 @@ export function useDataHora(props: Props, emit: EmitFn) {
     (v) => {
       if (v) {
         const d = dayjs(v)
-        diaSelecionado.value = d.startOf("day")
+        if (d.isValid()) {
-        referencia.value = d.startOf("month")
+          diaSelecionado.value = d.startOf("day")
-        horaTemp.value = d.format("HH")
+          referencia.value = d.startOf("month")
-        minutoTemp.value = d.format("mm")
+          horaTemp.value = d.format("HH")
-      } else {
+          minutoTemp.value = d.format("mm")
-        diaSelecionado.value = null
+          textoDigitado.value = formatarValor(v, modoEfetivo.value)
-        horaTemp.value = "00"
+          return
-        minutoTemp.value = "00"
+        }
       }
+      diaSelecionado.value = null
+      horaTemp.value = "00"
+      minutoTemp.value = "00"
+      textoDigitado.value = ""
     },
     { immediate: true },
   )
@@ -140,26 +151,56 @@ export function useDataHora(props: Props, emit: EmitFn) {
     const el = document.getElementById(`eli-dh-campo-${uid}`)
     if (!el) return
     const rect = el.getBoundingClientRect()
-    const top = rect.bottom + window.scrollY + 6
+    const popoverAltura = modoEfetivo.value === "dataHora" ? 380 : 320
-    let left = rect.left + window.scrollX
+
-    if (left + 316 > window.innerWidth + window.scrollX - 8)
+    let top = rect.bottom + 6
-      left = rect.right + window.scrollX - 316
+    if (rect.bottom + popoverAltura > window.innerHeight && rect.top - popoverAltura > 0) {
-    estiloPopover.value = { position: "absolute", top: `${top}px`, left: `${left}px` }
+      top = rect.top - popoverAltura - 6
+    }
+
+    let left = rect.left
+    if (left + 316 > window.innerWidth - 8) {
+      left = Math.max(8, rect.right - 316)
+    }
+
+    estiloPopover.value = { position: "fixed", top: `${top}px`, left: `${left}px` }
+  }
+
+  function adicionarListenersPosicao() {
+    window.addEventListener("scroll", calcularPosicao, true)
+    window.addEventListener("resize", calcularPosicao)
+  }
+
+  function removerListenersPosicao() {
+    window.removeEventListener("scroll", calcularPosicao, true)
+    window.removeEventListener("resize", calcularPosicao)
   }
 
   function abrirSeHabilitado() {
     if (desabilitadoEfetivo.value) return
-    aberto.value = !aberto.value
+    if (!aberto.value) {
-    if (aberto.value) {
+      aberto.value = true
+      calcularPosicao()
       emit("foco")
       emit("focus")
       nextTick(calcularPosicao)
+      adicionarListenersPosicao()
+    }
+  }
+
+  function alternarPopover() {
+    if (desabilitadoEfetivo.value) return
+    if (aberto.value) {
+      fechar()
+    } else {
+      abrirSeHabilitado()
     }
   }
 
   function fechar() {
     if (!aberto.value) return
     aberto.value = false
+    removerListenersPosicao()
     emit("desfoco")
     emit("blur")
   }
@@ -179,7 +220,7 @@ export function useDataHora(props: Props, emit: EmitFn) {
   function selecionarDia(cell: CelulaCalendario) {
     if (cell.desabilitado) return
     diaSelecionado.value = cell.data.startOf("day")
-    if (modoEfetivo.value === "data") confirmar()
+    confirmar()
   }
 
   function emitirValor(iso: string | null) {
@@ -188,6 +229,26 @@ export function useDataHora(props: Props, emit: EmitFn) {
     })
   }
 
+  function atualizarHoraTemp(v: string) {
+    horaTemp.value = v
+    if (diaSelecionado.value) {
+      const h = Number.parseInt(v, 10) || 0
+      const m = Number.parseInt(minutoTemp.value, 10) || 0
+      const r = diaSelecionado.value.hour(h).minute(m).second(0)
+      emitirValor(r.format())
+    }
+  }
+
+  function atualizarMinutoTemp(v: string) {
+    minutoTemp.value = v
+    if (diaSelecionado.value) {
+      const h = Number.parseInt(horaTemp.value, 10) || 0
+      const m = Number.parseInt(v, 10) || 0
+      const r = diaSelecionado.value.hour(h).minute(m).second(0)
+      emitirValor(r.format())
+    }
+  }
+
   function confirmar() {
     if (!diaSelecionado.value) return
     const h = Number.parseInt(horaTemp.value, 10) || 0
@@ -201,9 +262,47 @@ export function useDataHora(props: Props, emit: EmitFn) {
   }
 
   function limpar() {
+    textoDigitado.value = ""
     emitirValor(null)
   }
 
+  function onTextInput(e: Event) {
+    const rawVal = (e.target as HTMLInputElement).value
+    const comMascara = aplicarMascaraDataHora(rawVal, modoEfetivo.value)
+    textoDigitado.value = comMascara
+    ;(e.target as HTMLInputElement).value = comMascara
+
+    if (!comMascara) {
+      emitirValor(null)
+      return
+    }
+
+    const iso = converterTextoParaIso(comMascara, modoEfetivo.value, {
+      hora: horaTemp.value,
+      minuto: minutoTemp.value,
+    })
+    if (iso) {
+      emitirValor(iso)
+    }
+  }
+
+  function onInputFocus() {
+    focado.value = true
+    emit("foco")
+    emit("focus")
+  }
+
+  function onInputBlur() {
+    focado.value = false
+    if (!valor.value) {
+      textoDigitado.value = ""
+    } else {
+      textoDigitado.value = formatarValor(valor.value, modoEfetivo.value)
+    }
+    emit("desfoco")
+    emit("blur")
+  }
+
   function onDocClick(e: MouseEvent) {
     if (!aberto.value) return
     const alvo = e.target as Node
@@ -215,11 +314,16 @@ export function useDataHora(props: Props, emit: EmitFn) {
   }
 
   onMounted(() => document.addEventListener("click", onDocClick, true))
-  onBeforeUnmount(() => document.removeEventListener("click", onDocClick, true))
+  onBeforeUnmount(() => {
+    document.removeEventListener("click", onDocClick, true)
+    removerListenersPosicao()
+  })
 
   return {
     uid,
     aberto,
+    focado,
+    textoDigitado,
     estiloPopover,
     referencia,
     diaSelecionado,
@@ -239,10 +343,16 @@ export function useDataHora(props: Props, emit: EmitFn) {
     mudarAno,
     celulas,
     abrirSeHabilitado,
+    alternarPopover,
     fechar,
     navegarMes,
     selecionarDia,
     confirmar,
     limpar,
+    onTextInput,
+    onInputFocus,
+    onInputBlur,
+    atualizarHoraTemp,
+    atualizarMinutoTemp,
   }
 }

src/componentes/EliTabela/EliTabela.vue

@@ -1,12 +1,5 @@
 <template>
   <div class="eli-tabela">
-    <EliTabelaDebug :isDev="isDev" :menuAberto="menuAberto" :menuPopupPos="menuPopupPos">
-      <div>paginaAtual: {{ paginaAtual }}</div>
-      <div>limit: {{ registrosPorConsulta }}</div>
-      <div>texto_busca: {{ (valorBusca || '').trim() }}</div>
-      <div>filtrosAvancadosAtivos: {{ JSON.stringify(filtrosAvancadosAtivos) }}</div>
-      <div>quantidadeTotal: {{ quantidade }}</div>
-    </EliTabelaDebug>
 
     <EliTabelaCabecalho
       v-if="exibirBusca || temAcoesSuperiores"
@@ -123,7 +116,6 @@ import { defineComponent, type PropType } from "vue"
 import "./EliTabela.css"
 import EliTabelaBody from "./EliTabelaBody.vue"
 import EliTabelaCabecalho from "./EliTabelaCabecalho.vue"
-import EliTabelaDebug from "./EliTabelaDebug.vue"
 import EliTabelaEstados from "./EliTabelaEstados.vue"
 import EliTabelaHead from "./EliTabelaHead.vue"
 import EliTabelaMenuAcoes from "./EliTabelaMenuAcoes.vue"
@@ -143,7 +135,6 @@ export default defineComponent({
   components: {
     EliTabelaCabecalho,
     EliTabelaEstados,
-    EliTabelaDebug,
     EliTabelaHead,
     EliTabelaBody,
     EliTabelaMenuAcoes,

src/playground/App.vue

@@ -72,6 +72,8 @@
 .playground-console-scroll::-webkit-scrollbar-thumb:hover {
   background: #52525b;
 }
+</style>
+
 <script lang="ts">
 import { defineComponent, provide, ref } from "vue"
 import { EliFeedbackWidget } from "../componentes/FeedbackWidget"