@aspire-ui/element-component-pro 1.0.5 → 1.0.7

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 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>
@@ -311,10 +311,95 @@ const handleSubmit = (values) => {
311
311
  - **dynamicDisabled**: 动态禁用
312
312
  - **dynamicRules**: 动态校验规则
313
313
  - **labelWidth**: 支持字段级标签宽度,覆盖表单级 `labelWidth`
314
+ - **tooltip**: 支持字段 value 的悬浮提示,可直接显示当前值或动态文案
314
315
  - **v-model**: 支持 `modelValue` 双向绑定,`initialValues` 仅补齐缺失字段
315
316
  - **useForm + v-model**: 编程式 `setFieldsValue/resetFields` 与受控 `modelValue` 保持同步
316
317
  - **componentProps**: 支持函数,可获取 formModel、formActionType
317
318
 
319
+ ```ts
320
+ {
321
+ field: 'name',
322
+ label: '姓名',
323
+ component: 'input',
324
+ tooltip: true,
325
+ }
326
+
327
+ {
328
+ field: 'status',
329
+ label: '状态',
330
+ component: 'select',
331
+ tooltip: ({ values }) => values.name ? `当前姓名:${values.name}` : '请选择状态',
332
+ }
333
+ ```
334
+
335
+ 更多说明见 `docs/ProForm.md`。
336
+
337
+ ## ProDescriptions
338
+
339
+ 参考 [Vben Admin Description](https://doc.vvbin.cn/components/desc.html#usage),用于详情页信息展示,支持 `schema` 驱动、响应式列数、折叠以及 `useDescription` 编程式更新。
340
+
341
+ - **tooltip**: 支持字段 value 的悬浮提示,适合长文本、数组值和对象值预览
342
+
343
+ ```vue
344
+ <template>
345
+ <ProDescriptions
346
+ title="基础示例"
347
+ :column="3"
348
+ :data="detailData"
349
+ :schema="schema"
350
+ :use-collapse="true"
351
+ :collapse-options="{ canExpand: true }"
352
+ />
353
+ </template>
354
+
355
+ <script setup lang="ts">
356
+ import { ProDescriptions } from 'element-component-pro'
357
+ import type { DescriptionSchema } from 'element-component-pro'
358
+
359
+ const detailData = {
360
+ username: 'test',
361
+ nickName: 'VB',
362
+ phone: '15695909xxx',
363
+ email: '190848757@qq.com',
364
+ }
365
+
366
+ const schema: DescriptionSchema[] = [
367
+ { label: '用户名', dataIndex: 'username' },
368
+ { label: '昵称', dataIndex: 'nickName' },
369
+ { label: '联系电话', dataIndex: 'phone' },
370
+ { label: '邮箱', dataIndex: 'email' },
371
+ ]
372
+ </script>
373
+ ```
374
+
375
+ ### useDescription
376
+
377
+ ```vue
378
+ <template>
379
+ <ProDescriptions @register="register" />
380
+ </template>
381
+
382
+ <script setup lang="ts">
383
+ import { ProDescriptions, useDescription } from 'element-component-pro'
384
+
385
+ const [register, descriptionAction] = useDescription({
386
+ title: 'useDescription',
387
+ data: {
388
+ name: '张三',
389
+ status: '启用',
390
+ },
391
+ schema: [
392
+ { label: '姓名', dataIndex: 'name' },
393
+ { label: '状态', dataIndex: 'status' },
394
+ ],
395
+ })
396
+
397
+ const updateData = () => {
398
+ descriptionAction.setData({ status: '禁用' })
399
+ }
400
+ </script>
401
+ ```
402
+
318
403
  ## 示例与文档
319
404
 
320
405
  - **示例**:运行 `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,5 @@
1
+ import { default as ProDescriptions } from './ProDescriptions.vue';
2
+ import { useDescription } from './useDescription';
3
+
4
+ export { ProDescriptions, useDescription };
5
+ export default ProDescriptions;
@@ -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;
@@ -6,6 +6,7 @@ declare function __VLS_template(): Partial<Record<string, (_: {
6
6
  field: string;
7
7
  label: string;
8
8
  labelWidth?: string | undefined;
9
+ colon?: boolean | undefined;
9
10
  component?: (import('..').ProFormBuiltInComponent | import('..').ProFormCustomComponent) | undefined;
10
11
  componentProps?: (Record<string, unknown> | ((params: import('..').RenderCallbackParams & {
11
12
  formActionType?: FormActionType;
@@ -35,6 +36,7 @@ declare function __VLS_template(): Partial<Record<string, (_: {
35
36
  dependencies?: string[] | undefined;
36
37
  helpMessage?: string | string[] | undefined;
37
38
  helpComponentProps?: Record<string, unknown> | undefined;
39
+ tooltip?: (boolean | string | Record<string, unknown> | ((params: import('..').RenderCallbackParams) => boolean | string | Record<string, unknown>)) | undefined;
38
40
  };
39
41
  field: string;
40
42
  values: Record<string, unknown>;
@@ -53,6 +55,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
53
55
  initialValues?: Record<string, unknown>;
54
56
  labelWidth?: string;
55
57
  labelPosition?: "left" | "right" | "top";
58
+ colon?: boolean;
56
59
  gutter?: number;
57
60
  size?: "medium" | "small" | "large";
58
61
  disabled?: boolean;
@@ -79,6 +82,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
79
82
  }>, {
80
83
  labelWidth: string;
81
84
  labelPosition: string;
85
+ colon: boolean;
82
86
  gutter: number;
83
87
  size: string;
84
88
  autoSetPlaceholder: boolean;
@@ -131,6 +135,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
131
135
  initialValues?: Record<string, unknown>;
132
136
  labelWidth?: string;
133
137
  labelPosition?: "left" | "right" | "top";
138
+ colon?: boolean;
134
139
  gutter?: number;
135
140
  size?: "medium" | "small" | "large";
136
141
  disabled?: boolean;
@@ -157,6 +162,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
157
162
  }>, {
158
163
  labelWidth: string;
159
164
  labelPosition: string;
165
+ colon: boolean;
160
166
  gutter: number;
161
167
  size: string;
162
168
  autoSetPlaceholder: boolean;
@@ -186,6 +192,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
186
192
  };
187
193
  submitOnReset: boolean;
188
194
  }>>>, {
195
+ size: "medium" | "small" | "large";
189
196
  showActionButtonGroup: boolean;
190
197
  showSubmitButton: boolean;
191
198
  showResetButton: boolean;
@@ -195,10 +202,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
195
202
  resetButtonIcon: string;
196
203
  showAdvancedButton: boolean;
197
204
  actionColOptions: ColEx;
205
+ colon: boolean;
198
206
  labelWidth: string;
199
207
  labelPosition: "left" | "right" | "top";
200
208
  gutter: number;
201
- size: "medium" | "small" | "large";
202
209
  baseColProps: ColEx;
203
210
  autoSetPlaceholder: boolean;
204
211
  autoAdvancedLine: number;
@@ -13,6 +13,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
13
13
  formModel: Record<string, unknown>;
14
14
  formDisabled?: boolean;
15
15
  autoPlaceholder?: boolean;
16
+ colon?: boolean;
16
17
  formActionType?: import('../types').FormActionType;
17
18
  onFieldChange?: (field: string, value: unknown) => void;
18
19
  /** 自定义组件映射(由 ProForm 传入) */
@@ -22,6 +23,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
22
23
  formModel: Record<string, unknown>;
23
24
  formDisabled?: boolean;
24
25
  autoPlaceholder?: boolean;
26
+ colon?: boolean;
25
27
  formActionType?: import('../types').FormActionType;
26
28
  onFieldChange?: (field: string, value: unknown) => void;
27
29
  /** 自定义组件映射(由 ProForm 传入) */
@@ -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;