@tanstack/vue-form 0.13.0 → 0.13.1

package/dist/cjs/createFormFactory.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useField = require("./useField.cjs");
+const useForm = require("./useForm.cjs");
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: (opts) => {
+      const formOptions = Object.assign({}, defaultOpts, opts);
+      return useForm.useForm(formOptions);
+    },
+    useField: useField.useField,
+    Field: useField.Field
+  };
+}
+exports.createFormFactory = createFormFactory;
+//# sourceMappingURL=createFormFactory.cjs.map

package/dist/cjs/createFormFactory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["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":["useForm","useField","Field"],"mappings":";;;;AAgBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAA,GAAI,aAAa,IAAI;AACvD,aAAOA,QAAAA,QAAmC,WAAW;AAAA,IACvD;AAAA,IAAA,UACAC,SAAA;AAAA,IAAA,OACAC,SAAA;AAAA,EAAA;AAEJ;;"}

package/dist/cjs/formContext.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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;
+}
+exports.formContext = formContext;
+exports.provideFormContext = provideFormContext;
+exports.useFormContext = useFormContext;
+//# sourceMappingURL=formContext.cjs.map

package/dist/cjs/formContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"formContext.cjs","sources":["../../src/formContext.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"],"names":["provide","inject"],"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;;;;"}

package/dist/cjs/index.cjs

@@ -1,114 +1,17 @@
 "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;
+const createFormFactory = require("./createFormFactory.cjs");
+const formContext = require("./formContext.cjs");
+const useField = require("./useField.cjs");
+const useForm = require("./useForm.cjs");
+exports.createFormFactory = createFormFactory.createFormFactory;
+exports.formContext = formContext.formContext;
+exports.provideFormContext = formContext.provideFormContext;
+exports.useFormContext = formContext.useFormContext;
+exports.Field = useField.Field;
+exports.useField = useField.useField;
+exports.useForm = useForm.useForm;
 Object.keys(formCore).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
     Object.defineProperty(exports, k, {

package/dist/cjs/index.cjs.map

@@ -1 +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;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/useField.cjs

@@ -0,0 +1,50 @@
+"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 = require("./formContext.cjs");
+function useField(opts) {
+  const { formApi, parentFieldName } = formContext.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 });
+    formContext.provideFormContext({
+      formApi: fieldApi.api.form,
+      parentFieldName: fieldApi.api.name
+    });
+    return () => context.slots.default({
+      field: fieldApi.api,
+      state: fieldApi.state.value
+    });
+  },
+  { name: "Field", inheritAttrs: false }
+);
+exports.Field = Field;
+exports.useField = useField;
+//# sourceMappingURL=useField.cjs.map

package/dist/cjs/useField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["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"],"names":["useFormContext","FieldApi","useStore","onMounted","onUnmounted","watch","defineComponent","provideFormContext"],"mappings":";;;;;;AAmDO,SAAS,SAWd,MA6BA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAIA,YAAe,eAAA;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;AAEnDC,mCAAA;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;;;"}

package/dist/cjs/useForm.cjs

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formCore = require("@tanstack/form-core");
+const vueStore = require("@tanstack/vue-store");
+const useField = require("./useField.cjs");
+const formContext = require("./formContext.cjs");
+const vue = require("vue");
+function useForm(opts) {
+  const formApi = (() => {
+    const api = new formCore.FormApi(opts);
+    api.Provider = vue.defineComponent(
+      (_, context) => {
+        vue.onMounted(api.mount);
+        formContext.provideFormContext({ formApi });
+        return () => context.slots.default();
+      },
+      { name: "Provider" }
+    );
+    api.provideFormContext = () => {
+      vue.onMounted(api.mount);
+      formContext.provideFormContext({ formApi });
+    };
+    api.Field = useField.Field;
+    api.useField = 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;
+}
+exports.useForm = useForm;
+//# sourceMappingURL=useForm.cjs.map

package/dist/cjs/useForm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["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"],"names":["FormApi","defineComponent","onMounted","provideFormContext","Field","useField","useStore"],"mappings":";;;;;;;AAwCO,SAAS,QAId,MACoC;AACpC,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAIA,iBAAmC,IAAI;AAEvD,QAAI,WAAWC,IAAA;AAAA,MACb,CAAC,GAAG,YAAY;AACdC,sBAAU,IAAI,KAAK;AACAC,uCAAA,EAAE,SAA2B;AACzC,eAAA,MAAM,QAAQ,MAAM;MAC7B;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IAAA;AAErB,QAAI,qBAAqB,MAAM;AAC7BD,oBAAU,IAAI,KAAK;AACAC,qCAAA,EAAE,SAA2B;AAAA,IAAA;AAElD,QAAI,QAAQC;AACZ,QAAI,WAAWC;AACX,QAAA,WAAW,CAAC,aAAa;AACpB,aAAAC,kBAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,QAAI,YAAYL,IAAA;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAOK,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;;"}

package/dist/esm/createFormFactory.js

@@ -0,0 +1,16 @@
+import { useField, Field } 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/dist/esm/createFormFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["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":[],"mappings":";;AAgBO,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/esm/formContext.js

@@ -0,0 +1,18 @@
+import { provide, inject } 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;
+}
+export {
+  formContext,
+  provideFormContext,
+  useFormContext
+};
+//# sourceMappingURL=formContext.js.map

package/dist/esm/formContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formContext.js","sources":["../../src/formContext.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"],"names":[],"mappings":";AAWa,MAAA,cAAc,OAAO,aAAa;AAExC,SAAS,mBAGd,KAA6C;AAC7C,UAAQ,aAAa,GAAG;AAC1B;AAEO,SAAS,iBAAiB;AACzB,QAAA,UAAU,OAAO,WAAW;AAElC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;"}

package/dist/esm/index.js

@@ -0,0 +1,15 @@
+export * from "@tanstack/form-core";
+import { createFormFactory } from "./createFormFactory.js";
+import { formContext, provideFormContext, useFormContext } from "./formContext.js";
+import { Field, useField } from "./useField.js";
+import { useForm } from "./useForm.js";
+export {
+  Field,
+  createFormFactory,
+  formContext,
+  provideFormContext,
+  useField,
+  useForm,
+  useFormContext
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/esm/useField.js

@@ -0,0 +1,50 @@
+import { FieldApi } from "@tanstack/form-core";
+import { useStore } from "@tanstack/vue-store";
+import { onMounted, onUnmounted, watch, defineComponent } from "vue";
+import { useFormContext, provideFormContext } from "./formContext.js";
+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 }
+);
+export {
+  Field,
+  useField
+};
+//# sourceMappingURL=useField.js.map

