Feat: Compactar inputs de valoración y mejorar filtrado restrictivo de sliders
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
- Reducir tamaño de iconos de 1.5rem a 1rem en SelectorIntensidad - Reducir espaciado entre iconos y padding del contenedor - Cambiar gap de grids de sliders de 4 a 2 - Implementar filtrado restrictivo por tipo (descriptiva/afectiva) y categoría - Agregar computed properties individuales para cada slider - Cuando se selecciona "Afectiva" + "Sensación en la Boca", solo se muestra ese slider específico
This commit is contained in:
@@ -72,7 +72,7 @@
|
||||
<div v-if="tabActiva === 'descriptiva-afectiva'" class="tab-content cata-fade-in">
|
||||
<!-- Sliders de Fragancia -->
|
||||
<div v-if="mostrarFraganciaSlider" class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('fragancia') }">
|
||||
<UIcon :name="getCategoryIcon('fragancia')" class="w-5 h-5" />
|
||||
Fragancia
|
||||
@@ -86,14 +86,16 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarFraganciaDescriptiva"
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.fragancia.descriptiva"
|
||||
:color="getCategoryColor('fragancia')"
|
||||
@update:model-value="(v) => actualizarIntensidad('fragancia', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarFraganciaAfectiva"
|
||||
tipo="afectiva"
|
||||
:model-value="muestra.intensidades.fragancia.afectiva"
|
||||
:color="getCategoryColor('fragancia')"
|
||||
@@ -104,7 +106,7 @@
|
||||
|
||||
<!-- Sliders de Aroma -->
|
||||
<div v-if="mostrarAromaSlider" class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('aroma') }">
|
||||
<UIcon :name="getCategoryIcon('aroma')" class="w-5 h-5" />
|
||||
Aroma
|
||||
@@ -118,14 +120,16 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarAromaDescriptiva"
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.aroma.descriptiva"
|
||||
:color="getCategoryColor('aroma')"
|
||||
@update:model-value="(v) => actualizarIntensidad('aroma', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarAromaAfectiva"
|
||||
tipo="afectiva"
|
||||
:model-value="muestra.intensidades.aroma.afectiva"
|
||||
:color="getCategoryColor('aroma')"
|
||||
@@ -136,7 +140,7 @@
|
||||
|
||||
<!-- Sliders de Sabor -->
|
||||
<div v-if="mostrarSaborSlider" class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sabor') }">
|
||||
<UIcon :name="getCategoryIcon('sabor')" class="w-5 h-5" />
|
||||
Sabor
|
||||
@@ -150,14 +154,16 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarSaborDescriptiva"
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.sabor.descriptiva"
|
||||
:color="getCategoryColor('sabor')"
|
||||
@update:model-value="(v) => actualizarIntensidad('sabor', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarSaborAfectiva"
|
||||
tipo="afectiva"
|
||||
:model-value="muestra.intensidades.sabor.afectiva"
|
||||
:color="getCategoryColor('sabor')"
|
||||
@@ -168,7 +174,7 @@
|
||||
|
||||
<!-- Sliders de Sabor Residual -->
|
||||
<div v-if="mostrarSaborResidualSlider" class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('saborResidual') }">
|
||||
<UIcon :name="getCategoryIcon('saborResidual')" class="w-5 h-5" />
|
||||
Sabor Residual
|
||||
@@ -182,14 +188,16 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarSaborResidualDescriptiva"
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.saborResidual.descriptiva"
|
||||
:color="getCategoryColor('saborResidual')"
|
||||
@update:model-value="(v) => actualizarIntensidad('saborResidual', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarSaborResidualAfectiva"
|
||||
tipo="afectiva"
|
||||
:model-value="muestra.intensidades.saborResidual.afectiva"
|
||||
:color="getCategoryColor('saborResidual')"
|
||||
@@ -200,7 +208,7 @@
|
||||
|
||||
<!-- Sliders de Acidez -->
|
||||
<div v-if="mostrarAcidezSlider" class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('acidez') }">
|
||||
<UIcon :name="getCategoryIcon('acidez')" class="w-5 h-5" />
|
||||
Acidez
|
||||
@@ -214,14 +222,16 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarAcidezDescriptiva"
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.acidez.descriptiva"
|
||||
:color="getCategoryColor('acidez')"
|
||||
@update:model-value="(v) => actualizarIntensidad('acidez', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarAcidezAfectiva"
|
||||
tipo="afectiva"
|
||||
:model-value="muestra.intensidades.acidez.afectiva"
|
||||
:color="getCategoryColor('acidez')"
|
||||
@@ -232,7 +242,7 @@
|
||||
|
||||
<!-- Sliders de Dulzor -->
|
||||
<div v-if="mostrarDulzorSlider" class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('dulzor') }">
|
||||
<UIcon :name="getCategoryIcon('dulzor')" class="w-5 h-5" />
|
||||
Dulzor
|
||||
@@ -246,14 +256,16 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarDulzorDescriptiva"
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.dulzor.descriptiva"
|
||||
:color="getCategoryColor('dulzor')"
|
||||
@update:model-value="(v) => actualizarIntensidad('dulzor', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarDulzorAfectiva"
|
||||
tipo="afectiva"
|
||||
:model-value="muestra.intensidades.dulzor.afectiva"
|
||||
:color="getCategoryColor('dulzor')"
|
||||
@@ -264,7 +276,7 @@
|
||||
|
||||
<!-- Sliders de Sensación en Boca -->
|
||||
<div v-if="mostrarSensacionBocaSlider" class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sensacionBoca') }">
|
||||
<UIcon :name="getCategoryIcon('sensacionBoca')" class="w-5 h-5" />
|
||||
Sensación en la Boca
|
||||
@@ -278,14 +290,16 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarSensacionBocaDescriptiva"
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.sensacionBoca.descriptiva"
|
||||
:color="getCategoryColor('sensacionBoca')"
|
||||
@update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarSensacionBocaAfectiva"
|
||||
tipo="afectiva"
|
||||
:model-value="muestra.intensidades.sensacionBoca.afectiva"
|
||||
:color="getCategoryColor('sensacionBoca')"
|
||||
@@ -296,7 +310,7 @@
|
||||
|
||||
<!-- Sliders de Impresión Global -->
|
||||
<div v-if="mostrarImpresionGlobalSlider" class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('impresionGlobal') }">
|
||||
<UIcon :name="getCategoryIcon('impresionGlobal')" class="w-5 h-5" />
|
||||
Impresión Global
|
||||
@@ -310,14 +324,16 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarImpresionGlobalDescriptiva"
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.impresionGlobal.descriptiva"
|
||||
:color="getCategoryColor('impresionGlobal')"
|
||||
@update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSelectorIntensidad
|
||||
v-if="mostrarImpresionGlobalAfectiva"
|
||||
tipo="afectiva"
|
||||
:model-value="muestra.intensidades.impresionGlobal.afectiva"
|
||||
:color="getCategoryColor('impresionGlobal')"
|
||||
@@ -408,7 +424,7 @@
|
||||
|
||||
<!-- Fragancia -->
|
||||
<div class="form-section mb-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('fragancia') }">
|
||||
<UIcon :name="getCategoryIcon('fragancia')" class="w-5 h-5" />
|
||||
Fragancia
|
||||
@@ -422,7 +438,7 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.fragancia.descriptiva"
|
||||
@@ -440,7 +456,7 @@
|
||||
|
||||
<!-- Aroma -->
|
||||
<div class="form-section mb-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('aroma') }">
|
||||
<UIcon :name="getCategoryIcon('aroma')" class="w-5 h-5" />
|
||||
Aroma
|
||||
@@ -454,7 +470,7 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.aroma.descriptiva"
|
||||
@@ -472,7 +488,7 @@
|
||||
|
||||
<!-- Sabor -->
|
||||
<div class="form-section mb-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sabor') }">
|
||||
<UIcon :name="getCategoryIcon('sabor')" class="w-5 h-5" />
|
||||
Sabor
|
||||
@@ -486,7 +502,7 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.sabor.descriptiva"
|
||||
@@ -504,7 +520,7 @@
|
||||
|
||||
<!-- Sabor Residual -->
|
||||
<div class="form-section mb-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('saborResidual') }">
|
||||
<UIcon :name="getCategoryIcon('saborResidual')" class="w-5 h-5" />
|
||||
Sabor Residual
|
||||
@@ -518,7 +534,7 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.saborResidual.descriptiva"
|
||||
@@ -536,7 +552,7 @@
|
||||
|
||||
<!-- Acidez -->
|
||||
<div class="form-section mb-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('acidez') }">
|
||||
<UIcon :name="getCategoryIcon('acidez')" class="w-5 h-5" />
|
||||
Acidez
|
||||
@@ -550,7 +566,7 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.acidez.descriptiva"
|
||||
@@ -568,7 +584,7 @@
|
||||
|
||||
<!-- Dulzor -->
|
||||
<div class="form-section mb-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('dulzor') }">
|
||||
<UIcon :name="getCategoryIcon('dulzor')" class="w-5 h-5" />
|
||||
Dulzor
|
||||
@@ -582,7 +598,7 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.dulzor.descriptiva"
|
||||
@@ -600,7 +616,7 @@
|
||||
|
||||
<!-- Sensación en Boca -->
|
||||
<div class="form-section mb-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sensacionBoca') }">
|
||||
<UIcon :name="getCategoryIcon('sensacionBoca')" class="w-5 h-5" />
|
||||
Sensación en la Boca
|
||||
@@ -614,7 +630,7 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.sensacionBoca.descriptiva"
|
||||
@@ -632,7 +648,7 @@
|
||||
|
||||
<!-- Impresión Global -->
|
||||
<div class="form-section">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('impresionGlobal') }">
|
||||
<UIcon :name="getCategoryIcon('impresionGlobal')" class="w-5 h-5" />
|
||||
Impresión Global
|
||||
@@ -646,7 +662,7 @@
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<CataSelectorIntensidad
|
||||
tipo="descriptiva"
|
||||
:model-value="muestra.intensidades.impresionGlobal.descriptiva"
|
||||
@@ -793,21 +809,85 @@ const deberMostrarSeccion = (subcategorias: Subcategoria[]): boolean => {
|
||||
return subcategorias.some(sub => props.subcategoriasActivas?.includes(sub))
|
||||
}
|
||||
|
||||
// Nueva función para filtrado restrictivo de sliders por tipo y categoría
|
||||
const deberMostrarSlider = (tipo: 'descriptiva' | 'afectiva', categoria: Subcategoria): boolean => {
|
||||
// Si no hay filtros activos, mostrar todo
|
||||
if (!props.subcategoriasActivas || props.subcategoriasActivas.length === 0) return true
|
||||
|
||||
// Separar filtros en tipos y categorías
|
||||
const filtrosTipo = props.subcategoriasActivas.filter(s => s === 'descriptiva' || s === 'afectiva')
|
||||
const filtrosCategoria = props.subcategoriasActivas.filter(s =>
|
||||
s !== 'descriptiva' && s !== 'afectiva' && s !== null
|
||||
)
|
||||
|
||||
// Si hay filtros de tipo Y filtros de categoría: verificar ambos
|
||||
if (filtrosTipo.length > 0 && filtrosCategoria.length > 0) {
|
||||
return filtrosTipo.includes(tipo) && filtrosCategoria.includes(categoria)
|
||||
}
|
||||
|
||||
// Si solo hay filtros de tipo: verificar que el tipo coincida
|
||||
if (filtrosTipo.length > 0 && filtrosCategoria.length === 0) {
|
||||
return filtrosTipo.includes(tipo)
|
||||
}
|
||||
|
||||
// Si solo hay filtros de categoría: verificar que la categoría coincida
|
||||
if (filtrosCategoria.length > 0 && filtrosTipo.length === 0) {
|
||||
return filtrosCategoria.includes(categoria)
|
||||
}
|
||||
|
||||
// Si no hay filtros relevantes, mostrar
|
||||
return true
|
||||
}
|
||||
|
||||
// Para Organoléptica
|
||||
const mostrarFraganciaAroma = computed(() => deberMostrarSeccion(['fragancia-aroma']))
|
||||
const mostrarSaborOrganoleptica = computed(() => deberMostrarSeccion(['sabor']))
|
||||
const mostrarSensacionBocaOrganoleptica = computed(() => deberMostrarSeccion(['sensacion-boca']))
|
||||
const mostrarGustosPredominantes = computed(() => deberMostrarSeccion(['gustos-predominantes']))
|
||||
|
||||
// Para Descriptiva/Afectiva
|
||||
const mostrarFraganciaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'fragancia']))
|
||||
const mostrarAromaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'aroma']))
|
||||
const mostrarSaborSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sabor']))
|
||||
const mostrarSaborResidualSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sabor-residual']))
|
||||
const mostrarAcidezSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'acidez']))
|
||||
const mostrarDulzorSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'dulzor']))
|
||||
const mostrarSensacionBocaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sensacion-boca']))
|
||||
const mostrarImpresionGlobalSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'impresion-global']))
|
||||
// Para Descriptiva/Afectiva - por categoría (mostrar sección si al menos un slider debe mostrarse)
|
||||
const mostrarFraganciaSlider = computed(() =>
|
||||
deberMostrarSlider('descriptiva', 'fragancia') || deberMostrarSlider('afectiva', 'fragancia')
|
||||
)
|
||||
const mostrarAromaSlider = computed(() =>
|
||||
deberMostrarSlider('descriptiva', 'aroma') || deberMostrarSlider('afectiva', 'aroma')
|
||||
)
|
||||
const mostrarSaborSlider = computed(() =>
|
||||
deberMostrarSlider('descriptiva', 'sabor') || deberMostrarSlider('afectiva', 'sabor')
|
||||
)
|
||||
const mostrarSaborResidualSlider = computed(() =>
|
||||
deberMostrarSlider('descriptiva', 'sabor-residual') || deberMostrarSlider('afectiva', 'sabor-residual')
|
||||
)
|
||||
const mostrarAcidezSlider = computed(() =>
|
||||
deberMostrarSlider('descriptiva', 'acidez') || deberMostrarSlider('afectiva', 'acidez')
|
||||
)
|
||||
const mostrarDulzorSlider = computed(() =>
|
||||
deberMostrarSlider('descriptiva', 'dulzor') || deberMostrarSlider('afectiva', 'dulzor')
|
||||
)
|
||||
const mostrarSensacionBocaSlider = computed(() =>
|
||||
deberMostrarSlider('descriptiva', 'sensacion-boca') || deberMostrarSlider('afectiva', 'sensacion-boca')
|
||||
)
|
||||
const mostrarImpresionGlobalSlider = computed(() =>
|
||||
deberMostrarSlider('descriptiva', 'impresion-global') || deberMostrarSlider('afectiva', 'impresion-global')
|
||||
)
|
||||
|
||||
// Para cada slider individual
|
||||
const mostrarFraganciaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'fragancia'))
|
||||
const mostrarFraganciaAfectiva = computed(() => deberMostrarSlider('afectiva', 'fragancia'))
|
||||
const mostrarAromaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'aroma'))
|
||||
const mostrarAromaAfectiva = computed(() => deberMostrarSlider('afectiva', 'aroma'))
|
||||
const mostrarSaborDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sabor'))
|
||||
const mostrarSaborAfectiva = computed(() => deberMostrarSlider('afectiva', 'sabor'))
|
||||
const mostrarSaborResidualDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sabor-residual'))
|
||||
const mostrarSaborResidualAfectiva = computed(() => deberMostrarSlider('afectiva', 'sabor-residual'))
|
||||
const mostrarAcidezDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'acidez'))
|
||||
const mostrarAcidezAfectiva = computed(() => deberMostrarSlider('afectiva', 'acidez'))
|
||||
const mostrarDulzorDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'dulzor'))
|
||||
const mostrarDulzorAfectiva = computed(() => deberMostrarSlider('afectiva', 'dulzor'))
|
||||
const mostrarSensacionBocaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sensacion-boca'))
|
||||
const mostrarSensacionBocaAfectiva = computed(() => deberMostrarSlider('afectiva', 'sensacion-boca'))
|
||||
const mostrarImpresionGlobalDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'impresion-global'))
|
||||
const mostrarImpresionGlobalAfectiva = computed(() => deberMostrarSlider('afectiva', 'impresion-global'))
|
||||
|
||||
// Estado local para otras notas
|
||||
const otrasNotasLocal = ref(props.muestra.otrasNotas)
|
||||
|
||||
@@ -123,16 +123,16 @@ const customColorStyle = computed(() => {
|
||||
|
||||
.iconos-container {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
gap: 0.15rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.icono-item {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.25rem;
|
||||
padding: 0.15rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 0.25rem;
|
||||
@@ -156,8 +156,8 @@ const customColorStyle = computed(() => {
|
||||
|
||||
/* Iconos */
|
||||
.icono {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -241,12 +241,12 @@ const customColorStyle = computed(() => {
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.icono {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
}
|
||||
|
||||
.iconos-container {
|
||||
gap: 0.15rem;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user