From 2fcd37a1b8f0d83d5befe090460ba1124edbfde2 Mon Sep 17 00:00:00 2001
From: Henry Jobst <github@jobst-berlin.de>
Date: Tue, 3 Jun 2025 18:13:54 +0200
Subject: [PATCH 1/2] feat(primeAutoComplete): enable async complete functions
 with loading state, add additional properties (minLength, placeholder, fluid)

---
 src/components/PrimeAutoComplete.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/PrimeAutoComplete.vue b/src/components/PrimeAutoComplete.vue
index 91e27bd2..bec45ca9 100644
--- a/src/components/PrimeAutoComplete.vue
+++ b/src/components/PrimeAutoComplete.vue
@@ -16,6 +16,9 @@ export interface FormKitPrimeAutoCompleteProps {
   optionLabel?: AutoCompleteProps['optionLabel']
   options?: any[] | undefined
   size?: AutoCompleteProps['size']
+  minLength?: AutoCompleteProps['minLength']
+  placeholder?: AutoCompleteProps['placeholder']
+  fluid?: AutoCompleteProps['fluid']
 }
 
 const props = defineProps({
@@ -29,15 +32,27 @@ const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useForm
 
 const suggestions = ref(['', {}])
 suggestions.value = []
+const loading = ref(false)
 
-function search(event: AutoCompleteCompleteEvent) {
+async function search(event: AutoCompleteCompleteEvent) {
   if (props.context?.options && props.context?.optionLabel) {
     suggestions.value = props.context.options.filter((option) => {
       return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase())
     })
   }
   else {
-    suggestions.value = props.context?.attrs.complete(event.query)
+    loading.value = true
+    try {
+      suggestions.value = await props.context?.attrs.complete(event.query)
+    }
+    catch (error) {
+      console.error('Error fetching suggestions:', error)
+      suggestions.value = []
+    }
+    finally {
+      loading.value = false
+    }
+    suggestions.value = await props.context?.attrs.complete(event.query)
   }
 }
 </script>
@@ -60,9 +75,13 @@ function search(event: AutoCompleteCompleteEvent) {
       :dropdown="context?.dropdown ?? false"
       :multiple="context?.multiple ?? false"
       :typeahead="context?.typeahead ?? true"
+      :min-length="context?.minLength ?? undefined"
+      :placeholder="context?.placeholder ?? undefined"
+      :fluid="context?.fluid ?? undefined"
       :pt="context?.pt"
       :pt-options="context?.ptOptions"
       :unstyled="unstyled"
+      :loading="loading"
       @keydown.enter.prevent
       @complete="search"
       @change="handleInput"

From a8d8535cf6b1d4439f20c81890ba7d57df27a160 Mon Sep 17 00:00:00 2001
From: Henry Jobst <github@jobst-berlin.de>
Date: Tue, 3 Jun 2025 18:13:54 +0200
Subject: [PATCH 2/2] feat(primeAutoComplete): enable async complete functions
 with loading state, add additional properties (minLength, placeholder, fluid)

---
 src/components/PrimeAutoComplete.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/PrimeAutoComplete.vue b/src/components/PrimeAutoComplete.vue
index 91e27bd2..30d5d929 100644
--- a/src/components/PrimeAutoComplete.vue
+++ b/src/components/PrimeAutoComplete.vue
@@ -16,6 +16,9 @@ export interface FormKitPrimeAutoCompleteProps {
   optionLabel?: AutoCompleteProps['optionLabel']
   options?: any[] | undefined
   size?: AutoCompleteProps['size']
+  minLength?: AutoCompleteProps['minLength']
+  placeholder?: AutoCompleteProps['placeholder']
+  fluid?: AutoCompleteProps['fluid']
 }
 
 const props = defineProps({
@@ -29,15 +32,26 @@ const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useForm
 
 const suggestions = ref(['', {}])
 suggestions.value = []
+const loading = ref(false)
 
-function search(event: AutoCompleteCompleteEvent) {
+async function search(event: AutoCompleteCompleteEvent) {
   if (props.context?.options && props.context?.optionLabel) {
     suggestions.value = props.context.options.filter((option) => {
       return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase())
     })
   }
   else {
-    suggestions.value = props.context?.attrs.complete(event.query)
+    loading.value = true
+    try {
+      suggestions.value = await props.context?.attrs.complete(event.query)
+    }
+    catch (error) {
+      console.error('Error fetching suggestions:', error)
+      suggestions.value = []
+    }
+    finally {
+      loading.value = false
+    }
   }
 }
 </script>
@@ -60,9 +74,13 @@ function search(event: AutoCompleteCompleteEvent) {
       :dropdown="context?.dropdown ?? false"
       :multiple="context?.multiple ?? false"
       :typeahead="context?.typeahead ?? true"
+      :min-length="context?.minLength ?? undefined"
+      :placeholder="context?.placeholder ?? undefined"
+      :fluid="context?.fluid ?? undefined"
       :pt="context?.pt"
       :pt-options="context?.ptOptions"
       :unstyled="unstyled"
+      :loading="loading"
       @keydown.enter.prevent
       @complete="search"
       @change="handleInput"