You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 12, 2021. It is now read-only.
tagline: 📑 Official Documentation for Vue Dynamic Forms
5
5
actionText: Quick Start →
6
-
actionLink: /v2/guide/
6
+
actionLink: /v3/guide/
7
7
features:
8
8
- title: Magical 🧞♂️✨
9
9
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.
@@ -25,43 +25,179 @@ So, wouldn't it be more economical to create the forms dynamically? Based on met
25
25
26
26
That's **Vue Dynamic Forms**.
27
27
28
-
## Status: Beta
28
+
## Status: Stable
29
29
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).
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
+
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.
0 commit comments