📄 Docs examples 1st batch:

- Setup
- Embedding component
- Async submission
- Async validations

Author: dbssman

docs/.vitepress/config.cts

@@ -47,6 +47,7 @@ export default defineConfig({
       },
       {
         text: 'Examples', collapsible: true, items: [
+          { text: 'Async submission', link: '/examples/async-submission' },
           { text: 'Async validations', link: '/examples/async-validations' },
           { text: 'Basic', link: '/examples/basic' },
           { text: 'Dependent fields', link: '/examples/dependent-fields' },

docs/examples/async-submission.md

@@ -0,0 +1,7 @@
+---
+description: This example shows how to use `async/await` to submit a form with VueFormHandler
+---
+# Async submission
+This example shows how to use `async/await` to submit a form with VueFormHandler
+
+<CodeExample example="async-submission"></CodeExample>

docs/examples/async-validations.md

@@ -1 +1,8 @@
-# Async validations
+---
+description: This example shows how to make use of asynchronous validations
+---
+# Async validations
+
+This example shows how to make use of asynchronous validations
+
+<CodeExample example="async-validations"></CodeExample>

docs/examples/typescript.md

@@ -1,3 +1,7 @@
+---
+description: This example demonstrates how leverage typescript usage with the form handler.
+---
+
 # Typescript
 
 This example demonstrates how leverage typescript usage with the form handler.

examples/async-submission/App.vue

@@ -0,0 +1,129 @@
+<template>
+  <section>
+    <form @submit.prevent="submit()">
+      <label>Email:
+        <input type="email" v-bind="register('email', {
+          required: true,
+          pattern: emailRegExp,
+        })" />
+      </label>
+      <p class="error" v-show="formState.errors.email">
+        {{ formState.errors.email }}
+      </p>
+      <label> Password:
+        <input type="password" v-bind="register('password', {
+          required: true,
+          pattern: passwordRegExp
+        })" />
+      </label>
+      <p class="error" v-show="formState.errors.password">
+        {{ formState.errors.password }}
+      </p>
+      <label> Confirm Password:
+        <input type="password" v-bind="register('confirmPassword', {
+          required: true,
+          pattern: passwordRegExp,
+          validate: {
+            match: (value) => value === values.password || 'Passwords do not match'
+          }
+        })" />
+      </label>
+      <p class="error" v-show="formState.errors.confirmPassword">
+        {{ formState.errors.confirmPassword }}
+      </p>
+      <button>Submit</button>
+    </form>
+  </section>
+</template>
+<script lang="ts" >
+import { useFormHandler } from 'vue-form-handler';
+
+export default {
+  setup: () => {
+    const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
+    const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
+
+    const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
+
+    // success/error functions can be used in the handleSubmit function to handle the form submission
+    const successFn = (form: Record<string, any>) => {
+      console.log('Form correctly submitted:', form)
+    }
+
+    const errorFn = (errors: Record<string, any>) => {
+      console.error('There where errors while submitting the form:', errors)
+    }
+
+    // async/await can be used to do things after the form submission
+    const submit = async () => {
+      await handleSubmit(successFn, errorFn)
+      alert(`was success? ${formState.isValid}`)
+      // Do something else
+    }
+
+    return {
+      passwordRegExp,
+      emailRegExp,
+      values,
+      register,
+      formState,
+      submit
+    }
+  }
+}
+
+
+</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/async-submission/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/async-submission/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>Async validations</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>