Skip to content
This repository was archived by the owner on Apr 9, 2025. It is now read-only.

Commit 4f29257

Browse files
dbssmandbssman
authored
Merge pull request #41 from dbssman/feature/28-docs-examples
📄 Docs - Examples: Setup and 1st batch #28
2 parents 949b635 + 4b31454 commit 4f29257

33 files changed

+3785
-42
lines changed

‎docs/.vitepress/config.cts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export default defineConfig({
4747
},
4848
{
4949
text: 'Examples', collapsible: true, items: [
50+
{ text: 'Async submission', link: '/examples/async-submission' },
5051
{ text: 'Async validations', link: '/examples/async-validations' },
5152
{ text: 'Basic', link: '/examples/basic' },
5253
{ text: 'Dependent fields', link: '/examples/dependent-fields' },
@@ -78,6 +79,6 @@ export default defineConfig({
7879
{ text: `FormHandler`, link: '/api/form-handler' }
7980
]
8081
}
81-
]
82+
],
8283
}
8384
})

‎docs/.vitepress/theme/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import DefaultTheme from "vitepress/theme";
2+
import SandboxEmbedder from "../../components/SandboxEmbedder.vue";
3+
4+
export default {
5+
...DefaultTheme,
6+
enhanceApp(ctx) {
7+
DefaultTheme.enhanceApp(ctx)
8+
ctx.app.component('CodeExample', SandboxEmbedder)
9+
}
10+
}

‎docs/components/SandboxEmbedder.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<iframe
3+
:src="`https://codesandbox.io/embed/github/dbssman/vue-form-handler/tree/master/examples/${example}?fontsize=12&hidenavigation=1&theme=dark`"
4+
style="border:0;borderRadius:4;overflow:hidden" :style="styleObject"
5+
:title="`dbssman/vue-form-handler: ${example}`"
6+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
7+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
8+
</template>
9+
10+
<script setup lang="ts">
11+
import { computed, onMounted, ref } from 'vue';
12+
13+
defineProps({
14+
example: {
15+
type: String,
16+
required: true,
17+
},
18+
})
19+
20+
const height = ref(0)
21+
const width = ref(0)
22+
const fixedContainerPadding = 64
23+
24+
const styleObject = computed(() => ({
25+
width: `${width.value - fixedContainerPadding}px`,
26+
height: `${height.value - fixedContainerPadding}px`,
27+
}))
28+
29+
const setDimensions = () => {
30+
height.value = Number(document.querySelector('.VPContent')?.clientHeight)
31+
width.value = Number(document.querySelector('.VPDoc')?.clientWidth)
32+
}
33+
34+
onMounted(() => {
35+
setDimensions()
36+
})
37+
38+
window.addEventListener('resize', setDimensions)
39+
</script>
40+
41+
<style>
42+
43+
</style>

‎docs/examples/async-submission.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
description: This example shows how to use `async/await` to submit a form with VueFormHandler
3+
---
4+
# Async submission
5+
This example shows how to use `async/await` to submit a form with VueFormHandler
6+
7+
<CodeExample example="async-submission"></CodeExample>

‎docs/examples/async-validations.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
# Async validations
1+
---
2+
description: This example shows how to make use of asynchronous validations
3+
---
4+
# Async validations
5+
6+
This example shows how to make use of asynchronous validations
7+
8+
<CodeExample example="async-validations"></CodeExample>

‎docs/examples/typescript.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
# Typescript
1+
---
2+
description: This example demonstrates how leverage typescript usage with the form handler.
3+
---
4+
5+
# Typescript
6+
7+
This example demonstrates how leverage typescript usage with the form handler.
8+
9+
<CodeExample example="typescript"/>

