feat(PrimeOutputText): isTranslationKey prop added and i18n handling

Author: sfxcode

src/components/PrimeOutputText.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import type { FormKitFrameworkContext } from '@formkit/core'
 import type { PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
@@ -10,6 +11,20 @@ const props = defineProps({
   },
 })
 
+const textValue = computed(() => {
+  const value = props.context?._value
+  const { t } = useI18n()
+  if (value) {
+    if (props.context?.isTranslationKey)
+      return t(value)
+    else
+      return value
+  }
+  else {
+    return ''
+  }
+})
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -24,8 +39,8 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
       :style="context?.attrs?.style"
       :class="context?.attrs?.class"
     >
-      <span v-if="context?.html" v-html="context?._value" />
-      <span v-else v-text="context?._value" />
+      <span v-if="context?.html" v-html="textValue" />
+      <span v-else v-text="textValue" />
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
       {{ context?.suffix }}

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', 'html'],
+  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'isTranslationKey', 'html'],
 })
 
 export const primeOutputDateDefinition: FormKitTypeDefinition = createInput(PrimeOutputDate, {