feat: more props for form field

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(),

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 { getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
-import type { Config, ConfigItem } from './interface'
+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: {
+  const val: { [key in keyof T]: Shape } = {}
-    [key in keyof T]: {
-      type: string
-      default: any
-      required?: boolean
-      options?: string[]
-      schema?: ZodAny
-    }
-  } = {}
   const shape = props.schema.shape
   Object.keys(shape).forEach((name) => {
     const item = shape[name] as ZodAny

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: {
+  shape: Shape
-    type: string
-    required?: boolean
-    options?: any[]
-    schema?: ZodAny
-  }
   config?: ConfigItem | Config<U>
 }>()
 

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>

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>

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>

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>

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>

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>

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">

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[] }
 }