Add docs about useFieldArray composable

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.30",
+    "vue-formik": "^0.1.34",
     "vue-router": "^4.5.0",
     "yup": "^1.6.1"
   },

pnpm-lock.yaml

@@ -13,6 +13,7 @@ defineProps<{
       <h1><router-link to="/" class="!no-underline">Vue Formik</router-link></h1>
       <div class="grow hidden sm:block" />
       <router-link class="hidden sm:block" to="/about">About</router-link>
+      <router-link class="hidden sm:block" to="/demo">Demo</router-link>
       <a class="hidden sm:block" href="https://github.com/vue-formik/vue-formik" target="_blank">
         ⭐ Star us on GitHub
       </a>

src/components/TheAppbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="border border-gray-500 rounded-md p-4" @submit="(e) => {}">
+  <FormikForm class="border border-gray-500 rounded-md p-4">
     <FormInput name="name" label="Name:" type="text" placeholder="Enter your name" />
 
     <FormInput
@@ -29,14 +29,7 @@
             class="secondary-outlined-btn size-11"
             title="Remove contact"
             :disabled="formik.values.contacts.length <= 1"
-            @click="
-              () => {
-                formik.setValues({
-                  ...formik.values,
-                  contacts: formik.values.contacts.filter((_, i) => i !== index),
-                });
-              }
-            "
+            @click="() => fieldArray.pop('contacts', index)"
           >
             x
           </button>
@@ -45,14 +38,7 @@
       <button
         type="button"
         class="secondary-outlined-btn mt-8 w-fit"
-        @click="
-          () => {
-            formik.setValues({
-              ...formik.values,
-              contacts: [...formik.values.contacts, { code: '', number: '' }],
-            });
-          }
-        "
+        @click="() => fieldArray.push('contacts', { code: '', number: '' })"
       >
         Add contact
       </button>
@@ -86,14 +72,7 @@
           class="secondary-outlined-btn size-11"
           title="Remove address"
           :disabled="formik.values.addresses.length <= 1"
-          @click="
-            () => {
-              formik.setValues({
-                ...formik.values,
-                addresses: formik.values.addresses.filter((_, i) => i !== index),
-              });
-            }
-          "
+          @click="() => fieldArray.pop('addresses', index)"
         >
           x
         </button>
@@ -103,14 +82,7 @@
       <button
         type="button"
         class="secondary-outlined-btn"
-        @click="
-          () => {
-            formik.setValues({
-              ...formik.values,
-              addresses: [...formik.values.addresses, ''],
-            });
-          }
-        "
+        @click="() => fieldArray.push('addresses', '')"
       >
         Add address
       </button>
@@ -121,7 +93,7 @@
     <button type="submit" class="primary-btn w-fit" :disabled="!formik.isValid.value">
       Submit
     </button>
-  </form>
+  </FormikForm>
   <div class="overflow-auto border border-gray-500 p-4 rounded-md h-full text-sm">
     <pre><code>{{JSON.stringify({
           values: formik.values,
@@ -135,12 +107,21 @@
 
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { FormInput, FormSelectField, FormTextArea } from "vue-formik";
-import useFormikForm from "@/composables/formik.ts";
-import { provide } from "vue";
+import {
+  FormInput,
+  FormSelectField,
+  FormTextArea,
+  useFormik,
+  FormikForm,
+  useFieldArray,
+} from "vue-formik";
+import { computed, provide } from "vue";
+import { DemoTabValues, InitialValues } from "@/constants/demo.ts";
 
 const props = defineProps<{
   validationSchema: any;
+  value: number;
+  validateOnMount: boolean;
 }>();
 
 const sexOptions = [
@@ -150,7 +131,23 @@ const sexOptions = [
   { label: "Prefer not to say", value: "N/A" },
 ];
 
-const { formik } = useFormikForm(props.validationSchema);
+const opts = computed(() => ({
+  validationSchema: props.value === DemoTabValues.CUSTOM ? props.validationSchema : undefined,
+  yupSchema: props.value === DemoTabValues.YUP ? props.validationSchema : undefined,
+  validateOnMount: props.validateOnMount,
+}));
 
-provide("formik", formik);
+const formik = computed(() =>
+  useFormik({
+    initialValues: InitialValues,
+    ...opts.value,
+    onSubmit: (values: any) => {
+      console.log("Submitted:", values);
+    },
+  }),
+);
+
+const fieldArray = computed(() => useFieldArray(formik.value));
+
+provide("formik", formik.value);
 </script>

src/components/home/ExpoForm.vue

@@ -1,11 +1,16 @@
 import * as Yup from "yup";
 
+export const DemoTabValues = {
+  CUSTOM: 1,
+  YUP: 0,
+};
+
 interface IContact {
   code: string;
   number: string;
 }
 
-const InitialValues = {
+export const InitialValues = {
   name: "",
   email: "",
   contacts: [{ code: "", number: "" }],
@@ -14,7 +19,7 @@ const InitialValues = {
   addresses: [""],
 };
 
-const ValidationSchema = {
+export const ValidationSchema = {
   name: (value: string) => {
     if (!value) {
       return "Name is required";
@@ -80,13 +85,12 @@ const ValidationSchema = {
         errs[i] = "Address must be at most 50 characters";
       }
     }
-    console.log(errs);
 
     return errs.length ? errs : undefined;
   },
 };
 
-const ValidationSchemaYup = Yup.object().shape({
+export const ValidationSchemaYup = Yup.object().shape({
   name: Yup.string().required("Name is required"),
   email: Yup.string().email("Invalid email").required("Email is required"),
   contacts: Yup.array()
@@ -117,4 +121,7 @@ const ValidationSchemaYup = Yup.object().shape({
     .default([""]), // Ensures addresses array is initialized
 });
 
-export { InitialValues, ValidationSchemaYup, ValidationSchema };
+export const DemoTabs = [
+  { name: "Custom", value: DemoTabValues.CUSTOM, schema: ValidationSchema },
+  { name: "Yup", value: DemoTabValues.YUP, schema: ValidationSchemaYup },
+];

src/composables/formik.ts

@@ -8,7 +8,10 @@ export default [
   },
   {
     name: "Composable",
-    children: [{ name: "useFormik", path: "/docs/composable/use-formik" }],
+    children: [
+      { name: "useFormik", path: "/docs/composable/use-formik" },
+      { name: "useFieldArray", path: "/docs/composable/use-field-array" },
+    ],
   },
   {
     name: "Components",

src/constants/homeFormik.ts renamed to src/constants/demo.ts

@@ -43,6 +43,10 @@ const router = createRouter({
               path: "use-formik",
               component: () => import("@/views/libDocs/composables/useFormik/UseFormikView.vue"),
             },
+            {
+              path: "use-field-array",
+              component: () => import("@/views/libDocs/composables/UseFieldArrayView.vue"),
+            },
           ],
         },
         {

src/constants/theSidebarItems.ts

@@ -5,24 +5,30 @@
 
     <div class="mb-4 border-b">
       <button
-        :class="{ 'bg-gray-800 text-white': tab === 1 }"
-        class="py-2 px-4 mr-2"
-        @click="() => (tab = 1)"
+        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"
+        @click="() => (tab = tabItem.value)"
       >
-        Custom
-      </button>
-      <button
-        :class="{ 'bg-gray-800 text-white': tab === 0 }"
-        class="py-2 px-4 mr-2"
-        @click="() => (tab = 0)"
-      >
-        Yup
+        {{ 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>
+      </label>
     </div>
 
     <div class="pg-view__content">
-      <ExpoForm v-if="tab === 1" :validation-schema="ValidationSchema" />
-      <ExpoForm v-else :validation-schema="ValidationSchemaYup" />
+      <template v-for="tabItem in DemoTabs" :key="tabItem.value">
+        <ExpoForm
+          v-if="tab === tabItem.value"
+          :validation-schema="tabItem.schema"
+          :value="tab"
+          :validate-on-mount="validateOnMount"
+        />
+      </template>
 
       <ValidationSchemaPreview />
     </div>
@@ -46,11 +52,12 @@
 import { onBeforeMount, ref } from "vue";
 import ValidationSchemaPreview from "@/components/home/ValidationSchemaPreview.vue";
 import ExpoForm from "@/components/home/ExpoForm.vue";
-import { ValidationSchema, ValidationSchemaYup } from "@/constants/homeFormik.ts";
+import { DemoTabs } from "@/constants/demo.ts";
 
 onBeforeMount(() => {
   document.title = "Home | Vue Formik";
 });
 
-const tab = ref<number>(1);
+const tab = ref(1);
+const validateOnMount = ref(false);
 </script>

src/router/index.ts

@@ -48,15 +48,17 @@
         </li>
         <li>
           You can create custom validation functions or integrate a library like
-          <a href="https://github.com/jquense/yup" target="_blank" title="Yup">Yup</a> for
-          schema-based validation.
+          <a href="https://github.com/jquense/yup" target="_blank" title="Yup" class="text-primary"
+            >Yup</a
+          >, <a href="https://joi.dev/" target="_blank" title="Joi" class="text-primary">Joi</a>, or
+          <a href="https://zod.dev/" target="_blank" title="Zod" class="text-primary">Zod</a>
+
+          for schema-based validation.
         </li>
 
         <li>
           Future plans include extending support to other popular validation libraries, such as
-          <a href="https://zod.dev/" target="_blank" title="Zod">Zod</a> and
-          <a href="https://joi.dev/" target="_blank" title="Joi">Joi</a>, ensuring maximum
-          flexibility and compatibility. 🌟
+          VeeValidate and Vuelidate, ensuring maximum flexibility and compatibility. 🌟
         </li>
       </ol>
     </blockquote>