Merge pull request #76 from HenryJobst/main

primeAutoComplete: Fix custom input props declaration and add demo for an async complete function

Author: sfxcode

dev/pages/inputs/AutoComplete.vue

@@ -1,12 +1,17 @@
 <script setup lang='ts'>
-const primeAttributes = 'placeholder, separator, allowDuplicate, max, addOnBlur'
+const primeAttributes = 'placeholder, multiple, typeahead, optionLabel, size, minLength, fluid'
 
 const list = ['Hello', 'Hero', 'House', 'World']
 
 function search(query: string) {
   return [...list.filter(i => i.toLowerCase().includes(query.toLowerCase())), query]
 }
 
+async function asyncSearch(query: string) {
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  return [...list.filter(i => i.toLowerCase().includes(query.toLowerCase())), query]
+}
+
 const userList = [
   { id: '1', name: 'Tom', value: '123' },
   { id: '2', name: 'Tim', value: '124' },
@@ -22,6 +27,17 @@ const schema
       dropdown: true,
       label: 'Basic AutoComplete - Use [h]ello',
     },
+    {
+      $formkit: 'primeAutoComplete',
+      id: 'async',
+      name: 'async',
+      complete: asyncSearch,
+      dropdown: true,
+      label: 'Async AutoComplete - Use [he]llo',
+      minLength: 2,
+      placeholder: 'Type at least 2 characters',
+      fluid: true,
+    },
     {
       $formkit: 'primeAutoComplete',
       id: 'basic',

src/components/PrimeSelect.vue

@@ -22,8 +22,8 @@ export interface FormKitPrimeSelectProps {
   placeholder?: SelectProps['placeholder']
   dataKey?: SelectProps['dataKey']
   showClear?: SelectProps['showClear']
-  panelStyle?: SelectProps['panelStyle']
-  panelClass?: SelectProps['panelClass']
+  overlayStyle?: SelectProps['overlayStyle']
+  overlayClass?: SelectProps['overlayClass']
   appendTo?: SelectProps['appendTo']
   resetFilterOnHide?: SelectProps['resetFilterOnHide']
   virtualScrollerOptions?: SelectProps['virtualScrollerOptions']
@@ -86,8 +86,8 @@ const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useForm
       :placeholder="context.placeholder"
       :data-key="context.dataKey"
       :show-clear="context.showClear ?? false"
-      :panel-style="context.panelStyle"
-      :panel-class="context.panelClass"
+      :overlay-style="context.overlayStyle"
+      :overlay-class="context.overlayClass"
       :panel-props="context.panelProps"
       :append-to="context.appendTo"
       :reset-filter-on-hide="context.resetFilterOnHide"

src/definitions/input.ts

@@ -26,7 +26,7 @@ import PrimeToggleSwitch from '../components/PrimeToggleSwitch.vue'
 import PrimeTreeSelect from '../components/PrimeTreeSelect.vue'
 
 export const primeAutoCompleteDefinition: FormKitTypeDefinition = createInput(PrimeAutoComplete, {
-  props: ['pt', 'ptOptions', 'unstyled', 'Select', 'multiple', 'typeahead', 'optionLabel', 'options', 'size'],
+  props: ['pt', 'ptOptions', 'unstyled', 'Select', 'multiple', 'typeahead', 'optionLabel', 'options', 'size', 'minLength', 'placeholder', 'fluid'],
 })
 export const primeInputTextDefinition: FormKitTypeDefinition = createInput(PrimeInputText, {
   props: ['pt', 'ptOptions', 'unstyled', 'placeholder', 'iconPrefix', 'iconSuffix', 'size', 'inputType'],