docs: completely rewrite docs to mention the new features

Author: Norbiros

docs/app/components/AppHeader.vue

@@ -40,9 +40,12 @@ const { header } = useAppConfig()
     >
       <NuxtLink
         :to="header?.to || '/'"
-        class="font-bold text-xl"
+        class="font-bold text-xl inline-flex items-center gap-2"
       >
         Nuxt Auto Form
+        <UBadge variant="subtle" color="warning" size="sm">
+          WIP
+        </UBadge>
       </NuxtLink>
     </template>
 

docs/app/components/ComponentPreview.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { codeToHtml } from 'shiki'
+import { ref } from 'vue'
+
+const props = defineProps<{ name: string }>()
+
+const highlightedCode = ref('')
+
+const modules = import.meta.glob('../components/examples/*.vue', { eager: true })
+const componentModule = modules[`./examples/${props.name}.vue`] as any
+
+const rawModules = import.meta.glob('../components/examples/*.vue', {
+  eager: true,
+  as: 'raw',
+})
+const sourceCode = rawModules[`./examples/${props.name}.vue`]
+
+highlightedCode.value = await codeToHtml(sourceCode!, { lang: 'vue', theme: 'material-theme-palenight' })
+</script>
+
+<template>
+  <div class="flex flex-col md:flex-row p-4 rounded-lg shadow-lg">
+    <ProseCode class="leading-3 p-5">
+      <code class="[&>pre]:bg-transparent!" v-html="highlightedCode" />
+    </ProseCode>
+    <div class="flex-1 p-4 bg-muted">
+      <component :is="componentModule?.default" />
+    </div>
+  </div>
+</template>

docs/app/components/FormPreview.vue

@@ -0,0 +1,21 @@
+<template>
+  <UPageHero orientation="horizontal" :ui="{ container: 'lg:py-30' }">
+    <template #title>
+      Nuxt Auto Form
+    </template>
+    <template #description>
+      Build forms faster with tools you already know and love.
+      Generate fully customizable Nuxt UI forms straight from your Zod schemas.
+    </template>
+    <template #links>
+      <UButton size="xl" to="/getting-started" trailing-icon="i-lucide-arrow-right">
+        Get started
+      </UButton>
+      <UButton size="xl" to="https://github.com/Norbiros/nuxt-auto-form" variant="subtle" trailing-icon="i-simple-icons-github" target="_blank" color="neutral">
+        View source code
+      </UButton>
+    </template>
+
+    <ComponentPreview name="LandingSimple" class="leading-0" />
+  </UPageHero>
+</template>

docs/app/components/Hero.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import * as z from 'zod'
+
+const schema = z.object({
+  form_field: z.string()
+    .nonempty()
+    .meta({
+      title: 'Title',
+      required: true,
+      description: 'Description',
+      hint: 'Hint',
+      help: 'Help',
+    }),
+  input: z.number().meta({ input: {
+    props: {
+      placeholder: '69420',
+    },
+  } }),
+  style: z.boolean()
+    .meta({ autoForm: { floatRight: true } }),
+})
+</script>
+
+<template>
+  <AutoForm :schema="schema" />
+</template>

docs/app/components/examples/Fields.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import * as z from 'zod'
+
+const schema = z.object({
+  text: z.string().nonempty(),
+  enum: z.enum(['1', '2', '3'])
+    .meta({
+      description: 'With description',
+    }),
+  custom_bool: z.boolean()
+    .meta({ title: 'Title' }),
+})
+</script>
+
+<template>
+  <AutoForm :schema="schema" />
+</template>

docs/app/components/examples/LandingSimple.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import * as z from 'zod'
+
+const schema = z.object({
+  boolean: z.boolean(),
+})
+</script>
+
+<template>
+  <AutoForm :schema="schema">
+    <template #boolean="{ field, state: stateValue }">
+      <USelect
+        v-model="stateValue[field]"
+        :items="[
+          {
+            label: 'False Value',
+            value: false,
+          },
+          {
+            label: 'True Value',
+            value: true,
+          },
+        ]"
+      />
+    </template>
+  </AutoForm>
+</template>

docs/app/components/examples/Slots.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import * as z from 'zod'
+
+const schema = z.object({
+  text: z.string()
+    .nonempty()
+    .meta({
+      title: 'Text Input',
+      required: true,
+      input: {
+        props: {
+          placeholder: 'Placeholder',
+        },
+      },
+    }),
+  enum: z.enum(['1', '2', '3'])
+    .meta({
+      title: 'Enum Input',
+    }),
+  custom_bool: z.boolean()
+    .meta({ title: 'Input with custom slot' }),
+})
+</script>
+
+<template>
+  <AutoForm :schema="schema" />
+</template>

docs/app/components/examples/Test.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import * as z from 'zod'
+
+const schema = z.object({
+  username: z.string().nonempty().meta({ title: 'Username' }),
+  favoriteLanguage: z
+    .enum(['JavaScript', 'TypeScript', 'Java', 'CoffeeScript'])
+    .meta({
+      title: 'Favorite Language',
+      description: 'Choose wisely',
+    }),
+  yearsOfExperience: z.number().min(0).max(100),
+  deployedOnFriday: z.boolean().default(true),
+  text_description: z.string(),
+})
+</script>
+
+<template>
+  <AutoForm :schema="schema" />
+</template>

docs/app/components/examples/Usage.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <ComponentPreview name="Test" />
+  </div>
+</template>