‎docs/get-started/quick-start.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -262,10 +262,10 @@ const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
262262
263263
const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
264264
const successFn = (form: Record<string, any>) => {
265-
console.log('Form correctly submitted:' form)
265+
console.log('Form correctly submitted:', form)
266266
}
267-
const errorFn = (errors: Record<string,string>) => {
268-
console.error('There where errors while submitting the form:' errors)
267+
const errorFn = (errors: Record<string, any>) => {
268+
console.error('There where errors while submitting the form:', errors)
269269
}
270270
</script>
271271
```

‎examples/async-submission/App.vue

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<template>
2+
<section>
3+
<form @submit.prevent="submit()">
4+
<label>Email:
5+
<input type="email" v-bind="register('email', {
6+
required: true,
7+
pattern: emailRegExp,
8+
})" />
9+
</label>
10+
<p class="error" v-show="formState.errors.email">
11+
{{ formState.errors.email }}
12+
</p>
13+
<label> Password:
14+
<input type="password" v-bind="register('password', {
15+
required: true,
16+
pattern: passwordRegExp
17+
})" />
18+
</label>
19+
<p class="error" v-show="formState.errors.password">
20+
{{ formState.errors.password }}
21+
</p>
22+
<label> Confirm Password:
23+
<input type="password" v-bind="register('confirmPassword', {
24+
required: true,
25+
pattern: passwordRegExp,
26+
validate: {
27+
match: (value) => value === values.password || 'Passwords do not match'
28+
}
29+
})" />
30+
</label>
31+
<p class="error" v-show="formState.errors.confirmPassword">
32+
{{ formState.errors.confirmPassword }}
33+
</p>
34+
<button>Submit</button>
35+
</form>
36+
</section>
37+
</template>
38+
<script lang="ts" >
39+
import { useFormHandler } from 'vue-form-handler';
40+
41+
export default {
42+
setup: () => {
43+
const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
44+
const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
45+
46+
const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
47+
48+
// success/error functions can be used in the handleSubmit function to handle the form submission
49+
const successFn = (form: Record<string, any>) => {
50+
console.log('Form correctly submitted:', form)
51+
}
52+
53+
const errorFn = (errors: Record<string, any>) => {
54+
console.error('There where errors while submitting the form:', errors)
55+
}
56+
57+
// async/await can be used to do things after the form submission
58+
const submit = async () => {
59+
await handleSubmit(successFn, errorFn)
60+
alert(`was success? ${formState.isValid}`)
61+
// Do something else
62+
}
63+
64+
return {
65+
passwordRegExp,
66+
emailRegExp,
67+
values,
68+
register,
69+
formState,
70+
submit
71+
}
72+
}
73+
}
74+
75+
76+
</script>
77+
78+
<style>
79+
* {
80+
box-sizing: border-box;
81+
margin: 0;
82+
padding: 0;
83+
text-align: center;
84+
}
85+
86+
body {
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
background-color: #242424;
91+
font-family: 'Open Sans', sans-serif;
92+
font-size: 16px;
93+
color: #42B883;
94+
min-height: 100vh;
95+
}
96+
97+
label {
98+
display: block;
99+
}
100+
101+
form {
102+
display: flex;
103+
flex-direction: column;
104+
align-items: flex-end;
105+
gap: 1rem
106+
}
107+
108+
109+
110+
input,
111+
select,
112+
textarea,
113+
button {
114+
border: none;
115+
border-radius: 5px;
116+
width: 300px;
117+
min-height: 40px;
118+
background-color: #35495E;
119+
color: #42B883;
120+
}
121+
122+
button {
123+
background-color: #42B883;
124+
color: #35495E;
125+
cursor: pointer;
126+
text-transform: uppercase;
127+
font-weight: bold;
128+
}
129+
</style>

‎examples/async-submission/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Vue 3 + TypeScript + Vite
2+
3+
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
8+
9+
## Type Support For `.vue` Imports in TS
10+
11+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12+
13+
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14+
15+
1. Disable the built-in TypeScript Extension
16+
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17+
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18+
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

‎examples/async-submission/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Async validations</title>
8+
</head>
9+
10+
<body>
11+
<div id="app"></div>
12+
</body>
13+
<script type="module">
14+
import { createApp } from 'vue'
15+
import App from './App.vue'
16+
17+
createApp(App).mount('#app')
18+
19+
</script>
20+
21+
</html>

0 commit comments

Comments
 (0)