Skip to content

Commit 4b600c5

Browse files
kiranparajuli589kiranparajuli589
authored
Component docs (#8)
Signed-off-by: Kiran Parajuli <[email protected]>
1 parent 4c3764d commit 4b600c5

19 files changed

+445
-161
lines changed

‎src/assets/pngs/form_content_editable_schema.png

600 KB
Loading

‎src/assets/pngs/form_input_schema.png

599 KB
Loading

‎src/assets/pngs/form_select_schema.png

599 KB
Loading

‎src/assets/pngs/form_textarea_schema.png

599 KB
Loading

‎src/constants/propsVFormik/formContentEditable.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import type { IColumn, IRow } from "@/components/core/simpleTable/types";
2+
3+
export const FormContentEditablePropsCols = [
4+
{ header: "Name", field: "name" },
5+
{ header: "Type", field: "type", code: true },
6+
{ header: "Description", field: "description" },
7+
] as IColumn[];
8+
9+
export const FormContentEditableProps = [
10+
{
11+
name: "formik",
12+
type: "object",
13+
description:
14+
"The Formik instance, which provides methods for managing form state, including validation and field value handling.",
15+
},
16+
{
17+
name: "name",
18+
type: "string",
19+
description: "The name of the form field, used to identify the field in the Formik instance.",
20+
},
21+
{
22+
name: "label",
23+
type: "string",
24+
description:
25+
"An optional label for the input field. If provided, it is displayed as a field label.",
26+
},
27+
{
28+
name: "placeholder",
29+
type: "string",
30+
description:
31+
"An optional placeholder for the input field. It is displayed inside the input when no value is present.",
32+
},
33+
{
34+
name: "contentProps",
35+
type: "object",
36+
description:
37+
"Additional props to pass to the contenteditable element, such as attributes like 'contenteditable' or custom data attributes.",
38+
},
39+
{
40+
name: "disabled",
41+
type: "boolean",
42+
description: "Determines if the input field is disabled. Defaults to false.",
43+
},
44+
{
45+
name: "readonly",
46+
type: "boolean",
47+
description: "Determines if the input field is read-only. Defaults to false.",
48+
},
49+
] as IRow[];

‎src/constants/propsVFormik/formInput.ts

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -74,22 +74,3 @@ export const FormInputSlots = [
7474
"Slot for rendering content or components after the input field, such as an action button or icon.",
7575
},
7676
] 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/propsVFormik/formSelect.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type { IColumn, IRow } from "@/components/core/simpleTable/types.ts";
2+
3+
export const FormSelectPropsCols = [
4+
{ header: "Name", field: "name" },
5+
{ header: "Type", field: "type", code: true },
6+
{ header: "Description", field: "description" },
7+
] as IColumn[];
8+
9+
export const FormSelectProps = [
10+
{
11+
name: "formik",
12+
type: "object",
13+
description:
14+
"The Formik instance, which provides methods for managing form state, including validation and field value handling.",
15+
},
16+
{
17+
name: "name",
18+
type: "string",
19+
description: "The name of the form field, used to identify the field in the Formik instance.",
20+
},
21+
{
22+
name: "label",
23+
type: "string",
24+
description:
25+
"An optional label for the input field. If provided, it is displayed as a field label.",
26+
},
27+
{
28+
name: "options",
29+
type: "Array<{ label: string; value: string | number }>",
30+
description:
31+
"An array of objects representing the selectable options. Each object should have a 'label' and 'value' property.",
32+
},
33+
{
34+
name: "placeholder",
35+
type: "string",
36+
description:
37+
"An optional placeholder for the input field. It is displayed inside the input when no value is present.",
38+
},
39+
{
40+
name: "disabled",
41+
type: "boolean",
42+
description: "Determines if the input field is disabled. Defaults to false.",
43+
},
44+
{
45+
name: "inputProps",
46+
type: "object",
47+
description:
48+
"Additional props to pass to the input field, such as attributes like 'required' or custom data attributes.",
49+
},
50+
] as IRow[];

