@bagelink/vue 1.4.184 → 1.5.3

package/src/utils/useSearch.ts

@@ -129,6 +129,7 @@ export interface SearchResult<T> {
 	hasResults: ComputedRef<boolean>
 	isSearching: ComputedRef<boolean>
 	isLoading: ComputedRef<boolean> // New property to track server-side loading state
+	searchTerm?: import('vue').Ref<string> // Optional searchTerm ref for simplified usage
 }
 
 /**
@@ -349,12 +350,59 @@ export function searchItems<T>(params: SearchItemParams<T>): T[] {
 /**
  * Vue composable for searching items with reactive results
  * Supports both client-side filtering and server-side search
- * @param params Search parameters
+ *
+ * Usage 1 - Simplified: Pass items directly and get searchTerm ref back
+ * ```ts
+ * const { results, searchTerm } = useSearch(itemList)
+ * ```
+ *
+ * Usage 2 - Advanced: Pass full params object with custom search term
+ * ```ts
+ * const searchTerm = ref('')
+ * const { results } = useSearch({ searchTerm, items: itemList, keysToSearch: ['name'] })
+ * ```
+ *
+ * @param paramsOrItems Search parameters object or array of items for simplified usage
+ * @param options Optional additional search parameters (only used with simplified usage)
  * @returns Reactive search results and metadata
  */
+export function useSearch<T>(
+	items: MaybeRefOrGetter<T[]>,
+	options?: Omit<SearchItemParams<T>, 'items' | 'searchTerm'>
+): SearchResult<T> & { searchTerm: import('vue').Ref<string> }
 export function useSearch<T>(
 	params: SearchItemParams<T>
+): SearchResult<T>
+export function useSearch<T>(
+	paramsOrItems: SearchItemParams<T> | MaybeRefOrGetter<T[]>,
+	options?: Omit<SearchItemParams<T>, 'items' | 'searchTerm'>
 ): SearchResult<T> {
+	// Normalize inputs - detect if first argument is items array or params object
+	let params: SearchItemParams<T>
+	let ownedSearchTerm: import('vue').Ref<string> | undefined
+
+	// Check if first argument is an array or ref (simplified usage)
+	// If it's a params object, it won't have these characteristics
+	const isArray = Array.isArray(paramsOrItems)
+	const isFunction = typeof paramsOrItems === 'function'
+	const isObject = typeof paramsOrItems === 'object' && paramsOrItems !== null
+	const isRef = isObject && 'value' in paramsOrItems && !('items' in paramsOrItems)
+
+	const isSimplifiedUsage = isArray || isFunction || isRef
+
+	if (isSimplifiedUsage) {
+		// Simplified usage: useSearch(items, options)
+		ownedSearchTerm = ref('')
+		params = {
+			items: paramsOrItems as MaybeRefOrGetter<T[]>,
+			searchTerm: ownedSearchTerm,
+			...options
+		}
+	} else {
+		// Advanced usage: useSearch(params)
+		params = paramsOrItems as SearchItemParams<T>
+	}
+
 	const { searchTerm, minChars = 2, serverSearch, debounceMs = 300 } = params
 
 	// For tracking server-side loading state
@@ -425,11 +473,18 @@ export function useSearch<T>(
 		return !!term && typeof term === 'string' && term.length >= minChars
 	})
 
-	return {
+	const result: SearchResult<T> = {
 		results,
 		resultCount,
 		hasResults,
 		isSearching,
 		isLoading: computed(() => isLoading.value),
 	}
+
+	// Include searchTerm in result if we created it (simplified usage)
+	if (ownedSearchTerm) {
+		result.searchTerm = ownedSearchTerm
+	}
+
+	return result
 }