feat: export field component, expose more slotprops

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

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { h } from 'vue'
+import * as z from 'zod'
+import { h, reactive } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
-import AutoFormField from '../ui/auto-form/AutoFormField.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { toast } from '@/lib/registry/new-york/ui/toast'
-import { AutoForm, getBaseSchema, getBaseType } from '@/lib/registry/new-york/ui/auto-form'
+import type { Config } from '@/lib/registry/new-york/ui/auto-form'
+import { AutoForm, AutoFormField } from '@/lib/registry/new-york/ui/auto-form'
 
 enum Sports {
   Football = 'Football/Soccer',
@@ -115,14 +114,11 @@ const onSubmit = handleSubmit((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>
+const config
-  <AutoForm
+  = reactive({
-    class="w-2/3 space-y-6"
-    :schema="schema"
-    :field-config="{
     username: {
+      label: '123',
       description: 'Test description',
       inputProps: {
         id: '123',
@@ -167,7 +163,14 @@ const onSubmit = handleSubmit((values) => {
         },
       },
     },
-    }"
+  }) as Config<z.infer<typeof schema>>
+</script>
+
+<template>
+  <AutoForm
+    class="w-2/3 space-y-6"
+    :schema="schema"
+    :field-config="config"
     @submit="onSubmit"
   >
     <template #username="componentField">

apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue

@@ -10,6 +10,10 @@ const props = defineProps<{
   fieldConfig?: Config<z.infer<T>>
 }>()
 
+const emits = defineEmits<{
+  submit: [event: Event]
+}>()
+
 const shapes = computed(() => {
   // @ts-expect-error ignore {} not assignable to object
   const val: { [key in keyof T]: Shape } = {}
@@ -33,11 +37,11 @@ const shapes = computed(() => {
 </script>
 
 <template>
-  <form>
+  <form @submit="emits('submit', $event)">
     <template v-for="(shape, key) of shapes" :key="key">
       <slot
         :shape="shape"
-        :name="key.toString()"
+        :name="key.toString() as keyof z.infer<T>"
         :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
       >
         <AutoFormField

apps/www/src/lib/registry/new-york/ui/auto-form/fields/Boolean.vue

@@ -14,12 +14,14 @@ defineProps<{
 </script>
 
 <template>
-  <FormField v-slot="{ componentField }" :name="name">
+  <FormField v-slot="slotProps" :name="name">
     <FormItem>
       <div class="space-y-0 mb-3 flex items-center gap-3">
         <FormControl>
-          <Switch v-if="config?.component === 'switch'" v-bind="{ ...componentField }" />
+          <slot v-bind="slotProps">
-          <Checkbox v-else v-bind="{ ...componentField }" />
+            <Switch v-if="config?.component === 'switch'" v-bind="{ ...slotProps.componentField }" />
+            <Checkbox v-else v-bind="{ ...slotProps.componentField }" />
+          </slot>
         </FormControl>
         <AutoFormLabel v-if="!config?.hideLabel" :required="required">
           {{ config?.label || beautifyObjectName(name) }}

apps/www/src/lib/registry/new-york/ui/auto-form/fields/Date.vue

@@ -23,12 +23,13 @@ const df = new DateFormatter('en-US', {
 </script>
 
 <template>
-  <FormField v-slot="{ componentField }" :name="name">
+  <FormField v-slot="slotProps" :name="name">
     <FormItem>
       <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
+        <slot v-bind="slotProps">
           <div>
             <Popover>
               <PopoverTrigger as-child>
@@ -36,18 +37,19 @@ const df = new DateFormatter('en-US', {
                   variant="outline"
                   :class="cn(
                     'w-full justify-start text-left font-normal',
-                  !componentField.modelValue && 'text-muted-foreground',
+                    !slotProps.componentField.modelValue && 'text-muted-foreground',
                   )"
                 >
                   <CalendarIcon class="mr-2 h-4 w-4" />
-                {{ componentField.modelValue ? df.format(componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
+                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
                 </Button>
               </PopoverTrigger>
               <PopoverContent class="w-auto p-0">
-              <Calendar initial-focus v-bind="{ ...componentField }" />
+                <Calendar initial-focus v-bind="slotProps.componentField" />
               </PopoverContent>
             </Popover>
           </div>
+        </slot>
       </FormControl>
 
       <FormDescription v-if="config?.description">

apps/www/src/lib/registry/new-york/ui/auto-form/fields/Enum.vue

@@ -19,20 +19,21 @@ const computedOptions = computed(() => props.config?.enumProps?.options || props
 </script>
 
 <template>
-  <FormField v-slot="{ componentField }" :name="name">
+  <FormField v-slot="slotProps" :name="name">
     <FormItem>
       <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
-        <RadioGroup v-if="config?.component === 'radio'" :orientation="'vertical'" v-bind="{ ...componentField }">
+        <slot v-bind="slotProps">
+          <RadioGroup v-if="config?.component === 'radio'" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
             <div v-for="(option, index) in computedOptions" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
               <RadioGroupItem :id="`${option}-${index}`" :value="option" />
               <Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
             </div>
           </RadioGroup>
 
-        <Select v-else v-bind="{ ...componentField }">
+          <Select v-else v-bind="{ ...slotProps.componentField }">
             <SelectTrigger class="w-full">
               <SelectValue :placeholder="config?.enumProps?.placeholder" />
             </SelectTrigger>
@@ -42,6 +43,7 @@ const computedOptions = computed(() => props.config?.enumProps?.options || props
               </SelectItem>
             </SelectContent>
           </Select>
+        </slot>
       </FormControl>
 
       <FormDescription v-if="config?.description">

apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue

@@ -28,21 +28,23 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
 </script>
 
 <template>
-  <FormField v-slot="{ componentField }" :name="name">
+  <FormField v-slot="slotProps" :name="name">
     <FormItem v-bind="$attrs">
       <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
+        <slot v-bind="slotProps">
           <Input
             type="file"
             v-bind="{ ...config?.inputProps }"
             @change="async (ev: InputEvent) => {
               const file = (ev.target as HTMLInputElement).files?.[0]
               const parsed = await parseFileAsString(file)
-            componentField.onInput(parsed)
+              slotProps.componentField.onInput(parsed)
             }"
           />
+        </slot>
       </FormControl>
       <FormDescription v-if="config?.description">
         {{ config.description }}

apps/www/src/lib/registry/new-york/ui/auto-form/fields/Input.vue

@@ -14,14 +14,16 @@ defineProps<{
 </script>
 
 <template>
-  <FormField v-slot="{ componentField }" :name="name">
+  <FormField v-slot="slotProps" :name="name">
     <FormItem v-bind="$attrs">
       <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
-        <Textarea v-if="config?.component === 'textarea'" type="text" v-bind="{ ...componentField, ...config?.inputProps }" />
+        <slot v-bind="slotProps">
-        <Input v-else type="text" v-bind="{ ...componentField, ...config?.inputProps }" />
+          <Textarea v-if="config?.component === 'textarea'" type="text" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" />
+          <Input v-else type="text" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" />
+        </slot>
       </FormControl>
       <FormDescription v-if="config?.description">
         {{ config.description }}

apps/www/src/lib/registry/new-york/ui/auto-form/fields/Number.vue

@@ -17,13 +17,15 @@ defineProps<{
 </script>
 
 <template>
-  <FormField v-slot="{ componentField }" :name="name">
+  <FormField v-slot="slotProps" :name="name">
     <FormItem>
       <AutoFormLabel v-if="!config?.hideLabel" :required="required">
         {{ config?.label || beautifyObjectName(name) }}
       </AutoFormLabel>
       <FormControl>
-        <Input type="number" v-bind="{ ...$attrs, ...componentField, ...config?.inputProps }" />
+        <slot v-bind="slotProps">
+          <Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" />
+        </slot>
       </FormControl>
       <FormDescription v-if="config?.description">
         {{ config.description }}

apps/www/src/lib/registry/new-york/ui/auto-form/fields/Object.vue

@@ -49,6 +49,8 @@ const shapes = computed(() => {
 </script>
 
 <template>
+  <section>
+    <slot v-bind="props">
       <Accordion type="multiple" class="w-full" collapsible>
         <AccordionItem :value="name" class="border-none">
           <AccordionTrigger class="text-base">
@@ -65,4 +67,6 @@ const shapes = computed(() => {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
+    </slot>
+  </section>
 </template>

apps/www/src/lib/registry/new-york/ui/auto-form/fields/index.ts

@@ -0,0 +1,7 @@
+export { default as AutoFormFieldBoolean } from './Boolean.vue'
+export { default as AutoFormFieldDate } from './Date.vue'
+export { default as AutoFormFieldEnum } from './Enum.vue'
+export { default as AutoFormFieldFile } from './File.vue'
+export { default as AutoFormFieldInput } from './Input.vue'
+export { default as AutoFormFieldNumber } from './Number.vue'
+export { default as AutoFormFieldObject } from './Object.vue'

apps/www/src/lib/registry/new-york/ui/auto-form/index.ts

@@ -1,2 +1,6 @@
 export { default as AutoForm } from './AutoForm.vue'
+export { default as AutoFormField } from './AutoFormField.vue'
 export { getObjectFormSchema, getBaseSchema, getBaseType, getDefaultValues } from './utils'
+export type { Config, ConfigItem } from './interface'
+
+export * from './fields'