feat(PrimeOutputList): add converter functions for output list and update props to support conversion

Author: sfxcode

dev/pages/outputs/OutputList.vue

@@ -5,6 +5,18 @@ const primeAttributes = ''
 const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
 const { addElement } = useFormKitSchema()
 
+function convertValues(value: string[]): string[] {
+  return value.map(item => item.toUpperCase())
+}
+
+function convertValuesCharCount(value: string[]): string[] {
+  return value.map(item => `${item} (${item.length})`)
+}
+
+function convertValuesSortedReverse(value: string[]): string[] {
+  return value.sort((a, b) => a.localeCompare(b)).reverse()
+}
+
 const schema
   = [
     addElement('h3', ['Default (listStyle: span)']),
@@ -27,6 +39,28 @@ const schema
       iconPrefix: 'pi pi-list',
       divider: ' - ',
     },
+    addElement('h3', ['Converter']),
+
+    {
+      $formkit: 'primeOutputList',
+      name: 'list1',
+      label: 'Converter Function',
+      convertValue: convertValues,
+      divider: ' - ',
+    },
+    {
+      $formkit: 'primeOutputList',
+      name: 'list2',
+      label: 'Converter Function - Char Count',
+      convertValue: convertValuesCharCount,
+    },
+    {
+      $formkit: 'primeOutputList',
+      name: 'list2',
+      label: 'Converter Function - Sorted Reverse',
+      convertValue: convertValuesSortedReverse,
+    },
+    addElement('h3', ['Chips']),
     {
       $formkit: 'primeOutputList',
       name: 'list2',

src/components/PrimeOutputList.vue

@@ -8,9 +8,13 @@ import FormKitIcon from './FormKitIcon.vue'
 import FormKitPrefix from './FormKitPrefix.vue'
 import FormKitSuffix from './FormKitSuffix.vue'
 
+export interface PrimeOutputListProps {
+  convertValue?: (array: []) => []
+}
+
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
+    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps & PrimeOutputListProps,
     required: true,
   },
 })
@@ -20,34 +24,42 @@ const listStyle = computed(() => {
 })
 
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
+
+const getListValues = computed(() => {
+  const values = Array.isArray(props.context?._value) ? props.context._value : []
+  if (typeof props.context?.convertValue === 'function') {
+    return [props.context.convertValue([...values])]
+  }
+  return values
+})
 </script>
 
 <template>
   <div class="p-formkit p-output-list">
     <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
     <FormKitPrefix v-if="hasPrefix && listStyle === 'span'" :prefix="context?.prefix as string" />
     <span v-if="listStyle === 'span'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
-      <template v-for="(value, index) of context?._value" :key="index">
+      <template v-for="(value, index) of getListValues" :key="index">
         <span v-if="index !== 0" class="p-output-list-divider" :class="context?.dividerClass">{{ context?.divider ?? ', ' }}</span>
         <span class="p-output-list-item" :class="context?.itemClass">{{ value }}</span>
       </template>
     </span>
     <div v-if="listStyle === 'div'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
-      <template v-for="(value, index) of context?._value" :key="index">
+      <template v-for="(value, index) of getListValues" :key="index">
         <div class="p-output-list-item" :class="context?.itemClass">
           {{ value }}
         </div>
       </template>
     </div>
     <ul v-if="listStyle === 'ul'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
-      <li v-for="(value, index) of context?._value" :key="index">
+      <li v-for="(value, index) of getListValues" :key="index">
         <span class="p-output-list-item" :class="context?.itemClass">
           {{ value }}
         </span>
       </li>
     </ul>
     <ol v-if="listStyle === 'ol'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
-      <li v-for="(value, index) of context?._value" :key="index">
+      <li v-for="(value, index) of getListValues" :key="index">
         <span class="p-output-list-item" :class="context?.itemClass">
           {{ value }}
         </span>

src/definitions/output.ts

@@ -38,5 +38,5 @@ export const primeOutputDurationDefinition: FormKitTypeDefinition = createInput(
 })
 
 export const primeOutputListDefinition: FormKitTypeDefinition = createInput(PrimeOutputList, {
-  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'divider', 'itemClass', 'dividerClass', 'listStyle', 'onIconPrefixClicked', 'onIconSuffixClicked'],
+  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'divider', 'itemClass', 'dividerClass', 'listStyle', 'onIconPrefixClicked', 'onIconSuffixClicked', 'convertValue'],
 })