Update docs to meet the latest updates

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

Author: kiranparajuli589

eslint.config.js

@@ -56,7 +56,7 @@ export default [
       "vue/max-attributes-per-line": [
         "error",
         {
-          singleline: 3,
+          singleline: 4,
           multiline: 2,
         },
       ],

package.json

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

pnpm-lock.yaml

@@ -49,7 +49,10 @@ const classesDict = computed(() => {
           <th
             v-for="column in columns"
             :key="column.field"
-            :style="{ textAlign: column.align ?? 'start' }"
+            :style="{
+              textAlign: column.align ?? 'start',
+              width: column.width ?? 'auto',
+            }"
             :class="classesDict.th"
           >
             {{ column.header }}

src/components/core/simpleTable/SimpleTable.vue

@@ -3,6 +3,8 @@ interface IColumn {
   field: string;
   code?: boolean;
   align?: "start" | "justify" | "end" | "center";
+  default?: string | boolean;
+  width?: number;
 }
 interface IRow {
   [key: string]: string | boolean;

src/components/core/simpleTable/types.ts

@@ -1,15 +1,8 @@
 <template>
   <form class="border border-gray-500 rounded-md p-4" @submit="(e) => {}">
-    <FormInput
-      :formik="formik"
-      name="name"
-      label="Name:"
-      type="text"
-      placeholder="Enter your name"
-    />
+    <FormInput name="name" label="Name:" type="text" placeholder="Enter your name" />
 
     <FormInput
-      :formik="formik"
       name="email"
       label="Email Address:"
       type="email"
@@ -21,13 +14,11 @@
       <div class="flex flex-col gap-2">
         <div v-for="(_, index) in formik.values.contacts" :key="index" class="flex gap-4">
           <FormInput
-            :formik="formik"
             :name="`contacts[${index}].code`"
             type="tel"
             :placeholder="`Enter contact number ${index + 1}`"
           />
           <FormInput
-            :formik="formik"
             :name="`contacts[${index}].number`"
             type="tel"
             :placeholder="`Enter contact number ${index + 1}`"
@@ -68,20 +59,13 @@
     </div>
 
     <FormSelectField
-      :formik="formik"
       name="sex"
       label="Sex:"
       :options="sexOptions"
       placeholder="Select your gender"
     />
 
-    <FormTextArea
-      :formik="formik"
-      name="message"
-      label="Message:"
-      placeholder="Enter your message"
-      rows="4"
-    />
+    <FormTextArea name="message" label="Message:" placeholder="Enter your message" rows="4" />
 
     <!-- addresses -->
     <div class="addresses flex flex-col gap-2">
@@ -92,7 +76,6 @@
         class="flex items-start gap-4"
       >
         <FormInput
-          :formik="formik"
           :name="`addresses[${index}]`"
           type="text"
           :placeholder="`Enter address line ${index + 1}`"
@@ -154,6 +137,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { FormInput, FormSelectField, FormTextArea } from "vue-formik";
 import useFormikForm from "@/composables/formik.ts";
+import { provide } from "vue";
 
 const props = defineProps<{
   validationSchema: any;
@@ -167,4 +151,6 @@ const sexOptions = [
 ];
 
 const { formik } = useFormikForm(props.validationSchema);
+
+provide("formik", formik);
 </script>

src/components/home/ExpoForm.vue

@@ -50,3 +50,26 @@ const formik = useFormik({
 });
 </script>
 `;
+
+export const ExampleWithProvideInject = `
+<template>
+  <FormikForm>
+    <FormInput name="name" label="Name" />
+  </FormikForm>
+</template>
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useFormik, FormInput, FormikForm } from "vue-formik";
+
+const formik = useFormik({
+  initialValues: {
+    name: "",
+  },
+  onSubmit: (values) => {
+    console.log(values);
+  },
+});
+
+provide("formik", formik);
+</script>
+`;

src/constants/examples/whyComponents.ts

@@ -1,49 +1,20 @@
 import type { IColumn, IRow } from "@/components/core/simpleTable/types";
+import { CommonBooleanProps, CommonProps } from "@/constants/propsVFormik/propsCommon.ts";
 
 export const FormContentEditablePropsCols = [
   { header: "Name", field: "name" },
-  { header: "Type", field: "type", code: true },
+  { header: "Type", field: "type", code: true, width: "150px" },
+  { header: "Required", field: "required", default: false },
   { header: "Description", field: "description" },
 ] as IColumn[];
 
 export const FormContentEditableProps = [
-  {
-    name: "formik",
-    type: "object",
-    description:
-      "The Formik instance, which provides methods for managing form state, including validation and field value handling.",
-  },
-  {
-    name: "name",
-    type: "string",
-    description: "The name of the form field, used to identify the field in the Formik instance.",
-  },
-  {
-    name: "label",
-    type: "string",
-    description:
-      "An optional label for the input field. If provided, it is displayed as a field label.",
-  },
-  {
-    name: "placeholder",
-    type: "string",
-    description:
-      "An optional placeholder for the input field. It is displayed inside the input when no value is present.",
-  },
+  ...CommonProps,
+  ...CommonBooleanProps,
   {
     name: "contentProps",
     type: "object",
     description:
-      "Additional props to pass to the contenteditable element, such as attributes like 'contenteditable' or custom data attributes.",
-  },
-  {
-    name: "disabled",
-    type: "boolean",
-    description: "Determines if the input field is disabled. Defaults to false.",
-  },
-  {
-    name: "readonly",
-    type: "boolean",
-    description: "Determines if the input field is read-only. Defaults to false.",
+      "Additional props to pass to the contenteditable element, such as attributes like custom data attributes.",
   },
 ] as IRow[];

src/constants/propsVFormik/formContentEditable.ts

@@ -1,55 +1,31 @@
 import type { IColumn, IRow } from "@/components/core/simpleTable/types.ts";
+import { CommonBooleanProps, CommonProps } from "@/constants/propsVFormik/propsCommon.ts";
 
 export const FormInputPropsCols = [
   { header: "Name", field: "name" },
-  { header: "Type", field: "type", code: true },
+  { header: "Type", field: "type", code: true, width: "100px" },
+  { header: "Required", field: "required", default: false },
   { header: "Description", field: "description" },
 ] as IColumn[];
 export const FormInputProps = [
-  {
-    name: "formik",
-    type: "object",
-    description:
-      "The Formik instance, which provides methods for managing form state, including validation and field value handling.",
-  },
-  {
-    name: "name",
-    type: "string",
-    description: "The name of the form field, used to identify the field in the Formik instance.",
-  },
-  {
-    name: "label",
-    type: "string",
-    description:
-      "An optional label for the input field. If provided, it is displayed as a field label.",
-  },
+  ...CommonProps,
   {
     name: "type",
     type: "string",
     description:
       "The type of the input field (e.g., 'text', 'password', 'email'). Defaults to 'text' if not provided.",
   },
-  {
-    name: "placeholder",
-    type: "string",
-    description:
-      "An optional placeholder for the input field. It is displayed inside the input when no value is present.",
-  },
   {
     name: "readonly",
     type: "boolean",
     description: "Determines if the input field is read-only. Defaults to false.",
   },
-  {
-    name: "disabled",
-    type: "boolean",
-    description: "Determines if the input field is disabled. Defaults to false.",
-  },
+  ...CommonBooleanProps,
   {
     name: "inputProps",
     type: "object",
     description:
-      "Additional props to pass to the input field, such as attributes like 'required' or custom data attributes.",
+      "Additional props to pass to the input field, such as attributes like 'min', 'max', 'step', etc.",
   },
 ] as IRow[];
 

src/constants/propsVFormik/formInput.ts

@@ -1,50 +1,26 @@
 import type { IColumn, IRow } from "@/components/core/simpleTable/types.ts";
+import { CommonBooleanProps, CommonProps } from "@/constants/propsVFormik/propsCommon.ts";
 
 export const FormSelectPropsCols = [
   { header: "Name", field: "name" },
-  { header: "Type", field: "type", code: true },
+  { header: "Type", field: "type", code: true, width: "150px" },
+  { header: "Required", field: "required", default: false },
   { header: "Description", field: "description" },
 ] as IColumn[];
 
 export const FormSelectProps = [
-  {
-    name: "formik",
-    type: "object",
-    description:
-      "The Formik instance, which provides methods for managing form state, including validation and field value handling.",
-  },
-  {
-    name: "name",
-    type: "string",
-    description: "The name of the form field, used to identify the field in the Formik instance.",
-  },
-  {
-    name: "label",
-    type: "string",
-    description:
-      "An optional label for the input field. If provided, it is displayed as a field label.",
-  },
+  ...CommonProps,
   {
     name: "options",
     type: "Array<{ label: string; value: string | number }>",
     description:
       "An array of objects representing the selectable options. Each object should have a 'label' and 'value' property.",
   },
-  {
-    name: "placeholder",
-    type: "string",
-    description:
-      "An optional placeholder for the input field. It is displayed inside the input when no value is present.",
-  },
-  {
-    name: "disabled",
-    type: "boolean",
-    description: "Determines if the input field is disabled. Defaults to false.",
-  },
+  ...CommonBooleanProps,
   {
     name: "inputProps",
     type: "object",
     description:
-      "Additional props to pass to the input field, such as attributes like 'required' or custom data attributes.",
+      "Additional props to pass to the input field, such as attributes like data attributes, etc.",
   },
 ] as IRow[];