Skip to content
This repository was archived by the owner on Oct 12, 2021. It is now read-only.

Commit 255ec05

Browse files
alvarosabualvarosabu
committed
feat(docs): migration guide
1 parent 5f47609 commit 255ec05

11 files changed

+13176
-12216
lines changed

‎README.md

+2-4
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88
<a href="https://www.npmjs.com/package/@asigloo/vue-dynamic-forms">
99
<img src="https://badgen.net/npm/v/@asigloo/vue-dynamic-forms" alt="Current npm version">
1010
</a>
11-
<a href="https://www.npmjs.com/package/@asigloo/vue-dynamic-forms/next">
12-
<img src="https://badgen.net/npm/v/@asigloo/vue-dynamic-forms/next" alt="Current npm version">
13-
</a>
14-
<a href="https://app.netlify.com/sites/vue-dynamic-forms/deploys">
11+
12+
<a href="https://app.netlify.com/sites/vue-dynamic-forms-docs/deploys">
1513
<img src="https://api.netlify.com/api/v1/badges/5defb6a1-c5fd-4b19-8fd0-a687f26761a6/deploy-status" alt="Current npm version">
1614
</a>
1715
</p>

‎docs/.vuepress/config/themeConfig.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@ module.exports = {
99
{
1010
text: 'Guide',
1111
items: [
12-
{ text: 'v2.x', link: '/v2/guide/' },
1312
{ text: 'v3.x', link: '/v3/guide/' },
13+
{ text: 'v2.x', link: '/v2/guide/' },
1414
],
1515
},
16+
{
17+
text: 'Migration Guide',
18+
link: '/v3/guide/migration-guide',
19+
},
1620
{
1721
text: 'Plugin Repo',
1822
target: '_blank',
@@ -85,8 +89,14 @@ module.exports = {
8589
children: [
8690
['guide/install', 'Installation'],
8791
['guide/usage', 'Usage'],
92+
['guide/migration-guide', 'Migration Guide'],
8893
],
8994
},
95+
{
96+
title: 'Theme & Styling',
97+
collapsable: true,
98+
children: [['guide/theming', 'Theming']],
99+
},
90100
],
91101
/* '/guide/v2/': [
92102
{

‎docs/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ home: true
33
heroImage: https://res.cloudinary.com/alvarosaburido/image/upload/v1589993773/portfolio/web/vue-dynamic-forms/open-graph-preview_kv4glm.png
44
tagline: 📑 Official Documentation for Vue Dynamic Forms
55
actionText: Quick Start →
6-
actionLink: /v2/guide/
6+
actionLink: /v3/guide/
77
features:
88
- title: Magical 🧞‍♂️✨
99
details: Generating forms quickly from a simple data object, a JSON string or the response from an ajax call using only a DynamicForm component, yup, that easily.

‎docs/v3/guide/index.md

+144-8
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<img src="https://badgen.net/npm/v/@asigloo/vue-dynamic-forms/next" alt="Current npm version">
88
</a>
99
<a href="https://bundlephobia.com/result?p=@asigloo/vue-dynamic-forms">
10-
<img src="https://flat.badgen.net/bundlephobia/min/@asigloo/vue-dynamic-forms@next" alt="Minified size">
10+
<img src="https://flat.badgen.net/bundlephobia/min/@asigloo/vue-dynamic-forms" alt="Minified size">
1111
</a>
1212
<a href="https://vuejs.org">
1313
<img src="https://flat.badgen.net/badge/vue.js/3.x.x/4fc08d?icon=github" alt="Vue.js version">
@@ -25,43 +25,179 @@ So, wouldn't it be more economical to create the forms dynamically? Based on met
2525

2626
That's **Vue Dynamic Forms**.
2727

28-
## Status: Beta
28+
## Status: Stable
2929

30-
This is the Vue `3.x.x` compatible version. The focus right now is out of the box `Typescript` support, three shakeable, improve accesiility and be lighter in size. For Vue `2.x.x` please use the library tags [2.x](https://github.com/alvarosaburido/vue-dynamic-forms/tree/2.x).
30+
This is the Vue `3.x.x` compatible version. Out of the box `Typescript` support, three shakeable, improved accesiility and be lighter in size. For Vue `2.x.x` please use the library tags [2.x](https://github.com/alvarosaburido/vue-dynamic-forms/tree/2.x).
3131

3232
## Documentation
3333

3434
Complete documentation and examples available at
3535

3636
- **[Documentation](https://vue-dynamic-forms.netlify.app)**
37-
- **[Sandbox Demo](https://codesandbox.io/s/vue-dynamic-forms-ftzes)**
37+
- **[Demos](#demos)**
3838
- **Migration Guide** (soon)
3939

4040
## Installation
4141

4242
```bash
43-
$ npm install @asigloo/vue-dynamic-forms@next
43+
$ npm install @asigloo/vue-dynamic-forms
4444
```
4545

4646
or if you prefer yarn
4747

4848
```bash
49-
$ yarn add @asigloo/vue-dynamic-forms@next
49+
$ yarn add @asigloo/vue-dynamic-forms
5050
```
5151

5252
## Usage
5353

54-
The installation and usage has change to align with new Vue 3 initialization process.
54+
The installation and usage has change to align with new Vue 3 plugin process.
5555

5656
To create a new `Dynamic Form` instance, use the `createDynamicForms` function;
5757

5858
```js
5959
import { createApp } from 'vue';
6060
import { createDynamicForms } from '@asigloo/vue-dynamic-forms';
6161

62-
const VueDynamicForms = createDynamicForms({});
62+
const VueDynamicForms = createDynamicForms();
6363

6464
export const app = createApp(App);
6565

6666
app.use(VueDynamicForms);
6767
```
68+
69+
In your component:
70+
71+
```vue
72+
<template>
73+
<dynamic-form :form="form" @change="valueChanged" />
74+
</template>
75+
76+
<script lang="ts">
77+
import { computed, defineComponent, reactive } from 'vue';
78+
79+
import {
80+
CheckboxField,
81+
TextField,
82+
SelectField,
83+
} from '@asigloo/vue-dynamic-forms';
84+
85+
export default defineComponent({
86+
name: 'BasicDemo',
87+
setup() {
88+
const form = computed(() => ({
89+
id: 'basic-demo',
90+
fields: {
91+
username: TextField({
92+
label: 'Username',
93+
}),
94+
games: SelectField({
95+
label: 'Games',
96+
options: [
97+
{
98+
value: 'the-last-of-us',
99+
label: 'The Last of Us II',
100+
},
101+
{
102+
value: 'death-stranding',
103+
label: 'Death Stranding',
104+
},
105+
{
106+
value: 'nier-automata',
107+
label: 'Nier Automata',
108+
},
109+
],
110+
}),
111+
checkIfAwesome: CheckboxField({
112+
label: 'Remember Me',
113+
}),
114+
},
115+
}));
116+
117+
function valueChanged(values) {
118+
console.log('Values', values);
119+
}
120+
121+
return {
122+
form,
123+
valueChanged,
124+
};
125+
},
126+
});
127+
</script>
128+
```
129+
130+
## Demos
131+
132+
![Vue Dynamic Forms Demo](https://res.cloudinary.com/alvarosaburido/image/upload/v1610265908/vue-dynamic-forms-demo.png)
133+
134+
We've prepared some demos to show different use cases of the library and how to use each type of input field.
135+
136+
To check them just run the command bellow which run the app at `http://localhost:6044/`
137+
138+
```
139+
yarn run serve
140+
```
141+
142+
- [x] General Form
143+
- [x] Text Fields
144+
- [x] Number Fields
145+
- [x] Select Fields
146+
- [x] Textarea Fields
147+
- [x] Radio Fields
148+
- [x] Login
149+
- [x] Custom Fields
150+
- [ ] Axios form (Retrieve form structure from an API)
151+
- [ ] TailwindCSS styling
152+
153+
## Development
154+
155+
### Project setup
156+
157+
```
158+
yarn install
159+
```
160+
161+
### Compiles and hot-reloads
162+
163+
```
164+
yarn run serve
165+
```
166+
167+
### Compiles and minifies for production
168+
169+
```
170+
yarn run build
171+
```
172+
173+
### Generate types
174+
175+
```
176+
yarn run build:dts
177+
```
178+
179+
### Lints and fixes files
180+
181+
```
182+
yarn run lint
183+
```
184+
185+
### Run your unit tests
186+
187+
```
188+
yarn run test
189+
```
190+
191+
### Run your e2e tests
192+
193+
```
194+
yarn run test
195+
```
196+
197+
## Contributing
198+
199+
If you find this library useful and you want to help improve it, maintain it or just want a new feature, feel free to contact me, or feel free to do a PR 😁.
200+
201+
## License
202+
203+
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.

‎docs/v3/guide/install.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ To create a new Dynamic Form instance, use the createDynamicForms function;
1919
import { createApp } from 'vue';
2020
import { createDynamicForms } from '@asigloo/vue-dynamic-forms';
2121

22-
const VueDynamicForms = createDynamicForms({});
22+
const VueDynamicForms = createDynamicForms({
23+
// Global Options go here
24+
});
2325

2426
export const app = createApp(App);
2527

0 commit comments

Comments
 (0)