feat(data): Add formClass to DataEdit and DataView - add demo for formkit class styling

Author: sfxcode

dev/components/demo/PrimeInput.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   data: object
   primeAttributes?: string
   customAttributes?: string
+  formClass?: string
 }>()
 
 const toast = useToast()
@@ -38,7 +39,7 @@ async function submitHandler() {
     <slot />
     <div class="flex flex-wrap gap-8">
       <div class="min-w-30rem basis-1/3 md:basis-1/4">
-        <FormKitDataEdit :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" @data-saved="submitHandler" />
+        <FormKitDataEdit :form-class="formClass" :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" form-class="data-edit" @data-saved="submitHandler" />
       </div>
       <div class="">
         <Tabs>

dev/pages/styling/Class.vue

@@ -0,0 +1,46 @@
+<script setup lang='ts'>
+const schema
+  = [
+    {
+      $formkit: 'primeInputText',
+      name: 'name',
+      label: 'Styling by class',
+      help: 'Required.',
+      validation: 'required',
+      outerClass: 'stylingOuterClass',
+    },
+    {
+      $formkit: 'primeInputText',
+      name: 'name2',
+      label: 'Styling by class',
+      help: 'Required.',
+      validation: 'required',
+      innerClass: 'stylingSampleClass',
+
+    },
+
+  ]
+
+const data = { name: 'Some Label in Green', name2: 'Some Text in Green' }
+</script>
+
+<template>
+  <div class="">
+    <PrimeInput
+      header="Styling" :schema="schema" form-class="grid grid-cols-2 gap-4" :data="data"
+    >
+      <div class="pb-8" />
+    </PrimeInput>
+  </div>
+</template>
+
+<style lang='scss'>
+  .stylingOuterClass {
+    color: yellowgreen;
+  }
+  .stylingSampleClass {
+    input {
+      color: green;
+  }
+}
+</style>

src/components/FormKitDataEdit.vue

@@ -23,6 +23,10 @@ const props = defineProps({
     type: String,
     default: 'Save',
   },
+  formClass: {
+    type: String,
+    default: '',
+  },
 })
 
 const emit = defineEmits(['dataSaved'])
@@ -40,11 +44,13 @@ function handleSave() {
     <FormKit
       id="form"
       v-model="formData"
+      :form-class="formClass"
       type="form"
       :submit-label="submitLabel"
       :submit-attrs="{
         inputClass: 'p-button p-component p-formkit-button',
       }"
+
       @submit="handleSave"
     >
       <FormKitSchema :schema="formSchema" :data="formData" />

src/components/FormKitDataView.vue

@@ -11,6 +11,10 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  formClass: {
+    type: String,
+    default: '',
+  },
   debugData: {
     type: Boolean,
     default: false,
@@ -30,6 +34,7 @@ const formData = ref(props.data)
     <FormKit
       v-model="formData"
       type="form"
+      :form-class="formClass"
       :submit-attrs="{
         style: 'display: none;',
       }"