Update docs to meet the latest updates

Signed-off-by: Kiran Parajuli <[email protected]>

Author: kiranparajuli589

package.json

@@ -18,7 +18,7 @@
     "highlight.js": "^11.11.1",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
-    "vue-formik": "^0.1.34",
+    "vue-formik": "^0.1.38",
     "vue-router": "^4.5.0",
     "yup": "^1.6.1"
   },

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 button {
-  @apply px-4 py-2;
+  @apply px-4 py-2 select-none;
 }
 
 button,

src/assets/styles/components/_button.scss

@@ -13,7 +13,7 @@
       <div>Contacts</div>
       <ol class="flex flex-col gap-2 list-decimal list-inside">
         <li v-for="(_, index) in formik.values.contacts" :key="index" class="flex gap-4">
-          <span> {{ index + 1 }}. </span>
+          <span> {{ index + 1 }}.</span>
           <FormInput
             :name="`contacts[${index}].code`"
             type="tel"
@@ -88,9 +88,19 @@
 
     <br />
 
-    <button type="submit" class="primary-btn w-fit" :disabled="!formik.isValid.value">
-      Submit
-    </button>
+    <div class="flex items-center gap-2">
+      <button type="submit" class="primary-btn w-fit" :disabled="!formik.isValid.value">
+        Submit
+      </button>
+      <button
+        type="reset"
+        class="secondary-btn ml-4 w-fit"
+        :disabled="!formik.isDirty.value"
+        @click="() => formik.reset({ keepTouched: false })"
+      >
+        Reset
+      </button>
+    </div>
   </FormikForm>
   <div class="overflow-auto border border-gray-500 p-4 rounded-md h-full text-sm">
     <pre><code>{{JSON.stringify({
@@ -130,22 +140,20 @@ const sexOptions = [
 ];
 
 const opts = computed(() => ({
+  initialValues: InitialValues,
   validationSchema: props.value === DemoTabValues.CUSTOM ? props.validationSchema : undefined,
   yupSchema: props.value === DemoTabValues.YUP ? props.validationSchema : undefined,
   validateOnMount: props.validateOnMount,
+  onSubmit: (values: any, helpers: any) => {
+    if (confirm(JSON.stringify(values, null, 2))) {
+      console.log("Submitted", values);
+      helpers.reset();
+    }
+  },
 }));
 
-const formik = computed(() =>
-  useFormik({
-    initialValues: InitialValues,
-    ...opts.value,
-    onSubmit: (values: any) => {
-      console.log("Submitted:", values);
-    },
-  }),
-);
-
-const fieldArray = computed(() => useFieldArray(formik.value));
+const formik = useFormik(opts.value);
+const fieldArray = useFieldArray(formik);
 
-provide("formik", formik.value);
+provide("formik", formik);
 </script>

src/components/home/ExpoForm.vue

@@ -40,10 +40,10 @@ export const ValidationSchema = {
 
     const errs = [];
     for (let i = 0; i < value.length; i++) {
-      const err = {
-        code: "",
-        number: "",
-      };
+      const err: {
+        code?: string;
+        number?: string;
+      } = {};
 
       if (!value[i].code) {
         err.code = "Code is required";
@@ -58,7 +58,9 @@ export const ValidationSchema = {
         err.number = "Invalid phone number. Must be 10 digits";
       }
 
-      errs[i] = err;
+      if (err.code || err.number) {
+        errs[i] = err;
+      }
     }
 
     return errs.length ? errs : undefined;
@@ -67,7 +69,6 @@ export const ValidationSchema = {
     if (value.length === 0) {
       return "Address is required";
     }
-    console.log(value);
 
     const errs = [];
     for (let i = 0; i < value.length; i++) {

src/constants/demo.ts

@@ -3,30 +3,32 @@
     <h2 class="!text-xl !pb-1">Simple form validation with Vue Formik</h2>
     <hr class="mb-6" />
 
-    <div class="mb-4 border-b">
+    <div class="mb-4 border-b flex gap-4 items-center">
       <button
         v-for="tabItem in DemoTabs"
         :key="tabItem.value"
-        :class="{ 'bg-gray-800 text-white': tab === tabItem.value }"
-        class="py-2 px-4 mr-2 last:mr-0"
+        :class="{
+          'py-2 px-4 rounded-t-md rounded-b-none': true,
+          'bg-gray-800 text-white': tab === tabItem.value,
+        }"
         @click="() => (tab = tabItem.value)"
       >
         {{ tabItem.name }}
       </button>
 
       <label for="validateOnMount">
-        <input id="validateOnMount" v-model="validateOnMount" type="checkbox" class="ml-4" />
-        <span class="ml-2">Validate on mount</span>
+        <input id="validateOnMount" :checked="validateOnMount" type="checkbox" disabled />
+        <span class="text-sm ml-2">Validate on mount</span>
       </label>
     </div>
 
     <div class="pg-view__content">
       <template v-for="tabItem in DemoTabs" :key="tabItem.value">
         <ExpoForm
-          v-if="tab === tabItem.value"
-          :validation-schema="tabItem.schema"
-          :value="tab"
+          v-if="activeTab?.value === tabItem.value"
           :validate-on-mount="validateOnMount"
+          :validation-schema="tabItem.schema"
+          :value="tabItem.value"
         />
       </template>
 
@@ -49,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref } from "vue";
+import { computed, onBeforeMount, ref } from "vue";
 import ValidationSchemaPreview from "@/components/home/ValidationSchemaPreview.vue";
 import ExpoForm from "@/components/home/ExpoForm.vue";
 import { DemoTabs } from "@/constants/demo.ts";
@@ -60,5 +62,6 @@ onBeforeMount(() => {
 });
 
 const tab = ref(1);
-const validateOnMount = ref(false);
+const activeTab = computed(() => DemoTabs.find((t) => t.value === tab.value));
+const validateOnMount = ref(true);
 </script>

src/views/DemoView.vue

@@ -39,16 +39,8 @@ const { push, pop } = useFieldArray(formik);`;
       <blockquote>
         <p class="font-semibold">Note: <code>formik</code> parameter</p>
         <p>
-          The composable reads formik from parameters or using injections. If you are using the
-          composable inside a component that is wrapped with the
-          <code>withFormik</code> HOC, you don't need to pass the formik object as an argument.
-        </p>
-
-        <p>
-          If you are using the composable outside of a component, you need to pass the formik object
-          as an argument to the composable. The composable will automatically detect the formik
-          object if it is available in the component's context. If both the formik object parameter
-          and the argument in injection are provided, the fn parameter will take precedence.
+          The <code>formik</code> parameter is the object returned by the
+          <code>useFormik</code> composable.
         </p>
       </blockquote>
     </section>