package/dist/esm/useField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["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"],"names":[],"mappings":";;;;AAmDO,SAAS,SAWd,MA6BA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IAAA,CACH;AAEV,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA;AAGT,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJ,YAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAED,cAAY,MAAM;AACR;EAAA,CACT;AAED;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,QAAQ;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;"}

package/dist/esm/useForm.js

@@ -0,0 +1,46 @@
+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, onMounted } from "vue";
+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;
+}
+export {
+  useForm
+};
+//# sourceMappingURL=useForm.js.map

package/dist/esm/useForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["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"],"names":[],"mappings":";;;;;AAwCO,SAAS,QAId,MACoC;AACpC,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,kBAAU,IAAI,KAAK;AACA,2BAAA,EAAE,SAA2B;AACzC,eAAA,MAAM,QAAQ,MAAM;MAC7B;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IAAA;AAErB,QAAI,qBAAqB,MAAM;AAC7B,gBAAU,IAAI,KAAK;AACA,yBAAA,EAAE,SAA2B;AAAA,IAAA;AAElD,QAAI,QAAQ;AACZ,QAAI,WAAW;AACX,QAAA,WAAW,CAAC,aAAa;AACpB,aAAA,SAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,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,IAAA;AAGK,WAAA;AAAA,EAAA;AAIT,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -11,14 +11,14 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "type": "module",
-  "types": "dist/mjs/index.d.mts",
+  "types": "dist/esm/index.d.ts",
   "main": "dist/cjs/index.cjs",
-  "module": "dist/mjs/index.mjs",
+  "module": "dist/esm/index.js",
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/mjs/index.d.mts",
-        "default": "./dist/mjs/index.mjs"
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
       },
       "require": {
         "types": "./dist/cjs/index.d.cts",
@@ -33,11 +33,11 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/store": "0.1.3",
     "@tanstack/vue-store": "0.1.3",
-    "@tanstack/form-core": "0.13.0"
+    "@tanstack/form-core": "0.13.1"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
     "vue": "^3.3.4"
   },
   "peerDependencies": {
@@ -46,10 +46,10 @@
   "scripts": {
     "clean": "rimraf ./dist && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types:versions49": "../../node_modules/typescript49/bin/tsc --noEmit",
-    "test:types:versions50": "../../node_modules/typescript50/bin/tsc --noEmit",
-    "test:types:versions51": "../../node_modules/typescript51/bin/tsc --noEmit",
-    "test:types:versions52": "tsc --noEmit",
+    "test:types:versions49": "../../node_modules/typescript49/bin/tsc --project tsconfig.legacy.json",
+    "test:types:versions50": "../../node_modules/typescript50/bin/tsc",
+    "test:types:versions51": "../../node_modules/typescript51/bin/tsc",
+    "test:types:versions52": "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/dist/cjs/index.js

@@ -1,119 +0,0 @@
-"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

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

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

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

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

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

package/dist/mjs/index.d.mts

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

package/dist/mjs/index.d.ts

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

package/dist/mjs/index.js

@@ -1,113 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","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":[],"mappings":";;;;AAWa,MAAA,cAAc,OAAO,aAAa;AAExC,SAAS,mBAGd,KAA6C;AAC7C,UAAQ,aAAa,GAAG;AAC1B;AAEO,SAAS,iBAAiB;AACzB,QAAA,UAAU,OAAO,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,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IAAA,CACH;AAEV,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA;AAGT,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJ,YAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAED,cAAY,MAAM;AACR;EAAA,CACT;AAED;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,QAAQ;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,IAAI,QAAmC,IAAI;AAEvD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,kBAAU,IAAI,KAAK;AACA,2BAAA,EAAE,SAA2B;AACzC,eAAA,MAAM,QAAQ,MAAM;MAC7B;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IAAA;AAErB,QAAI,qBAAqB,MAAM;AAC7B,gBAAU,IAAI,KAAK;AACA,yBAAA,EAAE,SAA2B;AAAA,IAAA;AAElD,QAAI,QAAQ;AACZ,QAAI,WAAW;AACX,QAAA,WAAW,CAAC,aAAa;AACpB,aAAA,SAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,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,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/mjs/tests/useField.test.d.ts

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

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

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

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

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