refactor(Outputs): Add prefix, prefixIcon, suffix, suffixIcon to definition

Author: sfxcode

src/components/PrimeOutputBoolean.vue

@@ -1,11 +1,16 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { t } = useI18n()
@@ -22,13 +27,13 @@ const translated = computed(() => {
   <div class="p-formkit p-output-boolean">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
     <span v-if="hasPrefix" class="formkit-prefix">
-      {{ context?.attrs?.prefix }}
+      {{ context?.prefix }}
     </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ translated }}
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
-      {{ context?.attrs?.suffix }}
+      {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>

src/components/PrimeOutputDate.vue

@@ -1,10 +1,14 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 

src/components/PrimeOutputDuration.vue

@@ -1,10 +1,14 @@
 <script setup lang='ts'>
+import type { PropType } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection, useOutputDuration } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
-
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { formattedDuration } = useOutputDuration()

src/components/PrimeOutputLink.vue

@@ -1,10 +1,15 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.context?._value : `https://${props.context?._value}`)

src/components/PrimeOutputList.vue

@@ -1,9 +1,15 @@
 <script setup lang='ts'>
+import type { PropType } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 function listValue(index: number, value: string): string {

src/components/PrimeOutputNumber.vue

@@ -1,11 +1,15 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
 
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 

src/components/PrimeOutputText.vue

@@ -1,9 +1,15 @@
 <script setup lang='ts'>
+import type { PropType } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 </script>