Merge pull request #283 from asigloo/feature/243-feature-ability-to-r…

…eset-form

Feature/243 feature ability to reset form

demos/vue-3/src/components/Console.vue

@@ -12,20 +12,22 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, watch } from 'vue'
 
 const props = {
-  content: String,
-};
+  content: Object,
+}
 
 export default defineComponent({
   name: 'console',
   props,
   setup(props) {
-    const jsonValues = computed(() => JSON.stringify(props.content));
+    const jsonValues = computed(() => JSON.stringify(props.content))
+
+    watch(props.content, () => {})
     return {
       jsonValues,
-    };
+    }
   },
-});
+})
 </script>

demos/vue-3/src/router/index.ts

@@ -1,5 +1,5 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import Home from '../views/Home.vue';
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Home from '../views/Home.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -114,11 +114,20 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "reset-after-submit" */ '../views/ResetAfterSubmit.vue'
       ),
   },
-];
+  {
+    path: '/reset-form',
+    name: 'Reset Form Manually',
+    meta: {
+      title: 'Reset Form Manually',
+    },
+    component: () =>
+      import(/* webpackChunkName: "reset-form" */ '../views/ResetForm.vue'),
+  },
+]
 
 const router = createRouter({
   history: createWebHistory(),
   routes,
-});
+})
 
-export default router;
+export default router

demos/vue-3/src/views/Basic.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-import { CheckboxField, TextField, SelectField } from '/@/';
-import { computed, defineComponent, reactive } from 'vue';
+import { CheckboxField, TextField, SelectField } from '/@/'
+import { computed, defineComponent, reactive } from 'vue'
 
 export default defineComponent({
   name: 'BasicDemo',
   setup() {
-    const formValues = reactive({});
+    const formValues = reactive({})
 
     const form = computed(() => ({
       id: 'basic-demo',
@@ -34,19 +34,19 @@ export default defineComponent({
           label: 'Remember Me',
         }),
       },
-    }));
+    }))
 
     function handleSubmit(values) {
-      console.log('Values Submitted', values);
+      console.log('Values Submitted', values)
     }
 
     function valueChanged(values) {
-      Object.assign(formValues, values);
-      console.log('Values', values);
+      Object.assign(formValues, values)
+      console.log('Values', values)
     }
 
     function handleError(errors) {
-      console.error('Errors', errors);
+      console.error('Errors', errors)
     }
 
     return {
@@ -55,9 +55,9 @@ export default defineComponent({
       handleSubmit,
       valueChanged,
       handleError,
-    };
+    }
   },
-});
+})
 </script>
 <template>
   <div class="page container">

demos/vue-3/src/views/Home.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref } from 'vue'
 
-const STAGGER_DELAY = 200;
+const STAGGER_DELAY = 200
 
 export default defineComponent({
   name: 'Home',
   setup() {
-    const demos = ref([]);
+    const demos = ref([])
     const colorsMap = ref({
       'text-field': 'yellow',
       'email-field': 'blue',
@@ -18,7 +18,7 @@ export default defineComponent({
       'custom-field': 'indigo',
       'radio-field': 'yellow',
       'checkbox-field': 'blue',
-    });
+    })
 
     setTimeout(() => {
       demos.value = [
@@ -84,26 +84,31 @@ export default defineComponent({
             route: '/reset-after-submit',
             tags: ['submit', 'reset-forms'],
           },
+          {
+            name: 'Reset form',
+            route: '/reset-form',
+            tags: ['reset-forms'],
+          },
         ],
-      ];
-    }, 1000);
+      ]
+    }, 1000)
 
     function beforeEnter(el) {
-      el.style.visibility = 'hidden';
+      el.style.visibility = 'hidden'
     }
     function enter(el) {
-      const delay = el.dataset.index * STAGGER_DELAY;
+      const delay = el.dataset.index * STAGGER_DELAY
       setTimeout(() => {
-        el.classList.add('animate__animated', 'animate__fadeIn');
-        el.style.visibility = 'visible';
-      }, delay);
+        el.classList.add('animate__animated', 'animate__fadeIn')
+        el.style.visibility = 'visible'
+      }, delay)
     }
     function leave(el) {
-      const delay = el.dataset.index * STAGGER_DELAY;
+      const delay = el.dataset.index * STAGGER_DELAY
       setTimeout(() => {
-        el.classList.add('animate__animated', 'animate__fadeOut');
-        el.style.visibility = 'hidden';
-      }, delay);
+        el.classList.add('animate__animated', 'animate__fadeOut')
+        el.style.visibility = 'hidden'
+      }, delay)
     }
 
     return {
@@ -112,9 +117,9 @@ export default defineComponent({
       enter,
       leave,
       colorsMap,
-    };
+    }
   },
