Merge branch 'fuzzy-search'

package-lock.json

@@ -11,6 +11,7 @@
         "@vueuse/core": "^12.5.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "fuse.js": "^7.0.0",
         "lucide-vue-next": "^0.474.0",
         "radix-vue": "^1.9.13",
         "tailwind-merge": "^2.6.0",
@@ -1609,6 +1610,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",

package.json

@@ -12,6 +12,7 @@
     "@vueuse/core": "^12.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "fuse.js": "^7.0.0",
     "lucide-vue-next": "^0.474.0",
     "radix-vue": "^1.9.13",
     "tailwind-merge": "^2.6.0",

src/components/directory/DirectoryGrid.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import Fuse from 'fuse.js'
 import DirectoryCard from './DirectoryCard.vue'
 import { type DirectoryItem } from '@/types/directory'
 import DirectoryFilter from './DirectoryFilter.vue'
@@ -11,13 +12,37 @@ const props = defineProps<{
   items: DirectoryItem[]
 }>()
 
+// Configure Fuse.js options
+const fuseOptions = {
+  keys: [
+    'name',
+    'description',
+    'town',
+    'address',
+    'contact',
+    'lightning'
+  ],
+  threshold: 0.3, // Lower threshold means more strict matching
+  ignoreLocation: true,
+  shouldSort: true
+}
+
+const fuse = new Fuse(props.items, fuseOptions)
+
 const filteredItems = computed(() => {
-  return props.items.filter(item => {
-    const matchesCategory = selectedCategory.value === 'all' || item.category === selectedCategory.value
-    const matchesSearch = item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-      item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
-    return matchesCategory && matchesSearch
-  })
+  let results = props.items
+
+  // Apply search if query exists
+  if (searchQuery.value) {
+    results = fuse.search(searchQuery.value).map(result => result.item)
+  }
+
+  // Apply category filter
+  if (selectedCategory.value !== 'all') {
+    results = results.filter(item => item.category === selectedCategory.value)
+  }
+
+  return results
 })
 </script>
 
@@ -25,16 +50,26 @@ const filteredItems = computed(() => {
   <div class="container mx-auto px-4 py-8">
     <!-- Filters -->
     <div class="mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
-      <DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" />
+      <DirectoryFilter 
+        v-model:category="selectedCategory"
+        v-model:search="searchQuery"
+      />
     </div>
 
     <!-- Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      <DirectoryCard v-for="item in filteredItems" :key="item.id" :item="item" />
+      <DirectoryCard
+        v-for="item in filteredItems"
+        :key="item.id"
+        :item="item"
+      />
     </div>
 
     <!-- Empty State -->
-    <div v-if="filteredItems.length === 0" class="text-center py-12">
+    <div 
+      v-if="filteredItems.length === 0"
+      class="text-center py-12"
+    >
       <p class="text-lg text-muted-foreground">
         No results found. Try adjusting your filters.
       </p>