@sfxcode/formkit-primevue 3.3.3 → 3.3.5

package/dist/components/PrimeCheckbox.vue

@@ -1,34 +1,14 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { CheckboxProps } from 'primevue/checkbox'
-
-import type { PropType } from 'vue'
-import { useFormKitInput, useFormKitSection } from '../composables'
-
-export interface FormKitPrimeCheckboxProps {
-  binary?: CheckboxProps['binary']
-  trueValue?: CheckboxProps['trueValue']
-  falseValue?: CheckboxProps['falseValue']
-  pt?: CheckboxProps['pt']
-  ptOptions?: CheckboxProps['ptOptions']
-  unstyled?: CheckboxProps['unstyled']
-  indeterminate?: CheckboxProps['indeterminate']
-  variant?: CheckboxProps['variant']
-  size?: CheckboxProps['size']
-}
-
+<script setup>
+import { useFormKitInput, useFormKitSection } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeCheckboxProps>,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
-
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
-
-const generatedId = generateId()
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context);
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const generatedId = generateId();
 </script>
 
 <template>

package/dist/components/PrimeColorPicker.vue

@@ -1,27 +1,12 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { ColorPickerProps } from 'primevue/colorpicker'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeColorPickerProps {
-  defaultColor?: ColorPickerProps['defaultColor']
-  inline?: ColorPickerProps['inline']
-  format?: ColorPickerProps['format']
-  pt?: ColorPickerProps['pt']
-  ptOptions?: ColorPickerProps['ptOptions']
-  unstyled?: ColorPickerProps['unstyled']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeColorPickerProps>,
-    required: true,
-  },
-})
-
-const { unstyled, handleChange, modelValue } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, handleChange, modelValue } = useFormKitInput(props.context);
 </script>
 
 <template>

package/dist/components/PrimeDatePicker.vue

@@ -1,81 +1,25 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { DatePickerBlurEvent, DatePickerProps } from 'primevue/datepicker'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeDatePickerProps {
-  dateFormat?: DatePickerProps['dateFormat']
-  placeholder?: DatePickerProps['placeholder']
-  selectionMode?: DatePickerProps['selectionMode']
-  inline?: DatePickerProps['inline']
-  icon?: DatePickerProps['icon']
-  showOtherMonths?: DatePickerProps['showOtherMonths']
-  selectOtherMonths?: DatePickerProps['selectOtherMonths']
-  showIcon?: DatePickerProps['showIcon']
-  prevIcon?: DatePickerProps['prevIcon']
-  nextIcon?: DatePickerProps['nextIcon']
-  incrementIcon?: DatePickerProps['incrementIcon']
-  decrementIcon?: DatePickerProps['decrementIcon']
-  numberOfMonths?: DatePickerProps['numberOfMonths']
-  responsiveOptions?: DatePickerProps['responsiveOptions']
-  view?: DatePickerProps['view']
-  minDate?: DatePickerProps['minDate']
-  maxDate?: DatePickerProps['maxDate']
-  disabledDates?: DatePickerProps['disabledDates']
-  disabledDays?: DatePickerProps['disabledDays']
-  maxDateCount?: DatePickerProps['maxDateCount']
-  showOnFocus?: DatePickerProps['showOnFocus']
-  autoZIndex?: DatePickerProps['autoZIndex']
-  baseZIndex?: DatePickerProps['baseZIndex']
-  showButtonBar?: DatePickerProps['showButtonBar']
-  showTime?: DatePickerProps['showTime']
-  timeOnly?: DatePickerProps['timeOnly']
-  shortYearCutoff?: DatePickerProps['shortYearCutoff']
-  hourFormat?: DatePickerProps['hourFormat']
-  stepHour?: DatePickerProps['stepHour']
-  stepMinute?: DatePickerProps['stepMinute']
-  stepSecond?: DatePickerProps['stepSecond']
-  showSeconds?: DatePickerProps['showSeconds']
-  hideOnDateTimeSelect?: DatePickerProps['hideOnDateTimeSelect']
-  hideOnRangeSelection?: DatePickerProps['hideOnRangeSelection']
-  timeSeparator?: DatePickerProps['timeSeparator']
-  showWeek?: DatePickerProps['showWeek']
-  manualInput?: DatePickerProps['manualInput']
-  appendTo?: DatePickerProps['appendTo']
-  panelStyle?: DatePickerProps['panelStyle']
-  panelClass?: DatePickerProps['panelClass']
-  pt?: DatePickerProps['pt']
-  ptOptions?: DatePickerProps['ptOptions']
-  unstyled?: DatePickerProps['unstyled']
-  size?: DatePickerProps['size']
-  updateModelType?: DatePickerProps['updateModelType']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeDatePickerProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleInput, modelValue } = useFormKitInput(props.context)
-
-function handleBlur(e: DatePickerBlurEvent) {
-  props.context?.handlers.blur(e.originalEvent as FocusEvent)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, modelValue } = useFormKitInput(
+  props.context
+);
+function handleBlur(e) {
+  props.context?.handlers.blur(e.originalEvent);
 }
