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

Commit c591bca

Browse files
alvarosabualvarosabu
committed
feat: new docs
1 parent 28ef8fa commit c591bca

38 files changed

+11163
-7542
lines changed

‎docs/.vitepress/components/FormCompositionOptionsApi.vue

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎docs/.vitepress/config.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/* import { UserConfig } from 'vitepress'
2+
*/
3+
const { description } = require('../../package')
4+
5+
const config = {
6+
title: 'Vue Dynamic Forms',
7+
description,
8+
lang: 'en-US',
9+
themeConfig: {
10+
repo: 'asigloo/vue-dynamic-forms',
11+
logo: '/logo.svg',
12+
editLinks: true,
13+
editLinkText: 'Edit this page',
14+
lastUpdated: 'Last Updated',
15+
nav: [
16+
{
17+
text: 'Migration Guide',
18+
link: '/v3/guide/migration-guide',
19+
},
20+
],
21+
sidebar: {
22+
'/': [
23+
{
24+
text: 'Guide',
25+
children: [
26+
{
27+
text: 'Introduction',
28+
link: '/guide/',
29+
},
30+
{
31+
text: 'Getting Started',
32+
link: '/guide/getting-started',
33+
},
34+
{
35+
text: 'Usage',
36+
link: '/guide/usage',
37+
},
38+
{
39+
text: 'Validation',
40+
link: '/guide/validation',
41+
},
42+
],
43+
},
44+
{
45+
text: 'API',
46+
children: [
47+
{
48+
text: 'Fields',
49+
link: '/guide/api/fields',
50+
},
51+
{
52+
text: 'Props',
53+
link: '/guide/api/props',
54+
children: [
55+
{
56+
text: 'Dynamic Form',
57+
link: '/guide/api/props/dynamic-form-props',
58+
},
59+
{
60+
text: 'Dynamic Input',
61+
link: '/guide/api/props/dynamic-input-props',
62+
},
63+
],
64+
},
65+
{
66+
text: 'Events',
67+
link: '/guide/api/events',
68+
},
69+
],
70+
},
71+
{
72+
text: 'Theming',
73+
children: [
74+
{
75+
text: 'Basic theming',
76+
link: '/guide/theming/basic',
77+
},
78+
],
79+
},
80+
{
81+
text: 'Advanced',
82+
children: [
83+
{
84+
text: 'Slots',
85+
link: '/guide/advanced/slots',
86+
},
87+
],
88+
},
89+
],
90+
},
91+
},
92+
}
93+
94+
module.exports = config

‎docs/.vitepress/config.ts

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎docs/.vitepress/dist/logo.png

8.44 KB
Loading

‎docs/.vitepress/dist/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎docs/.vitepress/theme/components/CheckboxInput.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div
3+
class="
4+
w-full
5+
flex
6+
justify-between
7+
container
8+
bg-white
9+
shadow-lg
10+
p-4
11+
rounded-lg
12+
my-8
13+
"
14+
>
15+
<div class="w-1/2">
16+
<dynamic-form :form="form" @change="updateValues" />
17+
</div>
18+
<div class="w-2/5 p-4">
19+
<Console :content="formValues" />
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script lang="ts">
25+
import { reactive } from 'vue'
26+
import { CheckboxField, Validator, required, DynamicForm } from '/@'
27+
28+
export default {
29+
name: 'CheckboxField',
30+
setup() {
31+
const formValues = reactive({})
32+
33+
const form = reactive<DynamicForm>({
34+
id: 'my-awesome-form',
35+
fields: {
36+
awesomeness: CheckboxField({
37+
label: "Check if you're awesome",
38+
}),
39+
required: CheckboxField({
40+
label: 'Required',
41+
customClass: 'w-1/2',
42+
validations: [
43+
Validator({
44+
validator: required,
45+
text: 'This field is required',
46+
}),
47+
],
48+
}),
49+
disabled: CheckboxField({
50+
label: 'Disabled',
51+
customClass: 'w-1/2',
52+
disabled: true,
53+
}),
54+
},
55+
})
56+
57+
function updateValues(values) {
58+
Object.assign(formValues, values)
59+
}
60+
61+
return {
62+
form,
63+
updateValues,
64+
formValues,
65+
}
66+
},
67+
}
68+
</script>

‎docs/.vitepress/theme/components/Console.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="console bg-marine text-white text-xs p-2 rounded-md relative">
3+
<ul class="absolute top-0 pl-2 mt-0 left-0">
4+
<li class="rounded w-2 h-2 bg-salmon inline-block mr-1"></li>
5+
<li class="rounded w-2 h-2 bg-yellow-300 inline-block mr-1"></li>
6+
<li class="rounded w-2 h-2 bg-green-500 inline-block"></li>
7+
</ul>
8+
<pre data-cy="form-values" class="pt-4" :data-formValues="jsonValues">{{
9+
content
10+
}}</pre>
11+
</div>
12+
</template>
13+
14+
<script lang="ts">
15+
import { computed, defineComponent } from 'vue'
16+
17+
const props = {
18+
content: String,
19+
}
20+
21+
export default defineComponent({
22+
name: 'console',
23+
props,
24+
setup(props) {
25+
const jsonValues = computed(() => JSON.stringify(props.content))
26+
return {
27+
jsonValues,
28+
}
29+
},
30+
})
31+
</script>

‎docs/.vitepress/theme/components/CustomField.vue

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div
3+
class="
4+
w-full
5+
flex
6+
justify-between
7+
container
8+
bg-white
9+
shadow-lg
10+
p-4
11+
rounded-lg
12+
my-8
13+
"
14+
>
15+
<div class="w-1/2">
16+
<dynamic-form :form="form" @change="updateValues">
17+
<template v-slot:avocado="{ control, onChange, onFocus, onBlur }">
18+
<div class="avocado-field">
19+
<input
20+
:id="control.name"
21+
v-if="control"
22+
class="form-control"
23+
v-model="control.value"
24+
:type="control.type"
25+
:name="control.name"
26+
@change="onChange"
27+
@focus="onFocus"
28+
@blur="onBlur"
29+
/>
30+
<i>🥑</i>
31+
</div>
32+
</template>
33+
</dynamic-form>
34+
</div>
35+
<div class="w-2/5 p-4">
36+
<Console :content="formValues" />
37+
</div>
38+
</div>
39+
</template>
40+
41+
<script lang="ts">
42+
import { reactive } from 'vue'
43+
import { CustomField, DynamicForm } from '/@'
44+
45+
export default {
46+
name: 'CustomField',
47+
setup() {
48+
const formValues = reactive({})
49+
50+
const form = reactive<DynamicForm>({
51+
id: 'my-awesome-form',
52+
fields: {
53+
avocado: CustomField({
54+
label: 'My Avocado field',
55+
}),
56+
},
57+
})
58+
59+
function updateValues(values) {
60+
Object.assign(formValues, values)
61+
}
62+
63+
return {
64+
form,
65+
updateValues,
66+
formValues,
67+
}
68+
},
69+
}
70+
</script>
71+
72+
<style lang="scss">
73+
.avocado-field {
74+
position: relative;
75+
76+
.form-control {
77+
border-color: #aec64c;
78+
background-color: #e2eb5d52;
79+
border-radius: 16px;
80+
width: 100%;
81+
}
82+
i {
83+
position: absolute;
84+
top: 7px;
85+
right: 20px;
86+
}
87+
}
88+
</style>

0 commit comments

Comments
 (0)