Merge pull request #38 from kswzr/icon-fixes

fix: icon handling in PrimeInputText

Author: sfxcode

src/components/PrimeInputText.vue

@@ -2,13 +2,15 @@
 import { type PropType, computed } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 import type { InputTextProps } from 'primevue/inputtext'
+import type { IconFieldProps } from 'primevue/iconfield'
 
 export interface FormKitPrimeInputTextProps {
   pt?: InputTextProps['pt']
   ptOptions?: InputTextProps['ptOptions']
   unstyled?: InputTextProps['unstyled']
   placeholder?: InputTextProps['placeholder']
   icon?: string
+  iconPosition?: IconFieldProps['iconPosition']
 }
 
 const props = defineProps({
@@ -18,9 +20,21 @@ const props = defineProps({
   },
 })
 
-function hasIcon() {
+const hasIcon = computed(() => {
+  if (props.context?.icon && props.context?.icon.length > 0) {
+    return true
+  }
+
   return props.context?.attrs?.icon && props.context?.attrs?.icon.length > 0
-}
+})
+
+const icon = computed(() => {
+  return props.context?.icon ?? props.context?.attrs?.icon
+})
+
+const iconPosition = computed(() => {
+  return props.context?.attrs?.iconPosition ?? undefined;
+})
 
 function handleBlur(e: Event) {
   props.context?.handlers.blur(e)
@@ -35,9 +49,8 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
 
 <template>
   <div class="p-formkit">
-    {{ context.attrs.icon }}
-    <IconField v-if="hasIcon()" :icon-position="context?.attrs.iconPosition">
-      <InputIcon :class="context.attrs.icon" />
+    <IconField v-if="hasIcon" :icon-position="iconPosition">
+      <InputIcon :class="icon" />
       <InputText
         :id="context.id"
         v-model="context._value"

src/index.ts

@@ -46,12 +46,11 @@ export const primeAutoCompleteDefinition: FormKitTypeDefinition = createInput(Pr
 })
 export const primeInputTextDefinition: FormKitTypeDefinition = createInput(PrimeInputText, {
   props: [
-    'iconRight',
-    'iconLeft',
     'pt',
     'ptOptions',
     'unstyled',
     'placeholder',
+    'icon',
   ],
 })