fix: fixed several issues with suggestions

- It now also emits "submit" properly on any "intentful" selection (pressing enter or directly clicking)
instead of just when multiple values are enabled.

Author: AlansCodeLog

src/components/LibSuggestions/LibSuggestions.vue

@@ -1,13 +1,13 @@
 <template>
 <div
-	v-if="isOpen"
+	v-if="$isOpen"
 	:id="`suggestions-${id}`"
 	class="
 			suggestions
 			bg-bg
 			dark:bg-fg
 		"
-	:data-open="isOpen"
+	:data-open="$isOpen"
 	role="listbox"
 	ref="el"
 	v-bind="$attrs"
@@ -57,31 +57,48 @@ const $attrs = useAttrs()
 const emits = defineEmits<{
 	(e: "update:activeSuggestion", val: number): void
 	(e: "submit", val: string): void
-	(e: "update:isValid", val: boolean): void
 	(e: "update:isOpen", val: boolean): void
 }>()
 
 
 const props = defineProps({
-	isValid: { type: Boolean as PropType<boolean>, required: false, default: true },
 	...linkableByIdProps(),
 	...suggestionsProps,
 	...baseInteractiveProps,
 	...multiValueProps,
-	values: { type: Array as PropType<string[]>, required: false, default: () => []},
 	canOpen: { type: Boolean as PropType<boolean>, required: false, default: false },
+	values: { type: Array as PropType<string[]>, required: false, default: () => []},
 })
+
 /**
  * The final valid value. This is *not* the value you want to share with the input. If `restrictToSuggestions` is true this will not update on any invalid values that `inputValue` might be set to.
  */
-const modelValue = defineModel<string>("modelValue", { required: true })
+const $modelValue = defineModel<string>("modelValue", { required: true })
 /**
  * If the element is bound to an input, this is the value that the input should be sharing.
  *
- * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is close via cancel.
+ * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is closed via cancel.
  */
