@tanstack/vue-form 0.10.3 → 0.12.0

package/dist/cjs/createFormFactory.d.ts

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

package/dist/cjs/formContext.d.ts

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

package/dist/cjs/index.cjs

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formCore = require("@tanstack/form-core");
+const vueStore = require("@tanstack/vue-store");
+const vue = require("vue");
+const formContext = Symbol("FormContext");
+function provideFormContext(val) {
+  vue.provide(formContext, val);
+}
+function useFormContext() {
+  const formApi = vue.inject(formContext);
+  if (!formApi) {
+    throw new Error(`You are trying to use the form API outside of a form!`);
+  }
+  return formApi;
+}
+function useField(opts) {
+  const { formApi, parentFieldName } = useFormContext();
+  const fieldApi = (() => {
+    const api = new formCore.FieldApi({
+      ...opts,
+      form: formApi,
+      name: opts.name
+    });
+    api.Field = Field;
+    return api;
+  })();
+  const fieldState = vueStore.useStore(fieldApi.store, (state) => state);
+  let cleanup;
+  vue.onMounted(() => {
+    cleanup = fieldApi.mount();
+  });
+  vue.onUnmounted(() => {
+    cleanup();
+  });
+  vue.watch(
+    () => opts,
+    () => {
+      fieldApi.update({ ...opts, form: formApi });
+    }
+  );
+  return { api: fieldApi, state: fieldState };
+}
+const Field = vue.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 }
+);
+function useForm(opts) {
+  const formApi = (() => {
+    const api = new formCore.FormApi(opts);
+    api.Provider = vue.defineComponent(
+      (_, context) => {
+        vue.onMounted(api.mount);
+        provideFormContext({ formApi });
+        return () => context.slots.default();
+      },
+      { name: "Provider" }
+    );
+    api.provideFormContext = () => {
+      vue.onMounted(api.mount);
+      provideFormContext({ formApi });
+    };
+    api.Field = Field;
+    api.useField = useField;
+    api.useStore = (selector) => {
+      return vueStore.useStore(api.store, selector);
+    };
+    api.Subscribe = vue.defineComponent(
+      (props, context) => {
+        const allProps = { ...props, ...context.attrs };
+        const selector = allProps.selector ?? ((state) => state);
+        const data = vueStore.useStore(api.store, selector);
+        return () => context.slots.default(data.value);
+      },
+      {
+        name: "Subscribe",
+        inheritAttrs: false
+      }
+    );
+    return api;
+  })();
+  formApi.update(opts);
+  return formApi;
+}
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
+    },
+    useField,
+    Field
+  };
+}
+exports.Field = Field;
+exports.createFormFactory = createFormFactory;
+exports.formContext = formContext;
+exports.provideFormContext = provideFormContext;
+exports.useField = useField;
+exports.useForm = useForm;
+exports.useFormContext = useFormContext;
+Object.keys(formCore).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => formCore[k]
+    });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/formContext.ts","../../src/useField.tsx","../../src/useForm.tsx","../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, Validator } from '@tanstack/form-core'\nimport { inject, provide } from 'vue'\n\nexport type FormContext<\n  TFormData = any,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  formApi: FormApi<TFormData, TFormValidator>\n  parentFieldName?: string\n} | null\n\nexport const formContext = Symbol('FormContext')\n\nexport function provideFormContext<\n  TFormData = any,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(val: FormContext<TFormData, TFormValidator>) {\n  provide(formContext, val)\n}\n\nexport function useFormContext() {\n  const formApi = inject(formContext) as FormContext\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n","import { FieldApi, type Validator } from '@tanstack/form-core'\nimport type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type { SlotsType, SetupContext, Ref } from 'vue'\nimport { provideFormContext, useFormContext } from './formContext'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    DeepValue<TParentData, TName>\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n): {\n  api: FieldApi<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n    // Omit<typeof opts, 'onMount'> & {\n    //   form: FormApi<TParentData>\n    // }\n  >\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >['state']\n    >\n  >\n} {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const fieldApi = (() => {\n    const api = new FieldApi({\n      ...opts,\n      form: formApi,\n      name: opts.name,\n    } as never)\n\n    api.Field = Field as never\n\n    return api\n  })()\n\n  const fieldState = useStore(fieldApi.store, (state) => state)\n\n  let cleanup!: () => void\n  onMounted(() => {\n    cleanup = fieldApi.mount()\n  })\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  watch(\n    () => opts,\n    () => {\n      // Keep options up to date as they are rendered\n      fieldApi.update({ ...opts, form: formApi } as never)\n    },\n  )\n\n  return { api: fieldApi, state: fieldState } as never\n}\n\nexport type FieldValue<TParentData, TName> = TParentData extends any[]\n  ? unknown extends TName\n    ? TParentData[number]\n    : DeepValue<TParentData[number], TName>\n  : DeepValue<TParentData, TName>\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  fieldOptions: FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n  context: SetupContext<\n    {},\n    SlotsType<{\n      default: {\n        field: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >\n        state: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >['state']\n      }\n    }>\n  >,\n) => any\n\nexport const Field = defineComponent(\n  <\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n  >(\n    fieldOptions: UseFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator\n    >,\n    context: SetupContext,\n  ) => {\n    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)\n\n    provideFormContext({\n      formApi: fieldApi.api.form,\n      parentFieldName: fieldApi.api.name,\n    } as never)\n\n    return () =>\n      context.slots.default!({\n        field: fieldApi.api,\n        state: fieldApi.state.value,\n      })\n  },\n  { name: 'Field', inheritAttrs: false },\n)\n","import {\n  FormApi,\n  type FormState,\n  type FormOptions,\n  type Validator,\n} 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  type Ref,\n  defineComponent,\n  onMounted,\n} from 'vue'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData, TFormValidator>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => Readonly<Ref<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<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        onMounted(api.mount)\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      onMounted(api.mount)\n      provideFormContext({ formApi: formApi as never })\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","import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  useForm: (\n    opts?: FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  useField: UseField<TFormData, TFormValidator>\n  Field: FieldComponent<TFormData, TFormValidator>\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData, TFormValidator>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["provide","inject","FieldApi","useStore","onMounted","onUnmounted","watch","defineComponent","FormApi"],"mappings":";;;;;AAWa,MAAA,cAAc,OAAO,aAAa;AAExC,SAAS,mBAGd,KAA6C;AAC7CA,cAAQ,aAAa,GAAG;AAC1B;AAEO,SAAS,iBAAiB;AACzB,QAAA,UAAUC,WAAO,WAAW;AAElC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;ACuBO,SAAS,SAWd,MA6BA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IAAA,CACH;AAEV,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA;AAGT,QAAM,aAAaC,SAAAA,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAEDC,MAAAA,YAAY,MAAM;AACR;EAAA,CACT;AAEDC,MAAA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,SAAkB;AAAA,IACrD;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAwEO,MAAM,QAAQC,IAAA;AAAA,EACnB,CAUE,cAMA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAc;AAEnD,uBAAA;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAAA,CACtB;AAEH,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;AChMO,SAAS,QAId,MACoC;AACpC,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AAEvD,QAAI,WAAWD,IAAA;AAAA,MACb,CAAC,GAAG,YAAY;AACdH,sBAAU,IAAI,KAAK;AACA,2BAAA,EAAE,SAA2B;AACzC,eAAA,MAAM,QAAQ,MAAM;MAC7B;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IAAA;AAErB,QAAI,qBAAqB,MAAM;AAC7BA,oBAAU,IAAI,KAAK;AACA,yBAAA,EAAE,SAA2B;AAAA,IAAA;AAElD,QAAI,QAAQ;AACZ,QAAI,WAAW;AACX,QAAA,WAAW,CAAC,aAAa;AACpB,aAAAD,kBAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,QAAI,YAAYI,IAAA;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAOJ,SAAA,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,IAAA;AAGK,WAAA;AAAA,EAAA;AAIT,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;ACtEO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAA,GAAI,aAAa,IAAI;AACvD,aAAO,QAAmC,WAAW;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;;;;;;;;;;;;;;"}

package/dist/cjs/index.d.cts

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

package/dist/cjs/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/dist/cjs/index.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formCore = require("@tanstack/form-core");
+const vueStore = require("@tanstack/vue-store");
+const vue = require("vue");
+const formContext = Symbol("FormContext");
+function provideFormContext(val) {
+  vue.provide(formContext, val);
+}
+function useFormContext() {
+  const formApi = vue.inject(formContext);
+  if (!formApi) {
+    throw new Error(`You are trying to use the form API outside of a form!`);
+  }
+  return formApi;
+}
+function useField(opts) {
+  const { formApi, parentFieldName } = useFormContext();
+  const fieldApi = (() => {
+    const api = new formCore.FieldApi({
+      ...opts,
+      form: formApi,
+      name: opts.name
+    });
+    api.Field = Field;
+    return api;
+  })();
+  const fieldState = vueStore.useStore(fieldApi.store, (state) => state);
+  let cleanup;
+  vue.onMounted(() => {
+    cleanup = fieldApi.mount();
+  });
+  vue.onUnmounted(() => {
+    cleanup();
+  });
+  vue.watch(
+    () => opts,
+    () => {
+      fieldApi.update({ ...opts, form: formApi });
+    }
+  );
+  return { api: fieldApi, state: fieldState };
+}
+const Field = vue.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 }
+);
+function useForm(opts) {
+  const formApi = (() => {
+    const api = new formCore.FormApi(opts);
+    api.Provider = vue.defineComponent(
+      (_, context) => {
+        vue.onMounted(api.mount);
+        provideFormContext({ formApi });
+        return () => context.slots.default();
+      },
+      { name: "Provider" }
+    );
+    api.provideFormContext = () => {
+      vue.onMounted(api.mount);
+      provideFormContext({ formApi });
+    };
+    api.Field = Field;
+    api.useField = useField;
+    api.useStore = (selector) => {
+      return vueStore.useStore(api.store, selector);
+    };
+    api.Subscribe = vue.defineComponent(
+      (props, context) => {
+        const allProps = { ...props, ...context.attrs };
+        const selector = allProps.selector ?? ((state) => state);
+        const data = vueStore.useStore(api.store, selector);
+        return () => context.slots.default(data.value);
+      },
+      {
+        name: "Subscribe",
+        inheritAttrs: false
+      }
+    );
+    return api;
+  })();
+  formApi.update(opts);
+  return formApi;
+}
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
+    },
+    useField,
+    Field
+  };
+}
+exports.Field = Field;
+exports.createFormFactory = createFormFactory;
+exports.formContext = formContext;
+exports.provideFormContext = provideFormContext;
+exports.useField = useField;
+exports.useForm = useForm;
+exports.useFormContext = useFormContext;
+Object.keys(formCore).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => formCore[k]
+    });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/tests/useField.test.d.ts

