📄 Docs - Examples: Setup and 1st batch #28

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' },
@@ -78,6 +79,6 @@ export default defineConfig({
           { text: `FormHandler`, link: '/api/form-handler' }
         ]
       }
-    ]
+    ],
   }
 })

docs/.vitepress/theme/index.js

@@ -0,0 +1,10 @@
+import DefaultTheme from "vitepress/theme";
+import SandboxEmbedder from "../../components/SandboxEmbedder.vue";
+
+export default {
+    ...DefaultTheme,
+    enhanceApp(ctx) {
+        DefaultTheme.enhanceApp(ctx)
+        ctx.app.component('CodeExample', SandboxEmbedder)
+    }
+}

docs/components/SandboxEmbedder.vue

@@ -0,0 +1,43 @@
+<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"
+        :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>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+
+defineProps({
+    example: {
+        type: String,
+        required: true,
+    },
+})
+
+const height = ref(0)
+const width = ref(0)
+const fixedContainerPadding = 64
+
+const styleObject = computed(() => ({
+    width: `${width.value - fixedContainerPadding}px`,
+    height: `${height.value - fixedContainerPadding}px`,
+}))
+
+const setDimensions = () => {
+    height.value = Number(document.querySelector('.VPContent')?.clientHeight)
+    width.value = Number(document.querySelector('.VPDoc')?.clientWidth)
+}
+
+onMounted(() => {
+    setDimensions()
+})
+
+window.addEventListener('resize', setDimensions)
+</script>
+
+<style>
+
+</style>

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 +1,9 @@
-# Typescript
+---
+description: This example demonstrates how leverage typescript usage with the form handler.
+---
+
+# Typescript
+
+This example demonstrates how leverage typescript usage with the form handler.
+
+<CodeExample example="typescript"/>

docs/get-started/quick-start.md

@@ -262,10 +262,10 @@ const emailRegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
 
 const { values, register, formState, handleSubmit } = useFormHandler({ validationMode: 'always' });
 const successFn = (form: Record<string, any>) => { 
-    console.log('Form correctly submitted:' form) 
+    console.log('Form correctly submitted:', form) 
 }
-const errorFn = (errors: Record<string,string>) => {
-    console.error('There where errors while submitting the form:' errors)
+const errorFn = (errors: Record<string, any>) => {
+    console.error('There where errors while submitting the form:', errors)
 }
 </script>
 ```

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>