Fix: Mejorar comportamiento de selectores de puntaje en Descriptiva/Afectiva
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s

- Evitar deselección al presionar el mismo corazón/círculo ya seleccionado
- Cambiar iconos de corazón de Lucide a Heroicons para mejor distinción visual
  - No seleccionado: i-heroicons-heart (outline)
  - Seleccionado: i-heroicons-heart-solid (relleno)
- Eliminar clase CSS icono-filled innecesaria
This commit is contained in:
2025-10-19 00:34:44 -06:00
parent 0fbc11e8f9
commit cec471bc32

View File

@@ -30,11 +30,10 @@
<!-- Icono para afectiva: corazón -->
<UIcon
v-else
name="i-lucide-heart"
:name="(modelValue !== null && valor <= modelValue) || (valorHover !== null && valor <= valorHover)
? 'i-heroicons-heart-solid'
: 'i-heroicons-heart'"
class="icono"
:class="{
'icono-filled': (modelValue !== null && valor <= modelValue) || (valorHover !== null && valor <= valorHover)
}"
/>
</button>
</div>
@@ -99,12 +98,12 @@ const tipoDescription = computed(() => {
const handleClick = (valor: number) => {
if (props.disabled) return
// Si clickean el mismo valor, lo deseleccionan (vuelve a null)
// Si clickean el mismo valor, no hace nada (mantiene el valor)
if (props.modelValue === valor) {
emit('update:modelValue', null)
} else {
emit('update:modelValue', valor)
return
}
emit('update:modelValue', valor)
}
// Estilo dinámico para el color personalizado
@@ -182,11 +181,6 @@ const customColorStyle = computed(() => {
color: var(--cata-primary);
}
/* Fill para corazones activos */
.icono-filled {
fill: currentColor;
}
/* Color personalizado */
.selector-intensidad[style*="--selector-custom-color"] .icono-descriptiva .icono {
color: color-mix(in srgb, var(--selector-custom-color) 40%, transparent);