feat(PrimeOutputList): Introduce Divider and more styling options - Add Chips Demo

Author: sfxcode

dev/pages/outputs/OutputList.vue

@@ -7,13 +7,27 @@ const schema
     {
       $formkit: 'primeOutputList',
       name: 'list1',
-      label: 'list1',
+      label: 'Default Divider',
+    },
+    {
+      $formkit: 'primeOutputList',
+      name: 'list1',
+      label: 'Custom Divider',
+      divider: ' ',
     },
     {
       $formkit: 'primeOutputList',
       name: 'list2',
+      label: 'Custom Divider with Prefix Icon',
+      iconPrefix: 'pi pi-list',
       divider: ' - ',
-      label: 'list2',
+    },
+    {
+      $formkit: 'primeOutputList',
+      name: 'list2',
+      label: 'Use Chips from PrimeVue',
+      itemClass: 'p-chip',
+      divider: ' ',
     },
 
   ]
@@ -24,7 +38,7 @@ const data = { list1: ['Hello', 'World'], list2: ['FormKit', 'meets', 'PrimeVue'
 <template>
   <div class="">
     <PrimeOutput
-      header="PrimeOutputBoolean" :schema="schema" :data="data"
+      header="PrimeOutputList" :schema="schema" :data="data"
       :prime-attributes="primeAttributes" :custom-attributes="customAttributes"
     />
   </div>

src/components/PrimeOutputList.vue

@@ -11,14 +11,6 @@ const props = defineProps({
 })
 
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
-function listValue(index: number, value: string): string {
-  const divider = props.context?.attrs?.divider || ', '
-  if (index === 0)
-    return value
-  else
-    return `${divider}${value}`
-}
 </script>
 
 <template>
@@ -27,9 +19,10 @@ function listValue(index: number, value: string): string {
     <span v-if="hasPrefix" class="formkit-prefix">
       {{ context?.attrs?.prefix }}
     </span>
-    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+    <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">
-        <span class="p-output-list-item">{{ listValue(index, value) }}</span>
+        <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>
     <span v-if="hasSuffix" class="formkit-suffix">