@tanstack/vue-form 0.3.1 → 0.3.3

package/build/legacy/useForm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAuC;AACvC,sBAAoE;AACpE,yBAAmC;AACnC,sBAKO;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAAe,IAAI;AAEnC,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,mDAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,iBAAO,2BAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,gBAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,WAAO,2BAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}

package/build/legacy/useForm.d.cts

@@ -0,0 +1,23 @@
+import { FormState, FormOptions, FormApi } from '@tanstack/form-core';
+import { NoInfer } from '@tanstack/vue-store';
+import { FieldComponent, UseField } from './useField.cjs';
+import { SetupContext, EmitsOptions, SlotsType } from 'vue-demi';
+import './types.cjs';
+
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData> {
+        Provider: (props: Record<string, any> & {}) => any;
+        provideFormContext: () => void;
+        Field: FieldComponent<TFormData, TFormData>;
+        useField: UseField<TFormData>;
+        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;
+    }
+}
+declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
+
+export { useForm };

package/build/legacy/useForm.d.ts

@@ -0,0 +1,23 @@
+import { FormState, FormOptions, FormApi } from '@tanstack/form-core';
+import { NoInfer } from '@tanstack/vue-store';
+import { FieldComponent, UseField } from './useField.js';
+import { SetupContext, EmitsOptions, SlotsType } from 'vue-demi';
+import './types.js';
+
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData> {
+        Provider: (props: Record<string, any> & {}) => any;
+        provideFormContext: () => void;
+        Field: FieldComponent<TFormData, TFormData>;
+        useField: UseField<TFormData>;
+        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;
+    }
+}
+declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
+
+export { useForm };

package/build/legacy/useForm.js

@@ -0,0 +1,47 @@
+// src/useForm.tsx
+import { FormApi } from "@tanstack/form-core";
+import { useStore } from "@tanstack/vue-store";
+import { Field, useField } from "./useField.js";
+import { provideFormContext } from "./formContext.js";
+import {
+  defineComponent
+} from "vue-demi";
+function useForm(opts) {
+  const formApi = (() => {
+    const api = new FormApi(opts);
+    api.Provider = defineComponent(
+      (_, context) => {
+        provideFormContext({ formApi });
+        return () => context.slots.default();
+      },
+      { name: "Provider" }
+    );
+    api.provideFormContext = () => {
+      provideFormContext({ formApi });
+    };
+    api.Field = Field;
+    api.useField = useField;
+    api.useStore = (selector) => {
+      return useStore(api.store, selector);
+    };
+    api.Subscribe = defineComponent(
+      (props, context) => {
+        const allProps = { ...props, ...context.attrs };
+        const selector = allProps.selector ?? ((state) => state);
+        const data = useStore(api.store, selector);
+        return () => context.slots.default(data.value);
+      },
+      {
+        name: "Subscribe",
+        inheritAttrs: false
+      }
+    );
+    return api;
+  })();
+  formApi.update(opts);
+  return formApi;
+}
+export {
+  useForm
+};
+//# sourceMappingURL=useForm.js.map

