@sfxcode/formkit-primevue 3.3.1 → 3.3.3

package/dist/components/PrimeOutputText.vue

@@ -0,0 +1,72 @@
+<script setup lang='ts'>
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { PropType } from 'vue'
+import type { FormKitIconProps } from './FormKitIcon.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useFormKitSection } from '../composables'
+import FormKitIcon from './FormKitIcon.vue'
+import FormKitPrefix from './FormKitPrefix.vue'
+import FormKitSuffix from './FormKitSuffix.vue'
+
+export interface FormKitOutputTextProps {
+  html?: boolean
+  isTranslationKey?: boolean
+  convertValue?: (value: string) => string
+  maxLength?: number
+}
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps & FormKitOutputTextProps,
+    required: true,
+  },
+})
+
+const textValue = computed(() => {
+  const value = props.context?._value
+  const { t } = useI18n()
+  let result = ''
+  if (value) {
+    if (props.context?.isTranslationKey) {
+      result = t(value)
+    }
+    else if (typeof props.context?.convertValue === 'function') {
+      result = props.context?.convertValue(value)
+    }
+    else {
+      result = value
+    }
+  }
+
+  // Apply maxLength truncation if specified
+  const maxLength = props.context?.maxLength as number | undefined
+  if (result && maxLength && !props.context?.html && result.length > maxLength) {
+    // Try to truncate at word boundary
+    let truncated = result.substring(0, maxLength)
+    const lastSpaceIndex = truncated.lastIndexOf(' ')
+
+    // Only truncate at word boundary if there's a space, and it's not too far back
+    // (at least 80% of maxLength to avoid cutting too much)
+    if (lastSpaceIndex > maxLength * 0.8) {
+      truncated = truncated.substring(0, lastSpaceIndex)
+    }
+    result = `${truncated}...`
+  }
+
+  return result
+})
+
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
+</script>
+
+<template>
+  <div class="p-formkit p-output-text">
+    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
+    <span v-if="context?.html" :id="context?.id" :class="context?.attrs?.class" :style="context?.attrs?.style" v-html="textValue" />
+    <span v-else :id="context?.id" :class="context?.attrs?.class" :style="context?.attrs?.style" v-text="textValue" />
+    <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
+    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
+  </div>
+</template>

package/dist/components/PrimeOutputText.vue.d.ts

@@ -0,0 +1,22 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { FormKitIconProps } from './FormKitIcon.vue';
+export interface FormKitOutputTextProps {
+    html?: boolean;
+    isTranslationKey?: boolean;
+    convertValue?: (value: string) => string;
+    maxLength?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext> & FormKitIconProps & FormKitOutputTextProps;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext> & FormKitIconProps & FormKitOutputTextProps;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PrimePassword.d.vue.ts

@@ -0,0 +1,33 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PasswordProps } from 'primevue/password';
+import type { PropType } from 'vue';
+export interface FormKitPrimePasswordProps {
+    mediumRegex?: PasswordProps['mediumRegex'];
+    strongRegex?: PasswordProps['strongRegex'];
+    promptLabel?: PasswordProps['promptLabel'];
+    weakLabel?: PasswordProps['weakLabel'];
+    mediumLabel?: PasswordProps['mediumLabel'];
+    strongLabel?: PasswordProps['strongLabel'];
+    maskIcon?: PasswordProps['maskIcon'];
+    unmaskIcon?: PasswordProps['unmaskIcon'];
+    pt?: PasswordProps['pt'];
+    ptOptions?: PasswordProps['ptOptions'];
+    unstyled?: PasswordProps['unstyled'];
+    placeholder?: PasswordProps['placeholder'];
+    feedback?: PasswordProps['feedback'];
+    toggleMask?: PasswordProps['toggleMask'];
+    size?: PasswordProps['size'];
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimePasswordProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimePasswordProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PrimePassword.vue

@@ -0,0 +1,73 @@
+<script setup lang='ts'>
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { PasswordProps } from 'primevue/password'
+
+import type { PropType } from 'vue'
+import { useFormKitInput } from '../composables'
+
+export interface FormKitPrimePasswordProps {
+  mediumRegex?: PasswordProps['mediumRegex']
+  strongRegex?: PasswordProps['strongRegex']
+  promptLabel?: PasswordProps['promptLabel']
+  weakLabel?: PasswordProps['weakLabel']
+  mediumLabel?: PasswordProps['mediumLabel']
+  strongLabel?: PasswordProps['strongLabel']
+  maskIcon?: PasswordProps['maskIcon']
+  unmaskIcon?: PasswordProps['unmaskIcon']
+  pt?: PasswordProps['pt']
+  ptOptions?: PasswordProps['ptOptions']
+  unstyled?: PasswordProps['unstyled']
+  placeholder?: PasswordProps['placeholder']
+  feedback?: PasswordProps['feedback']
+  toggleMask?: PasswordProps['toggleMask']
+  size?: PasswordProps['size']
+}
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimePasswordProps>,
+    required: true,
+  },
+})
+
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Password
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :input-style="context?.attrs.style"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :placeholder="context.placeholder"
+      :medium-regex="context.mediumRegex ?? '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'"
+      :strong-regex="context.strongRegex ?? '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})'"
+      :prompt-label="context.promptLabel"
+      :weak-label="context.weakLabel"
+      :medium-label="context.mediumLabel"
+      :strong-label="context.strongLabel"
+      :mask-icon="context.maskIcon"
+      :unmask-icon="context.unmaskIcon"
+      :feedback="context.feedback ?? false"
+      :toggle-mask="context.toggleMask ?? false"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @input="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Password>
+  </div>
+</template>

