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

Commit 4769e0e

Browse files
alvarosabualvarosabu
authored
Merge pull request #49 from alvarosaburido/feature/improve_docs_custom_fields
Examples document section
2 parents 0515833 + abae887 commit 4769e0e

File tree

13 files changed

+1572
-248
lines changed

13 files changed

+1572
-248
lines changed

‎README.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,12 +120,11 @@ If you find this library useful and you want to help improve it, maintain it or
120120

121121
This are the features I have planned for next versions of this library
122122

123-
- [ ] Material theme
123+
- [x] Material theme
124124
- [ ] Form Mixins for fields manipulation (for example, change values of a field depending of other)
125125
- [ ] More complex input types.
126-
- [ ] Nuxt plugin istall
126+
- [x] Nuxt plugin istall
127127
- [x] Better docs & online examples
128-
- [ ] Storybook
129128

130129
## License
131130

‎dev/vue/App.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@
2828
<i>🥑</i>
2929
</div>
3030
</template>
31+
<template slot="third-party" slot-scope="props">
32+
<div class="third-party">
33+
<v-select
34+
v-model="props.control.value"
35+
:options="props.control.options"
36+
:name="props.control.name"
37+
@input="props.valueChange()"
38+
@search:focus="props.onFocus()"
39+
@search:blur="props.onBlur()"
40+
></v-select>
41+
</div>
42+
</template>
3143
</dynamic-form>
3244
<div class="row d-flex justify-content-end p-4">
3345
<button submit="true" :form="testForm.id" class="btn btn-primary">
@@ -178,6 +190,13 @@ const data = () => ({
178190
value: 50,
179191
customClass: 'col-12 col-md-6',
180192
}),
193+
new FormField({
194+
type: 'custom-field',
195+
label: 'V-Select',
196+
name: 'third-party',
197+
customClass: 'col-6',
198+
options: ['Arduino', 'Pinguino'],
199+
}),
181200
],
182201
options: {
183202
autoValidate: true,

‎dev/vue/main.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import Vue from 'vue';
22
import App from './App.vue';
33
import './styles/main.scss';
4-
4+
import vSelect from 'vue-select';
55
import VueDynamicForms from '@/index'; // Dev
66
// import VueDynamicForms from '@asigloo/vue-dynamic-forms' // Prod
77

88
Vue.config.productionTip = false;
99
Vue.use(VueDynamicForms);
10+
Vue.component('v-select', vSelect);
1011

1112
new Vue({ render: h => h(App) }).$mount('#app');

‎dev/vue/styles/_vendors.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@ $input-border-radius: 50px; */
77
// @import '../../src/styles/themes/default.scss';
88

99
@import '@/styles/themes/material.scss';
10+
11+
// Third-party
12+
13+
@import 'vue-select/src/scss/vue-select.scss';

‎docs/.vuepress/components/PhonePrefix.vue

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="library-example">
3+
<div 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+
<pre>{{ formData }}</pre>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import { DynamicForm, FormField } from '../../../dist/as-dynamic-forms.common';
17+
import COUNTRY_CODES from '../data/countryCodes';
18+
19+
export default {
20+
name: 'PhonePrefix',
21+
components: {
22+
DynamicForm,
23+
},
24+
data: () => ({
25+
formData: null,
26+
testForm: {
27+
id: 'test-form',
28+
fields: [
29+
new FormField({
30+
type: 'select',
31+
label: 'Prefix',
32+
name: 'prefix',
33+
customClass: 'col-2',
34+
options: COUNTRY_CODES.map(({ label, code }) => ({
35+
text: `+${code} ${label}`,
36+
value: `+ ${code}`,
37+
})),
38+
value: `+ 34`,
39+
}),
40+
new FormField({
41+
type: 'text',
42+
label: 'Area Code',
43+
name: 'areaCode',
44+
customClass: 'col-4',
45+
value: '922',
46+
}),
47+
new FormField({
48+
type: 'text',
49+
label: 'Phone',
50+
name: 'phone',
51+
customClass: 'col-6',
52+
value: '445-66',
53+
}),
54+
],
55+
options: {
56+
customClass: 'row',
57+
},
58+
},
59+
}),
60+
methods: {
61+
updateForm(values) {
62+
this.formData = values;
63+
},
64+
},
65+
};
66+
</script>
67+
68+
<style lang="scss">
69+
@import '../styles/styles.scss';
70+
71+
pre {
72+
color: white;
73+
font-size: 12px;
74+
}
75+
</style>

‎docs/.vuepress/components/ThirdParty.vue

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div class="library-example">
3+
<div v-if="testForm">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
:options="testForm.options"
8+
@change="updateForm"
9+
>
10+
<template slot="third-party" slot-scope="props">
11+
<div class="third-party">
12+
<v-select
13+
v-model="props.control.value"
14+
:options="props.control.options"
15+
:name="props.control.name"
16+
@input="props.valueChange()"
17+
@search:focus="props.onFocus()"
18+
@search:blur="props.onBlur()"
19+
></v-select>
20+
</div>
21+
</template>
22+
</dynamic-form>
23+
</div>
24+
<pre>{{ formData }}</pre>
25+
</div>
26+
</template>
27+
28+
<script>
29+
import vSelect from 'vue-select';
30+
import { DynamicForm, FormField } from '../../../dist/as-dynamic-forms.common';
31+
import BOOKS from '../data/books';
32+
33+
export default {
34+
name: 'Thirdparty',
35+
components: {
36+
DynamicForm,
37+
'v-select': vSelect,
38+
},
39+
data: () => ({
40+
formData: null,
41+
testForm: {
42+
id: 'test-form',
43+
fields: [
44+
new FormField({
45+
type: 'custom-field',
46+
label: 'V-Select',
47+
name: 'third-party',
48+
customClass: 'col-6',
49+
options: ['Arduino', 'Pinguino'],
50+
}),
51+
],
52+
options: {
53+
customClass: 'row',
54+
},
55+
},
56+
}),
57+
methods: {
58+
updateForm(values) {
59+
this.formData = values;
60+
},
61+
},
62+
};
63+
</script>
64+
65+
<style lang="scss">
66+
@import '../styles/styles.scss';
67+
68+
pre {
69+
color: white;
70+
font-size: 12px;
71+
}
72+
73+
.vs__dropdown-toggle {
74+
background: white;
75+
}
76+
</style>

‎docs/.vuepress/config/themeConfig.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ module.exports = {
4141
collapsable: true,
4242
children: [['guide/validation', 'Add validation']],
4343
},
44+
{
45+
title: 'Examples',
46+
collapsable: true,
47+
children: [
48+
['guide/examples/phone-prefix-example', 'Phone Prefix'],
49+
['guide/examples/thirdparty', 'Third-Party'],
50+
],
51+
},
4452
{
4553
title: 'Advanced',
4654
collapsable: true,

0 commit comments

Comments
 (0)