@tanstack/vue-form 0.2.2 → 0.3.1
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/package.json +2 -2
- package/src/tests/useField.test.tsx +9 -9
- package/src/tests/useForm.test.tsx +9 -3
- package/src/useField.tsx +24 -21
- package/src/useForm.tsx +15 -4
- package/build/legacy/createFormFactory.cjs +0 -42
- package/build/legacy/createFormFactory.cjs.map +0 -1
- package/build/legacy/createFormFactory.d.cts +0 -12
- package/build/legacy/createFormFactory.d.ts +0 -12
- package/build/legacy/createFormFactory.js +0 -17
- package/build/legacy/createFormFactory.js.map +0 -1
- package/build/legacy/formContext.cjs +0 -46
- package/build/legacy/formContext.cjs.map +0 -1
- package/build/legacy/formContext.d.cts +0 -14
- package/build/legacy/formContext.d.ts +0 -14
- package/build/legacy/formContext.js +0 -19
- package/build/legacy/formContext.js.map +0 -1
- package/build/legacy/index.cjs +0 -33
- package/build/legacy/index.cjs.map +0 -1
- package/build/legacy/index.d.cts +0 -7
- package/build/legacy/index.d.ts +0 -7
- package/build/legacy/index.js +0 -7
- package/build/legacy/index.js.map +0 -1
- package/build/legacy/types.cjs +0 -19
- package/build/legacy/types.cjs.map +0 -1
- package/build/legacy/types.d.cts +0 -4
- package/build/legacy/types.d.ts +0 -4
- package/build/legacy/types.js +0 -1
- package/build/legacy/types.js.map +0 -1
- package/build/legacy/useField.cjs +0 -71
- package/build/legacy/useField.cjs.map +0 -1
- package/build/legacy/useField.d.cts +0 -35
- package/build/legacy/useField.d.ts +0 -35
- package/build/legacy/useField.js +0 -52
- package/build/legacy/useField.js.map +0 -1
- package/build/legacy/useForm.cjs +0 -70
- package/build/legacy/useForm.cjs.map +0 -1
- package/build/legacy/useForm.d.cts +0 -20
- package/build/legacy/useForm.d.ts +0 -20
- package/build/legacy/useForm.js +0 -45
- package/build/legacy/useForm.js.map +0 -1
- package/build/lib/createFormFactory.d.ts +0 -9
- package/build/lib/createFormFactory.d.ts.map +0 -1
- package/build/lib/createFormFactory.js +0 -12
- package/build/lib/formContext.d.ts +0 -12
- package/build/lib/formContext.d.ts.map +0 -1
- package/build/lib/formContext.js +0 -12
- package/build/lib/index.d.ts +0 -6
- package/build/lib/index.d.ts.map +0 -1
- package/build/lib/index.js +0 -5
- package/build/lib/tests/useField.test.d.ts +0 -3
- package/build/lib/tests/useField.test.d.ts.map +0 -1
- package/build/lib/tests/useField.test.jsx +0 -109
- package/build/lib/tests/useForm.test.d.ts +0 -3
- package/build/lib/tests/useForm.test.d.ts.map +0 -1
- package/build/lib/tests/useForm.test.jsx +0 -71
- package/build/lib/tests/utils.d.ts +0 -2
- package/build/lib/tests/utils.d.ts.map +0 -1
- package/build/lib/tests/utils.js +0 -5
- package/build/lib/types.d.ts +0 -3
- package/build/lib/types.d.ts.map +0 -1
- package/build/lib/types.js +0 -1
- package/build/lib/useField.d.ts +0 -33
- package/build/lib/useField.d.ts.map +0 -1
- package/build/lib/useField.jsx +0 -39
- package/build/lib/useForm.d.ts +0 -17
- package/build/lib/useForm.d.ts.map +0 -1
- package/build/lib/useForm.jsx +0 -35
- package/build/modern/createFormFactory.cjs +0 -42
- package/build/modern/createFormFactory.cjs.map +0 -1
- package/build/modern/createFormFactory.d.cts +0 -12
- package/build/modern/createFormFactory.d.ts +0 -12
- package/build/modern/createFormFactory.js +0 -17
- package/build/modern/createFormFactory.js.map +0 -1
- package/build/modern/formContext.cjs +0 -46
- package/build/modern/formContext.cjs.map +0 -1
- package/build/modern/formContext.d.cts +0 -14
- package/build/modern/formContext.d.ts +0 -14
- package/build/modern/formContext.js +0 -19
- package/build/modern/formContext.js.map +0 -1
- package/build/modern/index.cjs +0 -33
- package/build/modern/index.cjs.map +0 -1
- package/build/modern/index.d.cts +0 -7
- package/build/modern/index.d.ts +0 -7
- package/build/modern/index.js +0 -7
- package/build/modern/index.js.map +0 -1
- package/build/modern/types.cjs +0 -19
- package/build/modern/types.cjs.map +0 -1
- package/build/modern/types.d.cts +0 -4
- package/build/modern/types.d.ts +0 -4
- package/build/modern/types.js +0 -1
- package/build/modern/types.js.map +0 -1
- package/build/modern/useField.cjs +0 -71
- package/build/modern/useField.cjs.map +0 -1
- package/build/modern/useField.d.cts +0 -35
- package/build/modern/useField.d.ts +0 -35
- package/build/modern/useField.js +0 -52
- package/build/modern/useField.js.map +0 -1
- package/build/modern/useForm.cjs +0 -70
- package/build/modern/useForm.cjs.map +0 -1
- package/build/modern/useForm.d.cts +0 -20
- package/build/modern/useForm.d.ts +0 -20
- package/build/modern/useForm.js +0 -45
- package/build/modern/useForm.js.map +0 -1
package/build/lib/useField.d.ts
DELETED
@@ -1,33 +0,0 @@
|
|
1
|
-
import { type DeepKeys, type DeepValue, FieldApi, type FieldOptions, type Narrow } from '@tanstack/form-core';
|
2
|
-
import { type SetupContext, type Ref } from 'vue-demi';
|
3
|
-
declare module '@tanstack/form-core' {
|
4
|
-
interface FieldApi<TData, TFormData> {
|
5
|
-
Field: FieldComponent<TData, TFormData>;
|
6
|
-
}
|
7
|
-
}
|
8
|
-
export interface UseFieldOptions<TData, TFormData> extends FieldOptions<TData, TFormData> {
|
9
|
-
mode?: 'value' | 'array';
|
10
|
-
}
|
11
|
-
export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
12
|
-
name: Narrow<TField>;
|
13
|
-
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
14
|
-
export declare function useField<TData, TFormData>(opts: UseFieldOptions<TData, TFormData>): {
|
15
|
-
api: FieldApi<TData, TFormData>;
|
16
|
-
state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>;
|
17
|
-
};
|
18
|
-
export type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
19
|
-
export type FieldComponent<TParentData, TFormData> = <TField>(fieldOptions: {
|
20
|
-
children?: (fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>) => any;
|
21
|
-
} & Omit<UseFieldOptions<FieldValue<TParentData, TField>, TFormData>, 'name' | 'index'> & (TParentData extends any[] ? {
|
22
|
-
name?: TField extends undefined ? TField : DeepKeys<TParentData>;
|
23
|
-
index: number;
|
24
|
-
} : {
|
25
|
-
name: TField extends undefined ? TField : DeepKeys<TParentData>;
|
26
|
-
index?: never;
|
27
|
-
}), context: SetupContext) => any;
|
28
|
-
export declare const Field: <TData, TFormData>(props: UseFieldOptions<TData, TFormData> & ({
|
29
|
-
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
30
|
-
} | {
|
31
|
-
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
32
|
-
})) => any;
|
33
|
-
//# sourceMappingURL=useField.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useField.d.ts","sourceRoot":"","sources":["../../src/useField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,QAAQ,EACR,KAAK,YAAY,EACjB,KAAK,MAAM,EACZ,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,GAAG,EAIT,MAAM,UAAU,CAAA;AAGjB,OAAO,QAAQ,qBAAqB,CAAC;IAEnC,UAAU,QAAQ,CAAC,KAAK,EAAE,SAAS;QACjC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;KACxC;CACF;AAED,MAAM,WAAW,eAAe,CAAC,KAAK,EAAE,SAAS,CAC/C,SAAQ,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC;IACtC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB;AAED,MAAM,MAAM,QAAQ,CAAC,SAAS,IAAI,CAAC,MAAM,SAAS,QAAQ,CAAC,SAAS,CAAC,EACnE,IAAI,CAAC,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;CAAE,GAAG,eAAe,CAC/C,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,EAC5B,SAAS,CACV,KACE,QAAQ,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,CAAA;AAEtD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,EACvC,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,GACtC;IACD,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IAC/B,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;CAC1D,CAwCA;AAmBD,MAAM,MAAM,UAAU,CAAC,SAAS,EAAE,MAAM,IAAI,SAAS,SAAS,GAAG,EAAE,GAC/D,OAAO,SAAS,MAAM,GACpB,SAAS,CAAC,MAAM,CAAC,GACjB,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GACtC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAShC,MAAM,MAAM,cAAc,CAAC,WAAW,EAAE,SAAS,IAAI,CAAC,MAAM,EAC1D,YAAY,EAAE;IACZ,QAAQ,CAAC,EAAE,CACT,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,KAC3D,GAAG,CAAA;CACT,GAAG,IAAI,CACN,eAAe,CAAC,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,EAC3D,MAAM,GAAG,OAAO,CACjB,GACC,CAAC,WAAW,SAAS,GAAG,EAAE,GACtB;IACE,IAAI,CAAC,EAAE,MAAM,SAAS,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAChE,KAAK,EAAE,MAAM,CAAA;CACd,GACD;IACE,IAAI,EAAE,MAAM,SAAS,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAC,EACR,OAAO,EAAE,YAAY,KAClB,GAAG,CAAA;AAER,eAAO,MAAM,KAAK;;;;UAejB,CAAA"}
|
package/build/lib/useField.jsx
DELETED
@@ -1,39 +0,0 @@
|
|
1
|
-
import { FieldApi, } from '@tanstack/form-core';
|
2
|
-
import { useStore } from '@tanstack/vue-store';
|
3
|
-
import { defineComponent, onMounted, onUnmounted, watch, } from 'vue-demi';
|
4
|
-
import { provideFormContext, useFormContext } from './formContext';
|
5
|
-
export function useField(opts) {
|
6
|
-
// Get the form API either manually or from context
|
7
|
-
const { formApi, parentFieldName } = useFormContext();
|
8
|
-
const fieldApi = (() => {
|
9
|
-
const name = (typeof opts.index === 'number'
|
10
|
-
? [parentFieldName, opts.index, opts.name]
|
11
|
-
: [parentFieldName, opts.name])
|
12
|
-
.filter((d) => d !== undefined)
|
13
|
-
.join('.');
|
14
|
-
const api = new FieldApi({ ...opts, form: formApi, name: name });
|
15
|
-
api.Field = Field;
|
16
|
-
return api;
|
17
|
-
})();
|
18
|
-
const fieldState = useStore(fieldApi.store, (state) => state);
|
19
|
-
let cleanup;
|
20
|
-
onMounted(() => {
|
21
|
-
cleanup = fieldApi.mount();
|
22
|
-
});
|
23
|
-
onUnmounted(() => {
|
24
|
-
cleanup();
|
25
|
-
});
|
26
|
-
watch(() => opts, () => {
|
27
|
-
// Keep options up to date as they are rendered
|
28
|
-
fieldApi.update({ ...opts, form: formApi });
|
29
|
-
});
|
30
|
-
return { api: fieldApi, state: fieldState };
|
31
|
-
}
|
32
|
-
export const Field = defineComponent((fieldOptions, context) => {
|
33
|
-
const fieldApi = useField({ ...fieldOptions, ...context.attrs });
|
34
|
-
provideFormContext({
|
35
|
-
formApi: fieldApi.api.form,
|
36
|
-
parentFieldName: fieldApi.api.name,
|
37
|
-
});
|
38
|
-
return () => context.slots.default(fieldApi.api, fieldApi.state.value);
|
39
|
-
}, { name: 'Field', inheritAttrs: false });
|
package/build/lib/useForm.d.ts
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core';
|
2
|
-
import { type UseField, type FieldComponent } from './useField';
|
3
|
-
import type { NoInfer } from './types';
|
4
|
-
declare module '@tanstack/form-core' {
|
5
|
-
interface FormApi<TFormData> {
|
6
|
-
Provider: (props: Record<string, any> & {}) => any;
|
7
|
-
provideFormContext: () => void;
|
8
|
-
Field: FieldComponent<TFormData, TFormData>;
|
9
|
-
useField: UseField<TFormData>;
|
10
|
-
useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
|
11
|
-
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
|
12
|
-
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
13
|
-
}) => any;
|
14
|
-
}
|
15
|
-
}
|
16
|
-
export declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
|
17
|
-
//# sourceMappingURL=useForm.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../src/useForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAE/E,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAmB,MAAM,YAAY,CAAA;AAGhF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEtC,OAAO,QAAQ,qBAAqB,CAAC;IAEnC,UAAU,OAAO,CAAC,SAAS;QACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,GAAG,CAAA;QAClD,kBAAkB,EAAE,MAAM,IAAI,CAAA;QAC9B,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QAC3C,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;QAC7B,QAAQ,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,KAAK,SAAS,KAC3D,SAAS,CAAA;QACd,SAAS,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE;YAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,KAAK,SAAS,CAAA;SAC/D,KAAK,GAAG,CAAA;KACV;CACF;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAuCxE"}
|
package/build/lib/useForm.jsx
DELETED
@@ -1,35 +0,0 @@
|
|
1
|
-
import { FormApi } from '@tanstack/form-core';
|
2
|
-
import { useStore } from '@tanstack/vue-store';
|
3
|
-
import { Field, useField } from './useField';
|
4
|
-
import { provideFormContext } from './formContext';
|
5
|
-
import { defineComponent } from 'vue-demi';
|
6
|
-
export function useForm(opts) {
|
7
|
-
const formApi = (() => {
|
8
|
-
const api = new FormApi(opts);
|
9
|
-
api.Provider = defineComponent((_, context) => {
|
10
|
-
provideFormContext({ formApi });
|
11
|
-
return () => context.slots.default();
|
12
|
-
}, { name: 'Provider' });
|
13
|
-
api.provideFormContext = () => {
|
14
|
-
provideFormContext({ formApi });
|
15
|
-
};
|
16
|
-
api.Field = Field;
|
17
|
-
api.useField = useField;
|
18
|
-
api.useStore = (selector) => {
|
19
|
-
return useStore(api.store, selector);
|
20
|
-
};
|
21
|
-
api.Subscribe = defineComponent((props, context) => {
|
22
|
-
const allProps = { ...props, ...context.attrs };
|
23
|
-
const selector = allProps.selector ?? ((state) => state);
|
24
|
-
const data = useStore(api.store, selector);
|
25
|
-
return () => context.slots.default(data.value);
|
26
|
-
}, {
|
27
|
-
name: 'Subscribe',
|
28
|
-
inheritAttrs: false,
|
29
|
-
});
|
30
|
-
return api;
|
31
|
-
})();
|
32
|
-
// formApi.useStore((state) => state.isSubmitting)
|
33
|
-
formApi.update(opts);
|
34
|
-
return formApi;
|
35
|
-
}
|
@@ -1,42 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __defProp = Object.defineProperty;
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
-
var __export = (target, all) => {
|
7
|
-
for (var name in all)
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
-
};
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
-
for (let key of __getOwnPropNames(from))
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
-
}
|
16
|
-
return to;
|
17
|
-
};
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
19
|
-
|
20
|
-
// src/createFormFactory.ts
|
21
|
-
var createFormFactory_exports = {};
|
22
|
-
__export(createFormFactory_exports, {
|
23
|
-
createFormFactory: () => createFormFactory
|
24
|
-
});
|
25
|
-
module.exports = __toCommonJS(createFormFactory_exports);
|
26
|
-
var import_useField = require("./useField.cjs");
|
27
|
-
var import_useForm = require("./useForm.cjs");
|
28
|
-
function createFormFactory(defaultOpts) {
|
29
|
-
return {
|
30
|
-
useForm: (opts) => {
|
31
|
-
const formOptions = Object.assign({}, defaultOpts, opts);
|
32
|
-
return (0, import_useForm.useForm)(formOptions);
|
33
|
-
},
|
34
|
-
useField: import_useField.useField,
|
35
|
-
Field: import_useField.Field
|
36
|
-
};
|
37
|
-
}
|
38
|
-
// Annotate the CommonJS export names for ESM import in node:
|
39
|
-
0 && (module.exports = {
|
40
|
-
createFormFactory
|
41
|
-
});
|
42
|
-
//# sourceMappingURL=createFormFactory.cjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n useField: UseField<TFormData>\n Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n return {\n useForm: (opts) => {\n const formOptions = Object.assign({}, defaultOpts, opts)\n return useForm<TFormData>(formOptions)\n },\n useField: useField as any,\n Field: Field as any,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAoE;AACpE,qBAAwB;AAQjB,SAAS,kBACd,aACwB;AACxB,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,iBAAO,wBAAmB,WAAW;AAAA,IACvC;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;","names":[]}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { FormOptions, FormApi } from '@tanstack/form-core';
|
2
|
-
import { UseField, FieldComponent } from './useField.cjs';
|
3
|
-
import 'vue-demi';
|
4
|
-
|
5
|
-
type FormFactory<TFormData> = {
|
6
|
-
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
|
7
|
-
useField: UseField<TFormData>;
|
8
|
-
Field: FieldComponent<TFormData, TFormData>;
|
9
|
-
};
|
10
|
-
declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
|
11
|
-
|
12
|
-
export { FormFactory, createFormFactory };
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { FormOptions, FormApi } from '@tanstack/form-core';
|
2
|
-
import { UseField, FieldComponent } from './useField.js';
|
3
|
-
import 'vue-demi';
|
4
|
-
|
5
|
-
type FormFactory<TFormData> = {
|
6
|
-
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
|
7
|
-
useField: UseField<TFormData>;
|
8
|
-
Field: FieldComponent<TFormData, TFormData>;
|
9
|
-
};
|
10
|
-
declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
|
11
|
-
|
12
|
-
export { FormFactory, createFormFactory };
|
@@ -1,17 +0,0 @@
|
|
1
|
-
// src/createFormFactory.ts
|
2
|
-
import { Field, useField } from "./useField.js";
|
3
|
-
import { useForm } from "./useForm.js";
|
4
|
-
function createFormFactory(defaultOpts) {
|
5
|
-
return {
|
6
|
-
useForm: (opts) => {
|
7
|
-
const formOptions = Object.assign({}, defaultOpts, opts);
|
8
|
-
return useForm(formOptions);
|
9
|
-
},
|
10
|
-
useField,
|
11
|
-
Field
|
12
|
-
};
|
13
|
-
}
|
14
|
-
export {
|
15
|
-
createFormFactory
|
16
|
-
};
|
17
|
-
//# sourceMappingURL=createFormFactory.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n useField: UseField<TFormData>\n Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n return {\n useForm: (opts) => {\n const formOptions = Object.assign({}, defaultOpts, opts)\n return useForm<TFormData>(formOptions)\n },\n useField: useField as any,\n Field: Field as any,\n }\n}\n"],"mappings":";AAEA,SAA6C,OAAO,gBAAgB;AACpE,SAAS,eAAe;AAQjB,SAAS,kBACd,aACwB;AACxB,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,aAAO,QAAmB,WAAW;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
@@ -1,46 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __defProp = Object.defineProperty;
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
-
var __export = (target, all) => {
|
7
|
-
for (var name in all)
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
-
};
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
-
for (let key of __getOwnPropNames(from))
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
-
}
|
16
|
-
return to;
|
17
|
-
};
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
19
|
-
|
20
|
-
// src/formContext.ts
|
21
|
-
var formContext_exports = {};
|
22
|
-
__export(formContext_exports, {
|
23
|
-
formContext: () => formContext,
|
24
|
-
provideFormContext: () => provideFormContext,
|
25
|
-
useFormContext: () => useFormContext
|
26
|
-
});
|
27
|
-
module.exports = __toCommonJS(formContext_exports);
|
28
|
-
var import_vue_demi = require("vue-demi");
|
29
|
-
var formContext = Symbol("FormContext");
|
30
|
-
function provideFormContext(val) {
|
31
|
-
(0, import_vue_demi.provide)(formContext, val);
|
32
|
-
}
|
33
|
-
function useFormContext() {
|
34
|
-
const formApi = (0, import_vue_demi.inject)(formContext);
|
35
|
-
if (!formApi) {
|
36
|
-
throw new Error(`You are trying to use the form API outside of a form!`);
|
37
|
-
}
|
38
|
-
return formApi;
|
39
|
-
}
|
40
|
-
// Annotate the CommonJS export names for ESM import in node:
|
41
|
-
0 && (module.exports = {
|
42
|
-
formContext,
|
43
|
-
provideFormContext,
|
44
|
-
useFormContext
|
45
|
-
});
|
46
|
-
//# sourceMappingURL=formContext.cjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport { inject, provide } from 'vue-demi'\n\nexport type FormContext = {\n formApi: FormApi<any>\n parentFieldName?: string\n} | null\n\nexport const formContext = Symbol('FormContext')\n\nexport function provideFormContext(val: FormContext) {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAgC;AAOzB,IAAM,cAAc,OAAO,aAAa;AAExC,SAAS,mBAAmB,KAAkB;AACnD,+BAAQ,aAAa,GAAG;AAC1B;AAEO,SAAS,iBAAiB;AAC/B,QAAM,cAAU,wBAAO,WAAW;AAElC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":[]}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import { FormApi } from '@tanstack/form-core';
|
2
|
-
|
3
|
-
type FormContext = {
|
4
|
-
formApi: FormApi<any>;
|
5
|
-
parentFieldName?: string;
|
6
|
-
} | null;
|
7
|
-
declare const formContext: unique symbol;
|
8
|
-
declare function provideFormContext(val: FormContext): void;
|
9
|
-
declare function useFormContext(): {
|
10
|
-
formApi: FormApi<any>;
|
11
|
-
parentFieldName?: string | undefined;
|
12
|
-
};
|
13
|
-
|
14
|
-
export { FormContext, formContext, provideFormContext, useFormContext };
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import { FormApi } from '@tanstack/form-core';
|
2
|
-
|
3
|
-
type FormContext = {
|
4
|
-
formApi: FormApi<any>;
|
5
|
-
parentFieldName?: string;
|
6
|
-
} | null;
|
7
|
-
declare const formContext: unique symbol;
|
8
|
-
declare function provideFormContext(val: FormContext): void;
|
9
|
-
declare function useFormContext(): {
|
10
|
-
formApi: FormApi<any>;
|
11
|
-
parentFieldName?: string | undefined;
|
12
|
-
};
|
13
|
-
|
14
|
-
export { FormContext, formContext, provideFormContext, useFormContext };
|
@@ -1,19 +0,0 @@
|
|
1
|
-
// src/formContext.ts
|
2
|
-
import { inject, provide } from "vue-demi";
|
3
|
-
var formContext = Symbol("FormContext");
|
4
|
-
function provideFormContext(val) {
|
5
|
-
provide(formContext, val);
|
6
|
-
}
|
7
|
-
function useFormContext() {
|
8
|
-
const formApi = inject(formContext);
|
9
|
-
if (!formApi) {
|
10
|
-
throw new Error(`You are trying to use the form API outside of a form!`);
|
11
|
-
}
|
12
|
-
return formApi;
|
13
|
-
}
|
14
|
-
export {
|
15
|
-
formContext,
|
16
|
-
provideFormContext,
|
17
|
-
useFormContext
|
18
|
-
};
|
19
|
-
//# sourceMappingURL=formContext.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport { inject, provide } from 'vue-demi'\n\nexport type FormContext = {\n formApi: FormApi<any>\n parentFieldName?: string\n} | null\n\nexport const formContext = Symbol('FormContext')\n\nexport function provideFormContext(val: FormContext) {\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"],"mappings":";AACA,SAAS,QAAQ,eAAe;AAOzB,IAAM,cAAc,OAAO,aAAa;AAExC,SAAS,mBAAmB,KAAkB;AACnD,UAAQ,aAAa,GAAG;AAC1B;AAEO,SAAS,iBAAiB;AAC/B,QAAM,UAAU,OAAO,WAAW;AAElC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":[]}
|
package/build/modern/index.cjs
DELETED
@@ -1,33 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __defProp = Object.defineProperty;
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
8
|
-
for (let key of __getOwnPropNames(from))
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
11
|
-
}
|
12
|
-
return to;
|
13
|
-
};
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
16
|
-
|
17
|
-
// src/index.ts
|
18
|
-
var src_exports = {};
|
19
|
-
module.exports = __toCommonJS(src_exports);
|
20
|
-
__reExport(src_exports, require("@tanstack/form-core"), module.exports);
|
21
|
-
__reExport(src_exports, require("./createFormFactory.cjs"), module.exports);
|
22
|
-
__reExport(src_exports, require("./formContext.cjs"), module.exports);
|
23
|
-
__reExport(src_exports, require("./useField.cjs"), module.exports);
|
24
|
-
__reExport(src_exports, require("./useForm.cjs"), module.exports);
|
25
|
-
// Annotate the CommonJS export names for ESM import in node:
|
26
|
-
0 && (module.exports = {
|
27
|
-
...require("@tanstack/form-core"),
|
28
|
-
...require("./createFormFactory.cjs"),
|
29
|
-
...require("./formContext.cjs"),
|
30
|
-
...require("./useField.cjs"),
|
31
|
-
...require("./useForm.cjs")
|
32
|
-
});
|
33
|
-
//# sourceMappingURL=index.cjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from '@tanstack/form-core'\nexport * from './createFormFactory'\nexport * from './formContext'\nexport * from './useField'\nexport * from './useForm'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,gCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,8BAFd;AAGA,wBAAc,2BAHd;AAIA,wBAAc,0BAJd;","names":[]}
|
package/build/modern/index.d.cts
DELETED
@@ -1,7 +0,0 @@
|
|
1
|
-
export * from '@tanstack/form-core';
|
2
|
-
export { FormFactory, createFormFactory } from './createFormFactory.cjs';
|
3
|
-
export { FormContext, formContext, provideFormContext, useFormContext } from './formContext.cjs';
|
4
|
-
export { Field, FieldComponent, FieldValue, UseField, UseFieldOptions, useField } from './useField.cjs';
|
5
|
-
export { useForm } from './useForm.cjs';
|
6
|
-
import 'vue-demi';
|
7
|
-
import './types.cjs';
|
package/build/modern/index.d.ts
DELETED
@@ -1,7 +0,0 @@
|
|
1
|
-
export * from '@tanstack/form-core';
|
2
|
-
export { FormFactory, createFormFactory } from './createFormFactory.js';
|
3
|
-
export { FormContext, formContext, provideFormContext, useFormContext } from './formContext.js';
|
4
|
-
export { Field, FieldComponent, FieldValue, UseField, UseFieldOptions, useField } from './useField.js';
|
5
|
-
export { useForm } from './useForm.js';
|
6
|
-
import 'vue-demi';
|
7
|
-
import './types.js';
|
package/build/modern/index.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from '@tanstack/form-core'\nexport * from './createFormFactory'\nexport * from './formContext'\nexport * from './useField'\nexport * from './useForm'\n"],"mappings":";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
package/build/modern/types.cjs
DELETED
@@ -1,19 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __defProp = Object.defineProperty;
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
8
|
-
for (let key of __getOwnPropNames(from))
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
11
|
-
}
|
12
|
-
return to;
|
13
|
-
};
|
14
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
15
|
-
|
16
|
-
// src/types.ts
|
17
|
-
var types_exports = {};
|
18
|
-
module.exports = __toCommonJS(types_exports);
|
19
|
-
//# sourceMappingURL=types.cjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/types.ts"],"sourcesContent":["export type NoInfer<T> = [T][T extends any ? 0 : never]\n\nexport type ReleaseVersion = 2\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
|
package/build/modern/types.d.cts
DELETED
package/build/modern/types.d.ts
DELETED
package/build/modern/types.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
//# sourceMappingURL=types.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1,71 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __defProp = Object.defineProperty;
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
-
var __export = (target, all) => {
|
7
|
-
for (var name in all)
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
-
};
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
-
for (let key of __getOwnPropNames(from))
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
-
}
|
16
|
-
return to;
|
17
|
-
};
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
19
|
-
|
20
|
-
// src/useField.tsx
|
21
|
-
var useField_exports = {};
|
22
|
-
__export(useField_exports, {
|
23
|
-
Field: () => Field,
|
24
|
-
useField: () => useField
|
25
|
-
});
|
26
|
-
module.exports = __toCommonJS(useField_exports);
|
27
|
-
var import_form_core = require("@tanstack/form-core");
|
28
|
-
var import_vue_store = require("@tanstack/vue-store");
|
29
|
-
var import_vue_demi = require("vue-demi");
|
30
|
-
var import_formContext = require("./formContext.cjs");
|
31
|
-
function useField(opts) {
|
32
|
-
const { formApi, parentFieldName } = (0, import_formContext.useFormContext)();
|
33
|
-
const fieldApi = (() => {
|
34
|
-
const name = (typeof opts.index === "number" ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter((d) => d !== void 0).join(".");
|
35
|
-
const api = new import_form_core.FieldApi({ ...opts, form: formApi, name });
|
36
|
-
api.Field = Field;
|
37
|
-
return api;
|
38
|
-
})();
|
39
|
-
const fieldState = (0, import_vue_store.useStore)(fieldApi.store, (state) => state);
|
40
|
-
let cleanup;
|
41
|
-
(0, import_vue_demi.onMounted)(() => {
|
42
|
-
cleanup = fieldApi.mount();
|
43
|
-
});
|
44
|
-
(0, import_vue_demi.onUnmounted)(() => {
|
45
|
-
cleanup();
|
46
|
-
});
|
47
|
-
(0, import_vue_demi.watch)(
|
48
|
-
() => opts,
|
49
|
-
() => {
|
50
|
-
fieldApi.update({ ...opts, form: formApi });
|
51
|
-
}
|
52
|
-
);
|
53
|
-
return { api: fieldApi, state: fieldState };
|
54
|
-
}
|
55
|
-
var Field = (0, import_vue_demi.defineComponent)(
|
56
|
-
(fieldOptions, context) => {
|
57
|
-
const fieldApi = useField({ ...fieldOptions, ...context.attrs });
|
58
|
-
(0, import_formContext.provideFormContext)({
|
59
|
-
formApi: fieldApi.api.form,
|
60
|
-
parentFieldName: fieldApi.api.name
|
61
|
-
});
|
62
|
-
return () => context.slots.default(fieldApi.api, fieldApi.state.value);
|
63
|
-
},
|
64
|
-
{ name: "Field", inheritAttrs: false }
|
65
|
-
);
|
66
|
-
// Annotate the CommonJS export names for ESM import in node:
|
67
|
-
0 && (module.exports = {
|
68
|
-
Field,
|
69
|
-
useField
|
70
|
-
});
|
71
|
-
//# sourceMappingURL=useField.cjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import {\n type DeepKeys,\n type DeepValue,\n FieldApi,\n type FieldOptions,\n type Narrow,\n} from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport {\n type SetupContext,\n defineComponent,\n type Ref,\n onMounted,\n onUnmounted,\n watch,\n} from 'vue-demi'\nimport { provideFormContext, useFormContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<TData, TFormData> {\n Field: FieldComponent<TData, TFormData>\n }\n}\n\nexport interface UseFieldOptions<TData, TFormData>\n extends FieldOptions<TData, TFormData> {\n mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n opts?: { name: Narrow<TField> } & UseFieldOptions<\n DeepValue<TFormData, TField>,\n TFormData\n >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n opts: UseFieldOptions<TData, TFormData>,\n): {\n api: FieldApi<TData, TFormData>\n state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>\n} {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const fieldApi = (() => {\n const name = (\n typeof opts.index === 'number'\n ? [parentFieldName, opts.index, opts.name]\n : [parentFieldName, opts.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const api = new FieldApi({ ...opts, form: formApi, name: name 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\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n// ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n// ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n// : TField extends `[${infer TIndex extends number | 'i'}]`\n// ? TFormData[TIndex extends 'i' ? number : TIndex]\n// : never\n// : TField extends `${infer TPrefix}[${infer TIndex extends\n// | number\n// | 'i'}].${infer TRest}`\n// ? DeepValue<\n// DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n// TRest\n// >\n// : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n// ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n// : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// // ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// // ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// // ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>(\n fieldOptions: {\n children?: (\n fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n ) => any\n } & Omit<\n UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n 'name' | 'index'\n > &\n (TParentData extends any[]\n ? {\n name?: TField extends undefined ? TField : DeepKeys<TParentData>\n index: number\n }\n : {\n name: TField extends undefined ? TField : DeepKeys<TParentData>\n index?: never\n }),\n context: SetupContext,\n) => any\n\nexport const Field = defineComponent(\n <TData, TFormData>(\n fieldOptions: UseFieldOptions<TData, TFormData>,\n context: SetupContext,\n ) => {\n const fieldApi = useField({ ...fieldOptions, ...context.attrs })\n\n provideFormContext({\n formApi: fieldApi.api.form,\n parentFieldName: fieldApi.api.name,\n } as never)\n\n return () => context.slots.default!(fieldApi.api, fieldApi.state.value)\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAMO;AACP,uBAAyB;AACzB,sBAOO;AACP,yBAAmD;AAqB5C,SAAS,SACd,MAIA;AAEA,QAAM,EAAE,SAAS,gBAAgB,QAAI,mCAAe;AAEpD,QAAM,YAAY,MAAM;AACtB,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,0BAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAoB,CAAC;AAExE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,GAAG;AAEH,QAAM,iBAAa,2BAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAE5D,MAAI;AACJ,iCAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAC3B,CAAC;AAED,mCAAY,MAAM;AAChB,YAAQ;AAAA,EACV,CAAC;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,IACrD;AAAA,EACF;AAEA,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAqDO,IAAM,YAAQ;AAAA,EACnB,CACE,cACA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,MAAM,CAAC;AAE/D,+CAAmB;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAChC,CAAU;AAEV,WAAO,MAAM,QAAQ,MAAM,QAAS,SAAS,KAAK,SAAS,MAAM,KAAK;AAAA,EACxE;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;","names":[]}
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import { FieldApi, DeepKeys, FieldOptions, Narrow, DeepValue } from '@tanstack/form-core';
|
2
|
-
import { SetupContext, Ref } from 'vue-demi';
|
3
|
-
|
4
|
-
declare module '@tanstack/form-core' {
|
5
|
-
interface FieldApi<TData, TFormData> {
|
6
|
-
Field: FieldComponent<TData, TFormData>;
|
7
|
-
}
|
8
|
-
}
|
9
|
-
interface UseFieldOptions<TData, TFormData> extends FieldOptions<TData, TFormData> {
|
10
|
-
mode?: 'value' | 'array';
|
11
|
-
}
|
12
|
-
type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
13
|
-
name: Narrow<TField>;
|
14
|
-
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
15
|
-
declare function useField<TData, TFormData>(opts: UseFieldOptions<TData, TFormData>): {
|
16
|
-
api: FieldApi<TData, TFormData>;
|
17
|
-
state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>;
|
18
|
-
};
|
19
|
-
type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
20
|
-
type FieldComponent<TParentData, TFormData> = <TField>(fieldOptions: {
|
21
|
-
children?: (fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>) => any;
|
22
|
-
} & Omit<UseFieldOptions<FieldValue<TParentData, TField>, TFormData>, 'name' | 'index'> & (TParentData extends any[] ? {
|
23
|
-
name?: TField extends undefined ? TField : DeepKeys<TParentData>;
|
24
|
-
index: number;
|
25
|
-
} : {
|
26
|
-
name: TField extends undefined ? TField : DeepKeys<TParentData>;
|
27
|
-
index?: never;
|
28
|
-
}), context: SetupContext) => any;
|
29
|
-
declare const Field: <TData, TFormData>(props: UseFieldOptions<TData, TFormData> & ({
|
30
|
-
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
31
|
-
} | {
|
32
|
-
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
33
|
-
})) => any;
|
34
|
-
|
35
|
-
export { Field, FieldComponent, FieldValue, UseField, UseFieldOptions, useField };
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import { FieldApi, DeepKeys, FieldOptions, Narrow, DeepValue } from '@tanstack/form-core';
|
2
|
-
import { SetupContext, Ref } from 'vue-demi';
|
3
|
-
|
4
|
-
declare module '@tanstack/form-core' {
|
5
|
-
interface FieldApi<TData, TFormData> {
|
6
|
-
Field: FieldComponent<TData, TFormData>;
|
7
|
-
}
|
8
|
-
}
|
9
|
-
interface UseFieldOptions<TData, TFormData> extends FieldOptions<TData, TFormData> {
|
10
|
-
mode?: 'value' | 'array';
|
11
|
-
}
|
12
|
-
type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
13
|
-
name: Narrow<TField>;
|
14
|
-
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
15
|
-
declare function useField<TData, TFormData>(opts: UseFieldOptions<TData, TFormData>): {
|
16
|
-
api: FieldApi<TData, TFormData>;
|
17
|
-
state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>;
|
18
|
-
};
|
19
|
-
type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
20
|
-
type FieldComponent<TParentData, TFormData> = <TField>(fieldOptions: {
|
21
|
-
children?: (fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>) => any;
|
22
|
-
} & Omit<UseFieldOptions<FieldValue<TParentData, TField>, TFormData>, 'name' | 'index'> & (TParentData extends any[] ? {
|
23
|
-
name?: TField extends undefined ? TField : DeepKeys<TParentData>;
|
24
|
-
index: number;
|
25
|
-
} : {
|
26
|
-
name: TField extends undefined ? TField : DeepKeys<TParentData>;
|
27
|
-
index?: never;
|
28
|
-
}), context: SetupContext) => any;
|
29
|
-
declare const Field: <TData, TFormData>(props: UseFieldOptions<TData, TFormData> & ({
|
30
|
-
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
31
|
-
} | {
|
32
|
-
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
33
|
-
})) => any;
|
34
|
-
|
35
|
-
export { Field, FieldComponent, FieldValue, UseField, UseFieldOptions, useField };
|