Skip to content

Commit 29efdb1

Browse files
kevinkosterrkevinkosterr
committed
Merge branch 'master' into production
2 parents 6430da1 + c7b0108 commit 29efdb1

Some content is hidden

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

58 files changed

+3097
-2
lines changed

‎.github/workflows/deploy-vitepress.yml

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
name: Deploy VitePress site to Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- production
7+
8+
workflow_dispatch:
9+
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
concurrency:
16+
group: pages
17+
cancel-in-progress: false
18+
19+
jobs:
20+
# Build job
21+
build:
22+
runs-on: ubuntu-latest
23+
steps:
24+
- uses: actions/checkout@v4
25+
- name: Install pnpm
26+
uses: pnpm/action-setup@v4
27+
with:
28+
version: 10
29+
- uses: actions/setup-node@v4
30+
with:
31+
node-version: 20
32+
cache: 'pnpm'
33+
- name: Setup Pages
34+
uses: actions/configure-pages@v4
35+
- name: Install dependencies
36+
run: pnpm install
37+
- name: Build with VitePress
38+
run: pnpm run docs:build
39+
- name: Upload artifact
40+
uses: actions/upload-pages-artifact@v3
41+
with:
42+
path: apps/docs/.vitepress/dist
43+
44+
deploy:
45+
environment:
46+
name: github-pages
47+
url: ${{ steps.deployment.outputs.page_url }}
48+
needs: build
49+
runs-on: ubuntu-latest
50+
name: Deploy
51+
steps:
52+
- name: Deploy to GitHub Pages
53+
id: deployment
54+
uses: actions/deploy-pages@v4

‎apps/docs/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.vitepress/dist
2+
.vitepress/cache

‎apps/docs/.vitepress/config.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { defineConfig } from 'vitepress'
2+
import path from 'path'
3+
4+
// https://vitepress.dev/reference/site-config
5+
export default defineConfig({
6+
base: '/vue3-form-generator/',
7+
title: 'Vue3 Form Generator',
8+
description: 'Documentation for vue3-form-generator',
9+
themeConfig: {
10+
nav: [
11+
{ text: 'Home', link: '/' }
12+
],
13+
14+
sidebar: [
15+
{
16+
text: 'Introduction',
17+
items: [
18+
{ text: 'Getting started', link: 'guide/introduction/getting-started' },
19+
{ text: 'Field schema overview', link: 'guide/introduction/field-overview' }
20+
]
21+
},
22+
{
23+
text: 'Customization',
24+
items: [
25+
{ text: 'Custom field components', link: '/guide/customization/custom-components' },
26+
{ text: 'Custom validators', link: '/guide/customization/custom-validators' }
27+
]
28+
},
29+
{
30+
text: 'Composables',
31+
items: [
32+
{ text: 'useFieldAttributes', link: '/guide/composables/useFieldAttributes' },
33+
{ text: 'useFieldEmits', link: '/guide/composables/useFieldEmits' },
34+
{ text: 'useFieldProps', link: '/guide/composables/useFieldProps' },
35+
{ text: 'useFieldValidate', link: '/guide/composables/useFieldValidate' },
36+
{ text: 'useFormModel', link: '/guide/composables/useFormModel' }
37+
]
38+
},
39+
{
40+
text: 'Form Generator',
41+
items: [
42+
{ text: 'Props', link: '/guide/form-generator/props' },
43+
{ text: 'Events', link: '/guide/form-generator/events' }
44+
]
45+
},
46+
{
47+
text: 'Fields',
48+
items: [
49+
{ text: 'FieldButton', link: '/guide/fields/FieldButton' },
50+
{ text: 'FieldCheckbox', link: '/guide/fields/FieldCheckbox' },
51+
{ text: 'FieldColor', link: '/guide/fields/FieldColor' },
52+
{ text: 'FieldMask', link: '/guide/fields/FieldMask' },
53+
{ text: 'FieldNumber', link: '/guide/fields/FieldNumber' },
54+
{ text: 'FieldPassword', link: '/guide/fields/FieldPassword' },
55+
{ text: 'FieldRadio', link: '/guide/fields/FieldRadio' },
56+
{ text: 'FieldReset', link: '/guide/fields/FieldReset' },
57+
{ text: 'FieldSelect', link: '/guide/fields/FieldSelect' },
58+
{ text: 'FieldSelectNative', link: '/guide/fields/FieldSelectNative' },
59+
{ text: 'FieldSubmit', link: '/guide/fields/FieldSubmit' },
60+
{ text: 'FieldSwitch', link: '/guide/fields/FieldSwitch' },
61+
{ text: 'FieldText', link: '/guide/fields/FieldText' },
62+
{ text: 'FieldTextarea', link: '/guide/fields/FieldTextarea' }
63+
]
64+
},
65+
{
66+
text: 'Mixins <span class="VPBadge custom warning">deprecated</span>',
67+
items: [
68+
{ text: 'abstractField', link: '/guide/mixins/abstractField' }
69+
]
70+
}
71+
],
72+
73+
socialLinks: [
74+
{ icon: 'github', link: 'https://github.com/kevinkosterr/vue3-form-generator' }
75+
]
76+
},
77+
vite: {
78+
resolve: {
79+
alias: {
80+
'@': path.resolve(__dirname, '../../../src')
81+
}
82+
}
83+
}
84+
})

