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 Jun 27, 2023. It is now read-only.
And then create the fields on your component's data structure, to create the fields you can import the factory function `FormField` from the library core:
|`submit`||`DynamicForm`| Emits whenever the submit button has been clicked and the form is valid (no errors), returns all the form values in an Object |
120
+
|`form-error`||`DynamicForm`| Emits whenever the submit button has been clicked and the form is invalid (with errors), returns all errors |
121
+
|`change`||`DynamicForm`| Emits every time there is a value changed on the form, returns all the form values in an Object without the need ob submitting |
122
+
123
+
A small example of a form without submit button
124
+
125
+
```html
126
+
<template>
127
+
<dynamic-form
128
+
:id="testForm.id"
129
+
:fields="testForm.fields"
130
+
@change="valuesChanged"
131
+
/>
132
+
</template>
133
+
```
134
+
135
+
```js
136
+
...
137
+
constyourAwesomeComponent= {
138
+
name:'your-awesome',
139
+
methods: {
140
+
valuesChanged(values) {
141
+
this.formData= {
142
+
...this.formData,
143
+
...values,
144
+
};
145
+
},
146
+
}
147
+
}
148
+
...
149
+
```
150
+
151
+
### Select input
152
+
153
+
```js
154
+
...
155
+
newFormField({
156
+
type:'select',
157
+
label:'Category',
158
+
name:'category',
159
+
options: [
160
+
{ value:null, text:'Please select an option' },
161
+
{ value:'arduino', text:'Arduino' },
162
+
{ value:'transistors', text:'Transistors' },
163
+
],
164
+
}),
165
+
...
166
+
```
167
+
168
+
### Radio and Checkboxes
169
+
170
+
```js
171
+
...
172
+
newFormField({
173
+
type:'checkbox',
174
+
label:'Read the conditions',
175
+
name:'conditions',
176
+
inline:false,
177
+
}),
178
+
newFormField({
179
+
type:'radio',
180
+
label:'Prefered Animal',
181
+
name:'animal',
182
+
inline:true,
183
+
options: [
184
+
{ text:'Dogs', value:'dogs' },
185
+
{ text:'Cats', value:'cats' },
186
+
{ text:'Others', value:'others' },
187
+
],
188
+
}),
189
+
...
190
+
```
191
+
192
+
### Validation
193
+
194
+
This library offers a simple validation system using the property `validations` as an array of `FormValidation`objects containing the validation function and the text in case of error.
195
+
196
+
To use it you need the following code:
197
+
198
+
```js
199
+
import {
200
+
FormField,
201
+
FormValidation,
202
+
required,
203
+
email,
204
+
pattern,
205
+
} from'@asigloo/vue-dynamic-forms';
206
+
207
+
constyourAwesomeComponent= {
208
+
name:'your-awesome',
209
+
data() {
210
+
return {
211
+
testForm: {
212
+
id:'test-form',
213
+
fields: [
214
+
newFormField({
215
+
type:'text',
216
+
label:'Name',
217
+
name:'name',
218
+
}),
219
+
newFormField({
220
+
type:'email',
221
+
label:'Email',
222
+
name:'email',
223
+
validations: [
224
+
newFormValidation(required, 'This field is required'),
225
+
newFormValidation(email, 'Format of email is incorrect'),
226
+
],
227
+
}),
228
+
newFormField({
229
+
type:'password',
230
+
label:'Password',
231
+
name:'password',
232
+
validations: [
233
+
newFormValidation(required, 'This field is required'),
'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
239
+
),
240
+
],
241
+
}),
242
+
],
243
+
},
244
+
};
245
+
},
246
+
};
247
+
248
+
exportdefaultyourAwesomeComponent;
249
+
```
250
+
251
+
### Styling themes
252
+
253
+
The components are unstyled by default, so you can customize them with your own styles. If you want a more "ready to go" solution you can import on of the themes we have included in `src/styles/themes/`
254
+
47
255
## Development
48
256
49
257
### Project setup
@@ -81,3 +289,22 @@ yarn run lint
81
289
```
82
290
yarn run test:unit
83
291
```
292
+
293
+
## Contributing
294
+
295
+
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 😁.
296
+
297
+
## Todolist
298
+
299
+
This are the features I have planned for next versions of this library
300
+
301
+
-[ ] Material theme
302
+
-[ ] Form Mixins for fields manipulation (for example, change values of a field depending of other)
303
+
-[] More complex input types.
304
+
-[] Nuxt plugin istall
305
+
-[ ] Better docs & online examples
306
+
-[] Storybook
307
+
308
+
## License
309
+
310
+
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
0 commit comments