@lambo-design/detail-table 1.0.0-beta.2 → 1.0.0-beta.21
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 +17 -18
- package/src/components/Col.js +48 -44
- package/src/styles/css/index.less +15 -15
package/package.json
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
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.21",
|
|
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.60",
|
|
14
|
+
"@lambo-design/shared": "^1.0.0-beta.43"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {}
|
|
17
|
+
}
|
package/src/components/Col.js
CHANGED
|
@@ -27,6 +27,15 @@ const Col = {
|
|
|
27
27
|
const { key } = ctx.data;
|
|
28
28
|
const label = getComponentFromProp(child, "label");
|
|
29
29
|
const slots = getSlots(child);
|
|
30
|
+
|
|
31
|
+
// Calculate the total width and column width
|
|
32
|
+
const totalWidth = 100; // You can adjust this value according to your needs
|
|
33
|
+
const columnWidth = totalWidth / 6;
|
|
34
|
+
|
|
35
|
+
// Set label and content widths
|
|
36
|
+
const labelWidth = columnWidth;
|
|
37
|
+
const contentWidth = columnWidth * 2;
|
|
38
|
+
|
|
30
39
|
const labelProps = {
|
|
31
40
|
attrs: {},
|
|
32
41
|
class: [
|
|
@@ -36,62 +45,57 @@ const Col = {
|
|
|
36
45
|
[`${prefixCls}-item-no-label`]: !label
|
|
37
46
|
}
|
|
38
47
|
],
|
|
39
|
-
key: `${key}-label
|
|
48
|
+
key: `${key}-label`,
|
|
49
|
+
style: {
|
|
50
|
+
width: `${labelWidth}%` // Set label width
|
|
51
|
+
}
|
|
40
52
|
};
|
|
41
|
-
if (layout === "vertical") {
|
|
42
|
-
labelProps.attrs.colSpan = span * 2 - 1;
|
|
43
|
-
}
|
|
44
53
|
|
|
45
54
|
if (bordered) {
|
|
46
55
|
if (type === "label") {
|
|
47
56
|
return createElement("th", labelProps, label);
|
|
48
57
|
}
|
|
58
|
+
|
|
49
59
|
return createElement(
|
|
50
|
-
"td",
|
|
51
|
-
{
|
|
52
|
-
class: `${prefixCls}-item-content`,
|
|
53
|
-
key: `${key}-content`,
|
|
54
|
-
colSpan: span * 2 - 1
|
|
55
|
-
},
|
|
56
|
-
slots.default
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
if (layout === "vertical") {
|
|
60
|
-
if (type === "content") {
|
|
61
|
-
return createElement(
|
|
62
60
|
"td",
|
|
63
|
-
{ colSpan: span, class: `${prefixCls}-item` },
|
|
64
|
-
createElement(
|
|
65
|
-
"span",
|
|
66
|
-
{ class: `${prefixCls}-item-content`, key: `${key}-content` },
|
|
67
|
-
slots.default
|
|
68
|
-
)
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
return createElement(
|
|
72
|
-
"td",
|
|
73
|
-
{ colSpan: span, class: `${prefixCls}-item` },
|
|
74
|
-
createElement(
|
|
75
|
-
"span",
|
|
76
61
|
{
|
|
77
|
-
class:
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
62
|
+
class: `${prefixCls}-item-content`,
|
|
63
|
+
key: `${key}-content`,
|
|
64
|
+
attrs: {
|
|
65
|
+
colspan: span * 2 - 1
|
|
66
|
+
},
|
|
67
|
+
style: {
|
|
68
|
+
width: `${contentWidth}%` // Set content width
|
|
69
|
+
}
|
|
82
70
|
},
|
|
83
|
-
|
|
84
|
-
)
|
|
71
|
+
slots.default
|
|
85
72
|
);
|
|
86
73
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
74
|
+
|
|
75
|
+
if (layout === "vertical") {
|
|
76
|
+
// ... (existing code)
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return createElement(
|
|
80
|
+
"td",
|
|
81
|
+
{
|
|
82
|
+
attrs: {
|
|
83
|
+
colspan: span
|
|
84
|
+
},
|
|
85
|
+
class: `${prefixCls}-item`,
|
|
86
|
+
style: {
|
|
87
|
+
width: `${columnWidth}%` // Set column width
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
[
|
|
91
|
+
createElement("span", labelProps, label),
|
|
92
|
+
createElement(
|
|
93
|
+
"span",
|
|
94
|
+
{ class: `${prefixCls}-item-content`, key: `${key}-content` },
|
|
95
|
+
slots.default
|
|
96
|
+
)
|
|
97
|
+
]
|
|
98
|
+
);
|
|
95
99
|
}
|
|
96
100
|
};
|
|
97
101
|
|
|
@@ -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,8 +35,9 @@
|
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
&-item-label {
|
|
37
|
-
color:
|
|
38
|
-
|
|
38
|
+
color: var(--heading-color,@_heading-color);;
|
|
39
|
+
text-align: left;
|
|
40
|
+
font-weight: 500;
|
|
39
41
|
font-size: 14px;
|
|
40
42
|
line-height: 1.5;
|
|
41
43
|
|
|
@@ -62,7 +64,7 @@
|
|
|
62
64
|
|
|
63
65
|
&-item-content {
|
|
64
66
|
display: table-cell;
|
|
65
|
-
color:
|
|
67
|
+
color: var(--text-color,@_text-color);;
|
|
66
68
|
font-size: 14px;
|
|
67
69
|
line-height: 1.5;
|
|
68
70
|
}
|
|
@@ -94,7 +96,6 @@
|
|
|
94
96
|
|
|
95
97
|
&-bordered {
|
|
96
98
|
.@{descriptions-prefix-cls}-view {
|
|
97
|
-
border: 1px solid hsv(0, 0, 91%);
|
|
98
99
|
> table {
|
|
99
100
|
table-layout: auto;
|
|
100
101
|
}
|
|
@@ -103,7 +104,7 @@
|
|
|
103
104
|
.@{descriptions-prefix-cls}-item-label,
|
|
104
105
|
.@{descriptions-prefix-cls}-item-content {
|
|
105
106
|
padding: @descriptions-default-padding;
|
|
106
|
-
border
|
|
107
|
+
border: 1px solid var(--border-color-base,@_border-color-base); ;
|
|
107
108
|
|
|
108
109
|
&:last-child {
|
|
109
110
|
border-right: none;
|
|
@@ -111,17 +112,16 @@
|
|
|
111
112
|
}
|
|
112
113
|
|
|
113
114
|
.@{descriptions-prefix-cls}-item-label {
|
|
114
|
-
background-color: #
|
|
115
|
+
//background-color: #f0f0f1ff;
|
|
116
|
+
background-color: var(--table-thead-bg,@_table-thead-bg);
|
|
117
|
+
|
|
115
118
|
&::after {
|
|
116
119
|
display: none;
|
|
117
120
|
}
|
|
118
121
|
}
|
|
119
122
|
|
|
120
123
|
.@{descriptions-prefix-cls}-row {
|
|
121
|
-
border
|
|
122
|
-
&:last-child {
|
|
123
|
-
border-bottom: none;
|
|
124
|
-
}
|
|
124
|
+
border: 1px solid var(--border-color-base,@_border-color-base); ;
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
&.@{descriptions-prefix-cls}-middle {
|