diff --git a/nuxt4/app/components/cata/FormularioMuestra.vue b/nuxt4/app/components/cata/FormularioMuestra.vue index aa85509..3e33b5b 100644 --- a/nuxt4/app/components/cata/FormularioMuestra.vue +++ b/nuxt4/app/components/cata/FormularioMuestra.vue @@ -35,18 +35,26 @@
-
Fragancia
+
+
Fragancia
+
+ + 馃搳 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.fragancia.afectiva ?? '-' }} + +
+
-
Aroma
+
+
Aroma
+
+ + 馃搳 {{ muestra.intensidades.aroma.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.aroma.afectiva ?? '-' }} + +
+
-
Sabor
+
+
Sabor
+
+ + 馃搳 {{ muestra.intensidades.sabor.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.sabor.afectiva ?? '-' }} + +
+
-
Sabor Residual
+
+
Sabor Residual
+
+ + 馃搳 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.saborResidual.afectiva ?? '-' }} + +
+
-
Acidez
+
+
Acidez
+
+ + 馃搳 {{ muestra.intensidades.acidez.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.acidez.afectiva ?? '-' }} + +
+
-
Dulzor
+
+
Dulzor
+
+ + 馃搳 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.dulzor.afectiva ?? '-' }} + +
+
-
Sensaci贸n en la Boca
+
+
Sensaci贸n en la Boca
+
+ + 馃搳 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.sensacionBoca.afectiva ?? '-' }} + +
+
-
Impresi贸n Global
+
+
Impresi贸n Global
+
+ + 馃搳 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.impresionGlobal.afectiva ?? '-' }} + +
+
-
Fragancia
+
+
Fragancia
+
+ + 馃搳 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.fragancia.afectiva ?? '-' }} + +
+
-
Aroma
+
+
Aroma
+
+ + 馃搳 {{ muestra.intensidades.aroma.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.aroma.afectiva ?? '-' }} + +
+
-
Sabor
+
+
Sabor
+
+ + 馃搳 {{ muestra.intensidades.sabor.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.sabor.afectiva ?? '-' }} + +
+
-
Sabor Residual
+
+
Sabor Residual
+
+ + 馃搳 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.saborResidual.afectiva ?? '-' }} + +
+
-
Acidez
+
+
Acidez
+
+ + 馃搳 {{ muestra.intensidades.acidez.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.acidez.afectiva ?? '-' }} + +
+
-
Dulzor
+
+
Dulzor
+
+ + 馃搳 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.dulzor.afectiva ?? '-' }} + +
+
-
Sensaci贸n en la Boca
+
+
Sensaci贸n en la Boca
+
+ + 馃搳 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.sensacionBoca.afectiva ?? '-' }} + +
+
-
Impresi贸n Global
+
+
Impresi贸n Global
+
+ + 馃搳 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }} + + + 鉂わ笍 {{ muestra.intensidades.impresionGlobal.afectiva ?? '-' }} + +
+
- - -
(() => ({ })) // Configuraci贸n UI personalizada del slider -const sliderUi = computed(() => ({ - root: 'cata-slider-root', - track: `cata-slider-track ${props.color ? 'cata-slider-track-custom' : ''}`, - range: props.tipo === 'descriptiva' - ? 'bg-primary/20 dark:bg-primary/30' - : 'bg-primary/40 dark:bg-primary/50', - thumb: `cata-slider-thumb ${props.color ? 'cata-slider-thumb-custom' : ''}`, -})) +const sliderUi = computed(() => { + const baseClasses = { + root: 'cata-slider-root', + track: `cata-slider-track ${props.color ? 'cata-slider-track-custom' : ''}`, + thumb: `cata-slider-thumb ${props.color ? 'cata-slider-thumb-custom' : ''} ${props.tipo === 'descriptiva' ? 'cata-slider-thumb-descriptivo' : 'cata-slider-thumb-afectivo'}`, + } + + // Si hay color personalizado, usamos una clase custom para el range + if (props.color) { + return { + ...baseClasses, + range: props.tipo === 'descriptiva' + ? 'cata-slider-range-custom cata-slider-range-descriptivo' + : 'cata-slider-range-custom cata-slider-range-afectivo', + } + } + + // Si no hay color personalizado, usamos las clases por defecto + return { + ...baseClasses, + range: props.tipo === 'descriptiva' + ? 'bg-primary/20 dark:bg-primary/30' + : 'bg-primary/40 dark:bg-primary/50', + } +}) // Manejar cambio de valor const handleChange = (value: number | number[] | undefined) => { @@ -146,20 +153,53 @@ const customColorStyle = computed(() => { border-color: color-mix(in srgb, var(--slider-custom-color) 50%, transparent); } +/* Range (parte rellenada) con color personalizado */ +:deep(.cata-slider-range-custom) { + background-color: var(--slider-custom-color); + border-radius: 9999px; +} + +/* Diferentes opacidades para descriptivo vs afectivo */ +:deep(.cata-slider-range-descriptivo) { + opacity: 0.4; +} + +:deep(.cata-slider-range-afectivo) { + opacity: 0.7; +} + :deep(.cata-slider-thumb) { - width: 1.25rem; - height: 1.25rem; + width: 1.75rem; + height: 1.75rem; border-radius: 9999px; background-color: var(--cata-bg); border: 2px solid var(--cata-primary); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; + position: relative; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; } :deep(.cata-slider-thumb-custom) { border-color: var(--slider-custom-color); } +/* Iconos para diferenciar descriptivo de afectivo */ +:deep(.cata-slider-thumb-descriptivo::before) { + content: '馃搳'; + position: absolute; + font-size: 0.65rem; +} + +:deep(.cata-slider-thumb-afectivo::before) { + content: '鉂わ笍'; + position: absolute; + font-size: 0.65rem; +} + :deep(.cata-slider-thumb:hover) { transform: scale(1.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); diff --git a/nuxt4/app/composables/useColorCustomization.ts b/nuxt4/app/composables/useColorCustomization.ts index 5a15899..4f2d8b4 100644 --- a/nuxt4/app/composables/useColorCustomization.ts +++ b/nuxt4/app/composables/useColorCustomization.ts @@ -198,10 +198,27 @@ export const useColorCustomization = () => { const stored = localStorage.getItem(STORAGE_KEY) if (stored) { const colors = JSON.parse(stored) - customColors.value = colors + + // Validar estructura de datos + if ( + colors && + typeof colors === 'object' && + colors.light && + typeof colors.light === 'object' && + colors.dark && + typeof colors.dark === 'object' + ) { + customColors.value = colors + } else { + // Datos corruptos o formato antiguo, resetear + console.warn('Formato de colores incompatible, reseteando...') + localStorage.removeItem(STORAGE_KEY) + } } } catch (error) { console.error('Error al cargar colores personalizados:', error) + // En caso de error, limpiar localStorage + localStorage.removeItem(STORAGE_KEY) } } @@ -226,6 +243,11 @@ export const useColorCustomization = () => { const theme = isDark.value ? 'dark' : 'light' + // Asegurar que la estructura existe + if (!customColors.value[theme] || typeof customColors.value[theme] !== 'object') { + customColors.value[theme] = { primary: null, foreground: null, background: null } + } + if (primary !== undefined) customColors.value[theme].primary = primary if (foreground !== undefined) customColors.value[theme].foreground = foreground if (background !== undefined) customColors.value[theme].background = background @@ -262,10 +284,17 @@ export const useColorCustomization = () => { */ const getCurrentColors = computed(() => { const theme = isDark.value ? 'dark' : 'light' + const colors = customColors.value[theme] + + // Validar que la estructura existe + if (!colors || typeof colors !== 'object') { + return DEFAULT_COLORS[theme] + } + return { - primary: customColors.value[theme].primary || DEFAULT_COLORS[theme].primary, - foreground: customColors.value[theme].foreground || DEFAULT_COLORS[theme].foreground, - background: customColors.value[theme].background || DEFAULT_COLORS[theme].background, + primary: colors.primary || DEFAULT_COLORS[theme].primary, + foreground: colors.foreground || DEFAULT_COLORS[theme].foreground, + background: colors.background || DEFAULT_COLORS[theme].background, } }) @@ -275,6 +304,12 @@ export const useColorCustomization = () => { const hasCustomColors = computed(() => { const theme = isDark.value ? 'dark' : 'light' const colors = customColors.value[theme] + + // Validar que la estructura existe + if (!colors || typeof colors !== 'object') { + return false + } + return colors.primary !== null || colors.foreground !== null || colors.background !== null }) @@ -289,7 +324,7 @@ export const useColorCustomization = () => { // Solo aplicar colores si hay colores personalizados guardados const theme = isDark.value ? 'dark' : 'light' const colors = customColors.value[theme] - if (colors.primary || colors.foreground || colors.background) { + if (colors && typeof colors === 'object' && (colors.primary || colors.foreground || colors.background)) { applyCustomColors( colors.primary || undefined, colors.foreground || undefined, @@ -302,7 +337,7 @@ export const useColorCustomization = () => { const theme = newIsDark ? 'dark' : 'light' const colors = customColors.value[theme] // Solo aplicar si hay colores personalizados para este tema - if (colors.primary || colors.foreground || colors.background) { + if (colors && typeof colors === 'object' && (colors.primary || colors.foreground || colors.background)) { applyCustomColors( colors.primary || undefined, colors.foreground || undefined,