@tanstack/vue-form 0.3.1 → 0.3.3
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/build/legacy/createFormFactory.cjs +42 -0
- package/build/legacy/createFormFactory.cjs.map +1 -0
- package/build/legacy/createFormFactory.d.cts +13 -0
- package/build/legacy/createFormFactory.d.ts +13 -0
- package/build/legacy/createFormFactory.js +17 -0
- package/build/legacy/createFormFactory.js.map +1 -0
- package/build/legacy/formContext.cjs +46 -0
- package/build/legacy/formContext.cjs.map +1 -0
- package/build/legacy/formContext.d.cts +14 -0
- package/build/legacy/formContext.d.ts +14 -0
- package/build/legacy/formContext.js +19 -0
- package/build/legacy/formContext.js.map +1 -0
- package/build/legacy/index.cjs +33 -0
- package/build/legacy/index.cjs.map +1 -0
- package/build/legacy/index.d.cts +8 -0
- package/build/legacy/index.d.ts +8 -0
- package/build/legacy/index.js +7 -0
- package/build/legacy/index.js.map +1 -0
- package/build/legacy/types.cjs +19 -0
- package/build/legacy/types.cjs.map +1 -0
- package/build/legacy/types.d.cts +7 -0
- package/build/legacy/types.d.ts +7 -0
- package/build/legacy/types.js +1 -0
- package/build/legacy/types.js.map +1 -0
- package/build/legacy/useField.cjs +77 -0
- package/build/legacy/useField.cjs.map +1 -0
- package/build/legacy/useField.d.cts +44 -0
- package/build/legacy/useField.d.ts +44 -0
- package/build/legacy/useField.js +53 -0
- package/build/legacy/useField.js.map +1 -0
- package/build/legacy/useForm.cjs +70 -0
- package/build/legacy/useForm.cjs.map +1 -0
- package/build/legacy/useForm.d.cts +23 -0
- package/build/legacy/useForm.d.ts +23 -0
- package/build/legacy/useForm.js +47 -0
- package/build/legacy/useForm.js.map +1 -0
- package/build/lib/createFormFactory.d.ts +8 -0
- package/build/lib/createFormFactory.js +12 -0
- package/build/lib/formContext.d.ts +11 -0
- package/build/lib/formContext.js +12 -0
- package/build/lib/index.d.ts +5 -0
- package/build/lib/index.js +5 -0
- package/build/lib/tests/useField.test.d.ts +2 -0
- package/build/lib/tests/useField.test.jsx +109 -0
- package/build/lib/tests/useForm.test.d.ts +2 -0
- package/build/lib/tests/useForm.test.jsx +71 -0
- package/build/lib/tests/utils.d.ts +1 -0
- package/build/lib/tests/utils.js +5 -0
- package/build/lib/types.d.ts +4 -0
- package/build/lib/types.js +1 -0
- package/build/lib/useField.d.ts +42 -0
- package/build/lib/useField.jsx +41 -0
- package/build/lib/useForm.d.ts +19 -0
- package/build/lib/useForm.jsx +35 -0
- package/build/modern/createFormFactory.cjs +42 -0
- package/build/modern/createFormFactory.cjs.map +1 -0
- package/build/modern/createFormFactory.d.cts +13 -0
- package/build/modern/createFormFactory.d.ts +13 -0
- package/build/modern/createFormFactory.js +17 -0
- package/build/modern/createFormFactory.js.map +1 -0
- package/build/modern/formContext.cjs +46 -0
- package/build/modern/formContext.cjs.map +1 -0
- package/build/modern/formContext.d.cts +14 -0
- package/build/modern/formContext.d.ts +14 -0
- package/build/modern/formContext.js +19 -0
- package/build/modern/formContext.js.map +1 -0
- package/build/modern/index.cjs +33 -0
- package/build/modern/index.cjs.map +1 -0
- package/build/modern/index.d.cts +8 -0
- package/build/modern/index.d.ts +8 -0
- package/build/modern/index.js +7 -0
- package/build/modern/index.js.map +1 -0
- package/build/modern/types.cjs +19 -0
- package/build/modern/types.cjs.map +1 -0
- package/build/modern/types.d.cts +7 -0
- package/build/modern/types.d.ts +7 -0
- package/build/modern/types.js +1 -0
- package/build/modern/types.js.map +1 -0
- package/build/modern/useField.cjs +77 -0
- package/build/modern/useField.cjs.map +1 -0
- package/build/modern/useField.d.cts +44 -0
- package/build/modern/useField.d.ts +44 -0
- package/build/modern/useField.js +53 -0
- package/build/modern/useField.js.map +1 -0
- package/build/modern/useForm.cjs +70 -0
- package/build/modern/useForm.cjs.map +1 -0
- package/build/modern/useForm.d.cts +23 -0
- package/build/modern/useForm.d.ts +23 -0
- package/build/modern/useForm.js +47 -0
- package/build/modern/useForm.js.map +1 -0
- package/package.json +2 -2
- package/src/types.ts +8 -2
- package/src/useField.tsx +74 -67
- package/src/useForm.tsx +1 -2
@@ -0,0 +1,42 @@
|
|
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
|
@@ -0,0 +1 @@
|
|
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":[]}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { FormOptions, FormApi } from '@tanstack/form-core';
|
2
|
+
import { UseField, FieldComponent } from './useField.cjs';
|
3
|
+
import 'vue-demi';
|
4
|
+
import './types.cjs';
|
5
|
+
|
6
|
+
type FormFactory<TFormData> = {
|
7
|
+
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
|
8
|
+
useField: UseField<TFormData>;
|
9
|
+
Field: FieldComponent<TFormData, TFormData>;
|
10
|
+
};
|
11
|
+
declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
|
12
|
+
|
13
|
+
export { FormFactory, createFormFactory };
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { FormOptions, FormApi } from '@tanstack/form-core';
|
2
|
+
import { UseField, FieldComponent } from './useField.js';
|
3
|
+
import 'vue-demi';
|
4
|
+
import './types.js';
|
5
|
+
|
6
|
+
type FormFactory<TFormData> = {
|
7
|
+
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
|
8
|
+
useField: UseField<TFormData>;
|
9
|
+
Field: FieldComponent<TFormData, TFormData>;
|
10
|
+
};
|
11
|
+
declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
|
12
|
+
|
13
|
+
export { FormFactory, createFormFactory };
|
@@ -0,0 +1,17 @@
|
|
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
|
@@ -0,0 +1 @@
|
|
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":[]}
|
@@ -0,0 +1,46 @@
|
|
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
|
@@ -0,0 +1 @@
|
|
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":[]}
|
@@ -0,0 +1,14 @@
|
|
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 };
|
@@ -0,0 +1,14 @@
|
|
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 };
|
@@ -0,0 +1,19 @@
|
|
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
|
@@ -0,0 +1 @@
|
|
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":[]}
|
@@ -0,0 +1,33 @@
|
|
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
|
@@ -0,0 +1 @@
|
|
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":[]}
|
@@ -0,0 +1,8 @@
|
|
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, useField } from './useField.cjs';
|
5
|
+
export { useForm } from './useForm.cjs';
|
6
|
+
import 'vue-demi';
|
7
|
+
import './types.cjs';
|
8
|
+
import '@tanstack/vue-store';
|
@@ -0,0 +1,8 @@
|
|
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, useField } from './useField.js';
|
5
|
+
export { useForm } from './useForm.js';
|
6
|
+
import 'vue-demi';
|
7
|
+
import './types.js';
|
8
|
+
import '@tanstack/vue-store';
|
@@ -0,0 +1 @@
|
|
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":[]}
|
@@ -0,0 +1,19 @@
|
|
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
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/types.ts"],"sourcesContent":["import type { FieldOptions, DeepKeys } from '@tanstack/form-core'\n\nexport type UseFieldOptions<\n TData,\n TFormData,\n TName = unknown extends TFormData ? string : DeepKeys<TFormData>,\n> = FieldOptions<TData, TFormData, TName> & {\n mode?: 'value' | 'array'\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { DeepKeys, FieldOptions } from '@tanstack/form-core';
|
2
|
+
|
3
|
+
type UseFieldOptions<TData, TFormData, TName = unknown extends TFormData ? string : DeepKeys<TFormData>> = FieldOptions<TData, TFormData, TName> & {
|
4
|
+
mode?: 'value' | 'array';
|
5
|
+
};
|
6
|
+
|
7
|
+
export { UseFieldOptions };
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { DeepKeys, FieldOptions } from '@tanstack/form-core';
|
2
|
+
|
3
|
+
type UseFieldOptions<TData, TFormData, TName = unknown extends TFormData ? string : DeepKeys<TFormData>> = FieldOptions<TData, TFormData, TName> & {
|
4
|
+
mode?: 'value' | 'array';
|
5
|
+
};
|
6
|
+
|
7
|
+
export { UseFieldOptions };
|
@@ -0,0 +1 @@
|
|
1
|
+
//# sourceMappingURL=types.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -0,0 +1,77 @@
|
|
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 api = new import_form_core.FieldApi({
|
35
|
+
...opts,
|
36
|
+
form: formApi,
|
37
|
+
name: opts.name
|
38
|
+
});
|
39
|
+
api.Field = Field;
|
40
|
+
return api;
|
41
|
+
})();
|
42
|
+
const fieldState = (0, import_vue_store.useStore)(fieldApi.store, (state) => state);
|
43
|
+
let cleanup;
|
44
|
+
(0, import_vue_demi.onMounted)(() => {
|
45
|
+
cleanup = fieldApi.mount();
|
46
|
+
});
|
47
|
+
(0, import_vue_demi.onUnmounted)(() => {
|
48
|
+
cleanup();
|
49
|
+
});
|
50
|
+
(0, import_vue_demi.watch)(
|
51
|
+
() => opts,
|
52
|
+
() => {
|
53
|
+
fieldApi.update({ ...opts, form: formApi });
|
54
|
+
}
|
55
|
+
);
|
56
|
+
return { api: fieldApi, state: fieldState };
|
57
|
+
}
|
58
|
+
var Field = (0, import_vue_demi.defineComponent)(
|
59
|
+
(fieldOptions, context) => {
|
60
|
+
const fieldApi = useField({ ...fieldOptions, ...context.attrs });
|
61
|
+
(0, import_formContext.provideFormContext)({
|
62
|
+
formApi: fieldApi.api.form,
|
63
|
+
parentFieldName: fieldApi.api.name
|
64
|
+
});
|
65
|
+
return () => context.slots.default({
|
66
|
+
field: fieldApi.api,
|
67
|
+
state: fieldApi.state.value
|
68
|
+
});
|
69
|
+
},
|
70
|
+
{ name: "Field", inheritAttrs: false }
|
71
|
+
);
|
72
|
+
// Annotate the CommonJS export names for ESM import in node:
|
73
|
+
0 && (module.exports = {
|
74
|
+
Field,
|
75
|
+
useField
|
76
|
+
});
|
77
|
+
//# sourceMappingURL=useField.cjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import {\n FieldApi,\n type FieldApiOptions,\n type FormApi,\n} 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-demi'\nimport type { SlotsType, SetupContext, Ref } from 'vue-demi'\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<_TData, TFormData, Opts, TData> {\n Field: FieldComponent<TFormData, TData>\n }\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<\n TData,\n TFormData,\n TName extends unknown extends TFormData\n ? string\n : DeepKeys<TFormData> = unknown extends TFormData\n ? string\n : DeepKeys<TFormData>,\n>(\n opts: UseFieldOptions<TData, TFormData, TName>,\n): {\n api: FieldApi<\n TData,\n TFormData,\n Omit<typeof opts, 'onMount'> & {\n form: FormApi<TFormData>\n }\n >\n state: Readonly<\n Ref<\n FieldApi<\n TData,\n TFormData,\n Omit<typeof opts, 'onMount'> & {\n form: FormApi<TFormData>\n }\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<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\ntype FieldComponentProps<\n TParentData,\n TFormData,\n TField,\n TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,\n> = (TParentData extends any[]\n ? {\n name?: TName\n index: number\n }\n : {\n name: TName\n index?: never\n }) &\n Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>\n\nexport type FieldComponent<TParentData, TFormData> = <\n // Type of the field\n TField,\n // Name of the field\n TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,\n>(\n fieldOptions: FieldComponentProps<TParentData, TFormData, TField, TName>,\n context: SetupContext<\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TField,\n TFormData,\n FieldApiOptions<TField, TFormData, TName>\n >\n state: FieldApi<\n TField,\n TFormData,\n FieldApiOptions<TField, TFormData, TName>\n >['state']\n }\n }>\n >,\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 () =>\n context.slots.default!({\n field: fieldApi.api,\n state: fieldApi.state.value,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAIO;AAEP,uBAAyB;AACzB,sBAA+D;AAE/D,yBAAmD;AAiB5C,SAAS,SASd,MAoBA;AAEA,QAAM,EAAE,SAAS,gBAAgB,QAAI,mCAAe;AAEpD,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAI,0BAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IACb,CAAU;AAEV,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;AAkDO,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,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IACxB,CAAC;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;","names":[]}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import * as _tanstack_form_core from '@tanstack/form-core';
|
2
|
+
import { DeepKeys, FieldApi, FieldApiOptions, Narrow, DeepValue, FormApi } from '@tanstack/form-core';
|
3
|
+
import { SetupContext, SlotsType, Ref } from 'vue-demi';
|
4
|
+
import { UseFieldOptions } from './types.cjs';
|
5
|
+
|
6
|
+
declare module '@tanstack/form-core' {
|
7
|
+
interface FieldApi<_TData, TFormData, Opts, TData> {
|
8
|
+
Field: FieldComponent<TFormData, TData>;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
12
|
+
name: Narrow<TField>;
|
13
|
+
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
14
|
+
declare function useField<TData, TFormData, TName extends unknown extends TFormData ? string : DeepKeys<TFormData> = unknown extends TFormData ? string : DeepKeys<TFormData>>(opts: UseFieldOptions<TData, TFormData, TName>): {
|
15
|
+
api: FieldApi<TData, TFormData, Omit<typeof opts, 'onMount'> & {
|
16
|
+
form: FormApi<TFormData>;
|
17
|
+
}>;
|
18
|
+
state: Readonly<Ref<FieldApi<TData, TFormData, Omit<typeof opts, 'onMount'> & {
|
19
|
+
form: FormApi<TFormData>;
|
20
|
+
}>['state']>>;
|
21
|
+
};
|
22
|
+
type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
23
|
+
type FieldComponentProps<TParentData, TFormData, TField, TName extends unknown extends TFormData ? string : DeepKeys<TFormData>> = (TParentData extends any[] ? {
|
24
|
+
name?: TName;
|
25
|
+
index: number;
|
26
|
+
} : {
|
27
|
+
name: TName;
|
28
|
+
index?: never;
|
29
|
+
}) & Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>;
|
30
|
+
type FieldComponent<TParentData, TFormData> = <TField, TName extends unknown extends TFormData ? string : DeepKeys<TFormData>>(fieldOptions: FieldComponentProps<TParentData, TFormData, TField, TName>, context: SetupContext<{}, SlotsType<{
|
31
|
+
default: {
|
32
|
+
field: FieldApi<TField, TFormData, FieldApiOptions<TField, TFormData, TName>>;
|
33
|
+
state: FieldApi<TField, TFormData, FieldApiOptions<TField, TFormData, TName>>['state'];
|
34
|
+
};
|
35
|
+
}>>) => any;
|
36
|
+
declare const Field: <TData, TFormData>(props: _tanstack_form_core.FieldOptions<TData, TFormData, unknown extends TFormData ? string : DeepKeys<TFormData>, unknown extends TData ? DeepValue<TFormData, unknown extends TFormData ? string : DeepKeys<TFormData>> : TData> & {
|
37
|
+
mode?: "value" | "array" | undefined;
|
38
|
+
} & ({
|
39
|
+
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
40
|
+
} | {
|
41
|
+
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
42
|
+
})) => any;
|
43
|
+
|
44
|
+
export { Field, FieldComponent, FieldValue, UseField, useField };
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import * as _tanstack_form_core from '@tanstack/form-core';
|
2
|
+
import { DeepKeys, FieldApi, FieldApiOptions, Narrow, DeepValue, FormApi } from '@tanstack/form-core';
|
3
|
+
import { SetupContext, SlotsType, Ref } from 'vue-demi';
|
4
|
+
import { UseFieldOptions } from './types.js';
|
5
|
+
|
6
|
+
declare module '@tanstack/form-core' {
|
7
|
+
interface FieldApi<_TData, TFormData, Opts, TData> {
|
8
|
+
Field: FieldComponent<TFormData, TData>;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
12
|
+
name: Narrow<TField>;
|
13
|
+
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
14
|
+
declare function useField<TData, TFormData, TName extends unknown extends TFormData ? string : DeepKeys<TFormData> = unknown extends TFormData ? string : DeepKeys<TFormData>>(opts: UseFieldOptions<TData, TFormData, TName>): {
|
15
|
+
api: FieldApi<TData, TFormData, Omit<typeof opts, 'onMount'> & {
|
16
|
+
form: FormApi<TFormData>;
|
17
|
+
}>;
|
18
|
+
state: Readonly<Ref<FieldApi<TData, TFormData, Omit<typeof opts, 'onMount'> & {
|
19
|
+
form: FormApi<TFormData>;
|
20
|
+
}>['state']>>;
|
21
|
+
};
|
22
|
+
type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
23
|
+
type FieldComponentProps<TParentData, TFormData, TField, TName extends unknown extends TFormData ? string : DeepKeys<TFormData>> = (TParentData extends any[] ? {
|
24
|
+
name?: TName;
|
25
|
+
index: number;
|
26
|
+
} : {
|
27
|
+
name: TName;
|
28
|
+
index?: never;
|
29
|
+
}) & Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>;
|
30
|
+
type FieldComponent<TParentData, TFormData> = <TField, TName extends unknown extends TFormData ? string : DeepKeys<TFormData>>(fieldOptions: FieldComponentProps<TParentData, TFormData, TField, TName>, context: SetupContext<{}, SlotsType<{
|
31
|
+
default: {
|
32
|
+
field: FieldApi<TField, TFormData, FieldApiOptions<TField, TFormData, TName>>;
|
33
|
+
state: FieldApi<TField, TFormData, FieldApiOptions<TField, TFormData, TName>>['state'];
|
34
|
+
};
|
35
|
+
}>>) => any;
|
36
|
+
declare const Field: <TData, TFormData>(props: _tanstack_form_core.FieldOptions<TData, TFormData, unknown extends TFormData ? string : DeepKeys<TFormData>, unknown extends TData ? DeepValue<TFormData, unknown extends TFormData ? string : DeepKeys<TFormData>> : TData> & {
|
37
|
+
mode?: "value" | "array" | undefined;
|
38
|
+
} & ({
|
39
|
+
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
40
|
+
} | {
|
41
|
+
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
42
|
+
})) => any;
|
43
|
+
|
44
|
+
export { Field, FieldComponent, FieldValue, UseField, useField };
|
@@ -0,0 +1,53 @@
|
|
1
|
+
// src/useField.tsx
|
2
|
+
import {
|
3
|
+
FieldApi
|
4
|
+
} from "@tanstack/form-core";
|
5
|
+
import { useStore } from "@tanstack/vue-store";
|
6
|
+
import { defineComponent, onMounted, onUnmounted, watch } from "vue-demi";
|
7
|
+
import { provideFormContext, useFormContext } from "./formContext.js";
|
8
|
+
function useField(opts) {
|
9
|
+
const { formApi, parentFieldName } = useFormContext();
|
10
|
+
const fieldApi = (() => {
|
11
|
+
const api = new FieldApi({
|
12
|
+
...opts,
|
13
|
+
form: formApi,
|
14
|
+
name: opts.name
|
15
|
+
});
|
16
|
+
api.Field = Field;
|
17
|
+
return api;
|
18
|
+
})();
|
19
|
+
const fieldState = useStore(fieldApi.store, (state) => state);
|
20
|
+
let cleanup;
|
21
|
+
onMounted(() => {
|
22
|
+
cleanup = fieldApi.mount();
|
23
|
+
});
|
24
|
+
onUnmounted(() => {
|
25
|
+
cleanup();
|
26
|
+
});
|
27
|
+
watch(
|
28
|
+
() => opts,
|
29
|
+
() => {
|
30
|
+
fieldApi.update({ ...opts, form: formApi });
|
31
|
+
}
|
32
|
+
);
|
33
|
+
return { api: fieldApi, state: fieldState };
|
34
|
+
}
|
35
|
+
var Field = defineComponent(
|
36
|
+
(fieldOptions, context) => {
|
37
|
+
const fieldApi = useField({ ...fieldOptions, ...context.attrs });
|
38
|
+
provideFormContext({
|
39
|
+
formApi: fieldApi.api.form,
|
40
|
+
parentFieldName: fieldApi.api.name
|
41
|
+
});
|
42
|
+
return () => context.slots.default({
|
43
|
+
field: fieldApi.api,
|
44
|
+
state: fieldApi.state.value
|
45
|
+
});
|
46
|
+
},
|
47
|
+
{ name: "Field", inheritAttrs: false }
|
48
|
+
);
|
49
|
+
export {
|
50
|
+
Field,
|
51
|
+
useField
|
52
|
+
};
|
53
|
+
//# sourceMappingURL=useField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import {\n FieldApi,\n type FieldApiOptions,\n type FormApi,\n} 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-demi'\nimport type { SlotsType, SetupContext, Ref } from 'vue-demi'\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<_TData, TFormData, Opts, TData> {\n Field: FieldComponent<TFormData, TData>\n }\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<\n TData,\n TFormData,\n TName extends unknown extends TFormData\n ? string\n : DeepKeys<TFormData> = unknown extends TFormData\n ? string\n : DeepKeys<TFormData>,\n>(\n opts: UseFieldOptions<TData, TFormData, TName>,\n): {\n api: FieldApi<\n TData,\n TFormData,\n Omit<typeof opts, 'onMount'> & {\n form: FormApi<TFormData>\n }\n >\n state: Readonly<\n Ref<\n FieldApi<\n TData,\n TFormData,\n Omit<typeof opts, 'onMount'> & {\n form: FormApi<TFormData>\n }\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<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\ntype FieldComponentProps<\n TParentData,\n TFormData,\n TField,\n TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,\n> = (TParentData extends any[]\n ? {\n name?: TName\n index: number\n }\n : {\n name: TName\n index?: never\n }) &\n Omit<UseFieldOptions<TField, TFormData, TName>, 'name' | 'index'>\n\nexport type FieldComponent<TParentData, TFormData> = <\n // Type of the field\n TField,\n // Name of the field\n TName extends unknown extends TFormData ? string : DeepKeys<TFormData>,\n>(\n fieldOptions: FieldComponentProps<TParentData, TFormData, TField, TName>,\n context: SetupContext<\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TField,\n TFormData,\n FieldApiOptions<TField, TFormData, TName>\n >\n state: FieldApi<\n TField,\n TFormData,\n FieldApiOptions<TField, TFormData, TName>\n >['state']\n }\n }>\n >,\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 () =>\n context.slots.default!({\n field: fieldApi.api,\n state: fieldApi.state.value,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAGK;AAEP,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,WAAW,aAAa,aAAa;AAE/D,SAAS,oBAAoB,sBAAsB;AAiB5C,SAAS,SASd,MAoBA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IACb,CAAU;AAEV,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,GAAG;AAEH,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAE5D,MAAI;AACJ,YAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAC3B,CAAC;AAED,cAAY,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;AAkDO,IAAM,QAAQ;AAAA,EACnB,CACE,cACA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,MAAM,CAAC;AAE/D,uBAAmB;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAChC,CAAU;AAEV,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IACxB,CAAC;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;","names":[]}
|
@@ -0,0 +1,70 @@
|
|
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/useForm.tsx
|
21
|
+
var useForm_exports = {};
|
22
|
+
__export(useForm_exports, {
|
23
|
+
useForm: () => useForm
|
24
|
+
});
|
25
|
+
module.exports = __toCommonJS(useForm_exports);
|
26
|
+
var import_form_core = require("@tanstack/form-core");
|
27
|
+
var import_vue_store = require("@tanstack/vue-store");
|
28
|
+
var import_useField = require("./useField.cjs");
|
29
|
+
var import_formContext = require("./formContext.cjs");
|
30
|
+
var import_vue_demi = require("vue-demi");
|
31
|
+
function useForm(opts) {
|
32
|
+
const formApi = (() => {
|
33
|
+
const api = new import_form_core.FormApi(opts);
|
34
|
+
api.Provider = (0, import_vue_demi.defineComponent)(
|
35
|
+
(_, context) => {
|
36
|
+
(0, import_formContext.provideFormContext)({ formApi });
|
37
|
+
return () => context.slots.default();
|
38
|
+
},
|
39
|
+
{ name: "Provider" }
|
40
|
+
);
|
41
|
+
api.provideFormContext = () => {
|
42
|
+
(0, import_formContext.provideFormContext)({ formApi });
|
43
|
+
};
|
44
|
+
api.Field = import_useField.Field;
|
45
|
+
api.useField = import_useField.useField;
|
46
|
+
api.useStore = (selector) => {
|
47
|
+
return (0, import_vue_store.useStore)(api.store, selector);
|
48
|
+
};
|
49
|
+
api.Subscribe = (0, import_vue_demi.defineComponent)(
|
50
|
+
(props, context) => {
|
51
|
+
const allProps = { ...props, ...context.attrs };
|
52
|
+
const selector = allProps.selector ?? ((state) => state);
|
53
|
+
const data = (0, import_vue_store.useStore)(api.store, selector);
|
54
|
+
return () => context.slots.default(data.value);
|
55
|
+
},
|
56
|
+
{
|
57
|
+
name: "Subscribe",
|
58
|
+
inheritAttrs: false
|
59
|
+
}
|
60
|
+
);
|
61
|
+
return api;
|
62
|
+
})();
|
63
|
+
formApi.update(opts);
|
64
|
+
return formApi;
|
65
|
+
}
|
66
|
+
// Annotate the CommonJS export names for ESM import in node:
|
67
|
+
0 && (module.exports = {
|
68
|
+
useForm
|
69
|
+
});
|
70
|
+
//# sourceMappingURL=useForm.cjs.map
|