feat(AutoComplete): Start implementation (experimental)

Author: sfxcode

src/formkit/PrimeAutoComplete.vue

@@ -0,0 +1,41 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = context?.attrs
+
+const suggestions = ref([])
+
+function search(event) {
+  suggestions.value = attrs.complete(event.query)
+}
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs?.class} p-invalid` : attrs?.class)
+</script>
+
+<template>
+  <div>
+    <AutoComplete
+      :id="context.id"
+      v-model="context._value"
+      :disabled="attrs._disabled ?? false"
+      :tabindex="attrs.tabindex"
+      :aria-label="attrs.ariaLabel"
+      :aria-labelledby="attrs.ariaLabelledby"
+      :suggestions="suggestions"
+      :dropdown="attrs?.dropdown ?? false"
+      :multiple="attrs.multiple ?? false"
+      :pt="attrs.pt"
+      :pt-options="attrs.ptOptions"
+      :unstyled="attrs.unstyled ?? false"
+      @complete="search"
+      @change="handleInput"
+    />
+  </div>
+</template>

src/formkit/index.ts

@@ -1,6 +1,7 @@
 import type { FormKitTypeDefinition } from '@formkit/core'
 import { createInput } from '@formkit/vue'
 
+import PrimeAutoComplete from './PrimeAutocomplete.vue'
 import PrimeCalendar from './PrimeCalendar.vue'
 import PrimeCheckbox from './PrimeCheckbox.vue'
 import PrimeChips from './PrimeChips.vue'
@@ -23,6 +24,9 @@ import PrimeToggleButton from './PrimeToggleButton.vue'
 import PrimeSelectButton from './PrimeSelectButton.vue'
 import PrimeTriStateCheckbox from './PrimeTriStateCheckbox.vue'
 
+export const primeAutoCompleteDefinition: FormKitTypeDefinition = createInput(PrimeAutoComplete, {
+  props: [],
+})
 export const primeInputTextDefinition: FormKitTypeDefinition = createInput(PrimeInputText, {
   props: ['iconRight', 'iconLeft'],
 })
@@ -106,6 +110,7 @@ export const primeTriStateCheckboxDefinition: FormKitTypeDefinition = createInpu
 })
 
 export const primeInputs = {
+  primeAutoComplete: primeAutoCompleteDefinition,
   primeInputText: primeInputTextDefinition,
   primeInputNumber: primeInputNumberDefinition,
   primeInputMask: primeInputMaskDefinition,

src/pages/demo/AutoComplete.vue

@@ -0,0 +1,37 @@
+<script setup lang='ts'>
+import PrimeInput from '@/components/demo/PrimeInput.vue'
+
+const primeAttributes = 'placeholder, separator, allowDuplicate, max, addOnBlur'
+
+const list = ['Hello', 'Hero', 'House', 'World']
+
+function search(query: string) {
+  return list.filter(i => i.toLowerCase().includes(query.toLowerCase()))
+}
+
+const schema
+  = [
+    {
+      $formkit: 'primeAutoComplete',
+      id: 'basic',
+      name: 'basic',
+      complete: search,
+      label: 'Basic AutoComplete',
+    },
+  ]
+
+const data = { }
+</script>
+
+<template>
+  <div>
+    <PrimeInput
+      header="AutoComplete" :schema="schema" :data="data"
+      :prime-attributes="primeAttributes"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>