@@ -0,0 +1 @@
+/// <reference lib="dom" />

package/dist/cjs/tests/useForm.test.d.ts

@@ -0,0 +1 @@
+/// <reference lib="dom" />

package/dist/cjs/tests/utils.d.ts

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

package/dist/cjs/types.d.ts

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

package/dist/cjs/useField.d.ts

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

package/dist/cjs/useForm.d.ts

@@ -0,0 +1,19 @@
+import { FormApi, type FormState, type FormOptions, type Validator } 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, type Ref } from 'vue';
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData, TFormValidator> {
+        Provider: (props: Record<string, any> & {}) => any;
+        provideFormContext: () => void;
+        Field: FieldComponent<TFormData, TFormValidator>;
+        useField: UseField<TFormData, TFormValidator>;
+        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => Readonly<Ref<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<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;

package/dist/mjs/createFormFactory.d.ts

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

package/dist/mjs/formContext.d.ts

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

package/dist/mjs/index.d.mts

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

package/dist/mjs/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/dist/mjs/index.js

@@ -0,0 +1,113 @@
+import { FieldApi, FormApi } from "@tanstack/form-core";
+export * from "@tanstack/form-core";
+import { useStore } from "@tanstack/vue-store";
+import { provide, inject, onMounted, onUnmounted, watch, defineComponent } from "vue";
+const formContext = Symbol("FormContext");
+function provideFormContext(val) {
+  provide(formContext, val);
+}
+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;
+}
+function useField(opts) {
+  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,
+    () => {
+      fieldApi.update({ ...opts, form: formApi });
+    }
+  );
+  return { api: fieldApi, state: fieldState };
+}
+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 }
+);
+function useForm(opts) {
+  const formApi = (() => {
+    const api = new FormApi(opts);
+    api.Provider = defineComponent(
+      (_, context) => {
+        onMounted(api.mount);
+        provideFormContext({ formApi });
+        return () => context.slots.default();
+      },
+      { name: "Provider" }
+    );
+    api.provideFormContext = () => {
+      onMounted(api.mount);
+      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;
+}
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
+    },
+    useField,
+    Field
+  };
+}
+export {
+  Field,
+  createFormFactory,
+  formContext,
+  provideFormContext,
+  useField,
+  useForm,
+  useFormContext
+};
+//# sourceMappingURL=index.mjs.map