package/build/legacy/useForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  defineComponent,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const formApi = (() => {\n    const api = new FormApi<TData>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        provideFormContext({ formApi })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      provideFormContext({ formApi })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,OACK;AAwBA,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAAe,IAAI;AAEnC,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,YAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}

package/build/lib/createFormFactory.d.ts

@@ -0,0 +1,8 @@
+import type { FormApi, FormOptions } from '@tanstack/form-core';
+import { type UseField, type FieldComponent } from './useField';
+export type FormFactory<TFormData> = {
+    useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
+    useField: UseField<TFormData>;
+    Field: FieldComponent<TFormData, TFormData>;
+};
+export declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;

package/build/lib/createFormFactory.js

@@ -0,0 +1,12 @@
+import { Field, useField } from './useField';
+import { useForm } from './useForm';
+export function createFormFactory(defaultOpts) {
+    return {
+        useForm: (opts) => {
+            const formOptions = Object.assign({}, defaultOpts, opts);
+            return useForm(formOptions);
+        },
+        useField: useField,
+        Field: Field,
+    };
+}

package/build/lib/formContext.d.ts

@@ -0,0 +1,11 @@
+import type { FormApi } from '@tanstack/form-core';
+export type FormContext = {
+    formApi: FormApi<any>;
+    parentFieldName?: string;
+} | null;
+export declare const formContext: unique symbol;
+export declare function provideFormContext(val: FormContext): void;
+export declare function useFormContext(): {
+    formApi: FormApi<any>;
+    parentFieldName?: string | undefined;
+};

package/build/lib/formContext.js

@@ -0,0 +1,12 @@
+import { inject, provide } from 'vue-demi';
+export const formContext = Symbol('FormContext');
+export function provideFormContext(val) {
+    provide(formContext, val);
+}
+export function useFormContext() {
+    const formApi = inject(formContext);
+    if (!formApi) {
+        throw new Error(`You are trying to use the form API outside of a form!`);
+    }
+    return formApi;
+}

package/build/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from '@tanstack/form-core';
+export * from './createFormFactory';
+export * from './formContext';
+export * from './useField';
+export * from './useForm';

package/build/lib/index.js

@@ -0,0 +1,5 @@
+export * from '@tanstack/form-core';
+export * from './createFormFactory';
+export * from './formContext';
+export * from './useField';
+export * from './useForm';

package/build/lib/tests/useField.test.d.ts

@@ -0,0 +1,2 @@
+/// <reference lib="dom" />
+import '@testing-library/jest-dom';

package/build/lib/tests/useField.test.jsx

@@ -0,0 +1,109 @@
+/// <reference lib="dom" />
+import { defineComponent } from 'vue-demi';
+import { render, waitFor } from '@testing-library/vue';
+import '@testing-library/jest-dom';
+import { createFormFactory, provideFormContext, } from '../index';
+import userEvent from '@testing-library/user-event';
+import { sleep } from './utils';
+const user = userEvent.setup();
+describe('useField', () => {
+    it('should allow to set default value', async () => {
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" defaultValue="FirstName">
+          {({ field }) => (<input data-testid={'fieldinput'} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>)}
+        </form.Field>);
+        });
+        const { getByTestId } = render(Comp);
+        const input = getByTestId('fieldinput');
+        await waitFor(() => expect(input).toHaveValue('FirstName'));
+    });
+    it('should not validate on change if isTouched is false', async () => {
+        const error = 'Please enter a different value';
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" onChange={(value) => (value === 'other' ? error : undefined)}>
+          {({ field }) => (<div>
+              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.setValue(e.target.value)}/>
+              <p>{field.getMeta().errors}</p>
+            </div>)}
+        </form.Field>);
+        });
+        const { getByTestId, queryByText } = render(Comp);
+        const input = getByTestId('fieldinput');
+        await user.type(input, 'other');
+        expect(queryByText(error)).not.toBeInTheDocument();
+    });
+    it('should validate on change if isTouched is true', async () => {
+        const error = 'Please enter a different value';
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" onChange={(value) => (value === 'other' ? error : undefined)}>
+          {({ field }) => (<div>
+              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
+              <p>{field.getMeta().errors}</p>
+            </div>)}
+        </form.Field>);
+        });
+        const { getByTestId, getByText, queryByText } = render(Comp);
+        const input = getByTestId('fieldinput');
+        expect(queryByText(error)).not.toBeInTheDocument();
+        await user.type(input, 'other');
+        expect(getByText(error)).toBeInTheDocument();
+    });
+    it('should validate async on change', async () => {
+        const error = 'Please enter a different value';
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" defaultMeta={{ isTouched: true }} onChangeAsync={async () => {
+                    await sleep(10);
+                    return error;
+                }}>
+          {({ field }) => (<div>
+              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
+              <p>{field.getMeta().errors}</p>
+            </div>)}
+        </form.Field>);
+        });
+        const { getByTestId, getByText, queryByText } = render(Comp);
+        const input = getByTestId('fieldinput');
+        expect(queryByText(error)).not.toBeInTheDocument();
+        await user.type(input, 'other');
+        await waitFor(() => getByText(error));
+        expect(getByText(error)).toBeInTheDocument();
+    });
+    it('should validate async on change with debounce', async () => {
+        const mockFn = vi.fn();
+        const error = 'Please enter a different value';
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" defaultMeta={{ isTouched: true }} onChangeAsyncDebounceMs={100} onChangeAsync={async () => {
+                    mockFn();
+                    await sleep(10);
+                    return error;
+                }}>
+          {({ field }) => (<div>
+              <input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
+              <p>{field.getMeta().errors}</p>
+            </div>)}
+        </form.Field>);
+        });
+        const { getByTestId, getByText } = render(<Comp />);
+        const input = getByTestId('fieldinput');
+        await user.type(input, 'other');
+        // mockFn will have been called 5 times without onChangeAsyncDebounceMs
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        await waitFor(() => getByText(error));
+        expect(getByText(error)).toBeInTheDocument();
+    });
+});

