Skip to content
This repository was archived by the owner on Oct 12, 2021. It is now read-only.

Commit 60b83a2

Browse files
alvarosabualvarosabu
committed
feature(docs): initial setup docs
1 parent 6d18578 commit 60b83a2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+27516
-1
lines changed

‎.github/workflows/ci.yml

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: ci
2+
3+
on:
4+
pull_request:
5+
branches:
6+
- master
7+
8+
jobs:
9+
build-docs-site:
10+
name: Build docs site
11+
runs-on: ubuntu-18.04
12+
steps:
13+
- name: Checkout
14+
uses: actions/checkout@v2
15+
- name: Setup Node.js
16+
uses: actions/setup-node@v1
17+
with:
18+
node-version: 12
19+
- name: Install dependencies
20+
run: yarn
21+
- name: Run build
22+
run: yarn build

‎.github/workflows/release.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Release
2+
on:
3+
push:
4+
branches:
5+
- master
6+
jobs:
7+
release:
8+
name: Run test and Release
9+
runs-on: ubuntu-18.04
10+
steps:
11+
- name: Checkout
12+
uses: actions/checkout@v2
13+
- name: Setup Node.js
14+
uses: actions/setup-node@v1
15+
with:
16+
node-version: 12
17+
- name: Install dependencies
18+
run: yarn
19+
- name: Build Docs
20+
run: yarn build
21+
- name: Release
22+
env:
23+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
24+
CI: true
25+
run: npm run semantic-release

‎.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
pids
2+
logs
3+
node_modules
4+
npm-debug.log
5+
coverage/
6+
run
7+
dist
8+
.DS_Store
9+
.nyc_output
10+
.basement
11+
config.local.js
12+
basement_dist

‎.prettierrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"singleQuote": true,
3+
"semi": true,
4+
"trailingComma": "all",
5+
"disableLanguages": ["markdown"],
6+
"arrowParens": "avoid"
7+
}

‎.releaserc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"branches": ["master"],
3+
"plugins": [
4+
['@semantic-release/npm', {
5+
"npmPublish": false,
6+
}]
7+
]
8+
}

‎.vscode/settings.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"editor.formatOnSave": true,
3+
"eslint.validate": [
4+
"vue",
5+
"html",
6+
"javascript"
7+
],
8+
"workbench.colorCustomizations": {
9+
"activityBar.background": "#f2f2f2",
10+
"activityBar.foreground": "#1e7e51"
11+
},
12+
"beautify.language": {
13+
"html": [
14+
"html"
15+
],
16+
"css": [],
17+
"js": []
18+
},
19+
"html.format.wrapAttributes": "force-aligned",
20+
"html.autoClosingTags": false,
21+
"editor.codeActionsOnSave": {
22+
"source.fixAll.eslint": true
23+
}
24+
}

‎README.md

+13-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
1-
vue-dynamic-forms-docs
1+
# vue-dynamic-forms-docs
2+
3+
> Official Documentation for Vue Dynamic Forms
4+
5+
## Development
6+
7+
```bash
8+
yarn dev
9+
yarn build
10+
```
11+
12+
For more details, please head VuePress's [documentation](https://v1.vuepress.vuejs.org/).
13+

‎docs/.vuepress/components/FormComposition.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
@change="updateForm"
8+
/>
9+
</div>
10+
<div class="col">
11+
<pre>{{ formData }}</pre>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { DynamicForm, FormField } from 'vdf-2';
18+
19+
export default {
20+
name: 'FormComposition',
21+
components: {
22+
DynamicForm,
23+
},
24+
data: () => ({
25+
formData: null,
26+
testForm: {
27+
id: 'test-form',
28+
fields: [
29+
new FormField({
30+
type: 'text',
31+
label: 'Name',
32+
name: 'name',
33+
}),
34+
new FormField({
35+
type: 'email',
36+
label: 'Email',
37+
name: 'email',
38+
}),
39+
],
40+
},
41+
}),
42+
methods: {
43+
updateForm(values) {
44+
this.formData = values;
45+
},
46+
},
47+
};
48+
</script>
49+
50+
<style lang="scss">
51+
@import '@/styles/styles.scss';
52+
53+
.form-composition {
54+
display: flex;
55+
justify-content: space-between;
56+
}
57+
.col {
58+
width: 45%;
59+
}
60+
pre {
61+
color: white;
62+
font-size: 12px;
63+
}
64+
</style>

‎docs/.vuepress/components/InputCheckbox.vue

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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 { DynamicForm, FormField, FormOptions } from 'vdf-2';
19+
20+
export default {
21+
name: 'InputCheckbox',
22+
components: {
23+
DynamicForm,
24+
},
25+
data: () => ({
26+
formData: null,
27+
testForm: {
28+
id: 'form-checkbox-demo',
29+
fields: [
30+
new FormField({
31+
type: 'checkbox',
32+
label: 'Accept the conditions',
33+
name: 'policies',
34+
}),
35+
],
36+
},
37+
}),
38+
methods: {
39+
updateForm(values) {
40+
this.$forceUpdate();
41+
this.formData = values;
42+
},
43+
},
44+
};
45+
</script>
46+
47+
<style lang="scss">
48+
@import '@/styles/styles.scss';
49+
50+
.form-composition {
51+
display: flex;
52+
justify-content: space-between;
53+
}
54+
.col {
55+
width: 45%;
56+
}
57+
pre {
58+
color: white;
59+
font-size: 12px;
60+
}
61+
</style>

‎docs/.vuepress/components/InputEmail.vue

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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 'vdf-2';
25+
26+
export default {
27+
name: 'InputEmail',
28+
components: {
29+
DynamicForm,
30+
},
31+
data: () => ({
32+
formData: null,
33+
testForm: {
34+
id: 'form-email-demo',
35+
fields: [
36+
new FormField({
37+
type: 'email',
38+
label: 'Email',
39+
name: 'email',
40+
validations: [new FormValidation(email, 'Email format is incorrect')],
41+
}),
42+
],
43+
options: new FormOptions({ autoValidate: true }),
44+
},
45+
}),
46+
methods: {
47+
updateForm(values) {
48+
this.$forceUpdate();
49+
this.formData = values;
50+
},
51+
},
52+
};
53+
</script>
54+
55+
<style lang="scss">
56+
@import '@/styles/styles.scss';
57+
58+
.form-composition {
59+
display: flex;
60+
justify-content: space-between;
61+
}
62+
.col {
63+
width: 45%;
64+
}
65+
pre {
66+
color: white;
67+
font-size: 12px;
68+
}
69+
</style>

‎docs/.vuepress/components/InputNumber.vue

+67
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 'vdf-2';
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>

0 commit comments

Comments
 (0)