Cambios aplicados:
- Reemplazar ring-2 (2px) por ring-1 (1px) para borde más delgado
- Cambiar color de focus de verde por defecto a --brand-primary (#e0c080)
- Aplicar focus:ring-1 y focus:border-[--brand-primary] en el input base
- Agregar focus-within:ring-1 en el root para consistencia
- Agregar transition-shadow para animación suave del borde
Ahora el borde de focus es más delgado y usa el color dorado
de la app en lugar del verde por defecto de Nuxt UI.
Colores aplicados según el sistema de diseño de la app:
- Fondo del input: --brand-surface (#1f180f)
- Borde: --brand-border (#3a2a16)
- Texto: --brand-text (#fef9f0)
- Placeholder y iconos: --brand-text-muted (#d8c7a6)
- Dropdown: mismo fondo y borde que el input
- Item highlighted: rgba(224,192,128,0.12) (tono dorado suave)
- Tags seleccionados: rgba(224,192,128,0.14) con borde más fuerte
- Color de tags: --brand-primary (#e0c080)
- Hover en botón delete: tono dorado más intenso
El componente ahora tiene la misma paleta de colores que las cards
de Metabase Debug y el resto de la aplicación, eliminando los
colores azules/verdes por defecto de Nuxt UI.
Correcciones de funcionalidad:
- Cambiar v-model por :model-value y @update:model-value para control manual
- Crear selectedClientesObjects computed para sincronizar con props
- Implementar onSelectionChange para extraer IDs correctamente
- Arreglar binding bidireccional con selectedIds
Correcciones de estilo:
- Agregar size="sm" para consistencia con otros inputs
- Usar variables CSS de la app (--brand-text, --brand-text-muted)
- Mantener coherencia visual con el resto de componentes
- Corregir contador para usar props.selectedIds directamente
Ahora el componente:
- Permite seleccionar y deseleccionar usuarios correctamente
- Muestra tags visuales de los seleccionados
- Mantiene el estilo consistente con la app
- Respeta el mínimo de 4 caracteres para búsqueda
Correcciones aplicadas:
- Usar ignore-filter para control manual del filtrado
- Implementar label-key y value-key correctamente
- Usar slot #item-label en lugar de #item para personalización
- Usar slot #empty para mensajes cuando no hay resultados
- Mapear items a formato InputMenuItem con label y value
- Usar clases de Nuxt UI (text-muted) en lugar de variables CSS
- Simplificar lógica eliminando control manual del estado open
Funcionalidad:
- Filtrado solo se activa con mínimo 4 caracteres
- Búsqueda por nombre y cédula
- Selección múltiple con tags visuales
- Formato de cédula mantenido
Cambios implementados:
- Reemplazar input con checkboxes por UInputMenu con selección múltiple
- Filtrado por nombre y cédula únicamente (sin ubicación)
- El menú de sugerencias solo se abre después de 4 caracteres
- Mantener contador de seleccionados y botón "Limpiar todo"
- Actualizar tipo de cedula de number a string para manejar formato correcto
- Simplificar lógica eliminando filtros por ubicación
Mejoras de UX:
- Interfaz más limpia y moderna con InputMenu
- Búsqueda más eficiente con mínimo de caracteres
- Tags visuales para items seleccionados
- Formato de cédula mantenido (XXXX-XXXX-XXXXX)
- Crear endpoint /api/clientes para obtener clientes desde Supabase
- Crear endpoint /api/postgres/query para ejecutar queries SQL
- Crear componente ClienteMultiSelector con búsqueda y filtro por ubicación
- Agregar filtros de clientes, ubicaciones y calidades en informe-ingresos.vue
- Cargar opciones de filtros desde Metabase (query ID 53)
- Actualizar detección de cambios pendientes con nuevos filtros
- Enviar cliente_ids, ubicaciones y calidades al endpoint de Metabase
- Componente con formato de cédula y ordenamiento por nombre
- Búsqueda por nombre, cédula o ubicación
- Contador de selección y botón limpiar todo
- Botones rápidos para seleccionar por ubicación
