From a0174232826c796a2b64e2c45543cdbbacb00187 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 5 Dec 2025 12:06:03 -0600
Subject: [PATCH] Corregir binding reactivo de filtros en ContactsFilters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar de computed único a computed individuales por filtro
- Cada filtro ahora emite correctamente update:modelValue
- Los filtros funcionan en tiempo real (nombre fuzzy, ID, teléfono, empleado)
---
 .../components/contacts/ContactsFilters.vue   | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/nuxt4/app/components/contacts/ContactsFilters.vue b/nuxt4/app/components/contacts/ContactsFilters.vue
index ccffc56..2660738 100644
--- a/nuxt4/app/components/contacts/ContactsFilters.vue
+++ b/nuxt4/app/components/contacts/ContactsFilters.vue
@@ -4,16 +4,16 @@
     <div class="search-input-wrapper">
       <UIcon name="i-heroicons-magnifying-glass" class="search-icon" />
       <input
-        v-model="localFilters.search"
+        v-model="searchFilter"
         type="text"
         placeholder="Buscar por nombre..."
         class="search-input"
       />
       <button
-        v-if="localFilters.search"
+        v-if="searchFilter"
         class="search-clear"
         title="Limpiar búsqueda"
-        @click="localFilters.search = ''"
+        @click="searchFilter = ''"
       >
         <UIcon name="i-heroicons-x-mark" class="w-4 h-4" />
       </button>
@@ -24,7 +24,7 @@
       <!-- Filtro por ID -->
       <div class="filter-field filter-id">
         <UInput
-          v-model="localFilters.id"
+          v-model="idFilter"
           type="number"
           placeholder="ID"
           size="sm"
@@ -34,7 +34,7 @@
       <!-- Filtro por teléfono -->
       <div class="filter-field filter-phone">
         <UInput
-          v-model="localFilters.telefono"
+          v-model="telefonoFilter"
           placeholder="Teléfono"
           size="sm"
         />
@@ -42,7 +42,7 @@
 
       <!-- Checkbox empleados -->
       <label class="filter-checkbox">
-        <UCheckbox v-model="localFilters.empleado" />
+        <UCheckbox v-model="empleadoFilter" />
         <span>Solo empleados</span>
       </label>
 
@@ -73,17 +73,33 @@ const emit = defineEmits<{
   'clear': []
 }>()
 
-const localFilters = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
+// Computed individuales para cada filtro con emisión reactiva
+const searchFilter = computed({
+  get: () => props.modelValue.search,
+  set: (val) => emit('update:modelValue', { ...props.modelValue, search: val })
+})
+
+const idFilter = computed({
+  get: () => props.modelValue.id,
+  set: (val) => emit('update:modelValue', { ...props.modelValue, id: val })
+})
+
+const telefonoFilter = computed({
+  get: () => props.modelValue.telefono,
+  set: (val) => emit('update:modelValue', { ...props.modelValue, telefono: val })
+})
+
+const empleadoFilter = computed({
+  get: () => props.modelValue.empleado,
+  set: (val) => emit('update:modelValue', { ...props.modelValue, empleado: val })
 })
 
 const hasActiveFilters = computed(() => {
   return (
-    localFilters.value.search ||
-    localFilters.value.id ||
-    localFilters.value.telefono ||
-    !localFilters.value.empleado
+    props.modelValue.search ||
+    props.modelValue.id ||
+    props.modelValue.telefono ||
+    !props.modelValue.empleado
   )
 })