feat(primeOutputList): add listStyles: span, div, ul, ol

Author: sfxcode

dev/App.scss

@@ -10,7 +10,7 @@
 
 html {
   height: 100%;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 a {

dev/pages/outputs/OutputList.vue

@@ -1,9 +1,14 @@
 <script setup lang='ts'>
+import { useFormKitSchema } from 'my-library'
+
 const primeAttributes = ''
 const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
+const { addElement } = useFormKitSchema()
 
 const schema
   = [
+    addElement('h3', ['Default (listStyle: span)']),
+
     {
       $formkit: 'primeOutputList',
       name: 'list1',
@@ -29,14 +34,39 @@ const schema
       itemClass: 'p-chip-item',
       divider: ' ',
     },
+    addElement('h3', ['List Styles']),
+    {
+      $formkit: 'primeOutputList',
+      name: 'list1',
+      label: 'Use listStyle: span',
+      listStyle: 'span',
+    },
+    {
+      $formkit: 'primeOutputList',
+      name: 'list2',
+      label: 'Use listStyle: div',
+      listStyle: 'div',
+    },
+    {
+      $formkit: 'primeOutputList',
+      name: 'list2',
+      label: 'Use listStyle: ul',
+      listStyle: 'ul',
+    },
+    {
+      $formkit: 'primeOutputList',
+      name: 'list2',
+      label: 'Use listStyle: ol',
+      listStyle: 'ol',
+    },
 
   ]
 
 const data = { list1: ['Hello', 'World'], list2: ['FormKit', 'meets', 'PrimeVue'] }
 </script>
 
 <template>
-  <div class="">
+  <div class="list">
     <PrimeOutput
       header="PrimeOutputList" :schema="schema" :data="data"
       :prime-attributes="primeAttributes" :custom-attributes="customAttributes"
@@ -45,5 +75,7 @@ const data = { list1: ['Hello', 'World'], list2: ['FormKit', 'meets', 'PrimeVue'
 </template>
 
 <style lang='scss' scoped>
-
+.list .p-formkit-data-view .formkit-form .formkit-outer {
+  padding-bottom: 1rem;
+}
 </style>

dev/uno.config.ts

@@ -1,7 +1,7 @@
 import {
   defineConfig,
   presetIcons,
-  presetWind3,
+  presetWind4,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -12,7 +12,7 @@ function convert(color: string) {
 
 export default defineConfig({
   presets: [
-    presetWind3(),
+    presetWind4(),
     presetIcons({
       scale: 1.2,
       unit: 'em',

src/components/PrimeOutputList.vue

@@ -1,31 +1,61 @@
 <script setup lang='ts'>
 import type { FormKitFrameworkContext } from '@formkit/core'
 import type { PropType } from 'vue'
+import { computed } from 'vue'
 import { useFormKitSection } from '../composables'
 
+export interface FormKitOutputListProps {
+  listStyle?: 'div' | 'ul' | 'ol' | 'span'
+}
+
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext>,
+    type: Object as PropType<FormKitFrameworkContext & FormKitOutputListProps>,
     required: true,
   },
 })
 
+const listStyle = computed(() => {
+  return props.context?.listStyle || 'span'
+})
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
 <template>
   <div class="p-formkit p-output-list">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
-    <span v-if="hasPrefix" class="formkit-prefix">
+    <span v-if="hasPrefix && listStyle === 'span'" class="formkit-prefix">
       {{ context?.prefix }}
     </span>
-    <span :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
+    <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">
         <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">
+    <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">
+        <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">
+        <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">
+        <span class="p-output-list-item" :class="context?.itemClass">
+          {{ value }}
+        </span>
+      </li>
+    </ol>
+    <span v-if="hasSuffix && listStyle === 'span'" class="formkit-suffix">
       {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />

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'],
+  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'divider', 'itemClass', 'dividerClass', 'listStyle'],
 })

src/sass/formkit-primevue.scss

@@ -179,16 +179,23 @@ $grid-breakpoints: (
 .p-formkit-data-view {
   .formkit-form {
     .formkit-outer {
-      padding-bottom:  0.25rem;
+      padding-bottom:  0.5rem;
     }
 
     &.form-horizontal {
       padding-bottom: 0.8rem;
     }
 
     .formkit-help {
+      padding-top:  0.25rem;
       margin: 0;
     }
+
+    ul, ol {
+      padding-inline-start: 1rem;
+      margin-block-start: 0;
+      margin-block-end: 0;
+    }
   }
 }