From e742708715a49650433fd7db8dd851410b58bc9d Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 8 Sep 2023 00:21:46 -0700
Subject: [PATCH 1/7] fix(vue): Subscribe component default scoped slot types

---
 packages/vue-form/src/useForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue-form/src/useForm.tsx b/packages/vue-form/src/useForm.tsx
index f13ce870a..5ec06954c 100644
--- a/packages/vue-form/src/useForm.tsx
+++ b/packages/vue-form/src/useForm.tsx
@@ -2,7 +2,7 @@ import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { provideFormContext } from './formContext'
-import { defineComponent } from 'vue-demi'
+import { type EmitsOptions, type SlotsType, type SetupContext, defineComponent } from 'vue-demi'
 import type { NoInfer } from './types'
 
 declare module '@tanstack/form-core' {
@@ -17,7 +17,7 @@ declare module '@tanstack/form-core' {
     ) => TSelected
     Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
-    }) => any
+    }, context: SetupContext<EmitsOptions, SlotsType<{ default: NoInfer<FormState<TFormData>> }>>) => any
   }
 }
 

From 8cd32deb126c1e02fc4925f21a93fdcb27c287b3 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 8 Sep 2023 12:16:13 -0700
Subject: [PATCH 2/7] fix(vue): Field component default scoped slot value types

