@tanstack/vue-form 0.13.4 → 0.13.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/createFormFactory.cjs.map +1 -1
- package/dist/cjs/createFormFactory.d.cts +1 -1
- package/dist/cjs/formContext.cjs.map +1 -1
- package/dist/cjs/types.d.cts +1 -1
- package/dist/cjs/useField.cjs.map +1 -1
- package/dist/cjs/useField.d.cts +3 -3
- package/dist/cjs/useForm.cjs +1 -1
- package/dist/cjs/useForm.cjs.map +1 -1
- package/dist/cjs/useForm.d.cts +5 -4
- package/dist/esm/createFormFactory.d.ts +1 -1
- package/dist/esm/createFormFactory.js.map +1 -1
- package/dist/esm/formContext.js.map +1 -1
- package/dist/esm/types.d.ts +1 -1
- package/dist/esm/useField.d.ts +3 -3
- package/dist/esm/useField.js.map +1 -1
- package/dist/esm/useForm.d.ts +5 -4
- package/dist/esm/useForm.js +1 -1
- package/dist/esm/useForm.js.map +1 -1
- package/package.json +3 -3
- package/src/createFormFactory.ts +3 -3
- package/src/formContext.ts +1 -1
- package/src/tests/useField.test.tsx +3 -2
- package/src/tests/useForm.test.tsx +3 -3
- package/src/types.ts +1 -1
- package/src/useField.tsx +8 -3
- package/src/useForm.tsx +8 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\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;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
|
|
2
|
-
import {
|
|
2
|
+
import type { FieldComponent, UseField } from './useField.cjs';
|
|
3
3
|
export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
|
|
4
4
|
useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
|
|
5
5
|
useField: UseField<TFormData, TFormValidator>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formContext.cjs","sources":["../../src/formContext.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"formContext.cjs","sources":["../../src/formContext.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport type { FormApi, Validator } from '@tanstack/form-core'\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/types.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DeepKeys, DeepValue, FieldOptions, Validator } from '@tanstack/form-core';
|
|
2
2
|
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> & {
|
|
3
3
|
mode?: 'value' | 'array';
|
|
4
4
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi
|
|
1
|
+
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport { provideFormContext, useFormContext } from './formContext'\nimport type {\n DeepKeys,\n DeepValue,\n Narrow,\n Validator,\n} from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\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":";;;;;;AAwDO,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/useField.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FieldApi
|
|
2
|
-
import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core';
|
|
3
|
-
import type {
|
|
1
|
+
import { FieldApi } from '@tanstack/form-core';
|
|
2
|
+
import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
|
|
3
|
+
import type { Ref, SetupContext, SlotsType } from 'vue';
|
|
4
4
|
import type { UseFieldOptions } from './types.cjs';
|
|
5
5
|
declare module '@tanstack/form-core' {
|
|
6
6
|
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>> {
|
package/dist/cjs/useForm.cjs
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const formCore = require("@tanstack/form-core");
|
|
4
4
|
const vueStore = require("@tanstack/vue-store");
|
|
5
|
+
const vue = require("vue");
|
|
5
6
|
const useField = require("./useField.cjs");
|
|
6
7
|
const formContext = require("./formContext.cjs");
|
|
7
|
-
const vue = require("vue");
|
|
8
8
|
function useForm(opts) {
|
|
9
9
|
const formApi = (() => {
|
|
10
10
|
const api = new formCore.FormApi(opts);
|
package/dist/cjs/useForm.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\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":";;;;;;;AAgCO,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/cjs/useForm.d.cts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { FormApi
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
1
|
+
import { FormApi } from '@tanstack/form-core';
|
|
2
|
+
import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
|
|
3
|
+
import type { NoInfer } from '@tanstack/vue-store';
|
|
4
|
+
import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue';
|
|
5
|
+
import type { FieldComponent, UseField } from './useField.cjs';
|
|
5
6
|
declare module '@tanstack/form-core' {
|
|
6
7
|
interface FormApi<TFormData, TFormValidator> {
|
|
7
8
|
Provider: (props: Record<string, any> & {}) => any;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
|
|
2
|
-
import {
|
|
2
|
+
import type { FieldComponent, UseField } from './useField.js';
|
|
3
3
|
export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
|
|
4
4
|
useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
|
|
5
5
|
useField: UseField<TFormData, TFormValidator>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\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;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import { inject, provide } from 'vue'\nimport type { FormApi, Validator } from '@tanstack/form-core'\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/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DeepKeys, DeepValue, FieldOptions, Validator } from '@tanstack/form-core';
|
|
2
2
|
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> & {
|
|
3
3
|
mode?: 'value' | 'array';
|
|
4
4
|
};
|
package/dist/esm/useField.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FieldApi
|
|
2
|
-
import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core';
|
|
3
|
-
import type {
|
|
1
|
+
import { FieldApi } from '@tanstack/form-core';
|
|
2
|
+
import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
|
|
3
|
+
import type { Ref, SetupContext, SlotsType } from 'vue';
|
|
4
4
|
import type { UseFieldOptions } from './types.js';
|
|
5
5
|
declare module '@tanstack/form-core' {
|
|
6
6
|
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>> {
|
package/dist/esm/useField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi
|
|
1
|
+
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport { provideFormContext, useFormContext } from './formContext'\nimport type {\n DeepKeys,\n DeepValue,\n Narrow,\n Validator,\n} from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\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":";;;;AAwDO,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.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { FormApi
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
1
|
+
import { FormApi } from '@tanstack/form-core';
|
|
2
|
+
import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
|
|
3
|
+
import type { NoInfer } from '@tanstack/vue-store';
|
|
4
|
+
import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue';
|
|
5
|
+
import type { FieldComponent, UseField } from './useField.js';
|
|
5
6
|
declare module '@tanstack/form-core' {
|
|
6
7
|
interface FormApi<TFormData, TFormValidator> {
|
|
7
8
|
Provider: (props: Record<string, any> & {}) => any;
|
package/dist/esm/useForm.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { FormApi } from "@tanstack/form-core";
|
|
2
2
|
import { useStore } from "@tanstack/vue-store";
|
|
3
|
+
import { defineComponent, onMounted } from "vue";
|
|
3
4
|
import { Field, useField } from "./useField.js";
|
|
4
5
|
import { provideFormContext } from "./formContext.js";
|
|
5
|
-
import { defineComponent, onMounted } from "vue";
|
|
6
6
|
function useForm(opts) {
|
|
7
7
|
const formApi = (() => {
|
|
8
8
|
const api = new FormApi(opts);
|
package/dist/esm/useForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\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":";;;;;AAgCO,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-form",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.6",
|
|
4
4
|
"description": "Powerful, type-safe forms for Vue.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"src"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@tanstack/vue-store": "0.1
|
|
37
|
-
"@tanstack/form-core": "0.13.
|
|
36
|
+
"@tanstack/vue-store": "^0.3.1",
|
|
37
|
+
"@tanstack/form-core": "0.13.6"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@vitejs/plugin-vue": "^5.0.2",
|
package/src/createFormFactory.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import { type UseField, type FieldComponent, Field, useField } from './useField'
|
|
1
|
+
import { Field, useField } from './useField'
|
|
4
2
|
import { useForm } from './useForm'
|
|
3
|
+
import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'
|
|
4
|
+
import type { FieldComponent, UseField } from './useField'
|
|
5
5
|
|
|
6
6
|
export type FormFactory<
|
|
7
7
|
TFormData,
|
package/src/formContext.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference lib="dom" />
|
|
2
|
-
import {
|
|
2
|
+
import { defineComponent, h } from 'vue'
|
|
3
3
|
import { render, waitFor } from '@testing-library/vue'
|
|
4
4
|
import '@testing-library/jest-dom'
|
|
5
|
-
import { createFormFactory, type FieldApi, provideFormContext } from '../index'
|
|
6
5
|
import userEvent from '@testing-library/user-event'
|
|
6
|
+
import { createFormFactory, provideFormContext } from '../index'
|
|
7
7
|
import { sleep } from './utils'
|
|
8
|
+
import type { FieldApi } from '../index'
|
|
8
9
|
|
|
9
10
|
const user = userEvent.setup()
|
|
10
11
|
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
import '@testing-library/jest-dom'
|
|
3
3
|
import userEvent from '@testing-library/user-event'
|
|
4
4
|
import { render, waitFor } from '@testing-library/vue'
|
|
5
|
-
import {
|
|
5
|
+
import { defineComponent, h, ref } from 'vue'
|
|
6
6
|
import {
|
|
7
7
|
ValidationError,
|
|
8
8
|
createFormFactory,
|
|
9
9
|
provideFormContext,
|
|
10
10
|
useForm,
|
|
11
|
-
} from '
|
|
11
|
+
} from '../index'
|
|
12
12
|
import { sleep } from './utils'
|
|
13
13
|
|
|
14
|
-
import type { FieldApi, ValidationErrorMap } from '
|
|
14
|
+
import type { FieldApi, ValidationErrorMap } from '../index'
|
|
15
15
|
|
|
16
16
|
const user = userEvent.setup()
|
|
17
17
|
|
package/src/types.ts
CHANGED
package/src/useField.tsx
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import { FieldApi
|
|
2
|
-
import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
|
|
1
|
+
import { FieldApi } from '@tanstack/form-core'
|
|
3
2
|
import { useStore } from '@tanstack/vue-store'
|
|
4
3
|
import { defineComponent, onMounted, onUnmounted, watch } from 'vue'
|
|
5
|
-
import type { SlotsType, SetupContext, Ref } from 'vue'
|
|
6
4
|
import { provideFormContext, useFormContext } from './formContext'
|
|
5
|
+
import type {
|
|
6
|
+
DeepKeys,
|
|
7
|
+
DeepValue,
|
|
8
|
+
Narrow,
|
|
9
|
+
Validator,
|
|
10
|
+
} from '@tanstack/form-core'
|
|
11
|
+
import type { Ref, SetupContext, SlotsType } from 'vue'
|
|
7
12
|
import type { UseFieldOptions } from './types'
|
|
8
13
|
|
|
9
14
|
declare module '@tanstack/form-core' {
|
package/src/useForm.tsx
CHANGED
|
@@ -1,20 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
type Validator,
|
|
6
|
-
} from '@tanstack/form-core'
|
|
7
|
-
import { type NoInfer, useStore } from '@tanstack/vue-store'
|
|
8
|
-
import { type UseField, type FieldComponent, Field, useField } from './useField'
|
|
1
|
+
import { FormApi } from '@tanstack/form-core'
|
|
2
|
+
import { useStore } from '@tanstack/vue-store'
|
|
3
|
+
import { defineComponent, onMounted } from 'vue'
|
|
4
|
+
import { Field, useField } from './useField'
|
|
9
5
|
import { provideFormContext } from './formContext'
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
type Ref,
|
|
15
|
-
defineComponent,
|
|
16
|
-
onMounted,
|
|
17
|
-
} from 'vue'
|
|
6
|
+
import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
|
|
7
|
+
import type { NoInfer } from '@tanstack/vue-store'
|
|
8
|
+
import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'
|
|
9
|
+
import type { FieldComponent, UseField } from './useField'
|
|
18
10
|
|
|
19
11
|
declare module '@tanstack/form-core' {
|
|
20
12
|
// eslint-disable-next-line no-shadow
|