‎src/constants/propsVFormik/formTextarea.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import type { IColumn, IRow } from "@/components/core/simpleTable/types.ts";
2+
3+
export const FormTextareaPropsCols = [
4+
{ header: "Name", field: "name" },
5+
{ header: "Type", field: "type", code: true },
6+
{ header: "Description", field: "description" },
7+
] as IColumn[];
8+
9+
export const FormTextareaProps = [
10+
{
11+
name: "formik",
12+
type: "object",
13+
description:
14+
"The Formik instance, which provides methods for managing form state, including validation and field value handling.",
15+
},
16+
{
17+
name: "name",
18+
type: "string",
19+
description: "The name of the form field, used to identify the field in the Formik instance.",
20+
},
21+
{
22+
name: "label",
23+
type: "string",
24+
description:
25+
"An optional label for the input field. If provided, it is displayed as a field label.",
26+
},
27+
{
28+
name: "placeholder",
29+
type: "string",
30+
description:
31+
"An optional placeholder for the input field. It is displayed inside the input when no value is present.",
32+
},
33+
{
34+
name: "rows",
35+
type: "number | string",
36+
description: "The number of rows to display in the textarea. Defaults to 3 if not provided.",
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[];

‎src/constants/theSidebarItems.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export default [
44
children: [
55
{ name: "Introduction", path: "/getting-started/introduction" },
66
{ name: "Quick Start", path: "/getting-started/quick-start" },
7+
{ name: "Quick Start", path: "/getting-started/why" },
78
],
89
},
910
{
@@ -14,10 +15,11 @@ export default [
1415
name: "Components",
1516
children: [
1617
{ 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" },
18+
{ name: "FormInput", path: "/docs/components/form-input" },
19+
{ name: "FormSelect", path: "/docs/components/form-select" },
20+
{ name: "FormTextarea", path: "/docs/components/form-textarea" },
21+
{ name: "FormContentEditable", path: "/docs/components/form-contenteditable" },
22+
{ name: "FormikForm", path: "/docs/components/formik-form" },
2123
],
2224
},
2325
];

‎src/router/index.ts

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,82 +5,72 @@ const router = createRouter({
55
routes: [
66
{
77
path: "/",
8-
name: "home",
98
component: () => import("@/views/HomeView.vue"),
109
meta: {
1110
footer: true,
1211
},
1312
},
1413
{
1514
path: "/playground",
16-
name: "playground",
1715
component: () => import("@/views/PlaygroundView.vue"),
1816
meta: {
1917
footer: true,
2018
},
2119
},
2220
{
2321
path: "/getting-started",
24-
name: "getting-started",
2522
meta: {
2623
sidebar: true,
2724
},
2825
children: [
2926
{
3027
path: "introduction",
31-
name: "getting-started-introduction",
3228
component: () => import("@/views/gettingStarted/IntroductionView.vue"),
3329
},
3430
{
3531
path: "quick-start",
36-
name: "getting-started-quick-start",
3732
component: () => import("@/views/gettingStarted/QuickStartView.vue"),
3833
},
3934
],
4035
},
4136
{
4237
path: "/docs",
43-
name: "docs",
4438
children: [
4539
{
4640
path: "composable",
47-
name: "composable",
4841
children: [
4942
{
5043
path: "use-formik",
51-
name: "use-formik",
5244
component: () => import("@/views/libDocs/composables/useFormik/UseFormikView.vue"),
5345
},
5446
],
5547
},
5648
{
5749
path: "components",
58-
name: "components",
5950
children: [
6051
{
6152
path: "why",
62-
name: "why",
6353
component: () => import("@/views/libDocs/components/WhyView.vue"),
6454
},
6555
{
66-
path: "input-field",
67-
name: "input-field",
68-
component: () => import("@/views/libDocs/components/InputFieldVue.vue"),
56+
path: "form-input",
57+
component: () => import("@/views/libDocs/components/FormInputView.vue"),
6958
},
7059
{
71-
path: "select-field",
72-
name: "select-field",
73-
component: () => import("@/views/libDocs/components/SelectFieldView.vue"),
60+
path: "form-select",
61+
component: () => import("@/views/libDocs/components/FormSelectView.vue"),
7462
},
7563
{
76-
path: "textarea-field",
77-
name: "textarea-field",
78-
component: () => import("@/views/libDocs/components/TextAreaField.vue"),
64+
path: "form-textarea",
65+
component: () => import("@/views/libDocs/components/FormTextareaView.vue"),
7966
},
8067
{
81-
path: "contenteditable-field",
82-
name: "contenteditable-field",
83-
component: () => import("@/views/libDocs/components/ContentEditableFieldView.vue"),
68+
path: "form-contenteditable",
69+
component: () => import("@/views/libDocs/components/FormContentEditableView.vue"),
70+
},
71+
{
72+
path: "formik-form",
73+
component: () => import("@/views/libDocs/components/FormikFormView.vue"),
8474
},
8575
],
8676
},

0 commit comments

Comments
 (0)