Los componentes en subcarpetas deben usar el prefijo de carpeta en Nuxt 4:
- CosechasHeatmap → ComparativaCosechasHeatmap
- CosechasEvolucion → ComparativaCosechasEvolucion
- CosechasTotales → ComparativaCosechasTotales
Este era el problema por el cual los componentes no se renderizaban.
- Actualizado THEME_SYSTEM.md con nuevas variables --brand-cosecha-2/3/4
- Documentadas implementaciones CSS con color-mix() en todas las clases
- Agregada sección 'Mejoras Recientes (v2.1)' en THEME_SYSTEM.md
- Actualizada descripción de Surface en settings.vue (cards grandes, tooltips)
- Mejorada sección 'Alcance del Sistema de Temas' con ejemplos de clases CSS
- Agregado tip sobre cards grandes usando color-mix()
- Versión actualizada a 2.1 | Fecha: 2025-10-31
Todos los componentes ahora responden completamente a cambios de tema
- El array tabs era constante, por lo que disabled se evaluaba solo una vez
- Cuando selectedCard.value era null, la tab detail quedaba permanentemente deshabilitada
- Al convertir a computed, disabled se reevalúa reactivamente
- Ahora al hacer click en una card, la tab detail se habilita correctamente
Query 59 (metadata_cosechas) no necesita parámetros porque devuelve
todas las cosechas disponibles, no solo las seleccionadas. Pasarle
parámetros causa que devuelva datos vacíos.
- Reemplazados colores RGB hardcodeados en .brand-card con color-mix()
- Actualizado .brand-shell para usar var(--brand-accent) y var(--brand-primary-strong)
- Actualizado .brand-divider para usar var(--brand-primary)
- Actualizado .brand-chip para usar var(--brand-accent)
- Actualizado .brand-pill para usar var(--brand-primary)
- Actualizado .brand-table para usar var(--brand-surface) y var(--brand-bg)
- Actualizado background de html/body para usar var(--brand-bg)
Ahora todas las cards y contenedores grandes responden a cambios de tema
- El contenido debe estar dentro de <template #body> para renderizarse correctamente
- Según Modal.vue, el body solo se renderiza si existe el slot #body
- Quitar padding del div interno ya que el modal ya tiene padding en el body
- Ahora el contenido aparecerá dentro del modal correctamente
- Agregadas nuevas variables CSS --brand-cosecha-2, --brand-cosecha-3, --brand-cosecha-4 para gráficas
- Reemplazado --brand-bg-secondary (no existía) por --brand-surface en todos los componentes
- Actualizados arrays de colores en componentes de comparativa de cosechas
- Eliminados colores RGB/hex hardcodeados en tooltips y badges
- Todos los componentes ahora respetan el sistema de temas dinámico
- Actualizar comparativa-cosechas.vue:
* Eliminar mapeo de columnas inexistentes (total_lempiras_mojado, total_lempiras_oreado)
* Usar solo total_lempiras_mojado_oreado que viene de la query
- Actualizar CosechasHeatmap.vue:
* Actualizar interface ResumenIngresoRecord con columna combinada
* Cambiar cálculo para usar directamente total_lempiras_mojado_oreado
Los componentes ahora renderizan correctamente los datos de vista_resumen_ingresos.
- Actualizar Queries 56-59 en Metabase via API:
* Eliminar filtro de 'incluir_anulados' (columnas no existen en vista_resumen_ingresos)
* Usar 'total_lempiras_mojado_oreado' en lugar de columnas separadas
* Mantener cast ::text[] para parámetro cosechas_ids
- Actualizar backend (comparativa-cosechas.post.ts):
* Eliminar parámetro incluir_anulados del body
* Mantener conversión de array JS a formato PostgreSQL {elem1,elem2}
- Actualizar frontend (comparativa-cosechas.vue):
* Eliminar envío de parámetro incluir_anulados en fetch
Queries funcionando correctamente con vista_resumen_ingresos.
Mapear --ui-color-success-* a --brand-success para que color="success"
en componentes de Nuxt UI use los colores del tema personalizado.
Antes:
- text-success buscaba --ui-color-success-* (no definidas)
- El color no se conectaba con --brand-success del tema
Después:
- Paleta completa de success (50-950) generada con color-mix
- success-500 apunta directamente a --brand-success
- Variaciones más claras/oscuras con mezclas de white/black
- NavigationMenu con color="success" ahora usa el color del tema
Flujo de colores:
color="success" → text-success (Tailwind) → --color-success-500
→ --ui-color-success-500 → --brand-success (tema personalizado)
Esto completa la integración del sistema de temas con los colores
semánticos de Nuxt UI v4.
- Cambiar v-model a v-model:open según @nuxt/ui v4.0.0
- Eliminar UCard interno que causaba renderizado permanente
- Usar slots nativos del Modal (#header) en lugar de Card
- Simplificar estilos usando clases de Tailwind estándar
- El modal ahora se mostrará solo cuando showResults sea true
Cambiar de configuración :ui incorrecta a props nativos del componente.
Antes (INCORRECTO):
- Usaba :ui="{ item: { base, active, inactive } }"
- La propiedad 'item' NO existe en NavigationMenu v4
Después (CORRECTO):
- Usar color="success" para aplicar colores del tema
- Usar variant="pill" para activar estilos de estado activo
- Eliminar objeto :ui que no era parte de la API del componente
Según el código fuente de Nuxt UI v4, NavigationMenu solo aplica
colores al estado activo con variant="pill" + color específico.
Las compound variants del tema mapean text-success a las variables
CSS del sistema de temas (--brand-success).
Ref: node_modules/@nuxt/ui/.nuxt/ui/navigation-menu.ts líneas 289-296
Movido text-[var(--brand-text-muted)] de item.base a item.inactive
para evitar conflictos de especificidad CSS con el color del estado activo.
Antes:
- item.base aplicaba text-muted a TODOS los items
- Conflicto con text-[var(--brand-success)] del estado active
Después:
- item.base solo tiene estilos de hover (aplicados a todos)
- item.inactive tiene el color muted explícitamente
- item.active mantiene su color success sin conflictos
Esto asegura que el color del texto activo se aplique correctamente
según el tema seleccionado.
- Cambiar UDropdown por UDropdownMenu (componente correcto)
- Corregir evento @select para recibir ambos parámetros (row, event)
- Los botones de exportación ahora funcionarán correctamente
- El modal de resultados debería abrirse al ejecutar queries
- Agregar contador de Queries Comparativa (4/4) en estadísticas
- Agregar nueva tab "Queries Comparativa" en metabase-debug
- Actualizar endpoint query-config para incluir queries comparativa
- Agregar computeds comparativaQueries y missingComparativaQueries
- Mostrar las 4 queries de comparativa con sus detalles
- Reorganizar grid de estadísticas para 6 columnas
La nueva tab permite visualizar y debuggear las queries:
- comparativa_datos_diarios_completos
- comparativa_totales_por_cosecha
- comparativa_datos_acumulados_por_dia
- comparativa_metadata_cosechas
- MetricCard: Actualizar variantes danger/warning/info para usar variables --coffee-*
* danger ahora usa var(--coffee-uva) para métricas de café Uva
* info ahora usa var(--coffee-mojado) para métricas de café Mojado
* warning ahora usa var(--coffee-oreado) para métricas de café Oreado
* Usar color-mix para crear transparencias en bordes (30%)
- TotalesIngresoCompra: Cards personalizadas de Uva usan var(--coffee-uva)
* Total Uva Ingresada, Pagada y en Depósito con color dinámico
* Bordes con 30% de opacidad usando color-mix
- TotalesMonetarios: Card de Precio Promedio Ponderado Uva usa var(--coffee-uva)
- TotalesVerde: Todas las métricas usan var(--coffee-verde) con variaciones
* 6 cards con diferentes tonalidades de verde usando color-mix
* Mezclas con white para crear variaciones más claras
* Una mezcla con cyan (#20d5ff) para variación distintiva
Los valores numéricos de cada tipo de café ahora reflejan dinámicamente
los colores del tema seleccionado, mejorando la identidad visual.
- Cambiar de slots personalizados a definición correcta de columnas con TanStack Table
- Usar accessorKey en lugar de key
- Implementar funciones header y cell con h() para renderizar componentes
- Eliminar slots #column-data y migrar a patrón estándar de nuxt-ui
- Seguir mismo patrón que VistaTablaIngresos.vue y VistaTablaClientes.vue
Esto corrige el problema donde los datos no se mostraban en la tabla de la página metabase-debug
- Agregar configuración de queries comparativa en metabase-queries.ts
- Crear endpoint /api/metabase/comparativa-cosechas.post.ts
- Crear 4 queries en Metabase:
* comparativa_datos_diarios_completos (ID: 56)
* comparativa_totales_por_cosecha (ID: 57)
* comparativa_datos_acumulados_por_dia (ID: 58)
* comparativa_metadata_cosechas (ID: 59)
- Restaurar página comparativa-cosechas.vue con nueva arquitectura
- Remover badge de mantenimiento del sidebar
- Integrar con componentes CosechasHeatmap, CosechasEvolucion y CosechasTotales
- Usar vista_resumen_ingresos como fuente de datos
La página permite comparar métricas entre diferentes cosechas de café
con visualizaciones interactivas y filtros configurables.
- Cambiar botones de confirmación (Guardar/Importar) en settings para usar --brand-success
- Actualizar color de tab activa en sidebar de --brand-primary a --brand-success
- Reemplazar colores hardcoded por variables CSS en badges de tipos de café:
* VistaTablaIngresos: Usar var(--coffee-uva/verde/mojado/oreado)
* informe-ingresos: Aplicar variables --coffee-* y --status-*
- Cambiar text-green-400 por text-[var(--brand-success)] en panorama
- Quitar badge de mantenimiento de Comparativa Cosechas
Todos los cambios siguen las reglas de THEME_SYSTEM.md para garantizar
que los colores respondan correctamente a los cambios de tema del usuario.
Cambios realizados:
- Agregada variable success (#00dc82 Nuxt green) para botones de confirmación y elementos de éxito
- Agregados inputs de color para todas las variables de café (Uva, Oreado, Mojado, Verde)
- Agregados inputs de color para todas las variables de estados (Pendiente, Pagado, Anulado)
- Actualizada interfaz ThemeColors con nueva propiedad success
- Actualizados todos los temas preestablecidos (café, azul, verde, carbón) con variable success
- Actualizada validación de importación de temas con nueva propiedad
- Agregado CSS --brand-success en main.css
Los usuarios ahora pueden personalizar completamente todos los colores del sistema:
- 9 colores base (incluye success)
- 4 colores de tipos de café
- 3 colores de estados de pago
Total: 16 variables personalizables
La variable success se aplica a:
- Botones de confirmación
- Página seleccionada en sidebar
- Indicadores de éxito
- Explicación de arquitectura y componentes
- Guía de uso para desarrolladores
- Ejemplos de código y casos de uso
- Detalles de separación por usuario
- Configuración de limpieza automática
- Sincronización entre pestañas
- FAQ y mejoras futuras
- Crear composable useNotifications con gestión por localStorage
- Almacenamiento separado por usuario usando UID de Authentik
- Auto-limpieza de notificaciones mayores a 30 días
- Sincronización automática entre pestañas
- Filtrado por tipo, búsqueda y gestión completa
- Crear wrapper useToast para guardar toasts automáticamente
- Intercepta todos los toasts de la aplicación
- Guarda historial sin afectar funcionalidad existente
- Implementar endpoints de API para notificaciones del backend
- POST /api/notifications/send para enviar notificaciones
- GET /api/notifications/list para obtener pendientes
- Actualizar página de notificaciones con funcionalidad real
- Búsqueda y filtros por tipo (info, warning, success, error)
- Eliminar individual o todas las notificaciones
- Marcar como leídas individual o todas
- Badges de origen (toast, backend, manual)
- Estados vacíos con mensajes informativos
- Actualizar badge del sidebar con contador dinámico
- Muestra número real de notificaciones no leídas
- Se oculta cuando no hay notificaciones
- Inicializar sistema en app.vue
- Auto-inicialización al montar la app
- Limpieza automática de notificaciones antiguas
Cambios:
- Agregar sección de Variables de Tipos de Café (--coffee-*)
- Agregar sección de Variables de Estados (--status-*)
- Agregar Ejemplo 7: Usar Colores de Tipos de Café
- Agregar Ejemplo 8: Usar Colores de Estados
- Actualizar Ejemplo 6 con todas las propiedades del tema
- Actualizar Resumen de Comandos Rápidos con nuevas variables
- Documentación completa para las 15 variables CSS del sistema
La documentación ahora refleja el sistema extendido de temas.
Cambios:
- app.vue: Reemplazar #fef9f0 con var(--brand-text)
- layouts/dashboard.vue: Usar var(--brand-text)
- layouts/informe.vue: Usar var(--brand-text)
Todos los componentes base ahora responden al sistema de temas.
Cambios:
- Agregar documentación completa del sistema de temas en /settings
- Extender ThemeColors con 7 nuevas variables:
* coffeeUva, coffeeOreado, coffeeMojado, coffeeVerde
* statusPendiente, statusPagado, statusAnulado
- Actualizar useTheme.ts para aplicar nuevas variables CSS
- Actualizar main.css con definiciones de nuevas variables
- Actualizar temas predefinidos (azul, verde, carbón)
- Mantener colores de café y estados consistentes en todos los temas
Las nuevas variables permiten personalizar:
- Colores de identificación de tipos de café en gráficas
- Colores de estados de pago en tablas y badges
Remueve las páginas en modo mantenimiento que no se van a utilizar:
Páginas eliminadas:
- /metadatos - Visualización de estructura de tablas
- /rawExplorer - Exploración de datos en formato raw
Cambios en sidebar:
- Removidos enlaces de "Metadatos" y "Explorador de datos raw"
- Sidebar ahora solo muestra páginas activas y funcionales
Páginas que permanecen:
- Panorama Facturador (funcional)
- Informe Ingresos (funcional)
- Explorador de datos (funcional)
- Comparativa Cosechas (en mantenimiento, se restaurará próximamente)
- Metabase Debug (herramienta de desarrollo)
Simplifica la navegación mostrando solo funcionalidades relevantes.
Remueve el badge de "Mantenimiento" del enlace de Informe Ingresos
en el sidebar, ya que la página está completamente funcional con:
- Todos los totales funcionando correctamente
- Lista de Ingresos con tabla completa
- Top 10 Clientes ranking
- Serie Temporal Acumulada
- Botones de copia (Texto y JSON) en todos los componentes
- Footer con resumen en todos los exports
- Filtros avanzados funcionando
- Sistema de actualizacion con cambios pendientes
La página está lista para producción.
- Crear THEME_SYSTEM.md como documento único y completo
- Eliminar DEVELOPER_GUIDE.md y THEME_CUSTOMIZATION.md (desactualizados)
- Actualizar README.md con referencia al nuevo documento
- Incluye arquitectura, variables, reglas, ejemplos y troubleshooting
- Documentación clara para usuarios y desarrolladores
Implementa botones "Copiar Texto" y "Copiar JSON" en todos los
componentes de datos del Panorama Facturador:
Componentes actualizados:
- SecosVendidos: Exporta inventario y proyecciones de café seco
- RechazosSubproductos: Exporta tabla de rechazos con totales
- Totales Financieros: Exporta vista general financiera (directo en página)
Además:
- Los componentes de Totales (IngresoCompra, Monetarios, Verde)
ahora reciben contadores y metadata para incluir footer
- Todos los textos incluyen footer con:
- Rango de fechas
- Ingresos y rechazos filtrados vs totales
- Fecha de generación
Nota: Panorama no tiene datos de clientes, solo ingresos y rechazos.
El problema era que Nuxt UI usa la escala neutral de forma invertida:
- neutral-50 se usa para texto claro
- neutral-900/950 se usa para fondos oscuros
Esto causaba que los labels tuvieran el mismo color que el fondo de las cards.
Cambios:
- Invertir el mapeo de --ui-color-neutral-*
- neutral-50/100 ahora mapean a --brand-text/--brand-text-muted
- neutral-900/950 ahora mapean a --brand-bg
PROBLEMA: Los componentes de Nuxt UI (UCard, UButton, etc.) usaban
colores fijos de --color-coffee-* que no respondían a cambios de tema.
SOLUCIÓN: Mapear --ui-color-neutral-* a variables --brand-* dinámicas:
- neutral-50/100 → --brand-bg (fondos más oscuros)
- neutral-200 → --brand-surface (fondos elevados)
- neutral-300/400 → --brand-border (bordes)
- neutral-500/600/700 → --brand-primary/primary-strong (interactivos)
- neutral-800/900/950 → --brand-text/text-muted (textos)
RESULTADO: Ahora los UCard y otros componentes de Nuxt UI cambian
correctamente cuando se selecciona un tema predefinido.
Archivos modificados:
- app/assets/css/main.css: Remapeo de variables --ui-color-neutral-*
- Configurar prop :ui en todos los UCard para usar variables CSS del tema
- Reemplazar colores hardcoded (amber, green) por variables de tema
- Los UCard ahora responden correctamente a cambios de tema
- Corrige problema donde los cards no cambiaban de color al seleccionar presets
Archivos modificados:
- app/pages/settings.vue: Agregar :ui prop con bg-[var(--brand-surface)] y border
Implementa un footer consistente en todas las funciones de copiar texto
que incluye información de contexto del informe:
Footer incluye:
- 📅 Rango de fechas aplicado
- 📦 Cantidad de ingresos filtrados vs total
- 👥 Cantidad de clientes con ingresos vs total
- 🕐 Fecha y hora de generación
Cambios en archivos:
- informe-ingresos.vue: Footer en Lista, Top 10 y Serie Temporal
- TotalesIngresoCompra.vue: Recibe contadores y metadata
- TotalesMonetarios.vue: Recibe contadores y metadata
- TotalesVerde.vue: Recibe contadores y metadata
El footer usa datos de la query "Informe Ingresos - Contadores de Filtros"
que proporciona totales con y sin filtros aplicados.
Cambia todos los botones de copia en informe-ingresos.vue para
usar el mismo estilo que los componentes de Totales:
- color: "gray" (antes "neutral")
- variant: "soft" (antes "outline")
- icon JSON: "i-lucide-braces" (antes "i-lucide-code")
Ahora todos los botones de copia en la página tienen apariencia
consistente.
Implementa botones "Copiar Texto" y "Copiar JSON" en los tres
componentes de totales del informe de ingresos:
- TotalesIngresoCompra: Exporta datos de Uva, Mojado, Oreado y totales
- TotalesMonetarios: Exporta inversiones, precios promedio y restantes
- TotalesVerde: Exporta métricas de café verde
Cada componente incluye:
- Formato de texto con emojis para compartir en WhatsApp
- Formato JSON para integración con sistemas
- Alertas de confirmación al copiar
Todos los componentes de datos del informe ahora tienen
funcionalidad de exportación consistente.
Implementa funcionalidad de copia en tres secciones del Informe:
📋 Funcionalidades agregadas:
1. Lista de Ingresos
- Copiar Texto: Formato WhatsApp con emojis y legible
- Copiar JSON: Formato estructurado para sistemas
2. Top 10 Clientes
- Copiar Texto: Ranking formateado con métricas
- Copiar JSON: Array de objetos con datos completos
3. Serie Temporal Acumulada
- Copiar Texto: Evolución temporal con emojis
- Copiar JSON: Datos completos para análisis
✨ Características:
- Botones con iconos (i-lucide-copy y i-lucide-code)
- Disabled cuando no hay datos disponibles
- Alertas de confirmación al copiar
- Formato texto optimizado para WhatsApp
- Incluye metadata: rango de fechas y timestamp
Uso:
- Copiar Texto → Compartir en WhatsApp/Telegram
- Copiar JSON → Integración con otros sistemas
- Altura máxima de 600px con scroll vertical
- Header sticky que se mantiene visible al hacer scroll
- Mejora la usabilidad cuando hay muchos registros
Agrega tres secciones principales con datos reales de Metabase:
1. Lista de Ingresos (Query ID 50)
- Tabla completa con detalles de cada ingreso
- Campos: ID, fecha, cliente, tipo, peso, precio, total, estado
- Badges de colores para tipos y estados
- Soporte para 1000 registros
2. Top 10 Clientes (Query ID 51)
- Ranking por monto total pagado
- Muestra: nombre, cédula, ubicación
- Métricas: total pagado, número de ingresos, quintales
- Diseño en cards con numeración
3. Serie Temporal Acumulada (Query ID 52)
- Datos desglosados por fecha, tipo y estado
- Columnas del período: ingresos, peso seco, inversión
- Columnas acumuladas: qq acumulados, inversión acumulada
- Tabla scrollable con sticky header
Correcciones técnicas:
- Usar campos correctos de las queries de Metabase
- created_at en lugar de fecha
- cliente_nombre en lugar de nombre_cliente
- cliente_id, cliente_cedula, cliente_ubicacion
- fecha_grupo, peso_seco_periodo, inversion_acumulada
- Crear THEME_CUSTOMIZATION.md con guía completa de uso
- Documentar las 8 variables CSS y sus propósitos
- Incluir guías de buenas prácticas y accesibilidad
- Agregar ejemplos de temas predefinidos
- Explicar persistencia en localStorage
- Documentar arquitectura técnica del sistema
- Incluir troubleshooting y roadmap futuro
- Crear formulario completo de configuración de colores
- Agregar 8 campos editables: bg, surface, border, primary, primaryStrong, accent, text, textMuted
- Implementar color pickers + inputs de texto hexadecimal
- Agregar vista previa en tiempo real (toggle opcional)
- Guardar configuración en localStorage
- Aplicar cambios dinámicamente con CSS variables
- Incluir botón para restaurar colores por defecto
- Colores default: tema café actual de la aplicación
Problema: Las queries de Metabase en el endpoint /api/metabase/informe
retornaban 0 filas porque se enviaban par\u00e1metros con arrays vac\u00edos,
lo cual activaba filtros condicionales sin valores.
Soluci\u00f3n: Modificar buildParameters() para solo incluir par\u00e1metros
opcionales (cliente_ids, tipos, estados, ubicaciones, calidades) cuando
tengan valores (arrays no vac\u00edos). Los filtros condicionales [[...]]
de Metabase ahora se omiten correctamente cuando no hay valores.
- Corregir prop :ui de 'wrapper' a 'root' en UDashboardSidebar
- Agregar mapeo explícito de variables --ui-color-neutral-* a coffee
- Esto fuerza a Nuxt UI a usar la paleta café en lugar de slate/azul
- Soluciona el problema de fondo azul en todos los navegadores
- Agregar fondo café oscuro al sidebar (var(--brand-surface))
- Personalizar estilos del input de búsqueda con colores del tema
- Mejorar indicador visual de tab seleccionada con borde izquierdo
- Aplicar estilos consistentes a los badges de teclado (⌘ K)
Los shades estaban configurados para light mode (50=claro, 950=oscuro).
En dark mode, Nuxt UI espera la escala invertida (50=oscuro, 950=claro).
Cambios:
- 50: #1b1209 (más oscuro)
- 500: #c08040 (medio - café principal)
- 950: #fef9f0 (más claro)
Esto asegura que en dark mode se vean los colores café/dorado correctamente.
Nuevo componente creado:
- SimpleMultiSelector.vue: Componente genérico reutilizable
- Normaliza strings a objetos {label, value}
- Capitaliza primera letra automáticamente
- Props configurables: icon, placeholder, labels singular/plural
- Mismo estilo espectacular que otros selectores
Cambios en informe-ingresos.vue:
1. Layout mejorado:
- Grid de 3 columnas (antes 2 columnas + 1 separado)
- Tipos, Estados y Calidades en mismo nivel
- Distribución más equilibrada y consistente
2. Reemplazar UCheckboxGroup por SimpleMultiSelector:
- Tipos de Café: icon coffee, "tipo/tipos"
- Estados: icon check-circle, "estado/estados"
- Calidades: icon star, "calidad/calidades"
3. Labels consistentes:
- Todas las secciones usan mismo formato
- text-sm font-medium mb-2
Beneficios:
- Interfaz más limpia y moderna
- Búsqueda integrada en cada filtro
- Tags visuales de selección
- Consistencia total en todos los filtros
- Mismo tema café/dorado en toda la app
- Mejor uso del espacio (3 columnas iguales)
Problema identificado:
- El array de ubicaciones viene como array de strings simples,
no como objetos con {label, value}
- Ejemplo: ["breñales, la union, lempira", "buenos aires, ..."]
Solución implementada:
1. Normalización de datos:
- Crear computed normalizedUbicaciones que transforma el array
- Si el item es string: usa el string como label y value
- Si el item es objeto: usa sus propiedades label y value
- Filtrar null/undefined durante la transformación
2. Agregar prop loading:
- Agregada prop opcional loading?: boolean
- Pasar loading al UInputMenu para mostrar spinner
3. Simplificar lógica de filtrado:
- Usar normalizedUbicaciones como base
- Filtrar por query sin errores de toLowerCase
4. Mejorar selectedUbicacionesObjects:
- Usar normalizedUbicaciones para encontrar seleccionados
- Comparar con value normalizado
Ahora el componente:
- Muestra todas las ubicaciones correctamente
- Funciona con array de strings o array de objetos
- Muestra animación de loading cuando carga datos
- Búsqueda funciona sin errores
Implementa la configuración correcta de colores según Nuxt UI 4:
- Define color 'coffee' con shades 50-950 usando @theme en CSS
- Configura aliases primary y neutral a 'coffee' en app.config.ts
- Esto permite que todos los componentes de Nuxt UI usen el tema café/dorado
- Reemplaza los colores azules y verdes por defecto globalmente
Problemas corregidos:
1. Error "Cannot read properties of undefined (reading 'toLowerCase')":
- Agregar validación para filtrar items undefined/null
- Verificar que cada item tenga label y value antes de usar toLowerCase
- Prevenir errores cuando el array de ubicaciones tiene items inválidos
2. Selección múltiple no funcionaba:
- Mejorar onSelectionChange para manejar diferentes tipos de valores
- Agregar validación de array antes de procesar
- Filtrar items null/undefined antes de extraer valores
- Manejar tanto objetos como strings en el array de valores
3. Tags no aparecían en el input:
- El problema estaba en el procesamiento de valores seleccionados
- Ahora maneja correctamente item.value y strings directos
El componente ahora funciona igual que ClienteMultiSelector:
- Sin errores en consola
- Tags visuales aparecen correctamente
- Selección múltiple funciona perfectamente
