feat(docs): fixed fuse js search (move single phrase search to matching all words) (#4825)

docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue

@@ -122,7 +122,7 @@ const categoriesList = computed(() => {
 });
 const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
 const isSearchMetadataLoading = computed(
-  () => searchQuery.value.length > 0 && (tags.value == null || categoriesMap.value == null),
+  () => searchQuery.value.length > 0 && !isFetchingTags && !isFetchingCategories,
 );
 
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(categoriesList, {

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -88,9 +88,13 @@ const mappedIcons = computed(() => {
     return sortedIcons.value;
   }
 
+  if (categories.value == null) {
+    return sortedIcons.value;
+  }
+
   return sortedIcons.value.map((icon) => {
     const iconTags = tags.value[icon.name];
-    const iconCategories = categories.value?.[icon.name] ?? [];
+    const iconCategories = categories.value[icon.name] ?? [];
 
     return {
       ...icon,
@@ -115,7 +119,7 @@ const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
 
 const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
 const isSearchMetadataLoading = computed(
-  () => searchQuery.value.length > 0 && (tags.value == null || categories.value == null),
+  () => searchQuery.value.length > 0 && !isFetchingTags && !isFetchingCategories,
 );
 
 const chunkedIcons = computed(() => {

docs/.vitepress/theme/composables/useSearch.ts

@@ -9,6 +9,7 @@ const useSearch = <T>(
   const index = shallowRef(
     new Fuse(collection.value, {
       threshold: 0.2,
+      useExtendedSearch: true,
       keys,
     }),
   );
@@ -17,7 +18,9 @@ const useSearch = <T>(
     index.value.setCollection(collection.value);
 
     if (query.value) {
-      return index.value.search(query.value).map((result) => result.item);
+      return index.value
+        .search({ $and: query.value.split(' ').filter((t) => !!t) })
+        .map((result) => result.item);
     }
 
     return collection.value;

docs/.vitepress/theme/utils/useSearchPlaceholder.ts

@@ -29,7 +29,7 @@ export default function useSearchPlaceholder(
         }
       }
       state.value = {
-        isNoResults: query in BRAND_STOPWORDS && searchResults.length === 0 && query !== '',
+        isNoResults: query !== '' && searchResults.length === 0,
         isBrand: query in BRAND_STOPWORDS,
         query: BRAND_STOPWORDS[query] ?? query,
       };