@tanstack/vue-form 0.16.0 → 0.16.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@tanstack/vue-store": "^0.3.1",
-    "@tanstack/form-core": "0.16.0"
+    "@tanstack/form-core": "0.16.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
@@ -49,7 +49,9 @@
     "test:types:versions49": "node ../../node_modules/typescript49/lib/tsc.js --project tsconfig.legacy.json",
     "test:types:versions50": "node ../../node_modules/typescript50/lib/tsc.js",
     "test:types:versions51": "node ../../node_modules/typescript51/lib/tsc.js",
-    "test:types:versions52": "tsc",
+    "test:types:versions52": "node ../../node_modules/typescript52/lib/tsc.js",
+    "test:types:versions53": "node ../../node_modules/typescript53/lib/tsc.js",
+    "test:types:versions54": "tsc",
     "test:types": "pnpm run \"/^test:types:versions.*/\"",
     "fixme:test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
     "test:lib": "vitest",

package/src/tests/useField.test.tsx

@@ -251,6 +251,106 @@ describe('useField', () => {
     expect(getByText(error)).toBeInTheDocument()
   })
 
+  it('should handle arrays with subvalues', async () => {
+    const fn = vi.fn()
+
+    type CompVal = { people: Array<string> }
+
+    const Comp = defineComponent(() => {
+      const form = useForm({
+        defaultValues: {
+          people: [],
+        } as CompVal,
+        onSubmit: ({ value }) => fn(value),
+      })
+
+      return () => (
+        <div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              void form.handleSubmit()
+            }}
+          >
+            <form.Field name="people">
+              {({
+                field,
+              }: {
+                field: FieldApi<CompVal, 'people', never, never>
+              }) => (
+                <div>
+                  {field.state.value.map((_, i) => {
+                    return (
+                      <form.Field key={i} name={`people[${i}]`}>
+                        {({
+                          field: subField,
+                        }: {
+                          field: FieldApi<
+                            CompVal,
+                            `people[${number}]`,
+                            never,
+                            never
+                          >
+                        }) => (
+                          <div>
+                            <label>
+                              <div>Name for person {i}</div>
+                              <input
+                                value={subField.state.value}
+                                onChange={(e) =>
+                                  subField.handleChange(
+                                    (e.target as HTMLInputElement).value,
+                                  )
+                                }
+                              />
+                            </label>
+                            <button
+                              onClick={() => field.removeValue(i)}
+                              type="button"
+                            >
+                              Remove person {i}
+                            </button>
+                          </div>
+                        )}
+                      </form.Field>
+                    )
+                  })}
+                  <button onClick={() => field.pushValue('')} type="button">
+                    Add person
+                  </button>
+                </div>
+              )}
+            </form.Field>
+            <button type="submit">Submit</button>
+          </form>
+        </div>
+      )
+    })
+
+    const { queryByText, getByText, findByLabelText, findByText } = render(Comp)
+    expect(queryByText('Name for person 0')).not.toBeInTheDocument()
+    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
+    await user.click(getByText('Add person'))
+    const input = await findByLabelText('Name for person 0')
+    expect(input).toBeInTheDocument()
+    await user.type(input, 'John')
+
+    await user.click(getByText('Add person'))
+    const input2 = await findByLabelText('Name for person 1')
+    expect(input).toBeInTheDocument()
+    await user.type(input2, 'Jack')
+
+    expect(queryByText('Name for person 0')).toBeInTheDocument()
+    expect(queryByText('Name for person 1')).toBeInTheDocument()
+    await user.click(getByText('Remove person 1'))
+    expect(queryByText('Name for person 0')).toBeInTheDocument()
+    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
+
+    await user.click(await findByText('Submit'))
+    expect(fn).toHaveBeenCalledWith({ people: ['John'] })
+  })
+
   it('should handle arrays with subvalues', async () => {
     const fn = vi.fn()
 
@@ -305,6 +405,12 @@ describe('useField', () => {
                                 }
                               />
                             </label>
+                            <button
+                              onClick={() => field.removeValue(i)}
+                              type="button"
+                            >
+                              Remove person {i}
+                            </button>
                           </div>
                         )}
                       </form.Field>
@@ -327,10 +433,23 @@ describe('useField', () => {
 
     const { queryByText, getByText, findByLabelText, findByText } = render(Comp)
     expect(queryByText('Name for person 0')).not.toBeInTheDocument()
+    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
     await user.click(getByText('Add person'))
     const input = await findByLabelText('Name for person 0')
     expect(input).toBeInTheDocument()
     await user.type(input, 'John')
+
+    await user.click(getByText('Add person'))
+    const input2 = await findByLabelText('Name for person 1')
+    expect(input).toBeInTheDocument()
+    await user.type(input2, 'Jack')
+
+    expect(queryByText('Name for person 0')).toBeInTheDocument()
+    expect(queryByText('Name for person 1')).toBeInTheDocument()
+    await user.click(getByText('Remove person 1'))
+    expect(queryByText('Name for person 0')).toBeInTheDocument()
+    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
+
     await user.click(await findByText('Submit'))
     expect(fn).toHaveBeenCalledWith({ people: [{ name: 'John', age: 0 }] })
   })

package/src/useField.tsx

@@ -40,7 +40,7 @@ export type UseField<
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(
   opts: Omit<
-    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
+    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,
     'form'
   >,
 ) => {
@@ -133,7 +133,8 @@ type FieldComponentProps<
   TFormValidator extends
     | Validator<TParentData, unknown>
     | undefined = undefined,
-> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>
 
 export type FieldComponent<
   TParentData,
@@ -148,7 +149,13 @@ export type FieldComponent<
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(
   fieldOptions: Omit<
-    FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>,
+    FieldComponentProps<
+      TParentData,
+      TName,
+      TFieldValidator,
+      TFormValidator,
+      TData
+    >,
     'form'
   >,
   context: SetupContext<
@@ -184,12 +191,14 @@ export const Field = defineComponent(
     TFormValidator extends
       | Validator<TParentData, unknown>
       | undefined = undefined,
+    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
   >(
     fieldOptions: UseFieldOptions<
       TParentData,
       TName,
       TFieldValidator,
-      TFormValidator
+      TFormValidator,
+      TData
     >,
     context: SetupContext,
   ) => {