Docs - Examples: 2nd batch #42

.vscode/extensions.json

@@ -1,3 +1,6 @@
 {
-  "recommendations": ["Vue.volar"]
-}
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin"
+  ]
+}

docs/.vitepress/config.cts

@@ -51,9 +51,6 @@ export default defineConfig({
           { text: 'Async validations', link: '/examples/async-validations' },
           { text: 'Basic', link: '/examples/basic' },
           { text: 'Dependent fields', link: '/examples/dependent-fields' },
-          { text: 'Interceptor', link: '/examples/interceptor' },
-          { text: 'More examples', link: '/examples/more-examples' },
-          { text: 'Typescript', link: '/examples/typescript' },
         ]
       },
       {

docs/components/SandboxEmbedder.vue

@@ -1,7 +1,7 @@
 <template>
     <iframe
         :src="`https://codesandbox.io/embed/github/dbssman/vue-form-handler/tree/master/examples/${example}?fontsize=12&hidenavigation=1&theme=dark`"
-        style="border:0;borderRadius:4;overflow:hidden" :style="styleObject"
+        style="border:0;borderRadius:4;overflow:hidden;max-height:100vh" :style="styleObject"
         :title="`dbssman/vue-form-handler: ${example}`"
         allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
         sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

docs/examples/basic.md

@@ -1 +1,8 @@
-# Basic Example
+---
+description: This example shows how use the handler in it's most basic way
+---
+# Basic
+
+This example shows how use the handler in it's most basic way
+
+<CodeExample example="basic"></CodeExample>

docs/examples/dependent-fields.md

@@ -1 +1,8 @@
-# Dependent fields
+---
+description: This example shows set and reset values of fields based on the current value of other fields with the form handler
+---
+# Dependent fields
+
+This example shows set and reset values of fields based on the current value of other fields with the form handler
+
+<CodeExample example="dependent-fields"></CodeExample>

docs/get-started/quick-start.md

@@ -6,7 +6,7 @@ Welcome to the VueFormHandler tutorial. This will teach you everything you need
 
 ### What are we building?
 
-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.
+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.
 
 ### Prerequisites
 

examples/basic/App.vue

@@ -0,0 +1,88 @@
+<template>
+  <section>
+    <form @submit.prevent="handleSubmit(successFn)">
+      <label>Email:
+        <input type="email" v-bind="register('email')" />
+      </label>
+      <label> Password:
+        <input type="password" v-bind="register('password')" />
+      </label>
+      <label> Confirm Password:
+        <input type="password" v-bind="register('confirmPassword')" />
+      </label>
+      <button>Submit</button>
+    </form>
+  </section>
+</template>
+<script lang="ts" >
+import { useFormHandler } from 'vue-form-handler';
+
+export default {
+  setup: () => {
+    const { register, handleSubmit } = useFormHandler({ validationMode: 'always' });
+    const successFn = (form: Record<string, any>) => {
+      console.log('Form correctly submitted:', form)
+    }
+
+    return {
+      register,
+      handleSubmit,
+      successFn,
+    }
+  }
+}
+
+</script>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #242424;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  color: #42B883;
+  min-height: 100vh;
+}
+
+label {
+  display: block;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1rem
+}
+
+
+
+input,
+select,
+textarea,
+button {
+  border: none;
+  border-radius: 5px;
+  width: 300px;
+  min-height: 40px;
+  background-color: #35495E;
+  color: #42B883;
+}
+
+button {
+  background-color: #42B883;
+  color: #35495E;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+</style>

examples/basic/README.md

@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+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.
+
+## Recommended IDE Setup
+
+- [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).
+
+## Type Support For `.vue` Imports in TS
+
+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.
+
+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:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

examples/basic/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Basic</title>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+<script type="module">
+  import { createApp } from 'vue'
+  import App from './App.vue'
+
+  createApp(App).mount('#app')
+
+</script>
+
+</html>