-
 function handleClearClick() {
-  props.context?.node.input(null)
+  props.context?.node.input(null);
 }
-
-function handleSelect(e: any) {
-  if (props.context?.selectionMode === 'range' || props.context?.selectionMode === 'multiple') {
-    props.context?.node.input(props.context._value)
-  }
-  else {
-    props.context?.node.input(e)
+function handleSelect(e) {
+  if (props.context?.selectionMode === "range" || props.context?.selectionMode === "multiple") {
+    props.context?.node.input(props.context._value);
+  } else {
+    props.context?.node.input(e);
   }
 }
 </script>

package/dist/components/PrimeInputMask.vue

@@ -1,34 +1,15 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { InputMaskProps } from 'primevue/inputmask'
-
-import type { PropType } from 'vue'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import { useFormKitInput, useFormKitSection } from '../composables'
-
-export interface FormKitPrimeInputMaskProps {
-  mask?: InputMaskProps['mask']
-  slotChar?: InputMaskProps['slotChar']
-  autoClear?: InputMaskProps['autoClear']
-  unmask?: InputMaskProps['unmask']
-  pt?: InputMaskProps['pt']
-  ptOptions?: InputMaskProps['ptOptions']
-  unstyled?: InputMaskProps['unstyled']
-  invalid?: InputMaskProps['invalid']
-  variant?: InputMaskProps['variant']
-  size?: InputMaskProps['size']
-}
-
+<script setup>
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import { useFormKitInput, useFormKitSection } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputMaskProps>,
-    required: true,
-  },
-})
-
-const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
-const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context);
 </script>
 
 <template>

package/dist/components/PrimeInputNumber.vue

@@ -1,70 +1,35 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { InputNumberBlurEvent, InputNumberProps } from 'primevue/inputnumber'
-
-import type { PropType } from 'vue'
-import { watch } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeInputNumberProps {
-  useGrouping?: InputNumberProps['useGrouping']
-  min?: InputNumberProps['min']
-  max?: InputNumberProps['max']
-  minFractionDigits?: InputNumberProps['minFractionDigits']
-  maxFractionDigits?: InputNumberProps['maxFractionDigits']
-  locale?: InputNumberProps['locale']
-  mode?: InputNumberProps['mode']
-  currency?: InputNumberProps['currency']
-  prefix?: InputNumberProps['prefix']
-  suffix?: InputNumberProps['suffix']
-  showButtons?: InputNumberProps['showButtons']
-  buttonLayout?: InputNumberProps['buttonLayout']
-  step?: InputNumberProps['step']
-  pt?: InputNumberProps['pt']
-  ptOptions?: InputNumberProps['ptOptions']
-  unstyled?: InputNumberProps['unstyled']
-  placeholder?: InputNumberProps['placeholder']
-  size?: InputNumberProps['size']
-}
-
+<script setup>
+import { watch } from "vue";
+import { useFormKitInput } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputNumberProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, modelValue } = useFormKitInput(props.context)
-
-function handleBlur(e: InputNumberBlurEvent) {
-  props.context?.handlers.blur(e.originalEvent as FocusEvent)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, modelValue } = useFormKitInput(props.context);
+function handleBlur(e) {
+  props.context?.handlers.blur(e.originalEvent);
 }
