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.
@@ -6,13 +6,13 @@
6
6
  class="km-node__text-icon--wrapper canvas-item"
7
7
  style="{{iconMeta.wrapperStyle}}"
8
8
  >
9
- <i 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}}" ></i>
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
- <text class="km-node__text-value canvas-item" style="{{textStyle}}" data-text="{{textValue || ''}}">{{textValue || ''}}</text>
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
- <text 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 || ''}}</text>
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: inline-flex;
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "km-card-layout-component-miniprogram",
3
- "version": "0.1.23",
3
+ "version": "0.1.24",
4
4
  "description": "",
5
5
  "main": "miniprogram_dist/index.js",
6
6
  "miniprogram": "miniprogram_dist",
@@ -6,13 +6,13 @@
6
6
  class="km-node__text-icon--wrapper canvas-item"
7
7
  style="{{iconMeta.wrapperStyle}}"
8
8
  >
9
- <i 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}}" ></i>
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
- <text class="km-node__text-value canvas-item" style="{{textStyle}}" data-text="{{textValue || ''}}">{{textValue || ''}}</text>
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
- <text 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 || ''}}</text>
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: inline-flex;
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