From 318d4c8643e15ff0560f39d7ba8e13c2b5bcf49d Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 18 Apr 2024 15:10:01 +0800
Subject: [PATCH] feat: more props for form field

---
 .../lib/registry/new-york/example/AutoForm.vue    |  6 +++---
 .../registry/new-york/ui/auto-form/AutoForm.vue   | 14 +++-----------
 .../new-york/ui/auto-form/AutoFormField.vue       |  9 ++-------
 .../new-york/ui/auto-form/fields/Boolean.vue      |  2 +-
 .../new-york/ui/auto-form/fields/Date.vue         |  2 +-
 .../new-york/ui/auto-form/fields/Enum.vue         |  2 +-
 .../new-york/ui/auto-form/fields/File.vue         |  2 +-
 .../new-york/ui/auto-form/fields/Input.vue        |  2 +-
 .../new-york/ui/auto-form/fields/Number.vue       |  2 +-
 .../new-york/ui/auto-form/fields/Object.vue       |  2 +-
 .../registry/new-york/ui/auto-form/interface.ts   | 15 ++++++++++++++-
 11 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/apps/www/src/lib/registry/new-york/example/AutoForm.vue b/apps/www/src/lib/registry/new-york/example/AutoForm.vue
index 561d7fd3..a719660b 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoForm.vue
@@ -91,9 +91,9 @@ const schema = z.object({
     subSubObject: z
       .object({
         subSubField: z.string().default('Sub Sub Field'),
-      })
-      .describe('Sub Sub Object Description'),
-  }),
+      }),
+  }).describe('123 Description'),
+
   optionalSubObject: z
     .object({
       optionalSubField: z.string(),
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue
index ed753b3b..d722c4fb 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="U extends ZodRawShape, T extends ZodObject<U>">
 import { computed } from 'vue'
 import type { ZodAny, ZodObject, ZodRawShape, z } from 'zod'
-import { getBaseType, getDefaultValueInZodStack } from './utils'
-import type { Config, ConfigItem } from './interface'
+import { getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
+import type { Config, ConfigItem, Shape } from './interface'
 import AutoFormField from './AutoFormField.vue'
 
 const props = defineProps<{
@@ -12,15 +12,7 @@ const props = defineProps<{
 
 const shapes = computed(() => {
   // @ts-expect-error ignore {} not assignable to object
-  const val: {
-    [key in keyof T]: {
-      type: string
-      default: any
-      required?: boolean
-      options?: string[]
-      schema?: ZodAny
-    }
-  } = {}
+  const val: { [key in keyof T]: Shape } = {}
   const shape = props.schema.shape
   Object.keys(shape).forEach((name) => {
     const item = shape[name] as ZodAny
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
index 2a77441e..5b729a40 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts" generic="U extends ZodAny">
 import type { ZodAny } from 'zod'
-import type { Config, ConfigItem } from './interface'
+import type { Config, ConfigItem, Shape } from './interface'
 import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
 
 defineProps<{
   name: string
-  shape: {
-    type: string
-    required?: boolean
-    options?: any[]
-    schema?: ZodAny
-  }
+  shape: Shape
   config?: ConfigItem | Config<U>
 }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Boolean.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Boolean.vue
index 2ed28d69..e45b600e 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Boolean.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Boolean.vue
@@ -21,7 +21,7 @@ defineProps<{
           <Switch v-if="config?.component === 'switch'" v-bind="{ ...componentField }" />
           <Checkbox v-else v-bind="{ ...componentField }" />
         </FormControl>
-        <AutoFormLabel :required="required">
+        <AutoFormLabel v-if="!config?.hideLabel" :required="required">
           {{ config?.label || beautifyObjectName(name) }}
         </AutoFormLabel>
       </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Date.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Date.vue
index e3279cc2..00aaa6ed 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Date.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Date.vue
@@ -25,7 +25,7 @@ const df = new DateFormatter('en-US', {
 <template>
   <FormField v-slot="{ componentField }" :name="name">
     <FormItem>
-      <AutoFormLabel :required="required">
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Enum.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Enum.vue
index e84c0ca5..d5fea748 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Enum.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Enum.vue
@@ -21,7 +21,7 @@ const computedOptions = computed(() => props.config?.enumProps?.options || props
 <template>
   <FormField v-slot="{ componentField }" :name="name">
     <FormItem>
-      <AutoFormLabel :required="required">
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
index 6cd86923..5fb734e9 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
@@ -30,7 +30,7 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
 <template>
   <FormField v-slot="{ componentField }" :name="name">
     <FormItem v-bind="$attrs">
-      <AutoFormLabel :required="required">
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Input.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Input.vue
index e581848f..b541cba9 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Input.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Input.vue
@@ -16,7 +16,7 @@ defineProps<{
 <template>
   <FormField v-slot="{ componentField }" :name="name">
     <FormItem v-bind="$attrs">
-      <AutoFormLabel :required="required">
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Number.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Number.vue
index ef552939..b95b9514 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Number.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Number.vue
@@ -19,7 +19,7 @@ defineProps<{
 <template>
   <FormField v-slot="{ componentField }" :name="name">
     <FormItem>
-      <AutoFormLabel :required="required">
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Object.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Object.vue
index 0275384d..13605761 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Object.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/fields/Object.vue
@@ -52,7 +52,7 @@ const shapes = computed(() => {
   <Accordion type="multiple" class="w-full" collapsible>
     <AccordionItem :value="name" class="border-none">
       <AccordionTrigger class="text-base">
-        {{ beautifyObjectName(name) }}
+        {{ schema?.description || beautifyObjectName(name) }}
       </AccordionTrigger>
       <AccordionContent class="p-2 space-y-5">
         <template v-for="(shape, key) in shapes" :key="key">
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts b/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
index 6d392c5c..6acd7bfd 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
@@ -1,11 +1,24 @@
 import type { InputHTMLAttributes, SelectHTMLAttributes } from 'vue'
-import type { z } from 'zod'
+import type { ZodAny, z } from 'zod'
 import type { INPUT_COMPONENTS } from './constant'
 
+export interface Shape {
+  type: string
+  default: any
+  required?: boolean
+  options?: string[]
+  schema?: ZodAny
+}
+
 export interface ConfigItem {
+  /** Value for the `FormLabel` */
   label?: string
+  /** Value for the `FormDescription` */
   description?: string
+  /** Pick which component to be rendered. */
   component?: keyof typeof INPUT_COMPONENTS
+  /** Hide `FormLabel`. */
+  hideLabel?: boolean
   inputProps?: InputHTMLAttributes
   enumProps?: SelectHTMLAttributes & { options?: any[] }
 }