Merge pull request #3 from dbssman/feature/2-documentation-with-vitepress

🚀 Vitepress setup and structure

Author: dbssman

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Vitepress
+docs/.vitepress/cache

docs/.vitepress/config.cts

@@ -0,0 +1,45 @@
+import { defineConfig } from "vitepress"
+
+export default defineConfig({
+  title: 'Vue form handler',
+  description: 'Discover the easy way of handling your vue forms',
+  themeConfig: {
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Get started', link: '/getting-started' },
+    ],
+    sidebar: [
+      {
+        text: 'Documentation', items: [
+          { text: 'Get started', link: '/getting-started' },
+          { text: 'Tutorial', link: '/tutorial' },
+          {
+            text: 'Guides', items: [
+              { text: 'Validation', link: '/guides/validation' },
+              { text: 'Typescript', link: '/guides/typescript' },
+              { text: 'Form submission', link: '/guides/form-submission' },
+              { text: 'Custom components', link: '/guides/custom-components' },
+              { text: 'Native support', link: '/guides/native-support' },
+            ]
+          },
+          {
+            text: 'Examples', items: [
+              { text: 'Basic', link: '/examples/basic' },
+              { text: 'Async validations', link: '/examples/async-validations' },
+              { text: 'Typescript', link: '/examples/typescript' },
+              { text: 'Interceptor', link: '/examples/interceptor' },
+              { text: 'Dependent fields', link: '/examples/dependent-fields' },
+              { text: 'More examples', link: '/examples/more-examples' }
+            ]
+          },
+        ]
+      },
+      {
+        text: 'API Reference', items: [
+          { text: 'useFormHandler()', link: '/api/use-form-handler' },
+          { text: `FormHandler`, link: '/api/form-handler' }
+        ]
+      }
+    ]
+  }
+})

docs/api/form-handler.md

@@ -0,0 +1 @@
+# \<FormHandler/>

docs/api/use-form-handler.md

@@ -0,0 +1 @@
+# useFormHandler()

docs/examples/async-validations.md

@@ -0,0 +1 @@
+# Async validations

docs/examples/basic.md

@@ -0,0 +1 @@
+# Basic Example

docs/examples/dependent-fields.md

@@ -0,0 +1 @@
+# Dependent fields

docs/examples/interceptor.md

@@ -0,0 +1 @@
+# Interceptor

docs/examples/more-examples.md

@@ -0,0 +1 @@
+# More examples

docs/examples/typescript.md

@@ -0,0 +1 @@
+# Typescript

docs/getting-started.md

@@ -0,0 +1,31 @@
+# Getting started
+
+## Some section
+
+Some content here
+
+
+## Another section
+
+More content there
+
+
+## Basic example 
+
+Some code there
+
+``` vue
+<template>
+	<form @submit.prevent="handleSubmit(successFn)">
+		<input v-bind="register('firstName')" />
+		<input v-bind="register('lastName')" />
+		<input v-bind="register('age')" />
+		<input type="submit"/>
+	</form>
+</template>
+<script setup>
+import { useFormHandler } from 'vue-form-handler';
+const { values, formState, register, handleSubmit } = useFormHandler();
+const successFn = (form) => {console.log({form})}
+</script>
+```

docs/guides/custom-components.md

@@ -0,0 +1 @@
+# Custom components

docs/guides/form-submission.md

@@ -0,0 +1 @@
+# Form submission

docs/guides/native-support.md

@@ -0,0 +1 @@
+# Native support

docs/guides/typescript.md

@@ -0,0 +1 @@
+# Typescript

docs/guides/validation.md

@@ -0,0 +1 @@
+# Validation

docs/index.md

@@ -0,0 +1,38 @@
+---
+layout: home
+
+hero:
+  name: Vue form handler
+  text: Vue & TS powered form handler.
+  tagline: The only handler you'll need to easily work with forms in vue
+  image:
+    src: /logo.png
+    alt: Vue form handler
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /getting-started
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/dbssman/vue-form-handler
+
+features:
+  - title: Fully tree shakeable
+    details: Only take what you want
+    icon: ⚡
+  - title: Type Strong
+    details: Written in TypeScript, with full TS docs
+    icon: 💪
+  - title: Flexible
+    details: You can wrap the handler over native inputs or any other like the ones from material libraries or custom inputs
+    icon: 🔩
+  - title: Super light
+    details: Small package size
+    icon: 🪶
+  - title: DX
+    details: Great development experience
+    icon: 💻
+  - title: Interactive demos
+    details: Documentation of functions also come with interactive demos!
+    icon: 🎪
+---

docs/tutorial.md

@@ -0,0 +1 @@
+# Tutorial