@lambo-design/detail-table 1.0.0-beta.3 → 1.0.0-beta.31
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/package.json +24 -18
- package/src/components/Col.js +83 -32
- package/src/components/Row.js +6 -2
- package/src/detail-table-item.vue +4 -0
- package/src/detail-table.vue +5 -3
- package/src/styles/css/index.less +18 -17
package/package.json
CHANGED
|
@@ -1,18 +1,24 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@lambo-design/detail-table",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@lambo-design/detail-table",
|
|
3
|
+
"version": "1.0.0-beta.31",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"author": "lambo",
|
|
7
|
+
"license": "ISC",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"access": "public",
|
|
10
|
+
"registry": "https://registry.npmjs.org/"
|
|
11
|
+
},
|
|
12
|
+
"devDependencies": {
|
|
13
|
+
"@lambo-design/core": "^4.7.1-beta.171",
|
|
14
|
+
"@lambo-design/shared": "^1.0.0-beta.318"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
|
|
18
|
+
"release-major": "standard-version --release-as major",
|
|
19
|
+
"release-minor": "standard-version --release-as minor",
|
|
20
|
+
"release-patch": "standard-version --release-as patch",
|
|
21
|
+
"release-beta": "standard-version --prerelease beta",
|
|
22
|
+
"re-publish": "pnpm publish --access public --no-git-checks"
|
|
23
|
+
}
|
|
24
|
+
}
|
package/src/components/Col.js
CHANGED
|
@@ -15,18 +15,24 @@ const ColProps = {
|
|
|
15
15
|
validator: function(value) {
|
|
16
16
|
return ["horizontal", "vertical"].indexOf(value) !== -1;
|
|
17
17
|
}
|
|
18
|
-
}
|
|
18
|
+
},
|
|
19
|
+
totalCols: Number,
|
|
20
|
+
column : Number,
|
|
21
|
+
labelWidth: Number
|
|
19
22
|
};
|
|
20
23
|
|
|
21
24
|
const Col = {
|
|
22
25
|
functional: true,
|
|
23
26
|
props: ColProps,
|
|
24
27
|
render(createElement, ctx) {
|
|
25
|
-
const { child, bordered, colon, type, layout } = ctx.props;
|
|
28
|
+
const { child, bordered, colon, type, layout ,column ,labelWidth} = ctx.props;
|
|
26
29
|
const { prefixCls, span = 1 } = getOptionProps(child);
|
|
27
30
|
const { key } = ctx.data;
|
|
28
31
|
const label = getComponentFromProp(child, "label");
|
|
29
32
|
const slots = getSlots(child);
|
|
33
|
+
const labelColSpan = Math.floor(labelWidth/column); // 计算 label 的长度
|
|
34
|
+
const contextColSpan = Math.floor((100-labelWidth)/column); // 计算 context 的长度
|
|
35
|
+
const promptInfo = getComponentFromProp(child, "promptInfo")
|
|
30
36
|
const labelProps = {
|
|
31
37
|
attrs: {},
|
|
32
38
|
class: [
|
|
@@ -36,7 +42,10 @@ const Col = {
|
|
|
36
42
|
[`${prefixCls}-item-no-label`]: !label
|
|
37
43
|
}
|
|
38
44
|
],
|
|
39
|
-
key: `${key}-label
|
|
45
|
+
key: `${key}-label`,
|
|
46
|
+
style: {
|
|
47
|
+
width: `${labelColSpan}%` // 添加 label 的宽度
|
|
48
|
+
}
|
|
40
49
|
};
|
|
41
50
|
if (layout === "vertical") {
|
|
42
51
|
labelProps.attrs.colSpan = span * 2 - 1;
|
|
@@ -44,52 +53,94 @@ const Col = {
|
|
|
44
53
|
|
|
45
54
|
if (bordered) {
|
|
46
55
|
if (type === "label") {
|
|
56
|
+
if (promptInfo && promptInfo !=="") {
|
|
57
|
+
let labelItem = createElement(
|
|
58
|
+
'Tooltip',
|
|
59
|
+
{
|
|
60
|
+
ref: key,
|
|
61
|
+
props: {
|
|
62
|
+
placement: 'right',
|
|
63
|
+
maxWidth: 300
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
[
|
|
67
|
+
label,
|
|
68
|
+
createElement(
|
|
69
|
+
'Icon', {
|
|
70
|
+
ref: key,
|
|
71
|
+
props: {
|
|
72
|
+
type: 'ios-information-circle-outline',
|
|
73
|
+
size: 16,
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
createElement(
|
|
78
|
+
'div', {
|
|
79
|
+
slot: 'content',
|
|
80
|
+
theme: 'light'
|
|
81
|
+
},
|
|
82
|
+
[
|
|
83
|
+
createElement('span', {},
|
|
84
|
+
promptInfo
|
|
85
|
+
)
|
|
86
|
+
]
|
|
87
|
+
)
|
|
88
|
+
]
|
|
89
|
+
)
|
|
90
|
+
return createElement('th', labelProps, [labelItem])
|
|
91
|
+
}
|
|
47
92
|
return createElement("th", labelProps, label);
|
|
48
93
|
}
|
|
49
94
|
return createElement(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
95
|
+
"td",
|
|
96
|
+
{
|
|
97
|
+
class: `${prefixCls}-item-content`,
|
|
98
|
+
key: `${key}-content`,
|
|
99
|
+
attrs:{colSpan: span * 2 - 1},
|
|
100
|
+
style: {
|
|
101
|
+
width: `${contextColSpan}%` // 添加 content 的宽度
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
slots.default
|
|
57
105
|
);
|
|
58
106
|
}
|
|
59
107
|
if (layout === "vertical") {
|
|
60
108
|
if (type === "content") {
|
|
61
109
|
return createElement(
|
|
110
|
+
"td",
|
|
111
|
+
{ colSpan: span, class: `${prefixCls}-item` },
|
|
112
|
+
createElement(
|
|
113
|
+
"span",
|
|
114
|
+
{ class: `${prefixCls}-item-content`, key: `${key}-content`, style: { width: `${contextColSpan}%` } },
|
|
115
|
+
slots.default
|
|
116
|
+
)
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
return createElement(
|
|
62
120
|
"td",
|
|
63
121
|
{ colSpan: span, class: `${prefixCls}-item` },
|
|
64
122
|
createElement(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
123
|
+
"span",
|
|
124
|
+
{
|
|
125
|
+
class: [
|
|
126
|
+
`${prefixCls}-item-label`,
|
|
127
|
+
{ [`${prefixCls}-item-colon`]: colon }
|
|
128
|
+
],
|
|
129
|
+
key: `${key}-label`,
|
|
130
|
+
style: {
|
|
131
|
+
width: `${labelColSpan}%` // 添加 label 的宽度
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
label
|
|
68
135
|
)
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
return createElement(
|
|
72
|
-
"td",
|
|
73
|
-
{ colSpan: span, class: `${prefixCls}-item` },
|
|
74
|
-
createElement(
|
|
75
|
-
"span",
|
|
76
|
-
{
|
|
77
|
-
class: [
|
|
78
|
-
`${prefixCls}-item-label`,
|
|
79
|
-
{ [`${prefixCls}-item-colon`]: colon }
|
|
80
|
-
],
|
|
81
|
-
key: `${key}-label`
|
|
82
|
-
},
|
|
83
|
-
label
|
|
84
|
-
)
|
|
85
136
|
);
|
|
86
137
|
}
|
|
87
138
|
return createElement("td", { colSpan: span, class: `${prefixCls}-item` }, [
|
|
88
139
|
createElement("span", labelProps, label),
|
|
89
140
|
createElement(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
141
|
+
"span",
|
|
142
|
+
{ class: `${prefixCls}-item-content`, key: `${key}-content`, style: { width: `${contextColSpan}%` } },
|
|
143
|
+
slots.default
|
|
93
144
|
)
|
|
94
145
|
]);
|
|
95
146
|
}
|
package/src/components/Row.js
CHANGED
|
@@ -13,14 +13,18 @@ function toArray(value) {
|
|
|
13
13
|
export default {
|
|
14
14
|
functional: true,
|
|
15
15
|
render: function(createElement, context) {
|
|
16
|
-
const { children, index, prefixCls, bordered, layout, colon } = context.props;
|
|
16
|
+
const { children, index, prefixCls, bordered, layout, colon,column ,labelWidth} = context.props;
|
|
17
|
+
const totalCols = toArray(children).length;
|
|
17
18
|
const renderCol = (colItem, type, idx) => {
|
|
18
19
|
const colProps = {
|
|
19
20
|
child: colItem,
|
|
20
21
|
bordered: bordered,
|
|
21
22
|
colon: colon,
|
|
22
23
|
type: type,
|
|
23
|
-
layout: layout
|
|
24
|
+
layout: layout,
|
|
25
|
+
totalCols: totalCols,
|
|
26
|
+
column :column,
|
|
27
|
+
labelWidth:labelWidth
|
|
24
28
|
}
|
|
25
29
|
return createElement(Col, {props:colProps,key: `${type}-${colItem.key || idx}`});
|
|
26
30
|
};
|
package/src/detail-table.vue
CHANGED
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
},
|
|
9
9
|
]"
|
|
10
10
|
>
|
|
11
|
-
<div v-if="title" :class="[`${prefixCls}-title`]">{{ title }}</div>
|
|
12
11
|
<div :class="[`${prefixCls}-view`]">
|
|
13
12
|
<table>
|
|
14
13
|
<tbody>
|
|
@@ -21,7 +20,10 @@
|
|
|
21
20
|
:bordered="bordered"
|
|
22
21
|
:layout="layout"
|
|
23
22
|
:colon="colon"
|
|
24
|
-
|
|
23
|
+
:column="column"
|
|
24
|
+
:labelWidth="labelWidth"
|
|
25
|
+
>
|
|
26
|
+
</Row>
|
|
25
27
|
</tbody>
|
|
26
28
|
</table>
|
|
27
29
|
</div>
|
|
@@ -67,8 +69,8 @@ export default {
|
|
|
67
69
|
return ["default", "middle", "small"].indexOf(value) !== -1;
|
|
68
70
|
},
|
|
69
71
|
},
|
|
70
|
-
title: String,
|
|
71
72
|
column: Number,
|
|
73
|
+
labelWidth:Number,
|
|
72
74
|
layout: {
|
|
73
75
|
type: String,
|
|
74
76
|
default: "horizontal",
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
@descriptions-
|
|
1
|
+
@import "@lambo-design/core/src/styles/default.less";
|
|
2
|
+
@descriptions-prefix-cls: lambo-detail-table;
|
|
3
|
+
|
|
4
|
+
@descriptions-default-padding: 10px 16px;
|
|
5
|
+
@descriptions-middle-padding: 8px 12px;
|
|
6
|
+
@descriptions-small-padding: 6px 8px;
|
|
5
7
|
|
|
6
8
|
.@{descriptions-prefix-cls} {
|
|
7
9
|
&-title {
|
|
@@ -15,7 +17,6 @@
|
|
|
15
17
|
&-view {
|
|
16
18
|
width: 100%;
|
|
17
19
|
overflow: hidden;
|
|
18
|
-
border-radius: 4px;
|
|
19
20
|
table {
|
|
20
21
|
width: 100%;
|
|
21
22
|
table-layout: fixed;
|
|
@@ -34,10 +35,12 @@
|
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
&-item-label {
|
|
37
|
-
color:
|
|
38
|
-
|
|
38
|
+
color: var(--form-item-label-text-color,@_form-item-label-text-color);
|
|
39
|
+
text-align: left;
|
|
40
|
+
font-weight: 500;
|
|
39
41
|
font-size: 14px;
|
|
40
42
|
line-height: 1.5;
|
|
43
|
+
width: 11%;
|
|
41
44
|
|
|
42
45
|
&::after {
|
|
43
46
|
position: relative;
|
|
@@ -62,9 +65,10 @@
|
|
|
62
65
|
|
|
63
66
|
&-item-content {
|
|
64
67
|
display: table-cell;
|
|
65
|
-
color:
|
|
68
|
+
color: var(--text-color,@_text-color);
|
|
66
69
|
font-size: 14px;
|
|
67
70
|
line-height: 1.5;
|
|
71
|
+
width: 22%;
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
&-item {
|
|
@@ -94,7 +98,6 @@
|
|
|
94
98
|
|
|
95
99
|
&-bordered {
|
|
96
100
|
.@{descriptions-prefix-cls}-view {
|
|
97
|
-
border: 1px solid hsv(0, 0, 91%);
|
|
98
101
|
> table {
|
|
99
102
|
table-layout: auto;
|
|
100
103
|
}
|
|
@@ -103,26 +106,24 @@
|
|
|
103
106
|
.@{descriptions-prefix-cls}-item-label,
|
|
104
107
|
.@{descriptions-prefix-cls}-item-content {
|
|
105
108
|
padding: @descriptions-default-padding;
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
+
border: 1px solid var(--border-color-base,@_border-color-base);
|
|
110
|
+
background-color: var(--form-item-detail-bg-color,@_form-item-detail-bg-color);
|
|
109
111
|
&:last-child {
|
|
110
112
|
border-right: none;
|
|
111
113
|
}
|
|
112
114
|
}
|
|
113
115
|
|
|
114
116
|
.@{descriptions-prefix-cls}-item-label {
|
|
115
|
-
background-color: #f0f0f1ff;
|
|
117
|
+
//background-color: #f0f0f1ff;
|
|
118
|
+
background-color: var(--table-thead-bg,@_table-thead-bg);
|
|
119
|
+
|
|
116
120
|
&::after {
|
|
117
121
|
display: none;
|
|
118
122
|
}
|
|
119
123
|
}
|
|
120
124
|
|
|
121
125
|
.@{descriptions-prefix-cls}-row {
|
|
122
|
-
border
|
|
123
|
-
&:last-child {
|
|
124
|
-
border-bottom: none;
|
|
125
|
-
}
|
|
126
|
+
border: 1px solid var(--border-color-base,@_border-color-base); ;
|
|
126
127
|
}
|
|
127
128
|
|
|
128
129
|
&.@{descriptions-prefix-cls}-middle {
|