chore: add form api example

apps/www/__registry__/index.ts

@@ -38,6 +38,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AspectRatioDemo.vue"],
     },
+    "AutoFormApi": {
+      name: "AutoFormApi",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormApi.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormApi.vue"],
+    },
     "AutoFormArray": {
       name: "AutoFormArray",
       type: "components:example",
@@ -1327,6 +1334,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AspectRatioDemo.vue"],
     },
+    "AutoFormApi": {
+      name: "AutoFormApi",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormApi.vue"],
+    },
     "AutoFormArray": {
       name: "AutoFormArray",
       type: "components:example",

apps/www/src/content/docs/components/auto-form.md

@@ -28,6 +28,11 @@ Refined schema to validate that two fields match.
 
 <ComponentPreview name="AutoFormConfirmPassword" />
 
+### API Example
+The form select options are fetched from an API.
+
+<ComponentPreview name="AutoFormApi" />
+
 ### Array support
 You can use arrays in your schemas to create dynamic forms.
 

apps/www/src/lib/registry/default/example/AutoFormApi.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import { h, onMounted, ref, shallowRef } from 'vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm } from '@/lib/registry/default/ui/auto-form'
+
+const schema = shallowRef<z.ZodObject< any, any, any > | null>(null)
+
+onMounted(() => {
+  fetch('https://jsonplaceholder.typicode.com/users')
+    .then(response => response.json())
+    .then((data) => {
+      schema.value = z.object({
+        user: z.enum(data.map((user: any) => user.name)),
+      })
+    })
+})
+
+function onSubmit(values: Record<string, any>) {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+}
+</script>
+
+<template>
+  <div class="flex justify-center w-full">
+    <AutoForm
+      v-if="schema"
+      class="w-2/3 space-y-6"
+      :schema="schema"
+      @submit="onSubmit"
+    >
+      <Button type="submit">
+        Submit
+      </Button>
+    </AutoForm>
+
+    <div v-else>
+      Loading...
+    </div>
+  </div>
+</template>

apps/www/src/lib/registry/new-york/example/AutoFormApi.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import { h, onMounted, ref, shallowRef } from 'vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
+
+const schema = shallowRef<z.ZodObject< any, any, any > | null>(null)
+
+onMounted(() => {
+  fetch('https://jsonplaceholder.typicode.com/users')
+    .then(response => response.json())
+    .then((data) => {
+      schema.value = z.object({
+        user: z.enum(data.map((user: any) => user.name)),
+      })
+    })
+})
+
+function onSubmit(values: Record<string, any>) {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+}
+</script>
+
+<template>
+  <div class="flex justify-center w-full">
+    <AutoForm
+      v-if="schema"
+      class="w-2/3 space-y-6"
+      :schema="schema"
+      @submit="onSubmit"
+    >
+      <Button type="submit">
+        Submit
+      </Button>
+    </AutoForm>
+
+    <div v-else>
+      Loading...
+    </div>
+  </div>
+</template>