Skip to content

Commit 4c3764d

Browse files
kiranparajuli589kiranparajuli589
authored
Add docs for FormInput (#7)
Signed-off-by: Kiran Parajuli <[email protected]>
1 parent 6e2b6c1 commit 4c3764d

File tree

18 files changed

+527
-219
lines changed

18 files changed

+527
-219
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"highlight.js": "^11.11.1",
1919
"pinia": "^2.3.0",
2020
"vue": "^3.5.13",
21-
"vue-formik": "^0.1.23",
21+
"vue-formik": "^0.1.24",
2222
"vue-router": "^4.5.0",
2323
"yup": "^1.6.1"
2424
},

‎pnpm-lock.yaml

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ const appBarHeight = computed(() => {
9393
.app_main
9494
@apply flex flex-col
9595
@apply max-w-[1610px]
96+
&:not(.with_sidebar)
97+
@apply mx-auto
9698
&.with_sidebar
9799
@media (min-width: 1400px)
98100
padding-left: 466px !important

‎src/assets/styles/components/_simpleTable.sass

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
table.vf-table
22
border-collapse: collapse
33
width: 100%
4-
margin-bottom: 1.5rem
54

65
thead
76
th

‎src/assets/styles/pages/_infoPage.sass

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
.info_page
22
@apply px-8 pt-8 pb-48
3-
section
3+
section:not(.vf-table-root)
44
@apply mb-10
5+
section.vf-table-root
6+
@apply mb-8
57
h1
68
@apply text-3xl font-medium text-start mb-6
79
h2
@@ -20,12 +22,16 @@
2022
@apply p-4 rounded-lg text-xs
2123

2224
blockquote
23-
@apply p-2 border-l-4 rounded-r-lg border-primary
25+
@apply p-4 border-l-4 rounded-r-lg border-primary
2426
@apply bg-gray-800 text-gray-200
27+
28+
blockquote
29+
li
30+
@apply mb-1 ml-1
31+
32+
article
2533
li
26-
@apply mb-1
27-
ol, ul
28-
@apply ml-2
34+
@apply mb-2 ml-0
2935

3036

3137
article
@@ -34,7 +40,8 @@
3440
@apply rounded-lg break-all
3541

3642
p, blockquote, ol, ul, h1, h2, h3, h4, h5, article
37-
@apply mb-4
43+
&:not(:last-child)
44+
@apply mb-4
3845
code
3946
@apply bg-gray-800 text-gray-200 p-1 rounded-lg
4047
@apply border border-gray-600

‎src/components/TheSidebar.vue

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<aside class="the-sidebar">
33
<ul class="flex flex-col gap-2">
4-
<template v-for="(item, index) in navItems" :key="index">
4+
<template v-for="(item, index) in TheSidebarItems" :key="index">
55
<li>
66
<p>
77
{{ item.name }}
@@ -22,33 +22,11 @@
2222
</template>
2323

2424
<script setup lang="ts">
25+
import TheSidebarItems from "@/constants/theSidebarItems.ts";
26+
2527
defineProps<{
2628
toggleSidebar: () => void;
2729
}>();
28-
29-
const navItems = [
30-
{
31-
name: "Getting Started",
32-
children: [
33-
{ name: "Introduction", path: "/getting-started/introduction" },
34-
{ name: "Quick Start", path: "/getting-started/quick-start" },
35-
],
36-
},
37-
{
38-
name: "Composable",
39-
children: [{ name: "useFormik", path: "/docs/composable/use-formik" }],
40-
},
41-
{
42-
name: "Components",
43-
children: [
44-
{ name: "Why Components?", path: "/docs/components/why" },
45-
{ name: "Input Field", path: "/docs/components/input-field" },
46-
{ name: "Select Field", path: "/docs/components/select-field" },
47-
{ name: "Textarea Field", path: "/docs/components/textarea-field" },
48-
{ name: "Content Editable", path: "/docs/components/contenteditable-field" },
49-
],
50-
},
51-
];
5230
</script>
5331

5432
<style lang="sass">

‎src/constants/examples/whyComponents.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
export const ExampleWithoutComponents = `
2+
<template>
3+
<form @submit="formik.handleSubmit">
4+
<label for="name">
5+
Name
6+
<input
7+
id="name"
8+
name="name"
9+
:value="formik.values.name"
10+
@input="formik.handleFieldChange"
11+
@blur="formik.handleFieldBlur"
12+
/>
13+
14+
<p v-if="formik.hasFieldError('name')">
15+
{{ formik.getFieldError('name') }}
16+
</p>
17+
</label>
18+
</form>
19+
</template>
20+
<script setup lang="ts">
21+
import { useFormik } from "vue-formik";
22+
23+
const formik = useFormik({
24+
initialValues: {
25+
name: "",
26+
},
27+
onSubmit: (values) => {
28+
console.log(values);
29+
},
30+
});
31+
</script>
32+
`;
33+
34+
export const ExampleWithComponents = `
35+
<template>
36+
<FormikForm :formik="formik">
37+
<FormInput name="name" label="Name" :formik="formik" />
38+
</FormikForm>
39+
</template>
40+
<script setup lang="ts">
41+
import { useFormik, FormInput, FormikForm } from "vue-formik";
42+
43+
const formik = useFormik({
44+
initialValues: {
45+
name: "",
46+
},
47+
onSubmit: (values) => {
48+
console.log(values);
49+
},
50+
});
51+
</script>
52+
`;

‎src/constants/propsVFormik/formInput.ts

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import type { IColumn, IRow } from "@/components/core/simpleTable/types.ts";
2+
3+
export const FormInputPropsCols = [
4+
{ header: "Name", field: "name" },
5+
{ header: "Type", field: "type", code: true },
6+
{ header: "Description", field: "description" },
7+
] as IColumn[];
8+
export const FormInputProps = [
9+
{
10+
name: "formik",
11+
type: "object",
12+
description:
13+
"The Formik instance, which provides methods for managing form state, including validation and field value handling.",
14+
},
15+
{
16+
name: "name",
17+
type: "string",
18+
description: "The name of the form field, used to identify the field in the Formik instance.",
19+
},
20+
{
21+
name: "label",
22+
type: "string",
23+
description:
24+
"An optional label for the input field. If provided, it is displayed as a field label.",
25+
},
26+
{
27+
name: "type",
28+
type: "string",
29+
description:
30+
"The type of the input field (e.g., 'text', 'password', 'email'). Defaults to 'text' if not provided.",
31+
},
32+
{
33+
name: "placeholder",
34+
type: "string",
35+
description:
36+
"An optional placeholder for the input field. It is displayed inside the input when no value is present.",
37+
},
38+
{
39+
name: "readonly",
40+
type: "boolean",
41+
description: "Determines if the input field is read-only. Defaults to false.",
42+
},
43+
{
44+
name: "disabled",
45+
type: "boolean",
46+
description: "Determines if the input field is disabled. Defaults to false.",
47+
},
48+
{
49+
name: "inputProps",
50+
type: "object",
51+
description:
52+
"Additional props to pass to the input field, such as attributes like 'required' or custom data attributes.",
53+
},
54+
] as IRow[];
55+
56+
export const FormInputSlotCols = [
57+
{ header: "Name", field: "name" },
58+
{ header: "Description", field: "description" },
59+
] as IColumn[];
60+
export const FormInputSlots = [
61+
{
62+
name: "default",
63+
description:
64+
"Slot for rendering additional content or components inside the input container, below the input field.",
65+
},
66+
{
67+
name: "prepend",
68+
description:
69+
"Slot for rendering content or components before the input field, such as an icon or label.",
70+
},
71+
{
72+
name: "append",
73+
description:
74+
"Slot for rendering content or components after the input field, such as an action button or icon.",
75+
},
76+
] as IRow[];
77+
export const FormInputSketch = `
78+
+-------------------------------------------------------+
79+
| <div class="vf-field"> |
80+
| [LABEL] |
81+
| |
82+
| <div class="vf-input"> |
83+
| [PREPEND SLOT] |
84+
| |
85+
| [INPUT TAG] |
86+
| |
87+
| [APPEND SLOT] |
88+
| </div> |
89+
| |
90+
| [ERROR MESSAGE] |
91+
| |
92+
| [DEFAULT SLOT] |
93+
| </div> |
94+
+-------------------------------------------------------+
95+
`;

‎src/constants/theSidebarItems.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export default [
2+
{
3+
name: "Getting Started",
4+
children: [
5+
{ name: "Introduction", path: "/getting-started/introduction" },
6+
{ name: "Quick Start", path: "/getting-started/quick-start" },
7+
],
8+
},
9+
{
10+
name: "Composable",
11+
children: [{ name: "useFormik", path: "/docs/composable/use-formik" }],
12+
},
13+
{
14+
name: "Components",
15+
children: [
16+
{ name: "Why Components?", path: "/docs/components/why" },
17+
{ name: "FormInput", path: "/docs/components/input-field" },
18+
{ name: "FormSelect", path: "/docs/components/select-field" },
19+
{ name: "FormTextarea", path: "/docs/components/textarea-field" },
20+
{ name: "FormContentEditable", path: "/docs/components/contenteditable-field" },
21+
],
22+
},
23+
];

0 commit comments

Comments
 (0)