From 466e3923d7a242ffde444443de605e59954725fe Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 13:16:17 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Corregir=20implementaci=C3=B3n=20de=20In?=
 =?UTF-8?q?putMenu=20seg=C3=BAn=20documentaci=C3=B3n=20oficial?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../app/components/ClienteMultiSelector.vue   | 64 +++++++++++--------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/nuxt4-app/app/components/ClienteMultiSelector.vue b/nuxt4-app/app/components/ClienteMultiSelector.vue
index 0f593d9..f1f6617 100644
--- a/nuxt4-app/app/components/ClienteMultiSelector.vue
+++ b/nuxt4-app/app/components/ClienteMultiSelector.vue
@@ -4,29 +4,39 @@
     <UInputMenu
       v-model="selectedClientes"
       v-model:search-term="searchQuery"
-      v-model:open="isMenuOpen"
       :items="filteredItems"
       :loading="loading"
       multiple
-      icon="i-lucide-search"
-      placeholder="Buscar clientes por nombre o cédula (mínimo 4 caracteres)..."
+      label-key="name"
       value-key="id"
+      icon="i-lucide-search"
+      placeholder="Buscar clientes por nombre o cédula..."
+      ignore-filter
     >
-      <template #item="{ item }">
-        <div class="flex-1 min-w-0">
-          <div class="font-medium truncate">
-            {{ item.name }}
-          </div>
-          <div class="text-xs text-[var(--brand-text-muted)]">
-            <span v-if="item.cedula">{{ formatCedula(item.cedula) }}</span>
-          </div>
+      <template #item-label="{ item }">
+        <div class="flex flex-col gap-0.5">
+          <span class="font-medium">{{ item.name }}</span>
+          <span v-if="item.cedula" class="text-xs text-muted">
+            {{ formatCedula(item.cedula) }}
+          </span>
+        </div>
+      </template>
+
+      <template #empty>
+        <div class="text-center py-2">
+          <span v-if="searchQuery.length < 4" class="text-muted text-sm">
+            Escribe al menos 4 caracteres para buscar
+          </span>
+          <span v-else class="text-muted text-sm">
+            No se encontraron clientes
+          </span>
         </div>
       </template>
     </UInputMenu>
 
     <!-- Selected count and clear all -->
     <div v-if="selectedClientes.length > 0" class="flex items-center justify-between text-sm">
-      <span class="text-[var(--brand-text-muted)]">
+      <span class="text-muted">
         {{ selectedClientes.length }} cliente{{ selectedClientes.length !== 1 ? 's' : '' }} seleccionado{{ selectedClientes.length !== 1 ? 's' : '' }}
       </span>
       <UButton
@@ -42,6 +52,8 @@
 </template>
 
 <script setup lang="ts">
+import type { InputMenuItem } from '@nuxt/ui'
+
 interface Cliente {
   id: number
   name: string
@@ -61,7 +73,6 @@ const emit = defineEmits<{
 const clientes = ref<Cliente[]>([])
 const loading = ref(false)
 const searchQuery = ref('')
-const isMenuOpen = ref(false)
 
 // Computed - Sync with props
 const selectedClientes = computed({
@@ -74,7 +85,7 @@ const selectedClientes = computed({
 })
 
 // Computed - Filter items based on search (min 4 characters)
-const filteredItems = computed(() => {
+const filteredItems = computed((): InputMenuItem[] => {
   const query = searchQuery.value.trim()
 
   // Only show items if search has at least 4 characters
@@ -84,19 +95,18 @@ const filteredItems = computed(() => {
 
   const lowerQuery = query.toLowerCase()
 
-  return clientes.value.filter(c =>
-    c.name.toLowerCase().includes(lowerQuery) ||
-    c.cedula?.includes(query)
-  )
-})
-
-// Watch searchQuery to control menu opening
-watch(searchQuery, (newValue) => {
-  if (newValue.trim().length >= 4 && filteredItems.value.length > 0) {
-    isMenuOpen.value = true
-  } else {
-    isMenuOpen.value = false
-  }
+  return clientes.value
+    .filter(c =>
+      c.name.toLowerCase().includes(lowerQuery) ||
+      c.cedula?.includes(query)
+    )
+    .map(c => ({
+      id: c.id,
+      name: c.name,
+      cedula: c.cedula,
+      label: c.name,
+      value: c.id
+    }))
 })
 
 // Methods