@xbeeant/form-engine-react 0.0.2 → 0.0.4
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/components/FormController.cjs +1 -1
- package/dist/cjs/components/NexusField.cjs +1 -1
- package/dist/cjs/components/NexusForm.cjs +1 -1
- package/dist/cjs/components/form-controller.cjs +1 -0
- package/dist/cjs/components/nexus-field.cjs +1 -0
- package/dist/cjs/components/nexus-form-provider.cjs +1 -0
- package/dist/cjs/components/nexus-form.cjs +1 -0
- package/dist/cjs/components/nexus-layout.cjs +1 -0
- package/dist/cjs/components/nexus-object.cjs +1 -0
- package/dist/cjs/contexts/field-inherit-context.cjs +1 -0
- package/dist/cjs/contexts/grid-context.cjs +1 -0
- package/dist/cjs/contexts/layout-config-context.cjs +1 -0
- package/dist/cjs/contexts/nexus-context.cjs +1 -0
- package/dist/cjs/hooks/index.cjs +1 -1
- package/dist/cjs/hooks/use-engine.cjs +1 -0
- package/dist/cjs/hooks/use-field-state.cjs +1 -0
- package/dist/cjs/hooks/use-field-validator.cjs +1 -0
- package/dist/cjs/hooks/use-field-value.cjs +1 -0
- package/dist/cjs/hooks/use-form-config.cjs +1 -0
- package/dist/cjs/hooks/use-form-data.cjs +1 -0
- package/dist/cjs/hooks/use-form-submitting.cjs +1 -0
- package/dist/cjs/hooks/use-form.cjs +1 -0
- package/dist/cjs/hooks/use-nexus-context.cjs +1 -0
- package/dist/cjs/hooks/use-watch-all.cjs +1 -0
- package/dist/cjs/hooks/use-watch-multiple.cjs +1 -0
- package/dist/cjs/hooks/use-watch-state.cjs +1 -0
- package/dist/cjs/hooks/use-watch.cjs +1 -0
- package/dist/cjs/hooks/useForm.cjs +1 -1
- package/dist/cjs/hooks/useFormData.cjs +1 -1
- package/dist/cjs/hooks/useFormSubmitting.cjs +1 -0
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/styles.css +1 -0
- package/dist/cjs/utils/omit-nil.cjs +1 -0
- package/dist/cjs/utils/omitNil.cjs +1 -0
- package/dist/cjs/utils/persist.cjs +1 -0
- package/dist/cjs/utils/render-tree-node.cjs +1 -0
- package/dist/cjs/utils/resolve-col-span.cjs +1 -0
- package/dist/es/components/FormController.d.ts +76 -18
- package/dist/es/components/FormController.js +227 -70
- package/dist/es/components/NexusField.js +63 -60
- package/dist/es/components/NexusForm.d.ts +40 -3
- package/dist/es/components/NexusForm.js +143 -89
- package/dist/es/components/form-controller.d.ts +129 -0
- package/dist/es/components/form-controller.js +310 -0
- package/dist/es/components/nexus-field.d.ts +9 -0
- package/dist/es/components/nexus-field.js +131 -0
- package/dist/es/components/nexus-form-provider.d.ts +12 -0
- package/dist/es/components/nexus-form-provider.js +18 -0
- package/dist/es/components/nexus-form.d.ts +114 -0
- package/dist/es/components/nexus-form.js +174 -0
- package/dist/es/components/nexus-layout.d.ts +9 -0
- package/dist/es/components/nexus-layout.js +48 -0
- package/dist/es/components/nexus-object.d.ts +16 -0
- package/dist/es/components/nexus-object.js +64 -0
- package/dist/es/contexts/NexusContext.d.ts +2 -0
- package/dist/es/contexts/field-inherit-context.d.ts +18 -0
- package/dist/es/contexts/field-inherit-context.js +5 -0
- package/dist/es/contexts/grid-context.d.ts +5 -0
- package/dist/es/contexts/grid-context.js +5 -0
- package/dist/es/contexts/layout-config-context.d.ts +4 -0
- package/dist/es/contexts/layout-config-context.js +5 -0
- package/dist/es/contexts/nexus-context.d.ts +29 -0
- package/dist/es/contexts/nexus-context.js +12 -0
- package/dist/es/hooks/index.d.ts +12 -11
- package/dist/es/hooks/index.js +20 -18
- package/dist/es/hooks/use-engine.d.ts +2 -0
- package/dist/es/hooks/use-engine.js +8 -0
- package/dist/es/hooks/use-field-state.d.ts +7 -0
- package/dist/es/hooks/use-field-state.js +13 -0
- package/dist/es/hooks/use-field-validator.d.ts +40 -0
- package/dist/es/hooks/use-field-validator.js +35 -0
- package/dist/es/hooks/use-field-value.d.ts +6 -0
- package/dist/es/hooks/use-field-value.js +13 -0
- package/dist/es/hooks/use-form-config.d.ts +5 -0
- package/dist/es/hooks/use-form-config.js +8 -0
- package/dist/es/hooks/use-form-data.d.ts +6 -0
- package/dist/es/hooks/use-form-data.js +13 -0
- package/dist/es/hooks/use-form-submitting.d.ts +7 -0
- package/dist/es/hooks/use-form-submitting.js +11 -0
- package/dist/es/hooks/use-form.d.ts +22 -0
- package/dist/es/hooks/use-form.js +12 -0
- package/dist/es/hooks/use-nexus-context.d.ts +11 -0
- package/dist/es/hooks/use-nexus-context.js +12 -0
- package/dist/es/hooks/use-watch-all.d.ts +19 -0
- package/dist/es/hooks/use-watch-all.js +29 -0
- package/dist/es/hooks/use-watch-multiple.d.ts +20 -0
- package/dist/es/hooks/use-watch-multiple.js +29 -0
- package/dist/es/hooks/use-watch-state.d.ts +18 -0
- package/dist/es/hooks/use-watch-state.js +19 -0
- package/dist/es/hooks/use-watch.d.ts +25 -0
- package/dist/es/hooks/use-watch.js +20 -0
- package/dist/es/hooks/useForm.d.ts +17 -1
- package/dist/es/hooks/useForm.js +9 -6
- package/dist/es/hooks/useFormData.js +9 -9
- package/dist/es/hooks/useFormSubmitting.d.ts +7 -0
- package/dist/es/hooks/useFormSubmitting.js +11 -0
- package/dist/es/index.d.ts +26 -24
- package/dist/es/index.js +43 -38
- package/dist/es/styles.css +1 -0
- package/dist/es/utils/omit-nil.d.ts +9 -0
- package/dist/es/utils/omit-nil.js +14 -0
- package/dist/es/utils/omitNil.d.ts +9 -0
- package/dist/es/utils/omitNil.js +14 -0
- package/dist/es/utils/persist.d.ts +24 -0
- package/dist/es/utils/persist.js +43 -0
- package/dist/es/utils/render-tree-node.d.ts +6 -0
- package/dist/es/utils/render-tree-node.js +17 -0
- package/dist/es/utils/resolve-col-span.d.ts +5 -0
- package/dist/es/utils/resolve-col-span.js +9 -0
- package/dist/umd/index.css +1 -0
- package/dist/umd/index.umd.cjs +1 -1
- package/package.json +5 -4
- package/src/components/form-controller.ts +584 -0
- package/src/components/{NexusField.tsx → nexus-field.tsx} +108 -31
- package/src/components/{NexusFormProvider.tsx → nexus-form-provider.tsx} +3 -3
- package/src/components/{NexusForm.tsx → nexus-form.tsx} +159 -18
- package/src/components/{NexusLayout.tsx → nexus-layout.tsx} +5 -5
- package/src/components/{NexusObject.tsx → nexus-object.tsx} +3 -3
- package/src/contexts/{NexusContext.ts → nexus-context.ts} +3 -1
- package/src/hooks/index.ts +12 -11
- package/src/hooks/{useEngine.ts → use-engine.ts} +1 -1
- package/src/hooks/{useFieldState.ts → use-field-state.ts} +1 -1
- package/src/hooks/{useFieldValidator.ts → use-field-validator.ts} +1 -1
- package/src/hooks/{useFieldValue.ts → use-field-value.ts} +1 -1
- package/src/hooks/{useFormConfig.ts → use-form-config.ts} +2 -2
- package/src/hooks/{useFormData.ts → use-form-data.ts} +4 -4
- package/src/hooks/use-form-submitting.ts +16 -0
- package/src/hooks/use-form.ts +36 -0
- package/src/hooks/{useNexusContext.ts → use-nexus-context.ts} +2 -2
- package/src/index.ts +28 -24
- package/src/styles.css +6 -0
- package/src/utils/omit-nil.ts +24 -0
- package/src/utils/persist.ts +88 -0
- package/src/utils/{renderTreeNode.tsx → render-tree-node.tsx} +3 -3
- package/src/utils/{resolveColSpan.ts → resolve-col-span.ts} +1 -1
- package/src/vite-env.d.ts +1 -0
- package/src/components/FormController.ts +0 -271
- package/src/hooks/useForm.ts +0 -15
- /package/src/contexts/{FieldInheritContext.ts → field-inherit-context.ts} +0 -0
- /package/src/contexts/{GridContext.ts → grid-context.ts} +0 -0
- /package/src/contexts/{LayoutConfigContext.ts → layout-config-context.ts} +0 -0
- /package/src/hooks/{useWatchAll.ts → use-watch-all.ts} +0 -0
- /package/src/hooks/{useWatchMultiple.ts → use-watch-multiple.ts} +0 -0
- /package/src/hooks/{useWatchState.ts → use-watch-state.ts} +0 -0
- /package/src/hooks/{useWatch.ts → use-watch.ts} +0 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FormController } from '../components/form-controller';
|
|
2
|
+
/**
|
|
3
|
+
* useFormSubmitting — 订阅表单提交中状态(formily submitting 对齐)
|
|
4
|
+
*
|
|
5
|
+
* submit() 全流程(校验 + onFinish)期间返回 true,供提交按钮展示 loading。
|
|
6
|
+
*/
|
|
7
|
+
export declare function useFormSubmitting(form: FormController): boolean;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { NexusEngine } from '@xbeeant/form-engine';
|
|
2
|
+
import { FormController } from '../components/form-controller';
|
|
3
|
+
/**
|
|
4
|
+
* useForm — 创建 Form 实例
|
|
5
|
+
*
|
|
6
|
+
* 一个 Form 绑定一个引擎宿主(引擎为独立实体):
|
|
7
|
+
* - 同一 form 引用传给多个 NexusForm → 共享引擎宿主(组件/插件注册共享),
|
|
8
|
+
* 每个 NexusForm 挂载自动获得独立实例(schema/值/订阅互不影响),
|
|
9
|
+
* form 的 API 聚合作用于全部实例
|
|
10
|
+
* - 需要完全独立的表单:各自 useForm()(独立引擎宿主)
|
|
11
|
+
*
|
|
12
|
+
* 支持:
|
|
13
|
+
* - `useForm()`:创建独立实例(引擎宿主内部创建,未注册,不参与跨表单联动)
|
|
14
|
+
* - `useForm(formId)`:创建带 formId 的实例,自动注册到默认表单注册表,
|
|
15
|
+
* 可通过 schema `crossForm` reaction / `engine.linkForm` 与其他表单联动
|
|
16
|
+
* - `useForm(formId, engine)`:复用外部创建的引擎(如 `new NexusEngine({ formId })`),
|
|
17
|
+
* 实现多个 form 共享同一引擎宿主
|
|
18
|
+
*
|
|
19
|
+
* @param formId - 可选,表单实例唯一标识(跨表单联动寻址)
|
|
20
|
+
* @param engine - 可选,外部引擎宿主(缺省内部创建)
|
|
21
|
+
*/
|
|
22
|
+
export declare function useForm(formId?: string, engine?: NexusEngine): [FormController];
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { NexusEngine as n } from "@xbeeant/form-engine";
|
|
2
|
+
import { useRef as t } from "react";
|
|
3
|
+
import { FormController as u } from "../components/form-controller.js";
|
|
4
|
+
function c(e, o) {
|
|
5
|
+
const r = t(null);
|
|
6
|
+
return r.current || (r.current = new u(
|
|
7
|
+
o ?? (e ? new n({ formId: e }) : void 0)
|
|
8
|
+
)), [r.current];
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
c as useForm
|
|
12
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { NexusEngine } from '@xbeeant/form-engine';
|
|
2
|
+
import { FormController } from '../components/form-controller';
|
|
3
|
+
import { NexusFormConfig } from '../components/nexus-form';
|
|
4
|
+
interface NexusContextValue {
|
|
5
|
+
engine: NexusEngine;
|
|
6
|
+
config: NexusFormConfig;
|
|
7
|
+
form: FormController;
|
|
8
|
+
}
|
|
9
|
+
export declare const NexusContext: import('react').Context<NexusContextValue | null>;
|
|
10
|
+
export declare function useNexusContext(): NexusContextValue;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createContext as t, useContext as o } from "react";
|
|
2
|
+
const r = t(null);
|
|
3
|
+
function u() {
|
|
4
|
+
const e = o(r);
|
|
5
|
+
if (!e)
|
|
6
|
+
throw new Error("[NexusField] Must be used within <NexusFormProvider>");
|
|
7
|
+
return e;
|
|
8
|
+
}
|
|
9
|
+
export {
|
|
10
|
+
r as NexusContext,
|
|
11
|
+
u as useNexusContext
|
|
12
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { NexusEngine } from '@xbeeant/form-engine';
|
|
2
|
+
/**
|
|
3
|
+
* useWatchAll Hook - 监听整个表单数据变化
|
|
4
|
+
*
|
|
5
|
+
* @param engine - NexusEngine实例
|
|
6
|
+
* @param callback - 变化回调函数
|
|
7
|
+
* @param deep - 是否深度比较值(默认false,仅浅比较)
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* // 监听整个表单
|
|
12
|
+
* useWatchAll(engine, (formData) => {
|
|
13
|
+
* console.log('Form data changed:', formData);
|
|
14
|
+
* }, { deep: true });
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export declare function useWatchAll(engine: NexusEngine | null, callback: (formData: Record<string, unknown>) => void, options?: {
|
|
18
|
+
deep?: boolean;
|
|
19
|
+
}): Record<string, unknown>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useRef as n, useEffect as h } from "react";
|
|
2
|
+
function g(c, i, b) {
|
|
3
|
+
const { deep: l = !1 } = b || {}, t = n({}), e = n({}), u = n(i);
|
|
4
|
+
return u.current = i, h(() => {
|
|
5
|
+
if (!c)
|
|
6
|
+
return;
|
|
7
|
+
const s = c.getFormData();
|
|
8
|
+
t.current = s, e.current = s, u.current(s);
|
|
9
|
+
const d = c.subscribeAll((r) => {
|
|
10
|
+
if (l)
|
|
11
|
+
JSON.stringify(r) !== JSON.stringify(t.current) && (t.current = r, e.current = r, u.current(r));
|
|
12
|
+
else {
|
|
13
|
+
let f = !1;
|
|
14
|
+
for (const o in r)
|
|
15
|
+
if (r[o] !== t.current[o]) {
|
|
16
|
+
f = !0;
|
|
17
|
+
break;
|
|
18
|
+
}
|
|
19
|
+
f && (t.current = r, e.current = r, u.current(r));
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
return () => {
|
|
23
|
+
d();
|
|
24
|
+
};
|
|
25
|
+
}, [c, l]), e.current;
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
g as useWatchAll
|
|
29
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { NexusEngine } from '@xbeeant/form-engine';
|
|
2
|
+
/**
|
|
3
|
+
* useWatchMultiple Hook - 监听多个字段值变化
|
|
4
|
+
*
|
|
5
|
+
* @param engine - NexusEngine实例
|
|
6
|
+
* @param paths - 字段路径数组
|
|
7
|
+
* @param callback - 变化回调函数
|
|
8
|
+
* @param deep - 是否深度比较值(默认false,仅浅比较)
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* // 监听多个字段
|
|
13
|
+
* const values = useWatchMultiple(engine, ['name', 'email', 'age'], (values) => {
|
|
14
|
+
* console.log('Values changed:', values);
|
|
15
|
+
* }, { deep: true });
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare function useWatchMultiple(engine: NexusEngine | null, paths: string[], callback: (values: Record<string, unknown>) => void, options?: {
|
|
19
|
+
deep?: boolean;
|
|
20
|
+
}): Record<string, unknown>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useRef as s, useEffect as p } from "react";
|
|
2
|
+
function v(r, u, a, R) {
|
|
3
|
+
const { deep: l = !1 } = R || {}, o = s({}), e = s({}), f = s(a);
|
|
4
|
+
f.current = a;
|
|
5
|
+
const i = s(u);
|
|
6
|
+
i.current = u;
|
|
7
|
+
const V = [...u].sort().join(",");
|
|
8
|
+
return p(() => {
|
|
9
|
+
if (!r)
|
|
10
|
+
return;
|
|
11
|
+
const b = i.current, c = {};
|
|
12
|
+
for (const t of b)
|
|
13
|
+
c[t] = r.getFieldValue(t);
|
|
14
|
+
o.current = c, e.current = c, f.current(c);
|
|
15
|
+
const h = b.map(
|
|
16
|
+
(t) => r.subscribe(t, (m) => {
|
|
17
|
+
const n = m.value, d = o.current[t];
|
|
18
|
+
(l ? JSON.stringify(n) !== JSON.stringify(d) : n !== d) && (o.current[t] = n, e.current = { [t]: n }, f.current(e.current));
|
|
19
|
+
})
|
|
20
|
+
);
|
|
21
|
+
return () => {
|
|
22
|
+
for (const t of h)
|
|
23
|
+
t();
|
|
24
|
+
};
|
|
25
|
+
}, [r, l, V]), e.current;
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
v as useWatchMultiple
|
|
29
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { FieldState, NexusEngine } from '@xbeeant/form-engine';
|
|
2
|
+
/**
|
|
3
|
+
* useWatchState Hook - 监听单个字段状态变化
|
|
4
|
+
*
|
|
5
|
+
* @param engine - NexusEngine实例
|
|
6
|
+
* @param path - 字段路径
|
|
7
|
+
* @param callback - 状态变化回调函数
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* // 监听字段状态(visible/disabled/loading等)
|
|
12
|
+
* const isDisabled = useWatchState(engine, 'email', (state) => {
|
|
13
|
+
* console.log('Disabled:', state.disabled);
|
|
14
|
+
* console.log('Loading:', state.loading);
|
|
15
|
+
* });
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare function useWatchState(engine: NexusEngine | null, path: string, callback: (state: FieldState) => void): FieldState;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useRef as n, useEffect as i } from "react";
|
|
2
|
+
function R(r, t, s) {
|
|
3
|
+
const e = n(void 0), u = n(s);
|
|
4
|
+
return u.current = s, i(() => {
|
|
5
|
+
if (!r)
|
|
6
|
+
return;
|
|
7
|
+
const c = r.getFieldState(t);
|
|
8
|
+
e.current = c, c && u.current(c);
|
|
9
|
+
const o = r.subscribe(t, (f) => {
|
|
10
|
+
e.current = f, u.current(f);
|
|
11
|
+
});
|
|
12
|
+
return () => {
|
|
13
|
+
o();
|
|
14
|
+
};
|
|
15
|
+
}, [r, t]), e.current || {};
|
|
16
|
+
}
|
|
17
|
+
export {
|
|
18
|
+
R as useWatchState
|
|
19
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { NexusEngine } from '@xbeeant/form-engine';
|
|
2
|
+
/**
|
|
3
|
+
* useWatch Hook - 监听单个字段值变化
|
|
4
|
+
*
|
|
5
|
+
* @param engine - NexusEngine实例
|
|
6
|
+
* @param path - 字段路径
|
|
7
|
+
* @param callback - 变化回调函数
|
|
8
|
+
* @param deep - 是否深度比较值(默认false,仅浅比较)
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* // 监听单个字段
|
|
13
|
+
* const name = useWatch(engine, 'profile.name', (value) => {
|
|
14
|
+
* console.log('Name changed:', value);
|
|
15
|
+
* });
|
|
16
|
+
*
|
|
17
|
+
* // 深度比较对象
|
|
18
|
+
* const profile = useWatch(engine, 'profile', (value) => {
|
|
19
|
+
* console.log('Profile changed:', value);
|
|
20
|
+
* }, { deep: true });
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare function useWatch(engine: NexusEngine | null, path: string, callback: (value: unknown) => void, options?: {
|
|
24
|
+
deep?: boolean;
|
|
25
|
+
}): unknown;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useRef as f, useEffect as d } from "react";
|
|
2
|
+
function J(e, c, o, i) {
|
|
3
|
+
const { deep: n = !1 } = i || {}, r = f(void 0), s = f(o);
|
|
4
|
+
return s.current = o, d(() => {
|
|
5
|
+
if (!e)
|
|
6
|
+
return;
|
|
7
|
+
const t = e.getFieldValue(c);
|
|
8
|
+
r.current === void 0 && (r.current = t), (n ? JSON.stringify(t) !== JSON.stringify(r.current) : t !== r.current) && (r.current = t, s.current(t));
|
|
9
|
+
const l = e.subscribe(c, (a) => {
|
|
10
|
+
const u = a.value;
|
|
11
|
+
(n ? JSON.stringify(u) !== JSON.stringify(r.current) : u !== r.current) && (r.current = u, s.current(u));
|
|
12
|
+
});
|
|
13
|
+
return () => {
|
|
14
|
+
l();
|
|
15
|
+
};
|
|
16
|
+
}, [e, c, n]), r.current;
|
|
17
|
+
}
|
|
18
|
+
export {
|
|
19
|
+
J as useWatch
|
|
20
|
+
};
|
|
@@ -2,5 +2,21 @@ import { NexusEngine } from '@xbeeant/form-engine';
|
|
|
2
2
|
import { FormController } from '../components/FormController';
|
|
3
3
|
/**
|
|
4
4
|
* useForm — 创建 Form 实例
|
|
5
|
+
*
|
|
6
|
+
* 一个 Form 绑定一个引擎宿主(引擎为独立实体):
|
|
7
|
+
* - 同一 form 引用传给多个 NexusForm → 共享引擎宿主(组件/插件注册共享),
|
|
8
|
+
* 每个 NexusForm 挂载自动获得独立实例(schema/值/订阅互不影响),
|
|
9
|
+
* form 的 API 聚合作用于全部实例
|
|
10
|
+
* - 需要完全独立的表单:各自 useForm()(独立引擎宿主)
|
|
11
|
+
*
|
|
12
|
+
* 支持:
|
|
13
|
+
* - `useForm()`:创建独立实例(引擎宿主内部创建,未注册,不参与跨表单联动)
|
|
14
|
+
* - `useForm(formId)`:创建带 formId 的实例,自动注册到默认表单注册表,
|
|
15
|
+
* 可通过 schema `crossForm` reaction / `engine.linkForm` 与其他表单联动
|
|
16
|
+
* - `useForm(formId, engine)`:复用外部创建的引擎(如 `new NexusEngine({ formId })`),
|
|
17
|
+
* 实现多个 form 共享同一引擎宿主
|
|
18
|
+
*
|
|
19
|
+
* @param formId - 可选,表单实例唯一标识(跨表单联动寻址)
|
|
20
|
+
* @param engine - 可选,外部引擎宿主(缺省内部创建)
|
|
5
21
|
*/
|
|
6
|
-
export declare function useForm(engine?: NexusEngine): [FormController];
|
|
22
|
+
export declare function useForm(formId?: string, engine?: NexusEngine): [FormController];
|
package/dist/es/hooks/useForm.js
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { NexusEngine as n } from "@xbeeant/form-engine";
|
|
2
|
+
import { useRef as t } from "react";
|
|
3
|
+
import { FormController as u } from "../components/FormController.js";
|
|
4
|
+
function c(e, o) {
|
|
5
|
+
const r = t(null);
|
|
6
|
+
return r.current || (r.current = new u(
|
|
7
|
+
o ?? (e ? new n({ formId: e }) : void 0)
|
|
8
|
+
)), [r.current];
|
|
6
9
|
}
|
|
7
10
|
export {
|
|
8
|
-
|
|
11
|
+
c as useForm
|
|
9
12
|
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { useSyncExternalStore as
|
|
2
|
-
import { useEngine as
|
|
3
|
-
function
|
|
4
|
-
const e =
|
|
5
|
-
e.subscribeStore,
|
|
6
|
-
e.getSnapshot,
|
|
7
|
-
e.getSnapshot
|
|
1
|
+
import { useSyncExternalStore as n, useMemo as r } from "react";
|
|
2
|
+
import { useEngine as s } from "./useEngine.js";
|
|
3
|
+
function m() {
|
|
4
|
+
const e = s(), t = n(
|
|
5
|
+
(o) => e.subscribeStore(o),
|
|
6
|
+
() => e.getSnapshot(),
|
|
7
|
+
() => e.getSnapshot()
|
|
8
8
|
);
|
|
9
|
-
return
|
|
9
|
+
return r(() => e.getFormData(), [e, t]);
|
|
10
10
|
}
|
|
11
11
|
export {
|
|
12
|
-
|
|
12
|
+
m as useFormData
|
|
13
13
|
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FormController } from '../components/FormController';
|
|
2
|
+
/**
|
|
3
|
+
* useFormSubmitting — 订阅表单提交中状态(formily submitting 对齐)
|
|
4
|
+
*
|
|
5
|
+
* submit() 全流程(校验 + onFinish)期间返回 true,供提交按钮展示 loading。
|
|
6
|
+
*/
|
|
7
|
+
export declare function useFormSubmitting(form: FormController): boolean;
|
package/dist/es/index.d.ts
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
|
-
export { FormController } from './components/
|
|
2
|
-
export { NexusField } from './components/
|
|
3
|
-
export type { NexusFormConfig } from './components/
|
|
4
|
-
export { NexusForm } from './components/
|
|
5
|
-
export { NexusFormProvider } from './components/
|
|
6
|
-
export { NexusLayout } from './components/
|
|
7
|
-
export { NexusObject } from './components/
|
|
8
|
-
export type { FieldInheritValue } from './contexts/
|
|
9
|
-
export { FieldInheritContext } from './contexts/
|
|
10
|
-
export type { GridContextValue } from './contexts/
|
|
11
|
-
export { GridContext } from './contexts/
|
|
12
|
-
export type { LayoutConfigContextValue } from './contexts/
|
|
13
|
-
export { LayoutConfigContext } from './contexts/
|
|
14
|
-
export {
|
|
15
|
-
export {
|
|
16
|
-
export {
|
|
17
|
-
export {
|
|
18
|
-
export {
|
|
19
|
-
export {
|
|
20
|
-
export {
|
|
21
|
-
export {
|
|
22
|
-
export {
|
|
23
|
-
export {
|
|
24
|
-
export {
|
|
1
|
+
export { FormController } from './components/form-controller';
|
|
2
|
+
export { NexusField } from './components/nexus-field';
|
|
3
|
+
export type { NexusFormConfig, NexusFormProps } from './components/nexus-form';
|
|
4
|
+
export { NexusForm } from './components/nexus-form';
|
|
5
|
+
export { NexusFormProvider } from './components/nexus-form-provider';
|
|
6
|
+
export { NexusLayout } from './components/nexus-layout';
|
|
7
|
+
export { NexusObject } from './components/nexus-object';
|
|
8
|
+
export type { FieldInheritValue } from './contexts/field-inherit-context';
|
|
9
|
+
export { FieldInheritContext } from './contexts/field-inherit-context';
|
|
10
|
+
export type { GridContextValue } from './contexts/grid-context';
|
|
11
|
+
export { GridContext } from './contexts/grid-context';
|
|
12
|
+
export type { LayoutConfigContextValue } from './contexts/layout-config-context';
|
|
13
|
+
export { LayoutConfigContext } from './contexts/layout-config-context';
|
|
14
|
+
export { NexusContext } from './contexts/nexus-context';
|
|
15
|
+
export { useEngine } from './hooks/use-engine';
|
|
16
|
+
export { useFieldState } from './hooks/use-field-state';
|
|
17
|
+
export { useFieldValidator } from './hooks/use-field-validator';
|
|
18
|
+
export { useFieldValue } from './hooks/use-field-value';
|
|
19
|
+
export { useForm } from './hooks/use-form';
|
|
20
|
+
export { useFormConfig } from './hooks/use-form-config';
|
|
21
|
+
export { useFormData } from './hooks/use-form-data';
|
|
22
|
+
export { useFormSubmitting } from './hooks/use-form-submitting';
|
|
23
|
+
export { useWatch } from './hooks/use-watch';
|
|
24
|
+
export { useWatchAll } from './hooks/use-watch-all';
|
|
25
|
+
export { useWatchMultiple } from './hooks/use-watch-multiple';
|
|
26
|
+
export { useWatchState } from './hooks/use-watch-state';
|
package/dist/es/index.js
CHANGED
|
@@ -1,42 +1,47 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
1
|
+
import './styles.css';/* empty css */
|
|
2
|
+
import { FormController as t } from "./components/form-controller.js";
|
|
3
|
+
import { NexusField as m } from "./components/nexus-field.js";
|
|
4
|
+
import { NexusForm as p } from "./components/nexus-form.js";
|
|
5
|
+
import { NexusFormProvider as s } from "./components/nexus-form-provider.js";
|
|
6
|
+
import { NexusLayout as a } from "./components/nexus-layout.js";
|
|
7
|
+
import { NexusObject as F } from "./components/nexus-object.js";
|
|
8
|
+
import { FieldInheritContext as d } from "./contexts/field-inherit-context.js";
|
|
9
|
+
import { GridContext as N } from "./contexts/grid-context.js";
|
|
10
|
+
import { LayoutConfigContext as h } from "./contexts/layout-config-context.js";
|
|
11
|
+
import { NexusContext as W } from "./contexts/nexus-context.js";
|
|
12
|
+
import { useEngine as b } from "./hooks/use-engine.js";
|
|
13
|
+
import { useFieldState as L } from "./hooks/use-field-state.js";
|
|
14
|
+
import { useFieldValidator as j } from "./hooks/use-field-validator.js";
|
|
15
|
+
import { useFieldValue as A } from "./hooks/use-field-value.js";
|
|
16
|
+
import { useForm as E } from "./hooks/use-form.js";
|
|
17
|
+
import { useFormConfig as I } from "./hooks/use-form-config.js";
|
|
18
|
+
import { useFormData as O } from "./hooks/use-form-data.js";
|
|
19
|
+
import { useFormSubmitting as k } from "./hooks/use-form-submitting.js";
|
|
20
|
+
import { useWatch as w } from "./hooks/use-watch.js";
|
|
21
|
+
import { useWatchAll as B } from "./hooks/use-watch-all.js";
|
|
22
|
+
import { useWatchMultiple as J } from "./hooks/use-watch-multiple.js";
|
|
23
|
+
import { useWatchState as Q } from "./hooks/use-watch-state.js";
|
|
21
24
|
export {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
d as FieldInheritContext,
|
|
26
|
+
t as FormController,
|
|
27
|
+
N as GridContext,
|
|
25
28
|
h as LayoutConfigContext,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
W as NexusContext,
|
|
30
|
+
m as NexusField,
|
|
31
|
+
p as NexusForm,
|
|
32
|
+
s as NexusFormProvider,
|
|
29
33
|
a as NexusLayout,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
34
|
+
F as NexusObject,
|
|
35
|
+
b as useEngine,
|
|
36
|
+
L as useFieldState,
|
|
37
|
+
j as useFieldValidator,
|
|
38
|
+
A as useFieldValue,
|
|
39
|
+
E as useForm,
|
|
40
|
+
I as useFormConfig,
|
|
41
|
+
O as useFormData,
|
|
42
|
+
k as useFormSubmitting,
|
|
43
|
+
w as useWatch,
|
|
44
|
+
B as useWatchAll,
|
|
45
|
+
J as useWatchMultiple,
|
|
46
|
+
Q as useWatchState
|
|
42
47
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}:root,:host{--color-red-500:oklch(63.7% .237 25.331);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--font-weight-bold:700;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.visible{visibility:visible}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.rotate-0{rotate:0deg}.rotate-90{rotate:90deg}.cursor-pointer{cursor:pointer}.gap-1{gap:var(--spacing)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.border-none{--tw-border-style:none;border-style:none}.bg-transparent{background-color:#0000}.p-0{padding:0}.align-middle{vertical-align:middle}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-red-500{color:var(--color-red-500)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
function i(t) {
|
|
2
|
+
if (Array.isArray(t))
|
|
3
|
+
return t.map((r) => i(r));
|
|
4
|
+
if (t !== null && typeof t == "object") {
|
|
5
|
+
const r = {};
|
|
6
|
+
for (const [o, n] of Object.entries(t))
|
|
7
|
+
n == null || n === "" || (r[o] = i(n));
|
|
8
|
+
return r;
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
}
|
|
12
|
+
export {
|
|
13
|
+
i as omitNilDeep
|
|
14
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
function i(t) {
|
|
2
|
+
if (Array.isArray(t))
|
|
3
|
+
return t.map((r) => i(r));
|
|
4
|
+
if (t !== null && typeof t == "object") {
|
|
5
|
+
const r = {};
|
|
6
|
+
for (const [o, n] of Object.entries(t))
|
|
7
|
+
n == null || n === "" || (r[o] = i(n));
|
|
8
|
+
return r;
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
}
|
|
12
|
+
export {
|
|
13
|
+
i as omitNilDeep
|
|
14
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 表单草稿持久化(NexusForm persist 选项实现)
|
|
3
|
+
*
|
|
4
|
+
* 将表单数据自动保存到 Web Storage(localStorage / sessionStorage),
|
|
5
|
+
* 下次挂载时自动恢复为初始值(草稿续填)。
|
|
6
|
+
*
|
|
7
|
+
* 约束:
|
|
8
|
+
* - 所有存储访问均 try/catch 包裹(SSR 无 window / Safari 隐私模式抛错)
|
|
9
|
+
* - 存储键为完整路径前缀,避免多表单实例冲突
|
|
10
|
+
* - 提交成功后默认清除草稿(clearOnSubmit: false 可关闭)
|
|
11
|
+
*/
|
|
12
|
+
export interface PersistOptions {
|
|
13
|
+
/** 存储键(必填,多表单实例需唯一) */
|
|
14
|
+
key: string;
|
|
15
|
+
/** 存储介质,默认 localStorage */
|
|
16
|
+
storage?: 'localStorage' | 'sessionStorage';
|
|
17
|
+
/** 保存防抖毫秒数,默认 300 */
|
|
18
|
+
debounce?: number;
|
|
19
|
+
/** 提交成功后清除草稿,默认 true */
|
|
20
|
+
clearOnSubmit?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export declare function loadPersisted(options: PersistOptions): Record<string, unknown> | undefined;
|
|
23
|
+
export declare function savePersisted(options: PersistOptions, data: Record<string, unknown>): void;
|
|
24
|
+
export declare function clearPersisted(options: PersistOptions): void;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
function s(t) {
|
|
2
|
+
if (!(typeof window > "u"))
|
|
3
|
+
try {
|
|
4
|
+
const e = t === "sessionStorage" ? window.sessionStorage : window.localStorage;
|
|
5
|
+
return e.setItem("__nexus_persist_probe__", "1"), e.removeItem("__nexus_persist_probe__"), e;
|
|
6
|
+
} catch {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
function n(t) {
|
|
11
|
+
const e = s(t.storage);
|
|
12
|
+
if (e)
|
|
13
|
+
try {
|
|
14
|
+
const r = e.getItem(t.key);
|
|
15
|
+
if (!r)
|
|
16
|
+
return;
|
|
17
|
+
const o = JSON.parse(r);
|
|
18
|
+
return typeof o == "object" && o !== null ? o : void 0;
|
|
19
|
+
} catch {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
function i(t, e) {
|
|
24
|
+
const r = s(t.storage);
|
|
25
|
+
if (r)
|
|
26
|
+
try {
|
|
27
|
+
r.setItem(t.key, JSON.stringify(e));
|
|
28
|
+
} catch {
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
function a(t) {
|
|
32
|
+
const e = s(t.storage);
|
|
33
|
+
if (e)
|
|
34
|
+
try {
|
|
35
|
+
e.removeItem(t.key);
|
|
36
|
+
} catch {
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
export {
|
|
40
|
+
a as clearPersisted,
|
|
41
|
+
n as loadPersisted,
|
|
42
|
+
i as savePersisted
|
|
43
|
+
};
|