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:
parent
fd795df8ac
commit
7241789c9e
3 changed files with 5 additions and 7 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -47,8 +47,7 @@ const {
|
|||
results,
|
||||
filteredItems,
|
||||
isSearching,
|
||||
resultCount,
|
||||
clearSearch
|
||||
resultCount
|
||||
} = useFuzzySearch(products, searchOptions)
|
||||
|
||||
// Handle search results
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue