km-card-layout-component-miniprogram 0.1.23 → 0.1.24
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/miniprogram_dist/components/card-layout/elements/text-element/index.wxml +3 -3
- package/miniprogram_dist/components/card-layout/elements/text-element/index.wxss +8 -10
- package/miniprogram_dist/vendor/km-card-layout-core/render/helpers.js +24 -1
- package/package.json +1 -1
- package/src/components/card-layout/elements/text-element/index.wxml +3 -3
- package/src/components/card-layout/elements/text-element/index.wxss +8 -10
- package/src/vendor/km-card-layout-core/render/helpers.ts +25 -0
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
class="km-node__text-icon--wrapper canvas-item"
|
|
7
7
|
style="{{iconMeta.wrapperStyle}}"
|
|
8
8
|
>
|
|
9
|
-
<
|
|
9
|
+
<view class="km-node__text-icon icon {{iconMeta.className}} canvas-item" style="font-size: {{iconMeta.size}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};" data-icon="{{iconMeta.iconCode}}" ></view>
|
|
10
10
|
</view>
|
|
11
|
-
<
|
|
11
|
+
<view class="km-node__text-value canvas-item" style="{{textStyle}}" data-text="{{textValue || ''}}">{{textValue || ''}}</view>
|
|
12
12
|
</view>
|
|
13
13
|
</block>
|
|
14
14
|
<block wx:else>
|
|
15
|
-
<
|
|
15
|
+
<view class="km-node__text-value canvas-item" style="{{textStyle}}" data-text="{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + ':') : ''}}{{textValue || ''}}">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + ':') : ''}}{{textValue || ''}}</view>
|
|
16
16
|
</block>
|
|
17
17
|
</view>
|
|
18
18
|
</view>
|
|
@@ -23,10 +23,9 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.km-node__text-content {
|
|
26
|
-
display: inline-block;
|
|
27
26
|
vertical-align: middle;
|
|
28
27
|
height: 100%;
|
|
29
|
-
display:
|
|
28
|
+
display: flex;
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
.km-node__text-icon {
|
|
@@ -37,18 +36,17 @@
|
|
|
37
36
|
|
|
38
37
|
.km-node__text-value {
|
|
39
38
|
display: inline-block;
|
|
40
|
-
white-space: pre-wrap;
|
|
41
39
|
word-break: break-word;
|
|
42
40
|
vertical-align: middle;
|
|
41
|
+
height: 100%;
|
|
42
|
+
width: 100%;
|
|
43
|
+
flex: 1;
|
|
44
|
+
text-overflow: ellipsis;
|
|
45
|
+
word-break: break-all;
|
|
46
|
+
word-wrap: break-word;
|
|
47
|
+
white-space: pre-wrap;
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
.km-node__text-icon--wrapper {
|
|
46
51
|
display: inline-block;
|
|
47
52
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
[class^="icon-"],
|
|
51
|
-
[class*=" icon-"] {
|
|
52
|
-
font-family: 'layout-icon' !important;
|
|
53
|
-
/* 其他样式 */
|
|
54
|
-
}
|
|
@@ -83,12 +83,35 @@ const buildTextContentStyle = (el, unit = 'px') => {
|
|
|
83
83
|
};
|
|
84
84
|
exports.buildTextContentStyle = buildTextContentStyle;
|
|
85
85
|
const buildTextValueStyle = (el, unit = 'px') => {
|
|
86
|
-
var _a, _b;
|
|
86
|
+
var _a, _b, _c, _d;
|
|
87
87
|
const style = {
|
|
88
88
|
letterSpacing: ((_a = el.style) === null || _a === void 0 ? void 0 : _a.letterSpacing) !== undefined && ((_b = el.style) === null || _b === void 0 ? void 0 : _b.letterSpacing) !== null
|
|
89
89
|
? (0, helpers_1.addUnit)(el.style.letterSpacing, unit)
|
|
90
90
|
: '0',
|
|
91
91
|
};
|
|
92
|
+
const abs = (0, layout_1.getAbsLayout)(el);
|
|
93
|
+
const height = abs === null || abs === void 0 ? void 0 : abs.height;
|
|
94
|
+
const toNumber = (value) => {
|
|
95
|
+
const num = Number(value);
|
|
96
|
+
return Number.isFinite(num) ? num : undefined;
|
|
97
|
+
};
|
|
98
|
+
const fontSize = toNumber((_c = el.style) === null || _c === void 0 ? void 0 : _c.fontSize);
|
|
99
|
+
const heightValue = toNumber(height);
|
|
100
|
+
let lineHeight = toNumber((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight);
|
|
101
|
+
if ((lineHeight === undefined || lineHeight === 0) && fontSize) {
|
|
102
|
+
lineHeight = fontSize;
|
|
103
|
+
}
|
|
104
|
+
if (heightValue !== undefined &&
|
|
105
|
+
lineHeight !== undefined &&
|
|
106
|
+
heightValue > 0 &&
|
|
107
|
+
lineHeight > 0) {
|
|
108
|
+
const lineClamp = Math.max(1, Math.floor(heightValue / lineHeight));
|
|
109
|
+
style.display = '-webkit-box';
|
|
110
|
+
style.overflow = 'hidden';
|
|
111
|
+
style.textOverflow = 'ellipsis';
|
|
112
|
+
style['-webkit-box-orient'] = 'vertical';
|
|
113
|
+
style['-webkit-line-clamp'] = lineClamp;
|
|
114
|
+
}
|
|
92
115
|
return style;
|
|
93
116
|
};
|
|
94
117
|
exports.buildTextValueStyle = buildTextValueStyle;
|
package/package.json
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
class="km-node__text-icon--wrapper canvas-item"
|
|
7
7
|
style="{{iconMeta.wrapperStyle}}"
|
|
8
8
|
>
|
|
9
|
-
<
|
|
9
|
+
<view class="km-node__text-icon icon {{iconMeta.className}} canvas-item" style="font-size: {{iconMeta.size}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};" data-icon="{{iconMeta.iconCode}}" ></view>
|
|
10
10
|
</view>
|
|
11
|
-
<
|
|
11
|
+
<view class="km-node__text-value canvas-item" style="{{textStyle}}" data-text="{{textValue || ''}}">{{textValue || ''}}</view>
|
|
12
12
|
</view>
|
|
13
13
|
</block>
|
|
14
14
|
<block wx:else>
|
|
15
|
-
<
|
|
15
|
+
<view class="km-node__text-value canvas-item" style="{{textStyle}}" data-text="{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + ':') : ''}}{{textValue || ''}}">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + ':') : ''}}{{textValue || ''}}</view>
|
|
16
16
|
</block>
|
|
17
17
|
</view>
|
|
18
18
|
</view>
|
|
@@ -23,10 +23,9 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.km-node__text-content {
|
|
26
|
-
display: inline-block;
|
|
27
26
|
vertical-align: middle;
|
|
28
27
|
height: 100%;
|
|
29
|
-
display:
|
|
28
|
+
display: flex;
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
.km-node__text-icon {
|
|
@@ -37,18 +36,17 @@
|
|
|
37
36
|
|
|
38
37
|
.km-node__text-value {
|
|
39
38
|
display: inline-block;
|
|
40
|
-
white-space: pre-wrap;
|
|
41
39
|
word-break: break-word;
|
|
42
40
|
vertical-align: middle;
|
|
41
|
+
height: 100%;
|
|
42
|
+
width: 100%;
|
|
43
|
+
flex: 1;
|
|
44
|
+
text-overflow: ellipsis;
|
|
45
|
+
word-break: break-all;
|
|
46
|
+
word-wrap: break-word;
|
|
47
|
+
white-space: pre-wrap;
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
.km-node__text-icon--wrapper {
|
|
46
51
|
display: inline-block;
|
|
47
52
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
[class^="icon-"],
|
|
51
|
-
[class*=" icon-"] {
|
|
52
|
-
font-family: 'layout-icon' !important;
|
|
53
|
-
/* 其他样式 */
|
|
54
|
-
}
|
|
@@ -115,6 +115,31 @@ export const buildTextValueStyle = (
|
|
|
115
115
|
? addUnit(el.style.letterSpacing as any, unit)
|
|
116
116
|
: '0',
|
|
117
117
|
};
|
|
118
|
+
const abs = getAbsLayout(el);
|
|
119
|
+
const height = abs?.height;
|
|
120
|
+
const toNumber = (value: unknown): number | undefined => {
|
|
121
|
+
const num = Number(value);
|
|
122
|
+
return Number.isFinite(num) ? num : undefined;
|
|
123
|
+
};
|
|
124
|
+
const fontSize = toNumber(el.style?.fontSize);
|
|
125
|
+
const heightValue = toNumber(height);
|
|
126
|
+
let lineHeight = toNumber(el.style?.lineHeight);
|
|
127
|
+
if ((lineHeight === undefined || lineHeight === 0) && fontSize) {
|
|
128
|
+
lineHeight = fontSize;
|
|
129
|
+
}
|
|
130
|
+
if (
|
|
131
|
+
heightValue !== undefined &&
|
|
132
|
+
lineHeight !== undefined &&
|
|
133
|
+
heightValue > 0 &&
|
|
134
|
+
lineHeight > 0
|
|
135
|
+
) {
|
|
136
|
+
const lineClamp = Math.max(1, Math.floor(heightValue / lineHeight));
|
|
137
|
+
style.display = '-webkit-box';
|
|
138
|
+
style.overflow = 'hidden';
|
|
139
|
+
style.textOverflow = 'ellipsis';
|
|
140
|
+
style['-webkit-box-orient'] = 'vertical';
|
|
141
|
+
style['-webkit-line-clamp'] = lineClamp;
|
|
142
|
+
}
|
|
118
143
|
return style;
|
|
119
144
|
};
|
|
120
145
|
|