@qin-ui/antdv-next-pro 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +268 -0
- package/es/antdv-next-pro.css +8 -8
- package/es/component-provider/{index-B-Yy-eoc.js → index-DcaBbsiC.js} +6 -2
- package/es/component-provider/index.js +1 -1
- package/es/form/{index-DnjfDQC_.js → index-idQHUPJc.js} +34 -20
- package/es/form/index.js +3 -2
- package/es/index.d.ts +128 -138
- package/es/index.js +5 -4
- package/es/table/index.js +15 -10
- package/package.json +6 -1
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` |
|
package/es/antdv-next-pro.css
CHANGED
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
.pro-table_search-form .transition[data-v-37368080] {
|
|
11
11
|
transition: all 0.25s;
|
|
12
12
|
}
|
|
13
|
-
.pro-table_search-form-container[data-v-
|
|
13
|
+
.pro-table_search-form-container[data-v-f115fbbe] {
|
|
14
14
|
margin-bottom: 24px;
|
|
15
15
|
padding: 24px;
|
|
16
16
|
}
|
|
17
|
-
.pro-table_table-container[data-v-
|
|
17
|
+
.pro-table_table-container[data-v-bdd22db3] {
|
|
18
18
|
flex: 1;
|
|
19
19
|
padding: 24px 24px 0;
|
|
20
20
|
}
|
|
@@ -36,23 +36,23 @@
|
|
|
36
36
|
.pro-table_column-control_button[data-v-246b0faf] svg {
|
|
37
37
|
transform: scale(1.2, 1.4);
|
|
38
38
|
}
|
|
39
|
-
.pro-table_header[data-v-
|
|
39
|
+
.pro-table_header[data-v-a5d71b88] {
|
|
40
40
|
display: flex;
|
|
41
41
|
align-items: center;
|
|
42
42
|
justify-content: flex-end;
|
|
43
43
|
}
|
|
44
|
-
.pro-table_header[data-v-
|
|
44
|
+
.pro-table_header[data-v-a5d71b88]:empty {
|
|
45
45
|
display: none;
|
|
46
46
|
}
|
|
47
|
-
.pro-table_header + .pro-table_header_content[data-v-
|
|
47
|
+
.pro-table_header + .pro-table_header_content[data-v-a5d71b88] {
|
|
48
48
|
margin-top: 16px;
|
|
49
49
|
}
|
|
50
|
-
.pro-table_header_button-bar[data-v-
|
|
50
|
+
.pro-table_header_button-bar[data-v-a5d71b88] {
|
|
51
51
|
flex: 1;
|
|
52
52
|
}
|
|
53
|
-
.pro-table_header_toolbar[data-v-
|
|
53
|
+
.pro-table_header_toolbar[data-v-a5d71b88] {
|
|
54
54
|
margin-left: 12px;
|
|
55
55
|
}
|
|
56
|
-
.pro-table[data-v-
|
|
56
|
+
.pro-table[data-v-a5d71b88] .ant-pagination .ant-pagination-total-text {
|
|
57
57
|
flex: 1;
|
|
58
58
|
}
|
|
@@ -60,10 +60,14 @@ const INJECT_CONFIG = {
|
|
|
60
60
|
style: { width: "100%" }
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
|
-
"input-
|
|
63
|
+
"input-otp": {
|
|
64
64
|
injectionKey: Symbol(""),
|
|
65
65
|
default: {}
|
|
66
66
|
},
|
|
67
|
+
"auto-complete": {
|
|
68
|
+
injectionKey: Symbol(""),
|
|
69
|
+
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
|
|
70
|
+
},
|
|
67
71
|
select: {
|
|
68
72
|
injectionKey: Symbol(""),
|
|
69
73
|
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
|
|
@@ -118,7 +122,7 @@ const INJECT_CONFIG = {
|
|
|
118
122
|
},
|
|
119
123
|
switch: {
|
|
120
124
|
injectionKey: Symbol(""),
|
|
121
|
-
default: {
|
|
125
|
+
default: { modelProp: "checked" }
|
|
122
126
|
},
|
|
123
127
|
slider: {
|
|
124
128
|
injectionKey: Symbol(""),
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { defineComponent, provide, inject, useSlots, watchEffect, createBlock, openBlock, unref, mergeProps, withCtx, createVNode, renderSlot, toValue,
|
|
2
|
-
import { FormItem,
|
|
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, 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, a as INJECT_CONFIG, c as camelizeProperties, b as InjectionPathKey, g as getObject, u as useForm$1, d as useFields$1, e as useFormRef$1 } from "../component-provider/index-B-Yy-eoc.js";
|
|
4
|
+
import { I as InjectionFormKey, a as INJECT_CONFIG, c as camelizeProperties, b as InjectionPathKey, g as getObject, u as useForm$1, d as useFields$1, e as useFormRef$1 } from "../component-provider/index-DcaBbsiC.js";
|
|
6
5
|
import { i as isPlainObject, t as toPath, o as omit, c as cloneDeep } from "../vendor/utils/lodash-es-p6jau26B.js";
|
|
7
6
|
const tableProps = () => Table.props || {};
|
|
8
|
-
const gridItemProps = () =>
|
|
7
|
+
const gridItemProps = () => Col.props || {};
|
|
9
8
|
const formItemProps = () => FormItem.props || {};
|
|
10
9
|
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
11
10
|
...{ name: "ProForm", inheritAttrs: false },
|
|
@@ -17,6 +16,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
17
16
|
setup(__props) {
|
|
18
17
|
provide(InjectionFormKey, __props.form);
|
|
19
18
|
const { formData, fields, setFormRef } = __props.form;
|
|
19
|
+
const _fields = computed(() => fields.value);
|
|
20
20
|
const config = INJECT_CONFIG["pro-form"];
|
|
21
21
|
const { grid: _injectGrid, ...injectAttrs } = inject(
|
|
22
22
|
config.injectionKey,
|
|
@@ -39,7 +39,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
39
39
|
}, mergeProps(injectAttrs, unref(camelizeProperties)(_ctx.$attrs)), { class: "pro-form" }), {
|
|
40
40
|
default: withCtx(() => [
|
|
41
41
|
createVNode(unref(_sfc_main$3), {
|
|
42
|
-
fields:
|
|
42
|
+
fields: _fields.value,
|
|
43
43
|
grid: __props.grid
|
|
44
44
|
}, null, 8, ["fields", "grid"]),
|
|
45
45
|
renderSlot(_ctx.$slots, "default")
|
|
@@ -57,6 +57,7 @@ const COMPONENT_MAP = /* @__PURE__ */ new Map([
|
|
|
57
57
|
["input-password", InputPassword],
|
|
58
58
|
["input-number", InputNumber],
|
|
59
59
|
["input-otp", InputOTP],
|
|
60
|
+
["auto-complete", AutoComplete],
|
|
60
61
|
["select", Select],
|
|
61
62
|
["cascader", Cascader],
|
|
62
63
|
["date-picker", DatePicker],
|
|
@@ -70,6 +71,9 @@ const COMPONENT_MAP = /* @__PURE__ */ new Map([
|
|
|
70
71
|
["tree-select", TreeSelect],
|
|
71
72
|
["transfer", Transfer]
|
|
72
73
|
]);
|
|
74
|
+
const registerComponent = (name, component) => {
|
|
75
|
+
COMPONENT_MAP.set(name, component);
|
|
76
|
+
};
|
|
73
77
|
const TeleportComponentNamePrefix = "TeleportComponent_";
|
|
74
78
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
75
79
|
__name: "index",
|
|
@@ -93,7 +97,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
93
97
|
field: {}
|
|
94
98
|
},
|
|
95
99
|
setup(__props) {
|
|
96
|
-
const formItemPropKeys = Object.keys(formItemProps())
|
|
100
|
+
const formItemPropKeys = Object.keys(formItemProps());
|
|
97
101
|
const gridItemPropKeys = Object.keys(gridItemProps());
|
|
98
102
|
const props = __props;
|
|
99
103
|
const config = INJECT_CONFIG["pro-form-item"];
|
|
@@ -104,11 +108,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
104
108
|
const componentProps = { slots: {} };
|
|
105
109
|
const formItemSlots = {};
|
|
106
110
|
if (isPlainObject(props.field)) {
|
|
107
|
-
const { path, name, fields,
|
|
111
|
+
const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, ...rest } = props.field;
|
|
108
112
|
const {
|
|
109
113
|
class: injectClassName,
|
|
110
114
|
style: injectStyle,
|
|
111
115
|
span: injectSpan,
|
|
116
|
+
formItemContainer: injectFormItemContainer,
|
|
112
117
|
xs,
|
|
113
118
|
sm,
|
|
114
119
|
md,
|
|
@@ -122,17 +127,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
122
127
|
formItemProps2 = mergeProps(
|
|
123
128
|
injectRest,
|
|
124
129
|
{ class: injectClassName, style: injectStyle },
|
|
125
|
-
{ class: toValue(
|
|
130
|
+
{ class: toValue(formItemClass), style: toValue(formItemStyle) },
|
|
131
|
+
formItemDataAttrs
|
|
126
132
|
);
|
|
133
|
+
formItemProps2.container = formItemContainer ?? injectFormItemContainer;
|
|
127
134
|
Object.keys(rest).forEach((k) => {
|
|
128
135
|
if (gridItemPropKeys.includes(k)) {
|
|
129
136
|
gridItemProps2[k] = rest[k];
|
|
130
|
-
} else if (formItemPropKeys.includes(k)
|
|
137
|
+
} else if (formItemPropKeys.includes(k)) {
|
|
131
138
|
formItemProps2[k] = rest[k];
|
|
132
139
|
} else {
|
|
133
140
|
componentProps[k] = rest[k];
|
|
134
141
|
}
|
|
135
142
|
});
|
|
143
|
+
Object.assign(componentProps, componentDataAttrs);
|
|
136
144
|
Object.keys(slots).forEach((k) => {
|
|
137
145
|
if (FORM_ITEM_SLOT_KEYS.includes(k)) {
|
|
138
146
|
formItemSlots[k] = slots[k];
|
|
@@ -278,9 +286,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
278
286
|
const useForm = useForm$1;
|
|
279
287
|
const getInitProps = (field) => {
|
|
280
288
|
const { component } = field;
|
|
281
|
-
const
|
|
289
|
+
const picker = component === "date-picker" ? "" : field.picker;
|
|
282
290
|
if (COMPONENT_MAP.has(component)) {
|
|
283
|
-
const k = [component,
|
|
291
|
+
const k = [component, picker].filter(Boolean).join(".");
|
|
284
292
|
if (INJECT_CONFIG[k]) {
|
|
285
293
|
const config = INJECT_CONFIG[k];
|
|
286
294
|
const injectProps = inject(config.injectionKey, config.default);
|
|
@@ -332,21 +340,26 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
332
340
|
component: __props.component,
|
|
333
341
|
type: attrs.type
|
|
334
342
|
});
|
|
343
|
+
const modelPropName = attrs.modelProp ?? initProps.modelProp ?? "value";
|
|
335
344
|
const mergedProps = mergeProps(
|
|
336
345
|
initProps,
|
|
337
346
|
attrs,
|
|
338
|
-
{ class: attrs.
|
|
339
|
-
{ class: initProps.
|
|
347
|
+
{ class: attrs.componentClass, style: attrs.componentStyle },
|
|
348
|
+
{ class: initProps.componentClass, style: initProps.componentStyle },
|
|
340
349
|
{ disabled: attrs.disabled ?? parentDisabled.value ?? initProps.disabled },
|
|
341
|
-
{
|
|
350
|
+
{ modelProp: modelPropName }
|
|
342
351
|
);
|
|
343
|
-
const { valueFormatter,
|
|
344
|
-
const
|
|
352
|
+
const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, ...rest } = mergedProps;
|
|
353
|
+
const modelBindingProp = modelProp ?? "value";
|
|
354
|
+
const bindAttrs = omit(rest, [
|
|
355
|
+
modelBindingProp,
|
|
356
|
+
`onUpdate:${modelBindingProp}`
|
|
357
|
+
]);
|
|
345
358
|
return {
|
|
346
359
|
attrs: bindAttrs,
|
|
347
360
|
slots,
|
|
348
361
|
componentContainer,
|
|
349
|
-
|
|
362
|
+
modelProp: modelBindingProp,
|
|
350
363
|
valueFormatter
|
|
351
364
|
};
|
|
352
365
|
});
|
|
@@ -370,8 +383,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
370
383
|
is.value ? (openBlock(), createBlock(resolveDynamicComponent(is.value), mergeProps({ key: 0 }, groupedAttrs.value.attrs, {
|
|
371
384
|
ref_key: "componentRef",
|
|
372
385
|
ref: componentRef,
|
|
373
|
-
[`${groupedAttrs.value.
|
|
374
|
-
[`onUpdate:${groupedAttrs.value.
|
|
386
|
+
[`${groupedAttrs.value.modelProp}`]: value.value,
|
|
387
|
+
[`onUpdate:${groupedAttrs.value.modelProp}`]: _cache[0] || (_cache[0] = ($event) => value.value = $event),
|
|
375
388
|
path: __props.path
|
|
376
389
|
}), createSlots({ _: 2 }, [
|
|
377
390
|
renderList(groupedAttrs.value.slots, (slot, name) => {
|
|
@@ -434,6 +447,7 @@ export {
|
|
|
434
447
|
useFields as e,
|
|
435
448
|
useFormRef as f,
|
|
436
449
|
getInitProps as g,
|
|
450
|
+
registerComponent as r,
|
|
437
451
|
tableProps as t,
|
|
438
452
|
useForm as u
|
|
439
453
|
};
|
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, b as b2, f as f2 } from "../component-provider/index-
|
|
1
|
+
import { c, _, b, C, a, F, d, T, _ as _2, g, r, e, u, f } from "./index-idQHUPJc.js";
|
|
2
|
+
import { I, b as b2, f as f2 } from "../component-provider/index-DcaBbsiC.js";
|
|
3
3
|
export {
|
|
4
4
|
c as BaseField,
|
|
5
5
|
_ as BaseForm,
|
|
@@ -13,6 +13,7 @@ export {
|
|
|
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
|
f2 as useFormData,
|
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
|
-
style?: CSSProperties;
|
|
163
|
-
/**
|
|
164
|
-
* @description 字段formItem样式类名
|
|
165
|
-
* @example 'custom-form-item' | 'required-field'
|
|
166
|
-
*/
|
|
167
|
-
className?: 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' }
|
|
@@ -189,12 +179,17 @@ export declare interface Base<D extends Data = Data> {
|
|
|
189
179
|
* @description 字段component样式类名
|
|
190
180
|
* @example 'custom-input' | 'error-input'
|
|
191
181
|
*/
|
|
192
|
-
|
|
182
|
+
componentClass?: string;
|
|
193
183
|
/**
|
|
194
184
|
* @description 字段component容器包裹组件
|
|
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()
|
|
@@ -203,17 +198,7 @@ export declare interface Base<D extends Data = Data> {
|
|
|
203
198
|
/**
|
|
204
199
|
* @description 组件v-model双向绑定更新属性名，默认'value'
|
|
205
200
|
*/
|
|
206
|
-
|
|
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;
|
|
201
|
+
modelProp?: 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
|
};
|
|
@@ -348,7 +347,7 @@ declare const _default_2: <T extends Table<any> = Table>(__VLS_props: NonNullabl
|
|
|
348
347
|
index: number;
|
|
349
348
|
column: Column<T extends Table<infer U extends Data> ? U : never>;
|
|
350
349
|
}) => void;
|
|
351
|
-
}> & Readonly<Partial<Record<"table" | "
|
|
350
|
+
}> & Readonly<Partial<Record<"table" | "search-form" | "button-bar" | "toolbar", Slot>>>, "default">> & Omit<Omit<Readonly<{
|
|
352
351
|
default?: (() => any) | undefined;
|
|
353
352
|
title?: ((data: readonly AnyObject[]) => any) | undefined;
|
|
354
353
|
footer?: ((data: readonly AnyObject[]) => any) | undefined;
|
|
@@ -387,7 +386,7 @@ declare const _default_2: <T extends Table<any> = Table>(__VLS_props: NonNullabl
|
|
|
387
386
|
index: number;
|
|
388
387
|
column: Column<T extends Table<infer U extends Data> ? U : never>;
|
|
389
388
|
}) => void;
|
|
390
|
-
}> & Readonly<Partial<Record<"table" | "
|
|
389
|
+
}> & Readonly<Partial<Record<"table" | "search-form" | "button-bar" | "toolbar", Slot>>>, "default">;
|
|
391
390
|
emit: ((evt: "update:size", value: ButtonSize) => void) & ((evt: "update:loading", value: boolean) => void);
|
|
392
391
|
}>) => VNode & {
|
|
393
392
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
@@ -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
|
/**
|
|
@@ -511,7 +484,7 @@ declare type FormItemInstance = InstanceType<typeof FormItem>;
|
|
|
511
484
|
|
|
512
485
|
declare type _FormProps = Pick<Partial<FormProps>, 'colon' | 'disabled' | 'labelAlign' | 'labelCol' | 'labelWrap' | 'name' | 'wrapperCol'>;
|
|
513
486
|
|
|
514
|
-
declare type FP<T extends Record<string, any>> = Partial<T & Pick<Base, 'valueFormatter' | 'componentContainer' | '
|
|
487
|
+
declare type FP<T extends Record<string, any>> = Partial<T & Pick<Base, 'valueFormatter' | 'componentContainer' | 'modelProp' | 'componentClass' | 'componentStyle'> & AllowedComponentProps>;
|
|
515
488
|
|
|
516
489
|
export declare const getInitProps: (field: Field) => Record<string, any>;
|
|
517
490
|
|
|
@@ -533,7 +506,7 @@ declare type MaybeRefOrComputedRef<T = any> = MaybeRef<T> | ComputedRef<T>;
|
|
|
533
506
|
/**
|
|
534
507
|
* @description 不支持响应式的属性名
|
|
535
508
|
*/
|
|
536
|
-
declare type NotSupportedRefOrGetterProps = 'component' | '
|
|
509
|
+
declare type NotSupportedRefOrGetterProps = 'component' | 'formItemContainer' | 'componentContainer' | 'valueFormatter' | 'fields' | 'slots' | 'modelProp';
|
|
537
510
|
|
|
538
511
|
declare type Option_2 = {
|
|
539
512
|
label: string;
|
|
@@ -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)
|
|
@@ -695,30 +675,31 @@ export declare type RequiredComponentVars = {
|
|
|
695
675
|
'pro-form': PP<Omit<ProFormProps, 'form' | 'grid'> & {
|
|
696
676
|
grid: Exclude<Grid, undefined | boolean>;
|
|
697
677
|
}>;
|
|
698
|
-
'pro-form-item': PP<FormItemProps & Pick<ColProps, 'span' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'> & Pick<Base, '
|
|
699
|
-
'input': FP<
|
|
700
|
-
'textarea': FP<
|
|
701
|
-
'input-password': FP<
|
|
702
|
-
'input-search': FP<
|
|
703
|
-
'input-number': FP<
|
|
704
|
-
'input-
|
|
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
|
-
'
|
|
678
|
+
'pro-form-item': PP<FormItemProps & Pick<ColProps, 'span' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'> & Pick<Base, 'formItemContainer'>>;
|
|
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,8 +1,8 @@
|
|
|
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 { _ as _sfc_main$1 } from "./component-provider/index-
|
|
5
|
-
import { a as a2, I, b as b2, f as f2 } from "./component-provider/index-
|
|
2
|
+
import { _ as _sfc_main } from "./form/index-idQHUPJc.js";
|
|
3
|
+
import { c, b, C, a, F, d, T, g, r, e, u, f } from "./form/index-idQHUPJc.js";
|
|
4
|
+
import { _ as _sfc_main$1 } from "./component-provider/index-DcaBbsiC.js";
|
|
5
|
+
import { a as a2, I, b as b2, f as f2 } from "./component-provider/index-DcaBbsiC.js";
|
|
6
6
|
import BaseTable from "./table/index.js";
|
|
7
7
|
import { useTable } from "./table/index.js";
|
|
8
8
|
const withInstall = (comp) => {
|
|
@@ -39,6 +39,7 @@ export {
|
|
|
39
39
|
T as TeleportComponentNamePrefix,
|
|
40
40
|
index as default,
|
|
41
41
|
g as getInitProps,
|
|
42
|
+
r as registerComponent,
|
|
42
43
|
e as useFields,
|
|
43
44
|
u as useForm,
|
|
44
45
|
f2 as useFormData,
|
package/es/table/index.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
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 { a as INJECT_CONFIG, g as getObject, c as camelizeProperties, h as useTable$1 } from "../component-provider/index-B-Yy-eoc.js";
|
|
4
|
+
import { _ as _sfc_main$9, t as tableProps, a as _sfc_main$a } from "../form/index-idQHUPJc.js";
|
|
5
|
+
import { a as INJECT_CONFIG, g as getObject, c as camelizeProperties, h as useTable$1 } from "../component-provider/index-DcaBbsiC.js";
|
|
7
6
|
import { p as pick } from "../vendor/utils/lodash-es-p6jau26B.js";
|
|
8
7
|
const _export_sfc = (sfc, props) => {
|
|
9
8
|
const target = sfc.__vccOpts || sfc;
|
|
@@ -227,34 +226,40 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
227
226
|
__name: "DefaultSearchFormContainer",
|
|
228
227
|
setup(__props) {
|
|
229
228
|
const { token } = theme.useToken();
|
|
230
|
-
|
|
229
|
+
const bgColor = computed(() => {
|
|
231
230
|
var _a;
|
|
231
|
+
return (_a = token.value) == null ? void 0 : _a.colorBgContainer;
|
|
232
|
+
});
|
|
233
|
+
return (_ctx, _cache) => {
|
|
232
234
|
return openBlock(), createElementBlock("div", {
|
|
233
235
|
class: "pro-table_search-form-container",
|
|
234
|
-
style: normalizeStyle({ backgroundColor:
|
|
236
|
+
style: normalizeStyle({ backgroundColor: bgColor.value })
|
|
235
237
|
}, [
|
|
236
238
|
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
237
239
|
], 4);
|
|
238
240
|
};
|
|
239
241
|
}
|
|
240
242
|
});
|
|
241
|
-
const DefaultSearchFormContainer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-
|
|
243
|
+
const DefaultSearchFormContainer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f115fbbe"]]);
|
|
242
244
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
243
245
|
__name: "DefaultTableContainer",
|
|
244
246
|
setup(__props) {
|
|
245
247
|
const { token } = theme.useToken();
|
|
246
|
-
|
|
248
|
+
const bgColor = computed(() => {
|
|
247
249
|
var _a;
|
|
250
|
+
return (_a = token.value) == null ? void 0 : _a.colorBgContainer;
|
|
251
|
+
});
|
|
252
|
+
return (_ctx, _cache) => {
|
|
248
253
|
return openBlock(), createElementBlock("div", {
|
|
249
254
|
class: "pro-table_table-container",
|
|
250
|
-
style: normalizeStyle({ backgroundColor:
|
|
255
|
+
style: normalizeStyle({ backgroundColor: bgColor.value })
|
|
251
256
|
}, [
|
|
252
257
|
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
253
258
|
], 4);
|
|
254
259
|
};
|
|
255
260
|
}
|
|
256
261
|
});
|
|
257
|
-
const DefaultTableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-
|
|
262
|
+
const DefaultTableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-bdd22db3"]]);
|
|
258
263
|
const _sfc_main$4 = {};
|
|
259
264
|
const _hoisted_1$2 = {
|
|
260
265
|
focusable: "false",
|
|
@@ -671,7 +676,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
671
676
|
};
|
|
672
677
|
}
|
|
673
678
|
});
|
|
674
|
-
const BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
679
|
+
const BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a5d71b88"]]);
|
|
675
680
|
const useTable = useTable$1;
|
|
676
681
|
export {
|
|
677
682
|
BaseTable as default,
|
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.4",
|
|
4
4
|
"description": "基于 antdv-next 的二次封装组件",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -17,6 +17,11 @@
|
|
|
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
|
},
|