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

Commit 77be8f7

Browse files
alvarosabualvarosabu
committed
Updated dependencies, fixed test, update readme
1 parent 4e73a6e commit 77be8f7

21 files changed

+331
-94
lines changed

‎.npmignore

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/templates
2+
.vuegenerator
3+
.eslintrc.js
4+
.eslintignore
5+
jest.config.js
6+
babel.config.js
7+
vue.config.js
8+
postcss.config.js
9+
.prettierrc
10+
yarn.lock
11+
/dev
12+
/docs
13+
/public
14+
/coverage
15+
/.vscode
16+
/tests

‎README.md

Lines changed: 177 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
![repository-banner.png](https://res.cloudinary.com/alvarosaburido/image/upload/v1564929632/as-readme-banner_tqdgrx.png)
22

3-
## Software version
4-
5-
- `node -v` : v12.4.0
6-
- `npm -v` : v6.4.1
7-
- `yarn -v`: 1.9.4
8-
- `vue --version`:3.0.3
9-
- `webpack -v` : v4.1.1
10-
113
# Vue Dynamic Forms
124

135
![Current Relase](https://img.shields.io/github/package-json/v/alvarosaburido/vue-dynamic-forms) [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)
@@ -70,6 +62,7 @@ The dynamic form component is really easy to use, you will only need to add it t
7062
```html
7163
<template>
7264
<dynamic-form :id="testForm.id" :fields="testForm.fields" />
65+
<button type="submit" form="testForm.id">Submit</button>
7366
</template>
7467
```
7568

@@ -90,6 +83,162 @@ const yourAwesomeComponent = {
9083
label: 'Name',
9184
name: 'name',
9285
}),
86+
new FormField({
87+
type: 'email',
88+
label: 'Email',
89+
name: 'email',
90+
}),
91+
],
92+
},
93+
};
94+
},
95+
};
96+
97+
export default yourAwesomeComponent;
98+
```
99+
100+
Each `FormField` has a set of properties to customize your input field:
101+
102+
| Property | Type | Default | Description |
103+
| :---------- | :--------------- | :------ | :----------------------------------------------------------------------------------------------------- |
104+
| type | String | text | Define the nature of the field, can be `text|email|url|password|number|radio|checkbox|textarea|select` |
105+
| label | String | null | Defines the text in the input label |
106+
| placeholder | String | null | Defines short hint that describes the expected value of an input field |
107+
| name | String | null | Name property for the field inside of the form data |
108+
| value | any | null | Initial value of the input field |
109+
| disabled | Boolean | false | Whenever the input field is disabled or not |
110+
| customClass | String | null | Allows the user to set custom classes to the input for styling purpouses |
111+
| options | Array of Objects | [] | Options for input type `select` |
112+
| inline | Boolean | false | Specifies if options for `radio|checkbox` should be inline |
113+
| validations | Array of Objects | [] | Array of `FormValidation` objects, specify validations and messages for the input |
114+
115+
### Events and Submit
116+
117+
| Event | Type | Emitter | Description |
118+
| :----------- | :--- | :------------ | :----------------------------------------------------------------------------------------------------------------------------- |
119+
| `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+
const yourAwesomeComponent = {
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+
new FormField({
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+
new FormField({
173+
type: 'checkbox',
174+
label: 'Read the conditions',
175+
name: 'conditions',
176+
inline: false,
177+
}),
178+
new FormField({
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+
const yourAwesomeComponent = {
208+
name: 'your-awesome',
209+
data() {
210+
return {
211+
testForm: {
212+
id: 'test-form',
213+
fields: [
214+
new FormField({
215+
type: 'text',
216+
label: 'Name',
217+
name: 'name',
218+
}),
219+
new FormField({
220+
type: 'email',
221+
label: 'Email',
222+
name: 'email',
223+
validations: [
224+
new FormValidation(required, 'This field is required'),
225+
new FormValidation(email, 'Format of email is incorrect'),
226+
],
227+
}),
228+
new FormField({
229+
type: 'password',
230+
label: 'Password',
231+
name: 'password',
232+
validations: [
233+
new FormValidation(required, 'This field is required'),
234+
new FormValidation(
235+
pattern(
236+
'^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[#$^+=!*()@%&]).{8,10}$',
237+
),
238+
'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
239+
),
240+
],
241+
}),
93242
],
94243
},
95244
};
@@ -101,7 +250,7 @@ export default yourAwesomeComponent;
101250

102251
### Styling themes
103252

104-
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
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/`
105254

106255
## Development
107256

@@ -140,3 +289,22 @@ yarn run lint
140289
```
141290
yarn run test:unit
142291
```
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.

‎dev/App.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,6 @@ const methods = {
120120
...this.formData,
121121
...values,
122122
};
123-
console.log('Values', values);
124123
},
125124
};
126125

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"docs:dev": "vuepress dev docs",
1414
"docs:build": "vuepress build docs"
1515
},
16-
"main": "dist/@asigloo/core.common.js",
16+
"main": "dist/as-dynamic-forms.common.js",
1717
"dependencies": {
1818
"bootstrap": "^4.4.1",
1919
"core-js": "^3.6.4",

‎src/components/dynamic-form/DynamicForm.js

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FormControl } from '../../core/utils/form-control.model';
1+
import { FormControl } from '@/core/utils';
22

33
import DynamicInput from '@/components/dynamic-input/DynamicInput.vue';
44

@@ -32,16 +32,18 @@ const props = {
3232

3333
const methods = {
3434
mapControls() {
35-
this.controls = this.fields.map(
36-
field =>
37-
new FormControl({
38-
...field,
39-
valid: true,
40-
touched: false,
41-
dirty: false,
42-
errors: {},
43-
}),
44-
);
35+
this.controls =
36+
this.fields &&
37+
this.fields.map(
38+
field =>
39+
new FormControl({
40+
...field,
41+
valid: true,
42+
touched: false,
43+
dirty: false,
44+
errors: {},
45+
}),
46+
);
4547
},
4648
updateControls() {
4749
this.controls = this.controls.map(
@@ -59,7 +61,7 @@ const methods = {
5961
this.$emit('submit', this.values);
6062
this.resetForm();
6163
} else {
62-
this.$emit('form error', this.allErrors);
64+
this.$emit('form-error', this.allErrors);
6365
}
6466
}, 100);
6567
},
@@ -85,28 +87,34 @@ const computed = {
8587
return control ? control.valid : true;
8688
},
8789
allErrors() {
88-
return this.controls.reduce((prev, curr) => {
89-
const errors = Object.keys(curr.errors) || [];
90-
if (errors.length > 0) {
91-
const error = {};
92-
error[curr.name] = curr.errors;
90+
return (
91+
this.controls &&
92+
this.controls.reduce((prev, curr) => {
93+
const errors = Object.keys(curr.errors) || [];
94+
if (errors.length > 0) {
95+
const error = {};
96+
error[curr.name] = curr.errors;
97+
return {
98+
...prev,
99+
...error,
100+
};
101+
}
102+
return prev;
103+
}, {})
104+
);
105+
},
106+
values() {
107+
return (
108+
this.controls &&
109+
this.controls.reduce((prev, curr) => {
110+
const obj = {};
111+
obj[curr.name] = curr.value;
93112
return {
94113
...prev,
95-
...error,
114+
...obj,
96115
};
97-
}
98-
return prev;
99-
}, {});
100-
},
101-
values() {
102-
return this.controls.reduce((prev, curr) => {
103-
const obj = {};
104-
obj[curr.name] = curr.value;
105-
return {
106-
...prev,
107-
...obj,
108-
};
109-
}, {});
116+
}, {})
117+
);
110118
},
111119
};
112120

0 commit comments

Comments
 (0)