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

Commit a96c510

Browse files
alvarosabualvarosabu
committed
Input Types
1 parent e32a479 commit a96c510

File tree

12 files changed

+674
-15
lines changed

12 files changed

+674
-15
lines changed

‎dev/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ const data = () => ({
150150
}),
151151
],
152152
options: {
153-
// autoValidate: true,
153+
autoValidate: true,
154154
customClass: 'row',
155155
netlify: true,
156156
},

‎docs/.vuepress/components/InputCheckbox.vue

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

‎docs/.vuepress/components/InputEmail.vue

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
22
<div class="form-composition library-example">
3-
<div class="col">
3+
<div class="col" v-if="testForm">
44
<dynamic-form
55
:id="testForm.id"
66
:fields="testForm.fields"
7+
:options="testForm.options"
78
@change="updateForm"
89
/>
910
</div>
@@ -14,28 +15,37 @@
1415
</template>
1516

1617
<script>
17-
import { DynamicForm, FormField } from '../../../dist/as-dynamic-forms.common';
18+
import {
19+
DynamicForm,
20+
FormField,
21+
FormValidation,
22+
email,
23+
FormOptions,
24+
} from '../../../dist/as-dynamic-forms.common';
1825
1926
export default {
20-
name: 'FormComposition',
27+
name: 'InputEmail',
2128
components: {
2229
DynamicForm,
2330
},
2431
data: () => ({
2532
formData: null,
2633
testForm: {
27-
id: 'test-form',
34+
id: 'form-email-demo',
2835
fields: [
2936
new FormField({
30-
type: 'text',
37+
type: 'email',
3138
label: 'Email',
3239
name: 'email',
40+
validations: [new FormValidation(email, 'Email format is incorrect')],
3341
}),
3442
],
43+
options: new FormOptions({ autoValidate: true }),
3544
},
3645
}),
3746
methods: {
3847
updateForm(values) {
48+
this.$forceUpdate();
3949
this.formData = values;
4050
},
4151
},

‎docs/.vuepress/components/InputNumber.vue

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

‎docs/.vuepress/components/InputPassword.vue

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col" v-if="testForm">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
:options="testForm.options"
8+
@change="updateForm"
9+
/>
10+
</div>
11+
<div class="col">
12+
<pre>{{ formData }}</pre>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import {
19+
DynamicForm,
20+
FormField,
21+
FormValidation,
22+
pattern,
23+
FormOptions,
24+
} from '../../../dist/as-dynamic-forms.common';
25+
26+
export default {
27+
name: 'InputPassword',
28+
components: {
29+
DynamicForm,
30+
},
31+
data: () => ({
32+
formData: null,
33+
testForm: {
34+
id: 'form-email-demo',
35+
fields: [
36+
new FormField({
37+
type: 'password',
38+
label: 'Password',
39+
name: 'password',
40+
validations: [
41+
new FormValidation(
42+
pattern(
43+
'^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,10}$',
44+
),
45+
'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
46+
),
47+
],
48+
}),
49+
],
50+
options: new FormOptions({ autoValidate: true }),
51+
},
52+
}),
53+
methods: {
54+
updateForm(values) {
55+
this.$forceUpdate();
56+
this.formData = values;
57+
},
58+
},
59+
};
60+
</script>
61+
62+
<style lang="scss">
63+
@import '../styles/styles.scss';
64+
65+
.form-composition {
66+
display: flex;
67+
justify-content: space-between;
68+
}
69+
.col {
70+
width: 45%;
71+
}
72+
pre {
73+
color: white;
74+
font-size: 12px;
75+
}
76+
</style>

‎docs/.vuepress/components/InputRadio.vue

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

0 commit comments

Comments
 (0)