package/dist/mjs/index.mjs

@@ -0,0 +1,113 @@
+import { FieldApi, FormApi } from "@tanstack/form-core";
+export * from "@tanstack/form-core";
+import { useStore } from "@tanstack/vue-store";
+import { provide, inject, onMounted, onUnmounted, watch, defineComponent } from "vue";
+const formContext = Symbol("FormContext");
+function provideFormContext(val) {
+  provide(formContext, val);
+}
+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;
+}
+function useField(opts) {
+  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,
+    () => {
+      fieldApi.update({ ...opts, form: formApi });
+    }
+  );
+  return { api: fieldApi, state: fieldState };
+}
+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 }
+);
+function useForm(opts) {
+  const formApi = (() => {
+    const api = new FormApi(opts);
+    api.Provider = defineComponent(
+      (_, context) => {
+        onMounted(api.mount);
+        provideFormContext({ formApi });
+        return () => context.slots.default();
+      },
+      { name: "Provider" }
+    );
+    api.provideFormContext = () => {
+      onMounted(api.mount);
+      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;
+}
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm(formOptions);
+    },
+    useField,
+    Field
+  };
+}
+export {
+  Field,
+  createFormFactory,
+  formContext,
+  provideFormContext,
+  useField,
+  useForm,
+  useFormContext
+};
+//# sourceMappingURL=index.mjs.map