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

View file

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

View file

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