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

Commit 2b82290

Browse files
alvarosabualvarosabu
committed
API Docs
1 parent a96c510 commit 2b82290

29 files changed

+529
-52
lines changed

‎dev/App.vue

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,22 @@
1010
:options="testForm.options"
1111
@change="valuesChanged"
1212
>
13-
<template slot="custom-field-1" slot-scope="props">
14-
<div class="pika-field">
13+
<template
14+
slot="custom-field-1"
15+
slot-scope="{ control, valueChange, onFocus, onBlur }"
16+
>
17+
<div class="avocado-field">
1518
<input
16-
v-if="props.field"
19+
v-if="control"
1720
class="form-control"
18-
v-model="props.field.value"
19-
:type="props.field.type"
20-
:name="props.field.name"
21-
@change="props.valueChange()"
22-
@focus="props.onFocus()"
23-
@blur="props.onBlur()"
21+
v-model="control.value"
22+
:type="control.type"
23+
:name="control.name"
24+
@change="valueChange()"
25+
@focus="onFocus()"
26+
@blur="onBlur()"
2427
/>
25-
<img src="./assets/pika.png" alt="" />
28+
<i>🥑</i>
2629
</div>
2730
</template>
2831
</dynamic-form>
@@ -174,10 +177,16 @@ export default {
174177
};
175178
</script>
176179
<style lang="scss">
177-
.pika-field {
180+
.avocado-field {
178181
position: relative;
179182
180-
img {
183+
.form-control {
184+
border-color: #aec64c;
185+
background-color: #e2eb5d52;
186+
border-radius: 16px;
187+
}
188+
189+
i {
181190
position: absolute;
182191
top: 5px;
183192
right: 5px;

‎docs/.vuepress/components/SlotCustomField.vue

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
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+
<template slot="avocado-field" slot-scope="props">
11+
<div class="avocado-field">
12+
<input
13+
v-if="props.control"
14+
class="form-control"
15+
v-model="props.control.value"
16+
:type="props.control.type"
17+
:name="props.control.name"
18+
@change="props.valueChange()"
19+
@focus="props.onFocus()"
20+
@blur="props.onBlur()"
21+
/>
22+
<i>🥑</i>
23+
</div>
24+
</template>
25+
</dynamic-form>
26+
</div>
27+
<div class="col">
28+
<pre>{{ formData }}</pre>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script>
34+
import {
35+
DynamicForm,
36+
FormField,
37+
FormValidation,
38+
email,
39+
FormOptions,
40+
} from '../../../dist/as-dynamic-forms.common';
41+
42+
export default {
43+
name: 'SlotCustomField',
44+
components: {
45+
DynamicForm,
46+
},
47+
data: () => ({
48+
formData: null,
49+
testForm: {
50+
id: 'slot-custom-demo',
51+
fields: [
52+
new FormField({
53+
type: 'custom-field',
54+
label: 'My Avocado Field',
55+
name: 'avocado-field',
56+
}),
57+
],
58+
options: new FormOptions({ autoValidate: true }),
59+
},
60+
}),
61+
methods: {
62+
updateForm(values) {
63+
this.$forceUpdate();
64+
this.formData = values;
65+
},
66+
},
67+
};
68+
</script>
69+
70+
<style lang="scss">
71+
@import '../styles/styles.scss';
72+
73+
.form-composition {
74+
display: flex;
75+
justify-content: space-between;
76+
}
77+
.col {
78+
width: 45%;
79+
}
80+
pre {
81+
color: white;
82+
font-size: 12px;
83+
}
84+
.avocado-field {
85+
position: relative;
86+
87+
.form-control {
88+
border-color: #aec64c;
89+
background-color: #e2eb5d52;
90+
border-radius: 16px;
91+
}
92+
93+
i {
94+
position: absolute;
95+
top: 11px;
96+
right: 0;
97+
}
98+
}
99+
</style>

‎docs/.vuepress/config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,11 @@ module.exports = {
99
head,
1010
plugins,
1111
themeConfig,
12+
configureWebpack: {
13+
resolve: {
14+
alias: {
15+
'@': 'src',
16+
},
17+
},
18+
},
1219
};

‎docs/.vuepress/config/head.js

Lines changed: 53 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,79 @@ const head = [
55
[
66
'link',
77
{
8-
href: '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono',
8+
href:
9+
'//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono',
910
rel: 'stylesheet',
1011
type: 'text/css',
11-
}],
12+
},
13+
],
1214
[
1315
'link',
1416
{
15-
href: '//fonts.googleapis.com/css?family=Dosis:300&amp;text=Vue Select',
17+
href:
18+
'//fonts.googleapis.com/css?family=Dosis:300&amp;text=Vue Dynamic Forms',
1619
rel: 'stylesheet',
1720
type: 'text/css',
18-
}],
19-
['link', {rel: 'icon', href: `/vue-logo.png`}],
20-
['meta', {name: 'theme-color', content: '#3eaf7c'}],
21-
['meta', {name: 'apple-mobile-web-app-capable', content: 'yes'}],
22-
['meta', {name: 'apple-mobile-web-app-status-bar-style', content: 'black'}],
21+
},
22+
],
23+
['link', { rel: 'icon', href: `/icons/favicon.ico` }],
2324
[
2425
'link',
25-
{rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png`}],
26+
{
27+
rel: 'icon',
28+
type: 'image/png',
29+
sizes: '32x32',
30+
href: '/icons/favicon-32x32.png',
31+
},
32+
],
2633
[
2734
'link',
28-
{rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c'}],
35+
{
36+
rel: 'icon',
37+
type: 'image/png',
38+
sizes: '16x16',
39+
href: '/icons/favicon-16x16.png',
40+
},
41+
],
42+
['link', { rel: 'shortcut icon', href: '/icons/favicon.ico' }],
43+
['meta', { name: 'theme-color', content: '#3eaf7c' }],
44+
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
45+
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
46+
['link', { rel: 'apple-touch-icon', href: `/vue-dynamic-forms` }],
47+
[
48+
'link',
49+
{
50+
rel: 'mask-icon',
51+
href: '/icons/safari-pinned-tab.svg',
52+
color: '#3eaf7c',
53+
},
54+
],
2955
[
3056
'meta',
3157
{
3258
name: 'msapplication-TileImage',
3359
content: '/icons/msapplication-icon-144x144.png',
34-
}],
35-
['meta', {name: 'msapplication-TileColor', content: '#000000'}],
36-
['meta', {name: 'title', content: meta.title}],
37-
['meta', {name: 'description', content: meta.description}],
38-
['link', {rel: 'icon', href: meta.icon, type: 'image/png'}],
39-
['meta', {property: 'og:image', content: meta.icon}],
40-
['meta', {property: 'twitter:image', content: meta.icon}],
41-
['meta', {name: 'description', content: meta.description}],
42-
['meta', {property: 'og:description', content: ''}],
43-
['meta', {property: 'twitter:description', content: meta.description}],
44-
['meta', {property: 'twitter:title', content: meta.title}],
45-
['meta', {property: 'og:title', content: meta.title}],
46-
['meta', {property: 'og:site_name', content: meta.title}],
47-
['meta', {property: 'og:url', content: meta.url}],
60+
},
61+
],
62+
['meta', { name: 'msapplication-TileColor', content: '#000000' }],
63+
['meta', { name: 'title', content: meta.title }],
64+
['meta', { name: 'description', content: meta.description }],
65+
['link', { rel: 'icon', href: meta.icon, type: 'image/png' }],
66+
['meta', { property: 'og:image', content: meta.icon }],
67+
['meta', { property: 'twitter:image', content: meta.icon }],
68+
['meta', { name: 'description', content: meta.description }],
69+
['meta', { property: 'og:description', content: '' }],
70+
['meta', { property: 'twitter:description', content: meta.description }],
71+
['meta', { property: 'twitter:title', content: meta.title }],
72+
['meta', { property: 'og:title', content: meta.title }],
73+
['meta', { property: 'og:site_name', content: meta.title }],
74+
['meta', { property: 'og:url', content: meta.url }],
4875
];
4976

5077
if (isDeployPreview) {
5178
head.push(
52-
['meta', {name: 'robots', content: 'noindex'}],
53-
['meta', {name: 'googlebot', content: 'noindex'}],
79+
['meta', { name: 'robots', content: 'noindex' }],
80+
['meta', { name: 'googlebot', content: 'noindex' }],
5481
);
5582
}
5683

‎docs/.vuepress/config/meta.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ module.exports = {
33
description:
44
'Easy way to dynamically create reactive forms in vue based on varying business object model.',
55
// url: 'https://vue-select.org',
6-
icon: '/vue-logo.png',
6+
icon: '/vue-dynamic-forms.png',
77
};

‎docs/.vuepress/config/themeConfig.js

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@ module.exports = {
22
repo: 'alvarosaburido/vue-dynamic-forms',
33
editLinks: true,
44
docsDir: 'docs',
5-
nav: [{ text: 'Sandbox', link: '/sandbox' }],
5+
logo: '/vue-dynamic-forms.png',
6+
nav: [
7+
{
8+
text: 'Sandbox',
9+
target: '_blank',
10+
link: 'https://codesandbox.io/s/vue-dynamic-forms-ftzes',
11+
},
12+
],
613
sidebar: {
714
'/': [
815
{
@@ -17,8 +24,11 @@ module.exports = {
1724
title: 'API',
1825
collapsable: false,
1926
children: [
20-
['guide/fields', 'fields'],
21-
['guide/events', 'events'],
27+
['guide/fields', 'Fields'],
28+
['guide/props', 'Props'],
29+
['guide/events', 'Events'],
30+
['guide/models', 'Models'],
31+
['guide/slots', 'Slots'],
2232
],
2333
},
2434
{
@@ -28,14 +38,13 @@ module.exports = {
2838
},
2939
{
3040
title: 'Validation',
41+
collapsable: true,
42+
children: [['guide/validation', 'Add validation']],
3143
},
3244
{
3345
title: 'Advanced',
3446
collapsable: true,
35-
children: [
36-
['guide/slots', 'Slots'],
37-
['guide/netlify-forms', 'Netlify Forms'],
38-
],
47+
children: [['guide/netlify-forms', 'Netlify Forms']],
3948
},
4049
],
4150
},

‎docs/.vuepress/public/icons/android-chrome-192x192.png

3.25 KB
Loading

‎docs/.vuepress/public/icons/android-chrome-512x512.png

5 KB
Loading

‎docs/.vuepress/public/icons/apple-touch-icon.png

2.42 KB
Loading

‎docs/.vuepress/public/icons/favicon-16x16.png

728 Bytes
Loading

0 commit comments

Comments
 (0)