chore(docs): docs work

packages/docs/.vitepress/config.ts

@@ -1,7 +1,5 @@
-import UnoCSS from 'unocss/vite';
 import { defineConfig } from 'vitepress';
 
-// https://vitepress.dev/reference/site-config
 export default defineConfig({
 	title: '@vuetils/form',
 	description: 'Vue form validation made easy',
@@ -11,34 +9,40 @@ export default defineConfig({
 
 	themeConfig: {
 		nav: [
-			{ text: 'Guide', link: '/getting-started' },
+			{ text: 'Guide', link: '/introduction/getting-started' },
 			{ text: 'API', link: '/api' },
 		],
 
 		sidebar: [
 			{
 				text: 'Introduction',
 				items: [
-					{ text: 'Getting Started', link: '/getting-started' },
-					{ text: 'Runtime API Examples', link: '/api-examples' },
+					{ text: 'Why?', link: '/introduction/' },
+					{ text: 'Getting Started', link: '/introduction/getting-started' },
 				],
 			},
 			{
 				text: 'Core Concepts',
-				items: [],
-			},
-			{
-				text: 'Plugins',
-				items: [],
+				items: [
+					{ text: 'Define a form', link: '/core-concepts/' },
+					{ text: 'Components', link: '/core-concepts/components' },
+					{ text: 'Validators', link: '/core-concepts/validators' },
+					{ text: 'Plugins', link: '/core-concepts/plugins' },
+				],
 			},
 			{
-				text: 'API',
-				items: [],
+				text: 'API Reference',
+				link: '/api',
 			},
 		],
 
 		socialLinks: [{ icon: 'github', link: 'https://github.com/YannicEl/vue-useForm' }],
 
+		footer: {
+			copyright: 'Copyright © 2023-present Yannic Ellhotka',
+			message: 'Released under the MIT License.',
+		},
+
 		editLink: {
 			pattern: 'https://github.com/YannicEl/vue-useForm/edit/main/packages/docs/:path',
 			text: 'Edit this page on GitHub',
@@ -53,8 +57,4 @@ export default defineConfig({
 		hostname: 'https://example.com',
 		lastmodDateOnly: true,
 	},
-
-	vite: {
-		plugins: [UnoCSS()],
-	},
 });

packages/docs/.vitepress/theme/index.ts

@@ -1,6 +1,5 @@
 import DefaultTheme from 'vitepress/theme';
 
-import 'virtual:uno.css';
 import './main.scss';
 
 export default {

packages/docs/.vitepress/theme/main.scss

@@ -1,14 +1,43 @@
 .v-form {
 	display: flex;
 	flex-direction: column;
+	gap: 1rem;
+
+	button {
+		display: inline-flex;
+		justify-content: center;
+		padding: 0.5rem 1.5rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		border: 1px solid rgb(209, 213, 219);
+		border-radius: 0.375rem;
+		background: rgba(209, 213, 219, 0.2);
+		margin-top: 1rem;
+
+		&:hover {
+			background: rgba(209, 213, 219, 0.4);
+		}
+	}
 }
 
 .v-label {
 	display: flex;
 	flex-direction: column;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	font-weight: 600;
+	padding-left: 1rem;
 
-	& input {
-		color: black;
-		background: white;
+	& .v-input {
+		font-family: inherit;
+		appearance: none;
+		border: 1px solid rgb(209, 213, 219);
+		border-radius: 0.375rem;
+		padding: 0.5rem 1rem;
+		margin-left: -1rem;
+		margin-top: 0.25rem;
+		font-size: 1rem;
+		line-height: 1.5rem;
+		box-shadow: 0 2px 2px #0000000d;
 	}
 }

packages/docs/api.md

@@ -1,54 +1,12 @@
----
-outline: deep
----
+# API Reference
 
-# Runtime API Examples
+## useForm()
 
-This page demonstrates usage of some of the runtime APIs provided by VitePress.
+<<< @/node_modules/@vuetils/form/dist/useForm.d.ts
 
-The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+## useField()
 
-```md
-<script setup>
-import { useData } from 'vitepress'
-
-const { theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-
-<pre>{{ theme }}</pre>
-
-### Page Data
-
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-
-<pre>{{ frontmatter }}</pre>
-```
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site, theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-
-<pre>{{ theme }}</pre>
-
-### Page Data
-
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-
-<pre>{{ frontmatter }}</pre>
+<<< @/node_modules/@vuetils/form/dist/useField.d.ts
 
 ## More
 

packages/docs/core-concepts/components.md

@@ -0,0 +1 @@
+# Components

packages/docs/core-concepts/index.md

@@ -0,0 +1 @@
+# Define a Form

packages/docs/core-concepts/plugins.md

@@ -0,0 +1,7 @@
+# Plugins
+
+## Storage Plugin
+
+## Local Storage Plugin
+
+## Session Storage Plugin

packages/docs/core-concepts/validators.md

@@ -0,0 +1 @@
+# Validators

packages/docs/index.md

@@ -8,7 +8,7 @@ hero:
   actions:
     - theme: brand
       text: Get Started
-      link: /getting-started
+      link: /introduction/getting-started
     - theme: alt
       text: View on GitHub
       link: https://github.com/YannicEl/vue-useForm

packages/docs/introduction/GettingStarted.vue

@@ -0,0 +1,28 @@
+<template>
+	<UForm :form="form" @v-submit="onSubmit">
+		<UField>
+			Email:
+			<input type="email" name="email" />
+		</UField>
+
+		<div>
+			<span v-for="error in form.fields.email.errors">{{ error }}</span>
+		</div>
+
+		<UField>
+			Password:
+			<input type="password" name="password" />
+		</UField>
+
+		<button>Submit</button>
+	</UForm>
+</template>
+
+<script setup>
+import { UField, UForm, email, minLength, required, useForm } from '@vuetils/form';
+
+const form = useForm({
+	email: ['', [required, email]],
+	password: ['', [required, minLength(6)]],
+});
+</script>

packages/docs/introduction/getting-started.md

@@ -0,0 +1,46 @@
+# Introduction
+
+## Installation
+
+::: code-group
+
+```sh [npm]
+$ npm install @vuetils/form
+```
+
+```sh [pnpm]
+$ pnpm add @vuetils/form@latest
+```
+
+```sh [yarn]
+$ yarn add @vuetils/form
+```
+
+:::
+
+## How it works
+
+You start of by creating a form object with [`useForm()`](api#useForm). The function takes in an object where every property represents an input element in your form. The key of the property coorolates to the name attribute of an input element and the value is and array where the first element is the initial value of the input and the second element is an array of [validators](api#validators) . `@vuetils/form` comes with a set of [validators](api#validators) that you can use to validate your form.
+
+```js
+import { email, minLength, required, useForm } from '@vuetils/form';
+
+const form = useForm({
+	email: ['', [required, email]],
+	password: ['', [required, minLength(6)]],
+});
+```
+
+## Usage
+
+<<< ./GettingStarted.vue
+
+<script setup>
+import GettingStarted from './GettingStarted.vue'
+</script>
+
+<GettingStarted />
+
+## What's Next?
+
+- TODO

packages/docs/introduction/index.md

@@ -0,0 +1 @@
+# Components

packages/docs/package.json

@@ -14,7 +14,6 @@
 	},
 	"devDependencies": {
 		"sass": "^1.64.2",
-		"unocss": "^0.54.1",
 		"vitepress": "1.0.0-beta.7",
 		"wrangler": "^3.4.0"
 	}