refactor(OutputList): use custom p-chip-item styling from sass

Author: sfxcode

dev/components/demo/PrimeOutput.vue

@@ -24,7 +24,7 @@ const formData = ref(props.data)
     </h2>
     <slot />
     <div class="flex flex-wrap gap-8">
-      <div class="min-w-35rem basis-1/3 md:basis-1/4">
+      <div class="min-w-30rem basis-1/3 md:basis-1/4">
         <div class="p-formkit-data-view">
           <FormKit
             v-model="formData"

dev/modules/primevue.ts

@@ -10,6 +10,7 @@ import Toolbar from 'primevue/toolbar'
 import AutoComplete from 'primevue/autocomplete'
 import CascadeSelect from 'primevue/cascadeselect'
 import Checkbox from 'primevue/checkbox'
+import Chip from 'primevue/chip'
 import ColorPicker from 'primevue/colorpicker'
 import DatePicker from 'primevue/datepicker'
 import Editor from 'primevue/editor'
@@ -56,6 +57,7 @@ export const install: UserModule = ({ app }) => {
   app.component('AutoComplete', AutoComplete)
   app.component('CascadeSelect', CascadeSelect)
   app.component('Checkbox', Checkbox)
+  app.component('Chip', Chip)
   app.component('ColorPicker', ColorPicker)
   app.component('DatePicker', DatePicker)
   app.component('Editor', Editor)

dev/pages/outputs/OutputList.vue

@@ -25,8 +25,8 @@ const schema
     {
       $formkit: 'primeOutputList',
       name: 'list2',
-      label: 'Use Chips from PrimeVue',
-      itemClass: 'p-chip',
+      label: 'Use Chip Item Class',
+      itemClass: 'p-chip-item',
       divider: ' ',
     },
 

src/sass/formkit-primevue.scss

@@ -147,10 +147,20 @@ $grid-breakpoints: (
     .p-button {
       margin-right: 0.5rem;
     }
-    span.p-space {
-      margin-right: 3rem;
+    span {
+      .p-space {
+        margin-right: 3rem;
+      }
     }
   }
+
+  .p-chip-item {
+    align-items: center;
+    background: var(--p-surface-500);
+    color: var(--p-surface-0);
+    border-radius: 1rem;
+    padding: 0.2rem 0.5rem;
+  }
 }
 
 // Debug