Corregir binding reactivo de filtros en ContactsFilters
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 57s

- 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)
This commit is contained in:
2025-12-05 12:06:03 -06:00
parent 6da1552ae1
commit a017423282

View File

@@ -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
)
})