Fix: Mejorar comportamiento de selectores de puntaje en Descriptiva/Afectiva
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user