feat: added suggestion picked to suggestion submit event

This was added because we often want to know what suggestion item the user
picked, but by the time of the submit event the active suggestion is undefined
because the suggestions were closed.

Author: AlansCodeLog

src/components/LibInput/LibInput.vue

@@ -173,7 +173,7 @@ defineOptions({
 })
 const $slots = useSlots()
 const emit = defineEmits<{
-	(e: "submit", val: string): void
+	(e: "submit", val: string, suggestion?: any): void
 	(e: "input", val: InputEvent): void
 	(e: "keydown", val: KeyboardEvent): void
 	(e: "blur", val: FocusEvent): void
@@ -301,9 +301,9 @@ const suggestionProps = computed(() => ({
 	inputValue: inputValue.value,
 	isValid: props.isValid,
 	"onUpdate:inputValue": (e: string) => inputValue.value = e,
-	onSubmit: (e: string) => {
+	onSubmit: (e: string, suggestion: any) => {
 		$modelValue.value = e
-		emit("submit", e)
+		emit("submit", e, suggestion)
 		if ($values.value) {
 			$values.value.push(e)
 		}

src/components/shared/props.ts

@@ -69,7 +69,7 @@ export type SuggestionsProps<T = any> = {
 }
 export type SuggestionsOptions<T> = SuggestionsProps<T> & MultiValueProps
 export interface SuggestionsEmits {
-	(e: "submit", val: string): void
+	(e: "submit", val: string, suggestion?: any): void
 	(e: "update:isOpen", val: boolean): void
 	(e: "update:activeSuggestion", val: number): void
 }

src/composables/useSuggestions.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { isBlank } from "@alanscodelog/utils/isBlank.js"
 import { isObject } from "@alanscodelog/utils/isObject.js"
-import { computed, type Ref, ref, watch } from "vue"
+import { computed, type Ref, ref, toRaw, watch } from "vue"
 
 import { type SuggestionsEmits,type SuggestionsOptions } from "../components/shared/props.js"
 
@@ -110,12 +110,13 @@ export function useSuggestions<TSuggestion>(
 		if (debug) console.log("enterSuggestion", num)
 		if (filteredSuggestions.value === undefined) return
 
-		const val = suggestionLabel.value(filteredSuggestions.value[num])
+		const suggestion = filteredSuggestions.value[num]
+		const val = suggestionLabel.value(suggestion)
 
 		$modelValue.value = val
 		$inputValue.value = val
 		closeSuggestions()
-		emit("submit", $modelValue.value)
+		emit("submit", val, toRaw(suggestion))
 	}
 
 	const enterSelected = (): void => {