feat: replace FormKit components with custom FormKitDataEdit and FormKitDataView

Author: sfxcode

dev/components/demo/PrimeInput.vue

@@ -1,8 +1,7 @@
 <script setup lang='ts'>
-import { FormKit, FormKitSchema } from '@formkit/vue'
 import JsonEditorVue from 'json-editor-vue'
+import { FormKitDataEdit } from 'my-library'
 import { ref } from 'vue'
-import FormKitDebug from '../../../src/components/FormKitDebug.vue'
 import { useMessages } from '../../composables/messages'
 
 const props = defineProps<{
@@ -36,21 +35,8 @@ async function submitHandler() {
     <slot />
     <div class="flex gap-8 flex-wrap">
       <div class="min-w-32rem basis-1/2 xl:basis-1/3">
-        <div class="p-formkit-data-edit">
-          <FormKit
-            id="form"
-            v-model="formData"
-            :form-class="formClass"
-            type="form"
-            submit-label="Save"
-            :submit-attrs="{
-              inputClass,
-            }"
-            @submit="submitHandler"
-          >
-            <FormKitSchema :schema="formSchema" :data="formData" />
-          </FormKit>
-          <FormKitDebug :data="formData" header="Data" />
+        <div>
+          <FormKitDataEdit :data="formData" :schema="formSchema" debug-data @data-saved="submitHandler" />
         </div>
       </div>
       <div class="basis-1/2 xl:basis-1/3">

dev/components/demo/PrimeOutput.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { FormKit, FormKitSchema } from '@formkit/vue'
 import JsonEditorVue from 'json-editor-vue'
+import { FormKitDataView } from 'my-library'
+
 import { ref } from 'vue'
-import FormKitDebug from '../../../src/components/FormKitDebug.vue'
 
 const props = defineProps<{
   header: string
@@ -24,15 +24,8 @@ const formData = ref(props.data)
     <slot />
     <div class="flex flex-wrap gap-8">
       <div class="min-w-30rem basis-1/3 md:basis-1/4">
-        <div class="p-formkit-data-view">
-          <FormKit
-            v-model="formData"
-            type="form"
-            :actions="false"
-          >
-            <FormKitSchema :schema="formSchema" :data="formData" />
-          </FormKit>
-          <FormKitDebug :data="formData" header="Data" />
+        <div>
+          <FormKitDataView :data="formData" :schema="formSchema" debug-data />
         </div>
       </div>
       <div class="">