km-card-layout-component-miniprogram 0.1.13 → 0.1.14

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.
@@ -1,18 +1,28 @@
1
1
  <view class="km-node km-node--text" style="{{wrapperStyle}}">
2
2
  <view class="km-node__text" style="{{contentStyle}}">
3
- <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) || element.icon?.style!=='text'}}">
3
+ <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) && (element.icon && element.icon.style !== 'text')}}">
4
4
  <view class="km-node__text-content">
5
- <block wx:if="{{iconMeta.align === 'right'}}">
6
- <text class="km-node__text-value">{{element.icon?.style==='text'&& element.icon.enable?`${element.label}:`:''}}{{textValue || ''}}</text>
7
- <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper" >
5
+
6
+ <!-- icon 在右侧 -->
7
+ <block wx:if="{{iconMeta && iconMeta.align === 'right'}}">
8
+ <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + ':') : ''}}{{textValue || ''}}</text>
9
+ <view
10
+ class="km-node__text-icon--wrapper"
11
+ style="{{iconMeta.wrapperStyle}}"
12
+ >
8
13
  <text
9
14
  class="km-node__text-icon icon"
10
15
  style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
11
16
  >{{iconMeta.text || iconMeta.name || ''}}</text>
12
17
  </view>
13
18
  </block>
19
+
20
+ <!-- icon 在左侧 -->
14
21
  <block wx:else>
15
- <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper">
22
+ <view
23
+ class="km-node__text-icon--wrapper"
24
+ style="{{iconMeta.wrapperStyle}}"
25
+ >
16
26
  <text
17
27
  class="km-node__text-icon icon"
18
28
  style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
@@ -20,10 +30,13 @@
20
30
  </view>
21
31
  <text class="km-node__text-value">{{textValue || ''}}</text>
22
32
  </block>
33
+
23
34
  </view>
24
35
  </block>
36
+
37
+ <!-- 无 icon -->
25
38
  <block wx:else>
26
- <text class="km-node__text-value">{{element.icon?.style==='text'&& element.icon.enable?`${element.label}:`:''}}{{textValue || ''}}</text>
39
+ <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '') : ''}}{{textValue || ''}}</text>
27
40
  </block>
28
41
  </view>
29
42
  </view>
@@ -89,7 +89,7 @@ Component({
89
89
  },
90
90
  methods: {
91
91
  rebuild() {
92
- const layoutInput = ensureArray(this.data.layout);
92
+ const layoutInput = (0, index_1.processCardLayout)(this.data.layout, this.data.data);
93
93
  const rootData = handleSpecialFields(this.data.data);
94
94
  if (!layoutInput.length) {
95
95
  this.setData({ cards: [], rootData });
@@ -1,9 +1,17 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextValueStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = void 0;
3
+ exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextValueStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = exports.mockBaseCompanyDutyTemplateItem = void 0;
4
4
  const helpers_1 = require("../helpers");
5
5
  const layout_1 = require("../layout");
6
6
  const data_1 = require("../data");
7
+ exports.mockBaseCompanyDutyTemplateItem = {
8
+ id: -1,
9
+ name: 'company_duty_custom',
10
+ bind: 'user.baseCompanyDuty',
11
+ key: 'company_duty_custom',
12
+ type: 'text',
13
+ cate: 0,
14
+ };
7
15
  const buildWrapperStyle = (el, unit = 'px') => {
8
16
  const abs = (0, layout_1.getAbsLayout)(el);
9
17
  if (!abs)
@@ -99,7 +107,11 @@ const buildImageContentStyle = (el, unit = 'px') => {
99
107
  };
100
108
  exports.buildImageContentStyle = buildImageContentStyle;
101
109
  const getTextValue = (el, data) => {
102
- const bound = el.binding && data ? (0, data_1.resolveBindingValue)(el.binding, data) : undefined;
110
+ // 如果 id 匹配,则使用 mock binding,否则用原来的
111
+ const binding = el.id === String(exports.mockBaseCompanyDutyTemplateItem.id)
112
+ ? exports.mockBaseCompanyDutyTemplateItem.bind
113
+ : el.binding;
114
+ const bound = binding && data ? (0, data_1.resolveBindingValue)(binding, data) : undefined;
103
115
  const val = bound !== undefined && bound !== null
104
116
  ? bound
105
117
  : el.defaultValue !== undefined && el.defaultValue !== null
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "km-card-layout-component-miniprogram",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "description": "",
5
5
  "main": "miniprogram_dist/index.js",
6
6
  "miniprogram": "miniprogram_dist",
@@ -1,18 +1,28 @@
1
1
  <view class="km-node km-node--text" style="{{wrapperStyle}}">
2
2
  <view class="km-node__text" style="{{contentStyle}}">
3
- <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) || element.icon?.style!=='text'}}">
3
+ <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) && (element.icon && element.icon.style !== 'text')}}">
4
4
  <view class="km-node__text-content">
