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,59 +114,63 @@ 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))),
   })
 })
+
+const config
+  = reactive({
+    username: {
+      label: '123',
+      description: 'Test description',
+      inputProps: {
+        id: '123',
+      },
+    },
+    password: {
+      inputProps: {
+        id: '345',
+        type: 'password',
+      },
+    },
+    acceptTerms: {
+      description: 'this is custom',
+    },
+    sendMeMails: {
+      component: 'switch',
+    },
+    color: {
+      enumProps: {
+        options: ['red', 'green', 'blue'],
+        placeholder: 'Choose a color',
+      },
+    },
+    marshmallows: {
+      component: 'radio',
+    },
+    bio: {
+      component: 'textarea',
+    },
+    file: {
+      component: 'file',
+    },
+
+    subObject: {
+      subField: {
+        label: 'custom labvel',
+        description: '123',
+      },
+      subSubObject: {
+        subSubField: {
+          label: 'sub suuuub',
+        },
+      },
+    },
+  }) as Config<z.infer<typeof schema>>
 </script>
 
 <template>
   <AutoForm
     class="w-2/3 space-y-6"
     :schema="schema"
-    :field-config="{
-      username: {
-        description: 'Test description',
-        inputProps: {
-          id: '123',
-        },
-      },
-      password: {
-        inputProps: {
-          id: '345',
-          type: 'password',
-        },
-      },
-      acceptTerms: {
-        description: 'this is custom',
-      },
-      sendMeMails: {
-        component: 'switch',
-      },
-      color: {
-        enumProps: {
-          options: ['red', 'green', 'blue'],
-          placeholder: 'Choose a color',
-        },
-      },
-      marshmallows: {
-        component: 'radio',
-      },
-      bio: {
-        component: 'textarea',
-      },
-      file: {
-        component: 'file',
-      },
-
-      subObject: {
-        subField: {
-          label: 'custom labvel',
-          description: '123',
-        },
-        subSubObject: {
-          subSubField: {
-            label: 'sub suuuub',
-          },
-        },
-      },
-    }"
+    :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 }" />
-          <Checkbox v-else v-bind="{ ...componentField }" />
+          <slot v-bind="slotProps">
+            <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,31 +23,33 @@ 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>
-        <div>
-          <Popover>
-            <PopoverTrigger as-child>
-              <Button
-                variant="outline"
-                :class="cn(
-                  'w-full justify-start text-left font-normal',
-                  !componentField.modelValue && 'text-muted-foreground',
-                )"
-              >
-                <CalendarIcon class="mr-2 h-4 w-4" />
-                {{ componentField.modelValue ? df.format(componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent class="w-auto p-0">
-              <Calendar initial-focus v-bind="{ ...componentField }" />
-            </PopoverContent>
-          </Popover>
-        </div>
+        <slot v-bind="slotProps">
+          <div>
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button
+                  variant="outline"
+                  :class="cn(
+                    'w-full justify-start text-left font-normal',
+                    !slotProps.componentField.modelValue && 'text-muted-foreground',
+                  )"
+                >
+                  <CalendarIcon class="mr-2 h-4 w-4" />
+                  {{ 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="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,29 +19,31 @@ 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 }">
-          <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>
+        <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 }">
-          <SelectTrigger class="w-full">
-            <SelectValue :placeholder="config?.enumProps?.placeholder" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem v-for="option in computedOptions" :key="option" :value="option">
-              {{ beautifyObjectName(option) }}
-            </SelectItem>
-          </SelectContent>
-        </Select>
+          <Select v-else v-bind="{ ...slotProps.componentField }">
+            <SelectTrigger class="w-full">
+              <SelectValue :placeholder="config?.enumProps?.placeholder" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="option in computedOptions" :key="option" :value="option">
+                {{ beautifyObjectName(option) }}
+              </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>
-        <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)
-          }"
-        />
+        <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)
+              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 }" />
-        <Input v-else type="text" v-bind="{ ...componentField, ...config?.inputProps }" />
+        <slot v-bind="slotProps">
+          <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,20 +49,24 @@ const shapes = computed(() => {
 </script>
 
 <template>
-  <Accordion type="multiple" class="w-full" collapsible>
-    <AccordionItem :value="name" class="border-none">
-      <AccordionTrigger class="text-base">
-        {{ schema?.description || beautifyObjectName(name) }}
-      </AccordionTrigger>
-      <AccordionContent class="p-2 space-y-5">
-        <template v-for="(shape, key) in shapes" :key="key">
-          <AutoFormField
-            :config="config?.[key as keyof typeof config] as ConfigItem"
-            :name="key.toString()"
-            :shape="shape"
-          />
-        </template>
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
+  <section>
+    <slot v-bind="props">
+      <Accordion type="multiple" class="w-full" collapsible>
+        <AccordionItem :value="name" class="border-none">
+          <AccordionTrigger class="text-base">
+            {{ schema?.description || beautifyObjectName(name) }}
+          </AccordionTrigger>
+          <AccordionContent class="p-2 space-y-5">
+            <template v-for="(shape, key) in shapes" :key="key">
+              <AutoFormField
+                :config="config?.[key as keyof typeof config] as ConfigItem"
+                :name="key.toString()"
+                :shape="shape"
+              />
+            </template>
+          </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'