Feat: Usar UInputNumber con botones +/- y sincronización automática
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s

CAMBIOS PRINCIPALES:

1. Reemplazar inputs normales por UInputNumber:
   - Ahora tienen botones +/- integrados
   - Mejor UX con controles visuales
   - Validación automática de min/max/step

2. Configuración de cada input:
   - Sumatoria Afectiva: step="1" (8-72)
   - SCAA Score: step="0.25" (58.00-100.00)
   - SCAA con format-options para 2 decimales

3. Doble sistema de handlers:

   a) Para botones +/- (@update:model-value):
      - onSumatoriaChangeFromButtons()
      - onScaaChangeFromButtons()
      - Sincronización AUTOMÁTICA e INMEDIATA
      - No espera blur, actualiza al instante

   b) Para escritura manual (@blur):
      - onSumatoriaBlur()
      - onScaaBlur()
      - Validación solo al perder foco
      - Permite edición libre

4. Sincronización bidireccional:
   - Modificar Sumatoria → actualiza SCAA
   - Modificar SCAA → actualiza Sumatoria
   - Funciona con botones +/- Y con escritura manual

BENEFICIOS:
 Botones +/- funcionan de 1 en 1 y 0.25 en 0.25
 Sincronización automática al usar botones
 Edición manual sigue funcionando (solo valida en blur)
 Mejor UX con controles visuales
 SCAA Score muestra siempre 2 decimales
This commit is contained in:
2025-10-19 02:53:51 -06:00
parent 4e6c5f7b5d
commit 281fc23118

View File

@@ -28,15 +28,15 @@
<label class="block text-xs cata-text opacity-75 mb-1 text-center">
Sumatoria Afectiva
</label>
<input
v-model.number="puntajeDeseado"
type="number"
<UInputNumber
v-model="puntajeDeseado"
:min="8"
:max="72"
step="1"
:step="1"
placeholder="8-72"
class="cata-input w-full px-3 py-2 rounded-md text-center text-lg"
@blur="onSumatoriaChange"
class="w-full"
@update:model-value="onSumatoriaChangeFromButtons"
@blur="onSumatoriaBlur"
/>
</div>
@@ -45,15 +45,16 @@
<label class="block text-xs cata-text opacity-75 mb-1 text-center">
SCAA Score
</label>
<input
v-model.number="scaaDeseado"
type="number"
<UInputNumber
v-model="scaaDeseado"
:min="scaaMin"
:max="scaaMax"
step="0.25"
:step="0.25"
placeholder="58.00-100.00"
class="cata-input w-full px-3 py-2 rounded-md text-center text-lg"
@blur="onScaaChange"
class="w-full"
:format-options="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }"
@update:model-value="onScaaChangeFromButtons"
@blur="onScaaBlur"
/>
</div>
</div>
@@ -203,8 +204,24 @@ watch(isOpen, (newValue) => {
}
})
// Handler para cuando se modifica Sumatoria Afectiva (solo en blur)
const onSumatoriaChange = () => {
// Handler para cuando se modifica Sumatoria Afectiva usando botones +/-
const onSumatoriaChangeFromButtons = (newValue: number | null) => {
if (actualizandoInput.value) return
if (newValue === null || newValue === undefined) return
actualizandoInput.value = true
// El valor ya viene validado por UInputNumber (min/max/step)
puntajeDeseado.value = newValue
// Actualizar SCAA Score automáticamente
scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value)
actualizandoInput.value = false
}
// Handler para cuando se pierde el foco en Sumatoria Afectiva (escritura manual)
const onSumatoriaBlur = () => {
if (actualizandoInput.value) return
actualizandoInput.value = true
@@ -227,8 +244,33 @@ const onSumatoriaChange = () => {
actualizandoInput.value = false
}
// Handler para cuando se modifica SCAA Score (solo en blur)
const onScaaChange = () => {
// Handler para cuando se modifica SCAA Score usando botones +/-
const onScaaChangeFromButtons = (newValue: number | null) => {
if (actualizandoInput.value) return
if (newValue === null || newValue === undefined) return
actualizandoInput.value = true
// El valor ya viene validado por UInputNumber (min/max/step)
scaaDeseado.value = newValue
// Convertir a Sumatoria Afectiva
const sumatoriaCalculada = scaaASumatoriaAfectiva(scaaDeseado.value)
// Redondear al entero más cercano
const sumatoriaRedondeada = Math.round(sumatoriaCalculada)
// Asegurar rango válido
puntajeDeseado.value = Math.max(8, Math.min(72, sumatoriaRedondeada))
// Recalcular SCAA Score con el valor redondeado
scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value)
actualizandoInput.value = false
}
// Handler para cuando se pierde el foco en SCAA Score (escritura manual)
const onScaaBlur = () => {
if (actualizandoInput.value) return
actualizandoInput.value = true