-});
+})
 </script>
 
 <template>

demos/vue-3/src/views/ResetForm.vue

@@ -0,0 +1,135 @@
+<script lang="ts">
+import {
+  CheckboxField,
+  FormValidator,
+  Validator,
+  email,
+  pattern,
+  EmailField,
+  required,
+  PasswordField,
+} from '/@/'
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ResetFormDemo',
+  setup() {
+    const formValues = ref({})
+    const formRef = ref(null)
+
+    const emailValidator: FormValidator = Validator({
+      validator: email,
+      text: 'Email format is incorrect',
+    })
+
+    const passwordValidator: FormValidator = Validator({
+      validator: pattern(
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*)(?=.*[#$^+=!*()@%&]).{8,10}$',
+      ),
+      text: 'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
+    })
+
+    const form = computed(() => ({
+      id: 'basic-demo',
+      fields: {
+        email: EmailField({
+          label: 'Email',
+          validations: [
+            Validator({ validator: required, text: 'This field is required' }),
+            emailValidator,
+          ],
+        }),
+        password: PasswordField({
+          label: 'Password',
+          autocomplete: 'current-password',
+          validations: [
+            Validator({ validator: required, text: 'This field is required' }),
+            passwordValidator,
+          ],
+        }),
+        rememberMe: CheckboxField({
+          label: 'Remember Me',
+        }),
+      },
+    }))
+
+    function handleSubmit(values) {
+      console.log('Values Submitted', values)
+    }
+
+    function valueChanged(values) {
+      Object.assign(formValues.value, values)
+      console.log('Values', values)
+    }
+
+    function handleError(errors) {
+      console.error('Errors', errors)
+    }
+
+    function resetForm() {
+      formRef.value.resetForm()
+      formValues.value = {}
+    }
+
+    return {
+      form,
+      handleSubmit,
+      formValues,
+      valueChanged,
+      handleError,
+      formRef,
+      resetForm,
+    }
+  },
+})
+</script>
+<template>
+  <div class="page container">
+    <div class="mx-auto w-full sm:w-1/2 relative mb-24">
+      <div
+        class="
+          absolute
+          inset-0
+          bg-gradient-to-r
+          from-blue-400
+          to-green-200
+          shadow-xl
+          transform
+          -skew-y-3
+          sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl
+        "
+      ></div>
+      <div class="relative card p-6 bg-white">
+        <DynamicForm
+          ref="formRef"
+          :form="form"
+          @submitted="handleSubmit"
+          @change="valueChanged"
+          @error="handleError"
+        />
+        <button
+          data-cy="submit"
+          class="btn mr-4 bg-green-500 text-white hover:bg-green-700 mt-4"
+          submit="true"
+          :form="form?.id"
+        >
+          Try me
+        </button>
+
+        <button
+          class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
+          @click="resetForm"
+        >
+          Reset Me
+        </button>
+      </div>
+    </div>
+    <div class="mx-auto w-full sm:w-1/2">
+      <Console :content="formValues" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '/@/styles/themes/default.scss';
+</style>

docs/.vitepress/config.js

@@ -88,6 +88,10 @@ const config = {
               text: 'Slots',
               link: '/guide/advanced/slots',
             },
+            {
+              text: 'Reset Form',
+              link: '/guide/advanced/reset-form',
+            },
           ],
         },
       ],