feat(reset): Add reset to FormKitDataEdit component

Author: sfxcode

dev/pages/data/Edit.vue

@@ -6,6 +6,7 @@ const { addElement } = useFormKitSchema()
 const { t } = useI18n()
 const horizontal = ref(false)
 const indentCheckboxes = ref(false)
+const showReset = ref(false)
 
 const options = [
   { label: 'Every page load', value: 'refresh' },
@@ -100,12 +101,14 @@ async function submitHandler() {
 <template>
   <PrimeData header="FormKitDataEdit Demo">
     <div class="flex gap-2 mb-4">
+      <div>Show Reset Button</div>
+      <Checkbox v-model="showReset" binary />
       <div>Horizontal</div>
-      <ToggleSwitch v-model="horizontal" />
+      <Checkbox v-model="horizontal" binary />
       <div v-if="horizontal">
         Indent Checkboxes
       </div>
-      <ToggleSwitch v-if="horizontal" v-model="indentCheckboxes" />
+      <Checkbox v-if="horizontal" v-model="indentCheckboxes" binary />
     </div>
     <FormKitDataEdit
       :data="data"
@@ -114,6 +117,7 @@ async function submitHandler() {
       :form-class="(horizontal ? ' form-horizontal' : '') + (indentCheckboxes ? ' form-horizontal-checkbox-indent ' : '')"
       :debug-data="true"
       :debug-schema="true"
+      :show-reset="showReset"
       @data-saved="submitHandler"
     />
   </PrimeData>

src/components/FormKitDataEdit.vue

@@ -1,14 +1,15 @@
 <script setup lang='ts'>
 import type { FormKitSchemaDefinition } from '@formkit/core'
 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({
   id: {
     type: String,
-    default: 'form',
+    default: 'formkit_form',
   },
   data: {
     type: Object,
@@ -18,38 +19,58 @@ const props = defineProps({
     type: Object as PropType<FormKitSchemaDefinition>,
     default: null,
   },
-  debugData: {
-    type: Boolean,
-    default: false,
+  formClass: {
+    type: String,
+    default: '',
   },
-  debugSchema: {
-    type: Boolean,
-    default: false,
+  actionsClass: {
+    type: String,
+    default: '',
   },
-  inputClass: {
+  submitSeverity: {
     type: String,
-    default: 'p-button p-component p-formkit-button',
+    default: '',
+  },
+  submitClass: {
+    type: String,
+    default: '',
   },
   submitLabel: {
     type: String,
     default: 'Save',
   },
-  cancelLabel: {
+  submitIcon: {
     type: String,
-    default: 'Cancel',
+    default: '',
   },
-  formClass: {
+  showReset: {
+    type: Boolean,
+    default: false,
+  },
+  resetSeverity: {
     type: String,
-    default: '',
+    default: 'danger',
   },
-  actionsClass: {
+  resetLabel: {
+    type: String,
+    default: 'Reset',
+  },
+  resetClass: {
     type: String,
     default: '',
   },
-  buttonClass: {
+  resetIcon: {
     type: String,
     default: '',
   },
+  debugData: {
+    type: Boolean,
+    default: false,
+  },
+  debugSchema: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['dataSaved'])
@@ -60,6 +81,10 @@ const formData = ref(props.data)
 function handleSave() {
   emit('dataSaved', props.data)
 }
+
+function handleReset() {
+  reset(props.id)
+}
 </script>
 
 <template>
@@ -83,7 +108,8 @@ function handleSave() {
       </template>
       <template #submit>
         <slot name="submit">
-          <Button type="submit" :label="submitLabel" :class="buttonClass" @submit="handleSave" />
+          <Button :icon="submitIcon" type="submit" :label="submitLabel" :class="submitClass" :severity="submitSeverity" @submit="handleSave" />
+          <Button v-if="showReset" type="reset" :icon="resetIcon" :label="resetLabel" :class="resetClass" :severity="resetSeverity" @click="handleReset" />
         </slot>
       </template>
     </FormKit>

src/sass/formkit-primevue.scss

@@ -147,6 +147,11 @@ $grid-breakpoints: (
   // Submit button etc.
   .formkit-actions {
     padding-top: 0.5rem;
+    display: flex;
+    button {
+      margin-right: 0.5rem;
+    }
+
   }
 
   .p-action-buttons  {