@qin-ui/antdv-next-pro 1.1.10 → 1.1.12
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/AI-CONTEXT.md +37 -0
- package/README.md +139 -130
- package/api.json +213 -0
- package/es/antdv-next-pro.css +9 -9
- package/es/component-provider/index-Daiw7IxY.js +186 -0
- package/es/component-provider/index.js +2 -184
- package/es/core/{index-C98RSrpN.js → index-ghYuQ3Sy.js} +29 -29
- package/es/form/{index-CyMXEA_9.js → index-7clzY8ZD.js} +67 -73
- package/es/form/index.js +10 -16
- package/es/index.d.ts +670 -135
- package/es/index.js +25 -22
- package/es/table/index.js +8 -7
- package/package.json +5 -2
package/AI-CONTEXT.md
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# @qin-ui/antdv-next-pro
|
|
2
|
+
|
|
3
|
+
> 基于 ant-design-vue v4 (next) 的配置驱动表单和表格组件库。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @qin-ui/antdv-next-pro ant-design-vue vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 核心导出
|
|
12
|
+
|
|
13
|
+
### 组件
|
|
14
|
+
|
|
15
|
+
- `ProForm` - 配置驱动表单组件
|
|
16
|
+
- `ProTable` - 配置驱动表格组件
|
|
17
|
+
- `ProComponentProvider` - 全局配置提供者
|
|
18
|
+
|
|
19
|
+
### Hooks
|
|
20
|
+
|
|
21
|
+
- `useForm<D>()` - 创建表单实例
|
|
22
|
+
- `useFields<D>()` - 字段配置管理
|
|
23
|
+
- `useFormRef()` - 表单组件引用
|
|
24
|
+
- `useTable<D, T>()` - 创建表格实例
|
|
25
|
+
|
|
26
|
+
## 字段配置（Field）
|
|
27
|
+
|
|
28
|
+
每个字段支持：`path`, `label`, `component`, `hidden`, `disabled`, `rules`, `valueFormatter`, `fields`, `grid`, `slots`, `componentStyle`, `componentClass`, `componentContainer`, `formItemStyle`, `formItemClass`, `formItemContainer`, `modelProp`
|
|
29
|
+
|
|
30
|
+
内置组件：input, textarea, input-search, input-password, input-number, select, cascader, date-picker, range-picker, time-picker, checkbox-group, radio-group, switch, slider, tree-select, transfer, custom
|
|
31
|
+
|
|
32
|
+
## 表格列配置（Column）
|
|
33
|
+
|
|
34
|
+
- `dataIndex` - 数据路径（优先使用）
|
|
35
|
+
- `key` - 列标识（dataIndex 不满足时使用）
|
|
36
|
+
- `hidden` - 是否隐藏
|
|
37
|
+
- 所有 ant-design-vue ColumnType 属性
|
package/README.md
CHANGED
|
@@ -1,18 +1,31 @@
|
|
|
1
1
|
# @qin-ui/antdv-next-pro
|
|
2
2
|
|
|
3
|
-
基于
|
|
3
|
+
> 基于 **antdv-next** 和 **Vue 3.x** 的二次封装高级组件库，提供高度可配置、Schema 驱动的 `ProForm`、`ProTable` 和 `ComponentProvider`。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
<p align="center">
|
|
6
|
+
<img src="https://img.shields.io/badge/antdv--next-v1.1%2B-blue" alt="antdv-next" />
|
|
7
|
+
<img src="https://img.shields.io/badge/Vue-3.5%2B-brightgreen" alt="Vue 3.5+" />
|
|
8
|
+
<img src="https://img.shields.io/badge/TypeScript-5.x-blue" alt="TypeScript" />
|
|
9
|
+
<img src="https://img.shields.io/badge/License-MIT-green" alt="MIT" />
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
## 📝 [使用示例和文档详细内容](https://dufan3715.github.io/pro-components/)
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## 📦 安装
|
|
17
|
+
|
|
18
|
+
确保您的项目中已安装 `antdv-next` (v1.1+) 和 `vue` (v3.5+)：
|
|
6
19
|
|
|
7
20
|
```bash
|
|
8
21
|
npm install @qin-ui/antdv-next-pro antdv-next
|
|
9
|
-
#
|
|
22
|
+
# 或使用 pnpm
|
|
10
23
|
pnpm add @qin-ui/antdv-next-pro antdv-next
|
|
11
24
|
```
|
|
12
25
|
|
|
13
26
|
---
|
|
14
27
|
|
|
15
|
-
## ProForm
|
|
28
|
+
## 🚀 ProForm 表单组件
|
|
16
29
|
|
|
17
30
|
基于 Schema 驱动的表单组件，通过 `fields` 配置描述每个表单项，支持 Grid 布局、响应式属性、嵌套字段、自定义组件等。
|
|
18
31
|
|
|
@@ -42,98 +55,107 @@ const form = useForm<FormData>({}, [
|
|
|
42
55
|
|
|
43
56
|
### `useForm(initData?, initFields?, root?)` 参数
|
|
44
57
|
|
|
45
|
-
| 参数 | 类型 | 说明
|
|
46
|
-
|
|
|
47
|
-
| `initData` | `DeepPartial<D>` | 表单初始数据
|
|
48
|
-
| `initFields` | `Field<D>[]` | 表单字段初始配置
|
|
49
|
-
| `root` | `boolean` | 是否创建根 form
|
|
58
|
+
| 参数 | 类型 | 说明 |
|
|
59
|
+
| :----------- | :--------------- | :-------------------------------- |
|
|
60
|
+
| `initData` | `DeepPartial<D>` | 表单初始数据 |
|
|
61
|
+
| `initFields` | `Field<D>[]` | 表单字段初始配置 |
|
|
62
|
+
| `root` | `boolean` | 是否创建根 form 实例，默认 `true` |
|
|
50
63
|
|
|
51
|
-
### `useForm` 返回值
|
|
64
|
+
### `useForm` 返回值 (Form 实例)
|
|
52
65
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
| `formRef` | `Ref<FormInstance \| undefined>` | AntdvNext FormInstance
|
|
56
|
-
| `formData` | `Reactive<D>` | 响应式表单数据对象
|
|
57
|
-
| `fields` | `Ref<Field<D>[]>` |
|
|
58
|
-
| `getFormData(path?)` | `(path?) => any` |
|
|
59
|
-
| `setFormData(path, value)` | `-` |
|
|
60
|
-
| `setField(path, patch)` | `-` |
|
|
61
|
-
| `resetFormData()` | `-` | 重置表单数据为初始值
|
|
66
|
+
| 属性/方法 | 类型 | 说明 |
|
|
67
|
+
| :------------------------- | :------------------------------- | :-------------------------------------------------------- |
|
|
68
|
+
| `formRef` | `Ref<FormInstance \| undefined>` | AntdvNext FormInstance 引用，支持直接调用 validate 等方法 |
|
|
69
|
+
| `formData` | `Reactive<D>` | 响应式表单数据对象 |
|
|
70
|
+
| `fields` | `Ref<Field<D>[]>` | 响应式字段配置数组 |
|
|
71
|
+
| `getFormData(path?)` | `(path?) => any` | 读取表单字段或整个表单的值（支持深层路径） |
|
|
72
|
+
| `setFormData(path, value)` | `-` | 安全更新指定路径的值，支持批量设置与函数式更新 |
|
|
73
|
+
| `setField(path, patch)` | `-` | 动态增量更新某一个字段的 Schema 配置参数 |
|
|
74
|
+
| `resetFormData()` | `-` | 重置表单数据为初始值 |
|
|
62
75
|
|
|
63
76
|
### `ProForm` Props
|
|
64
77
|
|
|
65
|
-
| 属性
|
|
66
|
-
|
|
|
67
|
-
| `form`
|
|
68
|
-
| `grid`
|
|
69
|
-
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
124
|
-
| `
|
|
125
|
-
|
|
126
|
-
|
|
78
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
79
|
+
| :------- | :--------------------- | :------ | :-------------------------------------- |
|
|
80
|
+
| `form` | `Form<D>` | - | `useForm` 返回的实例 |
|
|
81
|
+
| `grid` | `boolean \| GridProps` | `false` | 是否启用 Grid 网格布局 |
|
|
82
|
+
| 其余属性 | `FormProps` | - | 继承并直接透传至 antdv-next `Form` 组件 |
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## 📄 字段配置（`Field`）详情
|
|
87
|
+
|
|
88
|
+
所有字段共享 `Base` 公共属性，再加上各内置组件专属的属性参数。
|
|
89
|
+
|
|
90
|
+
### 公共基础属性（`Base`）
|
|
91
|
+
|
|
92
|
+
| 属性 | 类型 | 说明 |
|
|
93
|
+
| :------------------- | :---------------------------------- | :-------------------------------------------------------- |
|
|
94
|
+
| `path` | `Path<D>` | 字段标识，需对应 `formData` 中的 key |
|
|
95
|
+
| `label` | `string \| Component` | 字段标签名称，支持直接传入 Vue 组件渲染 |
|
|
96
|
+
| `component` | 见下方内置组件列表 | 使用的内置组件名或自定义组件 |
|
|
97
|
+
| `hidden` | `MaybeRef<boolean>` | 字段是否隐藏，支持 Ref / Computed 响应式 |
|
|
98
|
+
| `disabled` | `MaybeRef<boolean>` | 组件是否禁用，支持 Ref / Computed 响应式 |
|
|
99
|
+
| `rules` | `FormItemRule[]` | 字段数据校验规则 |
|
|
100
|
+
| `span` | `number` | Grid 占位列宽（仅在开启 `grid` 模式下有效） |
|
|
101
|
+
| `slots` | `Partial<ComponentSlots<FormItem>>` | FormItem 插槽（包含 `label`/`extra`/`help`/`tooltip` 等） |
|
|
102
|
+
| `grid` | `boolean \| GridProps` | 嵌套子字段的 Grid 配置 |
|
|
103
|
+
| `fields` | `Fields<D>` | 嵌套子字段配置数组（用于复杂分组） |
|
|
104
|
+
| `formItemStyle` | `CSSProperties` | FormItem 样式属性 |
|
|
105
|
+
| `formItemClass` | `string` | FormItem 自定义类名 |
|
|
106
|
+
| `formItemContainer` | `Component` | FormItem 外层包裹容器组件 |
|
|
107
|
+
| `formItemDataAttrs` | `Record<string, string>` | 附加到 FormItem DOM 节点上的自定义 data 属性 |
|
|
108
|
+
| `componentStyle` | `CSSProperties` | 表单输入组件的样式属性 |
|
|
109
|
+
| `componentClass` | `string` | 表单输入组件的自定义类名 |
|
|
110
|
+
| `componentContainer` | `Component` | 表单输入组件的外层包裹容器组件 |
|
|
111
|
+
| `componentDataAttrs` | `Record<string, string>` | 附加到输入组件 DOM 节点上的自定义 data 属性 |
|
|
112
|
+
| `valueFormatter` | `ValueFormatter` | 字段值格式化与转换器（支持 get/set 双向处理器） |
|
|
113
|
+
| `modelProp` | `string` | 双向绑定的数据名，默认 `'value'` |
|
|
114
|
+
|
|
115
|
+
> [!NOTE]
|
|
116
|
+
> **响应式支持**：除了 `component`、`fields`、`slots`、`modelProp`、`formItemContainer`、`componentContainer`、`valueFormatter` 之外，所有属性均高度支持 `Ref` 或 `ComputedRef` 响应式数据。
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
### 内置组件类型（`component` 可选值）
|
|
121
|
+
|
|
122
|
+
| 内置键名 | 渲染对应的 antdv-next 组件 |
|
|
123
|
+
| :-------------------- | :--------------------------------------------------------- |
|
|
124
|
+
| `'input'` | Input 文本输入框 |
|
|
125
|
+
| `'textarea'` | TextArea 文本域 |
|
|
126
|
+
| `'input-password'` | InputPassword 密码输入框 |
|
|
127
|
+
| `'input-otp'` | InputOTP 一次性验证码框 |
|
|
128
|
+
| `'input-search'` | InputSearch 搜索输入框 |
|
|
129
|
+
| `'input-number'` | InputNumber 数字输入框 |
|
|
130
|
+
| `'select'` | Select 下拉选择器 |
|
|
131
|
+
| `'auto-complete'` | AutoComplete 自动完成 |
|
|
132
|
+
| `'cascader'` | Cascader 级联选择器 |
|
|
133
|
+
| `'date-picker'` | DatePicker 日期选择器 |
|
|
134
|
+
| `'range-picker'` | RangePicker 日期范围选择器 |
|
|
135
|
+
| `'time-picker'` | TimePicker 时间选择器 |
|
|
136
|
+
| `'time-range-picker'` | TimeRangePicker 时间范围选择器 |
|
|
137
|
+
| `'checkbox-group'` | CheckboxGroup 复选框组 |
|
|
138
|
+
| `'radio-group'` | RadioGroup 单选按钮组 |
|
|
139
|
+
| `'switch'` | Switch 开关 |
|
|
140
|
+
| `'slider'` | Slider 滑块 |
|
|
141
|
+
| `'tree-select'` | TreeSelect 树形选择器 |
|
|
142
|
+
| `'transfer'` | Transfer 穿梭框 |
|
|
143
|
+
| `'custom'` | 完全自定义渲染组件（在 `component` 属性直接传入 Vue 组件） |
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
### 🧩 扩充您的自定义组件
|
|
148
|
+
|
|
149
|
+
#### 1. 使用 custom 属性内联自定义渲染
|
|
127
150
|
|
|
128
151
|
```ts
|
|
129
|
-
// 使用 custom 内联自定义
|
|
130
152
|
{
|
|
131
153
|
path: 'custom',
|
|
132
154
|
component: (props) => h('div', props, '自定义内容'),
|
|
133
155
|
}
|
|
134
156
|
```
|
|
135
157
|
|
|
136
|
-
####
|
|
158
|
+
#### 2. 全局注册高频可复用自定义组件
|
|
137
159
|
|
|
138
160
|
```vue
|
|
139
161
|
<script setup lang="ts">
|
|
@@ -152,7 +174,9 @@ const componentMap = {
|
|
|
152
174
|
</template>
|
|
153
175
|
```
|
|
154
176
|
|
|
155
|
-
配合 TypeScript
|
|
177
|
+
#### 3. 配合 TypeScript 声明合并获得强类型联想
|
|
178
|
+
|
|
179
|
+
在项目中任意 `.d.ts` 类型文件中声明如下：
|
|
156
180
|
|
|
157
181
|
```ts
|
|
158
182
|
declare module '@qin-ui/antdv-next-pro' {
|
|
@@ -164,9 +188,9 @@ declare module '@qin-ui/antdv-next-pro' {
|
|
|
164
188
|
|
|
165
189
|
---
|
|
166
190
|
|
|
167
|
-
## ProTable
|
|
191
|
+
## 📊 ProTable 表格组件
|
|
168
192
|
|
|
169
|
-
基于 Schema 驱动的表格组件，与 `ProForm`
|
|
193
|
+
基于 Schema 驱动的表格组件，与 `ProForm` 深度集成，原生支持搜索表单与表格状态联动。
|
|
170
194
|
|
|
171
195
|
### 基础用法
|
|
172
196
|
|
|
@@ -189,33 +213,33 @@ const table = useTable<Row>({
|
|
|
189
213
|
</template>
|
|
190
214
|
```
|
|
191
215
|
|
|
192
|
-
### `useTable`
|
|
216
|
+
### `useTable` 配置参数
|
|
193
217
|
|
|
194
|
-
|
|
|
195
|
-
|
|
|
196
|
-
| `columns` | `Column<D>[]` |
|
|
197
|
-
| `dataSource` | `T[]` |
|
|
198
|
-
| `pageParam` | `PageParam` |
|
|
199
|
-
| `searchParam` | `DeepPartial<D>` |
|
|
200
|
-
| `searchFields` | `Fields<D>` |
|
|
218
|
+
| 参数名 | 类型 | 说明 |
|
|
219
|
+
| :------------- | :--------------- | :------------------------------------------------ |
|
|
220
|
+
| `columns` | `Column<D>[]` | 表格列 Schema 配置，支持响应式 `hidden` |
|
|
221
|
+
| `dataSource` | `T[]` | 静态初始数据源数组 |
|
|
222
|
+
| `pageParam` | `PageParam` | 初始分页参数（current, pageSize, total） |
|
|
223
|
+
| `searchParam` | `DeepPartial<D>` | 搜索栏表单初始填充数据 |
|
|
224
|
+
| `searchFields` | `Fields<D>` | 搜索栏字段 Schema 配置（格式与 ProForm 完全一致） |
|
|
201
225
|
|
|
202
226
|
### `ProTable` Props
|
|
203
227
|
|
|
204
|
-
| 属性 | 类型 | 默认值 | 说明
|
|
205
|
-
|
|
|
206
|
-
| `table` | `Table<D>` | - | `useTable`
|
|
207
|
-
| `search` | `() => Promise<void>` | - |
|
|
208
|
-
| `addIndexColumn` | `boolean` | `false` |
|
|
209
|
-
| `immediateSearch` | `boolean` | `false` |
|
|
210
|
-
| `control` | `boolean \| { sizeControl, columnControl }` | `true` |
|
|
211
|
-
| `searchFormConfig` | `SearchFormConfig` | - |
|
|
212
|
-
| `tableContainer` | `Component \| false` | - |
|
|
228
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
229
|
+
| :----------------- | :------------------------------------------ | :------ | :------------------------------------------------ |
|
|
230
|
+
| `table` | `Table<D>` | - | 由 `useTable` 返回的表格实例引用 |
|
|
231
|
+
| `search` | `() => Promise<void>` | - | 触发表格数据查询的异步回调函数 |
|
|
232
|
+
| `addIndexColumn` | `boolean` | `false` | 是否自动在表格首列插入序号列 |
|
|
233
|
+
| `immediateSearch` | `boolean` | `false` | 表格挂载完毕（onMounted）是否立即触发一次查询回调 |
|
|
234
|
+
| `control` | `boolean \| { sizeControl, columnControl }` | `true` | 是否展示表格右上角尺寸调节和列显示控制条 |
|
|
235
|
+
| `searchFormConfig` | `SearchFormConfig` | - | 搜索栏表单的排版布局及展开/收起配置参数 |
|
|
236
|
+
| `tableContainer` | `Component \| false` | - | 表格区域外层自定义包裹组件 |
|
|
213
237
|
|
|
214
238
|
---
|
|
215
239
|
|
|
216
|
-
## ComponentProvider
|
|
240
|
+
## ⚙️ ComponentProvider
|
|
217
241
|
|
|
218
|
-
|
|
242
|
+
全局或局部的默认配置提供者，通过在最外层包裹 `ComponentProvider`，传入 `componentVars` 属性，能够极其优雅地控制其所有子组件的默认配置。
|
|
219
243
|
|
|
220
244
|
```vue
|
|
221
245
|
<template>
|
|
@@ -244,34 +268,19 @@ const config = {
|
|
|
244
268
|
|
|
245
269
|
---
|
|
246
270
|
|
|
247
|
-
##
|
|
248
|
-
|
|
249
|
-
```ts
|
|
250
|
-
import { createApp } from 'vue';
|
|
251
|
-
import AntdvNextPro from '@qin-ui/antdv-next-pro';
|
|
271
|
+
## Peer Dependencies
|
|
252
272
|
|
|
253
|
-
|
|
254
|
-
|
|
273
|
+
| 依赖包名 | 推荐版本要求 |
|
|
274
|
+
| :----------- | :----------- |
|
|
275
|
+
| `antdv-next` | `^1.1.0` |
|
|
276
|
+
| `vue` | `^3.5.0` |
|
|
255
277
|
|
|
256
|
-
|
|
278
|
+
---
|
|
257
279
|
|
|
258
|
-
|
|
259
|
-
import {
|
|
260
|
-
ProForm,
|
|
261
|
-
ProTable,
|
|
262
|
-
ProComponentProvider,
|
|
263
|
-
} from '@qin-ui/antdv-next-pro';
|
|
264
|
-
|
|
265
|
-
app.use(ProForm);
|
|
266
|
-
app.use(ProTable);
|
|
267
|
-
app.use(ProComponentProvider);
|
|
268
|
-
```
|
|
280
|
+
## 🤝 参与贡献
|
|
269
281
|
|
|
270
|
-
|
|
282
|
+
欢迎随时通过 [GitHub Issues](https://github.com/dufan3715/pro-components/issues) 提出针对该子包的建议或提交 Pull Request。
|
|
271
283
|
|
|
272
|
-
##
|
|
284
|
+
## 📄 许可证
|
|
273
285
|
|
|
274
|
-
|
|
275
|
-
| ------------ | -------- |
|
|
276
|
-
| `antdv-next` | `^1.1.0` |
|
|
277
|
-
| `vue` | `^3.5.0` |
|
|
286
|
+
基于 [MIT](LICENSE) 开源许可证。
|
package/api.json
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
{
|
|
2
|
+
"generatedAt": "2026-06-04T09:03:35.742Z",
|
|
3
|
+
"name": "@qin-ui/antdv-next-pro",
|
|
4
|
+
"api": [
|
|
5
|
+
{
|
|
6
|
+
"name": "ProComponentProvider",
|
|
7
|
+
"type": "component",
|
|
8
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
9
|
+
"signature": "<ProComponentProvider>",
|
|
10
|
+
"description": "@qin-ui/antdv-next-pro 全局配置提供者组件\n用于在组件树的顶层配置所有子组件的全局默认属性。",
|
|
11
|
+
"examples": [
|
|
12
|
+
"```vue\n<ProComponentProvider\n:componentVars=\"{ 'input': { placeholder: '请输入' } }\"\n>\n<ProForm :form=\"form\" :fields=\"fields\" />\n</ProComponentProvider>\n```"
|
|
13
|
+
]
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"name": "ProForm",
|
|
17
|
+
"type": "component",
|
|
18
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
19
|
+
"signature": "<ProForm>",
|
|
20
|
+
"description": "@qin-ui/antdv-next-pro 配置驱动表单组件\n通过配置驱动的方式快速构建表单，支持：\n- 字段联动（通过 setField、watch 等实现）\n- 嵌套字段（通过 fields 递归配置）\n- 自定义组件（通过 component 属性和 custom 类型）\n- 网格布局（通过 grid 属性）\n- 动态插槽（以字段 path 命名的插槽）",
|
|
21
|
+
"typeParams": [
|
|
22
|
+
{
|
|
23
|
+
"name": "F"
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "ContainerFragment",
|
|
29
|
+
"type": "component",
|
|
30
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
31
|
+
"signature": "<ContainerFragment>",
|
|
32
|
+
"description": "容器分片渲染组件。用于动态渲染表单行或表单项的外部包裹容器（例如 Grid 行、Col 列等布局容器）。"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "SlotComponent",
|
|
36
|
+
"type": "component",
|
|
37
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
38
|
+
"signature": "<SlotComponent>",
|
|
39
|
+
"description": "插槽渲染辅助组件。用于在表单或表格的自定义插槽中动态渲染外部传入的 VNode、渲染函数或静态字符串。"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "ComponentMap",
|
|
43
|
+
"type": "interface",
|
|
44
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
45
|
+
"signature": "export interface ComponentMap {}",
|
|
46
|
+
"description": "组件映射扩展接口\n暴露给外部扩充自定义组件类型的接口。\n用户可通过 TypeScript 的声明合并（module augmentation）添加自定义组件。",
|
|
47
|
+
"examples": [
|
|
48
|
+
"```ts\n// 在项目中任意 .d.ts 文件中\ndeclare module '@qin-ui/antdv-next-pro' {\ninterface ComponentMap {\n'my-custom-input': typeof MyCustomInput;\n}\n}\n```"
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "ComponentName",
|
|
53
|
+
"type": "type",
|
|
54
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
55
|
+
"signature": "export type ComponentName =\n | keyof BaseComponentMap\n | keyof ComponentMap\n | 'custom';",
|
|
56
|
+
"description": "组件名称联合类型\n所有支持的组件名称"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "useFormData",
|
|
60
|
+
"type": "function",
|
|
61
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
62
|
+
"signature": "export const useFormData = <D extends Data = Data>(\n initFormData?: ExtendWithAny<DeepPartial<D>>\n) =>",
|
|
63
|
+
"description": "表单数据处理 Hook\n提供响应式表单数据的管理能力，支持：\n- 响应式数据存储（基于 Vue reactive）\n- 深层路径读写（支持点号分隔，如 'address.city'）\n- 类型安全的路径提示（传入泛型 D 后，path 参数可获得类型推导）\n- 父子表单自动注入（非根表单会从注入中获取数据）",
|
|
64
|
+
"returns": "{Function} .setFormData(path, value) - 设置指定路径的数据",
|
|
65
|
+
"typeParams": [
|
|
66
|
+
{
|
|
67
|
+
"name": "D"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
"examples": [
|
|
71
|
+
"```ts\ninterface User { name: string; age: number; address: { city: string } }\n\nconst { formData, getFormData, setFormData } = useFormData<User>({\nname: '张三',\naddress: { city: '北京' }\n})\n\n// 读取\ngetFormData('name') // '张三'\ngetFormData('address.city') // '北京'\nformData.name // '张三'（响应式）\n\n// 设置\nsetFormData('name', '李四')\nsetFormData('address.city', '上海')\nsetFormData({ name: '王五', age: 30 }) // 批量覆盖\nsetFormData(prev => ({ ...prev, name: '赵六' })) // 函数式更新\n```"
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "useFields",
|
|
76
|
+
"type": "function",
|
|
77
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
78
|
+
"signature": "export const useFields = _useFields as",
|
|
79
|
+
"description": "类型安全的 re-export。将 core useFields 的泛型参数绑定为本地类型：\n- 字段类型 F → Field<ComponentName, D>（支持 antdv-next 组件类型推导）\n- FormItem 实例 → antdv-next 的 FormItemInstance",
|
|
80
|
+
"typeParams": [
|
|
81
|
+
{
|
|
82
|
+
"name": "D"
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"examples": [
|
|
86
|
+
"```ts\ninterface User { name: string; age: number }\n\nconst { fields, getField, setField } = useFields<User>([\n{ path: 'name', label: '姓名', component: 'input' },\n{ path: 'age', label: '年龄', component: 'input-number' },\n])\n```"
|
|
87
|
+
]
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "UseFields",
|
|
91
|
+
"type": "type",
|
|
92
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
93
|
+
"signature": "export type UseFields<D extends Data = Data> = ReturnType<typeof useFields<D>>;",
|
|
94
|
+
"description": "useFields 返回值类型，固定为本地 Fields<D>"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"name": "Form",
|
|
98
|
+
"type": "type",
|
|
99
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
100
|
+
"signature": "export type Form<\n D extends Data = Data,\n F extends Field<ComponentName, D> = Field<ComponentName, D>,\n> = _Form<D, F, FormInstance>;",
|
|
101
|
+
"description": "在 core Form 类型的基础上：\n1. 将字段类型 F 默认绑定为本地 Field<ComponentName, D>，支持 antdv-next 所有内置组件类型\n2. 将底层表单实例 I 绑定为 antdv-next 的 FormInstance，使 formRef 获得完整的类型提示",
|
|
102
|
+
"typeParams": [
|
|
103
|
+
{
|
|
104
|
+
"name": "D"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": "F"
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
"examples": [
|
|
111
|
+
"```ts\ninterface User { name: string; age: number }\nconst form: Form<User> = useForm({ name: '张三', age: 25 })\nform.formRef.value?.validate() // 类型安全地访问 antdv-next Form validate 方法\n```"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"name": "useForm",
|
|
116
|
+
"type": "function",
|
|
117
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
118
|
+
"signature": "export const useForm = _useForm as",
|
|
119
|
+
"description": "创建 @qin-ui/antdv-next-pro 表单实例的 Hook\n类型安全的 re-export。将 core useForm 的泛型参数绑定为本地类型：\n- 字段类型 F → Field<ComponentName, D>（支持 antdv-next 组件类型推导）\n- 表单实例 → antdv-next 的 FormInstance",
|
|
120
|
+
"typeParams": [
|
|
121
|
+
{
|
|
122
|
+
"name": "D"
|
|
123
|
+
}
|
|
124
|
+
],
|
|
125
|
+
"examples": [
|
|
126
|
+
"```ts\ninterface User { name: string; age: number }\n\nconst form = useForm<User>(\n{ name: '张三', age: 25 },\n[\n{ path: 'name', label: '姓名', component: 'input' },\n{ path: 'age', label: '年龄', component: 'input-number' },\n],\ntrue\n)\n```"
|
|
127
|
+
]
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"name": "useFormRef",
|
|
131
|
+
"type": "function",
|
|
132
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
133
|
+
"signature": "export const useFormRef = _useFormRef as",
|
|
134
|
+
"description": "类型安全的 re-export。将 core useFormRef 的泛型参数绑定为 antdv-next 的 FormInstance，\n使 formRef 获取到完整的 antdv-next Form 组件 API 类型提示。",
|
|
135
|
+
"returns": "{Function} .setFormRef(inst) - 设置表单组件实例",
|
|
136
|
+
"examples": [
|
|
137
|
+
"```ts\nconst { formRef, setFormRef } = useFormRef()\nawait formRef.value?.validate()\nformRef.value?.resetFields()\n```"
|
|
138
|
+
]
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"name": "Field",
|
|
142
|
+
"type": "type",
|
|
143
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
144
|
+
"signature": "export type Field<\n C extends ComponentName = ComponentName,\n D extends Data = Data,\n> =\n | (FieldTypeMap<D>[C] &",
|
|
145
|
+
"description": "字段配置类型，包含所有字段属性和响应式支持",
|
|
146
|
+
"typeParams": [
|
|
147
|
+
{
|
|
148
|
+
"name": "D"
|
|
149
|
+
}
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "Fields",
|
|
154
|
+
"type": "type",
|
|
155
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
156
|
+
"signature": "export type Fields<D extends Data = Data> = Array<Field<ComponentName, D>>;",
|
|
157
|
+
"description": "字段数组类型",
|
|
158
|
+
"typeParams": [
|
|
159
|
+
{
|
|
160
|
+
"name": "D"
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"name": "Column",
|
|
166
|
+
"type": "type",
|
|
167
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
168
|
+
"signature": "export type Column<D extends Data = Data> = Omit<\n ColumnType,\n 'dataIndex' | 'key'\n> &",
|
|
169
|
+
"description": "继承 antdv-next 的 ColumnType 列类型，并添加：\n- 类型安全的 dataIndex（基于泛型 D 推导路径），优先使用\n- key 作为辅助标识\n- hidden 属性用于控制列显隐",
|
|
170
|
+
"typeParams": [
|
|
171
|
+
{
|
|
172
|
+
"name": "D"
|
|
173
|
+
}
|
|
174
|
+
],
|
|
175
|
+
"examples": [
|
|
176
|
+
"```ts\ninterface User { name: string; age: number }\n\nconst columns: Columns<User> = [\n{ dataIndex: 'name', title: '姓名', width: 120 },\n{ dataIndex: 'age', title: '年龄', width: 80 },\n]\n```"
|
|
177
|
+
]
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"name": "Table",
|
|
181
|
+
"type": "type",
|
|
182
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
183
|
+
"signature": "export type Table<\n D extends Data = Data,\n T extends Data = ExtendWithAny<D>,\n> = _Table<D, T, Column<T>>;",
|
|
184
|
+
"description": "在 core Table 类型的基础上，将列类型 C 绑定为本地 Column<T>，\n使 columns 操作获得 antdv-next 表格列的完整属性类型提示。",
|
|
185
|
+
"typeParams": [
|
|
186
|
+
{
|
|
187
|
+
"name": "D"
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"name": "T"
|
|
191
|
+
}
|
|
192
|
+
]
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"name": "useTable",
|
|
196
|
+
"type": "function",
|
|
197
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
198
|
+
"signature": "export const useTable: <\n D extends Data = Data,\n T extends Data = ExtendWithAny<D>,\n>(params:",
|
|
199
|
+
"description": "创建 @qin-ui/antdv-next-pro 表格实例的 Hook\n类型安全的 re-export。将 core useTable 的列类型绑定为本地 Column<T>，\n使 columns 操作获得 antdv-next 表格列的完整类型提示。",
|
|
200
|
+
"typeParams": [
|
|
201
|
+
{
|
|
202
|
+
"name": "D"
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"name": "T"
|
|
206
|
+
}
|
|
207
|
+
],
|
|
208
|
+
"examples": [
|
|
209
|
+
"```ts\ninterface User { name: string; age: number; email: string }\n\nconst table = useTable<User>({\ncolumns: [\n{ dataIndex: 'name', title: '姓名', width: 120 },\n{ dataIndex: 'age', title: '年龄', width: 80 },\n],\ndataSource: [],\npageParam: { current: 1, pageSize: 20, total: 0 },\n})\n```"
|
|
210
|
+
]
|
|
211
|
+
}
|
|
212
|
+
]
|
|
213
|
+
}
|