package/dist/components/PrimePassword.vue.d.ts

@@ -0,0 +1,33 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PasswordProps } from 'primevue/password';
+import type { PropType } from 'vue';
+export interface FormKitPrimePasswordProps {
+    mediumRegex?: PasswordProps['mediumRegex'];
+    strongRegex?: PasswordProps['strongRegex'];
+    promptLabel?: PasswordProps['promptLabel'];
+    weakLabel?: PasswordProps['weakLabel'];
+    mediumLabel?: PasswordProps['mediumLabel'];
+    strongLabel?: PasswordProps['strongLabel'];
+    maskIcon?: PasswordProps['maskIcon'];
+    unmaskIcon?: PasswordProps['unmaskIcon'];
+    pt?: PasswordProps['pt'];
+    ptOptions?: PasswordProps['ptOptions'];
+    unstyled?: PasswordProps['unstyled'];
+    placeholder?: PasswordProps['placeholder'];
+    feedback?: PasswordProps['feedback'];
+    toggleMask?: PasswordProps['toggleMask'];
+    size?: PasswordProps['size'];
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimePasswordProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimePasswordProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PrimeRadioButton.d.vue.ts

@@ -0,0 +1,28 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { RadioButtonProps } from 'primevue/radiobutton';
+import type { PropType } from 'vue';
+export interface FormKitPrimeRadioButtonProps {
+    pt?: RadioButtonProps['pt'];
+    ptOptions?: RadioButtonProps['ptOptions'];
+    unstyled?: RadioButtonProps['unstyled'];
+    size?: RadioButtonProps['size'];
+    options?: {
+        label: string;
+        value: any;
+    }[];
+    optionsClass?: string;
+    optionClass?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeRadioButtonProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeRadioButtonProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PrimeRadioButton.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { RadioButtonProps } from 'primevue/radiobutton'
+
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+import { useFormKitInput } from '../composables'
+
+export interface FormKitPrimeRadioButtonProps {
+  pt?: RadioButtonProps['pt']
+  ptOptions?: RadioButtonProps['ptOptions']
+  unstyled?: RadioButtonProps['unstyled']
+  size?: RadioButtonProps['size']
+  options?: { label: string, value: any }[]
+  optionsClass?: string
+  optionClass?: string
+}
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeRadioButtonProps>,
+    required: true,
+  },
+})
+
+const { unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(props.context)
+
+const optionsClass = computed(() => props.context?.optionsClass ?? '')
+const optionClass = computed(() => props.context?.optionClass ?? '')
+const labelClass = computed(() => props.context?.labelClass ?? '')
+</script>
+
+<template>
+  <div class="p-formkit p-formkit-options" :class="optionsClass">
+    <div v-for="option in context.options" :key="option.value" class="p-formkit-option" :class="optionClass">
+      <RadioButton
+        :id="context.id"
+        v-model="modelValue"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :name="context?.attrs.name"
+        :value="option.value"
+        :input-style="context?.attrs.style"
+        :input-class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :size="context?.size ?? undefined"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @click="handleChange"
+        @change="handleChange"
+        @blur="handleBlur"
+      />
+      <label :for="option.value" :class="labelClass">{{ option.label }}</label>
+    </div>
+  </div>
+</template>

package/dist/components/PrimeRadioButton.vue.d.ts

@@ -0,0 +1,28 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { RadioButtonProps } from 'primevue/radiobutton';
+import type { PropType } from 'vue';
+export interface FormKitPrimeRadioButtonProps {
+    pt?: RadioButtonProps['pt'];
+    ptOptions?: RadioButtonProps['ptOptions'];
+    unstyled?: RadioButtonProps['unstyled'];
+    size?: RadioButtonProps['size'];
+    options?: {
+        label: string;
+        value: any;
+    }[];
+    optionsClass?: string;
+    optionClass?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeRadioButtonProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeRadioButtonProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PrimeRating.d.vue.ts

@@ -0,0 +1,24 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { RatingProps } from 'primevue/rating';
+import type { PropType } from 'vue';
+export interface FormKitPrimeRatingProps {
+    unstyled?: RatingProps['unstyled'];
+    stars?: RatingProps['stars'];
+    onIcon?: RatingProps['onIcon'];
+    offIcon?: RatingProps['offIcon'];
+    ptOptions?: RatingProps['ptOptions'];
+    pt?: RatingProps['pt'];
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeRatingProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeRatingProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PrimeRating.vue

@@ -0,0 +1,55 @@
+<script setup lang='ts'>
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { RatingProps } from 'primevue/rating'
+
+import type { PropType } from 'vue'
+import { useFormKitInput } from '../composables'
+
+export interface FormKitPrimeRatingProps {
+  unstyled?: RatingProps['unstyled']
+  stars?: RatingProps['stars']
+  onIcon?: RatingProps['onIcon']
+  offIcon?: RatingProps['offIcon']
+  ptOptions?: RatingProps['ptOptions']
+  pt?: RatingProps['pt']
+}
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeRatingProps>,
+    required: true,
+  },
+})
+
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Rating
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :stars="context.stars ?? 5"
+      :on-icon="context.onIcon"
+      :off-icon="context.offIcon"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Rating>
+  </div>
+</template>