package/build/lib/tests/useForm.test.d.ts

@@ -0,0 +1,2 @@
+/// <reference lib="dom" />
+import '@testing-library/jest-dom';

package/build/lib/tests/useForm.test.jsx

@@ -0,0 +1,71 @@
+/// <reference lib="dom" />
+import { defineComponent, ref } from 'vue-demi';
+import { render, waitFor } from '@testing-library/vue';
+import '@testing-library/jest-dom';
+import { createFormFactory, provideFormContext, useForm, } from '../index';
+import userEvent from '@testing-library/user-event';
+const user = userEvent.setup();
+describe('useForm', () => {
+    it('preserved field state', async () => {
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm();
+            provideFormContext({ formApi: form });
+            return () => (<form.Field name="firstName" defaultValue="">
+          {({ field }) => (<input data-testid={'fieldinput'} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>)}
+        </form.Field>);
+        });
+        const { getByTestId, queryByText } = render(Comp);
+        const input = getByTestId('fieldinput');
+        expect(queryByText('FirstName')).not.toBeInTheDocument();
+        await user.type(input, 'FirstName');
+        expect(input).toHaveValue('FirstName');
+    });
+    it('should allow default values to be set', async () => {
+        const formFactory = createFormFactory();
+        const Comp = defineComponent(() => {
+            const form = formFactory.useForm({
+                defaultValues: {
+                    firstName: 'FirstName',
+                    lastName: 'LastName',
+                },
+            });
+            form.provideFormContext();
+            return () => (<form.Field name="firstName" defaultValue="">
+          {({ field }) => (<p>{field.state.value}</p>)}
+        </form.Field>);
+        });
+        const { findByText, queryByText } = render(Comp);
+        expect(await findByText('FirstName')).toBeInTheDocument();
+        expect(queryByText('LastName')).not.toBeInTheDocument();
+    });
+    it('should handle submitting properly', async () => {
+        const Comp = defineComponent(() => {
+            const submittedData = ref();
+            const form = useForm({
+                defaultValues: {
+                    firstName: 'FirstName',
+                },
+                onSubmit: (data) => {
+                    submittedData.value = data;
+                },
+            });
+            form.provideFormContext();
+            return () => (<form.Provider>
+          <form.Field name="firstName">
+            {({ field, }) => {
+                    return (<input value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} placeholder={'First name'}/>);
+                }}
+          </form.Field>
+          <button onClick={form.handleSubmit}>Submit</button>
+          {submittedData.value && (<p>Submitted data: {submittedData.value.firstName}</p>)}
+        </form.Provider>);
+        });
+        const { findByPlaceholderText, getByText } = render(Comp);
+        const input = await findByPlaceholderText('First name');
+        await user.clear(input);
+        await user.type(input, 'OtherName');
+        await user.click(getByText('Submit'));
+        await waitFor(() => expect(getByText('Submitted data: OtherName')).toBeInTheDocument());
+    });
+});

package/build/lib/tests/utils.d.ts

@@ -0,0 +1 @@
+export declare function sleep(timeout: number): Promise<void>;

package/build/lib/tests/utils.js

@@ -0,0 +1,5 @@
+export function sleep(timeout) {
+    return new Promise((resolve, _reject) => {
+        setTimeout(resolve, timeout);
+    });
+}

package/build/lib/types.d.ts

