refactor(inputs): use prefix and suffix instead of labelLeft and labelRight

Author: sfxcode

dev/pages/index.vue

@@ -41,6 +41,7 @@ const schema = reactive(
       help: 'Enter your new password.',
       validation: 'required|length:5,16',
       feedback: true,
+      outerClass: 'col-6',
     },
     {
       $formkit: 'primePassword',
@@ -49,12 +50,14 @@ const schema = reactive(
       help: 'Enter your new password again.',
       validation: 'required|confirm',
       validationLabel: 'password confirmation',
+      outerClass: 'col-6',
     },
     {
       $formkit: 'primeCheckbox',
       name: 'eu_citizen',
       id: 'eu',
-      label: 'Are you a european citizen?',
+      prefix: 'Are you a european citizen?',
+      outerClass: 'col-6',
     },
     {
       $formkit: 'primeSelect',
@@ -65,6 +68,7 @@ const schema = reactive(
       optionValue: 'value',
       options,
       help: 'How often should we display a cookie notice?',
+      outerClass: 'col-6',
     },
   ],
 )

dev/pages/inputs/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = 'binary (dfault = true), trueValue, falseValue'
-const customAttributes = 'labelLeft, labelRight'
+const customAttributes = 'prefix, suffix'
 
 const schema
   = [
@@ -13,12 +13,12 @@ const schema
     {
       $formkit: 'primeCheckbox',
       id: 'eu',
-      labelLeft: 'Are you a european citizen: ',
+      prefix: 'Are you a european citizen: ',
     },
     {
       $formkit: 'primeCheckbox',
       id: 'taxes',
-      labelRight: 'Taxes includes ',
+      suffix: 'Taxes includes ',
     },
     {
       $formkit: 'primeCheckbox',

dev/pages/inputs/RadioButton.vue

@@ -9,9 +9,6 @@ const schema
       id: 'basic',
       label: 'Select',
       name: 'basic',
-      wrapperClass: 'mt-1 flex flex-col space-y-2',
-      optionClass: 'flex space-x-2',
-      labelClass: 'font-bold',
       optionLabel: 'label',
       optionValue: 'value',
       options: [
@@ -20,6 +17,22 @@ const schema
         { label: 'Every day', value: 'daily' },
       ],
     },
+    {
+      $formkit: 'primeRadioButton',
+      id: 'answer',
+      label: 'Select Answer',
+      name: 'answer',
+      optionLabel: 'label',
+      optionValue: 'value',
+      options: [
+        { label: 'A', value: 'A' },
+        { label: 'B', value: 'B' },
+        { label: 'C', value: 'C' },
+        { label: 'D', value: 'D' },
+        { label: 'E', value: 'E' },
+
+      ],
+    },
   ]
 
 const data = { basic: 'refresh' }
@@ -28,6 +41,7 @@ const data = { basic: 'refresh' }
 <template>
   <div>
     <PrimeInput
+      class="space-x-2 items-center"
       header="PrimeRadioButton" :schema="schema" :data="data"
       :prime-attributes="primeAttributes" :custom-attributes="customAttributes"
     />

dev/pages/inputs/ToggleSwitch.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 const primeAttributes = 'trueValue, falseValue'
-const customAttributes = 'labelLeft, labelRight'
+const customAttributes = 'prefix, suffix'
 
 const schema
   = [
@@ -14,14 +14,13 @@ const schema
       $formkit: 'primeToggleSwitch',
       name: 'eu_citizen',
       id: 'eu',
-      labelRight: 'Are you a european citizen: ',
-      wrapperClass: 'flex items-center',
+      suffix: 'Are you a european citizen: ',
     },
     {
       $formkit: 'primeToggleSwitch',
       name: 'confirmation',
       id: 'confirm',
-      labelLeft: 'Are you sure ?',
+      prefix: 'Are you sure ?',
       wrapperClass: 'flex items-center',
     },
     {

src/components/PrimeCheckbox.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { CheckboxProps } from 'primevue/checkbox'
-import { useFormKitInput } from '../composables'
+import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeCheckboxProps {
   binary?: CheckboxProps['binary']
@@ -14,9 +14,6 @@ export interface FormKitPrimeCheckboxProps {
   unstyled?: CheckboxProps['unstyled']
   indeterminate?: CheckboxProps['indeterminate']
   variant?: CheckboxProps['variant']
-  labelLeft?: string
-  labelRight?: string
-
 }
 
 const props = defineProps({
@@ -26,12 +23,16 @@ const props = defineProps({
   },
 })
 
+const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
+
 const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
-    <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.prefix }}
+    </span>
     <Checkbox
       v-model="context._value"
       v-bind="context?.attrs"
@@ -54,6 +55,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       @change="handleInput"
       @blur="handleBlur"
     />
-    <span v-if="context.labelRight" class="formkit-prime-right">{{ context.labelRight }}</span>
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.suffix }}
+    </span>
   </div>
 </template>

src/components/PrimeToggleSwitch.vue

@@ -3,17 +3,14 @@ import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { ToggleSwitchProps } from 'primevue/toggleswitch'
-import { useFormKitInput } from '../composables'
+import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeToggleSwitchProps {
   trueValue?: ToggleSwitchProps['trueValue']
   falseValue?: ToggleSwitchProps['falseValue']
   pt?: ToggleSwitchProps['pt']
   ptOptions?: ToggleSwitchProps['ptOptions']
   unstyled?: ToggleSwitchProps['unstyled']
-  labelLeft?: string
-  labelRight?: string
-
 }
 
 const props = defineProps({
@@ -23,12 +20,16 @@ const props = defineProps({
   },
 })
 
+const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
+
 const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
-    <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.prefix }}
+    </span>
     <ToggleSwitch
       v-model="context._value"
       v-bind="context?.attrs"
@@ -48,6 +49,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       @change="handleInput"
       @blur="handleBlur"
     />
-    <span v-if="context.labelRight" class="formkit-prime-right">{{ context.labelRight }}</span>
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.suffix }}
+    </span>
   </div>
 </template>

src/composables/useFormKitSection.ts

@@ -2,7 +2,7 @@ import { computed } from 'vue'
 
 export function useFormKitSection(context: any) {
   const hasPrefix = computed(() => {
-    return context?.attrs?.prefix && context?.attrs?.prefix.length > 0
+    return context?.prefix && context?.prefix.length > 0
   })
 
   const hasPrefixIcon = computed(() => {
@@ -14,7 +14,7 @@ export function useFormKitSection(context: any) {
   })
 
   const hasSuffix = computed(() => {
-    return context?.attrs?.suffix && context?.attrs?.suffix.length > 0
+    return context?.suffix && context?.suffix.length > 0
   })
 
   return { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon }