refactor(components): use formkit notation for icons

sfxcode · sfxcode · commit 8e7e2cfe0ca5 · 2024-07-24T23:24:12.000+02:00
diff --git a/dev/pages/outputs/OutputBoolean.vue b/dev/pages/outputs/OutputBoolean.vue
@@ -1,18 +1,32 @@
 <script setup lang='ts'>
 const primeAttributes = ''
-const customAttributes = 'icon, iconPosition (left, right)'
+const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
 
 const schema
   = [
     {
       $formkit: 'primeOutputBoolean',
       name: 'trueValue',
-      label: 'True',
+      label: 'True Example',
+      prefix: 'MyValue',
+      prefixIcon: 'pi pi-check',
+
+    },
+    {
+      $formkit: 'primeOutputBoolean',
+      name: 'falseValue',
+      label: 'False',
+      suffix: 'MyValue',
+      suffixIcon: 'pi pi-check',
     },
     {
       $formkit: 'primeOutputBoolean',
       name: 'falseValue',
       label: 'False',
+      prefix: 'prefix',
+      prefixIcon: 'pi pi-check',
+      suffix: 'suffix',
+      suffixIcon: '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 = 'icon, iconPosition (left, right)'
+const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
 
 const schema
   = [
@@ -15,16 +15,14 @@ const schema
       name: 'date2',
       label: 'Icon Left',
       help: '',
-      icon: 'pi pi-check',
-      iconPosition: 'left',
+      prefixIcon: 'pi pi-check',
     },
     {
       $formkit: 'primeOutputDate',
       name: 'date3',
       label: 'Icon Right',
       help: 'Right Icon Demo',
-      icon: 'pi pi-check text-yellow-500',
-      iconPosition: 'right',
+      suffixIcon: '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 = 'icon, iconPosition (left, right)'
+const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
 
 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 = 'icon, iconPosition (left, right)'
+const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
 
 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 = 'icon, iconPosition (left, right)'
+const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
 
 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 = 'icon, iconPosition (left, right)'
+const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
 
 const schema
   = [
@@ -15,15 +15,16 @@ const schema
       name: 'number2',
       label: 'Icon Left',
       help: '',
-      icon: 'pi pi-check',
-      iconPosition: 'left',
+      prefixIcon: 'pi pi-check',
     },
     {
       $formkit: 'primeOutputNumber',
       name: 'number3',
       format: 'currency',
       label: 'Icon Right',
       help: 'Right Icon Demo',
+      suffixIcon: '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 = 'icon, iconPosition (left, right)'
+const customAttributes = 'prefixIcon, prefix, suffix, suffixIcon'
 
 const schema
   = [
@@ -15,16 +15,14 @@ const schema
       name: 'iconLeft',
       label: 'Icon Left',
       help: '',
-      icon: 'pi pi-check',
-      iconPosition: 'left',
+      prefixIcon: 'pi pi-check',
     },
     {
       $formkit: 'primeOutputText',
       name: 'iconRight',
       label: 'Icon Right',
       help: 'Right Icon Demo',
-      icon: 'pi pi-check text-yellow-500',
-      iconPosition: 'right',
+      suffixIcon: 'pi pi-check text-yellow-500',
     },
 
   ]
diff --git a/src/components/PrimeOutputBoolean.vue b/src/components/PrimeOutputBoolean.vue
@@ -1,12 +1,12 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
-import { useFormKitIcon } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { t } = useI18n()
 
@@ -20,10 +20,16 @@ const translated = computed(() => {
 
 <template>
   <div class="p-formkit p-output-boolean">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <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>
diff --git a/src/components/PrimeOutputDate.vue b/src/components/PrimeOutputDate.vue
@@ -1,12 +1,12 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
-import { useFormKitIcon } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { d } = useI18n()
 
@@ -30,10 +30,16 @@ const converted = computed(() => {
 
 <template>
   <div class="p-formkit p-output-date">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <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>
diff --git a/src/components/PrimeOutputDuration.vue b/src/components/PrimeOutputDuration.vue
@@ -1,21 +1,27 @@
 <script setup lang='ts'>
-import { useFormKitIcon, useOutputDuration } from '../composables'
+import { useFormKitSection, useOutputDuration } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
 
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { formattedDuration } = useOutputDuration()
 </script>
 
 <template>
   <div class="p-formkit p-output-duration">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <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>
diff --git a/src/components/PrimeOutputLink.vue b/src/components/PrimeOutputLink.vue
@@ -1,18 +1,21 @@
 <script setup lang='ts'>
 import { computed } from 'vue'
-import { useFormKitIcon } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-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="p-formkit p-output-link">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <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"
@@ -22,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>
diff --git a/src/components/PrimeOutputList.vue b/src/components/PrimeOutputList.vue
@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-import { useFormKitIcon } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-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,12 +17,18 @@ function listValue(index: number, value: string): string {
 
 <template>
   <div class="p-formkit p-output-list">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <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>
diff --git a/src/components/PrimeOutputNumber.vue b/src/components/PrimeOutputNumber.vue
@@ -2,12 +2,12 @@
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
-import { useFormKitIcon } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { n } = useI18n()
 
@@ -31,10 +31,16 @@ const converted = computed(() => {
 
 <template>
   <div class="p-formkit p-output-number">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <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>
diff --git a/src/components/PrimeOutputText.vue b/src/components/PrimeOutputText.vue
@@ -1,22 +1,28 @@
 <script setup lang='ts'>
-import { useFormKitIcon } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
 <template>
   <div class="p-formkit p-output-text">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <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"
     >
       {{ 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>
diff --git a/src/composables/index.ts b/src/composables/index.ts
@@ -1,6 +1,7 @@
 import { useFormKitIcon } from './useFormKitIcon'
 import { useFormKitInput } from './useFormKitInput'
 import { useFormKitSchema } from './useFormKitSchema'
+import { useFormKitSection } from './useFormKitSection'
 import { useInputEditor } from './useInputEditor'
 import { useInputEditorSchema } from './useInputEditorSchema'
 import { useOutputDuration } from './useOutputDuration'
@@ -9,6 +10,7 @@ export {
   useFormKitIcon,
   useFormKitInput,
   useFormKitSchema,
+  useFormKitSection,
   useInputEditor,
   useInputEditorSchema,
   useOutputDuration,
diff --git a/src/composables/useFormKitIcon.ts b/src/composables/useFormKitIcon.ts
diff --git a/src/composables/useFormKitSection.ts b/src/composables/useFormKitSection.ts
diff --git a/src/sass/formkit-primevue.scss b/src/sass/formkit-primevue.scss