@@ -0,0 +1,4 @@
+import type { FieldOptions, DeepKeys } from '@tanstack/form-core';
+export type UseFieldOptions<TData, TFormData, TName = unknown extends TFormData ? string : DeepKeys<TFormData>> = FieldOptions<TData, TFormData, TName> & {
+    mode?: 'value' | 'array';
+};

package/build/lib/types.js

@@ -0,0 +1 @@
+export {};

package/build/lib/useField.d.ts

@@ -0,0 +1,42 @@
+import { FieldApi, type FieldApiOptions, type FormApi } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core';
+import type { SlotsType, SetupContext, Ref } from 'vue-demi';
+import type { UseFieldOptions } from './types';
+declare module '@tanstack/form-core' {
+    interface FieldApi<_TData, TFormData, Opts, TData> {
+        Field: FieldComponent<TFormData, TData>;
+    }
+}
+export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
+    name: Narrow<TField>;
+} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
+export declare function useField<TData, TFormData, TName extends unknown extends TFormData ? string : DeepKeys<TFormData> = unknown extends TFormData ? string : DeepKeys<TFormData>>(opts: UseFieldOptions<TData, TFormData, TName>): {
+    api: FieldApi<TData, TFormData, Omit<typeof opts, 'onMount'> & {
+        form: FormApi<TFormData>;
+    }>;
+    state: Readonly<Ref<FieldApi<TData, TFormData, Omit<typeof opts, 'onMount'> & {
+        form: FormApi<TFormData>;
+    }>['state']>>;
+};
+export type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
+type FieldComponentProps<TParentData, TFormData, TField, TName extends unknown extends TFormData ? string : DeepKeys<TFormData>> = (TParentData extends any[] ? {
+    name?: TName;
+    index: number;
+} : {
+    name: TName;
+    index?: never;
+}) & Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>;
+export type FieldComponent<TParentData, TFormData> = <TField, TName extends unknown extends TFormData ? string : DeepKeys<TFormData>>(fieldOptions: FieldComponentProps<TParentData, TFormData, TField, TName>, context: SetupContext<{}, SlotsType<{
+    default: {
+        field: FieldApi<TField, TFormData, FieldApiOptions<TField, TFormData, TName>>;
+        state: FieldApi<TField, TFormData, FieldApiOptions<TField, TFormData, TName>>['state'];
+    };
+}>>) => any;
+export declare const Field: <TData, TFormData>(props: import("@tanstack/form-core").FieldOptions<TData, TFormData, unknown extends TFormData ? string : DeepKeys<TFormData>, unknown extends TData ? DeepValue<TFormData, unknown extends TFormData ? string : DeepKeys<TFormData>> : TData> & {
+    mode?: "value" | "array" | undefined;
+} & ({
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+})) => any;
+export {};

package/build/lib/useField.jsx

@@ -0,0 +1,41 @@
+import { FieldApi, } from '@tanstack/form-core';
+import { useStore } from '@tanstack/vue-store';
+import { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi';
+import { provideFormContext, useFormContext } from './formContext';
+export function useField(opts) {
+    // Get the form API either manually or from context
+    const { formApi, parentFieldName } = useFormContext();
+    const fieldApi = (() => {
+        const api = new FieldApi({
+            ...opts,
+            form: formApi,
+            name: opts.name,
+        });
+        api.Field = Field;
+        return api;
+    })();
+    const fieldState = useStore(fieldApi.store, (state) => state);
+    let cleanup;
+    onMounted(() => {
+        cleanup = fieldApi.mount();
+    });
+    onUnmounted(() => {
+        cleanup();
+    });
+    watch(() => opts, () => {
+        // Keep options up to date as they are rendered
+        fieldApi.update({ ...opts, form: formApi });
+    });
+    return { api: fieldApi, state: fieldState };
+}
+export const Field = defineComponent((fieldOptions, context) => {
+    const fieldApi = useField({ ...fieldOptions, ...context.attrs });
+    provideFormContext({
+        formApi: fieldApi.api.form,
+        parentFieldName: fieldApi.api.name,
+    });
+    return () => context.slots.default({
+        field: fieldApi.api,
+        state: fieldApi.state.value,
+    });
+}, { name: 'Field', inheritAttrs: false });

package/build/lib/useForm.d.ts

@@ -0,0 +1,19 @@
+import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core';
+import { type NoInfer } from '@tanstack/vue-store';
+import { type UseField, type FieldComponent } from './useField';
+import { type EmitsOptions, type SlotsType, type SetupContext } from 'vue-demi';
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData> {
+        Provider: (props: Record<string, any> & {}) => any;
+        provideFormContext: () => void;
+        Field: FieldComponent<TFormData, TFormData>;
+        useField: UseField<TFormData>;
+        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;
+    }
+}
+export declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;

