feat: create useSearch composable + custome filter on CategorySelector

components/PoisList/CategorySelector.vue

@@ -12,6 +12,7 @@ import {
 import { defineNuxtComponent } from '#app'
 import TeritorioIcon from '~/components/UI/TeritorioIcon.vue'
 import type { ApiMenuCategory, MenuItem } from '~/lib/apiMenu'
+import useSearch from '~/composables/useSearch'
 
 export default defineNuxtComponent({
   components: {
@@ -79,6 +80,13 @@ export default defineNuxtComponent({
         .sort((a, b) => a && b ? a.title.localeCompare(b.title, localeCompareOptions) : -1)
     },
   },
+
+  methods: {
+    customFilter(currentItem: string, queryText: string) {
+      const { searchText } = useSearch()
+      return searchText(currentItem, queryText)
+    },
+  },
 })
 </script>
 
@@ -93,6 +101,7 @@ export default defineNuxtComponent({
       variant="solo"
       rounded
       hide-details="auto"
+      :custom-filter="customFilter"
       @update:model-value="$emit('categoryChange', $event)"
     >
       <template #prepend-inner>

composables/useSearch.ts

@@ -0,0 +1,17 @@
+export default function () {
+  function removeDiacritics(str: string) {
+    return str
+      .normalize('NFD')
+      .replace(/[\u0300-\u036F]/g, '')
+  }
+
+  function searchText(currentItem: string, queryText: string) {
+    const item = removeDiacritics(currentItem.toLowerCase())
+    const query = removeDiacritics(queryText.toLowerCase())
+    return item.includes(query)
+  }
+
+  return {
+    searchText,
+  }
+}