ajuste nos componentes de calendarios
This commit is contained in:
parent
a9bac68e1b
commit
2763da4108
8 changed files with 298 additions and 81 deletions
|
|
@ -3,10 +3,8 @@
|
|||
───────────────────────────────────────────── */
|
||||
|
||||
.eli-dh__popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
background: var(--cor-eli-superficie, #fff);
|
||||
border: 1.5px solid var(--cor-eli-borda, #D5D8CC);
|
||||
border-radius: 14px;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -44,18 +44,29 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.eli-dh__icone {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.eli-dh__icone-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,71 @@ export function formatarValor(
|
|||
modo: EntradaDataHora["opcoes"]["modo"],
|
||||
): string {
|
||||
if (!valor) return ""
|
||||
return modo === "data"
|
||||
? dayjs(valor).format("DD/MM/YYYY")
|
||||
: dayjs(valor).format("DD/MM/YYYY HH:mm")
|
||||
const d = dayjs(valor)
|
||||
if (!d.isValid()) return ""
|
||||
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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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
|
||||
class="eli-dh__icone-btn"
|
||||
type="button"
|
||||
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>
|
||||
<span class="eli-dh__valor" :class="{ 'eli-dh__valor--vazio': !valorFormatado }">
|
||||
{{ valorFormatado || opcoesEfetivas.placeholder || 'Selecione...' }}
|
||||
</span>
|
||||
<label :for="`eli-dh-input-${uid}`" class="eli-dh__rotulo">{{ opcoesEfetivas.rotulo }}</label>
|
||||
<input
|
||||
:id="`eli-dh-input-${uid}`"
|
||||
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:minutoTemp="minutoTemp = $event"
|
||||
@update:horaTemp="atualizarHoraTemp"
|
||||
@update:minutoTemp="atualizarMinutoTemp"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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"]>(
|
||||
() =>
|
||||
props.opcoes ?? {
|
||||
rotulo: props.rotulo ?? "Data",
|
||||
placeholder: props.placeholder ?? "",
|
||||
modo: props.modo ?? "dataHora",
|
||||
limpavel: props.limpavel,
|
||||
erro: props.erro,
|
||||
mensagensErro: props.mensagensErro,
|
||||
dica: props.dica,
|
||||
dicaPersistente: props.dicaPersistente,
|
||||
densidade: props.densidade,
|
||||
variante: props.variante,
|
||||
min: props.min,
|
||||
max: props.max,
|
||||
},
|
||||
)
|
||||
const opcoesEfetivas = computed<EntradaDataHora["opcoes"]>(() => {
|
||||
const o = props.opcoes
|
||||
return {
|
||||
rotulo: o?.rotulo ?? props.rotulo ?? "Data",
|
||||
placeholder: o?.placeholder ?? props.placeholder ?? "",
|
||||
modo: o?.modo ?? props.modo ?? "dataHora",
|
||||
limpavel: o?.limpavel ?? props.limpavel,
|
||||
erro: o?.erro ?? props.erro,
|
||||
mensagensErro: o?.mensagensErro ?? props.mensagensErro,
|
||||
dica: o?.dica ?? props.dica,
|
||||
dicaPersistente: o?.dicaPersistente ?? props.dicaPersistente,
|
||||
densidade: o?.densidade ?? props.densidade,
|
||||
variante: o?.variante ?? props.variante,
|
||||
min: o?.min ?? props.min,
|
||||
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")
|
||||
referencia.value = d.startOf("month")
|
||||
horaTemp.value = d.format("HH")
|
||||
minutoTemp.value = d.format("mm")
|
||||
} else {
|
||||
diaSelecionado.value = null
|
||||
horaTemp.value = "00"
|
||||
minutoTemp.value = "00"
|
||||
if (d.isValid()) {
|
||||
diaSelecionado.value = d.startOf("day")
|
||||
referencia.value = d.startOf("month")
|
||||
horaTemp.value = d.format("HH")
|
||||
minutoTemp.value = d.format("mm")
|
||||
textoDigitado.value = formatarValor(v, modoEfetivo.value)
|
||||
return
|
||||
}
|
||||
}
|
||||
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
|
||||
let left = rect.left + window.scrollX
|
||||
if (left + 316 > window.innerWidth + window.scrollX - 8)
|
||||
left = rect.right + window.scrollX - 316
|
||||
estiloPopover.value = { position: "absolute", top: `${top}px`, left: `${left}px` }
|
||||
const popoverAltura = modoEfetivo.value === "dataHora" ? 380 : 320
|
||||
|
||||
let top = rect.bottom + 6
|
||||
if (rect.bottom + popoverAltura > window.innerHeight && rect.top - popoverAltura > 0) {
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue