Skip to content

Commit 7369507

Browse files
dbssmandbssman
authored
Merge pull request #43 from dbssman/feautre/42-docs-examples-2nd-batch
📄 Docs - Examples: 2nd batch #42
2 parents 4f29257 + 7bda1a9 commit 7369507

33 files changed

+5094
-20
lines changed

‎.vscode/extensions.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"recommendations": ["Vue.volar"]
3-
}
2+
"recommendations": [
3+
"Vue.volar",
4+
"Vue.vscode-typescript-vue-plugin"
5+
]
6+
}

‎docs/.vitepress/config.cts

-3
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,6 @@ export default defineConfig({
5151
{ text: 'Async validations', link: '/examples/async-validations' },
5252
{ text: 'Basic', link: '/examples/basic' },
5353
{ text: 'Dependent fields', link: '/examples/dependent-fields' },
54-
{ text: 'Interceptor', link: '/examples/interceptor' },
55-
{ text: 'More examples', link: '/examples/more-examples' },
56-
{ text: 'Typescript', link: '/examples/typescript' },
5754
]
5855
},
5956
{

‎docs/components/SandboxEmbedder.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<iframe
33
: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"
4+
style="border:0;borderRadius:4;overflow:hidden;max-height:100vh" :style="styleObject"
55
:title="`dbssman/vue-form-handler: ${example}`"
66
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
77
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

‎docs/examples/basic.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
# Basic Example
1+
---
2+
description: This example shows how use the handler in it's most basic way
3+
---
4+
# Basic
5+
6+
This example shows how use the handler in it's most basic way
7+
8+
<CodeExample example="basic"></CodeExample>

‎docs/examples/dependent-fields.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
# Dependent fields
1+
---
2+
description: This example shows set and reset values of fields based on the current value of other fields with the form handler
3+
---
4+
# Dependent fields
5+
6+
This example shows set and reset values of fields based on the current value of other fields with the form handler
7+
8+
<CodeExample example="dependent-fields"></CodeExample>

‎docs/examples/interceptor.md

-1
This file was deleted.

‎docs/examples/more-examples.md

-1
This file was deleted.

‎docs/examples/typescript.md

-9
This file was deleted.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Welcome to the VueFormHandler tutorial. This will teach you everything you need
66

77
### What are we building?
88

9-
In this tutorial, we'll build a sign up form with Vue and VueFormHandler [Link here](somelink.com). If the code looks strange or you don't fully understand something, don't worry we'll go over this tutorial to help you understand how the handler works.
9+
In this tutorial, we'll build a sign up form with Vue and VueFormHandler [Link here](https://codesandbox.io/embed/github/dbssman/vue-form-handler/tree/master/examples/tutorial?fontsize=12&hidenavigation=0&theme=dark). If the code looks strange or you don't fully understand something, don't worry we'll go over this tutorial to help you understand how the handler works.
1010

1111
### Prerequisites
1212

‎examples/basic/App.vue

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<section>
3+
<form @submit.prevent="handleSubmit(successFn)">
4+
<label>Email:
5+
<input type="email" v-bind="register('email')" />
6+
</label>
7+
<label> Password:
8+
<input type="password" v-bind="register('password')" />
9+
</label>
10+
<label> Confirm Password:
11+
<input type="password" v-bind="register('confirmPassword')" />
12+
</label>
13+
<button>Submit</button>
14+
</form>
15+
</section>
16+
</template>
17+
<script lang="ts" >
18+
import { useFormHandler } from 'vue-form-handler';
19+
20+
export default {
21+
setup: () => {
22+
const { register, handleSubmit } = useFormHandler({ validationMode: 'always' });
23+
const successFn = (form: Record<string, any>) => {
24+
console.log('Form correctly submitted:', form)
25+
}
26+
27+
return {
28+
register,
29+
handleSubmit,
30+
successFn,
31+
}
32+
}
33+
}
34+
35+
</script>
36+
37+
<style>
38+
* {
39+
box-sizing: border-box;
40+
margin: 0;
41+
padding: 0;
42+
text-align: center;
43+
}
44+
45+
body {
46+
display: flex;
47+
align-items: center;
48+
justify-content: center;
49+
background-color: #242424;
50+
font-family: 'Open Sans', sans-serif;
51+
font-size: 16px;
52+
color: #42B883;
53+
min-height: 100vh;
54+
}
55+
56+
label {
57+
display: block;
58+
}
59+
60+
form {
61+
display: flex;
62+
flex-direction: column;
63+
align-items: flex-end;
64+
gap: 1rem
65+
}
66+
67+
68+
69+
input,
70+
select,
71+
textarea,
72+
button {
73+
border: none;
74+
border-radius: 5px;
75+
width: 300px;
76+
min-height: 40px;
77+
background-color: #35495E;
78+
color: #42B883;
79+
}
80+
81+
button {
82+
background-color: #42B883;
83+
color: #35495E;
84+
cursor: pointer;
85+
text-transform: uppercase;
86+
font-weight: bold;
87+
}
88+
</style>

‎examples/basic/README.md

+18
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/basic/index.html

+21
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>Basic</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)