@aspire-ui/element-component-pro 1.0.5 → 1.0.6
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 +65 -1
- package/dist/ProDescriptions/ProDescriptions.vue.d.ts +136 -0
- package/dist/ProDescriptions/index.d.ts +5 -0
- package/dist/ProDescriptions/useDescription.d.ts +9 -0
- package/dist/ProForm/ProForm.vue.d.ts +1 -1
- package/dist/ProTable/ProTable.vue.d.ts +2 -2
- package/dist/element-component-pro.es.js +797 -634
- package/dist/element-component-pro.es.js.map +1 -1
- package/dist/element-component-pro.umd.js +2 -2
- package/dist/element-component-pro.umd.js.map +1 -1
- package/dist/index.d.ts +563 -150
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +60 -0
- package/package.json +1 -1
- package/src/ProDescriptions/ProDescriptions.vue +437 -0
- package/src/ProDescriptions/index.ts +5 -0
- package/src/ProDescriptions/useDescription.ts +52 -0
- package/src/index.ts +6 -0
- package/src/types/index.ts +64 -0
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ Vue.use(ElementComponentPro)
|
|
|
41
41
|
|
|
42
42
|
```vue
|
|
43
43
|
<script setup lang="ts">
|
|
44
|
-
import { ProTable, ProForm } from 'element-component-pro'
|
|
44
|
+
import { ProTable, ProForm, ProDescriptions } from 'element-component-pro'
|
|
45
45
|
</script>
|
|
46
46
|
|
|
47
47
|
<template>
|
|
@@ -315,6 +315,70 @@ const handleSubmit = (values) => {
|
|
|
315
315
|
- **useForm + v-model**: 编程式 `setFieldsValue/resetFields` 与受控 `modelValue` 保持同步
|
|
316
316
|
- **componentProps**: 支持函数,可获取 formModel、formActionType
|
|
317
317
|
|
|
318
|
+
## ProDescriptions
|
|
319
|
+
|
|
320
|
+
参考 [Vben Admin Description](https://doc.vvbin.cn/components/desc.html#usage),用于详情页信息展示,支持 `schema` 驱动、响应式列数、折叠以及 `useDescription` 编程式更新。
|
|
321
|
+
|
|
322
|
+
```vue
|
|
323
|
+
<template>
|
|
324
|
+
<ProDescriptions
|
|
325
|
+
title="基础示例"
|
|
326
|
+
:column="3"
|
|
327
|
+
:data="detailData"
|
|
328
|
+
:schema="schema"
|
|
329
|
+
:use-collapse="true"
|
|
330
|
+
:collapse-options="{ canExpand: true }"
|
|
331
|
+
/>
|
|
332
|
+
</template>
|
|
333
|
+
|
|
334
|
+
<script setup lang="ts">
|
|
335
|
+
import { ProDescriptions } from 'element-component-pro'
|
|
336
|
+
import type { DescriptionSchema } from 'element-component-pro'
|
|
337
|
+
|
|
338
|
+
const detailData = {
|
|
339
|
+
username: 'test',
|
|
340
|
+
nickName: 'VB',
|
|
341
|
+
phone: '15695909xxx',
|
|
342
|
+
email: '190848757@qq.com',
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
const schema: DescriptionSchema[] = [
|
|
346
|
+
{ label: '用户名', dataIndex: 'username' },
|
|
347
|
+
{ label: '昵称', dataIndex: 'nickName' },
|
|
348
|
+
{ label: '联系电话', dataIndex: 'phone' },
|
|
349
|
+
{ label: '邮箱', dataIndex: 'email' },
|
|
350
|
+
]
|
|
351
|
+
</script>
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
### useDescription
|
|
355
|
+
|
|
356
|
+
```vue
|
|
357
|
+
<template>
|
|
358
|
+
<ProDescriptions @register="register" />
|
|
359
|
+
</template>
|
|
360
|
+
|
|
361
|
+
<script setup lang="ts">
|
|
362
|
+
import { ProDescriptions, useDescription } from 'element-component-pro'
|
|
363
|
+
|
|
364
|
+
const [register, descriptionAction] = useDescription({
|
|
365
|
+
title: 'useDescription',
|
|
366
|
+
data: {
|
|
367
|
+
name: '张三',
|
|
368
|
+
status: '启用',
|
|
369
|
+
},
|
|
370
|
+
schema: [
|
|
371
|
+
{ label: '姓名', dataIndex: 'name' },
|
|
372
|
+
{ label: '状态', dataIndex: 'status' },
|
|
373
|
+
],
|
|
374
|
+
})
|
|
375
|
+
|
|
376
|
+
const updateData = () => {
|
|
377
|
+
descriptionAction.setData({ status: '禁用' })
|
|
378
|
+
}
|
|
379
|
+
</script>
|
|
380
|
+
```
|
|
381
|
+
|
|
318
382
|
## 示例与文档
|
|
319
383
|
|
|
320
384
|
- **示例**:运行 `npm run dev` 后访问开发预览,包含 ProTable、ProForm、componentSettings 测试等示例
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { DescriptionActionType, DescriptionColumn, DescriptionProps, DescriptionSchema } from '../types';
|
|
2
|
+
|
|
3
|
+
declare function __VLS_template(): Partial<Record<string, (_: {
|
|
4
|
+
value: unknown;
|
|
5
|
+
record: Record<string, unknown>;
|
|
6
|
+
schema: DescriptionSchema & {
|
|
7
|
+
_span: number;
|
|
8
|
+
};
|
|
9
|
+
}) => any>>;
|
|
10
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
11
|
+
title?: string;
|
|
12
|
+
helpMessage?: string | string[];
|
|
13
|
+
size?: "medium" | "small";
|
|
14
|
+
bordered?: boolean;
|
|
15
|
+
column?: DescriptionColumn;
|
|
16
|
+
schema?: DescriptionSchema[];
|
|
17
|
+
data?: Record<string, unknown>;
|
|
18
|
+
emptyText?: string;
|
|
19
|
+
useCollapse?: boolean;
|
|
20
|
+
collapseOptions?: {
|
|
21
|
+
canExpand?: boolean;
|
|
22
|
+
defaultExpand?: boolean;
|
|
23
|
+
expandButtonText?: string;
|
|
24
|
+
collapseButtonText?: string;
|
|
25
|
+
helpMessage?: string | string[];
|
|
26
|
+
visibleRows?: number;
|
|
27
|
+
};
|
|
28
|
+
}>, {
|
|
29
|
+
size: string;
|
|
30
|
+
bordered: boolean;
|
|
31
|
+
column: () => {
|
|
32
|
+
xxl: number;
|
|
33
|
+
xl: number;
|
|
34
|
+
lg: number;
|
|
35
|
+
md: number;
|
|
36
|
+
sm: number;
|
|
37
|
+
xs: number;
|
|
38
|
+
};
|
|
39
|
+
schema: () => never[];
|
|
40
|
+
data: () => {};
|
|
41
|
+
emptyText: string;
|
|
42
|
+
useCollapse: boolean;
|
|
43
|
+
collapseOptions: () => {
|
|
44
|
+
canExpand: boolean;
|
|
45
|
+
defaultExpand: boolean;
|
|
46
|
+
expandButtonText: string;
|
|
47
|
+
collapseButtonText: string;
|
|
48
|
+
visibleRows: number;
|
|
49
|
+
};
|
|
50
|
+
}>, {
|
|
51
|
+
setProps: (props: Partial<DescriptionProps>) => Promise<void>;
|
|
52
|
+
setData: (data: Record<string, unknown>) => Promise<void>;
|
|
53
|
+
getData: () => Record<string, unknown>;
|
|
54
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
55
|
+
register: (action: DescriptionActionType) => void;
|
|
56
|
+
}, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
57
|
+
title?: string;
|
|
58
|
+
helpMessage?: string | string[];
|
|
59
|
+
size?: "medium" | "small";
|
|
60
|
+
bordered?: boolean;
|
|
61
|
+
column?: DescriptionColumn;
|
|
62
|
+
schema?: DescriptionSchema[];
|
|
63
|
+
data?: Record<string, unknown>;
|
|
64
|
+
emptyText?: string;
|
|
65
|
+
useCollapse?: boolean;
|
|
66
|
+
collapseOptions?: {
|
|
67
|
+
canExpand?: boolean;
|
|
68
|
+
defaultExpand?: boolean;
|
|
69
|
+
expandButtonText?: string;
|
|
70
|
+
collapseButtonText?: string;
|
|
71
|
+
helpMessage?: string | string[];
|
|
72
|
+
visibleRows?: number;
|
|
73
|
+
};
|
|
74
|
+
}>, {
|
|
75
|
+
size: string;
|
|
76
|
+
bordered: boolean;
|
|
77
|
+
column: () => {
|
|
78
|
+
xxl: number;
|
|
79
|
+
xl: number;
|
|
80
|
+
lg: number;
|
|
81
|
+
md: number;
|
|
82
|
+
sm: number;
|
|
83
|
+
xs: number;
|
|
84
|
+
};
|
|
85
|
+
schema: () => never[];
|
|
86
|
+
data: () => {};
|
|
87
|
+
emptyText: string;
|
|
88
|
+
useCollapse: boolean;
|
|
89
|
+
collapseOptions: () => {
|
|
90
|
+
canExpand: boolean;
|
|
91
|
+
defaultExpand: boolean;
|
|
92
|
+
expandButtonText: string;
|
|
93
|
+
collapseButtonText: string;
|
|
94
|
+
visibleRows: number;
|
|
95
|
+
};
|
|
96
|
+
}>>>, {
|
|
97
|
+
size: "medium" | "small";
|
|
98
|
+
bordered: boolean;
|
|
99
|
+
column: DescriptionColumn;
|
|
100
|
+
schema: DescriptionSchema[];
|
|
101
|
+
data: Record<string, unknown>;
|
|
102
|
+
emptyText: string;
|
|
103
|
+
useCollapse: boolean;
|
|
104
|
+
collapseOptions: {
|
|
105
|
+
canExpand?: boolean;
|
|
106
|
+
defaultExpand?: boolean;
|
|
107
|
+
expandButtonText?: string;
|
|
108
|
+
collapseButtonText?: string;
|
|
109
|
+
helpMessage?: string | string[];
|
|
110
|
+
visibleRows?: number;
|
|
111
|
+
};
|
|
112
|
+
}>;
|
|
113
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
114
|
+
export default _default;
|
|
115
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
116
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
117
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
118
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
119
|
+
} : {
|
|
120
|
+
type: import('vue').PropType<T[K]>;
|
|
121
|
+
required: true;
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
type __VLS_WithDefaults<P, D> = {
|
|
125
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
126
|
+
default: D[K];
|
|
127
|
+
}> : P[K];
|
|
128
|
+
};
|
|
129
|
+
type __VLS_Prettify<T> = {
|
|
130
|
+
[K in keyof T]: T[K];
|
|
131
|
+
} & {};
|
|
132
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
133
|
+
new (): {
|
|
134
|
+
$scopedSlots: S;
|
|
135
|
+
};
|
|
136
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Ref } from 'vue';
|
|
2
|
+
import { DescriptionActionType, DescriptionProps } from '../types';
|
|
3
|
+
|
|
4
|
+
export type UseDescriptionPropsReactive = DescriptionProps | Ref<DescriptionProps | undefined>;
|
|
5
|
+
export type UseDescriptionReturn = [
|
|
6
|
+
(instance: DescriptionActionType) => void,
|
|
7
|
+
DescriptionActionType
|
|
8
|
+
];
|
|
9
|
+
export declare function useDescription(props?: UseDescriptionPropsReactive): UseDescriptionReturn;
|
|
@@ -186,6 +186,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
|
|
|
186
186
|
};
|
|
187
187
|
submitOnReset: boolean;
|
|
188
188
|
}>>>, {
|
|
189
|
+
size: "medium" | "small" | "large";
|
|
189
190
|
showActionButtonGroup: boolean;
|
|
190
191
|
showSubmitButton: boolean;
|
|
191
192
|
showResetButton: boolean;
|
|
@@ -198,7 +199,6 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
|
|
|
198
199
|
labelWidth: string;
|
|
199
200
|
labelPosition: "left" | "right" | "top";
|
|
200
201
|
gutter: number;
|
|
201
|
-
size: "medium" | "small" | "large";
|
|
202
202
|
baseColProps: ColEx;
|
|
203
203
|
autoSetPlaceholder: boolean;
|
|
204
204
|
autoAdvancedLine: number;
|
|
@@ -372,11 +372,11 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
|
|
|
372
372
|
};
|
|
373
373
|
immediate: boolean;
|
|
374
374
|
}>>>, {
|
|
375
|
-
loading: boolean;
|
|
376
375
|
size: "medium" | "small" | "large";
|
|
376
|
+
bordered: boolean;
|
|
377
|
+
loading: boolean;
|
|
377
378
|
immediate: boolean;
|
|
378
379
|
rowKey: string;
|
|
379
|
-
bordered: boolean;
|
|
380
380
|
striped: boolean;
|
|
381
381
|
ellipsis: boolean;
|
|
382
382
|
showIndexColumn: boolean;
|