feat(components): FormKitDataEdit / FormKitDataView - Add optional v-model for form data

Author: sfxcode

dev/pages/data/Edit.vue

@@ -90,7 +90,7 @@ const schema = reactive(
   ],
 )
 
-const data = ref({ name: 'Tom', date: new Date(), number: 2222.33, text1: 'Ein Text', text2: 'Lorem Ipsum' })
+const data = ref({ date: new Date(), text: 'Lorem Ipsum' })
 
 const { showSuccessMessage } = useMessages()
 async function submitHandler() {
@@ -111,7 +111,7 @@ async function submitHandler() {
       <Checkbox v-if="horizontal" v-model="indentCheckboxes" binary />
     </div>
     <FormKitDataEdit
-      :data="data"
+      v-model="data"
       :schema="schema"
       :submit-label="t('save')"
       :form-class="(horizontal ? ' form-horizontal' : '') + (indentCheckboxes ? ' form-horizontal-checkbox-indent ' : '')"

dev/pages/data/View.vue

@@ -41,13 +41,21 @@ const outputSchema = ref(
   ],
 )
 const data = ref({ name: 'Tom', date: new Date(), number: 2222.33, text1: 'Ein Text', text2: 'Lorem Ipsum' })
+
+function updateData() {
+  if (data.value.name === 'Tom')
+    data.value = { name: 'Tim', date: new Date(), number: 42, text1: 'Some Text', text2: 'Lorem Ipsum' }
+  else
+    data.value = { name: 'Tom', date: new Date(), number: 2222.33, text1: 'Hello', text2: 'World' }
+}
 </script>
 
 <template>
   <PrimeData header="FormKitDataView Demo">
+    <Button label="changeData (using v-model)" size="small" class="mb-4" @click="updateData" />
     <div class="flex gap-2 mb-4">
       Horizontal  <ToggleSwitch v-model="horizontal" />
     </div>
-    <FormKitDataView :data="data" :schema="outputSchema" :debug-mode="true" :form-class="horizontal ? 'form-horizontal' : ''" />
+    <FormKitDataView v-model="data" :schema="outputSchema" :debug-mode="true" :form-class="horizontal ? 'form-horizontal' : ''" />
   </PrimeData>
 </template>

src/components/FormKitDataEdit.vue

@@ -4,6 +4,7 @@ import type { PropType } from 'vue'
 import { reset } from '@formkit/core'
 import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
 import { ref } from 'vue'
+
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({
@@ -72,14 +73,18 @@ const props = defineProps({
     default: false,
   },
 })
-
 const emit = defineEmits(['dataSaved'])
 
+const formData = defineModel()
+
+if (props.data) {
+  formData.value = props.data
+}
+
 const formSchema = ref(props.schema)
-const formData = ref(props.data)
 
 function handleSave() {
-  emit('dataSaved', props.data)
+  emit('dataSaved', formSchema.value)
 }
 
 function handleReset() {

src/components/FormKitDataView.vue

@@ -2,7 +2,6 @@
 import type { FormKitSchemaDefinition } from '@formkit/core'
 import type { PropType } from 'vue'
 import { FormKit, FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({
@@ -28,8 +27,11 @@ const props = defineProps({
   },
 })
 
-const formSchema = ref(props.schema)
-const formData = ref(props.data)
+const formData = defineModel()
+
+if (props.data) {
+  formData.value = props.data
+}
 </script>
 
 <template>
@@ -40,11 +42,11 @@ const formData = ref(props.data)
       :form-class="formClass"
       :actions="false"
     >
-      <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
+      <FormKitSchema v-if="schema" :schema="schema" :data="formData" />
       <slot />
     </FormKit>
     <FormKitDebug v-if="debugData" :data="formData" header="Data" />
-    <FormKitDebug v-if="debugSchema" :data="formSchema as object" header="Schema" />
+    <FormKitDebug v-if="debugSchema" :data="schema as object" header="Schema" />
   </div>
 </template>