Feat: Usar UInputNumber con botones +/- y sincronización automática
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user