-
-function handleInput(_: any) {
-  if (typeof _.value === 'number' || _.value === null)
-    props.context?.node.input(_.value)
+function handleInput(_) {
+  if (typeof _.value === "number" || _.value === null) props.context?.node.input(_.value);
 }
-
-function roundToDecimals(value: any, decimals: number) {
-  const factor = 10 ** decimals
-  return Math.round(value * factor) / factor
+function roundToDecimals(value, decimals) {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
 }
-
 watch(
   () => props.context._value,
   (newValue) => {
-    // Only update if the value is different
-    if (newValue !== props.context.node.value && typeof newValue === 'number') {
+    if (newValue !== props.context.node.value && typeof newValue === "number") {
       if (props.context.maxFractionDigits && props.context.maxFractionDigits > 0) {
-        // fix floating-point precision issues
-        props.context?.node.input(roundToDecimals(newValue, props.context.maxFractionDigits))
-      }
-      else {
-        props.context?.node.input(newValue)
+        props.context?.node.input(roundToDecimals(newValue, props.context.maxFractionDigits));
+      } else {
+        props.context?.node.input(newValue);
       }
     }
-  },
-)
+  }
+);
 </script>
 
 <template>

package/dist/components/PrimeInputOtp.vue

@@ -1,29 +1,12 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { InputOtpProps } from 'primevue/inputotp'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeInputOtpProps {
-  unstyled?: InputOtpProps['unstyled']
-  ptOptions?: InputOtpProps['ptOptions']
-  pt?: InputOtpProps['pt']
-  length?: InputOtpProps['length']
-  variant?: InputOtpProps['variant']
-  mask?: InputOtpProps['mask']
-  integerOnly?: InputOtpProps['integerOnly']
-  size?: InputOtpProps['size']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputOtpProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput, modelValue } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput, modelValue } = useFormKitInput(props.context);
 </script>
 
 <template>

package/dist/components/PrimeInputText.vue

@@ -1,30 +1,15 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { InputTextProps } from 'primevue/inputtext'
-
-import type { PropType } from 'vue'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import { useFormKitInput, useFormKitSection } from '../composables'
-
-export interface FormKitPrimeInputTextProps {
-  pt?: InputTextProps['pt']
-  ptOptions?: InputTextProps['ptOptions']
-  unstyled?: InputTextProps['unstyled']
-  size?: InputTextProps['size']
-  inputType?: string | undefined
-  placeholder?: string
-}
-
+<script setup>
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import { useFormKitInput, useFormKitSection } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputTextProps>,
-    required: true,
-  },
-})
-
-const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
-const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context);
 </script>
 
 <template>

package/dist/components/PrimeKnob.vue

@@ -1,43 +1,18 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { KnobProps } from 'primevue/knob'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeKnobProps {
-  pt?: KnobProps['pt']
-  ptOptions?: KnobProps['ptOptions']
-  unstyled?: KnobProps['unstyled']
-  min?: KnobProps['min']
-  max?: KnobProps['max']
-  step?: KnobProps['step']
-  size?: KnobProps['size']
-  strokeWidth?: KnobProps['strokeWidth']
-  showValue?: KnobProps['showValue']
-  valueColor?: KnobProps['valueColor']
-  rangeColor?: KnobProps['rangeColor']
-  textColor?: KnobProps['textColor']
-  valueTemplate?: KnobProps['valueTemplate']
-
-}
-
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeKnobProps>,
-    required: true,
-  },
-})
-
-const { unstyled, isInvalid, modelValue } = useFormKitInput(props.context)
-
-function handleInput(e: any) {
-  props.context?.node.input(e)
-  props.context?.handlers.blur(e)
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid, modelValue } = useFormKitInput(props.context);
+function handleInput(e) {
+  props.context?.node.input(e);
+  props.context?.handlers.blur(e);
 }
