Slots support for PrimeVue Components #58
Description
Hi @sfxcode,
Since FormKit stores all slot render functions in context.slots, we can support PrimeVue slots by dynamically rendering them using <component is="slotRenderFunction"/> .
Below is an example of how to pass all slots to PrimeVue Autocomplete:
<script setup lang="ts">
// ....
const props = defineProps({
context: {
type: Object as PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>,
required: true,
},
})
// FormKit slots added by createInput() and should be passed to FormKit not to the wrapped component.
const formKitCreateInputSlots = new Set(['label', 'help', 'messages', 'message', 'input'])
const wrappedComponentSlotsNames = computed(() =>
Object.keys(props?.context?.slots).filter(slotName => !formKitCreateInputSlots.has(slotName))
)
</script>
<template>
<div class="p-formkit">
<AutoComplete
:id="context.id"
v-model="context._value"
v-bind="context?.attrs"
:disabled="!!context?.disabled"
:class="context?.attrs?.class"
:invalid="isInvalid"
:tabindex="context?.attrs.tabindex"
:aria-label="context?.attrs.ariaLabel"
:aria-labelledby="context?.attrs.ariaLabelledby"
:suggestions="suggestions"
:dropdown="context?.dropdown ?? false"
:multiple="context?.multiple ?? false"
:typeahead="context?.typeahead ?? true"
:pt="context?.pt"
:pt-options="context?.ptOptions"
:unstyled="unstyled"
@keydown.enter.prevent
@complete="search"
@change="handleInput"
@blur="handleBlur"
>
<template v-for="slotName in wrappedComponentSlotsNames" :key="slotName" #[slotName]="slotProps">
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
<!-- Or like this if you want to avoid potential slot props overriding -->
<component :is="context?.slots[slotName]" v-bind="{ ...context, prime: slotProps }" />
</template>
</AutoComplete>
</div>
</template>