From d674549b678d1a8ba56c9a5d74224e0d4108ab7f Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sun, 21 Apr 2024 22:03:18 +0800
Subject: [PATCH] chore: add form api example

---
 apps/www/__registry__/index.ts                | 14 ++++++
 .../src/content/docs/components/auto-form.md  |  5 +++
 .../registry/default/example/AutoFormApi.vue  | 45 +++++++++++++++++++
 .../registry/new-york/example/AutoFormApi.vue | 45 +++++++++++++++++++
 4 files changed, 109 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/example/AutoFormApi.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/AutoFormApi.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 40a63868..6218dbe5 100644
--- a/apps/www/__registry__/index.ts
+++ b/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",
diff --git a/apps/www/src/content/docs/components/auto-form.md b/apps/www/src/content/docs/components/auto-form.md
index 9d0925b5..72f2e7ea 100644
--- a/apps/www/src/content/docs/components/auto-form.md
+++ b/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.
 
diff --git a/apps/www/src/lib/registry/default/example/AutoFormApi.vue b/apps/www/src/lib/registry/default/example/AutoFormApi.vue
new file mode 100644
index 00000000..0e8bd37b
--- /dev/null
+++ b/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>
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue b/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue
new file mode 100644
index 00000000..742b5fb5
--- /dev/null
+++ b/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>