Merge pull request #43 from dbssman/feautre/42-docs-examples-2nd-batch

📄 Docs - Examples: 2nd batch #42

Author: dbssman

.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/examples/interceptor.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
 

docs/examples/more-examples.md

@@ -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>