feat(PrimeOutputText): add convertValue prop for custom value transformation

Author: sfxcode

dev/pages/outputs/OutputText.vue

@@ -9,6 +9,10 @@ function prefixClicked() {
 function suffixClicked() {
   console.error('Suffix Icon Clicked')
 }
+
+function toUpper(value: string) {
+  return value.toUpperCase()
+}
 const schema
   = [
     {
@@ -51,6 +55,12 @@ const schema
       iconSuffix: 'pi pi-check text-yellow-500',
       onIconSuffixClicked: suffixClicked,
     },
+    {
+      $formkit: 'primeOutputText',
+      name: 'name',
+      label: 'Connvert to Uppercase',
+      convertValue: toUpper,
+    },
 
   ]
 

src/components/PrimeOutputText.vue

@@ -9,9 +9,15 @@ import FormKitIcon from './FormKitIcon.vue'
 import FormKitPrefix from './FormKitPrefix.vue'
 import FormKitSuffix from './FormKitSuffix.vue'
 
+export interface FormKitOutputTextProps {
+  html?: boolean
+  isTranslationKey?: boolean
+  convertValue?: (value: string) => string
+}
+
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
+    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps & FormKitOutputTextProps,
     required: true,
   },
 })
@@ -20,10 +26,15 @@ const textValue = computed(() => {
   const value = props.context?._value
   const { t } = useI18n()
   if (value) {
-    if (props.context?.isTranslationKey)
+    if (props.context?.isTranslationKey) {
       return t(value)
-    else
+    }
+    else if (typeof props.context?.convertValue === 'function') {
+      return props.context?.convertValue(value)
+    }
+    else {
       return value
+    }
   }
   else {
     return ''

src/definitions/output.ts

@@ -10,7 +10,7 @@ import PrimeOutputReference from '../components/PrimeOutputReference.vue'
 import PrimeOutputText from '../components/PrimeOutputText.vue'
 
 export const primeOutputTextDefinition: FormKitTypeDefinition = createInput(PrimeOutputText, {
-  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'isTranslationKey', 'html', 'onIconPrefixClicked', 'onIconSuffixClicked'],
+  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'isTranslationKey', 'html', 'onIconPrefixClicked', 'onIconSuffixClicked', 'convertValue'],
 })
 
 export const primeOutputDateDefinition: FormKitTypeDefinition = createInput(PrimeOutputDate, {