@dazhicheng/ui 1.5.44 → 1.5.47
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/components/tt-form/src/formApi.d.ts +17 -0
- package/dist/components/tt-form/src/group-form/FieldRenderer.d.ts +8 -8
- package/dist/components/tt-form/src/group-form/GroupForm.vue.d.ts +3 -1
- package/dist/components/tt-form/src/group-form/GroupSection.vue.d.ts +2 -2
- package/dist/components/tt-form/src/group-form/groupFormApi.d.ts +68 -28
- package/dist/components/tt-form/src/group-form/lazyContext.d.ts +5 -0
- package/dist/components/tt-form/src/group-form/types.d.ts +25 -42
- package/dist/components/tt-form/src/group-form/useGroupForm.d.ts +2 -2
- package/dist/components/tt-form/src/group-form/utils.d.ts +14 -0
- package/dist/components/tt-form/src/types.d.ts +6 -6
- package/dist/components/tt-nav-anchor/index.d.ts +2 -0
- package/dist/components/tt-nav-anchor/src/TtNavAnchor.vue.d.ts +2 -0
- package/dist/components/tt-nav-anchor/src/types.d.ts +4 -0
- package/dist/index.js +6651 -6501
- package/dist/style.css +1 -1
- package/package.json +3 -3
|
@@ -32,6 +32,23 @@ export declare class FormApi {
|
|
|
32
32
|
isFieldValid(fieldName: string): Promise<boolean>;
|
|
33
33
|
merge(formApi: FormApi): any;
|
|
34
34
|
mount(formActions: FormActions, componentRefMap: Map<string, unknown>): void;
|
|
35
|
+
/**
|
|
36
|
+
* @description 增量追加字段到 schema 中,支持通过 position 指定插入位置
|
|
37
|
+
* @param {FormSchema[]} fields - 要插入的字段 schema 数组
|
|
38
|
+
* @param {object} [position] - 插入位置,省略则追加到末尾
|
|
39
|
+
* @param {string} [position.before] - 在指定 fieldName 之前插入
|
|
40
|
+
* @param {string} [position.after] - 在指定 fieldName 之后插入
|
|
41
|
+
* @example
|
|
42
|
+
* formApi.appendFields([{ fieldName: 'phone', component: 'ElInput', label: '手机号' }]);
|
|
43
|
+
* @example
|
|
44
|
+
* formApi.appendFields([newField], { after: 'email' });
|
|
45
|
+
* @example
|
|
46
|
+
* formApi.appendFields([newField], { before: 'name' });
|
|
47
|
+
*/
|
|
48
|
+
appendFields(fields: FormSchema[], position?: {
|
|
49
|
+
before?: string;
|
|
50
|
+
after?: string;
|
|
51
|
+
}): void;
|
|
35
52
|
/**
|
|
36
53
|
* 根据字段名移除表单项
|
|
37
54
|
* @param fields
|
|
@@ -7,8 +7,8 @@ import { FormSchema } from '../types';
|
|
|
7
7
|
* @property {FormSchema["rules"]} [rules] - 字段校验规则
|
|
8
8
|
* @property {boolean} [virtual] - 是否启用虚拟化(LazyFormField)
|
|
9
9
|
* @property {Element | null} [scrollElement] - 虚拟化滚动容器
|
|
10
|
-
* @property {string} [
|
|
11
|
-
* @property {number} [
|
|
10
|
+
* @property {string} [rootMargin] - IntersectionObserver rootMargin
|
|
11
|
+
* @property {number} [estimateFieldHeight] - 预估占位高度
|
|
12
12
|
*/
|
|
13
13
|
export declare const FieldRenderer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
14
14
|
/** mergeFieldConfig 合并后的完整字段配置 */
|
|
@@ -32,12 +32,12 @@ export declare const FieldRenderer: import('vue').DefineComponent<import('vue').
|
|
|
32
32
|
default: null;
|
|
33
33
|
};
|
|
34
34
|
/** IntersectionObserver rootMargin */
|
|
35
|
-
|
|
35
|
+
rootMargin: {
|
|
36
36
|
type: StringConstructor;
|
|
37
37
|
default: string;
|
|
38
38
|
};
|
|
39
39
|
/** 预估占位高度(px) */
|
|
40
|
-
|
|
40
|
+
estimateFieldHeight: {
|
|
41
41
|
type: NumberConstructor;
|
|
42
42
|
default: number;
|
|
43
43
|
};
|
|
@@ -63,19 +63,19 @@ export declare const FieldRenderer: import('vue').DefineComponent<import('vue').
|
|
|
63
63
|
default: null;
|
|
64
64
|
};
|
|
65
65
|
/** IntersectionObserver rootMargin */
|
|
66
|
-
|
|
66
|
+
rootMargin: {
|
|
67
67
|
type: StringConstructor;
|
|
68
68
|
default: string;
|
|
69
69
|
};
|
|
70
70
|
/** 预估占位高度(px) */
|
|
71
|
-
|
|
71
|
+
estimateFieldHeight: {
|
|
72
72
|
type: NumberConstructor;
|
|
73
73
|
default: number;
|
|
74
74
|
};
|
|
75
75
|
}>> & Readonly<{}>, {
|
|
76
76
|
rules: import('../types').FormSchemaRuleType | undefined;
|
|
77
77
|
virtual: boolean;
|
|
78
|
+
rootMargin: string;
|
|
79
|
+
estimateFieldHeight: number;
|
|
78
80
|
scrollElement: Element | null;
|
|
79
|
-
virtualRootMargin: string;
|
|
80
|
-
virtualEstimateHeight: number;
|
|
81
81
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
@@ -2,7 +2,9 @@ import { GroupFormSectionProps } from './types';
|
|
|
2
2
|
/**
|
|
3
3
|
* @description 滚动到指定分组(通过 data-group-key 定位 DOM)。
|
|
4
4
|
* 滚动期间暂停 LazyFormField 渲染,滚动结束后才恢复,
|
|
5
|
-
*
|
|
5
|
+
* 避免途经字段挂载导致高度变化引起布局抖动。
|
|
6
|
+
* 虚拟滚动场景下,通过 ResizeObserver 监听容器高度变化,
|
|
7
|
+
* 在字段渲染导致高度变化时自动校正位置,高度稳定后停止。
|
|
6
8
|
* @param {string} key 分组 key
|
|
7
9
|
*/
|
|
8
10
|
declare function scrollToGroup(key: string): void;
|
|
@@ -11,9 +11,9 @@ declare const __VLS_component: import('vue').DefineComponent<GroupSectionProps,
|
|
|
11
11
|
layout: string;
|
|
12
12
|
globalCommonConfig: import('../types').FormCommonConfig;
|
|
13
13
|
virtual: boolean;
|
|
14
|
+
rootMargin: string;
|
|
15
|
+
estimateFieldHeight: number;
|
|
14
16
|
scrollElement: Element | null;
|
|
15
|
-
virtualRootMargin: string;
|
|
16
|
-
virtualEstimateHeight: number;
|
|
17
17
|
depth: number;
|
|
18
18
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
19
19
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
@@ -1,55 +1,78 @@
|
|
|
1
1
|
import { FormState, GenericObject, ResetFormOpts, ValidationOptions } from 'vee-validate';
|
|
2
|
+
import { Ref } from 'vue';
|
|
2
3
|
import { FormApi } from '../formApi';
|
|
3
4
|
import { TtFormProps } from '../types';
|
|
4
|
-
import {
|
|
5
|
+
import { GroupFormApiOptions, GroupFormSchema, GroupFormState, UseGroupFormNavAnchorProps } from './types';
|
|
5
6
|
import { InsertPosition } from './utils';
|
|
6
7
|
/**
|
|
7
8
|
* @description 分组表单 API 类,继承 {@link FormApi},封装分组场景下的校验、导航错误计数、
|
|
8
9
|
*/
|
|
9
10
|
export declare class GroupFormApi extends FormApi {
|
|
10
11
|
/** 是否启用虚拟化(IntersectionObserver 懒渲染) */
|
|
11
|
-
readonly
|
|
12
|
-
/**
|
|
13
|
-
readonly
|
|
14
|
-
/**
|
|
15
|
-
readonly
|
|
12
|
+
readonly virtual: boolean;
|
|
13
|
+
/** 构造时的导航锚点默认配置,作为 store 未设置时的 fallback */
|
|
14
|
+
private readonly _defaultNavAnchorProps;
|
|
15
|
+
/** 校验失败时是否自动滚动到第一个有错误的分组,默认 true */
|
|
16
|
+
private readonly _scrollToFirstError;
|
|
16
17
|
/** 滚动容器高度 */
|
|
17
|
-
readonly
|
|
18
|
+
private readonly _containerHeight;
|
|
18
19
|
/** IntersectionObserver rootMargin */
|
|
19
|
-
readonly
|
|
20
|
+
private readonly _rootMargin;
|
|
20
21
|
/** 预估每个表单项高度(px) */
|
|
21
|
-
readonly
|
|
22
|
-
/**
|
|
23
|
-
readonly
|
|
22
|
+
private readonly _estimateFieldHeight;
|
|
23
|
+
/** 滚动到分组时的顶部偏移量(px),补偿固定元素遮挡 */
|
|
24
|
+
private readonly _scrollOffset;
|
|
24
25
|
/** 各分组折叠状态(key → 是否折叠) */
|
|
25
26
|
readonly collapseStates: Record<string, boolean>;
|
|
27
|
+
/** 当前被 ifShow 隐藏的分组 key 集合 */
|
|
28
|
+
readonly hiddenGroupKeys: Set<string>;
|
|
26
29
|
/** 导航各分组的错误数量,validate 后自动更新 */
|
|
27
30
|
readonly navErrorCounts: Record<string, number>;
|
|
28
31
|
/** 共享错误缓存,validate 写入 → LazyFormField 挂载时读取恢复 */
|
|
29
32
|
readonly errorCacheMap: Map<string, string>;
|
|
30
33
|
/** 重置信号,递增时通知所有 LazyFormField 清空 cachedError */
|
|
31
|
-
readonly resetSignal:
|
|
34
|
+
readonly resetSignal: Ref<number, number>;
|
|
32
35
|
/** 初始传入的分组 schema(用于 fallback) */
|
|
33
36
|
private readonly _initialGroupSchema;
|
|
34
37
|
/** 初始展平后的 flatSchema(用于 fallback) */
|
|
35
38
|
private readonly _initialFlatSchema;
|
|
36
39
|
/** 各分组 key → 其直属字段名(不含子分组的字段) */
|
|
37
40
|
private _groupFieldMap;
|
|
41
|
+
/** 字段名 → 所属分组 key 的反向映射,用于快速判断字段是否属于隐藏分组 */
|
|
42
|
+
private _fieldToGroupKey;
|
|
43
|
+
/** 子分组 key → 父分组 key 的映射,用于递归向上查找祖先分组是否被隐藏 */
|
|
44
|
+
private _groupParentMap;
|
|
38
45
|
/** 是否已执行过 validate,用于控制导航栏错误同步是否需要重新校验未挂载字段 */
|
|
39
46
|
private _hasValidated;
|
|
40
47
|
/** VirtualGroupForm 组件实例引用,由 useGroupForm 的 h() 渲染时赋值 */
|
|
41
|
-
groupFormRef:
|
|
48
|
+
groupFormRef: Ref<{
|
|
42
49
|
scrollToGroup?: ((key: string) => void) | undefined;
|
|
43
50
|
} | null, {
|
|
44
51
|
scrollToGroup?: (key: string) => void;
|
|
45
52
|
} | {
|
|
46
53
|
scrollToGroup?: ((key: string) => void) | undefined;
|
|
47
54
|
} | null>;
|
|
55
|
+
/**
|
|
56
|
+
* @description 响应式读取 store 状态,由 useGroupForm 在运行时注入实现
|
|
57
|
+
* @param {Function} [selector] - 可选的状态选择器
|
|
58
|
+
* @returns {Readonly<Ref<T>>} 响应式状态引用
|
|
59
|
+
*/
|
|
60
|
+
useStore: <T = GroupFormState>(selector?: (state: GroupFormState) => T) => Readonly<Ref<T>>;
|
|
48
61
|
/**
|
|
49
62
|
* @param {TtFormProps} formProps - 底层表单配置(已展平的 schema、layout 等)
|
|
50
63
|
* @param {GroupFormApiOptions} groupOptions - 分组场景专属配置
|
|
51
64
|
*/
|
|
52
65
|
constructor(formProps: TtFormProps, groupOptions: GroupFormApiOptions);
|
|
66
|
+
/**
|
|
67
|
+
* @description 从 store 响应式读取 navAnchorProps,支持通过 setState({ navAnchorProps }) 动态修改
|
|
68
|
+
* @returns {Required<Pick<UseGroupFormNavAnchorProps, "show">> & UseGroupFormNavAnchorProps} 导航锚点配置
|
|
69
|
+
*/
|
|
70
|
+
get navAnchorProps(): Required<Pick<UseGroupFormNavAnchorProps, "show">> & UseGroupFormNavAnchorProps;
|
|
71
|
+
/**
|
|
72
|
+
* @description 覆盖基类 setState,扩展支持 GroupFormExtraState 中的字段(navAnchorProps、groupSchema 等)
|
|
73
|
+
* @param {Partial<GroupFormState> | ((prev: GroupFormState) => Partial<GroupFormState>)} stateOrFn - 新状态或更新函数
|
|
74
|
+
*/
|
|
75
|
+
setState(stateOrFn: ((prev: GroupFormState) => Partial<GroupFormState>) | Partial<GroupFormState>): void;
|
|
53
76
|
/**
|
|
54
77
|
* @description 分组表单以 `groupSchema` 展平结果为字段全集。仅依赖 store 中的 `schema` 时,若与 `groupSchema` 不同步(例如外部只 `setState` 了 `groupSchema`、或合并顺序导致 `schema` 滞后),`setValues` 默认过滤会误删合法字段;此处优先按 `groupSchema` 展平生成白名单。
|
|
55
78
|
* @returns {string[]} 允许 `setValues` 写入的 fieldName 列表
|
|
@@ -63,7 +86,7 @@ export declare class GroupFormApi extends FormApi {
|
|
|
63
86
|
/**
|
|
64
87
|
* @description 校验表单(含未挂载的虚拟字段),支持通过第二个参数控制是否滚动到第一个错误分组
|
|
65
88
|
* @param {Partial<ValidationOptions>} [opts] - 原始 validate 选项
|
|
66
|
-
* @param {boolean} [scrollToError] - 是否滚动到第一个错误分组,不传时使用全局配置
|
|
89
|
+
* @param {boolean} [scrollToError] - 是否滚动到第一个错误分组,不传时使用全局配置 scrollToFirstError
|
|
67
90
|
* @returns {Promise<{valid: boolean; errors: Record<string, string>; results?: any}>} 校验结果
|
|
68
91
|
* @example
|
|
69
92
|
* await formApi.validate();
|
|
@@ -104,6 +127,18 @@ export declare class GroupFormApi extends FormApi {
|
|
|
104
127
|
* @param {string} key - 分组 key
|
|
105
128
|
*/
|
|
106
129
|
toggleCollapse(key: string): void;
|
|
130
|
+
/**
|
|
131
|
+
* @description 设置分组的可见性状态,由 GroupSection 组件在 ifShow 求值后调用
|
|
132
|
+
* @param {string} key - 分组 key
|
|
133
|
+
* @param {boolean} visible - 是否可见
|
|
134
|
+
*/
|
|
135
|
+
setGroupVisible(key: string, visible: boolean): void;
|
|
136
|
+
/**
|
|
137
|
+
* @description 判断字段是否属于被 ifShow 隐藏的分组(含递归祖先分组)
|
|
138
|
+
* @param {string} fieldName - 字段名
|
|
139
|
+
* @returns {boolean} 是否属于隐藏分组
|
|
140
|
+
*/
|
|
141
|
+
private _isFieldInHiddenGroup;
|
|
107
142
|
/**
|
|
108
143
|
* @description 按当前 store 中的 groupSchema(若无则用初始 schema)重置折叠状态:
|
|
109
144
|
* 先清空已有 key,再按 `defaultCollapsed` 写入默认值。
|
|
@@ -111,24 +146,23 @@ export declare class GroupFormApi extends FormApi {
|
|
|
111
146
|
*/
|
|
112
147
|
resetCollapseStatesToDefault(): void;
|
|
113
148
|
/**
|
|
114
|
-
* @description
|
|
115
|
-
* @param {GroupFormSchema[]} newSchema - 新的分组 schema
|
|
149
|
+
* @description 全量应用分组 schema 树到 store(扁平 schema、groupSchema、分组字段映射、折叠默认值)。
|
|
116
150
|
*/
|
|
117
|
-
|
|
151
|
+
_applyGroupSchema(newSchema: GroupFormSchema[]): void;
|
|
118
152
|
/**
|
|
119
|
-
* @description
|
|
120
|
-
*
|
|
121
|
-
*
|
|
153
|
+
* @description 增量插入字段到分组 schema 树中,无需全量重建 schema。
|
|
154
|
+
* 通过 position 的 before/after 在整棵树中递归查找锚点并就地插入;
|
|
155
|
+
* 不传 position 时追加到顶层 schema 末尾。
|
|
122
156
|
* @param {GroupFormSchema[]} fields - 要插入的字段或子结构(字段、slot、row 等均可)
|
|
123
|
-
* @param {InsertPosition} [position] -
|
|
157
|
+
* @param {InsertPosition} [position] - 插入位置,省略则追加到顶层末尾
|
|
124
158
|
* @example
|
|
125
|
-
* formApi.appendFields(
|
|
159
|
+
* formApi.appendFields([newField], { before: 'phone' });
|
|
126
160
|
* @example
|
|
127
|
-
* formApi.appendFields(
|
|
161
|
+
* formApi.appendFields([newField], { after: 'email' });
|
|
128
162
|
* @example
|
|
129
|
-
* formApi.appendFields(
|
|
163
|
+
* formApi.appendFields([newGroup]);
|
|
130
164
|
*/
|
|
131
|
-
appendFields(
|
|
165
|
+
appendFields(fields: GroupFormSchema[], position?: InsertPosition): void;
|
|
132
166
|
/**
|
|
133
167
|
* @description 按标识从 groupSchema 树中移除节点,无需全量重建 schema。
|
|
134
168
|
* 支持匹配 fieldName(普通字段 / row 内字段)和 slot 的字符串 content
|
|
@@ -141,7 +175,7 @@ export declare class GroupFormApi extends FormApi {
|
|
|
141
175
|
* @description 合并 vee-validate 实时 errors 与虚拟列表未挂载字段的 errorCacheMap,用于导航徽标与输入联动
|
|
142
176
|
* @returns {Record<string, string>} 合并后的错误映射
|
|
143
177
|
*/
|
|
144
|
-
|
|
178
|
+
private _mergeErrorsForNav;
|
|
145
179
|
/**
|
|
146
180
|
* @description 同步导航错误计数。
|
|
147
181
|
* 当开启虚拟列表且已执行过 validate 时,会重新对未挂载字段做可见性检查和校验,
|
|
@@ -151,12 +185,18 @@ export declare class GroupFormApi extends FormApi {
|
|
|
151
185
|
/**
|
|
152
186
|
* @description 清空导航各分组的错误计数
|
|
153
187
|
*/
|
|
154
|
-
|
|
188
|
+
private _clearNavErrorCounts;
|
|
155
189
|
/**
|
|
156
190
|
* @description 校验失败后展开包含错误的分组,并滚动到该分组标题
|
|
157
191
|
* @param {Record<string, string>} errors - 合并后的所有错误
|
|
158
192
|
*/
|
|
159
|
-
|
|
193
|
+
private _scrollToFirstErrorGroup;
|
|
194
|
+
/**
|
|
195
|
+
* @description 从校验结果中剔除属于隐藏分组的字段错误,并重新判定 valid 状态
|
|
196
|
+
* @param {object} result - 校验结果
|
|
197
|
+
* @returns {object} 过滤后的校验结果
|
|
198
|
+
*/
|
|
199
|
+
private _stripHiddenGroupErrors;
|
|
160
200
|
/**
|
|
161
201
|
* @description 对单个字段值执行 rules 校验(纯数据,不挂载组件)。
|
|
162
202
|
* 支持字符串规则("required" / "selectRequired")和 Zod schema。
|
|
@@ -35,3 +35,8 @@ export interface RenderScheduler {
|
|
|
35
35
|
*/
|
|
36
36
|
export declare function createRenderScheduler(batchSize?: number): RenderScheduler;
|
|
37
37
|
export declare const RENDER_SCHEDULER_KEY: InjectionKey<RenderScheduler>;
|
|
38
|
+
/**
|
|
39
|
+
* 分组可见性回调注入 key,由 GroupForm.vue provide,GroupSection.vue inject。
|
|
40
|
+
* 当分组的 ifShow 求值结果变化时,GroupSection 调用此回调通知 API 层同步隐藏状态。
|
|
41
|
+
*/
|
|
42
|
+
export declare const GROUP_VISIBILITY_CALLBACK_KEY: InjectionKey<(key: string, visible: boolean) => void>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FormActions, FormCommonConfig, FormLayout, FormSchema, FormSlotSchema, TtFormProps, WrapperClassType } from '../types';
|
|
2
2
|
import { TtNavAnchorProps } from '../../../tt-nav-anchor';
|
|
3
|
+
import { GroupFormApi } from './groupFormApi';
|
|
3
4
|
export type CollapsibleType = boolean | ((values: Record<string, any>, actions: FormActions) => boolean | PromiseLike<boolean>);
|
|
4
5
|
/** 控制 group / row / slot 是否显示,支持布尔值或函数(接收表单值与 formActions,可返回 Promise) */
|
|
5
6
|
export type IfShowConditionType = boolean | ((values: Record<string, any>, actions: FormActions) => boolean | PromiseLike<boolean>);
|
|
@@ -72,11 +73,15 @@ export interface UseGroupFormOptions extends Omit<TtFormProps, "schema" | "showD
|
|
|
72
73
|
* `badgeCounts` 由 formApi 维护,无需在此传入。
|
|
73
74
|
*/
|
|
74
75
|
navAnchorProps?: UseGroupFormNavAnchorProps;
|
|
75
|
-
/**
|
|
76
|
-
|
|
77
|
-
/** 校验失败时是否自动滚动到第一个有错误的分组,默认 true */
|
|
78
|
-
scrollToFirstError?: boolean;
|
|
76
|
+
/** 滚动到分组时的顶部偏移量(px),用于补偿页面顶部固定元素(如 header)的遮挡,默认 0 */
|
|
77
|
+
scrollOffset?: number;
|
|
79
78
|
}
|
|
79
|
+
export type GroupFormExtraState = Partial<Pick<UseGroupFormOptions, "virtual" | "navAnchorProps" | "containerHeight" | "rootMargin" | "estimateFieldHeight" | "scrollOffset">> & {
|
|
80
|
+
/** 分组 schema 树形结构 */
|
|
81
|
+
groupSchema?: GroupFormSchema[];
|
|
82
|
+
};
|
|
83
|
+
/** 分组表单完整 store 状态类型 */
|
|
84
|
+
export type GroupFormState = TtFormProps & GroupFormExtraState;
|
|
80
85
|
/** LazyFormField 组件 props */
|
|
81
86
|
export interface LazyFormFieldProps {
|
|
82
87
|
/** 传给 FormField 的完整 props(通过 v-bind 透传) */
|
|
@@ -97,13 +102,13 @@ export interface LazyFormFieldProps {
|
|
|
97
102
|
skeletonAnimated?: boolean;
|
|
98
103
|
}
|
|
99
104
|
/**
|
|
100
|
-
* 分组表单组件 props
|
|
101
|
-
*
|
|
105
|
+
* 分组表单组件 props:`formApi` 为必传数据入口,其余字段均可在模板侧覆盖(优先级:模板 props > store)。
|
|
106
|
+
* 类型复用 UseGroupFormOptions 中的同名字段。
|
|
102
107
|
*/
|
|
103
|
-
export
|
|
108
|
+
export type GroupFormSectionProps = Partial<Pick<UseGroupFormOptions, "virtual" | "scrollToFirstError" | "containerHeight" | "rootMargin" | "estimateFieldHeight">> & {
|
|
104
109
|
/** 表单 API(必传,所有内部数据的入口) */
|
|
105
|
-
formApi:
|
|
106
|
-
/** 模板侧覆盖:导航锚点配置(与
|
|
110
|
+
formApi: GroupFormApi;
|
|
111
|
+
/** 模板侧覆盖:导航锚点配置(与 store.navAnchorProps 合并,模板优先) */
|
|
107
112
|
navAnchorProps?: GroupFormNavAnchorProps;
|
|
108
113
|
/** 模板侧覆盖:布局方向 */
|
|
109
114
|
layout?: FormLayout;
|
|
@@ -111,7 +116,7 @@ export interface GroupFormSectionProps {
|
|
|
111
116
|
compact?: boolean;
|
|
112
117
|
/** 模板侧覆盖:通用配置(与 store.commonConfig 合并) */
|
|
113
118
|
commonConfig?: FormCommonConfig;
|
|
114
|
-
}
|
|
119
|
+
};
|
|
115
120
|
/** GroupSection 递归组件 props */
|
|
116
121
|
export interface GroupSectionProps {
|
|
117
122
|
/** 当前节点的 schema(分组 / 行容器 / 字段) */
|
|
@@ -132,39 +137,17 @@ export interface GroupSectionProps {
|
|
|
132
137
|
virtual?: boolean;
|
|
133
138
|
/** 虚拟化时滚动容器引用 */
|
|
134
139
|
scrollElement?: Element | null;
|
|
135
|
-
/**
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
|
|
140
|
+
/** IntersectionObserver rootMargin,控制提前渲染的距离 */
|
|
141
|
+
rootMargin?: string;
|
|
142
|
+
/** 预估每个表单项高度(px),用于占位 */
|
|
143
|
+
estimateFieldHeight?: number;
|
|
139
144
|
}
|
|
140
|
-
export type AutoScrollPosition = "top" | "bottom";
|
|
141
145
|
/**
|
|
142
|
-
* @description GroupFormApi
|
|
143
|
-
*
|
|
144
|
-
* @property {boolean} [enableVirtual] - 是否启用虚拟化(IntersectionObserver 懒渲染),默认 true
|
|
145
|
-
* @property {UseGroupFormNavAnchorProps} [navAnchorProps] - 导航锚点配置(含 show、title 等),默认 `{ show: true }`
|
|
146
|
-
* @property {boolean} [enableScrollToFirstError] - 校验失败时是否自动滚动到第一个有错误的分组,默认 true
|
|
147
|
-
* @property {number | string} [containerHeight] - 滚动容器高度,默认 '100%'
|
|
148
|
-
* @property {string} [rootMargin] - IntersectionObserver rootMargin,默认 '400px 0px'
|
|
149
|
-
* @property {number} [estimateFieldHeight] - 预估每个表单项高度(px),默认 52
|
|
150
|
-
* @property {AutoScrollPosition} [autoScrollToGroup] - 初始化后自动滚动到的分组位置,默认 'top'
|
|
146
|
+
* @description GroupFormApi 构造函数的分组配置选项,复用 UseGroupFormOptions 中同名字段的类型定义,
|
|
147
|
+
* 额外增加 `groupSchema`(由 useGroupForm 从 `schema` 转换而来)。
|
|
151
148
|
*/
|
|
152
|
-
export
|
|
153
|
-
/** 分组 schema
|
|
149
|
+
export type GroupFormApiOptions = Pick<UseGroupFormOptions, "virtual" | "navAnchorProps" | "scrollToFirstError" | "containerHeight" | "rootMargin" | "estimateFieldHeight" | "scrollOffset"> & {
|
|
150
|
+
/** 分组 schema 树形结构(由 useGroupForm 从 options.schema 传入) */
|
|
154
151
|
groupSchema: GroupFormSchema[];
|
|
155
|
-
|
|
156
|
-
enableVirtual?: boolean;
|
|
157
|
-
/** 导航锚点配置(含 show、title 等),默认 `{ show: true }`;`items`、`modelValue`、`badgeCounts` 由内部注入 */
|
|
158
|
-
navAnchorProps?: UseGroupFormNavAnchorProps;
|
|
159
|
-
/** 校验失败时是否自动滚动到第一个有错误的分组,默认 true */
|
|
160
|
-
enableScrollToFirstError?: boolean;
|
|
161
|
-
/** 滚动容器高度,默认 '100%' */
|
|
162
|
-
containerHeight?: number | string;
|
|
163
|
-
/** IntersectionObserver rootMargin,控制提前渲染的距离,默认 '400px 0px' */
|
|
164
|
-
rootMargin?: string;
|
|
165
|
-
/** 预估每个表单项高度(px),用于占位,默认 52 */
|
|
166
|
-
estimateFieldHeight?: number;
|
|
167
|
-
/** 初始化后自动滚动到的分组位置,默认 'top' */
|
|
168
|
-
autoScrollToGroup?: AutoScrollPosition;
|
|
169
|
-
}
|
|
152
|
+
};
|
|
170
153
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DefineComponent } from 'vue';
|
|
2
|
-
import {
|
|
2
|
+
import { GroupFormApi } from './groupFormApi';
|
|
3
3
|
import { UseGroupFormOptions } from './types';
|
|
4
4
|
/**
|
|
5
5
|
* @description 返回可渲染的包装组件、扩展后的表单 API,以及分组折叠状态对象。
|
|
6
6
|
*/
|
|
7
|
-
export declare function useGroupForm(options: UseGroupFormOptions): readonly [DefineComponent<Partial<Omit<UseGroupFormOptions, "schema">>>,
|
|
7
|
+
export declare function useGroupForm(options: UseGroupFormOptions): readonly [DefineComponent<Partial<Omit<UseGroupFormOptions, "schema">>>, GroupFormApi];
|
|
@@ -69,6 +69,20 @@ export interface InsertPosition {
|
|
|
69
69
|
* insertFieldsInGroup(schema, 'basic', [newField], { after: 'v_age' });
|
|
70
70
|
*/
|
|
71
71
|
export declare function insertFieldsInGroup(schemas: GroupFormSchema[], groupKey: string, fields: GroupFormSchema[], position?: InsertPosition): boolean;
|
|
72
|
+
/**
|
|
73
|
+
* @description 在整棵 groupSchema 树中递归查找 position 锚点并就地插入字段,不需要指定 groupKey。
|
|
74
|
+
* 依次在每层 children 中查找匹配,找到后插入并返回 true;未找到则继续递归子分组。
|
|
75
|
+
* 不传 position 时不执行任何操作(由调用方处理追加到末尾的逻辑)。
|
|
76
|
+
* @param {GroupFormSchema[]} schemas - 分组 schema 树(会被原地修改)
|
|
77
|
+
* @param {GroupFormSchema[]} fields - 要插入的字段
|
|
78
|
+
* @param {InsertPosition} position - 插入位置
|
|
79
|
+
* @returns {boolean} 是否找到锚点并完成插入
|
|
80
|
+
* @example
|
|
81
|
+
* insertFieldsByPosition(schema, [newField], { before: 'phone' });
|
|
82
|
+
* @example
|
|
83
|
+
* insertFieldsByPosition(schema, [newField], { after: 'v_email' });
|
|
84
|
+
*/
|
|
85
|
+
export declare function insertFieldsByPosition(schemas: GroupFormSchema[], fields: GroupFormSchema[], position: InsertPosition): boolean;
|
|
72
86
|
/**
|
|
73
87
|
* 从 groupSchema 树中递归移除指定 fieldName 或 slot content 的节点
|
|
74
88
|
* @param {GroupFormSchema[]} schemas - 分组 schema 树(会被原地修改)
|
|
@@ -388,7 +388,12 @@ export interface TtFormProps<T extends BaseFormComponentType = BaseFormComponent
|
|
|
388
388
|
*/
|
|
389
389
|
submitOnEnter?: boolean;
|
|
390
390
|
}
|
|
391
|
-
export type ExtendedFormApi = Omit<FormApi, "getValues" | "validate"> & {
|
|
391
|
+
export type ExtendedFormApi = Omit<FormApi, "getValues" | "validate" | "setState"> & {
|
|
392
|
+
/**
|
|
393
|
+
* @description 设置表单状态,支持扩展字段(如 navAnchorProps、groupSchema 等)
|
|
394
|
+
* @param {Partial<TtFormProps & Record<string, any>> | ((prev: TtFormProps & Record<string, any>) => Partial<TtFormProps & Record<string, any>>)} stateOrFn - 新状态或更新函数
|
|
395
|
+
*/
|
|
396
|
+
setState: (stateOrFn: ((prev: TtFormProps & Record<string, any>) => Partial<TtFormProps & Record<string, any>>) | Partial<TtFormProps & Record<string, any>>) => void;
|
|
392
397
|
/**
|
|
393
398
|
* 校验表单,支持通过第二个参数控制是否滚动到第一个错误分组
|
|
394
399
|
* @param {any} [opts] - 原始 validate 选项
|
|
@@ -408,11 +413,6 @@ export type ExtendedFormApi = Omit<FormApi, "getValues" | "validate"> & {
|
|
|
408
413
|
useStore: <T = NoInfer<TtFormProps>>(selector?: (state: NoInfer<TtFormProps>) => T) => Readonly<Ref<T>>;
|
|
409
414
|
/** 滚动到指定分组(仅 useGroupForm 场景下可用) */
|
|
410
415
|
scrollToGroup?: (key: string) => void;
|
|
411
|
-
/**
|
|
412
|
-
* 动态更新分组 schema(同时更新 UI 渲染和底层字段注册),仅 useGroupForm 场景下可用
|
|
413
|
-
* @param {any[]} newSchema - 新的分组 schema(实际类型为 GroupFormSchema[],此处用 any[] 避免循环依赖)
|
|
414
|
-
*/
|
|
415
|
-
updateGroupSchema?: (newSchema: any[]) => void;
|
|
416
416
|
/**
|
|
417
417
|
* 在指定分组中增量插入字段,无需全量重建 schema
|
|
418
418
|
* @param {string} groupKey - 目标分组的 key
|
|
@@ -7,6 +7,8 @@ export declare const TtNavAnchor: import('../../../../utils/src').SFCWithInstall
|
|
|
7
7
|
}>, {
|
|
8
8
|
title: string;
|
|
9
9
|
top: number | string;
|
|
10
|
+
bottom: number | string;
|
|
11
|
+
left: number | string;
|
|
10
12
|
right: number | string;
|
|
11
13
|
modelValue: string;
|
|
12
14
|
position: "fixed" | "static" | "sticky";
|
|
@@ -8,6 +8,8 @@ declare const _default: import('vue').DefineComponent<TtNavAnchorProps, {}, {},
|
|
|
8
8
|
}>, {
|
|
9
9
|
title: string;
|
|
10
10
|
top: number | string;
|
|
11
|
+
bottom: number | string;
|
|
12
|
+
left: number | string;
|
|
11
13
|
right: number | string;
|
|
12
14
|
modelValue: string;
|
|
13
15
|
position: "fixed" | "static" | "sticky";
|