refactor: Update FuzzySearch component and composable for improved class handling and code clarity

- Modify the class prop in FuzzySearch.vue to accept both string and array types for greater flexibility.
- Adjust the template to correctly reference props.class for consistent styling.
- Remove unused variables in FuzzySearchDemo.vue to streamline the code.
- Update the updateData function in useFuzzySearch.ts for better parameter clarity.
This commit is contained in:
padreug 2025-08-08 15:23:23 +02:00
parent fd795df8ac
commit 7241789c9e
3 changed files with 5 additions and 7 deletions

View file

@ -29,7 +29,7 @@ interface Props<T = any> {
/**
* Custom class for the search container
*/
class?: string
class?: string | string[]
/**
* Whether the search input should be disabled
*/
@ -58,7 +58,6 @@ const dataRef = computed(() => props.data)
// Use the fuzzy search composable
const {
searchQuery,
results,
filteredItems,
isSearching,
resultCount,
@ -90,7 +89,7 @@ watch(filteredItems, (items) => {
</script>
<template>
<div :class="['fuzzy-search', class]">
<div :class="['fuzzy-search', props.class]">
<!-- Search Input -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">

View file

@ -47,8 +47,7 @@ const {
results,
filteredItems,
isSearching,
resultCount,
clearSearch
resultCount
} = useFuzzySearch(products, searchOptions)
// Handle search results

View file

@ -122,7 +122,7 @@ export function useFuzzySearch<T = any>(
},
resultLimit,
matchAllWhenSearchEmpty = true,
debounceMs = 300,
minSearchLength = 0
} = options
@ -161,7 +161,7 @@ export function useFuzzySearch<T = any>(
searchQuery.value = query
}
const updateData = (newData: T[]) => {
const updateData = (_newData: T[]) => {
// The useFuse composable automatically watches for data changes
// so we just need to update the ref if it's reactive
if (Array.isArray(data)) {