refactor(icons): Breaking change name of leftIcon property to iconPrefix and right icon property to iconSuffix to prevent conflicts with formkits icon resolver #49

sfxcode · sfxcode · commit 8b3afee6b5eb · 2024-07-30T13:09:35.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,7 +46,7 @@
 
 - **inputs:** Use prefix and suffix instead of labelLeft and labelRight ([206fbea](https://github.com/sfxcode/formkit-primevue/commit/206fbea))
 - **RadioButton:** Use flex styling for better aligning in default ([68c7950](https://github.com/sfxcode/formkit-primevue/commit/68c7950))
-- **Outputs:** Add prefix, prefixIcon, suffix, suffixIcon to definition ([3b1579a](https://github.com/sfxcode/formkit-primevue/commit/3b1579a))
+- **Outputs:** Add prefix, iconPrefix, suffix, iconSuffix to definition ([3b1579a](https://github.com/sfxcode/formkit-primevue/commit/3b1579a))
 - **editor:** Use Columns ([433439d](https://github.com/sfxcode/formkit-primevue/commit/433439d))
 
 ### ❤️ Contributors
diff --git a/dev/pages/inputs/InputMask.vue b/dev/pages/inputs/InputMask.vue
@@ -16,7 +16,8 @@ const schema
       name: 'custom',
       label: 'Input Mask',
       mask: '(999) 999-9999',
-      unmask: true,
+      iconPrefix: 'pi pi-check',
+      iconSuffix: 'pi pi-check',
     },
     {
       $formkit: 'primeInputMask',
diff --git a/dev/pages/inputs/InputText.vue b/dev/pages/inputs/InputText.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = 'placeholder'
-const customAttributes = 'prefixIcon, suffixIcon'
+const customAttributes = 'iconPrefix, iconSuffix'
 
 const schema
   = [
@@ -18,14 +18,14 @@ const schema
       label: 'Icon Left',
       help: '',
       placeholder: 'icon',
-      prefixIcon: 'pi pi-check',
+      iconPrefix: 'pi pi-check',
     },
     {
       $formkit: 'primeInputText',
       name: 'iconRight',
       label: 'Icon Right (Disabled)',
       help: 'Right Icon Demo',
-      suffixIcon: 'pi pi-check',
+      iconSuffix: 'pi pi-check',
       disabled: true,
     },
 
diff --git a/dev/pages/outputs/OutputBoolean.vue b/dev/pages/outputs/OutputBoolean.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = ''
-const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
+const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
 
 const schema
   = [
@@ -9,24 +9,24 @@ const schema
       name: 'trueValue',
       label: 'True Example',
       prefix: 'MyValue',
-      prefixIcon: 'pi pi-check',
+      iconPrefix: 'pi pi-check',
 
     },
     {
       $formkit: 'primeOutputBoolean',
       name: 'falseValue',
       label: 'False',
       suffix: 'MyValue',
-      suffixIcon: 'pi pi-check',
+      iconSuffix: 'pi pi-check',
     },
     {
       $formkit: 'primeOutputBoolean',
       name: 'falseValue',
       label: 'False',
       prefix: 'prefix',
-      prefixIcon: 'pi pi-check',
+      iconPrefix: 'pi pi-check',
       suffix: 'suffix',
-      suffixIcon: 'pi pi-times',
+      iconSuffix: 'pi pi-times',
     },
 
   ]
diff --git a/dev/pages/outputs/OutputDate.vue b/dev/pages/outputs/OutputDate.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = ''
-const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
+const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
 
 const schema
   = [
@@ -15,14 +15,14 @@ const schema
       name: 'date2',
       label: 'Icon Left',
       help: '',
-      prefixIcon: 'pi pi-check',
+      iconPrefix: 'pi pi-check',
     },
     {
       $formkit: 'primeOutputDate',
       name: 'date3',
       label: 'Icon Right',
       help: 'Right Icon Demo',
-      suffixIcon: 'pi pi-check text-yellow-500',
+      iconSuffix: 'pi pi-check text-yellow-500',
     },
 
   ]
diff --git a/dev/pages/outputs/OutputDuration.vue b/dev/pages/outputs/OutputDuration.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = ''
-const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
+const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
 
 const schema
   = [
diff --git a/dev/pages/outputs/OutputLink.vue b/dev/pages/outputs/OutputLink.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = ''
-const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
+const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
 
 const schema
   = [
diff --git a/dev/pages/outputs/OutputList.vue b/dev/pages/outputs/OutputList.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = ''
-const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
+const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
 
 const schema
   = [
diff --git a/dev/pages/outputs/OutputNumber.vue b/dev/pages/outputs/OutputNumber.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = ''
-const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
+const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
 
 const schema
   = [
@@ -15,15 +15,15 @@ const schema
       name: 'number2',
       label: 'Icon Left',
       help: '',
-      prefixIcon: 'pi pi-check',
+      iconPrefix: 'pi pi-check',
     },
     {
       $formkit: 'primeOutputNumber',
       name: 'number3',
       format: 'currency',
       label: 'Icon Right',
       help: 'Right Icon Demo',
-      suffixIcon: 'pi pi-check',
+      iconSuffix: 'pi pi-check',
 
     },
 
diff --git a/dev/pages/outputs/OutputText.vue b/dev/pages/outputs/OutputText.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = ''
-const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
+const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
 
 const schema
   = [
@@ -15,14 +15,14 @@ const schema
       name: 'iconLeft',
       label: 'Icon Left',
       help: '',
-      prefixIcon: 'pi pi-check',
+      iconPrefix: 'pi pi-check',
     },
     {
       $formkit: 'primeOutputText',
       name: 'iconRight',
       label: 'Icon Right',
       help: 'Right Icon Demo',
-      suffixIcon: 'pi pi-check text-yellow-500',
+      iconSuffix: 'pi pi-check text-yellow-500',
     },
 
   ]
diff --git a/src/components/PrimeInputMask.vue b/src/components/PrimeInputMask.vue
@@ -3,7 +3,9 @@ import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { InputMaskProps } from 'primevue/inputmask'
-import { useFormKitInput } from '../composables'
+import InputIcon from 'primevue/inputicon'
+import IconField from 'primevue/iconfield'
+import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeInputMaskProps {
   mask?: InputMaskProps['mask']
@@ -15,9 +17,6 @@ export interface FormKitPrimeInputMaskProps {
   unstyled?: InputMaskProps['unstyled']
   invalid?: InputMaskProps['invalid']
   variant?: InputMaskProps['variant']
-  iconLeft?: string
-  iconRight?: string
-
 }
 
 const props = defineProps({
@@ -27,35 +26,15 @@ const props = defineProps({
   },
 })
 
-const { styleClass } = useFormKitInput(props.context)
-
-function handleInput(e: FocusEvent) {
-  props.context?.node.input(props.context?._value)
-  props.context?.handlers.blur(e)
-}
-
-function hasLeftIcon() {
-  return props.context?.iconLeft && props.context?.iconLeft.length > 0
-}
-
-function hasRightIcon() {
-  return props.context?.iconRight && props.context?.iconRight.length > 0
-}
-
-function spanClass() {
-  let result = ''
-  if (hasLeftIcon())
-    result = `${result}p-input-icon-left `
-  if (hasRightIcon())
-    result = `${result}p-input-icon-right `
-  return result
-}
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
-    <span :class="spanClass()">
-      <i v-if="hasLeftIcon()" :class="context.iconLeft" />  <InputMask
+    <IconField>
+      <InputIcon v-if="hasPrefixIcon" :class="context?.iconPrefix" />
+      <InputMask
         :id="context.id"
         v-model="context._value"
         v-bind="context?.attrs"
@@ -74,8 +53,10 @@ function spanClass() {
         :variant="context.variant"
         :pt-options="context.ptOptions"
         :unstyled="context.unstyled ?? false"
-        @blur="handleInput"
-      />  <i v-if="hasRightIcon" :class="context.iconRight" />
-    </span>
+        @input="handleInput"
+        @blur="handleBlur"
+      />
+      <InputIcon v-if="hasSuffixIcon" :class="context?.iconSuffix" />
+    </IconField>
   </div>
 </template>
diff --git a/src/components/PrimeInputText.vue b/src/components/PrimeInputText.vue
@@ -12,8 +12,6 @@ export interface FormKitPrimeInputTextProps {
   ptOptions?: InputTextProps['ptOptions']
   unstyled?: InputTextProps['unstyled']
   placeholder?: InputTextProps['placeholder']
-  icon?: string
-
 }
 
 const props = defineProps({
@@ -30,7 +28,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 <template>
   <div class="p-formkit">
     <IconField>
-      <InputIcon v-if="hasPrefixIcon" :class="context?.prefixIcon" />
+      <InputIcon v-if="hasPrefixIcon" :class="context?.iconPrefix" />
       <InputText
         :id="context.id"
         v-model="context._value"
@@ -49,7 +47,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         @input="handleInput"
         @blur="handleBlur"
       />
-      <InputIcon v-if="hasSuffixIcon" :class="context?.suffixIcon" />
+      <InputIcon v-if="hasSuffixIcon" :class="context?.iconSuffix" />
     </IconField>
   </div>
 </template>
diff --git a/src/components/PrimeOutputBoolean.vue b/src/components/PrimeOutputBoolean.vue
@@ -25,7 +25,7 @@ const translated = computed(() => {
 
 <template>
   <div class="p-formkit p-output-boolean">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.prefix }}
     </span>
@@ -35,6 +35,6 @@ const translated = computed(() => {
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>
diff --git a/src/components/PrimeOutputDate.vue b/src/components/PrimeOutputDate.vue
@@ -34,7 +34,7 @@ const converted = computed(() => {
 
 <template>
   <div class="p-formkit p-output-date">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -44,6 +44,6 @@ const converted = computed(() => {
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>
diff --git a/src/components/PrimeOutputDuration.vue b/src/components/PrimeOutputDuration.vue
@@ -16,7 +16,7 @@ const { formattedDuration } = useOutputDuration()
 
 <template>
   <div class="p-formkit p-output-duration">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -26,6 +26,6 @@ const { formattedDuration } = useOutputDuration()
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>
diff --git a/src/components/PrimeOutputLink.vue b/src/components/PrimeOutputLink.vue
@@ -17,7 +17,7 @@ const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.co
 
 <template>
   <div class="p-formkit p-output-link">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -33,6 +33,6 @@ const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.co
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>
diff --git a/src/components/PrimeOutputList.vue b/src/components/PrimeOutputList.vue
@@ -23,7 +23,7 @@ function listValue(index: number, value: string): string {
 
 <template>
   <div class="p-formkit p-output-list">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -35,6 +35,6 @@ function listValue(index: number, value: string): string {
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>
diff --git a/src/components/PrimeOutputNumber.vue b/src/components/PrimeOutputNumber.vue
@@ -42,7 +42,7 @@ const converted = computed(() => {
 
 <template>
   <div class="p-formkit p-output-number">
-    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
@@ -52,6 +52,6 @@ const converted = computed(() => {
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.attrs?.suffix }}
     </span>
-    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>
 </template>
diff --git a/src/components/PrimeOutputText.vue b/src/components/PrimeOutputText.vue
diff --git a/src/composables/useFormKitSection.ts b/src/composables/useFormKitSection.ts
diff --git a/src/composables/useInputEditorSchema.ts b/src/composables/useInputEditorSchema.ts
diff --git a/src/definitions/input.ts b/src/definitions/input.ts
diff --git a/src/definitions/output.ts b/src/definitions/output.ts
