@sfxcode/formkit-primevue 2.3.4 → 2.3.6

package/dist/components/FormKitDataEdit.vue

@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({

package/dist/components/FormKitDataView.vue

@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({

package/dist/components/PrimeAutoComplete.vue

@@ -12,7 +12,6 @@ export interface FormKitPrimeAutoCompleteProps {
   dropdown?: AutoCompleteProps['dropdown']
   multiple?: AutoCompleteProps['multiple']
   typeahead?: AutoCompleteProps['typeahead']
-  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -22,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const suggestions = ref([])
 
@@ -32,7 +31,7 @@ function search(event: AutoCompleteCompleteEvent) {
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <AutoComplete
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeCascadeSelect.vue

@@ -15,7 +15,7 @@ export interface FormKitPrimeCascadeSelectProps {
   pt?: CascadeSelectProps['pt']
   ptOptions?: CascadeSelectProps['ptOptions']
   unstyled?: CascadeSelectProps['unstyled']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -25,11 +25,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <CascadeSelect
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeCheckbox.vue

@@ -16,7 +16,7 @@ export interface FormKitPrimeCheckboxProps {
   variant?: CheckboxProps['variant']
   labelLeft?: string
   labelRight?: string
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -26,11 +26,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
     <Checkbox
       v-model="context._value"

package/dist/components/PrimeColorPicker.vue

@@ -12,7 +12,7 @@ export interface FormKitPrimeColorPickerProps {
   pt?: ColorPickerProps['pt']
   ptOptions?: ColorPickerProps['ptOptions']
   unstyled?: ColorPickerProps['unstyled']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -22,11 +22,11 @@ const props = defineProps({
   },
 })
 
-const { wrapperClass, handleChange } = useFormKitInput(props.context)
+const { handleChange } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <ColorPicker
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeDatePicker.vue

@@ -49,7 +49,7 @@ export interface FormKitPrimeDatePickerProps {
   pt?: DatePickerProps['pt']
   ptOptions?: DatePickerProps['ptOptions']
   unstyled?: DatePickerProps['unstyled']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -59,7 +59,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleSelect } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleSelect } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -71,7 +71,7 @@ function handleClearClick() {
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <DatePicker
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeEditor.vue

@@ -12,7 +12,7 @@ export interface FormKitPrimeEditorProps {
   pt?: EditorProps['pt']
   ptOptions?: EditorProps['ptOptions']
   unstyled?: EditorProps['unstyled']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput } = useFormKitInput(props.context)
+const { styleClass, handleInput } = useFormKitInput(props.context)
 
 function handleSelection(e: EditorSelectionChangeEvent) {
   if (e.range === null)
@@ -31,7 +31,7 @@ function handleSelection(e: EditorSelectionChangeEvent) {
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <Editor
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeInputMask.vue

@@ -17,7 +17,7 @@ export interface FormKitPrimeInputMaskProps {
   variant?: InputMaskProps['variant']
   iconLeft?: string
   iconRight?: string
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -27,7 +27,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass } = useFormKitInput(props.context)
+const { styleClass } = useFormKitInput(props.context)
 
 function handleInput(e: FocusEvent) {
   props.context?.node.input(props.context?._value)
@@ -53,11 +53,9 @@ function spanClass() {
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <span :class="spanClass()">
-      <i v-if="hasLeftIcon()" :class="context.iconLeft" />
-
-      <InputMask
+      <i v-if="hasLeftIcon()" :class="context.iconLeft" />  <InputMask
         :id="context.id"
         v-model="context._value"
         v-bind="context?.attrs"
@@ -77,9 +75,7 @@ function spanClass() {
         :pt-options="context.ptOptions"
         :unstyled="context.unstyled ?? false"
         @blur="handleInput"
-      />
-
-      <i v-if="hasRightIcon" :class="context.iconRight" />
+      />  <i v-if="hasRightIcon" :class="context.iconRight" />
     </span>
   </div>
 </template>

package/dist/components/PrimeInputNumber.vue

@@ -23,7 +23,7 @@ export interface FormKitPrimeInputNumberProps {
   ptOptions?: InputNumberProps['ptOptions']
   unstyled?: InputNumberProps['unstyled']
   placeholder?: InputNumberProps['placeholder']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -33,7 +33,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput } = useFormKitInput(props.context)
+const { styleClass, handleInput } = useFormKitInput(props.context)
 
 function handleBlur(e: InputNumberBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -41,7 +41,7 @@ function handleBlur(e: InputNumberBlurEvent) {
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <InputNumber
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeInputOtp.vue

@@ -13,7 +13,7 @@ export interface FormKitPrimeInputOtpProps {
   variant?: InputOtpProps['variant']
   mask?: InputOtpProps['mask']
   integerOnly?: InputOtpProps['integerOnly']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -23,11 +23,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleBlur, handleInput } = useFormKitInput(props.context)
+const { styleClass, handleBlur, handleInput } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <InputOtp
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeInputText.vue

@@ -5,7 +5,7 @@ import type { FormKitFrameworkContext } from '@formkit/core'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import type { InputTextProps } from 'primevue/inputtext'
-import { useFormKitIcon, useFormKitInput } from '../composables'
+import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeInputTextProps {
   pt?: InputTextProps['pt']
@@ -13,7 +13,7 @@ export interface FormKitPrimeInputTextProps {
   unstyled?: InputTextProps['unstyled']
   placeholder?: InputTextProps['placeholder']
   icon?: string
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -23,14 +23,14 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <IconField>
-      <InputIcon v-if="hasIcon && iconPosition === 'left'" :class="icon" />
+      <InputIcon v-if="hasPrefixIcon" :class="context?.prefixIcon" />
       <InputText
         :id="context.id"
         v-model="context._value"
@@ -49,7 +49,7 @@ const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
         @input="handleInput"
         @blur="handleBlur"
       />
-      <InputIcon v-if="hasIcon && iconPosition === 'right'" :class="icon" />
+      <InputIcon v-if="hasSuffixIcon" :class="context?.suffixIcon" />
     </IconField>
   </div>
 </template>

package/dist/components/PrimeKnob.vue

@@ -19,7 +19,7 @@ export interface FormKitPrimeKnobProps {
   rangeColor?: KnobProps['rangeColor']
   textColor?: KnobProps['textColor']
   valueTemplate?: KnobProps['valueTemplate']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -29,7 +29,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass } = useFormKitInput(props.context)
+const { styleClass } = useFormKitInput(props.context)
 
 function handleInput(e: any) {
   props.context?.node.input(e)
@@ -42,7 +42,7 @@ function updateValue(n: number) {
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <Knob
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeListbox.vue

@@ -20,7 +20,7 @@ export interface FormKitPrimeListboxProps {
   filterMatchMode?: ListboxProps['filterMatchMode']
   autoOptionFocus?: ListboxProps['autoOptionFocus']
   selectOnFocus?: ListboxProps['selectOnFocus']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -30,11 +30,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <Listbox
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeMultiSelect.vue

@@ -41,7 +41,7 @@ export interface FormKitPrimeMultiSelectProps {
   placeholder?: MultiSelectProps['placeholder']
   ptOptions?: MultiSelectProps['ptOptions']
   unstyled?: MultiSelectProps['unstyled']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -51,11 +51,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleBlur, handleChange } = useFormKitInput(props.context)
+const { styleClass, handleBlur, handleChange } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <MultiSelect
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeOutputBoolean.vue

@@ -1,12 +1,12 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
-import { useFormKitIcon, useFormKitOutput } from '../composables'
+import { computed } from 'vue'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { wrapperClass } = useFormKitOutput(props.context, 'p-output-boolean')
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { t } = useI18n()
 
@@ -19,11 +19,17 @@ const translated = computed(() => {
 </script>
 
 <template>
-  <div :class="wrapperClass">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+  <div class="p-formkit p-output-boolean">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.attrs?.prefix }}
+    </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ translated }}
     </span>
-    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.attrs?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>
 </template>

package/dist/components/PrimeOutputDate.vue

@@ -1,13 +1,12 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
-import { useFormKitIcon, useFormKitOutput } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { wrapperClass } = useFormKitOutput(props.context, 'p-output-date')
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { d } = useI18n()
 
@@ -30,11 +29,17 @@ const converted = computed(() => {
 </script>
 
 <template>
-  <div :class="wrapperClass">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+  <div class="p-formkit p-output-date">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.attrs?.prefix }}
+    </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ converted }}
     </span>
-    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.attrs?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>
 </template>

package/dist/components/PrimeOutputDuration.vue

@@ -1,22 +1,27 @@
 <script setup lang='ts'>
-import { useFormKitIcon, useFormKitOutput, useOutputDuration } from '../composables'
+import { useFormKitSection, useOutputDuration } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
 
-const { wrapperClass } = useFormKitOutput(props.context, 'p-output-duration')
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { formattedDuration } = useOutputDuration()
 </script>
 
 <template>
-  <div :class="wrapperClass">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+  <div class="p-formkit p-output-duration">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.attrs?.prefix }}
+    </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ formattedDuration(context?._value) }}
     </span>
-    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.attrs?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>
 </template>

package/dist/components/PrimeOutputLink.vue

@@ -1,19 +1,21 @@
 <script setup lang='ts'>
 import { computed } from 'vue'
-import { useFormKitIcon, useFormKitOutput } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { wrapperClass } = useFormKitOutput(props.context, 'p-output-link')
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.context?._value : `https://${props.context?._value}`)
 </script>
 
 <template>
-  <div :class="wrapperClass">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+  <div class="p-formkit p-output-link">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.attrs?.prefix }}
+    </span>
     <a
       :id="context?.id"
       :style="context?.attrs?.style"
@@ -23,6 +25,9 @@ const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.co
     >
       {{ context?._value }}
     </a>
-    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.attrs?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>
 </template>

package/dist/components/PrimeOutputList.vue

@@ -1,11 +1,10 @@
 <script setup lang='ts'>
-import { useFormKitIcon, useFormKitOutput } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { wrapperClass } = useFormKitOutput(props.context, 'p-output-list')
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 function listValue(index: number, value: string): string {
   const divider = props.context?.attrs?.divider || ', '
@@ -17,13 +16,19 @@ function listValue(index: number, value: string): string {
 </script>
 
 <template>
-  <div :class="wrapperClass">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+  <div class="p-formkit p-output-list">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.attrs?.prefix }}
+    </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       <template v-for="(value, index) of context?._value" :key="index">
         <span class="p-output-list-item">{{ listValue(index, value) }}</span>
       </template>
     </span>
-    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.attrs?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>
 </template>

package/dist/components/PrimeOutputNumber.vue

@@ -1,13 +1,13 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
 
-import { useFormKitIcon, useFormKitOutput } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { wrapperClass } = useFormKitOutput(props.context, 'p-output-number')
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { n } = useI18n()
 
@@ -30,11 +30,17 @@ const converted = computed(() => {
 </script>
 
 <template>
-  <div :class="wrapperClass">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+  <div class="p-formkit p-output-number">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.attrs?.prefix }}
+    </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ converted }}
     </span>
-    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.attrs?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>
 </template>

package/dist/components/PrimeOutputText.vue

@@ -1,16 +1,18 @@
 <script setup lang='ts'>
-import { useFormKitIcon, useFormKitOutput } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { wrapperClass } = useFormKitOutput(props.context, 'p-output-text')
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+  <div class="p-formkit p-output-text">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.attrs?.prefix }}
+    </span>
     <span
       :id="context?.id"
       :style="context?.attrs?.style"
@@ -18,6 +20,9 @@ const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
     >
       {{ context?._value }}
     </span>
-    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.attrs?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>
 </template>