package/build/lib/useForm.jsx

@@ -0,0 +1,35 @@
+import { FormApi } from '@tanstack/form-core';
+import { useStore } from '@tanstack/vue-store';
+import { Field, useField } from './useField';
+import { provideFormContext } from './formContext';
+import { defineComponent, } from 'vue-demi';
+export function useForm(opts) {
+    const formApi = (() => {
+        const api = new FormApi(opts);
+        api.Provider = defineComponent((_, context) => {
+            provideFormContext({ formApi });
+            return () => context.slots.default();
+        }, { name: 'Provider' });
+        api.provideFormContext = () => {
+            provideFormContext({ formApi });
+        };
+        api.Field = Field;
+        api.useField = useField;
+        api.useStore = (selector) => {
+            return useStore(api.store, selector);
+        };
+        api.Subscribe = defineComponent((props, context) => {
+            const allProps = { ...props, ...context.attrs };
+            const selector = allProps.selector ?? ((state) => state);
+            const data = useStore(api.store, selector);
+            return () => context.slots.default(data.value);
+        }, {
+            name: 'Subscribe',
+            inheritAttrs: false,
+        });
+        return api;
+    })();
+    // formApi.useStore((state) => state.isSubmitting)
+    formApi.update(opts);
+    return formApi;
+}

package/build/modern/createFormFactory.cjs

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/createFormFactory.ts
+var createFormFactory_exports = {};
+__export(createFormFactory_exports, {
+  createFormFactory: () => createFormFactory
+});
+module.exports = __toCommonJS(createFormFactory_exports);
+var import_useField = require("./useField.cjs");
+var import_useForm = require("./useForm.cjs");
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return (0, import_useForm.useForm)(formOptions);
+    },
+    useField: import_useField.useField,
+    Field: import_useField.Field
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createFormFactory
+});
+//# sourceMappingURL=createFormFactory.cjs.map

package/build/modern/createFormFactory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAoE;AACpE,qBAAwB;AAQjB,SAAS,kBACd,aACwB;AACxB,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,iBAAO,wBAAmB,WAAW;AAAA,IACvC;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;","names":[]}

package/build/modern/createFormFactory.d.cts

@@ -0,0 +1,13 @@
+import { FormOptions, FormApi } from '@tanstack/form-core';
+import { UseField, FieldComponent } from './useField.cjs';
+import 'vue-demi';
+import './types.cjs';
+
+type FormFactory<TFormData> = {
+    useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
+    useField: UseField<TFormData>;
+    Field: FieldComponent<TFormData, TFormData>;
+};
+declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
+
+export { FormFactory, createFormFactory };

package/build/modern/createFormFactory.d.ts

@@ -0,0 +1,13 @@
+import { FormOptions, FormApi } from '@tanstack/form-core';
+import { UseField, FieldComponent } from './useField.js';
+import 'vue-demi';
+import './types.js';
+
+type FormFactory<TFormData> = {
+    useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
+    useField: UseField<TFormData>;
+    Field: FieldComponent<TFormData, TFormData>;
+};
+declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
+
+export { FormFactory, createFormFactory };

package/build/modern/createFormFactory.js

@@ -0,0 +1,17 @@
+// src/createFormFactory.ts
+import { Field, useField } from "./useField.js";
+import { useForm } from "./useForm.js";
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
+    },
+    useField,
+    Field
+  };
+}
+export {
+  createFormFactory
+};
+//# sourceMappingURL=createFormFactory.js.map

package/build/modern/createFormFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"mappings":";AAEA,SAA6C,OAAO,gBAAgB;AACpE,SAAS,eAAe;AAQjB,SAAS,kBACd,aACwB;AACxB,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,aAAO,QAAmB,WAAW;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}