Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit 9bc27f0

Browse files
alvarosabualvarosabu
committed
Inputs documentation
1 parent 8aac128 commit 9bc27f0

File tree

16 files changed

+386
-4
lines changed

16 files changed

+386
-4
lines changed

‎docs/.vuepress/components/FormComposition.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
@change="updateForm"
8+
/>
9+
</div>
10+
<div class="col">
11+
<pre>{{ formData }}</pre>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { DynamicForm, FormField } from '../../../dist/as-dynamic-forms.common';
18+
19+
export default {
20+
name: 'FormComposition',
21+
components: {
22+
DynamicForm,
23+
},
24+
data: () => ({
25+
formData: null,
26+
testForm: {
27+
id: 'test-form',
28+
fields: [
29+
new FormField({
30+
type: 'text',
31+
label: 'Name',
32+
name: 'name',
33+
}),
34+
new FormField({
35+
type: 'email',
36+
label: 'Email',
37+
name: 'email',
38+
}),
39+
],
40+
},
41+
}),
42+
methods: {
43+
updateForm(values) {
44+
this.formData = values;
45+
},
46+
},
47+
};
48+
</script>
49+
50+
<style lang="scss">
51+
@import '../styles/styles.scss';
52+
53+
.form-composition {
54+
display: flex;
55+
justify-content: space-between;
56+
}
57+
.col {
58+
width: 45%;
59+
}
60+
pre {
61+
color: white;
62+
font-size: 12px;
63+
}
64+
</style>

‎docs/.vuepress/components/InputEmail.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
@change="updateForm"
8+
/>
9+
</div>
10+
<div class="col">
11+
<pre>{{ formData }}</pre>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { DynamicForm, FormField } from '../../../dist/as-dynamic-forms.common';
18+
19+
export default {
20+
name: 'FormComposition',
21+
components: {
22+
DynamicForm,
23+
},
24+
data: () => ({
25+
formData: null,
26+
testForm: {
27+
id: 'test-form',
28+
fields: [
29+
new FormField({
30+
type: 'text',
31+
label: 'Email',
32+
name: 'email',
33+
}),
34+
],
35+
},
36+
}),
37+
methods: {
38+
updateForm(values) {
39+
this.formData = values;
40+
},
41+
},
42+
};
43+
</script>
44+
45+
<style lang="scss">
46+
@import '../styles/styles.scss';
47+
48+
.form-composition {
49+
display: flex;
50+
justify-content: space-between;
51+
}
52+
.col {
53+
width: 45%;
54+
}
55+
pre {
56+
color: white;
57+
font-size: 12px;
58+
}
59+
</style>

‎docs/.vuepress/components/InputText.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
@change="updateForm"
8+
/>
9+
</div>
10+
<div class="col">
11+
<pre>{{ formData }}</pre>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { DynamicForm, FormField } from '../../../dist/as-dynamic-forms.common';
18+
19+
export default {
20+
name: 'InputTextDemo',
21+
components: {
22+
DynamicForm,
23+
},
24+
data: () => ({
25+
formData: null,
26+
testForm: {
27+
id: 'test-form',
28+
fields: [
29+
new FormField({
30+
type: 'text',
31+
label: 'Username',
32+
name: 'username',
33+
}),
34+
],
35+
},
36+
}),
37+
methods: {
38+
updateForm(values) {
39+
this.formData = values;
40+
},
41+
},
42+
};
43+
</script>
44+
45+
<style lang="scss">
46+
@import '../styles/styles.scss';
47+
48+
.form-composition {
49+
display: flex;
50+
justify-content: space-between;
51+
}
52+
.col {
53+
width: 45%;
54+
}
55+
pre {
56+
color: white;
57+
font-size: 12px;
58+
}
59+
</style>

