Feat: Personalizar backdrop del modal y agregar puntaje target en footer
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s

- Cambiar color del backdrop/overlay del modal
  - Usar color de fondo del usuario (var(--cata-bg))
  - Aplicar opacidad de 0.85
  - Mantener blur de 4px para efecto de profundidad

- Agregar puntaje target en footer del paso 2
  - Mostrar "Target: [puntaje]" alineado a la izquierda
  - Botones (Cancelar/Aplicar) alineados a la derecha
  - Usar justify-between para distribución espaciada

- Mejorar experiencia visual con colores personalizados del usuario
This commit is contained in:
2025-10-19 01:25:30 -06:00
parent 5049e54d37
commit fd0de74c2e

View File

@@ -2,7 +2,7 @@
<UModal
v-model:open="isOpen"
:ui="{
overlay: 'backdrop-blur-sm',
overlay: 'modal-overlay',
content: 'cata-bg cata-outline-box',
header: 'cata-bg',
body: 'cata-bg',
@@ -77,33 +77,42 @@
<!-- Footer con botones -->
<template #footer>
<div class="flex items-center justify-end gap-2 w-full">
<button
class="cata-button px-4 py-2"
@click="cerrar"
>
Cancelar
</button>
<div class="flex items-center justify-between w-full">
<!-- Puntaje target a la izquierda -->
<div v-if="paso === 2" class="cata-text font-semibold">
Target: {{ puntajeDeseado }}
</div>
<div v-else></div>
<button
v-if="paso === 1"
class="cata-button px-4 py-2"
:disabled="!puntajeValido"
:class="{ 'opacity-50 cursor-not-allowed': !puntajeValido }"
@click="siguientePaso"
>
Continuar
</button>
<!-- Botones a la derecha -->
<div class="flex items-center gap-2">
<button
class="cata-button px-4 py-2"
@click="cerrar"
>
Cancelar
</button>
<button
v-if="paso === 2"
class="cata-button px-4 py-2"
:disabled="categoriasSeleccionadas.length !== diferencia"
:class="{ 'opacity-50 cursor-not-allowed': categoriasSeleccionadas.length !== diferencia }"
@click="aplicarAsignacion"
>
Aplicar
</button>
<button
v-if="paso === 1"
class="cata-button px-4 py-2"
:disabled="!puntajeValido"
:class="{ 'opacity-50 cursor-not-allowed': !puntajeValido }"
@click="siguientePaso"
>
Continuar
</button>
<button
v-if="paso === 2"
class="cata-button px-4 py-2"
:disabled="categoriasSeleccionadas.length !== diferencia"
:class="{ 'opacity-50 cursor-not-allowed': categoriasSeleccionadas.length !== diferencia }"
@click="aplicarAsignacion"
>
Aplicar
</button>
</div>
</div>
</template>
</UModal>
@@ -241,6 +250,14 @@ const cerrar = () => {
}
</script>
<style>
.modal-overlay {
background-color: var(--cata-bg) !important;
opacity: 0.85 !important;
backdrop-filter: blur(4px);
}
</style>
<style scoped>
.selected-category {
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);