@schemx/vue 0.2.3 → 1.0.0-next.0
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/README.md +290 -229
- package/dist/analyze.html +1 -1
- package/dist/components/FormGroup/index.d.ts +3 -4
- package/dist/components/FormGroup/index.d.ts.map +1 -1
- package/dist/components/FormItem/index.d.ts +3 -4
- package/dist/components/FormItem/index.d.ts.map +1 -1
- package/dist/config/appConfig.d.ts +19 -0
- package/dist/config/appConfig.d.ts.map +1 -0
- package/dist/config/index.d.ts +2 -0
- package/dist/config/index.d.ts.map +1 -0
- package/dist/form.d.ts +11 -8
- package/dist/form.d.ts.map +1 -1
- package/dist/hocs/withRemoteOptions.d.ts +3 -29
- package/dist/hocs/withRemoteOptions.d.ts.map +1 -1
- package/dist/hooks/index.d.ts +2 -2
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/provideFieldContext.d.ts +1 -2
- package/dist/hooks/provideFormConfigContext.d.ts +24 -19
- package/dist/hooks/provideFormConfigContext.d.ts.map +1 -1
- package/dist/hooks/provideFormContext.d.ts +0 -1
- package/dist/hooks/useDictionary.d.ts +13 -8
- package/dist/hooks/useDictionary.d.ts.map +1 -1
- package/dist/hooks/useEffect.d.ts +0 -1
- package/dist/hooks/useField.d.ts +1 -2
- package/dist/hooks/useField.d.ts.map +1 -1
- package/dist/hooks/useForm.d.ts +2 -3
- package/dist/hooks/useForm.d.ts.map +1 -1
- package/dist/hooks/useStableRef.d.ts +2 -3
- package/dist/hooks/useStableRef.d.ts.map +1 -1
- package/dist/hooks/useViewSchemas.d.ts +16 -2
- package/dist/hooks/useViewSchemas.d.ts.map +1 -1
- package/dist/hooks/useWatch.d.ts +64 -13
- package/dist/hooks/useWatch.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +195 -82
- package/dist/index.mjs.map +1 -1
- package/dist/types/dictionary.d.ts +18 -18
- package/dist/types/dictionary.d.ts.map +1 -1
- package/dist/types/field.d.ts +20 -11
- package/dist/types/field.d.ts.map +1 -1
- package/dist/types/form.d.ts +41 -4
- package/dist/types/form.d.ts.map +1 -1
- package/dist/types/index.d.ts +15 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/utils/diff.d.ts +2 -2
- package/dist/utils/diff.d.ts.map +1 -1
- package/dist/utils/dynamic.d.ts +13 -14
- package/dist/utils/dynamic.d.ts.map +1 -1
- package/dist/utils/equal.d.ts.map +1 -1
- package/dist/utils/helpers.d.ts +5 -6
- package/dist/utils/helpers.d.ts.map +1 -1
- package/dist/utils/rendererProvider.d.ts +2 -3
- package/dist/utils/rendererProvider.d.ts.map +1 -1
- package/dist/utils/rulesProvider.d.ts +5 -6
- package/dist/utils/rulesProvider.d.ts.map +1 -1
- package/dist/utils/slot.d.ts.map +1 -1
- package/dist/utils/validation.d.ts +0 -1
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ import "@schemx/vue/style.css"
|
|
|
48
48
|
name: "nickname",
|
|
49
49
|
label: "昵称",
|
|
50
50
|
componentType: "input",
|
|
51
|
-
|
|
51
|
+
required: true,
|
|
52
52
|
placeholder: "请输入昵称",
|
|
53
53
|
},
|
|
54
54
|
]
|
|
@@ -59,7 +59,7 @@ import "@schemx/vue/style.css"
|
|
|
59
59
|
</template>
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
-
这里同时传入 `initialValues`
|
|
62
|
+
这里同时传入 `initialValues` 是为了在 `modelValue` 为空时提供初始值。非空的 `modelValue` 会优先作为内部表单的初始快照；之后外部替换 `modelValue` 也会同步到内部表单。详见下一节的受控行为说明。
|
|
63
63
|
|
|
64
64
|
## Schemx 组件
|
|
65
65
|
|
|
@@ -75,47 +75,49 @@ console.log(Schemx === schemxForm) // true
|
|
|
75
75
|
|
|
76
76
|
### Props
|
|
77
77
|
|
|
78
|
-
`Schemx` 的公开 Props
|
|
79
|
-
|
|
80
|
-
| Prop
|
|
81
|
-
|
|
|
82
|
-
| `schemas`
|
|
83
|
-
| `modelValue`
|
|
84
|
-
| `initialValues`
|
|
85
|
-
| `form`
|
|
86
|
-
| `rendererRegistry`
|
|
87
|
-
| `defaultRendererType`
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
78
|
+
`Schemx` 的公开 Props 类型为 Vue 层的 `SchemxFormProps<T>`，由 Core 表单选项和 Vue 专属 Props 组合而成。
|
|
79
|
+
|
|
80
|
+
| Prop | 类型 | 默认值 | 说明 |
|
|
81
|
+
| ------------------------ | ------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
82
|
+
| `schemas` | `SchemxField<T>[]` | `[]` | 表单 Schema。类型层要求传入，运行时缺省为空数组 |
|
|
83
|
+
| `modelValue` | `T` | `{}` | `v-model` 的输入端；非空值参与初始快照，后续替换会同步到内部表单，字段变化会通过 `update:modelValue` 输出 |
|
|
84
|
+
| `initialValues` | `T` | `{}` | 创建内部表单时的初始值，也是 `reset()` 的还原基准 |
|
|
85
|
+
| `form` | `SchemxInstance<T>` | `undefined` | 外部表单实例；传入后组件不再创建实例，但仍会提供 Vue 上下文并同步 `schemas`；组件级回调不会写入该实例，`v-model` 仍监听实例变化 |
|
|
86
|
+
| `rendererRegistry` | `RendererRegistry` | 全局 `rendererRegistry` | 当前表单使用的 Renderer Registry |
|
|
87
|
+
| `defaultRendererType` | `SchemxRendererKey` | `undefined` | 创建内部表单且未传 `rendererRegistry` 时的默认 Renderer 类型；Vue 全局 Registry 存在时由该 Registry 的 fallback 决定 |
|
|
88
|
+
| `validationRuleRegistry` | `ValidationRuleRegistry` | 全局 `validationRuleRegistry` | 当前表单使用的校验规则 Registry |
|
|
89
|
+
| `validatorAdapters` | `readonly ValidationAdapterOption[]` | `[]` | 当前表单使用的第三方校验 adapter；创建内部 Form 时参与配置合并并传递给 Core |
|
|
90
|
+
| `required` | `boolean` | `undefined` | 表单级必填默认值；字段自身配置优先，普通 `rules` 不会推导必填或显示星号 |
|
|
91
|
+
| `readonly` | `boolean` | `undefined` | 表单级只读默认值；字段自身配置优先 |
|
|
92
|
+
| `disabled` | `boolean` | `undefined` | 表单级禁用默认值；字段自身配置优先 |
|
|
93
|
+
| `visible` | `boolean` | `undefined` | 表单级可见性默认值；字段自身配置优先，均未配置时为 `true` |
|
|
94
|
+
| `labelIcon` | `string` | `undefined` | 表单级标签图标默认值；会进入字段 ViewSchema，具体是否渲染取决于适配组件 |
|
|
95
|
+
| `labelAlign` | `"left" \| "center" \| "right"` | `undefined` | 表单级标签对齐默认值；字段自身配置优先，均未配置时为 `"left"` |
|
|
96
|
+
| `labelPosition` | `"left" \| "top" \| "right"` | `undefined` | 表单级标签位置默认值；字段自身配置优先，均未配置时为 `"left"` |
|
|
97
|
+
| `labelWidth` | `string` | `undefined` | 表单级标签宽度默认值；字段自身配置优先，均未配置时为 `"auto"` |
|
|
98
|
+
| `contentAlign` | `"left" \| "center" \| "right"` | `undefined` | 表单级内容对齐默认值；用于解析 Renderer 的 `align`，字段自身配置优先 |
|
|
99
|
+
| `validationTrigger` | `ValidationTrigger \| ValidationTrigger[]` | `undefined` | 表单级校验触发方式默认值；字段自身配置优先，均未配置时为 `"blur"` |
|
|
100
|
+
| `colon` | `boolean` | `undefined` | 表单级标签冒号默认值；字段自身配置优先，均未配置时为 `true` |
|
|
101
|
+
| `onFinish` | `(values: Readonly<T>) => void \| Promise<void>` | `undefined` | `submit()` 校验通过后的回调 Prop |
|
|
102
|
+
| `onFinishFailed` | `(failure: ValidationFailure<T>) => void` | `undefined` | `submit()` 校验失败后的回调 Prop |
|
|
103
|
+
| `onValuesChange` | `(changedValues, latestSnapshot) => void` | `undefined` | 字段值变化后的回调 Prop |
|
|
104
|
+
| `onFieldsChange` | `(changedFields, allFields) => void` | `undefined` | 字段路径变化后的回调 Prop |
|
|
105
|
+
| `onRuleError` | `CreateValidatorOptions<T>["onRuleError"]` | `undefined` | 规则解析异常回调；内部创建实例时当前不会透传，需在外部 `form` 实例上配置 |
|
|
106
|
+
| `class` | `string` | `""` | 添加到根 `.schemx` 元素的类名 |
|
|
107
|
+
| `style` | `StyleValue` | `{}` | 绑定到根 `.schemx` 元素 |
|
|
108
|
+
|
|
109
|
+
上述 Schema 默认配置都会参与 core 的字段规范化，通常按字段配置 → 表单 Prop → core 固定默认值合并。Registry、默认 Renderer 和 `validatorAdapters` 则按表单显式配置 → 当前 App 安装配置 → Vue 模块级 Registry → Core 模块级配置 → Core 内置默认值解析。必填只能通过 `required: true` 或 `RequiredOptions` 表达；普通 `rules` 只负责执行校验，不会显示必填星号。传入 `form` 时，`initialValues`、Registry 和所有表单回调都由外部实例的创建者配置；组件不会用同名 Props 重建或包装外部实例。
|
|
110
|
+
|
|
111
|
+
当未显式传入 `rendererRegistry` 时，Vue `useForm()` 会使用全局 Registry；该 Registry 默认以 `input` 作为 fallback。因此若要让 `<Schemx :default-renderer-type="...">` 生效，应传入独立 Registry，或直接对 Vue 导出的全局 Registry 调用 `setFallback()`。传入外部 `form` 时，Renderer 配置由该实例决定。
|
|
110
112
|
|
|
111
113
|
### `v-model`、`initialValues` 与事件
|
|
112
114
|
|
|
113
|
-
`initialValues` 是内部 Store 的初始快照和 `reset()` 基准。`modelValue` 按 Vue
|
|
115
|
+
`initialValues` 是内部 Store 的初始快照和 `reset()` 基准。`modelValue` 按 Vue 约定作为输入和输出：
|
|
114
116
|
|
|
115
|
-
-
|
|
116
|
-
- 外部替换 `modelValue`
|
|
117
|
-
-
|
|
118
|
-
- 传入外部 `form`
|
|
117
|
+
- 创建内部实例时，非空 `modelValue` 会覆盖同名 `initialValues` 字段，作为初始快照。
|
|
118
|
+
- 外部替换 `modelValue` 后，组件会调用 `setFieldsValue()` 同步内部表单。
|
|
119
|
+
- 内部或外部 `form` 的字段变化都会发出 `update:modelValue`，值为最新表单快照；同步来自 `modelValue` 的变化不会重复发出该事件。
|
|
120
|
+
- 传入外部 `form` 时，组件级 `onFinish`、`onFinishFailed`、`onValuesChange` 和 `onFieldsChange` 不会重新配置该实例；这些回调应在创建外部实例时配置。
|
|
119
121
|
- `onFinish`、`onFinishFailed`、`onValuesChange` 和 `onFieldsChange` 是声明过的回调 Props，不在 `defineEmits` 的事件列表中。模板中的 `@finish` 等写法会按 Vue listener Prop 规则映射到这些 Props，但 TypeScript 用户更适合显式传回调。
|
|
120
122
|
|
|
121
123
|
内部表单模式还存在一个 `onFinish` 等待边界：组件传给 core 的包装函数会调用 `props.onFinish(values)`，但没有 `return` 或 `await` 其返回值。因此 `submit()` 只等待这层立即完成的包装 Promise，不等待业务 `onFinish` 返回的异步任务；该任务后续 reject 也不会沿 `submit()` 传播。业务回调若在返回 Promise 前同步抛错，包装函数会转为 rejected Promise，core 的 `submit()` 仍会收到该拒绝。传入外部 `form` 时组件不会安装这层包装，等待和错误传播完全取决于外部实例创建者配置的回调；core `createForm()` 本身会 `await` 直接传给它的 `onFinish`。
|
|
@@ -126,7 +128,7 @@ console.log(Schemx === schemxForm) // true
|
|
|
126
128
|
| ------------------- | ------------ | ------------------------------------ |
|
|
127
129
|
| `update:modelValue` | `(value: T)` | 内部表单的 `onValuesChange` 被调用后 |
|
|
128
130
|
|
|
129
|
-
|
|
131
|
+
如需程序化更新外部表单，可持有 `ref` 或外部 `form` 并显式调用 `setFieldsValue()`；普通 `v-model` 已负责值的双向同步。
|
|
130
132
|
|
|
131
133
|
### Slots
|
|
132
134
|
|
|
@@ -160,15 +162,15 @@ console.log(Schemx === schemxForm) // true
|
|
|
160
162
|
|
|
161
163
|
### 组件 ref 暴露实例
|
|
162
164
|
|
|
163
|
-
组件通过 `defineExpose` 暴露传入或内部创建的完整 `SchemxInstance<T>`。该接口当前共有
|
|
165
|
+
组件通过 `defineExpose` 暴露传入或内部创建的完整 `SchemxInstance<T>`。该接口当前共有 41 个成员：
|
|
164
166
|
|
|
165
167
|
| 分类 | 成员 |
|
|
166
168
|
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
167
169
|
| 值与快照（9） | `getFieldValue`、`getFieldsValue`、`setFieldValue`、`setFieldsValue`、`getFieldSnapshot`、`getFieldsSnapshot`、`getInitialValue`、`getInitialValues`、`setInitialValues` |
|
|
168
170
|
| touched 与 pending（6） | `isFieldTouched`、`setFieldTouched`、`getTouchedFields`、`setFieldPending`、`isFieldPending`、`getPendingFields` |
|
|
169
|
-
| 重置、校验与提交（
|
|
170
|
-
| 响应与 Schema（9） | `effect`、`batch`、`setSchemas`、`updateSchemas`、`updateFieldSchema`、`
|
|
171
|
-
| Registry（8） | `getRenderer`、`registerRenderer`、`hasRenderer`、`
|
|
171
|
+
| 重置、校验与提交（8） | `resetFields`、`reset`、`validateField`、`validate`、`getFieldErrors`、`setFieldErrors`、`clearFieldErrors`、`submit` |
|
|
172
|
+
| 响应与 Schema（9） | `effect`、`batch`、`setSchemas`、`updateSchemas`、`updateFieldSchema`、`updateSchemaConfig`、`getViewSchemas`、`subscribeViewSchemas`、`waitForDependencies` |
|
|
173
|
+
| Registry（8） | `getRenderer`、`registerRenderer`、`hasRenderer`、`getRule`、`registerRule`、`hasRule`、`setFieldRules`、`removeFieldRules` |
|
|
172
174
|
| 生命周期（1） | `destroy` |
|
|
173
175
|
|
|
174
176
|
```vue
|
|
@@ -215,9 +217,21 @@ import App from "./App.vue"
|
|
|
215
217
|
createApp(App).use(Schemx).mount("#app")
|
|
216
218
|
```
|
|
217
219
|
|
|
218
|
-
`app.use(Schemx)`
|
|
220
|
+
`app.use(Schemx)` 会注册全局组件名 `SchemxForm`，并将安装选项保存为当前 Vue App 的默认配置：
|
|
219
221
|
|
|
220
|
-
|
|
222
|
+
```ts
|
|
223
|
+
app.use(Schemx, {
|
|
224
|
+
schemaConfig: { showRequiredMark: false },
|
|
225
|
+
defaultRendererType: "input",
|
|
226
|
+
rendererRegistry,
|
|
227
|
+
validationRuleRegistry,
|
|
228
|
+
validatorAdapters: [adapter],
|
|
229
|
+
})
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
安装配置属于当前 Vue App；不同 App 可以使用不同的 Registry、字段默认值、默认 renderer 类型和校验 adapter，适用于多应用和 SSR 隔离场景。配置优先级为表单显式配置、当前 App 安装配置、Vue 包默认 Registry、Core 模块级配置、Core 内置默认值。`validatorAdapters` 按该顺序累积；同 ID adapter 需要通过 `{ adapter, override: true }` 显式覆盖。`app.use()` 不会调用 Core 的模块级 `configureSchemx()`；该 API 仍可作为 Vue 与直接 `createForm()` 的低优先级基线。可安装组件还挂载了静态属性 `Schemx.FormItem`；`FormGroup` 仅作为根入口命名导出，不是静态属性。
|
|
233
|
+
|
|
234
|
+
`SchemxFormProps` 和 Vue 层 `FieldInstance` 也会从 `@schemx/vue` 根入口导出；业务代码通常仍可直接从组件或 Hook 调用处推导类型，不需要依赖深层路径。
|
|
221
235
|
|
|
222
236
|
## Schema 写法
|
|
223
237
|
|
|
@@ -240,7 +254,7 @@ const schemas: SchemxField<Values>[] = [
|
|
|
240
254
|
initialValue: "",
|
|
241
255
|
placeholder: "请输入昵称",
|
|
242
256
|
required: true,
|
|
243
|
-
|
|
257
|
+
showRequiredMark: false,
|
|
244
258
|
validationTrigger: ["change", "blur"],
|
|
245
259
|
componentProps: {
|
|
246
260
|
align: "left",
|
|
@@ -251,32 +265,37 @@ const schemas: SchemxField<Values>[] = [
|
|
|
251
265
|
|
|
252
266
|
普通字段的真实字段如下：
|
|
253
267
|
|
|
254
|
-
| 字段 | 必填 | 说明
|
|
255
|
-
| -------------------------------------------------------- | ---- |
|
|
256
|
-
| `name` | 是 | 字段路径，支持字符串和路径数组
|
|
257
|
-
| `label` | 是 | 标签文本
|
|
258
|
-
| `componentType` | 是 | Registry 中的 Renderer key
|
|
259
|
-
| `dependencies` | 否 | 基于其他字段动态覆盖展示属性的结构化依赖配置
|
|
260
|
-
| `componentProps` | 否 | 透传给 Renderer 的专属 Props；框架注入项会覆盖同名值
|
|
261
|
-
| `placeholder` | 否 | 占位提示
|
|
262
|
-
| `required`、`readonly`、`disabled`、`visible` | 否 |
|
|
263
|
-
| `
|
|
264
|
-
| `
|
|
265
|
-
| `
|
|
266
|
-
| `
|
|
267
|
-
| `
|
|
268
|
-
| `
|
|
269
|
-
| `
|
|
270
|
-
| `
|
|
268
|
+
| 字段 | 必填 | 说明 |
|
|
269
|
+
| -------------------------------------------------------- | ---- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
270
|
+
| `name` | 是 | 字段路径，支持字符串和路径数组 |
|
|
271
|
+
| `label` | 是 | 标签文本 |
|
|
272
|
+
| `componentType` | 是 | Registry 中的 Renderer key |
|
|
273
|
+
| `dependencies` | 否 | 基于其他字段动态覆盖展示属性的结构化依赖配置 |
|
|
274
|
+
| `componentProps` | 否 | 透传给 Renderer 的专属 Props；框架注入项会覆盖同名值 |
|
|
275
|
+
| `placeholder` | 否 | 占位提示 |
|
|
276
|
+
| `required`、`readonly`、`disabled`、`visible` | 否 | 字段展示和交互状态；`required` 同时参与默认必填校验与星号默认展示 |
|
|
277
|
+
| `showRequiredMark` | 否 | 只控制 label 前星号：未设置时等同于 `Boolean(required)`；设为 `true` 可显示非必填字段星号，设为 `false` 可隐藏必填字段星号；禁用或只读时始终隐藏，且不会影响校验 |
|
|
278
|
+
| `initialValue` | 否 | 字段挂载时的初始值和 `reset()` 还原值 |
|
|
279
|
+
| `rules` | 否 | 单条或多条校验规则，支持 Standard Schema 与内置规则名 |
|
|
280
|
+
| `labelIcon`、`labelAlign`、`labelPosition`、`labelWidth` | 否 | 标签展示配置 |
|
|
281
|
+
| `contentAlign`、`colon` | 否 | 内容对齐和冒号配置 |
|
|
282
|
+
| `validationTrigger` | 否 | `change`、`blur` 等校验触发时机 |
|
|
283
|
+
| `onChange`、`onBlur` | 否 | 类型中存在的顶层回调；当前 Vue `FormItem` 不调用它们，Renderer 事件说明见后文 |
|
|
284
|
+
| `class`、`style` | 否 | Vue 通过声明合并增加，运行时分别应用到字段容器的 class 和内联 style，发布根声明会自动带入该 augmentation |
|
|
285
|
+
| `key` | 否 | 框架字段；业务方通常不要设置 |
|
|
286
|
+
|
|
287
|
+
`showRequiredMark` 是纯展示属性，不会改变 `canVerified`、校验触发时机或 `required` 规则。例如上例即使隐藏星号，`required: true` 仍会在 `validationTrigger` 指定的时机执行必填校验；反过来，仅设置 `showRequiredMark: true` 不会让字段变为必填。
|
|
271
288
|
|
|
272
289
|
### 分组
|
|
273
290
|
|
|
274
291
|
```ts
|
|
275
292
|
const group: SchemxField<Values> = {
|
|
276
|
-
|
|
293
|
+
key: "basic-info",
|
|
277
294
|
label: "基本信息",
|
|
295
|
+
readonly: false,
|
|
278
296
|
collapsible: true,
|
|
279
297
|
defaultCollapsed: false,
|
|
298
|
+
destroyOnCollapse: false,
|
|
280
299
|
children: [
|
|
281
300
|
{
|
|
282
301
|
name: "nickname",
|
|
@@ -287,14 +306,19 @@ const group: SchemxField<Values> = {
|
|
|
287
306
|
}
|
|
288
307
|
```
|
|
289
308
|
|
|
290
|
-
|
|
309
|
+
分组字段支持 `visible`、`readonly`、`disabled` 和容器 `dependencies`。状态会递归传递给嵌套 Group、Dependency 和普通字段。它不是普通字段，没有 `name`、`componentProps` 或字段值。
|
|
310
|
+
|
|
311
|
+
折叠支持受控 `collapsed`、非受控 `defaultCollapsed`、`onCollapsedChange` 和 `destroyOnCollapse`。`destroyOnCollapse=false` 时仅隐藏 Body 并保留后代 Renderer 实例；默认值 `true` 保持原有卸载行为。折叠只影响展示，不改变字段可见性或校验状态。
|
|
291
312
|
|
|
292
313
|
### 动态依赖子树
|
|
293
314
|
|
|
294
315
|
```ts
|
|
295
316
|
const dependency: SchemxField<Values> = {
|
|
296
|
-
componentType: "dependency",
|
|
297
317
|
to: ["nickname"],
|
|
318
|
+
dependencies: {
|
|
319
|
+
triggerFields: ["editable"],
|
|
320
|
+
readonly: (values) => !values.editable,
|
|
321
|
+
},
|
|
298
322
|
renderer: async (values, form, { abortSignal }) => {
|
|
299
323
|
if (!values.nickname || abortSignal.aborted) return []
|
|
300
324
|
|
|
@@ -309,7 +333,9 @@ const dependency: SchemxField<Values> = {
|
|
|
309
333
|
}
|
|
310
334
|
```
|
|
311
335
|
|
|
312
|
-
|
|
336
|
+
动态依赖节点还支持 `visible`、`readonly`、`disabled` 和容器 `dependencies`。`to` 与 `renderer` 负责动态子树结构，容器 `dependencies` 独立控制整棵子树的呈现状态。隐藏 Dependency 不会暂停 renderer，恢复可见后会展示最新子树。
|
|
337
|
+
|
|
338
|
+
`renderer` 可以同步或异步返回新的 `SchemxField<T>[]`；`context.abortSignal` 用于取消已经过期的异步依赖计算。该 `AbortSignal` 属于 Core 的 Dependency renderer，和后文 `useDictionary` 的请求行为不同。
|
|
313
339
|
|
|
314
340
|
## Dictionary
|
|
315
341
|
|
|
@@ -331,19 +357,19 @@ interface SchemxDictionary<T extends Values = Values, R = any> {
|
|
|
331
357
|
}
|
|
332
358
|
```
|
|
333
359
|
|
|
334
|
-
| 字段 | 默认值 | 真实行为
|
|
335
|
-
| ------------------- | ------------------- |
|
|
336
|
-
| `api` | 必填 | 接收加载开始时的完整表单快照和实例；支持同步或异步返回
|
|
337
|
-
| `formatter` | 直接使用 `api` 结果 | 在请求成功后转换结果；支持异步，返回值应为数组
|
|
338
|
-
| `dependsOn` | `undefined` | 通过 `useWatchFields` 监听这些字段；变化时执行依赖回调、可选重置和重新加载
|
|
339
|
-
| `shouldFetch` | 总是加载 | 每次加载前判断；返回 `false` 时跳过 `api`、清空 `list` 并结束加载状态
|
|
340
|
-
| `immediate` | `true` | 组件 `onMounted` 时是否自动调用一次 `loadDict()`；不影响依赖变化或手动刷新
|
|
360
|
+
| 字段 | 默认值 | 真实行为 |
|
|
361
|
+
| ------------------- | ------------------- | -------------------------------------------------------------------------------------------------- |
|
|
362
|
+
| `api` | 必填 | 接收加载开始时的完整表单快照和实例；支持同步或异步返回 |
|
|
363
|
+
| `formatter` | 直接使用 `api` 结果 | 在请求成功后转换结果；支持异步，返回值应为数组 |
|
|
364
|
+
| `dependsOn` | `undefined` | 通过 `useWatchFields` 监听这些字段；变化时执行依赖回调、可选重置和重新加载 |
|
|
365
|
+
| `shouldFetch` | 总是加载 | 每次加载前判断；返回 `false` 时跳过 `api`、清空 `list` 并结束加载状态 |
|
|
366
|
+
| `immediate` | `true` | 组件 `onMounted` 时是否自动调用一次 `loadDict()`；不影响依赖变化或手动刷新 |
|
|
341
367
|
| `resetOnDepsChange` | `false` | 依赖变化时，如果 `useDictionary` 收到目标字段路径，调用 `form.setFieldValue(fieldName, undefined)` |
|
|
342
|
-
| `retryCount` | `0` | 失败后的额外重试次数；总尝试次数为 `retryCount + 1`
|
|
343
|
-
| `retryInterval` | `1000` | 两次尝试之间等待的毫秒数
|
|
344
|
-
| `onError` | 无 | 最终失败后接收规范化的 `Error` 和表单实例
|
|
345
|
-
| `onSuccess` | 无 | `formatter` 完成、`list` 写入后接收最终数组和表单实例
|
|
346
|
-
| `onDepsChange` | 无 | 依赖变化后、`shouldFetch` 判断前调用
|
|
368
|
+
| `retryCount` | `0` | 失败后的额外重试次数；总尝试次数为 `retryCount + 1` |
|
|
369
|
+
| `retryInterval` | `1000` | 两次尝试之间等待的毫秒数 |
|
|
370
|
+
| `onError` | 无 | 最终失败后接收规范化的 `Error` 和表单实例 |
|
|
371
|
+
| `onSuccess` | 无 | `formatter` 完成、`list` 写入后接收最终数组和表单实例 |
|
|
372
|
+
| `onDepsChange` | 无 | 依赖变化后、`shouldFetch` 判断前调用 |
|
|
347
373
|
|
|
348
374
|
当前类型没有 `data`、`list` 或 `options` 形式的静态数组字段。同步 `api` 可以表达静态来源：
|
|
349
375
|
|
|
@@ -492,6 +518,8 @@ import InputRenderer from "./InputRenderer.vue"
|
|
|
492
518
|
rendererRegistry.register("input", markRaw(InputRenderer))
|
|
493
519
|
```
|
|
494
520
|
|
|
521
|
+
通过 `app.use(Schemx, options)` 提供的 Registry 只对当前 Vue App 生效，并优先于上面的 Vue 模块级 Registry；表单 Props 或 `useForm()` 传入独立 Registry 时优先级最高。
|
|
522
|
+
|
|
495
523
|
也可以使用根入口从 core 传递导出的 `createRendererRegistry` 创建表单独立 Registry，避免修改全局状态：
|
|
496
524
|
|
|
497
525
|
```vue
|
|
@@ -675,7 +703,7 @@ componentProps: {
|
|
|
675
703
|
| `useStableRef()` | 创建引用保持稳定的 `shallowRef` |
|
|
676
704
|
| `useViewSchemas()` | 把 `subscribeViewSchemas()` 桥接为 Vue `shallowRef` |
|
|
677
705
|
|
|
678
|
-
`useForm()` 只负责创建和销毁实例。如需让自定义组件树中的 `useField()`、`useDictionary()` 或 `FormItem` 找到实例，Provider 必须在 `setup()` 的同步调用栈中调用 `createFormContext(form)`；展示层还应调用 `createFormConfigContext(
|
|
706
|
+
`useForm()` 只负责创建和销毁实例。如需让自定义组件树中的 `useField()`、`useDictionary()` 或 `FormItem` 找到实例，Provider 必须在 `setup()` 的同步调用栈中调用 `createFormContext(form)`；展示层还应调用 `createFormConfigContext({ schemaConfig })`。直接使用 `<Schemx>` 时，这两种上下文已经由组件提供。
|
|
679
707
|
|
|
680
708
|
### 通用调用规则
|
|
681
709
|
|
|
@@ -689,7 +717,7 @@ function useForm<TValues extends Values = Values>(
|
|
|
689
717
|
): SchemxInstance<TValues>
|
|
690
718
|
```
|
|
691
719
|
|
|
692
|
-
源码中参数类型名为 `UseFormOptions<TValues>`，结构等同上面的 `CreateFormOptions`；`UseFormOptions` 未从根入口导出。`options` 可选，未传 Registry 时使用 Vue 全局 `rendererRegistry` 和 `
|
|
720
|
+
源码中参数类型名为 `UseFormOptions<TValues>`，结构等同上面的 `CreateFormOptions`；`UseFormOptions` 未从根入口导出。`options` 可选，未传 Registry 时使用 Vue 全局 `rendererRegistry` 和 `validationRuleRegistry`。函数同步返回 `SchemxInstance<TValues>`，不读取 Context，也**不会自动 `provide`**；当前 Vue effect scope 销毁时会调用 `form.destroy()`。非 Vue scope 场景应改用 Core `createForm()` 并自行销毁。
|
|
693
721
|
|
|
694
722
|
```ts
|
|
695
723
|
import { createFormContext, useForm } from "@schemx/vue"
|
|
@@ -719,12 +747,12 @@ function createFieldContext<TValues extends Values = Values>(
|
|
|
719
747
|
function useFieldContext(): FieldInstance<Values>
|
|
720
748
|
|
|
721
749
|
function createFormConfigContext<TValues extends Values = Values>(
|
|
722
|
-
props: FormContextProps
|
|
750
|
+
props: FormContextProps
|
|
723
751
|
): void
|
|
724
752
|
function useFormConfigContext(): FormContextProps
|
|
725
753
|
```
|
|
726
754
|
|
|
727
|
-
上面签名中的 `FieldInstance`
|
|
755
|
+
上面签名中的 `FieldInstance` 已从 `@schemx/vue` 根入口导出。`createFieldContext()` 当前只有 `TValues extends Values = Values`，**没有独立的 `TName` 泛型**；`field` 必须是 `useField()` 返回的 Vue 字段控制器，字段路径已由创建该返回值时的 `name` 捕获。调用方可以显式导入 `FieldInstance`，也可以依靠 `useField()` 推导参数。
|
|
728
756
|
|
|
729
757
|
| Provider 签名 | Reader 签名 | 职责、所有权与缺失行为 |
|
|
730
758
|
| ------------------------------------------------------------------ | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
@@ -747,9 +775,10 @@ const schemas: SchemxField<ProfileValues>[] = [
|
|
|
747
775
|
]
|
|
748
776
|
const form = useForm<ProfileValues>({ schemas })
|
|
749
777
|
const config: FormContextProps<ProfileValues> = {
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
778
|
+
schemaConfig: {
|
|
779
|
+
readonly: false,
|
|
780
|
+
validationTrigger: "blur",
|
|
781
|
+
},
|
|
753
782
|
}
|
|
754
783
|
|
|
755
784
|
createFormContext(form)
|
|
@@ -775,9 +804,9 @@ function useField<TValues extends Values = Values>(
|
|
|
775
804
|
): FieldInstance<TValues>
|
|
776
805
|
```
|
|
777
806
|
|
|
778
|
-
Hook 从 `useFormContext()` 取得表单，为 `name` 创建 Core 字段控制器，再用 Vue Ref 桥接状态。它保留 Core `SchemxFieldInstance` 的全部成员，并增加 `value: Ref<FieldValue<...> | undefined>`、`
|
|
807
|
+
Hook 从 `useFormContext()` 取得表单，为 `name` 创建 Core 字段控制器，再用 Vue Ref 桥接状态。它保留 Core `SchemxFieldInstance` 的全部成员，并增加 `value: Ref<FieldValue<...> | undefined>`、`errors: ComputedRef<readonly string[]>`、`dirty: ComputedRef<boolean>` 与 `pending: ComputedRef<boolean>`；`dirty` 实际读取 Core `isTouched()`。只有 `value` 可通过 `.value` 写入，其余三个 computed 状态只读。`getValue()` 被覆盖为读取 `value.value`。Core 方法的完整签名见 [Core 单字段控制器](../core#单字段控制器)。
|
|
779
808
|
|
|
780
|
-
`useField()` 的缓存第 1 层按 `form` 实例引用区分，第 2 层直接以传入的 `name` 作为 `Map` key。因此字符串路径按相同字符串值共享桥接订阅；数组 `NamePath` 只在复用同一数组引用时共享，内容相同但新建的数组会生成不同缓存条目。共享条目使用引用计数：组件卸载时计数减 1，归零后取消 effect 并移除缓存。`FieldInstance`
|
|
809
|
+
`useField()` 的缓存第 1 层按 `form` 实例引用区分，第 2 层直接以传入的 `name` 作为 `Map` key。因此字符串路径按相同字符串值共享桥接订阅；数组 `NamePath` 只在复用同一数组引用时共享，内容相同但新建的数组会生成不同缓存条目。共享条目使用引用计数：组件卸载时计数减 1，归零后取消 effect 并移除缓存。`FieldInstance` 可从 `@schemx/vue` 根入口导入；不需要依赖深层路径。
|
|
781
810
|
|
|
782
811
|
```ts
|
|
783
812
|
import { createFieldContext, useField } from "@schemx/vue"
|
|
@@ -787,14 +816,14 @@ const nickname = useField<ProfileValues>("nickname")
|
|
|
787
816
|
createFieldContext(nickname)
|
|
788
817
|
nickname.setValue("Schemx")
|
|
789
818
|
await nickname.validate()
|
|
790
|
-
console.log(nickname.value.value, nickname.
|
|
819
|
+
console.log(nickname.value.value, nickname.errors.value)
|
|
791
820
|
```
|
|
792
821
|
|
|
793
822
|
`createFieldContext(field)` 将这一返回值提供给后代并返回 `void`；`useFieldContext()` 无参数，返回最近祖先提供的同一控制器。它们不会替代表单 Context。
|
|
794
823
|
|
|
795
824
|
### `FormContextProps` 的当前边界
|
|
796
825
|
|
|
797
|
-
`FormContextProps<T>`
|
|
826
|
+
`FormContextProps<T>` 只包含嵌套的 `schemaConfig`，不包含 `schemas`、`initialValues`、`form`、回调、`class`、`style`、Registry 或 `defaultRendererType`。组件 Props 中的平铺 Schema 字段会在 `<Schemx>` 内部聚合为 `schemaConfig`，再分别传给 Form 实例和字段展示 Context。
|
|
798
827
|
|
|
799
828
|
### `useWatch`、`useWatchField`、`useWatchFields` 与 `useWatchAll`
|
|
800
829
|
|
|
@@ -946,7 +975,9 @@ console.log(viewSchemas.value)
|
|
|
946
975
|
| -------- | -------------------------- | --------------------------------------- |
|
|
947
976
|
| `schema` | `SchemxViewGroupSchema<T>` | 包含已解析 `children` 的分组 ViewSchema |
|
|
948
977
|
|
|
949
|
-
它会把收到的全部 Slots 原样传给子级 `FormItem`。`collapsible`
|
|
978
|
+
它会把收到的全部 Slots 原样传给子级 `FormItem`。`collapsible` 控制标题是否可点击和通过 Enter / Space 切换；`disabled` 状态禁止折叠交互，`readonly` 状态仍允许浏览和折叠。组件支持受控与非受控折叠；从受控切换为非受控时会延续最后一次受控值。`destroyOnCollapse` 控制子级是否卸载，ARIA 关联 ID 优先使用 Core RuntimeNode ID，直接挂载组件时回退到 Vue 实例 ID，避免规范化后相同 key 发生冲突。
|
|
979
|
+
|
|
980
|
+
`label` 为空时不渲染标题。Vue 源码的 `types/index.ts` 通过声明合并为分组 Schema 增加 `class` 和 `style`，发布声明入口会加载该增强；运行时将二者分别绑定到 `.schemx-group` 根元素。子级字段仍要求表单实例和展示配置上下文。
|
|
950
981
|
|
|
951
982
|
`FormItem` 和 `FormGroup` 是构建自定义 Vue adapter 或重排 ViewSchemas 时的底层组件。一般业务表单优先使用 `<Schemx>`；只有在需要自定义整体布局、分区或容器时才直接组合这两个组件。
|
|
952
983
|
|
|
@@ -954,17 +985,21 @@ console.log(viewSchemas.value)
|
|
|
954
985
|
|
|
955
986
|
Vue 包自有 2 个模块级单例：
|
|
956
987
|
|
|
957
|
-
| 导出
|
|
958
|
-
|
|
|
959
|
-
| `rendererRegistry`
|
|
960
|
-
| `
|
|
988
|
+
| 导出 | 真实类型 | 初始内容 | 与 `useForm()` 的关系 |
|
|
989
|
+
| ------------------------ | ------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------- |
|
|
990
|
+
| `rendererRegistry` | `RendererRegistry<SchemxRendererKey>` | 空 Registry，默认 renderer key 预设为 `"input"`；未注册 `input` 时仍无法取得组件。 | 未传 `options.rendererRegistry` 时使用该单例。 |
|
|
991
|
+
| `validationRuleRegistry` | `ValidationRuleRegistry` | 模块初始化时为空，只保存显式注册的命名规则；`required` 不会写入 Registry。 | 未传 `options.validationRuleRegistry` 时使用该单例。 |
|
|
961
992
|
|
|
962
|
-
Renderer Registry 包含 `register`、`registerAll`、`
|
|
993
|
+
Renderer Registry 包含 `register`、`registerAll`、`get`、`resolve`、`has`、`unregister`、`keys`、`setFallback`、`getFallback`、`clear` 和 `size`；ValidationRuleRegistry 包含 `register`、`registerAll`、`get`、`resolve`、`has`、`unregister`、`keys`、`clear` 和 `size`。完整签名见 Core 的 [命名规则 Registry](../core#命名规则-registry) 与 [Renderer Registry](../core#renderer-registry) 章节。
|
|
963
994
|
|
|
964
995
|
```ts
|
|
965
996
|
import { markRaw } from "vue"
|
|
966
997
|
|
|
967
|
-
import {
|
|
998
|
+
import {
|
|
999
|
+
rendererRegistry,
|
|
1000
|
+
validationRuleRegistry,
|
|
1001
|
+
type StandardSchemaV1,
|
|
1002
|
+
} from "@schemx/vue"
|
|
968
1003
|
|
|
969
1004
|
import InputRenderer from "./InputRenderer.vue"
|
|
970
1005
|
|
|
@@ -981,165 +1016,191 @@ const phoneRule: StandardSchemaV1<string> = {
|
|
|
981
1016
|
},
|
|
982
1017
|
},
|
|
983
1018
|
}
|
|
984
|
-
|
|
1019
|
+
validationRuleRegistry.register("phone", phoneRule)
|
|
985
1020
|
```
|
|
986
1021
|
|
|
987
1022
|
全局 Registry 由所有表单共享。表单独立 Registry 则由 Core 工厂新建，并通过 `useForm()` 选项或 `<Schemx>` Props 传入：
|
|
988
1023
|
|
|
989
1024
|
```ts
|
|
990
|
-
import {
|
|
1025
|
+
import {
|
|
1026
|
+
createRendererRegistry,
|
|
1027
|
+
createValidationRuleRegistry,
|
|
1028
|
+
useForm,
|
|
1029
|
+
} from "@schemx/vue"
|
|
991
1030
|
|
|
992
1031
|
const renderers = createRendererRegistry("input")
|
|
993
|
-
const validators =
|
|
994
|
-
const form = useForm({ rendererRegistry: renderers,
|
|
1032
|
+
const validators = createValidationRuleRegistry()
|
|
1033
|
+
const form = useForm({ rendererRegistry: renderers, validationRuleRegistry: validators })
|
|
995
1034
|
```
|
|
996
1035
|
|
|
997
|
-
`createRendererRegistry()` 和 `
|
|
1036
|
+
`createRendererRegistry()` 和 `createValidationRuleRegistry()` 是 Core 传递导出，不是 Vue 自有 API。独立 ValidationRuleRegistry 创建时为空，只有调用方显式注册的命名规则；必填由字段的 `required` 配置处理。
|
|
998
1037
|
|
|
999
1038
|
## 类型参考
|
|
1000
1039
|
|
|
1001
|
-
Vue
|
|
1040
|
+
Vue 根入口自有以下公开类型：
|
|
1002
1041
|
|
|
1003
1042
|
| 类型 | 定义与用途 |
|
|
1004
1043
|
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
|
1005
|
-
| `FormContextProps
|
|
1044
|
+
| `FormContextProps` | 表单展示 Context 类型。当前类型与 `<Schemx>` 运行时 omit 的差异见 [Composition API](#formcontextprops-的当前边界)。 |
|
|
1006
1045
|
| `SchemxDictionary<TValues, R>` | 函数式选项源配置；`R` 从 `api` 传递到 `formatter`。见 [Dictionary](#dictionary)。 |
|
|
1007
|
-
| `SchemxInstallOptions` |
|
|
1046
|
+
| `SchemxInstallOptions` | 等同于 Core 的 `SchemxConfig`。`app.use(Schemx, options)` 将其保存为当前 Vue App 的默认配置。 |
|
|
1008
1047
|
| `SchemxWithDictionary<A, TValues>` | `A & { dict?: SchemxDictionary<TValues> }`，只增加可选 `dict`。见 [WithRemoteOptions](#withremoteoptions)。 |
|
|
1009
1048
|
| `UseDictionaryReturn` | `{ list, loading, error, loadDict, refresh, mutate }`，各成员类型见 [`useDictionary`](#usedictionary)。 |
|
|
1049
|
+
| `SchemxFormProps<TValues>` | `Schemx` 组件 Props 类型，由 Core 表单选项和 Vue 专属 `modelValue`、`form`、`class`、`style` 等属性组合而成。 |
|
|
1050
|
+
| `FieldInstance<TValues>` | Vue Ref / Computed 桥接后的字段控制器类型，由 `useField()` 返回。 |
|
|
1010
1051
|
|
|
1011
|
-
|
|
1052
|
+
除上述类型外，不要从 `@schemx/vue/src/*` 或 `@schemx/vue/dist/*` 深层导入。
|
|
1012
1053
|
|
|
1013
1054
|
## Core API
|
|
1014
1055
|
|
|
1015
|
-
`@schemx/vue` 通过 `export * from "@schemx/core"`
|
|
1056
|
+
`@schemx/vue` 通过 `export * from "@schemx/core"` 传递 Core 根入口的公开导出。它们仍是 Core API，不是 Vue 自有 Composition API；具体名称与签名以 [Core README](../core) 和包根入口为准。
|
|
1016
1057
|
|
|
1017
1058
|
## 完整导出清单
|
|
1018
1059
|
|
|
1019
|
-
|
|
1060
|
+
根入口包含默认表单组件、Vue 适配层 API，以及 Core 根入口的传递导出。这里不固定列出导出总数，避免新增公开 API 后文档中的统计数字失效。
|
|
1020
1061
|
|
|
1021
1062
|
### Vue 自有导出
|
|
1022
1063
|
|
|
1023
|
-
| 分类 | 导出
|
|
1024
|
-
| --------------- |
|
|
1025
|
-
| 表单组件 | `schemxForm`
|
|
1026
|
-
| 组件 | `FormItem`
|
|
1027
|
-
| 组件 | `FormGroup`
|
|
1028
|
-
| HOC | `WithRemoteOptions`
|
|
1029
|
-
| Registry | `rendererRegistry`
|
|
1030
|
-
| Registry | `
|
|
1031
|
-
| Hook | `useForm`
|
|
1032
|
-
| Context | `createFormContext`
|
|
1033
|
-
| Context | `useFormContext`
|
|
1034
|
-
| Hook | `useField`
|
|
1035
|
-
| Context | `createFieldContext`
|
|
1036
|
-
| Context | `useFieldContext`
|
|
1037
|
-
| Context | `createFormConfigContext`
|
|
1038
|
-
| Context | `useFormConfigContext`
|
|
1039
|
-
| Watch | `useWatch`
|
|
1040
|
-
| Watch | `useWatchField`
|
|
1041
|
-
| Watch | `useWatchFields`
|
|
1042
|
-
| Watch | `useWatchAll`
|
|
1043
|
-
| Dictionary | `useDictionary`
|
|
1044
|
-
| Effect | `useEffect`
|
|
1045
|
-
| Vue 响应式 | `useStableRef`
|
|
1046
|
-
| ViewSchema | `useViewSchemas`
|
|
1047
|
-
| 默认导出 | `default`
|
|
1048
|
-
| Context 类型 | `FormContextProps`
|
|
1049
|
-
| Dictionary 类型 | `SchemxDictionary`
|
|
1050
|
-
| 插件类型 | `SchemxInstallOptions`
|
|
1051
|
-
| Dictionary 类型 | `SchemxWithDictionary`
|
|
1052
|
-
| Dictionary 类型 | `UseDictionaryReturn`
|
|
1064
|
+
| 分类 | 导出 | 用途 |
|
|
1065
|
+
| --------------- | -------------------------- | --------------------------------------------- |
|
|
1066
|
+
| 表单组件 | `schemxForm` | 可安装的表单组件；与 `default` 指向同一对象。 |
|
|
1067
|
+
| 组件 | `FormItem` | 渲染字段或分组 ViewSchema。 |
|
|
1068
|
+
| 组件 | `FormGroup` | 渲染分组 ViewSchema。 |
|
|
1069
|
+
| HOC | `WithRemoteOptions` | 为 Renderer 接入 Dictionary。 |
|
|
1070
|
+
| Registry | `rendererRegistry` | Vue 全局 Renderer Registry。 |
|
|
1071
|
+
| Registry | `validationRuleRegistry` | Vue 全局 ValidationRuleRegistry。 |
|
|
1072
|
+
| Hook | `useForm` | 创建并按 Vue scope 销毁表单。 |
|
|
1073
|
+
| Context | `createFormContext` | 提供表单实例。 |
|
|
1074
|
+
| Context | `useFormContext` | 读取表单实例。 |
|
|
1075
|
+
| Hook | `useField` | 创建 Vue 字段控制器。 |
|
|
1076
|
+
| Context | `createFieldContext` | 提供字段控制器。 |
|
|
1077
|
+
| Context | `useFieldContext` | 读取字段控制器。 |
|
|
1078
|
+
| Context | `createFormConfigContext` | 提供表单展示配置。 |
|
|
1079
|
+
| Context | `useFormConfigContext` | 读取表单展示配置。 |
|
|
1080
|
+
| Watch | `useWatch` | 统一分发 Vue Watch。 |
|
|
1081
|
+
| Watch | `useWatchField` | 单字段 Vue Watch。 |
|
|
1082
|
+
| Watch | `useWatchFields` | 多字段 Vue Watch。 |
|
|
1083
|
+
| Watch | `useWatchAll` | 全表 Vue Watch。 |
|
|
1084
|
+
| Dictionary | `useDictionary` | 管理函数式选项源。 |
|
|
1085
|
+
| Effect | `useEffect` | 创建并自动清理 Core effect。 |
|
|
1086
|
+
| Vue 响应式 | `useStableRef` | 建立浅比较稳定 Ref。 |
|
|
1087
|
+
| ViewSchema | `useViewSchemas` | 桥接 ViewSchemas 为 Ref。 |
|
|
1088
|
+
| 默认导出 | `default` | 与 `schemxForm` 严格相等。 |
|
|
1089
|
+
| Context 类型 | `FormContextProps` | 表单展示 Context。 |
|
|
1090
|
+
| Dictionary 类型 | `SchemxDictionary` | 函数式选项源配置。 |
|
|
1091
|
+
| 插件类型 | `SchemxInstallOptions` | 当前 Vue App 的默认配置安装选项。 |
|
|
1092
|
+
| Dictionary 类型 | `SchemxWithDictionary` | 为 Props 增加 `dict`。 |
|
|
1093
|
+
| Dictionary 类型 | `UseDictionaryReturn` | `useDictionary()` 返回值。 |
|
|
1094
|
+
| 表单类型 | `SchemxFormProps<TValues>` | `<Schemx>` 组件 Props 类型。 |
|
|
1095
|
+
| 字段类型 | `FieldInstance<TValues>` | Vue Ref / Computed 桥接后的字段控制器类型。 |
|
|
1053
1096
|
|
|
1054
1097
|
根入口没有名为 `SchemxForm` 的命名导出。
|
|
1055
1098
|
|
|
1056
|
-
### Core
|
|
1057
|
-
|
|
1058
|
-
| 分类 | 导出
|
|
1059
|
-
| ------------- |
|
|
1060
|
-
| 表单 | `createForm`
|
|
1061
|
-
| 字段 | `createField`
|
|
1062
|
-
| Schema source | `createSchemas`
|
|
1063
|
-
| Schema source | `isSchemxSchemas`
|
|
1064
|
-
| Effect | `createEffect`
|
|
1065
|
-
|
|
|
1066
|
-
|
|
|
1067
|
-
|
|
|
1068
|
-
|
|
|
1069
|
-
|
|
|
1070
|
-
|
|
|
1071
|
-
|
|
|
1072
|
-
|
|
|
1073
|
-
|
|
|
1074
|
-
|
|
|
1075
|
-
|
|
|
1076
|
-
|
|
|
1077
|
-
|
|
|
1078
|
-
|
|
|
1079
|
-
|
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
|
1084
|
-
|
|
|
1085
|
-
|
|
|
1086
|
-
|
|
|
1087
|
-
|
|
|
1088
|
-
|
|
|
1089
|
-
|
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
|
1094
|
-
|
|
|
1095
|
-
|
|
|
1096
|
-
|
|
|
1097
|
-
|
|
|
1098
|
-
|
|
|
1099
|
-
|
|
|
1100
|
-
|
|
|
1101
|
-
|
|
|
1102
|
-
|
|
|
1103
|
-
|
|
|
1104
|
-
|
|
|
1105
|
-
|
|
|
1106
|
-
|
|
|
1107
|
-
|
|
|
1108
|
-
|
|
|
1109
|
-
|
|
|
1110
|
-
|
|
|
1111
|
-
|
|
|
1112
|
-
|
|
|
1113
|
-
|
|
|
1114
|
-
|
|
|
1115
|
-
|
|
|
1116
|
-
|
|
|
1117
|
-
|
|
|
1118
|
-
|
|
|
1119
|
-
|
|
|
1120
|
-
|
|
|
1121
|
-
|
|
|
1122
|
-
|
|
|
1123
|
-
|
|
|
1124
|
-
|
|
|
1125
|
-
|
|
|
1126
|
-
|
|
|
1127
|
-
|
|
|
1128
|
-
|
|
|
1129
|
-
|
|
|
1130
|
-
|
|
|
1131
|
-
|
|
|
1132
|
-
|
|
|
1133
|
-
|
|
|
1134
|
-
|
|
|
1135
|
-
|
|
|
1136
|
-
|
|
|
1137
|
-
|
|
|
1138
|
-
|
|
|
1139
|
-
|
|
|
1140
|
-
|
|
|
1141
|
-
|
|
|
1142
|
-
|
|
|
1143
|
-
|
|
|
1144
|
-
|
|
|
1145
|
-
|
|
|
1099
|
+
### Core 传递运行时值
|
|
1100
|
+
|
|
1101
|
+
| 分类 | 导出 | 用途 |
|
|
1102
|
+
| ------------- | ------------------------------ | ----------------------------- |
|
|
1103
|
+
| 表单 | `createForm` | 创建 Core 表单。 |
|
|
1104
|
+
| 字段 | `createField` | 创建 Core 字段控制器。 |
|
|
1105
|
+
| Schema source | `createSchemas` | 创建可更新 Schema source。 |
|
|
1106
|
+
| Schema source | `isSchemxSchemas` | 判断 Schema source。 |
|
|
1107
|
+
| Effect | `createEffect` | 创建 Core effect。 |
|
|
1108
|
+
| 配置 | `configureSchemx` | 设置 Core 模块级默认配置。 |
|
|
1109
|
+
| 配置 | `getGlobalSchemxConfig` | 读取 Core 模块级默认配置。 |
|
|
1110
|
+
| 配置 | `mergeSchemxConfig` | 按优先级纯合并配置。 |
|
|
1111
|
+
| 配置 | `resolveSchemxConfig` | 补齐 `schemaConfig` 默认值。 |
|
|
1112
|
+
| 配置 | `mergeAndResolveSchemxConfig` | 合并配置并补齐默认值。 |
|
|
1113
|
+
| 配置 | `defaultSchemxConfig` | Core 内置字段默认值。 |
|
|
1114
|
+
| 配置 | `defaultSchemxConfigKeys` | 当前默认配置 key 集合。 |
|
|
1115
|
+
| 配置 | `excludeSchemxConfigKeys` | 不参与字段默认配置的 key。 |
|
|
1116
|
+
| 配置 | `schemaConfigKeys` | 兼容旧命名的默认配置 key。 |
|
|
1117
|
+
| 配置 | `excludeSchemaConfigKeys` | 兼容旧命名的排除 key。 |
|
|
1118
|
+
| Watch | `createWatch` | 分发 Core Watch。 |
|
|
1119
|
+
| Watch | `createWatchField` | 单字段 Core Watch。 |
|
|
1120
|
+
| Watch | `createWatchFields` | 多字段 Core Watch。 |
|
|
1121
|
+
| Watch | `createWatchAll` | 全表 Core Watch。 |
|
|
1122
|
+
| Registry | `createRendererRegistry` | 创建 Renderer Registry。 |
|
|
1123
|
+
| Registry | `createValidationRuleRegistry` | 创建 ValidationRuleRegistry。 |
|
|
1124
|
+
| Validator | `createValidator` | 创建底层 Validator。 |
|
|
1125
|
+
| Schema 守卫 | `isBaseSchema` | 判断原始普通字段。 |
|
|
1126
|
+
| Schema 守卫 | `isGroupSchema` | 判断原始 Group。 |
|
|
1127
|
+
| Schema 守卫 | `isDependencySchema` | 判断原始 Dependency。 |
|
|
1128
|
+
| Schema 守卫 | `isBaseResolvedSchema` | 判断解析后普通字段。 |
|
|
1129
|
+
| Schema 守卫 | `isGroupResolvedSchema` | 判断解析后 Group。 |
|
|
1130
|
+
| 路径 | `getByPath` | 读取嵌套路径。 |
|
|
1131
|
+
| 路径 | `setByPath` | 写入嵌套路径。 |
|
|
1132
|
+
| 路径 | `collectObjectPathsByLeaf` | 收集叶子路径。 |
|
|
1133
|
+
|
|
1134
|
+
### Core 传递类型
|
|
1135
|
+
|
|
1136
|
+
| 分类 | 导出 | 用途 |
|
|
1137
|
+
| ------------------ | ------------------------------- | ----------------------------------------- |
|
|
1138
|
+
| Effect | `CleanupFn` | effect cleanup 函数。 |
|
|
1139
|
+
| Effect | `EffectCallback` | effect callback。 |
|
|
1140
|
+
| Effect | `CreateEffectReturn` | effect dispose 函数。 |
|
|
1141
|
+
| Watch | `CreateWatchOptions` | Watch 选项。 |
|
|
1142
|
+
| Watch | `CreateWatchReturn` | Watch 取消函数。 |
|
|
1143
|
+
| Watch | `WatchFieldCallback` | 单字段 Watch callback。 |
|
|
1144
|
+
| Watch | `WatchFieldsCallback` | 多字段 Watch callback。 |
|
|
1145
|
+
| Watch | `WatchAllCallback` | 全表 Watch callback。 |
|
|
1146
|
+
| 表单 | `CreateFormOptions` | Core 表单创建选项。 |
|
|
1147
|
+
| 表单 | `FormSchemaOptions` | Schema、初始值和 `schemaConfig` 配置。 |
|
|
1148
|
+
| 表单 | `FormRegistryOptions` | Renderer、Rule Registry 和 adapter 配置。 |
|
|
1149
|
+
| 表单 | `FormCallbackOptions` | 提交、值变化和规则错误回调。 |
|
|
1150
|
+
| 表单 | `FormLifecycleOptions` | Runtime 生命周期钩子。 |
|
|
1151
|
+
| 表单 | `ResolvedCreateFormOptions` | 已归一化的 Form 创建配置。 |
|
|
1152
|
+
| 表单 | `SchemxInstance` | Core 表单实例接口。 |
|
|
1153
|
+
| 表单 | `SchemxGlobalContext` | Core 全局字段默认配置。 |
|
|
1154
|
+
| 表单 | `SchemxContext` | Core 实例级高级上下文。 |
|
|
1155
|
+
| 基础 | `Values` | 表单值基础约束。 |
|
|
1156
|
+
| 基础 | `Dynamic` | 静态值或同步 / 异步值函数。 |
|
|
1157
|
+
| 路径 | `NamePath` | 类型安全字段路径。 |
|
|
1158
|
+
| 路径 | `FieldValue` | 从路径提取字段值。 |
|
|
1159
|
+
| 工具类型 | `DeepReadonly` | 深层只读类型。 |
|
|
1160
|
+
| 工具类型 | `CSSProperties` | CSS 属性类型。 |
|
|
1161
|
+
| Schema source | `SchemxSchemas` | 可更新 Schema source。 |
|
|
1162
|
+
| Schema source | `SchemxSchemasInput` | Schema 数组或 source 联合。 |
|
|
1163
|
+
| Schema source | `SchemxSchemasListener` | Schema source listener。 |
|
|
1164
|
+
| 字段 | `SchemxFieldInstance` | Core 字段控制器。 |
|
|
1165
|
+
| Schema | `SchemxBase` | 普通字段基础接口。 |
|
|
1166
|
+
| Schema | `SchemxBaseField` | 按 Renderer key 分布的字段联合。 |
|
|
1167
|
+
| Schema | `SchemxGroupField` | 原始 Group Schema。 |
|
|
1168
|
+
| Schema | `SchemxDependencyField` | 原始 Dependency Schema。 |
|
|
1169
|
+
| Schema | `SchemxField` | 全部原始 Schema 联合。 |
|
|
1170
|
+
| Schema | `SchemxResolvedField` | 解析后字段 / Group 联合。 |
|
|
1171
|
+
| Schema | `SchemxBaseComponentProps` | Renderer 公共 Props。 |
|
|
1172
|
+
| Schema | `SchemxComponentProps` | Renderer 专属与公共 Props。 |
|
|
1173
|
+
| Schema | `SchemxFormItemProps` | 表单项字段配置。 |
|
|
1174
|
+
| 扩展 | `SchemxFieldDefinition` | 普通字段声明合并接口。 |
|
|
1175
|
+
| 扩展 | `SchemxGroupFieldDefinition` | Group 声明合并接口。 |
|
|
1176
|
+
| 依赖 | `SchemxDependencies` | 字段动态依赖配置。 |
|
|
1177
|
+
| 依赖 | `SchemxContainerDependencies` | Group/Dependency 容器动态状态配置。 |
|
|
1178
|
+
| 依赖 | `SchemxConditionFn` | 动态属性条件函数。 |
|
|
1179
|
+
| 依赖 | `SchemxDependenciesStaticProps` | 依赖函数静态返回值映射。 |
|
|
1180
|
+
| ViewSchema | `SchemxViewDebugMeta` | ViewSchema 诊断元数据。 |
|
|
1181
|
+
| ViewSchema | `SchemxViewFieldSchema` | 字段渲染投影。 |
|
|
1182
|
+
| ViewSchema | `SchemxViewGroupSchema` | Group 渲染投影。 |
|
|
1183
|
+
| ViewSchema | `SchemxViewSchema` | 字段 / Group 投影联合。 |
|
|
1184
|
+
| 配置 | `MergedSchemxConfig` | 已合并且补齐 `schemaConfig` 默认值。 |
|
|
1185
|
+
| 配置 | `SchemxConfig` | Core 模块级和 Form/App 可继承配置。 |
|
|
1186
|
+
| 配置 | `SchemxConfigKey` | 当前默认配置 key 类型。 |
|
|
1187
|
+
| 配置 | `ExcludeSchemxConfigKeys` | 排除配置 key 类型。 |
|
|
1188
|
+
| Renderer | `SchemxRendererKey` | Renderer key 类型。 |
|
|
1189
|
+
| Renderer | `SchemxRendererDefinition` | Renderer Props 声明合并接口。 |
|
|
1190
|
+
| Renderer Registry | `RendererRegistry` | Renderer Registry 实例类型。 |
|
|
1191
|
+
| Renderer Registry | `RegistryOptions` | 注册覆盖选项（renderer 与 rule 共享）。 |
|
|
1192
|
+
| Renderer Registry | `RendererMap` | Renderer 批量映射。 |
|
|
1193
|
+
| Validator | `Validator` | 底层 Validator 实例类型。 |
|
|
1194
|
+
| Validator | `ValidationResult` | 校验成功 / 失败联合。 |
|
|
1195
|
+
| Validator | `ValidationError` | 校验失败详情。 |
|
|
1196
|
+
| Validator | `FieldValidationError` | 单字段错误。 |
|
|
1197
|
+
| Validator | `ValidationTrigger` | 校验触发时机。 |
|
|
1198
|
+
| Validator | `StandardSchemaV1` | Standard Schema v1 协议。 |
|
|
1199
|
+
| Rule | `ValidationRuleDefinition` | 自定义规则声明合并接口。 |
|
|
1200
|
+
| Rule | `ValidationRuleName` | 声明合并推导的规则 key。 |
|
|
1201
|
+
| Rule | `RequiredOptions` | 必填消息与空值判断配置。 |
|
|
1202
|
+
| Rule | `FieldRules` | Standard Schema、内置或自定义规则。 |
|
|
1203
|
+
| Validator Registry | `ValidationRuleRegistry` | ValidationRuleRegistry 实例类型。 |
|
|
1204
|
+
| Validator Registry | `ValidationRuleFactory` | 按字段 Schema 生成规则的工厂。 |
|
|
1205
|
+
| Validator Registry | `ValidationRuleEntry` | Standard Schema 或工厂联合。 |
|
|
1206
|
+
| Validator Registry | `ValidationRuleMap` | 规则名到条目的批量映射。 |
|