‎docs/.vuepress/config/themeConfig.js

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,40 @@
11
module.exports = {
2-
repo: '@asigloo/vue-dynamic-forms',
2+
repo: 'alvarosaburido/vue-dynamic-forms',
33
editLinks: true,
44
docsDir: 'docs',
55
nav: [{ text: 'Sandbox', link: '/sandbox' }],
66
sidebar: {
77
'/': [
88
{
99
title: 'Getting Started',
10-
collapsable: true,
10+
collapsable: false,
1111
children: [
1212
['guide/install', 'Installation'],
13+
['guide/usage', 'Usage'],
14+
],
15+
},
16+
{
17+
title: 'API',
18+
collapsable: false,
19+
children: [
20+
['guide/fields', 'fields'],
21+
['guide/events', 'events'],
22+
],
23+
},
24+
{
25+
title: 'Theme & Styling',
26+
collapsable: true,
27+
children: [['guide/theming', 'Theming']],
28+
},
29+
{
30+
title: 'Validation',
31+
},
32+
{
33+
title: 'Advanced',
34+
collapsable: true,
35+
children: [
36+
['guide/slots', 'Slots'],
37+
['guide/netlify-forms', 'Netlify Forms'],
1338
],
1439
},
1540
],

‎docs/.vuepress/data/features.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ export default [
1717
{
1818
title: 'Flexible 🤸',
1919
text:
20-
'You need a really custom input type that is not in the library? Create your own and attach it vía scoped slots',
20+
'This library is aimed to give an awesome developing experience, you need a really custom input type that is not in the library? Create your own and attach it vía scoped slots',
2121
},
2222
];

‎docs/.vuepress/styles/styles.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import '../../../src/styles/themes/default.scss';
2+
3+
.library-example {
4+
background-color: #efefef;
5+
border-bottom: 5px solid #ccc;
6+
padding: 1rem;
7+
}

‎docs/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,4 @@ That's Vue Dynamic Forms.
2828
## Features
2929

3030
<Features />
31+
<FormComposition />

‎docs/guide/events.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Events

‎docs/guide/fields.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# Input Fields
2+
3+
By default, `Vue Dynamic Forms` cover the following input types:
4+
5+
- Text
6+
- Email
7+
- Password
8+
- Url
9+
- Checkbox
10+
- Radio
11+
- Select
12+
- Textarea
13+
14+
::: tip
15+
You can also include your very own custom input using `slots` (Check [Slots](./slots.md))
16+
:::
17+
18+
All the input types are instances of `FormField`.
19+
20+
## Text
21+
22+
<InputText />
23+
24+
The input of type `text` defines a single-line text field entry. If a `FormField` is created without passing the property `type`, it will be `text` by default.
25+
26+
```js
27+
import { FormField } from '@asigloo/vue-dynamic-forms';
28+
29+
const yourAwesomeComponent = {
30+
name: 'InputDemo',
31+
data() {
32+
return {
33+
testForm: {
34+
id: 'test-form',
35+
fields: [new FormField({ label: 'Username', name: 'username' })],
36+
},
37+
};
38+
},
39+
};
40+
export default yourAwesomeComponent;
41+
```
42+
43+
## Email
44+
45+
The input of type `email` is used for input fields that should contain an e-mail address.
46+
47+
<InputEmail />
48+
49+
```js
50+
import { FormField, FormValidation } from '@asigloo/vue-dynamic-forms';
51+
52+
const yourAwesomeComponent = {
53+
name: 'EmailDemo',
54+
data() {
55+
return {
56+
testForm: {
57+
id: 'test-form',
58+
fields: [
59+
new FormField({
60+
type: 'email',
61+
label: 'Email',
62+
name: 'email',
63+
validations: [
64+
new FormValidation('email', 'Email format is incorrect'),
65+
],
66+
}),
67+
],
68+
},
69+
};
70+
},
71+
};
72+
export default yourAwesomeComponent;
73+
```

‎docs/guide/install.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ yarn add @asigloo/vue-dynamic-forms
99
npm install @asigloo/vue-dynamic-forms
1010
```
1111

12+
## Add to vue
13+
14+
### Global
15+
1216
```js
1317
import Vue from 'vue';
1418
import VueDynamicForms from '@asigloo/vue-dynamic-forms';

0 commit comments

Comments
 (0)