fix(customers): improve email input

Author: benjamincanac

src/pages/customers.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTemplateRef, h, ref, watch, resolveComponent } from 'vue'
+import { useTemplateRef, h, ref, computed, watch, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
 import { useFetch } from '@vueuse/core'
@@ -190,6 +190,15 @@ watch(() => statusFilter.value, (newVal) => {
   }
 })
 
+const email = computed({
+  get: (): string => {
+    return (table.value?.tableApi?.getColumn('email')?.getFilterValue() as string) || ''
+  },
+  set: (value: string) => {
+    table.value?.tableApi?.getColumn('email')?.setFilterValue(value || undefined)
+  }
+})
+
 const pagination = ref({
   pageIndex: 0,
   pageSize: 10
@@ -213,11 +222,10 @@ const pagination = ref({
     <template #body>
       <div class="flex flex-wrap items-center justify-between gap-1.5">
         <UInput
-          :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
+          v-model="email"
           class="max-w-sm"
           icon="i-lucide-search"
           placeholder="Filter emails..."
-          @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
         />
 
         <div class="flex flex-wrap items-center gap-1.5">