5
- <block wx:if="{{iconMeta.align === 'right'}}">
6
- <text class="km-node__text-value">{{element.icon?.style==='text'&& element.icon.enable?`${element.label}:`:''}}{{textValue || ''}}</text>
7
- <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper" >
5
+
6
+ <!-- icon 在右侧 -->
7
+ <block wx:if="{{iconMeta && iconMeta.align === 'right'}}">
8
+ <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + ':') : ''}}{{textValue || ''}}</text>
9
+ <view
10
+ class="km-node__text-icon--wrapper"
11
+ style="{{iconMeta.wrapperStyle}}"
12
+ >
8
13
  <text
9
14
  class="km-node__text-icon icon"
10
15
  style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
11
16
  >{{iconMeta.text || iconMeta.name || ''}}</text>
12
17
  </view>
13
18
  </block>
19
+
20
+ <!-- icon 在左侧 -->
14
21
  <block wx:else>
15
- <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper">
22
+ <view
23
+ class="km-node__text-icon--wrapper"
24
+ style="{{iconMeta.wrapperStyle}}"
25
+ >
16
26
  <text
17
27
  class="km-node__text-icon icon"
18
28
  style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
@@ -20,10 +30,13 @@
20
30
  </view>
21
31
  <text class="km-node__text-value">{{textValue || ''}}</text>
22
32
  </block>
33
+
23
34
  </view>
24
35
  </block>
36
+
37
+ <!-- 无 icon -->
25
38
  <block wx:else>
26
- <text class="km-node__text-value">{{element.icon?.style==='text'&& element.icon.enable?`${element.label}:`:''}}{{textValue || ''}}</text>
39
+ <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '') : ''}}{{textValue || ''}}</text>
27
40
  </block>
28
41
  </view>
29
42
  </view>
@@ -10,6 +10,7 @@ import {
10
10
  buildPanelContentStyle,
11
11
  buildWrapperStyle,
12
12
  normalizeLayout,
13
+ processCardLayout,
13
14
  styleObjectToString,
14
15
  } from '../../vendor/km-card-layout-core/index';
15
16
 
@@ -128,7 +129,7 @@ Component({
128
129
  },
129
130
  methods: {
130
131
  rebuild() {
131
- const layoutInput = ensureArray(this.data.layout as CardLayoutInput);
132
+ const layoutInput = processCardLayout(this.data.layout, this.data.data);
132
133
  const rootData = handleSpecialFields(this.data.data);
133
134
  if (!layoutInput.length) {
134
135
  this.setData({ cards: [], rootData });
@@ -7,9 +7,19 @@ import type {
7
7
  IconElement,
8
8
  ImageElement,
9
9
  LayoutPanelElement,
10
+ TemplateItem,
10
11
  TextElement,
11
12
  } from '../interface';
12
13
 
14
+ export const mockBaseCompanyDutyTemplateItem: TemplateItem = {
15
+ id: -1,
16
+ name: 'company_duty_custom',
17
+ bind: 'user.baseCompanyDuty',
18
+ key: 'company_duty_custom',
19
+ type: 'text',
20
+ cate: 0,
21
+ };
22
+
13
23
  export const buildWrapperStyle = (
14
24
  el: CardElement,
15
25
  unit: 'px' | 'rpx' = 'px'
@@ -124,18 +134,30 @@ export const buildImageContentStyle = (
124
134
  return style;
125
135
  };
126
136
 
127
- export const getTextValue = (el: TextElement, data?: Record<string, any>) => {
137
+ export const getTextValue = (
138
+ el: TextElement,
139
+ data?: Record<string, any>
140
+ ) => {
141
+ // 如果 id 匹配,则使用 mock 的 binding,否则用原来的
142
+ const binding =
143
+ el.id === String(mockBaseCompanyDutyTemplateItem.id)
144
+ ? mockBaseCompanyDutyTemplateItem.bind
145
+ : el.binding;
146
+
128
147
  const bound =
129
- el.binding && data ? resolveBindingValue(el.binding, data) : undefined;
148
+ binding && data ? resolveBindingValue(binding, data) : undefined;
149
+
130
150
  const val =
131
151
  bound !== undefined && bound !== null
132
152
  ? bound
133
153
  : el.defaultValue !== undefined && el.defaultValue !== null
134
154
  ? el.defaultValue
135
155
  : '';
156
+
136
157
  return `${val ?? ''}`;
137
158
  };
138
159
 
160
+
139
161
  export const getImageSrc = (el: ImageElement, data?: Record<string, any>) => {
140
162
  const bound =
141
163
  el.binding && data ? resolveBindingValue(el.binding, data) : undefined;