feat: frontend autocomplete is diacritics/ligatures insensitive (#6169)

Co-authored-by: Pierre <pierre@debian.zabi.ovh>
Co-authored-by: Michael Genson <genson.michael@gmail.com>
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -56,6 +56,7 @@
           variant="solo"
           return-object
           :items="units || []"
+          :custom-filter="normalizeFilter"
           item-title="name"
           class="mx-1"
           :placeholder="$t('recipe.choose-unit')"
@@ -114,6 +115,7 @@
           variant="solo"
           return-object
           :items="foods || []"
+          :custom-filter="normalizeFilter"
           item-title="name"
           class="mx-1 py-0"
           :placeholder="$t('recipe.choose-food')"
@@ -171,6 +173,7 @@
           variant="solo"
           return-object
           :items="search.data.value || []"
+          :custom-filter="normalizeFilter"
           item-title="name"
           class="mx-1 py-0"
           :placeholder="$t('search.type-to-search')"
@@ -225,6 +228,7 @@ import { ref, computed, reactive, toRefs } from "vue";
 import { useDisplay } from "vuetify";
 import { useI18n } from "vue-i18n";
 import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
+import { normalizeFilter } from "~/composables/use-utils";
 import { useNuxtApp } from "#app";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
 import { usePublicExploreApi, useUserApi } from "~/composables/api";

frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue

@@ -4,6 +4,7 @@
     v-bind="inputAttrs"
     v-model:search="searchInput"
     :items="items"
+    :custom-filter="normalizeFilter"
     :label="label"
     chips
     closable-chips
@@ -52,6 +53,7 @@ import type { RecipeTool } from "~/lib/api/types/admin";
 import { Organizer, type RecipeOrganizer } from "~/lib/api/types/non-generated";
 import type { HouseholdSummary } from "~/lib/api/types/household";
 import { useCategoryStore, useFoodStore, useHouseholdStore, useTagStore, useToolStore } from "~/composables/store";
+import { normalizeFilter } from "~/composables/use-utils";
 
 interface Props {
   selectorType: RecipeOrganizer;

frontend/components/global/InputLabelType.vue

@@ -7,6 +7,7 @@
     item-title="name"
     return-object
     :items="items"
+    :custom-filter="normalizeFilter"
     :prepend-icon="icon || $globals.icons.tags"
     auto-select-first
     clearable
@@ -52,6 +53,7 @@
 
 import type { MultiPurposeLabelSummary } from "~/lib/api/types/labels";
 import type { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
+import { normalizeFilter } from "~/composables/use-utils";
 
 export default defineNuxtComponent({
   props: {
@@ -122,6 +124,7 @@ export default defineNuxtComponent({
       itemIdVal,
       searchInput,
       emitCreate,
+      normalizeFilter,
     };
   },
 });

frontend/components/global/LanguageDialog.vue

@@ -9,6 +9,7 @@
       <v-autocomplete
         v-model="selectedLocale"
         :items="locales"
+        :custom-filter="normalizeFilter"
         item-title="name"
         item-value="value"
         class="my-3"
@@ -44,6 +45,7 @@
 
 <script lang="ts">
 import { useLocales } from "~/composables/use-locales";
+import { normalizeFilter } from "~/composables/use-utils";
 
 export default defineNuxtComponent({
   props: {
@@ -83,6 +85,7 @@ export default defineNuxtComponent({
       locale,
       selectedLocale,
       onLocaleSelect,
+      normalizeFilter,
     };
   },
 });