-
-function updateValue(n: number) {
-  props.context?.node.input(n)
+function updateValue(n) {
+  props.context?.node.input(n);
 }
 </script>
 

package/dist/components/PrimeListbox.vue

@@ -1,44 +1,12 @@
-<script setup lang="ts">
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { ListboxProps } from 'primevue/listbox'
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeListboxProps {
-  pt?: ListboxProps['pt']
-  ptOptions?: ListboxProps['ptOptions']
-  unstyled?: ListboxProps['unstyled']
-  options?: ListboxProps['options']
-  optionLabel?: ListboxProps['optionLabel']
-  optionValue?: ListboxProps['optionValue']
-  multiple?: ListboxProps['multiple']
-  filter?: ListboxProps['filter']
-  filterIcon?: ListboxProps['filterIcon']
-  filterPlaceholder?: ListboxProps['filterPlaceholder']
-  filterLocale?: ListboxProps['filterLocale']
-  filterMatchMode?: ListboxProps['filterMatchMode']
-  autoOptionFocus?: ListboxProps['autoOptionFocus']
-  selectOnFocus?: ListboxProps['selectOnFocus']
-  optionDisabled?: ListboxProps['optionDisabled']
-  optionGroupLabel?: ListboxProps['optionGroupLabel']
-  optionGroupChildren?: ListboxProps['optionGroupChildren']
-  listStyle?: ListboxProps['listStyle']
-  dataKey?: ListboxProps['dataKey']
-  metaKeySelection?: ListboxProps['metaKeySelection']
-  virtualScrollerOptions?: ListboxProps['virtualScrollerOptions']
-  tabindex?: ListboxProps['tabindex']
-  ariaLabel?: ListboxProps['ariaLabel']
-  ariaLabelledby?: ListboxProps['ariaLabelledby']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeListboxProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
 </script>
 
 <template>

package/dist/components/PrimeMultiSelect.vue

@@ -1,57 +1,12 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { MultiSelectProps } from 'primevue/multiselect'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeMultiSelectProps {
-  options?: MultiSelectProps['options']
-  optionLabel?: MultiSelectProps['optionLabel']
-  optionValue?: MultiSelectProps['optionValue']
-  optionDisabled?: MultiSelectProps['optionDisabled']
-  optionGroupLabel?: MultiSelectProps['optionGroupLabel']
-  optionGroupChildren?: MultiSelectProps['optionGroupChildren']
-  scrollHeight?: MultiSelectProps['scrollHeight']
-  dataKey?: MultiSelectProps['dataKey']
-  filter?: MultiSelectProps['filter']
-  filterPlaceholder?: MultiSelectProps['filterPlaceholder']
-  filterLocale?: MultiSelectProps['filterLocale']
-  filterMatchMode?: MultiSelectProps['filterMatchMode']
-  filterFields?: MultiSelectProps['filterFields']
-  appendTo?: MultiSelectProps['appendTo']
-  display?: MultiSelectProps['display']
-  maxSelectedLabels?: MultiSelectProps['maxSelectedLabels']
-  selectedItemsLabel?: MultiSelectProps['selectedItemsLabel']
-  selectionLimit?: MultiSelectProps['selectionLimit']
-  showToggleAll?: MultiSelectProps['showToggleAll']
-  loading?: MultiSelectProps['loading']
-  selectAll?: MultiSelectProps['selectAll']
-  resetFilterOnHide?: MultiSelectProps['resetFilterOnHide']
-  virtualScrollerOptions?: MultiSelectProps['virtualScrollerOptions']
-  autoOptionFocus?: MultiSelectProps['autoOptionFocus']
-  autoFilterFocus?: MultiSelectProps['autoFilterFocus']
-  filterMessage?: MultiSelectProps['filterMessage']
-  selectionMessage?: MultiSelectProps['selectionMessage']
-  emptySelectionMessage?: MultiSelectProps['emptySelectionMessage']
-  emptyFilterMessage?: MultiSelectProps['emptyFilterMessage']
-  emptyMessage?: MultiSelectProps['emptyMessage']
-  pt?: MultiSelectProps['pt']
-  placeholder?: MultiSelectProps['placeholder']
-  ptOptions?: MultiSelectProps['ptOptions']
-  unstyled?: MultiSelectProps['unstyled']
-  size?: MultiSelectProps['size']
-
-}
-
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeMultiSelectProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange, modelValue } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange, modelValue } = useFormKitInput(props.context);
 </script>
 
 <template>

package/dist/components/PrimeOutputBoolean.vue

@@ -1,41 +1,42 @@
-<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'
-
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
-const { t } = useI18n()
-
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { t } = useI18n();
 const translated = computed(() => {
-  if (props.context?._value)
-    return props.context?.trueValue ?? t('formkit.prime.true', 'true')
-  else
-    return props.context?.falseValue ?? t('formkit.prime.false', 'false')
-})
+  if (props.context?._value) return props.context?.trueValue ?? t("formkit.prime.true", "true");
+  else return props.context?.falseValue ?? t("formkit.prime.false", "false");
+});
 </script>
 
 <template>
   <div class="p-formkit p-output-boolean">
-    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
+    <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 :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ translated }}
     </span>
     <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" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
   </div>
 </template>