‎apps/docs/.vitepress/theme/index.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
fieldset {
2+
border: none;
3+
margin: .2rem;
4+
}
5+
6+
.vue-form-generator input {
7+
background: #efefefef;
8+
color: #272727FE;
9+
}
10+
11+
.VPSidebarItem .VPBadge {
12+
float: right;
13+
}
14+
15+
.VPBadge.custom {
16+
padding: 0 5px;
17+
border-radius: 8px;
18+
font-size: 11px;
19+
}
20+
21+
.VPBadge.new {
22+
background-color: #1b8c57;
23+
color: #deded6;
24+
}

‎apps/docs/.vitepress/theme/index.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import VueFormGenerator from '@/index'
3+
4+
import './index.css'
5+
import '@/scss/themes/basic.scss'
6+
7+
export default {
8+
extends: DefaultTheme,
9+
enhanceApp({ app }) {
10+
app.use(VueFormGenerator, {
11+
messages: {
12+
productCodeValidator: 'Your product code is invalid'
13+
}
14+
})
15+
}
16+
}

‎apps/docs/components/FieldButtonExample.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<vue-form-generator :schema="form.schema" :model="form.model" />
3+
</template>
4+
5+
<script setup>
6+
import { ref } from 'vue'
7+
8+
const form = ref({
9+
model: {},
10+
schema: {
11+
fields: [
12+
{
13+
type: 'button',
14+
buttonText: 'Show me something',
15+
onClick: () => {
16+
alert('Here it is!')
17+
}
18+
}
19+
]
20+
}
21+
})
22+
</script>

‎apps/docs/components/FieldButtonExampleWithSideEffect.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<vue-form-generator :schema="form.schema" :model="form.model" />
3+
</template>
4+
5+
<script setup>
6+
import { ref, watch } from 'vue'
7+
8+
const form = ref({
9+
model: {
10+
checkboxExample: false
11+
},
12+
schema: {
13+
fields: [
14+
{
15+
type: 'input',
16+
inputType: 'checkbox',
17+
model: 'checkboxExample'
18+
},
19+
{
20+
type: 'button',
21+
buttonText: 'Magically check the box',
22+
onClick: (model, field) => {
23+
model.checkboxExample = true
24+
field.buttonText = 'Wow! Incredible!'
25+
}
26+
}
27+
]
28+
}
29+
})
30+
31+
watch(() => form.value.schema.fields[1].buttonText, (val) => {
32+
if (val.includes('Wow!')) {
33+
setTimeout(() => {
34+
form.value.schema.fields[1].buttonText = 'Magically check the box'
35+
}, 2000)
36+
}
37+
})
38+
39+
</script>

‎apps/docs/components/FieldCheckboxExample.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
readTutorial: <code>{{ form.model.readTutorial }}</code>
3+
<vue-form-generator :schema="form.schema" :model="form.model"/>
4+
</template>
5+
6+
<script setup>
7+
import { ref } from 'vue'
8+
9+
const form = ref({
10+
model: {
11+
readTutorial: false
12+
},
13+
schema: {
14+
fields: [
15+
{
16+
name: 'tutorialRead',
17+
label: 'Have you read the tutorial?',
18+
model: 'readTutorial',
19+
type: 'input',
20+
inputType: 'checkbox'
21+
}
22+
]
23+
}
24+
})
25+
</script>

‎apps/docs/components/FieldColorExample.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup>
2+
import { ref, onBeforeMount } from 'vue'
3+
4+
const props = defineProps({
5+
withInput: Boolean
6+
})
7+
8+
const form = ref({
9+
model: {
10+
colorChoice: '#3f3f3f'
11+
},
12+
schema: {
13+
fields: [
14+
{
15+
name: 'choiceColor',
16+
label: 'Choose a color',
17+
model: 'colorChoice',
18+
type: 'input',
19+
inputType: 'color'
20+
}
21+
]
22+
}
23+
})
24+
25+
onBeforeMount(() => {
26+
form.value.schema.fields[0].withInput = props.withInput
27+
})
28+
</script>
29+
30+
<template>
31+
<ul>
32+
<li>Hex: {{ form.model.colorChoice }}</li>
33+
<li v-if="!props.withInput">As badge background: <span class="VPBadge" :style="'background:' + form.model.colorChoice">your color</span></li>
34+
</ul>
35+
<vue-form-generator :schema="form.schema" :model="form.model"/>
36+
</template>

‎apps/docs/components/FieldMaskExample.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
creditCard: <code style="margin-left: 0.4rem">{{ form.model.creditCard }}</code>
3+
<vue-form-generator :schema="form.schema" :model="form.model"/>
4+
</template>
5+
6+
<script setup>
7+
import { ref, onBeforeMount } from 'vue'
8+
9+
const props = defineProps({
10+
unmasked: Boolean
11+
})
12+
13+
const form = ref({
14+
model: {
15+
creditCard: ''
16+
},
17+
schema: {
18+
fields: [
19+
{
20+
name: 'creditCardExample',
21+
label: 'Credit card',
22+
model: 'creditCard',
23+
type: 'mask',
24+
mask: '#### #### #### ####',
25+
maskOptions: {
26+
eager: true
27+
}
28+
}
29+
]
30+
}
31+
})
32+
33+
onBeforeMount(() => {
34+
form.value.schema.fields[0].maskOptions.unmasked = props.unmasked
35+
})
36+
</script>

0 commit comments

Comments
 (0)