@qin-ui/antdv-next-pro 1.0.3 → 1.0.5
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 +268 -0
- package/es/component-provider/index.js +163 -3
- package/es/{component-provider/index-Cy8dTKpN.js → core/index-BrBzu6aj.js} +6 -163
- package/es/form/{index-DShboSl2.js → index-CMvNb50_.js} +16 -9
- package/es/form/index.js +5 -4
- package/es/index.d.ts +120 -130
- package/es/index.js +9 -7
- package/es/table/index.js +3 -3
- package/package.json +7 -4
package/README.md
ADDED
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
# @qin-ui/antdv-next-pro
|
|
2
|
+
|
|
3
|
+
基于 [antdv-next](https://github.com/vueComponent/pro-components) 的二次封装 ProComponent 组件库,提供高度可配置的 `ProForm`、`ProTable` 和 `ComponentProvider`。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @qin-ui/antdv-next-pro antdv-next
|
|
9
|
+
# 或
|
|
10
|
+
pnpm add @qin-ui/antdv-next-pro antdv-next
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## ProForm
|
|
16
|
+
|
|
17
|
+
基于 Schema 驱动的表单组件,通过 `fields` 配置描述每个表单项,支持 Grid 布局、响应式属性、嵌套字段、自定义组件等。
|
|
18
|
+
|
|
19
|
+
### 基础用法
|
|
20
|
+
|
|
21
|
+
```vue
|
|
22
|
+
<script setup lang="ts">
|
|
23
|
+
import { ProForm, useForm } from '@qin-ui/antdv-next-pro';
|
|
24
|
+
|
|
25
|
+
type FormData = { name: string; age: number };
|
|
26
|
+
|
|
27
|
+
const form = useForm<FormData>({}, [
|
|
28
|
+
{
|
|
29
|
+
path: 'name',
|
|
30
|
+
label: '姓名',
|
|
31
|
+
component: 'input',
|
|
32
|
+
rules: [{ required: true }],
|
|
33
|
+
},
|
|
34
|
+
{ path: 'age', label: '年龄', component: 'input-number' },
|
|
35
|
+
]);
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<ProForm :form="form" />
|
|
40
|
+
</template>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### `useForm(initData?, initFields?, root?)` 参数
|
|
44
|
+
|
|
45
|
+
| 参数 | 类型 | 说明 |
|
|
46
|
+
| ------------ | ---------------- | -------------------- |
|
|
47
|
+
| `initData` | `DeepPartial<D>` | 表单初始数据 |
|
|
48
|
+
| `initFields` | `Field<D>[]` | 表单字段初始配置 |
|
|
49
|
+
| `root` | `boolean` | 是否创建根 form 实例 |
|
|
50
|
+
|
|
51
|
+
### `useForm` 返回值
|
|
52
|
+
|
|
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()` | `-` | 重置表单数据为初始值 |
|
|
62
|
+
|
|
63
|
+
### `ProForm` Props
|
|
64
|
+
|
|
65
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
66
|
+
| ------ | ---------------------- | ------- | ------------------------ |
|
|
67
|
+
| `form` | `Form<D>` | - | `useForm` 返回的实例 |
|
|
68
|
+
| `grid` | `boolean \| GridProps` | `false` | 启用 Grid 网格布局 |
|
|
69
|
+
| 其余 | `FormProps` | - | 透传至 antdv-next `Form` |
|
|
70
|
+
|
|
71
|
+
### 字段配置(`Field`)
|
|
72
|
+
|
|
73
|
+
所有字段共享 `Base` 公共属性,再加上各组件专属 Props。
|
|
74
|
+
|
|
75
|
+
#### 公共属性(`Base`)
|
|
76
|
+
|
|
77
|
+
| 属性 | 类型 | 说明 |
|
|
78
|
+
| -------------------- | ----------------------------------- | ------------------------------------------------- |
|
|
79
|
+
| `path` | `Path<D>` | 字段标识,对应 `formData` 中的 key |
|
|
80
|
+
| `label` | `string \| Component` | 字段标签 |
|
|
81
|
+
| `component` | 见下方组件表 | 使用的内置组件名或自定义组件 |
|
|
82
|
+
| `hidden` | `MaybeRef<boolean>` | 是否隐藏 |
|
|
83
|
+
| `rules` | `FormItemRule[]` | 校验规则 |
|
|
84
|
+
| `span` | `number` | Grid 列宽(仅 grid 模式有效) |
|
|
85
|
+
| `slots` | `Partial<ComponentSlots<FormItem>>` | FormItem 插槽(`label`/`extra`/`help`/`tooltip`) |
|
|
86
|
+
| `grid` | `boolean \| GridProps` | 嵌套字段的 Grid 配置 |
|
|
87
|
+
| `fields` | `Fields<D>` | 嵌套子字段配置 |
|
|
88
|
+
| `formItemStyle` | `CSSProperties` | FormItem 样式 |
|
|
89
|
+
| `formItemClass` | `string` | FormItem 类名 |
|
|
90
|
+
| `formItemContainer` | `Component` | FormItem 外层包裹组件 |
|
|
91
|
+
| `formItemDataAttrs` | `Record<string, string>` | 附加到 FormItem DOM 节点的属性 |
|
|
92
|
+
| `componentStyle` | `CSSProperties` | 组件样式 |
|
|
93
|
+
| `componentClass` | `string` | 组件类名 |
|
|
94
|
+
| `componentContainer` | `Component` | 组件外层包裹组件 |
|
|
95
|
+
| `componentDataAttrs` | `Record<string, string>` | 附加到组件 DOM 节点的属性 |
|
|
96
|
+
| `valueFormatter` | `ValueFormatter` | 值转换函数(支持 `get`/`set` 形式) |
|
|
97
|
+
| `modelProp` | `string` | v-model 绑定属性名,默认 `'value'` |
|
|
98
|
+
|
|
99
|
+
> **响应式支持**:除了 `component`、`fields`、`slots`、`modelProp`、`formItemContainer`、`componentContainer`、`valueFormatter` 之外,所有属性均支持 `Ref` 或 `ComputedRef`。
|
|
100
|
+
|
|
101
|
+
#### 内置组件(`component` 取值)
|
|
102
|
+
|
|
103
|
+
| 值 | 对应组件 |
|
|
104
|
+
| ------------------- | ----------------------------------------------- |
|
|
105
|
+
| `input` | Input 文本框 |
|
|
106
|
+
| `textarea` | TextArea 文本域 |
|
|
107
|
+
| `input-password` | InputPassword 密码框 |
|
|
108
|
+
| `input-otp` | InputOTP 一次性密码框 |
|
|
109
|
+
| `input-search` | InputSearch 搜索框 |
|
|
110
|
+
| `input-number` | InputNumber 数字输入框 |
|
|
111
|
+
| `select` | Select 下拉选择器 |
|
|
112
|
+
| `auto-complete` | AutoComplete 自动完成 |
|
|
113
|
+
| `cascader` | Cascader 级联选择器 |
|
|
114
|
+
| `date-picker` | DatePicker 日期选择器 |
|
|
115
|
+
| `range-picker` | RangePicker 日期范围选择器 |
|
|
116
|
+
| `time-picker` | TimePicker 时间选择器 |
|
|
117
|
+
| `time-range-picker` | TimeRangePicker 时间范围选择器 |
|
|
118
|
+
| `checkbox-group` | CheckboxGroup 复选框组 |
|
|
119
|
+
| `radio-group` | RadioGroup 单选框组 |
|
|
120
|
+
| `switch` | Switch 开关 |
|
|
121
|
+
| `slider` | Slider 滑块 |
|
|
122
|
+
| `tree-select` | TreeSelect 树形选择器 |
|
|
123
|
+
| `transfer` | Transfer 穿梭框 |
|
|
124
|
+
| `custom` | 完全自定义渲染组件(`component` 传入 Vue 组件) |
|
|
125
|
+
|
|
126
|
+
#### 自定义组件
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
// 使用 custom 内联自定义
|
|
130
|
+
{
|
|
131
|
+
path: 'custom',
|
|
132
|
+
component: (props) => h('div', props, '自定义内容'),
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
#### 注册可复用自定义组件
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
import { registerComponent } from '@qin-ui/antdv-next-pro';
|
|
140
|
+
import MyRateComponent from './MyRate.vue';
|
|
141
|
+
|
|
142
|
+
// 注册后在 schema 中即可使用字符串引用
|
|
143
|
+
registerComponent('my-rate', MyRateComponent);
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
配合 TypeScript 模块扩充获得完整类型提示:
|
|
147
|
+
|
|
148
|
+
```ts
|
|
149
|
+
declare module '@qin-ui/antdv-next-pro' {
|
|
150
|
+
interface CustomFieldTypeMap {
|
|
151
|
+
'my-rate': typeof MyRateComponent;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## ProTable
|
|
159
|
+
|
|
160
|
+
基于 Schema 驱动的表格组件,与 `ProForm` 深度集成支持搜索联动。
|
|
161
|
+
|
|
162
|
+
### 基础用法
|
|
163
|
+
|
|
164
|
+
```vue
|
|
165
|
+
<script setup lang="ts">
|
|
166
|
+
import { ProTable, useTable } from '@qin-ui/antdv-next-pro';
|
|
167
|
+
|
|
168
|
+
type Row = { id: number; name: string };
|
|
169
|
+
|
|
170
|
+
const table = useTable<Row>({
|
|
171
|
+
columns: [
|
|
172
|
+
{ title: 'ID', dataIndex: 'id' },
|
|
173
|
+
{ title: '姓名', dataIndex: 'name' },
|
|
174
|
+
],
|
|
175
|
+
});
|
|
176
|
+
</script>
|
|
177
|
+
|
|
178
|
+
<template>
|
|
179
|
+
<ProTable :table="table" :search="() => fetchData()" />
|
|
180
|
+
</template>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### `useTable` 参数
|
|
184
|
+
|
|
185
|
+
| 参数 | 类型 | 说明 |
|
|
186
|
+
| -------------- | ---------------- | ------------------------------------- |
|
|
187
|
+
| `columns` | `Column<D>[]` | 列配置,支持 `hidden` 属性 |
|
|
188
|
+
| `dataSource` | `T[]` | 静态数据源 |
|
|
189
|
+
| `pageParam` | `PageParam` | 分页初始参数 |
|
|
190
|
+
| `searchParam` | `DeepPartial<D>` | 搜索初始参数 |
|
|
191
|
+
| `searchFields` | `Fields<D>` | 搜索表单字段配置(同 ProForm Fields) |
|
|
192
|
+
|
|
193
|
+
### `ProTable` Props
|
|
194
|
+
|
|
195
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
196
|
+
| ------------------ | ------------------------------------------- | ------- | ------------------------------------- |
|
|
197
|
+
| `table` | `Table<D>` | - | `useTable` 返回的实例 |
|
|
198
|
+
| `search` | `() => Promise<void>` | - | 触发查询的回调 |
|
|
199
|
+
| `addIndexColumn` | `boolean` | `false` | 自动在首列插入序号列 |
|
|
200
|
+
| `immediateSearch` | `boolean` | `false` | 挂载时立即触发一次查询 |
|
|
201
|
+
| `control` | `boolean \| { sizeControl, columnControl }` | `true` | 是否显示表格尺寸/列配置控制条 |
|
|
202
|
+
| `searchFormConfig` | `SearchFormConfig` | - | 搜索表单配置(`layout`、`expand` 等) |
|
|
203
|
+
| `tableContainer` | `Component \| false` | - | 表格区域外层包裹容器 |
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
## ComponentProvider
|
|
208
|
+
|
|
209
|
+
全局默认属性配置提供者,作为 `ProForm` / `ProTable` 的父组件使用,通过 `componentVars` 配置各组件的默认 Props。
|
|
210
|
+
|
|
211
|
+
```vue
|
|
212
|
+
<template>
|
|
213
|
+
<ComponentProvider :component-vars="config">
|
|
214
|
+
<ProForm :form="form" />
|
|
215
|
+
<ProTable :table="table" />
|
|
216
|
+
</ComponentProvider>
|
|
217
|
+
</template>
|
|
218
|
+
|
|
219
|
+
<script setup lang="ts">
|
|
220
|
+
import { ComponentProvider } from '@qin-ui/antdv-next-pro';
|
|
221
|
+
|
|
222
|
+
const config = {
|
|
223
|
+
'pro-form': { grid: { gutter: 24 } },
|
|
224
|
+
'pro-form-item': { validateFirst: true, span: 6 },
|
|
225
|
+
input: { maxlength: 200, allowClear: true },
|
|
226
|
+
select: { allowClear: true, placeholder: '请选择' },
|
|
227
|
+
'date-picker': { style: { width: '100%' } },
|
|
228
|
+
'pro-table': {
|
|
229
|
+
addIndexColumn: true,
|
|
230
|
+
pagination: { showTotal: total => `共 ${total} 条` },
|
|
231
|
+
},
|
|
232
|
+
};
|
|
233
|
+
</script>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
## 全局注册
|
|
239
|
+
|
|
240
|
+
```ts
|
|
241
|
+
import { createApp } from 'vue';
|
|
242
|
+
import AntdvNextPro from '@qin-ui/antdv-next-pro';
|
|
243
|
+
|
|
244
|
+
createApp(App).use(AntdvNextPro).mount('#app');
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
或单独注册组件:
|
|
248
|
+
|
|
249
|
+
```ts
|
|
250
|
+
import {
|
|
251
|
+
ProForm,
|
|
252
|
+
ProTable,
|
|
253
|
+
ProComponentProvider,
|
|
254
|
+
} from '@qin-ui/antdv-next-pro';
|
|
255
|
+
|
|
256
|
+
app.use(ProForm);
|
|
257
|
+
app.use(ProTable);
|
|
258
|
+
app.use(ProComponentProvider);
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
---
|
|
262
|
+
|
|
263
|
+
## Peer Dependencies
|
|
264
|
+
|
|
265
|
+
| 包 | 版本 |
|
|
266
|
+
| ------------ | -------- |
|
|
267
|
+
| `antdv-next` | `^1.1.0` |
|
|
268
|
+
| `vue` | `^3.5.0` |
|
|
@@ -1,5 +1,165 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { defineComponent, provide, renderSlot } from "vue";
|
|
2
|
+
import { g as getObject } from "../core/index-BrBzu6aj.js";
|
|
3
|
+
const getPopupContainer = (triggerNode) => triggerNode.closest(".ant-form");
|
|
4
|
+
const INJECT_CONFIG = {
|
|
5
|
+
"pro-table": {
|
|
6
|
+
injectionKey: Symbol(""),
|
|
7
|
+
default: {
|
|
8
|
+
pagination: {
|
|
9
|
+
showTotal: (total) => `共 ${total} 条`,
|
|
10
|
+
showSizeChanger: true,
|
|
11
|
+
pageSizeOptions: ["10", "20", "30", "40", "50", "100"],
|
|
12
|
+
showQuickJumper: true
|
|
13
|
+
},
|
|
14
|
+
searchFormConfig: {
|
|
15
|
+
layout: "grid",
|
|
16
|
+
expand: { minExpandRows: 2, expandStatus: false }
|
|
17
|
+
},
|
|
18
|
+
control: true,
|
|
19
|
+
addIndexColumn: true
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"pro-form": {
|
|
23
|
+
injectionKey: Symbol(""),
|
|
24
|
+
default: { grid: { gutter: { xs: 8, sm: 16, md: 16, lg: 24 } } }
|
|
25
|
+
},
|
|
26
|
+
"pro-form-item": {
|
|
27
|
+
injectionKey: Symbol(""),
|
|
28
|
+
default: { validateFirst: true, span: 8 }
|
|
29
|
+
},
|
|
30
|
+
// field
|
|
31
|
+
input: {
|
|
32
|
+
injectionKey: Symbol(""),
|
|
33
|
+
default: { maxlength: 100, allowClear: true, placeholder: "请输入" }
|
|
34
|
+
},
|
|
35
|
+
textarea: {
|
|
36
|
+
injectionKey: Symbol(""),
|
|
37
|
+
default: {
|
|
38
|
+
maxlength: 200,
|
|
39
|
+
autoSize: { minRows: 3, maxRows: 6 },
|
|
40
|
+
showCount: true,
|
|
41
|
+
allowClear: true,
|
|
42
|
+
placeholder: "请输入"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"input-password": {
|
|
46
|
+
injectionKey: Symbol(""),
|
|
47
|
+
default: { maxlength: 100, allowClear: true, placeholder: "请输入" }
|
|
48
|
+
},
|
|
49
|
+
"input-search": {
|
|
50
|
+
injectionKey: Symbol(""),
|
|
51
|
+
default: {}
|
|
52
|
+
},
|
|
53
|
+
"input-number": {
|
|
54
|
+
injectionKey: Symbol(""),
|
|
55
|
+
default: {
|
|
56
|
+
max: 10 ** 15 - 1,
|
|
57
|
+
min: -1000000000000001,
|
|
58
|
+
controls: false,
|
|
59
|
+
placeholder: "请输入",
|
|
60
|
+
style: { width: "100%" }
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
"input-otp": {
|
|
64
|
+
injectionKey: Symbol(""),
|
|
65
|
+
default: {}
|
|
66
|
+
},
|
|
67
|
+
"auto-complete": {
|
|
68
|
+
injectionKey: Symbol(""),
|
|
69
|
+
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
|
|
70
|
+
},
|
|
71
|
+
select: {
|
|
72
|
+
injectionKey: Symbol(""),
|
|
73
|
+
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
|
|
74
|
+
},
|
|
75
|
+
cascader: {
|
|
76
|
+
injectionKey: Symbol(""),
|
|
77
|
+
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
|
|
78
|
+
},
|
|
79
|
+
"date-picker": {
|
|
80
|
+
injectionKey: Symbol(""),
|
|
81
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
82
|
+
},
|
|
83
|
+
"date-picker.date": {
|
|
84
|
+
injectionKey: Symbol(""),
|
|
85
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
86
|
+
},
|
|
87
|
+
"date-picker.week": {
|
|
88
|
+
injectionKey: Symbol(""),
|
|
89
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
90
|
+
},
|
|
91
|
+
"date-picker.month": {
|
|
92
|
+
injectionKey: Symbol(""),
|
|
93
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
94
|
+
},
|
|
95
|
+
"date-picker.year": {
|
|
96
|
+
injectionKey: Symbol(""),
|
|
97
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
98
|
+
},
|
|
99
|
+
"date-picker.quarter": {
|
|
100
|
+
injectionKey: Symbol(""),
|
|
101
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
102
|
+
},
|
|
103
|
+
"range-picker": {
|
|
104
|
+
injectionKey: Symbol(""),
|
|
105
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
106
|
+
},
|
|
107
|
+
"time-picker": {
|
|
108
|
+
injectionKey: Symbol(""),
|
|
109
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
110
|
+
},
|
|
111
|
+
"time-range-picker": {
|
|
112
|
+
injectionKey: Symbol(""),
|
|
113
|
+
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
114
|
+
},
|
|
115
|
+
"checkbox-group": {
|
|
116
|
+
injectionKey: Symbol(""),
|
|
117
|
+
default: {}
|
|
118
|
+
},
|
|
119
|
+
"radio-group": {
|
|
120
|
+
injectionKey: Symbol(""),
|
|
121
|
+
default: {}
|
|
122
|
+
},
|
|
123
|
+
switch: {
|
|
124
|
+
injectionKey: Symbol(""),
|
|
125
|
+
default: { modelProp: "checked" }
|
|
126
|
+
},
|
|
127
|
+
slider: {
|
|
128
|
+
injectionKey: Symbol(""),
|
|
129
|
+
default: {}
|
|
130
|
+
},
|
|
131
|
+
"tree-select": {
|
|
132
|
+
injectionKey: Symbol(""),
|
|
133
|
+
default: {}
|
|
134
|
+
},
|
|
135
|
+
transfer: {
|
|
136
|
+
injectionKey: Symbol(""),
|
|
137
|
+
default: {}
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
141
|
+
...{
|
|
142
|
+
inheritAttrs: false
|
|
143
|
+
},
|
|
144
|
+
__name: "index",
|
|
145
|
+
props: {
|
|
146
|
+
componentVars: {}
|
|
147
|
+
},
|
|
148
|
+
setup(__props) {
|
|
149
|
+
const props = __props;
|
|
150
|
+
if (props.componentVars) {
|
|
151
|
+
Object.entries(props.componentVars).forEach(([key, val]) => {
|
|
152
|
+
const config = INJECT_CONFIG[key];
|
|
153
|
+
if (!config) return;
|
|
154
|
+
provide(config.injectionKey, { ...config.default, ...getObject(val) });
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
return (_ctx, _cache) => {
|
|
158
|
+
return renderSlot(_ctx.$slots, "default");
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
});
|
|
2
162
|
export {
|
|
3
|
-
|
|
4
|
-
|
|
163
|
+
INJECT_CONFIG,
|
|
164
|
+
_sfc_main as default
|
|
5
165
|
};
|
|
@@ -1,138 +1,5 @@
|
|
|
1
|
-
import { inject, camelize, reactive, provide, ref, toValue
|
|
1
|
+
import { inject, camelize, reactive, provide, ref, toValue } from "vue";
|
|
2
2
|
import { i as isPlainObject, c as cloneDeep, s as set, g as get, p as pick, t as toPath } from "../vendor/utils/lodash-es-p6jau26B.js";
|
|
3
|
-
const getPopupContainer = (triggerNode) => triggerNode.closest(".ant-form");
|
|
4
|
-
const INJECT_CONFIG = {
|
|
5
|
-
"pro-table": {
|
|
6
|
-
injectionKey: Symbol(""),
|
|
7
|
-
default: {
|
|
8
|
-
pagination: {
|
|
9
|
-
showTotal: (total) => `共 ${total} 条`,
|
|
10
|
-
showSizeChanger: true,
|
|
11
|
-
pageSizeOptions: ["10", "20", "30", "40", "50", "100"],
|
|
12
|
-
showQuickJumper: true
|
|
13
|
-
},
|
|
14
|
-
searchFormConfig: {
|
|
15
|
-
layout: "grid",
|
|
16
|
-
expand: { minExpandRows: 2, expandStatus: false }
|
|
17
|
-
},
|
|
18
|
-
control: true,
|
|
19
|
-
addIndexColumn: true
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
"pro-form": {
|
|
23
|
-
injectionKey: Symbol(""),
|
|
24
|
-
default: { grid: { gutter: { xs: 8, sm: 16, md: 16, lg: 24 } } }
|
|
25
|
-
},
|
|
26
|
-
"pro-form-item": {
|
|
27
|
-
injectionKey: Symbol(""),
|
|
28
|
-
default: { validateFirst: true, span: 8 }
|
|
29
|
-
},
|
|
30
|
-
// field
|
|
31
|
-
input: {
|
|
32
|
-
injectionKey: Symbol(""),
|
|
33
|
-
default: { maxlength: 100, allowClear: true, placeholder: "请输入" }
|
|
34
|
-
},
|
|
35
|
-
textarea: {
|
|
36
|
-
injectionKey: Symbol(""),
|
|
37
|
-
default: {
|
|
38
|
-
maxlength: 200,
|
|
39
|
-
autoSize: { minRows: 3, maxRows: 6 },
|
|
40
|
-
showCount: true,
|
|
41
|
-
allowClear: true,
|
|
42
|
-
placeholder: "请输入"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
"input-password": {
|
|
46
|
-
injectionKey: Symbol(""),
|
|
47
|
-
default: { maxlength: 100, allowClear: true, placeholder: "请输入" }
|
|
48
|
-
},
|
|
49
|
-
"input-search": {
|
|
50
|
-
injectionKey: Symbol(""),
|
|
51
|
-
default: {}
|
|
52
|
-
},
|
|
53
|
-
"input-number": {
|
|
54
|
-
injectionKey: Symbol(""),
|
|
55
|
-
default: {
|
|
56
|
-
max: 10 ** 15 - 1,
|
|
57
|
-
min: -1000000000000001,
|
|
58
|
-
controls: false,
|
|
59
|
-
placeholder: "请输入",
|
|
60
|
-
style: { width: "100%" }
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
"input-otp": {
|
|
64
|
-
injectionKey: Symbol(""),
|
|
65
|
-
default: {}
|
|
66
|
-
},
|
|
67
|
-
select: {
|
|
68
|
-
injectionKey: Symbol(""),
|
|
69
|
-
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
|
|
70
|
-
},
|
|
71
|
-
cascader: {
|
|
72
|
-
injectionKey: Symbol(""),
|
|
73
|
-
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
|
|
74
|
-
},
|
|
75
|
-
"date-picker": {
|
|
76
|
-
injectionKey: Symbol(""),
|
|
77
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
78
|
-
},
|
|
79
|
-
"date-picker.date": {
|
|
80
|
-
injectionKey: Symbol(""),
|
|
81
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
82
|
-
},
|
|
83
|
-
"date-picker.week": {
|
|
84
|
-
injectionKey: Symbol(""),
|
|
85
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
86
|
-
},
|
|
87
|
-
"date-picker.month": {
|
|
88
|
-
injectionKey: Symbol(""),
|
|
89
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
90
|
-
},
|
|
91
|
-
"date-picker.year": {
|
|
92
|
-
injectionKey: Symbol(""),
|
|
93
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
94
|
-
},
|
|
95
|
-
"date-picker.quarter": {
|
|
96
|
-
injectionKey: Symbol(""),
|
|
97
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
98
|
-
},
|
|
99
|
-
"range-picker": {
|
|
100
|
-
injectionKey: Symbol(""),
|
|
101
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
102
|
-
},
|
|
103
|
-
"time-picker": {
|
|
104
|
-
injectionKey: Symbol(""),
|
|
105
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
106
|
-
},
|
|
107
|
-
"time-range-picker": {
|
|
108
|
-
injectionKey: Symbol(""),
|
|
109
|
-
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
|
|
110
|
-
},
|
|
111
|
-
"checkbox-group": {
|
|
112
|
-
injectionKey: Symbol(""),
|
|
113
|
-
default: {}
|
|
114
|
-
},
|
|
115
|
-
"radio-group": {
|
|
116
|
-
injectionKey: Symbol(""),
|
|
117
|
-
default: {}
|
|
118
|
-
},
|
|
119
|
-
switch: {
|
|
120
|
-
injectionKey: Symbol(""),
|
|
121
|
-
default: { modelProp: "checked" }
|
|
122
|
-
},
|
|
123
|
-
slider: {
|
|
124
|
-
injectionKey: Symbol(""),
|
|
125
|
-
default: {}
|
|
126
|
-
},
|
|
127
|
-
"tree-select": {
|
|
128
|
-
injectionKey: Symbol(""),
|
|
129
|
-
default: {}
|
|
130
|
-
},
|
|
131
|
-
transfer: {
|
|
132
|
-
injectionKey: Symbol(""),
|
|
133
|
-
default: {}
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
3
|
const InjectionFormKey = Symbol("form");
|
|
137
4
|
const InjectionPathKey = Symbol("path");
|
|
138
5
|
function getObject(val) {
|
|
@@ -482,38 +349,14 @@ const useTable = (params) => {
|
|
|
482
349
|
resetQueryParams
|
|
483
350
|
};
|
|
484
351
|
};
|
|
485
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
486
|
-
...{
|
|
487
|
-
inheritAttrs: false
|
|
488
|
-
},
|
|
489
|
-
__name: "index",
|
|
490
|
-
props: {
|
|
491
|
-
componentVars: {}
|
|
492
|
-
},
|
|
493
|
-
setup(__props) {
|
|
494
|
-
const props = __props;
|
|
495
|
-
if (props.componentVars) {
|
|
496
|
-
Object.entries(props.componentVars).forEach(([key, val]) => {
|
|
497
|
-
const config = INJECT_CONFIG[key];
|
|
498
|
-
if (!config) return;
|
|
499
|
-
provide(config.injectionKey, { ...config.default, ...getObject(val) });
|
|
500
|
-
});
|
|
501
|
-
}
|
|
502
|
-
return (_ctx, _cache) => {
|
|
503
|
-
return renderSlot(_ctx.$slots, "default");
|
|
504
|
-
};
|
|
505
|
-
}
|
|
506
|
-
});
|
|
507
352
|
export {
|
|
508
353
|
InjectionFormKey as I,
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
InjectionPathKey as b,
|
|
354
|
+
InjectionPathKey as a,
|
|
355
|
+
useFields as b,
|
|
512
356
|
camelizeProperties as c,
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
357
|
+
useFormRef as d,
|
|
358
|
+
useFormData as e,
|
|
359
|
+
useTable as f,
|
|
516
360
|
getObject as g,
|
|
517
|
-
useTable as h,
|
|
518
361
|
useForm as u
|
|
519
362
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { defineComponent, provide, computed, inject, useSlots, watchEffect, createBlock, openBlock, unref, mergeProps, withCtx, createVNode, renderSlot, toValue, normalizeProps, guardReactiveProps, resolveComponent, createElementBlock, Fragment, renderList, createSlots, ref, useAttrs, createCommentVNode, resolveDynamicComponent, isVNode, createTextVNode, toDisplayString } from "vue";
|
|
2
|
-
import { FormItem,
|
|
2
|
+
import { FormItem, Col, Table, Form, Input, TextArea, InputSearch, InputPassword, InputNumber, InputOTP, AutoComplete, Select, Cascader, DatePicker, DateRangePicker, TimePicker, TimeRangePicker, CheckboxGroup, RadioGroup, Switch, Slider, TreeSelect, Transfer, Row } from "antdv-next";
|
|
3
3
|
import { useDisabledContextProvider, useDisabledContext } from "antdv-next/dist/config-provider/DisabledContext";
|
|
4
|
-
import "
|
|
5
|
-
import { I as InjectionFormKey,
|
|
4
|
+
import { INJECT_CONFIG } from "../component-provider/index.js";
|
|
5
|
+
import { I as InjectionFormKey, c as camelizeProperties, a as InjectionPathKey, g as getObject, u as useForm$1, b as useFields$1, d as useFormRef$1 } from "../core/index-BrBzu6aj.js";
|
|
6
6
|
import { i as isPlainObject, t as toPath, o as omit, c as cloneDeep } from "../vendor/utils/lodash-es-p6jau26B.js";
|
|
7
7
|
const tableProps = () => Table.props || {};
|
|
8
|
-
const gridItemProps = () =>
|
|
8
|
+
const gridItemProps = () => Col.props || {};
|
|
9
9
|
const formItemProps = () => FormItem.props || {};
|
|
10
10
|
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
11
11
|
...{ name: "ProForm", inheritAttrs: false },
|
|
@@ -58,6 +58,7 @@ const COMPONENT_MAP = /* @__PURE__ */ new Map([
|
|
|
58
58
|
["input-password", InputPassword],
|
|
59
59
|
["input-number", InputNumber],
|
|
60
60
|
["input-otp", InputOTP],
|
|
61
|
+
["auto-complete", AutoComplete],
|
|
61
62
|
["select", Select],
|
|
62
63
|
["cascader", Cascader],
|
|
63
64
|
["date-picker", DatePicker],
|
|
@@ -71,6 +72,9 @@ const COMPONENT_MAP = /* @__PURE__ */ new Map([
|
|
|
71
72
|
["tree-select", TreeSelect],
|
|
72
73
|
["transfer", Transfer]
|
|
73
74
|
]);
|
|
75
|
+
const registerComponent = (name, component) => {
|
|
76
|
+
COMPONENT_MAP.set(name, component);
|
|
77
|
+
};
|
|
74
78
|
const TeleportComponentNamePrefix = "TeleportComponent_";
|
|
75
79
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
76
80
|
__name: "index",
|
|
@@ -105,7 +109,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
105
109
|
const componentProps = { slots: {} };
|
|
106
110
|
const formItemSlots = {};
|
|
107
111
|
if (isPlainObject(props.field)) {
|
|
108
|
-
const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, ...rest } = props.field;
|
|
112
|
+
const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, ...rest } = props.field;
|
|
109
113
|
const {
|
|
110
114
|
class: injectClassName,
|
|
111
115
|
style: injectStyle,
|
|
@@ -124,18 +128,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
124
128
|
formItemProps2 = mergeProps(
|
|
125
129
|
injectRest,
|
|
126
130
|
{ class: injectClassName, style: injectStyle },
|
|
127
|
-
{ class: toValue(formItemClass), style: toValue(formItemStyle) }
|
|
131
|
+
{ class: toValue(formItemClass), style: toValue(formItemStyle) },
|
|
132
|
+
formItemDataAttrs
|
|
128
133
|
);
|
|
129
134
|
formItemProps2.container = formItemContainer ?? injectFormItemContainer;
|
|
130
135
|
Object.keys(rest).forEach((k) => {
|
|
131
136
|
if (gridItemPropKeys.includes(k)) {
|
|
132
137
|
gridItemProps2[k] = rest[k];
|
|
133
|
-
} else if (formItemPropKeys.includes(k)
|
|
138
|
+
} else if (formItemPropKeys.includes(k)) {
|
|
134
139
|
formItemProps2[k] = rest[k];
|
|
135
140
|
} else {
|
|
136
141
|
componentProps[k] = rest[k];
|
|
137
142
|
}
|
|
138
143
|
});
|
|
144
|
+
Object.assign(componentProps, componentDataAttrs);
|
|
139
145
|
Object.keys(slots).forEach((k) => {
|
|
140
146
|
if (FORM_ITEM_SLOT_KEYS.includes(k)) {
|
|
141
147
|
formItemSlots[k] = slots[k];
|
|
@@ -281,9 +287,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
281
287
|
const useForm = useForm$1;
|
|
282
288
|
const getInitProps = (field) => {
|
|
283
289
|
const { component } = field;
|
|
284
|
-
const
|
|
290
|
+
const picker = component === "date-picker" ? "" : field.picker;
|
|
285
291
|
if (COMPONENT_MAP.has(component)) {
|
|
286
|
-
const k = [component,
|
|
292
|
+
const k = [component, picker].filter(Boolean).join(".");
|
|
287
293
|
if (INJECT_CONFIG[k]) {
|
|
288
294
|
const config = INJECT_CONFIG[k];
|
|
289
295
|
const injectProps = inject(config.injectionKey, config.default);
|
|
@@ -442,6 +448,7 @@ export {
|
|
|
442
448
|
useFields as e,
|
|
443
449
|
useFormRef as f,
|
|
444
450
|
getInitProps as g,
|
|
451
|
+
registerComponent as r,
|
|
445
452
|
tableProps as t,
|
|
446
453
|
useForm as u
|
|
447
454
|
};
|
package/es/form/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { c, _, b, C, a, F, d, T, _ as _2, g, e, u, f } from "./index-
|
|
2
|
-
import { I,
|
|
1
|
+
import { c, _, b, C, a, F, d, T, _ as _2, g, r, e, u, f } from "./index-CMvNb50_.js";
|
|
2
|
+
import { I, a as a2, e as e2 } from "../core/index-BrBzu6aj.js";
|
|
3
3
|
export {
|
|
4
4
|
c as BaseField,
|
|
5
5
|
_ as BaseForm,
|
|
@@ -8,13 +8,14 @@ export {
|
|
|
8
8
|
a as ContainerFragment,
|
|
9
9
|
F as FORM_ITEM_SLOT_KEYS,
|
|
10
10
|
I as InjectionFormKey,
|
|
11
|
-
|
|
11
|
+
a2 as InjectionPathKey,
|
|
12
12
|
d as SlotComponent,
|
|
13
13
|
T as TeleportComponentNamePrefix,
|
|
14
14
|
_2 as default,
|
|
15
15
|
g as getInitProps,
|
|
16
|
+
r as registerComponent,
|
|
16
17
|
e as useFields,
|
|
17
18
|
u as useForm,
|
|
18
|
-
|
|
19
|
+
e2 as useFormData,
|
|
19
20
|
f as useFormRef
|
|
20
21
|
};
|
package/es/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { AllowedComponentProps } from 'vue';
|
|
2
2
|
import { AnyObject } from 'antdv-next/dist/_util/type';
|
|
3
3
|
import { App } from 'vue';
|
|
4
|
+
import { AutoComplete } from 'antdv-next';
|
|
4
5
|
import { ButtonSize } from 'antdv-next';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { CheckboxGroupProps } from 'antdv-next';
|
|
6
|
+
import { Cascader } from 'antdv-next';
|
|
7
|
+
import { CheckboxGroup } from 'antdv-next';
|
|
8
8
|
import { ColProps } from 'antdv-next';
|
|
9
9
|
import { Component } from 'vue';
|
|
10
10
|
import { ComponentCustomProps } from 'vue';
|
|
@@ -13,12 +13,13 @@ import { ComponentOptionsBase } from 'vue';
|
|
|
13
13
|
import { ComponentOptionsMixin } from 'vue';
|
|
14
14
|
import { ComponentProps } from 'vue-component-type-helpers';
|
|
15
15
|
import { ComponentProvideOptions } from 'vue';
|
|
16
|
+
import { ComponentSlots } from 'vue-component-type-helpers';
|
|
16
17
|
import { ComputedRef } from 'vue';
|
|
17
18
|
import { CreateComponentPublicInstanceWithMixins } from 'vue';
|
|
18
19
|
import { CSSProperties } from 'vue';
|
|
19
20
|
import { Data } from '@qin-ui/core';
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
21
|
+
import { DatePicker } from 'antdv-next';
|
|
22
|
+
import { DateRangePicker } from 'antdv-next';
|
|
22
23
|
import { DeepPartial } from '@qin-ui/core';
|
|
23
24
|
import { DefineComponent } from 'vue';
|
|
24
25
|
import { ExtendWithAny } from '@qin-ui/core';
|
|
@@ -42,52 +43,37 @@ import { HTMLAttributes } from 'vue';
|
|
|
42
43
|
import { InjectionFormKey } from '@qin-ui/core';
|
|
43
44
|
import { InjectionKey } from 'vue';
|
|
44
45
|
import { InjectionPathKey } from '@qin-ui/core';
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import { InputSearchProps } from 'antdv-next';
|
|
51
|
-
import { InputSlots } from 'antdv-next';
|
|
46
|
+
import { Input } from 'antdv-next';
|
|
47
|
+
import { InputNumber } from 'antdv-next';
|
|
48
|
+
import { InputOTP } from 'antdv-next';
|
|
49
|
+
import { InputPassword } from 'antdv-next';
|
|
50
|
+
import { InputSearch } from 'antdv-next';
|
|
52
51
|
import { KeyExpandString } from '@qin-ui/core';
|
|
53
52
|
import { MaybeRef } from 'vue';
|
|
54
|
-
import { MonthPickerProps } from 'antdv-next';
|
|
55
|
-
import { OPTSlots } from 'antdv-next/dist/input/OTP/index';
|
|
56
53
|
import { PageParam } from '@qin-ui/core';
|
|
57
|
-
import { PasswordSlots } from 'antdv-next/dist/input/Password';
|
|
58
54
|
import { Path } from '@qin-ui/core';
|
|
59
55
|
import { Paths } from '@qin-ui/core';
|
|
60
56
|
import { Plugin as Plugin_2 } from 'vue';
|
|
61
57
|
import { PublicProps } from 'vue';
|
|
62
|
-
import {
|
|
63
|
-
import { RangePickerProps } from 'antdv-next';
|
|
64
|
-
import { RangePickerSlots } from 'antdv-next/dist/date-picker/generatePicker/generateRangePicker';
|
|
58
|
+
import { RadioGroup } from 'antdv-next';
|
|
65
59
|
import { Raw } from 'vue';
|
|
66
60
|
import { RequiredMark } from 'antdv-next/dist/form/Form';
|
|
67
61
|
import { RowProps } from 'antdv-next';
|
|
68
62
|
import { Rule } from 'antdv-next/dist/form/types';
|
|
69
63
|
import { ScrollFocusOptions } from 'antdv-next/dist/form/interface';
|
|
70
|
-
import {
|
|
71
|
-
import { SelectProps } from 'antdv-next';
|
|
72
|
-
import { SelectSlots } from 'antdv-next';
|
|
64
|
+
import { Select } from 'antdv-next';
|
|
73
65
|
import { ShallowUnwrapRef } from 'vue';
|
|
74
|
-
import {
|
|
75
|
-
import { SliderSlots } from 'antdv-next/dist/slider/index';
|
|
66
|
+
import { Slider } from 'antdv-next';
|
|
76
67
|
import { Slot } from 'vue';
|
|
77
|
-
import {
|
|
78
|
-
import { SwitchSlots } from 'antdv-next';
|
|
68
|
+
import { Switch } from 'antdv-next';
|
|
79
69
|
import { Table as Table_2 } from '@qin-ui/core';
|
|
80
70
|
import { TableColumnType } from 'antdv-next';
|
|
81
71
|
import { TableProps } from 'antdv-next';
|
|
82
|
-
import {
|
|
83
|
-
import {
|
|
84
|
-
import {
|
|
85
|
-
import {
|
|
86
|
-
import {
|
|
87
|
-
import { TransferProps } from 'antdv-next';
|
|
88
|
-
import { TransferSlots } from 'antdv-next';
|
|
89
|
-
import { TreeSelectProps } from 'antdv-next';
|
|
90
|
-
import { TreeSelectSlots } from 'antdv-next';
|
|
72
|
+
import { TextArea } from 'antdv-next';
|
|
73
|
+
import { TimePicker } from 'antdv-next';
|
|
74
|
+
import { TimeRangePicker } from 'antdv-next';
|
|
75
|
+
import { Transfer } from 'antdv-next';
|
|
76
|
+
import { TreeSelect } from 'antdv-next';
|
|
91
77
|
import { useFields as useFields_2 } from '@qin-ui/core';
|
|
92
78
|
import { useFormData } from '@qin-ui/core';
|
|
93
79
|
import { useFormRef as useFormRef_2 } from '@qin-ui/core';
|
|
@@ -95,7 +81,6 @@ import { ValidateMessages } from 'antdv-next/dist/form/types';
|
|
|
95
81
|
import { Variant } from 'antdv-next/dist/config-provider/context';
|
|
96
82
|
import { VNode } from 'vue';
|
|
97
83
|
import { VNodeProps } from 'vue';
|
|
98
|
-
import { WeekPickerProps } from 'antdv-next';
|
|
99
84
|
|
|
100
85
|
declare const __VLS_component: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
101
86
|
|
|
@@ -154,17 +139,7 @@ export declare interface Base<D extends Data = Data> {
|
|
|
154
139
|
* }
|
|
155
140
|
* ```
|
|
156
141
|
*/
|
|
157
|
-
slots?: Partial<
|
|
158
|
-
/**
|
|
159
|
-
* @description 字段formItem样式属性
|
|
160
|
-
* @example { marginBottom: '8px', padding: '12px' }
|
|
161
|
-
*/
|
|
162
|
-
formItemStyle?: CSSProperties;
|
|
163
|
-
/**
|
|
164
|
-
* @description 字段formItem样式类名
|
|
165
|
-
* @example 'custom-form-item' | 'required-field'
|
|
166
|
-
*/
|
|
167
|
-
formItemClass?: string;
|
|
142
|
+
slots?: Partial<ComponentSlots<typeof FormItem>>;
|
|
168
143
|
/**
|
|
169
144
|
* @description 嵌套子字段配置
|
|
170
145
|
* @example [{ key: 'firstName', label: '名' }, { key: 'lastName', label: '姓' }]
|
|
@@ -175,11 +150,26 @@ export declare interface Base<D extends Data = Data> {
|
|
|
175
150
|
* @example boolean | { gutter: 24 }
|
|
176
151
|
*/
|
|
177
152
|
grid?: Grid;
|
|
153
|
+
/**
|
|
154
|
+
* @description 字段formItem样式属性
|
|
155
|
+
* @example { marginBottom: '8px', padding: '12px' }
|
|
156
|
+
*/
|
|
157
|
+
formItemStyle?: CSSProperties;
|
|
158
|
+
/**
|
|
159
|
+
* @description 字段formItem样式类名
|
|
160
|
+
* @example 'custom-form-item' | 'required-field'
|
|
161
|
+
*/
|
|
162
|
+
formItemClass?: string;
|
|
178
163
|
/**
|
|
179
164
|
* @description 字段formItem容器包裹组件
|
|
180
165
|
* @example (props, ctx) => h('div', { class: 'custom-container' }, ctx.slots.default?.())
|
|
181
166
|
*/
|
|
182
167
|
formItemContainer?: ContainerComponent;
|
|
168
|
+
/**
|
|
169
|
+
* @description 将属性附加到 FormItem 的 DOM 节点
|
|
170
|
+
* @example { 'data-form-item-test': 'test-value', 'aria-label': 'name' }
|
|
171
|
+
*/
|
|
172
|
+
formItemDataAttrs?: Record<string, string>;
|
|
183
173
|
/**
|
|
184
174
|
* @description 字段component样式属性
|
|
185
175
|
* @example { width: '100%', borderColor: '#d9d9d9' }
|
|
@@ -195,6 +185,11 @@ export declare interface Base<D extends Data = Data> {
|
|
|
195
185
|
* @example (props, ctx) => h('div', { class: 'input-wrapper' }, ctx.slots.default?.())
|
|
196
186
|
*/
|
|
197
187
|
componentContainer?: ContainerComponent;
|
|
188
|
+
/**
|
|
189
|
+
* @description 将属性附加到表单组件的 DOM 节点
|
|
190
|
+
* @example { 'data-test': 'input-value', 'aria-label': 'name' }
|
|
191
|
+
*/
|
|
192
|
+
componentDataAttrs?: Record<string, string>;
|
|
198
193
|
/**
|
|
199
194
|
* @description 字段值处理函数,在onUpdateValue前执行,函数返回值将作为更新值,也可设置get和set函数,用于处理字段值
|
|
200
195
|
* @example (val) => val?.trim()
|
|
@@ -204,16 +199,6 @@ export declare interface Base<D extends Data = Data> {
|
|
|
204
199
|
* @description 组件v-model双向绑定更新属性名,默认'value'
|
|
205
200
|
*/
|
|
206
201
|
modelProp?: string;
|
|
207
|
-
/**
|
|
208
|
-
* @description 以data-form-item-开始的属性名将会被渲染至formItem的dom节点
|
|
209
|
-
* @example { 'data-form-item-test': 'test-value' }
|
|
210
|
-
*/
|
|
211
|
-
[key: `data-form-item-${string}`]: string;
|
|
212
|
-
/**
|
|
213
|
-
* @description 以data-component-开始的属性名将会被渲染至component的dom节点
|
|
214
|
-
* @example { 'data-component-test': 'test-value' }
|
|
215
|
-
*/
|
|
216
|
-
[key: `data-component-${string}`]: string;
|
|
217
202
|
}
|
|
218
203
|
|
|
219
204
|
/**
|
|
@@ -269,7 +254,7 @@ export declare type Column<D extends Data = Data> = Omit<TableColumnType, 'dataI
|
|
|
269
254
|
|
|
270
255
|
export declare type Columns<D extends Data = Data> = Array<Column<D>>;
|
|
271
256
|
|
|
272
|
-
export declare const COMPONENT_MAP: Map<
|
|
257
|
+
export declare const COMPONENT_MAP: Map<string, Component>;
|
|
273
258
|
|
|
274
259
|
export declare type ComponentVars = Partial<RequiredComponentVars>;
|
|
275
260
|
|
|
@@ -280,6 +265,20 @@ export declare type ContainerComponent = Component<PathProps>;
|
|
|
280
265
|
|
|
281
266
|
export declare const ContainerFragment: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
282
267
|
|
|
268
|
+
/**
|
|
269
|
+
* @description 暴露给外部扩充自定义组件类型的接口
|
|
270
|
+
* @example
|
|
271
|
+
* ```ts
|
|
272
|
+
* declare module 'antdv-next-pro' {
|
|
273
|
+
* interface CustomFieldTypeMap {
|
|
274
|
+
* 'my-custom-input': typeof MyCustomInput;
|
|
275
|
+
* }
|
|
276
|
+
* }
|
|
277
|
+
* ```
|
|
278
|
+
*/
|
|
279
|
+
export declare interface CustomFieldTypeMap<D extends Data = Data> {
|
|
280
|
+
}
|
|
281
|
+
|
|
283
282
|
declare const _default: {
|
|
284
283
|
install(app: App): void;
|
|
285
284
|
};
|
|
@@ -423,76 +422,50 @@ export declare type Fields<D extends Data = Data> = Array<Field<D>>;
|
|
|
423
422
|
*/
|
|
424
423
|
export declare type FieldTypeMap<D extends Data = Data> = {
|
|
425
424
|
/** 文本框 */
|
|
426
|
-
'input':
|
|
427
|
-
slots?: InputSlots;
|
|
428
|
-
} & InputProps, D>;
|
|
425
|
+
'input': WithComponent<typeof Input, D>;
|
|
429
426
|
/** 文本域 */
|
|
430
|
-
'textarea':
|
|
431
|
-
slots?: TextAreaSlots;
|
|
432
|
-
} & TextAreaProps, D>;
|
|
427
|
+
'textarea': WithComponent<typeof TextArea, D>;
|
|
433
428
|
/** 文本框-密码 */
|
|
434
|
-
'input-password':
|
|
435
|
-
|
|
436
|
-
} & InputPasswordProps, D>;
|
|
437
|
-
'input-otp': WithCommon<{
|
|
438
|
-
slots?: OPTSlots;
|
|
439
|
-
} & InputOTPProps, D>;
|
|
429
|
+
'input-password': WithComponent<typeof InputPassword, D>;
|
|
430
|
+
'input-otp': WithComponent<typeof InputOTP, D>;
|
|
440
431
|
/** 文本框-搜索 */
|
|
441
|
-
'input-search':
|
|
442
|
-
slots?: SearchSlots;
|
|
443
|
-
} & InputSearchProps, D>;
|
|
432
|
+
'input-search': WithComponent<typeof InputSearch, D>;
|
|
444
433
|
/** 数字文本框 */
|
|
445
|
-
'input-number':
|
|
446
|
-
slots?: InputNumberSlots;
|
|
447
|
-
} & InputNumberProps, D>;
|
|
434
|
+
'input-number': WithComponent<typeof InputNumber, D>;
|
|
448
435
|
/** 下拉选择器 */
|
|
449
|
-
'select':
|
|
450
|
-
|
|
451
|
-
|
|
436
|
+
'select': WithComponent<typeof Select, D>;
|
|
437
|
+
/** 自动完成 */
|
|
438
|
+
'auto-complete': WithComponent<typeof AutoComplete, D>;
|
|
452
439
|
/** 级联选择器 */
|
|
453
|
-
'cascader':
|
|
454
|
-
slots?: CascaderSlots;
|
|
455
|
-
} & CascaderProps, D>;
|
|
440
|
+
'cascader': WithComponent<typeof Cascader, D>;
|
|
456
441
|
/** 日期选择器 */
|
|
457
|
-
'date-picker':
|
|
458
|
-
slots?: DatePickerSlots;
|
|
459
|
-
} & DatePickerProps, D>;
|
|
442
|
+
'date-picker': WithComponent<typeof DatePicker, D>;
|
|
460
443
|
/** 日期选择器-范围 */
|
|
461
|
-
'range-picker':
|
|
462
|
-
slots?: RangePickerSlots;
|
|
463
|
-
} & RangePickerProps, D>;
|
|
464
|
-
/** 时间选择器 */
|
|
465
|
-
'time-picker': WithCommon<{
|
|
466
|
-
slots?: TimePickerSlots;
|
|
467
|
-
} & TimePickerProps, D>;
|
|
444
|
+
'range-picker': WithComponent<typeof DateRangePicker, D>;
|
|
468
445
|
/** 时间选择器 */
|
|
469
|
-
'time-
|
|
446
|
+
'time-picker': WithComponent<typeof TimePicker, D>;
|
|
447
|
+
/** 时间范围选择器 */
|
|
448
|
+
'time-range-picker': WithComponent<typeof TimeRangePicker, D>;
|
|
470
449
|
/** 复选框组 */
|
|
471
|
-
'checkbox-group':
|
|
450
|
+
'checkbox-group': WithComponent<typeof CheckboxGroup, D>;
|
|
472
451
|
/** 单选框组 */
|
|
473
|
-
'radio-group':
|
|
452
|
+
'radio-group': WithComponent<typeof RadioGroup, D>;
|
|
474
453
|
/** 开关 */
|
|
475
|
-
'switch':
|
|
476
|
-
slots?: SwitchSlots;
|
|
477
|
-
} & SwitchProps, D>;
|
|
454
|
+
'switch': WithComponent<typeof Switch, D>;
|
|
478
455
|
/** 滑块 */
|
|
479
|
-
'slider':
|
|
480
|
-
slots?: SliderSlots;
|
|
481
|
-
} & SliderProps, D>;
|
|
456
|
+
'slider': WithComponent<typeof Slider, D>;
|
|
482
457
|
/** 树形选择器 */
|
|
483
|
-
'tree-select':
|
|
484
|
-
slots?: TreeSelectSlots;
|
|
485
|
-
} & TreeSelectProps, D>;
|
|
458
|
+
'tree-select': WithComponent<typeof TreeSelect, D>;
|
|
486
459
|
/** 穿梭框 */
|
|
487
|
-
'transfer':
|
|
488
|
-
slots?: TransferSlots;
|
|
489
|
-
} & TransferProps, D>;
|
|
460
|
+
'transfer': WithComponent<typeof Transfer, D>;
|
|
490
461
|
/** 自定义组件 */
|
|
491
462
|
'custom': {
|
|
492
463
|
component?: RenderComponentType | Raw<RenderComponentType>;
|
|
493
464
|
} & WithCommon<{
|
|
494
465
|
slots?: Slots;
|
|
495
466
|
} & Record<string, any>, D>;
|
|
467
|
+
} & {
|
|
468
|
+
[K in keyof CustomFieldTypeMap<D>]: WithComponent<CustomFieldTypeMap[K], D>;
|
|
496
469
|
};
|
|
497
470
|
|
|
498
471
|
/**
|
|
@@ -684,6 +657,13 @@ export declare type ProTableInstance = ComponentExposed<typeof _default_2>;
|
|
|
684
657
|
|
|
685
658
|
export declare type ProTableProps = ComponentProps<typeof _default_2>;
|
|
686
659
|
|
|
660
|
+
/**
|
|
661
|
+
* 注册自定义组件
|
|
662
|
+
* @param name 组件名称标识
|
|
663
|
+
* @param component Vue组件
|
|
664
|
+
*/
|
|
665
|
+
export declare const registerComponent: (name: string, component: Component) => void;
|
|
666
|
+
|
|
687
667
|
/**
|
|
688
668
|
* @description 自定义组件
|
|
689
669
|
* @example (p, ctx) => h('div', ctx.attrs)
|
|
@@ -696,29 +676,30 @@ export declare type RequiredComponentVars = {
|
|
|
696
676
|
grid: Exclude<Grid, undefined | boolean>;
|
|
697
677
|
}>;
|
|
698
678
|
'pro-form-item': PP<FormItemProps & Pick<ColProps, 'span' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'> & Pick<Base, 'formItemContainer'>>;
|
|
699
|
-
'input': FP<
|
|
700
|
-
'textarea': FP<
|
|
701
|
-
'input-password': FP<
|
|
702
|
-
'input-search': FP<
|
|
703
|
-
'input-number': FP<
|
|
704
|
-
'input-otp': FP<
|
|
705
|
-
'
|
|
706
|
-
'
|
|
707
|
-
'
|
|
708
|
-
'date-picker
|
|
709
|
-
'date-picker.
|
|
710
|
-
'date-picker.
|
|
711
|
-
'date-picker.
|
|
712
|
-
'date-picker.
|
|
713
|
-
'
|
|
714
|
-
'
|
|
715
|
-
'time-
|
|
716
|
-
'
|
|
717
|
-
'
|
|
718
|
-
'
|
|
719
|
-
'
|
|
720
|
-
'
|
|
721
|
-
'
|
|
679
|
+
'input': FP<ComponentProps<typeof Input>>;
|
|
680
|
+
'textarea': FP<ComponentProps<typeof TextArea>>;
|
|
681
|
+
'input-password': FP<ComponentProps<typeof InputPassword>>;
|
|
682
|
+
'input-search': FP<ComponentProps<typeof InputSearch>>;
|
|
683
|
+
'input-number': FP<ComponentProps<typeof InputNumber>>;
|
|
684
|
+
'input-otp': FP<ComponentProps<typeof InputOTP>>;
|
|
685
|
+
'auto-complete': FP<ComponentProps<typeof AutoComplete>>;
|
|
686
|
+
'select': FP<ComponentProps<typeof Select>>;
|
|
687
|
+
'cascader': FP<ComponentProps<typeof Cascader>>;
|
|
688
|
+
'date-picker': FP<ComponentProps<typeof DatePicker>>;
|
|
689
|
+
'date-picker.date': FP<ComponentProps<typeof DatePicker>>;
|
|
690
|
+
'date-picker.week': FP<ComponentProps<typeof DatePicker>>;
|
|
691
|
+
'date-picker.month': FP<ComponentProps<typeof DatePicker>>;
|
|
692
|
+
'date-picker.year': FP<ComponentProps<typeof DatePicker>>;
|
|
693
|
+
'date-picker.quarter': FP<ComponentProps<typeof DatePicker>>;
|
|
694
|
+
'range-picker': FP<ComponentProps<typeof DateRangePicker>>;
|
|
695
|
+
'time-picker': FP<ComponentProps<typeof TimePicker>>;
|
|
696
|
+
'time-range-picker': FP<ComponentProps<typeof TimeRangePicker>>;
|
|
697
|
+
'checkbox-group': FP<ComponentProps<typeof CheckboxGroup>>;
|
|
698
|
+
'radio-group': FP<ComponentProps<typeof RadioGroup>>;
|
|
699
|
+
'switch': FP<ComponentProps<typeof Switch>>;
|
|
700
|
+
'slider': FP<ComponentProps<typeof Slider>>;
|
|
701
|
+
'tree-select': FP<ComponentProps<typeof TreeSelect>>;
|
|
702
|
+
'transfer': FP<ComponentProps<typeof Transfer>>;
|
|
722
703
|
};
|
|
723
704
|
|
|
724
705
|
declare type SearchFormProps = {
|
|
@@ -829,7 +810,16 @@ export declare type WithAdditionalMethodsGetter<T> = T & {
|
|
|
829
810
|
}>;
|
|
830
811
|
};
|
|
831
812
|
|
|
832
|
-
declare type WithCommon<T, D extends Data = Data> = WithRef<T &
|
|
813
|
+
declare type WithCommon<T, D extends Data = Data> = WithRef<T & FormItemProps & ColProps & Base<D>>;
|
|
814
|
+
|
|
815
|
+
/**
|
|
816
|
+
* @description 自动从 Vue 组件提取 Props 和 Slots,并加上公共表单字段属性
|
|
817
|
+
* @template T - Vue 组件类型
|
|
818
|
+
* @template D - 数据对象类型
|
|
819
|
+
*/
|
|
820
|
+
declare type WithComponent<T extends abstract new (...args: any) => any, D extends Data = Data> = WithCommon<{
|
|
821
|
+
slots?: ComponentSlots<T>;
|
|
822
|
+
} & ComponentProps<T>, D>;
|
|
833
823
|
|
|
834
824
|
/**
|
|
835
825
|
* @description 为对象属性添加响应式支持的类型
|
package/es/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import "./antdv-next-pro.css";
|
|
2
|
-
import { _ as _sfc_main } from "./form/index-
|
|
3
|
-
import { c, b, C, a, F, d, T, g, e, u, f } from "./form/index-
|
|
4
|
-
import {
|
|
5
|
-
import { a as a2, I, b as b2, f as f2 } from "./component-provider/index-Cy8dTKpN.js";
|
|
2
|
+
import { _ as _sfc_main } from "./form/index-CMvNb50_.js";
|
|
3
|
+
import { c, b, C, a, F, d, T, g, r, e, u, f } from "./form/index-CMvNb50_.js";
|
|
4
|
+
import { I, a as a2, e as e2 } from "./core/index-BrBzu6aj.js";
|
|
6
5
|
import BaseTable from "./table/index.js";
|
|
7
6
|
import { useTable } from "./table/index.js";
|
|
7
|
+
import _sfc_main$1 from "./component-provider/index.js";
|
|
8
|
+
import { INJECT_CONFIG } from "./component-provider/index.js";
|
|
8
9
|
const withInstall = (comp) => {
|
|
9
10
|
comp.install = (app) => {
|
|
10
11
|
app.component(comp.name, comp);
|
|
@@ -29,9 +30,9 @@ export {
|
|
|
29
30
|
C as COMPONENT_MAP,
|
|
30
31
|
a as ContainerFragment,
|
|
31
32
|
F as FORM_ITEM_SLOT_KEYS,
|
|
32
|
-
|
|
33
|
+
INJECT_CONFIG,
|
|
33
34
|
I as InjectionFormKey,
|
|
34
|
-
|
|
35
|
+
a2 as InjectionPathKey,
|
|
35
36
|
ProComponentProvider,
|
|
36
37
|
ProForm,
|
|
37
38
|
ProTable,
|
|
@@ -39,9 +40,10 @@ export {
|
|
|
39
40
|
T as TeleportComponentNamePrefix,
|
|
40
41
|
index as default,
|
|
41
42
|
g as getInitProps,
|
|
43
|
+
r as registerComponent,
|
|
42
44
|
e as useFields,
|
|
43
45
|
u as useForm,
|
|
44
|
-
|
|
46
|
+
e2 as useFormData,
|
|
45
47
|
f as useFormRef,
|
|
46
48
|
useTable
|
|
47
49
|
};
|
package/es/table/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { createElementBlock, openBlock, createElementVNode, defineComponent, ref, computed, watch, watchEffect, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, resolveDynamicComponent, createTextVNode, createCommentVNode, Fragment, toDisplayString, normalizeStyle, useModel, h, mergeModels, inject, useAttrs, useSlots, onMounted, normalizeClass, createSlots, renderList, normalizeProps, guardReactiveProps, nextTick } from "vue";
|
|
2
2
|
import { Space, Button, theme, useConfig, Dropdown, Menu, Checkbox, Table } from "antdv-next";
|
|
3
3
|
import "antdv-next/dist/config-provider/DisabledContext";
|
|
4
|
-
import "
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { _ as _sfc_main$9, t as tableProps, a as _sfc_main$a } from "../form/index-CMvNb50_.js";
|
|
5
|
+
import { INJECT_CONFIG } from "../component-provider/index.js";
|
|
6
|
+
import { g as getObject, c as camelizeProperties, f as useTable$1 } from "../core/index-BrBzu6aj.js";
|
|
7
7
|
import { p as pick } from "../vendor/utils/lodash-es-p6jau26B.js";
|
|
8
8
|
const _export_sfc = (sfc, props) => {
|
|
9
9
|
const target = sfc.__vccOpts || sfc;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qin-ui/antdv-next-pro",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "基于 antdv-next 的二次封装组件",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -17,20 +17,23 @@
|
|
|
17
17
|
"README.md",
|
|
18
18
|
"LICENSE"
|
|
19
19
|
],
|
|
20
|
+
"homepage": "https://dufan3715.github.io/pro-components/",
|
|
21
|
+
"repository": {
|
|
22
|
+
"type": "git",
|
|
23
|
+
"url": "git+https://github.com/dufan3715/pro-components.git"
|
|
24
|
+
},
|
|
20
25
|
"scripts": {
|
|
21
26
|
"build": "vue-tsc && vite build"
|
|
22
27
|
},
|
|
23
28
|
"author": "dufan3715",
|
|
24
29
|
"license": "MIT",
|
|
25
30
|
"private": false,
|
|
26
|
-
"dependencies": {
|
|
27
|
-
"@qin-ui/core": "workspace:^"
|
|
28
|
-
},
|
|
29
31
|
"peerDependencies": {
|
|
30
32
|
"antdv-next": "^1.1.0",
|
|
31
33
|
"vue": "^3.5.0"
|
|
32
34
|
},
|
|
33
35
|
"devDependencies": {
|
|
36
|
+
"@qin-ui/core": "workspace:^",
|
|
34
37
|
"@types/lodash-es": "^4.17.12",
|
|
35
38
|
"antdv-next": "^1.1.0",
|
|
36
39
|
"lodash-es": "^4.17.21",
|