package/dist/components/PrimeRating.vue.d.ts

@@ -0,0 +1,24 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { RatingProps } from 'primevue/rating';
+import type { PropType } from 'vue';
+export interface FormKitPrimeRatingProps {
+    unstyled?: RatingProps['unstyled'];
+    stars?: RatingProps['stars'];
+    onIcon?: RatingProps['onIcon'];
+    offIcon?: RatingProps['offIcon'];
+    ptOptions?: RatingProps['ptOptions'];
+    pt?: RatingProps['pt'];
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeRatingProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeRatingProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PrimeSelect.d.vue.ts

@@ -0,0 +1,50 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { SelectProps } from 'primevue/select';
+import type { PropType } from 'vue';
+export interface FormKitPrimeSelectProps {
+    options?: SelectProps['options'];
+    optionLabel?: SelectProps['optionLabel'];
+    optionValue?: SelectProps['optionValue'];
+    optionDisabled?: SelectProps['optionDisabled'];
+    optionGroupLabel?: SelectProps['optionGroupLabel'];
+    optionGroupChildren?: SelectProps['optionGroupChildren'];
+    scrollHeight?: SelectProps['scrollHeight'];
+    filter?: SelectProps['filter'];
+    filterPlaceholder?: SelectProps['filterPlaceholder'];
+    filterLocale?: SelectProps['filterLocale'];
+    filterMatchMode?: SelectProps['filterMatchMode'];
+    filterFields?: SelectProps['filterFields'];
+    editable?: SelectProps['editable'];
+    placeholder?: SelectProps['placeholder'];
+    dataKey?: SelectProps['dataKey'];
+    showClear?: SelectProps['showClear'];
+    overlayStyle?: SelectProps['overlayStyle'];
+    overlayClass?: SelectProps['overlayClass'];
+    appendTo?: SelectProps['appendTo'];
+    resetFilterOnHide?: SelectProps['resetFilterOnHide'];
+    virtualScrollerOptions?: SelectProps['virtualScrollerOptions'];
+    autoOptionFocus?: SelectProps['autoOptionFocus'];
+    selectOnFocus?: SelectProps['selectOnFocus'];
+    filterMessage?: SelectProps['filterMessage'];
+    selectionMessage?: SelectProps['selectionMessage'];
+    emptySelectionMessage?: SelectProps['emptySelectionMessage'];
+    emptyFilterMessage?: SelectProps['emptyFilterMessage'];
+    emptyMessage?: SelectProps['emptyMessage'];
+    pt?: SelectProps['pt'];
+    ptOptions?: SelectProps['ptOptions'];
+    unstyled?: SelectProps['unstyled'];
+    size?: SelectProps['size'];
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeSelectProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPrimeSelectProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PrimeSelect.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { SelectProps } from 'primevue/select'
+
+import type { PropType } from 'vue'
+import { useFormKitInput } from '../composables'
+
+export interface FormKitPrimeSelectProps {
+  options?: SelectProps['options']
+  optionLabel?: SelectProps['optionLabel']
+  optionValue?: SelectProps['optionValue']
+  optionDisabled?: SelectProps['optionDisabled']
+  optionGroupLabel?: SelectProps['optionGroupLabel']
+  optionGroupChildren?: SelectProps['optionGroupChildren']
+  scrollHeight?: SelectProps['scrollHeight']
+  filter?: SelectProps['filter']
+  filterPlaceholder?: SelectProps['filterPlaceholder']
+  filterLocale?: SelectProps['filterLocale']
+  filterMatchMode?: SelectProps['filterMatchMode']
+  filterFields?: SelectProps['filterFields']
+  editable?: SelectProps['editable']
+  placeholder?: SelectProps['placeholder']
+  dataKey?: SelectProps['dataKey']
+  showClear?: SelectProps['showClear']
+  overlayStyle?: SelectProps['overlayStyle']
+  overlayClass?: SelectProps['overlayClass']
+  appendTo?: SelectProps['appendTo']
+  resetFilterOnHide?: SelectProps['resetFilterOnHide']
+  virtualScrollerOptions?: SelectProps['virtualScrollerOptions']
+  autoOptionFocus?: SelectProps['autoOptionFocus']
+  selectOnFocus?: SelectProps['selectOnFocus']
+  filterMessage?: SelectProps['filterMessage']
+  selectionMessage?: SelectProps['selectionMessage']
+  emptySelectionMessage?: SelectProps['emptySelectionMessage']
+  emptyFilterMessage?: SelectProps['emptyFilterMessage']
+  emptyMessage?: SelectProps['emptyMessage']
+  pt?: SelectProps['pt']
+  ptOptions?: SelectProps['ptOptions']
+  unstyled?: SelectProps['unstyled']
+  size?: SelectProps['size']
+
+}
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeSelectProps>,
+    required: true,
+  },
+})
+
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Select
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :input-style="context?.attrs.style"
+      :input-class="context?.attrs?.class"
+      :input-props="context?.attrs.inputProps"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :options="context.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :scroll-height="context.scrollHeight"
+      :filter="context.filter ?? false"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :fitler-fields="context.filterFields"
+      :filter-input-props="context.filterInputProps"
+      :editable="context.editable"
+      :placeholder="context.placeholder"
+      :data-key="context.dataKey"
+      :show-clear="context.showClear ?? false"
+      :overlay-style="context.overlayStyle"
+      :overlay-class="context.overlayClass"
+      :panel-props="context.panelProps"
+      :append-to="context.appendTo"
+      :reset-filter-on-hide="context.resetFilterOnHide"
+      :virtual-scroller-options="context.virtualScrollerOptions"
+      :auto-option-focus="context.autoOptionFocus"
+      :select-on-focus="context.selectOnFocus"
+      :filter-message="context.filterMessage"
+      :selection-message="context.selectionMessage"
+      :empty-selection-message="context.emptySelectionMessage"
+      :empty-filter-message="context.emptyFilterMessage"
+      :empty-message="context.emptyMessage"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Select>
+  </div>
+</template>