-const inputValue = defineModel<string >("inputValue", { default: "" })
-const isOpen = ref(false)
+const $inputValue = defineModel<string >("inputValue", { local: true, default: "" })
+const $isValid = defineModel<boolean>("isValid", { required: false, default: true })
+const _isOpen = ref(false)
+const $isOpen = computed<boolean>({
+	get: () => _isOpen.value,
+	set: (val: boolean) => {
+		_isOpen.value = val
+		emits("update:isOpen", val)
+	},
+})
+
+const activeSuggestionRef = ref<number>(-1)
+const activeSuggestion = computed({
+	get: () => activeSuggestionRef.value,
+	set: (val: number) => {
+		activeSuggestionRef.value = val
+		emits("update:activeSuggestion", activeSuggestionRef.value)
+	},
+})
+
 
 if (typeof props.suggestions?.[0] === "object" && !props.suggestionLabel && !props.suggestionsFilter) {
 	throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.")
@@ -105,23 +122,14 @@ const defaultSuggestionsFilter = (input: string, items: T[]): T[] => input === "
 		? [...items]
 		: items.filter(item => suggestionLabel.value(item).toLowerCase().includes(input.toLowerCase()))
 
-const activeSuggestionRef = ref<number>(-1)
-const activeSuggestion = computed({
-	get: () => activeSuggestionRef.value,
-	set: (val: number) => {
-		activeSuggestionRef.value = val
-		emits("update:activeSuggestion", activeSuggestionRef.value)
-	},
-})
-
 
 const suggestionsFilter = computed(() =>
 	props.suggestionsFilter ?? defaultSuggestionsFilter)
 
 
 const suggestionsList = computed(() => {
 	if (props.suggestions) {
-		const res = suggestionsFilter.value(inputValue.value, props.suggestions)
+		const res = suggestionsFilter.value($inputValue.value, props.suggestions)
 		return res
 	}
 	return undefined
@@ -135,7 +143,7 @@ const moreThanOneSuggestionAvailable = computed<boolean>(() =>
 
 const exactlyMatchingSuggestion = computed(() =>
 	props.suggestions?.find(suggestion =>
-		inputValue.value === suggestionLabel.value(suggestion)))
+		$inputValue.value === suggestionLabel.value(suggestion)))
 
 const isValidSuggestion = computed(() =>
 	!props.restrictToSuggestions || suggestionAvailable.value)
@@ -156,81 +164,101 @@ const fullSuggestionsList = computed(() => {
 	return undefined
 })
 
+const openable = computed(() =>
+	props.canOpen && (
+		(isBlank($inputValue.value) && props.allowOpenEmpty) ||
+		moreThanOneSuggestionAvailable.value ||
+		(
+			!exactlyMatchingSuggestion.value &&
+			suggestionAvailable.value
+		) ||
+		(
+			!isValidSuggestion.value &&
+			suggestionAvailable.value
+		)
+	),
+)
+
 
 const closeSuggestions = (): void => {
-	isOpen.value = false
+	$isOpen.value = false
 	mousedown.value = false
-	emits("update:isOpen", isOpen.value)
 	activeSuggestion.value = -1
 }
 const openSuggestions = (): void => {
-	if (!props.canOpen) return
-	isOpen.value = true
-	emits("update:isOpen", isOpen.value)
+	if (!openable.value) return
+	$isOpen.value = true
 	// see delay close
 	if (activeSuggestion.value === -1) activeSuggestion.value = 0
 	// activeSuggestion.value = 0
 }
+watch(() => props.canOpen, val => {
+	if (!val) {
+		closeSuggestions()
+	} else {
+		openSuggestions()
+	}
+})
 watch(isValidSuggestion, () => {
-	emits("update:isValid", isValidSuggestion.value)
+	$isValid.value = isValidSuggestion.value
 	if (!isValidSuggestion.value) {
 		openSuggestions()
 	}
 })
-watch(() => modelValue.value, () => {
-	inputValue.value = getStringValue(modelValue.value)
+watch(() => $modelValue.value, () => {
+	$inputValue.value = getStringValue($modelValue.value)
 })
-watch(() => inputValue.value, () => {
+watch(() => $inputValue.value, () => {
 	if (props.restrictToSuggestions) {
 		if (exactlyMatchingSuggestion.value !== undefined) {
-			modelValue.value = inputValue.value
+			$modelValue.value = $inputValue.value
 		}
 	} else {
-		modelValue.value = inputValue.value
+		$modelValue.value = $inputValue.value
+	}
+})
+watchPostEffect((): void => {
+	if (!openable.value) {
+		closeSuggestions()
+		return
+	}
+	if (suggestionAvailable.value) {
+		if (!exactlyMatchingSuggestion.value || moreThanOneSuggestionAvailable.value) {
+			openSuggestions()
+		}
+	} else if (isValidSuggestion.value) {
+		closeSuggestions()
 	}
 })
-
-
-const openable = computed(() =>
-	(isBlank(inputValue.value) && props.allowOpenEmpty) ||
-		moreThanOneSuggestionAvailable.value ||
-		(
-			!exactlyMatchingSuggestion.value &&
-			suggestionAvailable.value
-		) ||
-		(
-			!isValidSuggestion.value &&
-			suggestionAvailable.value
-		),
-)
 
 
 const setSuggestion = (num: number): void => {
 	if (fullSuggestionsList.value === undefined) return
 	const val = suggestionLabel.value(fullSuggestionsList.value[num])
 
-	modelValue.value = val
-	inputValue.value = val
+	$modelValue.value = val
+	$inputValue.value = val
 	closeSuggestions()
 }
-const setSelected = (): void => {
+
+// #region Exposed Functions
+const setSelected = (submit: boolean = props.values !== undefined): void => {
 	if (activeSuggestion.value > -1) {
 		// set to active suggestion
 		setSuggestion(activeSuggestion.value)
 	}
-	if (props.values) {
-		emits("submit", getStringValue(modelValue.value))
+	if (submit) {
+		emits("submit", getStringValue($modelValue.value))
 	}
 }
 
 
-// #region Exposed Functions
 const inputBlurHandler = (_e: MouseEvent): void => {
-	if (!isOpen.value) return
+	if (!$isOpen.value) return
 	// clicked on self, ignore
 	if (mousedown.value) {
 		mousedown.value = false
-		setSelected()
+		setSelected(true)
 		return
 	}
 
@@ -245,19 +273,19 @@ const inputBlurHandler = (_e: MouseEvent): void => {
 			if (activeSuggestion.value > -1) {
 				setSuggestion(activeSuggestion.value)
 			} else {
-				inputValue.value = getStringValue(modelValue.value)
+				$inputValue.value = getStringValue($modelValue.value)
 			}
 		}
 	} else {
-		modelValue.value = inputValue.value
+		$modelValue.value = $inputValue.value
 	}
-	if (isOpen.value) {
+	if ($isOpen.value) {
 		closeSuggestions()
 	}
 }
 
 const toggleSuggestions = (): void => {
-	isOpen.value ? closeSuggestions() : openSuggestions()
+	$isOpen.value ? closeSuggestions() : openSuggestions()
 }
 
 
@@ -279,32 +307,19 @@ const nextSuggestion = (): void => {
 }
 
 const cancel = (): void => {
-	inputValue.value = getStringValue(modelValue.value)
+	$inputValue.value = getStringValue($modelValue.value)
 	closeSuggestions()
 }
 
-watchPostEffect((): void => {
-	if (!openable.value) {
-		closeSuggestions()
-		return
-	}
-	if (suggestionAvailable.value) {
-		if (!exactlyMatchingSuggestion.value || moreThanOneSuggestionAvailable.value) {
-			openSuggestions()
-		}
-	} else if (isValidSuggestion.value) {
-		closeSuggestions()
-	}
-})
 
 const inputKeydownHandler = (e: KeyboardEvent): void => {
 	if (e.key === "Enter") {
-		setSelected()
+		setSelected(true)
 		e.preventDefault()
 	} else if (e.key === "Escape") {
 		cancel()
 		e.preventDefault()
-	} else if (!isOpen.value && ["ArrowDown", "ArrowUp"].includes(e.key) && suggestionAvailable.value) {
+	} else if (!$isOpen.value && ["ArrowDown", "ArrowUp"].includes(e.key) && suggestionAvailable.value) {
 		openSuggestions()
 		e.preventDefault()
 	} else if (e.key === "ArrowUp") {