---
 examples/vue/simple/src/App.vue               |  4 +-
 packages/vue-form/src/tests/useField.test.tsx | 10 ++---
 packages/vue-form/src/tests/useForm.test.tsx  |  7 ++--
 packages/vue-form/src/useField.tsx            | 38 ++++++++++++-------
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/examples/vue/simple/src/App.vue b/examples/vue/simple/src/App.vue
index 1757c1535..cec66d140 100644
--- a/examples/vue/simple/src/App.vue
+++ b/examples/vue/simple/src/App.vue
@@ -45,7 +45,7 @@ async function onChangeFirstName(value) {
         :onChangeAsyncDebounceMs="500"
         :onChangeAsync="onChangeFirstName"
       >
-        <template v-slot="field, state">
+        <template v-slot="{ field, state }">
           <label :htmlFor="field.name">First Name:</label>
           <input
             :name="field.name"
@@ -59,7 +59,7 @@ async function onChangeFirstName(value) {
     </div>
     <div>
       <form.Field name="lastName">
-        <template v-slot="field, state">
+        <template v-slot="{ field, state }">
           <label :htmlFor="field.name">Last Name:</label>
           <input
             :name="field.name"
diff --git a/packages/vue-form/src/tests/useField.test.tsx b/packages/vue-form/src/tests/useField.test.tsx
index c5ef279b1..58fe62392 100644
--- a/packages/vue-form/src/tests/useField.test.tsx
+++ b/packages/vue-form/src/tests/useField.test.tsx
@@ -30,7 +30,7 @@ describe('useField', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="FirstName">
-          {(field: FieldApi<string, Person>) => (
+          {({ field }: { field: FieldApi<string, Person> }) => (
             <input
               data-testid={'fieldinput'}
               value={field.state.value}
@@ -68,7 +68,7 @@ describe('useField', () => {
           name="firstName"
           onChange={(value) => (value === 'other' ? error : undefined)}
         >
-          {(field: FieldApi<string, Person>) => (
+          {({ field }: { field: FieldApi<string, Person> }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -111,7 +111,7 @@ describe('useField', () => {
           name="firstName"
           onChange={(value) => (value === 'other' ? error : undefined)}
         >
-          {(field: FieldApi<string, Person>) => (
+          {({ field }: { field: FieldApi<string, Person> }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -159,7 +159,7 @@ describe('useField', () => {
             return error
           }}
         >
-          {(field: FieldApi<string, Person>) => (
+          {({ field }: { field: FieldApi<string, Person> }) => (
             <div>
               <input
                 data-testid="fieldinput"
@@ -211,7 +211,7 @@ describe('useField', () => {
             return error
           }}
         >
-          {(field: FieldApi<string, Person>) => (
+          {({ field }: { field: FieldApi<string, Person> }) => (
             <div>
               <input
                 data-testid="fieldinput"
diff --git a/packages/vue-form/src/tests/useForm.test.tsx b/packages/vue-form/src/tests/useForm.test.tsx
index f52b03217..11dc86a3e 100644
--- a/packages/vue-form/src/tests/useForm.test.tsx
+++ b/packages/vue-form/src/tests/useForm.test.tsx
@@ -29,7 +29,7 @@ describe('useForm', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="">
-          {(field: FieldApi<string, Person>) => (
+          {({ field }: { field: FieldApi<string, Person> }) => (
             <input
               data-testid={'fieldinput'}
               value={field.state.value}
@@ -69,7 +69,7 @@ describe('useForm', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="">
-          {(field: FieldApi<string, Person>) => <p>{field.state.value}</p>}
+          {({ field }: { field: FieldApi<string, Person> }) => <p>{field.state.value}</p>}
         </form.Field>
       )
     })
@@ -96,7 +96,8 @@ describe('useForm', () => {
       return () => (
         <form.Provider>
           <form.Field name="firstName">
-            {(field: FieldApi<string, { firstName: string }>) => {
+            {({ field }: { field: FieldApi<string, { firstName: string }> }) => {
+              console.log('FIELD', field)
               return (
                 <input
                   value={field.state.value}
diff --git a/packages/vue-form/src/useField.tsx b/packages/vue-form/src/useField.tsx
index 318cdf354..798dc7244 100644
--- a/packages/vue-form/src/useField.tsx
+++ b/packages/vue-form/src/useField.tsx
@@ -1,19 +1,23 @@
-import {
-  type DeepKeys,
-  type DeepValue,
-  FieldApi,
-  type FieldOptions,
-  type Narrow,
-} from '@tanstack/form-core'
+import { FieldApi } from '@tanstack/form-core';
+import type {
+  FieldState,
+  DeepKeys,
+  DeepValue,
+  FieldOptions,
+  Narrow
+} from '@tanstack/form-core';
 import { useStore } from '@tanstack/vue-store'
 import {
-  type SetupContext,
   defineComponent,
-  type Ref,
   onMounted,
   onUnmounted,
-  watch,
-} from 'vue-demi'
+  watch
+} from 'vue-demi';
+import type {
+  SlotsType,
+  SetupContext,
+  Ref
+} from 'vue-demi';
 import { provideFormContext, useFormContext } from './formContext'
 
 declare module '@tanstack/form-core' {
@@ -130,7 +134,12 @@ export type FieldComponent<TParentData, TFormData> = <TField>(
           name: TField extends undefined ? TField : DeepKeys<TParentData>
           index?: never
         }),
-  context: SetupContext,
+  context: SetupContext<{}, SlotsType<{
+    default: {
+      field: FieldApi<FieldValue<TParentData, TField>, TFormData>
+      state: FieldState<any>
+    }
+  }>>,
 ) => any
 
 export const Field = defineComponent(
@@ -145,7 +154,10 @@ export const Field = defineComponent(
       parentFieldName: fieldApi.api.name,
     } as never)
 
-    return () => context.slots.default!(fieldApi.api, fieldApi.state.value)
+    return () => context.slots.default!({
+      field: fieldApi.api,
+      state: fieldApi.state.value
+    })
   },
   { name: 'Field', inheritAttrs: false },
 )

From 155b70384a3be1354670e8e126baaea4e0d322bd Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 8 Sep 2023 12:20:05 -0700
Subject: [PATCH 3/7] example type fixes

---
 examples/vue/simple/src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/vue/simple/src/App.vue b/examples/vue/simple/src/App.vue
index cec66d140..eae8b7e98 100644
--- a/examples/vue/simple/src/App.vue
+++ b/examples/vue/simple/src/App.vue
@@ -50,7 +50,7 @@ async function onChangeFirstName(value) {
           <input
             :name="field.name"
             :value="field.state.value"
-            @input="(e) => field.handleChange(e.target.value)"
+            @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
             @blur="field.handleBlur"
           />
           <FieldInfo :state="state" />
@@ -64,7 +64,7 @@ async function onChangeFirstName(value) {
           <input
             :name="field.name"
             :value="field.state.value"
-            @input="(e) => field.handleChange(e.target.value)"
+            @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
             @blur="field.handleBlur"
           />
           <FieldInfo :state="state" />

From 1f490b2510698885b7eeebb7aae345047c4a5abb Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 8 Sep 2023 12:24:19 -0700
Subject: [PATCH 4/7] remove test log

---
 packages/vue-form/src/tests/useForm.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/vue-form/src/tests/useForm.test.tsx b/packages/vue-form/src/tests/useForm.test.tsx
index 11dc86a3e..1bde43a56 100644
--- a/packages/vue-form/src/tests/useForm.test.tsx
+++ b/packages/vue-form/src/tests/useForm.test.tsx
@@ -97,7 +97,6 @@ describe('useForm', () => {
         <form.Provider>
           <form.Field name="firstName">
             {({ field }: { field: FieldApi<string, { firstName: string }> }) => {
-              console.log('FIELD', field)
               return (
                 <input
                   value={field.state.value}

From a0e010f08d19cc1d8e8ac3eba571fd609aaf37ca Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 8 Sep 2023 12:51:14 -0700
Subject: [PATCH 5/7] docs(vue): Field component slot fix

---
 docs/framework/vue/quick-start.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/framework/vue/quick-start.md b/docs/framework/vue/quick-start.md
index 5c40bc389..623729bcc 100644
--- a/docs/framework/vue/quick-start.md
+++ b/docs/framework/vue/quick-start.md
@@ -28,7 +28,7 @@ form.provideFormContext()
   <div>
     <div>
       <form.Field name="fullName">
-        <template v-slot="field">
+        <template v-slot="{ field }">
           <input
             :name="field.name"
             :value="field.state.value"

From 4c23563f24837fd44aedd8edc5791b92d03f0156 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 8 Sep 2023 13:39:47 -0700
Subject: [PATCH 6/7] refactor(vue): remove unused children property type from
 field component

---
 packages/vue-form/src/useField.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/vue-form/src/useField.tsx b/packages/vue-form/src/useField.tsx
index 798dc7244..62b899945 100644
--- a/packages/vue-form/src/useField.tsx
+++ b/packages/vue-form/src/useField.tsx
@@ -117,11 +117,7 @@ export type FieldValue<TFormData, TField> = TFormData extends any[]
 // //   ^?
 
 export type FieldComponent<TParentData, TFormData> = <TField>(
-  fieldOptions: {
-    children?: (
-      fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,
-    ) => any
-  } & Omit<
+  fieldOptions: Omit<
     UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,
     'name' | 'index'
   > &

From 487ce8f15a7e1a80439338e2932ae32f52b2619a Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Fri, 8 Sep 2023 14:37:15 -0700
Subject: [PATCH 7/7] chore: fix formatting

---
 examples/vue/simple/src/App.vue              |  8 +++-
 packages/vue-form/src/tests/useForm.test.tsx | 10 ++++-
 packages/vue-form/src/useField.tsx           | 43 +++++++++-----------
 packages/vue-form/src/useForm.tsx            | 19 +++++++--
 4 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/examples/vue/simple/src/App.vue b/examples/vue/simple/src/App.vue
index eae8b7e98..878f3b81e 100644
--- a/examples/vue/simple/src/App.vue
+++ b/examples/vue/simple/src/App.vue
@@ -50,7 +50,9 @@ async function onChangeFirstName(value) {
           <input
             :name="field.name"
             :value="field.state.value"
-            @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
+            @input="
+              (e) => field.handleChange((e.target as HTMLInputElement).value)
+            "
             @blur="field.handleBlur"
           />
           <FieldInfo :state="state" />
@@ -64,7 +66,9 @@ async function onChangeFirstName(value) {
           <input
             :name="field.name"
             :value="field.state.value"
-            @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
+            @input="
+              (e) => field.handleChange((e.target as HTMLInputElement).value)
+            "
             @blur="field.handleBlur"
           />
           <FieldInfo :state="state" />
diff --git a/packages/vue-form/src/tests/useForm.test.tsx b/packages/vue-form/src/tests/useForm.test.tsx
index 1bde43a56..ca2cd6578 100644
--- a/packages/vue-form/src/tests/useForm.test.tsx
+++ b/packages/vue-form/src/tests/useForm.test.tsx
@@ -69,7 +69,9 @@ describe('useForm', () => {
 
       return () => (
         <form.Field name="firstName" defaultValue="">
-          {({ field }: { field: FieldApi<string, Person> }) => <p>{field.state.value}</p>}
+          {({ field }: { field: FieldApi<string, Person> }) => (
+            <p>{field.state.value}</p>
+          )}
         </form.Field>
       )
     })
@@ -96,7 +98,11 @@ describe('useForm', () => {
       return () => (
         <form.Provider>
           <form.Field name="firstName">
-            {({ field }: { field: FieldApi<string, { firstName: string }> }) => {
+            {({
+              field,
+            }: {
+              field: FieldApi<string, { firstName: string }>
+            }) => {
               return (
                 <input
                   value={field.state.value}
diff --git a/packages/vue-form/src/useField.tsx b/packages/vue-form/src/useField.tsx
index 62b899945..07fffcccf 100644
--- a/packages/vue-form/src/useField.tsx
+++ b/packages/vue-form/src/useField.tsx
@@ -1,23 +1,14 @@
-import { FieldApi } from '@tanstack/form-core';
+import { FieldApi } from '@tanstack/form-core'
 import type {
   FieldState,
   DeepKeys,
   DeepValue,
   FieldOptions,
-  Narrow
-} from '@tanstack/form-core';
+  Narrow,
+} from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
-import {
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  watch
-} from 'vue-demi';
-import type {
-  SlotsType,
-  SetupContext,
-  Ref
-} from 'vue-demi';
+import { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi'
+import type { SlotsType, SetupContext, Ref } from 'vue-demi'
 import { provideFormContext, useFormContext } from './formContext'
 
 declare module '@tanstack/form-core' {
@@ -130,12 +121,15 @@ export type FieldComponent<TParentData, TFormData> = <TField>(
           name: TField extends undefined ? TField : DeepKeys<TParentData>
           index?: never
         }),
-  context: SetupContext<{}, SlotsType<{
-    default: {
-      field: FieldApi<FieldValue<TParentData, TField>, TFormData>
-      state: FieldState<any>
-    }
-  }>>,
+  context: SetupContext<
+    {},
+    SlotsType<{
+      default: {
+        field: FieldApi<FieldValue<TParentData, TField>, TFormData>
+        state: FieldState<any>
+      }
+    }>
+  >,
 ) => any
 
 export const Field = defineComponent(
@@ -150,10 +144,11 @@ export const Field = defineComponent(
       parentFieldName: fieldApi.api.name,
     } as never)
 
-    return () => context.slots.default!({
-      field: fieldApi.api,
-      state: fieldApi.state.value
-    })
+    return () =>
+      context.slots.default!({
+        field: fieldApi.api,
+        state: fieldApi.state.value,
+      })
   },
   { name: 'Field', inheritAttrs: false },
 )
diff --git a/packages/vue-form/src/useForm.tsx b/packages/vue-form/src/useForm.tsx
index 5ec06954c..51f7e8c7c 100644
--- a/packages/vue-form/src/useForm.tsx
+++ b/packages/vue-form/src/useForm.tsx
@@ -2,7 +2,12 @@ import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { provideFormContext } from './formContext'
-import { type EmitsOptions, type SlotsType, type SetupContext, defineComponent } from 'vue-demi'
+import {
+  type EmitsOptions,
+  type SlotsType,
+  type SetupContext,
+  defineComponent,
+} from 'vue-demi'
 import type { NoInfer } from './types'
 
 declare module '@tanstack/form-core' {
@@ -15,9 +20,15 @@ declare module '@tanstack/form-core' {
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
     ) => TSelected
-    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
-      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
-    }, context: SetupContext<EmitsOptions, SlotsType<{ default: NoInfer<FormState<TFormData>> }>>) => any
+    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(
+      props: {
+        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
+      },
+      context: SetupContext<
+        EmitsOptions,
+        SlotsType<{ default: NoInfer<FormState<TFormData>> }>
+      >,
+    ) => any
   }
 }