km-card-layout-component-miniprogram 0.1.8 → 0.1.10
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/example/pages/home/index.js +382 -16
- package/miniprogram_dist/components/card-layout/elements/custom-element/index.js +31 -0
- package/miniprogram_dist/components/card-layout/elements/custom-element/index.json +3 -0
- package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxml +5 -0
- package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxss +14 -0
- package/miniprogram_dist/components/card-layout/elements/icon-element/index.js +43 -0
- package/miniprogram_dist/components/card-layout/elements/icon-element/index.json +3 -0
- package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxml +5 -0
- package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxss +37 -0
- package/miniprogram_dist/components/card-layout/elements/image-element/index.js +36 -0
- package/miniprogram_dist/components/card-layout/elements/image-element/index.json +3 -0
- package/miniprogram_dist/components/card-layout/elements/image-element/index.wxml +8 -0
- package/miniprogram_dist/components/card-layout/elements/image-element/index.wxss +10 -0
- package/miniprogram_dist/components/card-layout/elements/text-element/index.js +52 -0
- package/miniprogram_dist/components/card-layout/elements/text-element/index.json +3 -0
- package/miniprogram_dist/components/card-layout/elements/text-element/index.wxml +29 -0
- package/miniprogram_dist/components/card-layout/elements/text-element/index.wxss +59 -0
- package/miniprogram_dist/components/card-layout/index.js +23 -38
- package/miniprogram_dist/components/card-layout/index.json +7 -1
- package/miniprogram_dist/components/card-layout/index.wxml +15 -63
- package/miniprogram_dist/components/card-layout/index.wxss +0 -65
- package/miniprogram_dist/utils/card-schema.js +12 -3
- package/miniprogram_dist/vendor/km-card-layout-core/bindings.js +4 -0
- package/miniprogram_dist/vendor/km-card-layout-core/data.js +1 -1
- package/miniprogram_dist/vendor/km-card-layout-core/index.js +37 -6
- package/miniprogram_dist/vendor/km-card-layout-core/interface/index.js +0 -1
- package/miniprogram_dist/vendor/km-card-layout-core/ops/changeBackground.js +8 -1
- package/miniprogram_dist/vendor/km-card-layout-core/render/helpers.js +143 -0
- package/miniprogram_dist/vendor/km-card-layout-core/render/tool.js +16 -0
- package/package.json +1 -1
- package/script/sync-core.js +3 -0
- package/src/components/card-layout/elements/custom-element/index.json +3 -0
- package/src/components/card-layout/elements/custom-element/index.ts +34 -0
- package/src/components/card-layout/elements/custom-element/index.wxml +5 -0
- package/src/components/card-layout/elements/custom-element/index.wxss +14 -0
- package/src/components/card-layout/elements/icon-element/index.json +3 -0
- package/src/components/card-layout/elements/icon-element/index.ts +46 -0
- package/src/components/card-layout/elements/icon-element/index.wxml +5 -0
- package/src/components/card-layout/elements/icon-element/index.wxss +37 -0
- package/src/components/card-layout/elements/image-element/index.json +3 -0
- package/src/components/card-layout/elements/image-element/index.ts +40 -0
- package/src/components/card-layout/elements/image-element/index.wxml +8 -0
- package/src/components/card-layout/elements/image-element/index.wxss +10 -0
- package/src/components/card-layout/elements/text-element/index.json +3 -0
- package/src/components/card-layout/elements/text-element/index.ts +57 -0
- package/src/components/card-layout/elements/text-element/index.wxml +29 -0
- package/src/components/card-layout/elements/text-element/index.wxss +59 -0
- package/src/components/card-layout/index.json +7 -1
- package/src/components/card-layout/index.ts +40 -47
- package/src/components/card-layout/index.wxml +15 -63
- package/src/components/card-layout/index.wxss +0 -65
- package/src/utils/card-schema.ts +11 -4
- package/src/vendor/km-card-layout-core/bindings.ts +3 -0
- package/src/vendor/km-card-layout-core/data.ts +1 -2
- package/src/vendor/km-card-layout-core/index.ts +37 -5
- package/src/vendor/km-card-layout-core/interface/data/payload.ts +1 -0
- package/src/vendor/km-card-layout-core/interface/index.ts +1 -2
- package/src/vendor/km-card-layout-core/ops/changeBackground.ts +14 -4
- package/src/vendor/km-card-layout-core/render/helpers.ts +159 -0
- package/src/vendor/km-card-layout-core/render/tool.ts +21 -0
- package/src/vendor/km-card-layout-core/types.d.ts +74 -15
- package/src/vendor/km-card-layout-core/utils.ts +4 -0
- package/miniprogram_dist/vendor/km-card-layout-core/interface/render.js +0 -2
- package/miniprogram_dist/vendor/km-card-layout-core/render/builder.js +0 -210
- package/src/vendor/km-card-layout-core/interface/render.ts +0 -53
- package/src/vendor/km-card-layout-core/render/builder.ts +0 -288
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const index_1 = require("../../../../vendor/km-card-layout-core/index");
|
|
4
|
+
const icon_map_1 = require("../../icon-map");
|
|
5
|
+
const mapIconGlyph = (name, fallback) => {
|
|
6
|
+
if (!name)
|
|
7
|
+
return fallback;
|
|
8
|
+
const glyph = icon_map_1.ICON_CODE_MAP[name];
|
|
9
|
+
if (glyph)
|
|
10
|
+
return String.fromCharCode(parseInt(glyph, 16));
|
|
11
|
+
return fallback || name;
|
|
12
|
+
};
|
|
13
|
+
Component({
|
|
14
|
+
options: {
|
|
15
|
+
styleIsolation: 'apply-shared',
|
|
16
|
+
},
|
|
17
|
+
properties: {
|
|
18
|
+
element: {
|
|
19
|
+
type: Object,
|
|
20
|
+
value: {},
|
|
21
|
+
},
|
|
22
|
+
rootData: {
|
|
23
|
+
type: Object,
|
|
24
|
+
value: {},
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
data: {
|
|
28
|
+
wrapperStyle: '',
|
|
29
|
+
contentStyle: '',
|
|
30
|
+
textValue: '',
|
|
31
|
+
iconMeta: null,
|
|
32
|
+
},
|
|
33
|
+
observers: {
|
|
34
|
+
element(el) {
|
|
35
|
+
if (!el)
|
|
36
|
+
return;
|
|
37
|
+
const data = this.data.rootData || {};
|
|
38
|
+
const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
|
|
39
|
+
const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildTextContentStyle)(el, 'rpx'), 'rpx');
|
|
40
|
+
const textValue = (0, index_1.getTextValue)(el, data);
|
|
41
|
+
const iconRaw = (0, index_1.buildTextIconMeta)(el, 'rpx');
|
|
42
|
+
const iconMeta = iconRaw && iconRaw.name
|
|
43
|
+
? {
|
|
44
|
+
...iconRaw,
|
|
45
|
+
text: mapIconGlyph(iconRaw.name, iconRaw.name),
|
|
46
|
+
wrapperStyle: (0, index_1.styleObjectToString)(iconRaw.wrapperStyle, 'rpx'),
|
|
47
|
+
}
|
|
48
|
+
: iconRaw;
|
|
49
|
+
this.setData({ wrapperStyle, contentStyle, textValue, iconMeta });
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
});
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<view class="km-node km-node--text" style="{{wrapperStyle}}">
|
|
2
|
+
<view class="km-node__text" style="{{contentStyle}}">
|
|
3
|
+
<block wx:if="{{iconMeta && iconMeta.name}}">
|
|
4
|
+
<view class="km-node__text-content">
|
|
5
|
+
<block wx:if="{{iconMeta.align === 'right'}}">
|
|
6
|
+
<text class="km-node__text-value">{{textValue || ''}}</text>
|
|
7
|
+
<view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper" >
|
|
8
|
+
<text
|
|
9
|
+
class="km-node__text-icon icon"
|
|
10
|
+
style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
|
|
11
|
+
>{{iconMeta.text || iconMeta.name || ''}}</text>
|
|
12
|
+
</view>
|
|
13
|
+
</block>
|
|
14
|
+
<block wx:else>
|
|
15
|
+
<view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper">
|
|
16
|
+
<text
|
|
17
|
+
class="km-node__text-icon icon"
|
|
18
|
+
style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
|
|
19
|
+
>{{iconMeta.text || iconMeta.name || ''}}</text>
|
|
20
|
+
</view>
|
|
21
|
+
<text class="km-node__text-value">{{textValue || ''}}</text>
|
|
22
|
+
</block>
|
|
23
|
+
</view>
|
|
24
|
+
</block>
|
|
25
|
+
<block wx:else>
|
|
26
|
+
<text class="km-node__text-value">{{textValue || ''}}</text>
|
|
27
|
+
</block>
|
|
28
|
+
</view>
|
|
29
|
+
</view>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.km-node {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
color: inherit;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.km-node--text {
|
|
7
|
+
/* overflow hidden if needed */
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.km-node--text text {
|
|
11
|
+
display: inline;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.km-node__text {
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
display: block;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
text-align: inherit;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.km-node__text-content {
|
|
23
|
+
display: inline-block;
|
|
24
|
+
vertical-align: middle;
|
|
25
|
+
height: 100%;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.km-node__text-icon {
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.km-node__text-value {
|
|
35
|
+
display: inline-block;
|
|
36
|
+
white-space: pre-wrap;
|
|
37
|
+
word-break: break-word;
|
|
38
|
+
vertical-align: middle;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@font-face {
|
|
42
|
+
font-family: 'km-icon';
|
|
43
|
+
src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAEl4AA0AAAAAcmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAABJXAAAABoAAAAcrMtJV0dERUYAAEk8AAAAHgAAAB4AKQByT1MvMgAAAaQAAABGAAAAYDw3SVljbWFwAAAC7AAAAM8AAAIW8XL3K2dhc3AAAEk0AAAACAAAAAj//wADZ2x5ZgAABJgAAEBZAABkZPJymXJoZWFkAAABMAAAADEAAAA2MtZiFmhoZWEAAAFkAAAAIAAAACQNagmCaG10eAAAAewAAAD/AAABqqs3Ii9sb2NhAAADvAAAANoAAADaKv0P7G1heHAAAAGEAAAAHwAAACABmQHEbmFtZQAARPQAAAFGAAACgl6CAQJwb3N0AABGPAAAAvUAAATh1g15W3jaY2BkYGAA4lqffPd4fpuvDNwsDCDwVIyfA0b///i/gXMWcyeQy8HABBIFAAVdCfwAAAB42mNgZGBgbvjfwBDDOfP/x///OWcxAEVQQCYAuxgH/XjaY2BkYGDIYdzBoMwAAkxAzAWEDAz/wXwGACjlAl8AeNpjYGFRYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjE+y2Ju+N/AwMB8h6ERKMyIpESBgREAenQNCwAAeNo90cErBGEYx/Hf1LMH7MVxoigHtS600pzWnMjBlt2dFAeiNuWgXLgokgslbpyE/Aduyl38J3ty4aCs7/vOk6lPv+d5531n3nfGVF5JIZlUx9fAbawnEfIFq14/YhddFPjFmynZ9n4TbYzg2tcMW6Epr4NQT3jSJ2lcW9ec1fSEAheMnVume7KKBbQwiMye+5/kEpqYwQoOY59pn1xGw3Lt8NwHS7UY35frivqbet2fNYZp+4j76vj+GpUhjZJreLfxODecay/eTzVPzmIj9uX7VLnUmfdb/2fN4trcv0kYv8Oxe/V5Rzhg7inZ8wzjN5b0f6z8PV2d/AHivi0JAHja3dBFUoVRDITR88PD3d3d3d3d3d33zQqYwwVGbIGk8qV6kK7qIN7vlIsCRdlBRT865iPsWOig318/PwOjbwYd+7mKSZAoSbIUqdKky5ApS7YcufLkK1CoSLESpcqCZ4VKVarVqFWnXoNGTZq1aNWmXYdOXbr16NWn34BBQ4aNGDVm3IRJU6bNmDVn3oJFS5atWLVm3YZNW7bt2LVn34FDR46dOHXm3IVLV67duHXn3oNHT8Hv2YtXbyFaot9HfMeMC4jztyL/vr4AXx4eawAAAAAAAAAAAACwAPIDSgQ8BLIFUgWUBcIF/gY8BpIHCgdAB3wHoAgOCHAIxgk+CV4JzAnqCkQKrgtUC8QMEAxsDNQNFA1SDegONg6qDyQPgg/CEAIQxBEwEaQSHBLYE14T4hRcFPIVTBYMFkwWqBckGGAYxhmYGegaEBpeGuIbXhvwHPQd5B62Hygf6CBeILog9CFUIbgiBCJ0ItQjbCQSJGgkuCVsJcImKib0J44ocijOKSApUCo2KmQqtituK34sJixkLMgtdC3WLpgvPC+QMBww/DGCMagyMgAA') format('woff');
|
|
44
|
+
font-weight: normal;
|
|
45
|
+
font-style: normal;
|
|
46
|
+
font-display: swap;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.icon {
|
|
50
|
+
font-family: 'km-icon' !important;
|
|
51
|
+
font-size: 16px;
|
|
52
|
+
font-style: normal;
|
|
53
|
+
-webkit-font-smoothing: antialiased;
|
|
54
|
+
-moz-osx-font-smoothing: grayscale;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.km-node__text-icon--wrapper{
|
|
58
|
+
display: inline-block;
|
|
59
|
+
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const index_1 = require("../../vendor/km-card-layout-core/index");
|
|
4
|
-
const icon_map_1 = require("./icon-map");
|
|
5
4
|
const ensureArray = (input) => {
|
|
6
5
|
if (!input)
|
|
7
6
|
return [];
|
|
@@ -12,40 +11,25 @@ const pickCardId = (layout, idx) => {
|
|
|
12
11
|
return layout.name || layout.id;
|
|
13
12
|
return `card-${idx}`;
|
|
14
13
|
};
|
|
15
|
-
const
|
|
16
|
-
if (
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
: undefined;
|
|
31
|
-
const children = (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(mapRenderNode);
|
|
32
|
-
const mappedText = node.type === 'icon' ? mapIconGlyph(node.name, node.text) : node.text;
|
|
33
|
-
return {
|
|
34
|
-
...node,
|
|
35
|
-
text: mappedText,
|
|
36
|
-
icon,
|
|
37
|
-
children,
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
const mapRenderTree = (nodes) => Array.isArray(nodes) ? nodes.map(mapRenderNode) : [];
|
|
41
|
-
const buildCards = (layouts, data) => {
|
|
42
|
-
const renders = (0, index_1.buildRenderResult)(layouts, data, 'rpx');
|
|
43
|
-
return renders.map((render, idx) => ({
|
|
14
|
+
const decorateElements = (children = []) => (children || []).map(el => {
|
|
15
|
+
if (el.type === 'layout-panel') {
|
|
16
|
+
const panel = el;
|
|
17
|
+
return {
|
|
18
|
+
...panel,
|
|
19
|
+
wrapperStyle: (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(panel, 'rpx'), 'rpx'),
|
|
20
|
+
contentStyle: (0, index_1.styleObjectToString)((0, index_1.buildPanelContentStyle)(panel, 'rpx'), 'rpx'),
|
|
21
|
+
children: decorateElements(panel.children || []),
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return el;
|
|
25
|
+
});
|
|
26
|
+
const buildCards = (layouts) => {
|
|
27
|
+
return layouts.map((layout, idx) => ({
|
|
44
28
|
id: pickCardId(layouts[idx], idx),
|
|
45
|
-
cardStyle:
|
|
46
|
-
backgroundImage:
|
|
47
|
-
backgroundStyle:
|
|
48
|
-
|
|
29
|
+
cardStyle: (0, index_1.styleObjectToString)((0, index_1.buildCardStyle)(layout, 'rpx'), 'rpx'),
|
|
30
|
+
backgroundImage: layout.backgroundImage || '',
|
|
31
|
+
backgroundStyle: (0, index_1.styleObjectToString)((0, index_1.buildBackgroundStyle)(layout, 'rpx'), 'rpx'),
|
|
32
|
+
elements: decorateElements(layout.children || []),
|
|
49
33
|
}));
|
|
50
34
|
};
|
|
51
35
|
Component({
|
|
@@ -67,6 +51,7 @@ Component({
|
|
|
67
51
|
},
|
|
68
52
|
data: {
|
|
69
53
|
cards: [],
|
|
54
|
+
rootData: {},
|
|
70
55
|
},
|
|
71
56
|
observers: {
|
|
72
57
|
layout() {
|
|
@@ -84,14 +69,14 @@ Component({
|
|
|
84
69
|
methods: {
|
|
85
70
|
rebuild() {
|
|
86
71
|
const layoutInput = ensureArray(this.data.layout);
|
|
87
|
-
const
|
|
72
|
+
const rootData = (this.data.data || {});
|
|
88
73
|
if (!layoutInput.length) {
|
|
89
|
-
this.setData({ cards: [] });
|
|
74
|
+
this.setData({ cards: [], rootData });
|
|
90
75
|
return;
|
|
91
76
|
}
|
|
92
77
|
const normalizedLayouts = (0, index_1.normalizeLayout)(layoutInput);
|
|
93
|
-
const cards = buildCards(normalizedLayouts
|
|
94
|
-
this.setData({ cards });
|
|
78
|
+
const cards = buildCards(normalizedLayouts);
|
|
79
|
+
this.setData({ cards, rootData });
|
|
95
80
|
},
|
|
96
81
|
},
|
|
97
82
|
});
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
{
|
|
2
|
-
"component": true
|
|
2
|
+
"component": true,
|
|
3
|
+
"usingComponents": {
|
|
4
|
+
"text-element": "./elements/text-element/index",
|
|
5
|
+
"image-element": "./elements/image-element/index",
|
|
6
|
+
"icon-element": "./elements/icon-element/index",
|
|
7
|
+
"custom-element": "./elements/custom-element/index"
|
|
8
|
+
}
|
|
3
9
|
}
|
|
@@ -9,82 +9,34 @@
|
|
|
9
9
|
src="{{item.backgroundImage}}"
|
|
10
10
|
mode="aspectFill"
|
|
11
11
|
/>
|
|
12
|
-
<block wx:for="{{item.
|
|
13
|
-
<template is="render-
|
|
12
|
+
<block wx:for="{{item.elements}}" wx:key="id">
|
|
13
|
+
<template is="render-element" data="{{el:item, rootData: rootData}}" />
|
|
14
14
|
</block>
|
|
15
15
|
</view>
|
|
16
16
|
</view>
|
|
17
17
|
</block>
|
|
18
18
|
</view>
|
|
19
19
|
|
|
20
|
-
<template name="render-
|
|
21
|
-
<block wx:if="{{
|
|
22
|
-
<
|
|
23
|
-
<image
|
|
24
|
-
class="km-node__image"
|
|
25
|
-
style="{{node.contentStyle}}"
|
|
26
|
-
src="{{node.src}}"
|
|
27
|
-
mode="{{node.mode || 'aspectFill'}}"
|
|
28
|
-
/>
|
|
29
|
-
</view>
|
|
20
|
+
<template name="render-element">
|
|
21
|
+
<block wx:if="{{el.type === 'image'}}">
|
|
22
|
+
<image-element element="{{el}}" rootData="{{rootData}}" />
|
|
30
23
|
</block>
|
|
31
|
-
<block wx:elif="{{
|
|
32
|
-
<
|
|
33
|
-
<view
|
|
34
|
-
wx:if="{{node.name === 'dot' || node.name === 'round'}}"
|
|
35
|
-
class="km-node__icon-dot"
|
|
36
|
-
style="{{node.contentStyle}}"
|
|
37
|
-
/>
|
|
38
|
-
<view
|
|
39
|
-
wx:else
|
|
40
|
-
class="km-node__icon icon"
|
|
41
|
-
style="{{node.contentStyle}}"
|
|
42
|
-
>{{node.text || ''}}</view>
|
|
43
|
-
</view>
|
|
24
|
+
<block wx:elif="{{el.type === 'icon'}}">
|
|
25
|
+
<icon-element element="{{el}}" rootData="{{rootData}}" />
|
|
44
26
|
</block>
|
|
45
|
-
<block wx:elif="{{
|
|
46
|
-
<view class="km-node" style="{{
|
|
47
|
-
<view class="km-node__panel" style="{{
|
|
48
|
-
<block wx:for="{{
|
|
49
|
-
<template is="render-
|
|
27
|
+
<block wx:elif="{{el.type === 'layout-panel'}}">
|
|
28
|
+
<view class="km-node" style="{{el.wrapperStyle}}">
|
|
29
|
+
<view class="km-node__panel" style="{{el.contentStyle}}">
|
|
30
|
+
<block wx:for="{{el.children}}" wx:key="id">
|
|
31
|
+
<template is="render-element" data="{{el:item, rootData: rootData}}" />
|
|
50
32
|
</block>
|
|
51
33
|
</view>
|
|
52
34
|
</view>
|
|
53
35
|
</block>
|
|
54
|
-
<block wx:elif="{{
|
|
55
|
-
<
|
|
56
|
-
<view class="km-node__custom" style="{{node.contentStyle}}">
|
|
57
|
-
<slot name="{{node.id}}"></slot>
|
|
58
|
-
</view>
|
|
59
|
-
</view>
|
|
36
|
+
<block wx:elif="{{el.type === 'custom'}}">
|
|
37
|
+
<custom-element element="{{el}}" rootData="{{rootData}}" />
|
|
60
38
|
</block>
|
|
61
39
|
<block wx:else>
|
|
62
|
-
<
|
|
63
|
-
<view class="km-node__text" style="{{node.contentStyle}}">
|
|
64
|
-
<block wx:if="{{node.icon && node.icon.name}}">
|
|
65
|
-
<view class="km-node__text-content">
|
|
66
|
-
<block wx:if="{{node.icon.align === 'right'}}">
|
|
67
|
-
<text class="km-node__text-value">{{node.text || ''}}</text>
|
|
68
|
-
<view style="{{node.icon.wrapperStyle}}">
|
|
69
|
-
<text
|
|
70
|
-
class="km-node__text-icon icon"
|
|
71
|
-
style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.gap || ''}};">{{node.icon.text || node.icon.name || ''}}</text>
|
|
72
|
-
</view>
|
|
73
|
-
</block>
|
|
74
|
-
<block wx:else>
|
|
75
|
-
<view style="{{node.icon.wrapperStyle}}">
|
|
76
|
-
<text
|
|
77
|
-
class="km-node__text-icon icon"
|
|
78
|
-
style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.gap || ''}};">{{node.icon.text || node.icon.name || ''}}</text>
|
|
79
|
-
</view>
|
|
80
|
-
<text class="km-node__text-value">{{node.text || ''}}</text>
|
|
81
|
-
</block>
|
|
82
|
-
</view>
|
|
83
|
-
</block>
|
|
84
|
-
<block wx:else>
|
|
85
|
-
<text class="km-node__text-value">{{node.text || ''}}</text>
|
|
86
|
-
</block>
|
|
87
|
-
</view>
|
|
88
|
-
</view>
|
|
40
|
+
<text-element element="{{el}}" rootData="{{rootData}}" />
|
|
89
41
|
</block>
|
|
90
42
|
</template>
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
1
|
.km-card-layout {
|
|
4
2
|
display: flex;
|
|
5
3
|
flex-direction: column;
|
|
6
|
-
gap: 16rpx;
|
|
7
4
|
}
|
|
8
5
|
|
|
9
6
|
.km-card-layout__item {
|
|
@@ -33,76 +30,14 @@
|
|
|
33
30
|
color: inherit;
|
|
34
31
|
}
|
|
35
32
|
|
|
36
|
-
.km-node--icon {
|
|
37
|
-
display: flex;
|
|
38
|
-
align-items: center;
|
|
39
|
-
justify-content: center;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.km-node__image {
|
|
43
|
-
width: 100%;
|
|
44
|
-
height: 100%;
|
|
45
|
-
display: block;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.km-node__icon {
|
|
49
|
-
display: inline-flex;
|
|
50
|
-
align-items: center;
|
|
51
|
-
justify-content: center;
|
|
52
|
-
width: 100%;
|
|
53
|
-
height: 100%;
|
|
54
|
-
font-family: 'km-icon', 'PingFang SC', 'Microsoft Yahei', sans-serif;
|
|
55
|
-
font-style: normal;
|
|
56
|
-
font-weight: normal;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.km-node__icon-dot {
|
|
60
|
-
width: 100%;
|
|
61
|
-
height: 100%;
|
|
62
|
-
border-radius: 50%;
|
|
63
|
-
background-color: #999;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
33
|
.km-node__panel {
|
|
67
34
|
width: 100%;
|
|
68
35
|
height: 100%;
|
|
69
36
|
box-sizing: border-box;
|
|
70
37
|
}
|
|
71
38
|
|
|
72
|
-
.km-node__custom {
|
|
73
|
-
width: 100%;
|
|
74
|
-
height: 100%;
|
|
75
|
-
box-sizing: border-box;
|
|
76
|
-
}
|
|
77
39
|
|
|
78
|
-
.km-node__text {
|
|
79
|
-
width: 100%;
|
|
80
|
-
height: 100%;
|
|
81
|
-
display: block;
|
|
82
|
-
box-sizing: border-box;
|
|
83
|
-
text-align: inherit;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.km-node__text-content {
|
|
87
|
-
display: inline-block;
|
|
88
|
-
vertical-align: middle;
|
|
89
|
-
height: 100%;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.km-node__text-value {
|
|
93
|
-
display: inline-block;
|
|
94
|
-
white-space: pre-wrap;
|
|
95
|
-
word-break: break-word;
|
|
96
|
-
vertical-align: middle;
|
|
97
|
-
}
|
|
98
|
-
.km-node--text{
|
|
99
|
-
/* 溢出隐藏 */
|
|
100
|
-
}
|
|
101
|
-
.km-node--text text {
|
|
102
|
-
display: inline;
|
|
103
|
-
}
|
|
104
40
|
|
|
105
|
-
/* ICON */
|
|
106
41
|
|
|
107
42
|
|
|
108
43
|
@font-face {
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.styleObjectToString = exports.resolveBindingValue = exports.normalizeLayout = exports.
|
|
3
|
+
exports.styleObjectToString = exports.resolveBindingValue = exports.normalizeLayout = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildTextIconMeta = exports.buildImageContentStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = exports.addUnit = void 0;
|
|
4
4
|
var index_1 = require("../vendor/km-card-layout-core/index");
|
|
5
5
|
Object.defineProperty(exports, "addUnit", { enumerable: true, get: function () { return index_1.addUnit; } });
|
|
6
|
-
Object.defineProperty(exports, "
|
|
7
|
-
Object.defineProperty(exports, "
|
|
6
|
+
Object.defineProperty(exports, "buildWrapperStyle", { enumerable: true, get: function () { return index_1.buildWrapperStyle; } });
|
|
7
|
+
Object.defineProperty(exports, "buildCardStyle", { enumerable: true, get: function () { return index_1.buildCardStyle; } });
|
|
8
|
+
Object.defineProperty(exports, "buildBackgroundStyle", { enumerable: true, get: function () { return index_1.buildBackgroundStyle; } });
|
|
9
|
+
Object.defineProperty(exports, "buildBaseContentStyle", { enumerable: true, get: function () { return index_1.buildBaseContentStyle; } });
|
|
10
|
+
Object.defineProperty(exports, "buildPanelContentStyle", { enumerable: true, get: function () { return index_1.buildPanelContentStyle; } });
|
|
11
|
+
Object.defineProperty(exports, "buildTextContentStyle", { enumerable: true, get: function () { return index_1.buildTextContentStyle; } });
|
|
12
|
+
Object.defineProperty(exports, "buildImageContentStyle", { enumerable: true, get: function () { return index_1.buildImageContentStyle; } });
|
|
13
|
+
Object.defineProperty(exports, "buildTextIconMeta", { enumerable: true, get: function () { return index_1.buildTextIconMeta; } });
|
|
14
|
+
Object.defineProperty(exports, "getTextValue", { enumerable: true, get: function () { return index_1.getTextValue; } });
|
|
15
|
+
Object.defineProperty(exports, "getImageSrc", { enumerable: true, get: function () { return index_1.getImageSrc; } });
|
|
16
|
+
Object.defineProperty(exports, "getIconName", { enumerable: true, get: function () { return index_1.getIconName; } });
|
|
8
17
|
Object.defineProperty(exports, "normalizeLayout", { enumerable: true, get: function () { return index_1.normalizeLayout; } });
|
|
9
18
|
Object.defineProperty(exports, "resolveBindingValue", { enumerable: true, get: function () { return index_1.resolveBindingValue; } });
|
|
10
19
|
Object.defineProperty(exports, "styleObjectToString", { enumerable: true, get: function () { return index_1.styleObjectToString; } });
|
|
@@ -29,6 +29,7 @@ function applyItemCollectBindings(layouts = [], items = []) {
|
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
31
|
const assignBinding = (el) => {
|
|
32
|
+
var _a;
|
|
32
33
|
const meta = metaMap.get(String(el.id));
|
|
33
34
|
const binding = meta && meta.bind !== undefined && meta.bind !== null
|
|
34
35
|
? meta.bind
|
|
@@ -48,6 +49,9 @@ function applyItemCollectBindings(layouts = [], items = []) {
|
|
|
48
49
|
base.key = key;
|
|
49
50
|
else
|
|
50
51
|
delete base.key;
|
|
52
|
+
if (el.type === 'text' && ((_a = meta === null || meta === void 0 ? void 0 : meta.extra) === null || _a === void 0 ? void 0 : _a.icon)) {
|
|
53
|
+
base.icon = { ...(base.icon || {}), name: meta.extra.icon };
|
|
54
|
+
}
|
|
51
55
|
if (el.type === 'layout-panel') {
|
|
52
56
|
return {
|
|
53
57
|
...base,
|
|
@@ -29,7 +29,7 @@ const readByPath = (data, path) => {
|
|
|
29
29
|
}
|
|
30
30
|
return cursor;
|
|
31
31
|
};
|
|
32
|
-
const resolveBindingValue = (binding, rootData
|
|
32
|
+
const resolveBindingValue = (binding, rootData) => {
|
|
33
33
|
if (!binding)
|
|
34
34
|
return undefined;
|
|
35
35
|
const value = readByPath(rootData, binding);
|
|
@@ -20,12 +20,30 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
20
20
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
21
|
};
|
|
22
22
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
-
exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = exports.backgroundChange = void 0;
|
|
23
|
+
exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = exports.buildRenderData = exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = exports.backgroundChange = exports.getTemplateBackgrounds = exports.getTemplateItems = exports.applyItemCollectBindings = exports.stripLayoutBindings = exports.resolveBindingValue = exports.areChildrenEqual = exports.parseLayout = exports.normalizeId = exports.collectBindings = exports.getAbsLayout = exports.roundToInt = exports.sanitizeElement = exports.sanitizeLayout = exports.normalizeLayout = exports.isObject = exports.toNumber = exports.styleObjectToString = exports.addUnit = void 0;
|
|
24
24
|
__exportStar(require("./interface/index"), exports);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
var helpers_1 = require("./helpers");
|
|
26
|
+
Object.defineProperty(exports, "addUnit", { enumerable: true, get: function () { return helpers_1.addUnit; } });
|
|
27
|
+
Object.defineProperty(exports, "styleObjectToString", { enumerable: true, get: function () { return helpers_1.styleObjectToString; } });
|
|
28
|
+
Object.defineProperty(exports, "toNumber", { enumerable: true, get: function () { return helpers_1.toNumber; } });
|
|
29
|
+
Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return helpers_1.isObject; } });
|
|
30
|
+
var layout_1 = require("./layout");
|
|
31
|
+
Object.defineProperty(exports, "normalizeLayout", { enumerable: true, get: function () { return layout_1.normalizeLayout; } });
|
|
32
|
+
Object.defineProperty(exports, "sanitizeLayout", { enumerable: true, get: function () { return layout_1.sanitizeLayout; } });
|
|
33
|
+
Object.defineProperty(exports, "sanitizeElement", { enumerable: true, get: function () { return layout_1.sanitizeElement; } });
|
|
34
|
+
Object.defineProperty(exports, "roundToInt", { enumerable: true, get: function () { return layout_1.roundToInt; } });
|
|
35
|
+
Object.defineProperty(exports, "getAbsLayout", { enumerable: true, get: function () { return layout_1.getAbsLayout; } });
|
|
36
|
+
Object.defineProperty(exports, "collectBindings", { enumerable: true, get: function () { return layout_1.collectBindings; } });
|
|
37
|
+
Object.defineProperty(exports, "normalizeId", { enumerable: true, get: function () { return layout_1.normalizeId; } });
|
|
38
|
+
Object.defineProperty(exports, "parseLayout", { enumerable: true, get: function () { return layout_1.parseLayout; } });
|
|
39
|
+
Object.defineProperty(exports, "areChildrenEqual", { enumerable: true, get: function () { return layout_1.areChildrenEqual; } });
|
|
40
|
+
var data_1 = require("./data");
|
|
41
|
+
Object.defineProperty(exports, "resolveBindingValue", { enumerable: true, get: function () { return data_1.resolveBindingValue; } });
|
|
42
|
+
var bindings_1 = require("./bindings");
|
|
43
|
+
Object.defineProperty(exports, "stripLayoutBindings", { enumerable: true, get: function () { return bindings_1.stripLayoutBindings; } });
|
|
44
|
+
Object.defineProperty(exports, "applyItemCollectBindings", { enumerable: true, get: function () { return bindings_1.applyItemCollectBindings; } });
|
|
45
|
+
Object.defineProperty(exports, "getTemplateItems", { enumerable: true, get: function () { return bindings_1.getTemplateItems; } });
|
|
46
|
+
Object.defineProperty(exports, "getTemplateBackgrounds", { enumerable: true, get: function () { return bindings_1.getTemplateBackgrounds; } });
|
|
29
47
|
var changeBackground_1 = require("./ops/changeBackground");
|
|
30
48
|
Object.defineProperty(exports, "backgroundChange", { enumerable: true, get: function () { return changeBackground_1.backgroundChange; } });
|
|
31
49
|
Object.defineProperty(exports, "DEFAULT_DECOR_COLOR", { enumerable: true, get: function () { return changeBackground_1.DEFAULT_DECOR_COLOR; } });
|
|
@@ -33,4 +51,17 @@ Object.defineProperty(exports, "resolveSpecialStyle", { enumerable: true, get: f
|
|
|
33
51
|
Object.defineProperty(exports, "applySpecialStyle", { enumerable: true, get: function () { return changeBackground_1.applySpecialStyle; } });
|
|
34
52
|
Object.defineProperty(exports, "applyBackground", { enumerable: true, get: function () { return changeBackground_1.applyBackground; } });
|
|
35
53
|
Object.defineProperty(exports, "updateElementsStyle", { enumerable: true, get: function () { return changeBackground_1.updateElementsStyle; } });
|
|
36
|
-
|
|
54
|
+
var tool_1 = require("./render/tool");
|
|
55
|
+
Object.defineProperty(exports, "buildRenderData", { enumerable: true, get: function () { return tool_1.buildRenderData; } });
|
|
56
|
+
var helpers_2 = require("./render/helpers");
|
|
57
|
+
Object.defineProperty(exports, "buildWrapperStyle", { enumerable: true, get: function () { return helpers_2.buildWrapperStyle; } });
|
|
58
|
+
Object.defineProperty(exports, "buildCardStyle", { enumerable: true, get: function () { return helpers_2.buildCardStyle; } });
|
|
59
|
+
Object.defineProperty(exports, "buildBackgroundStyle", { enumerable: true, get: function () { return helpers_2.buildBackgroundStyle; } });
|
|
60
|
+
Object.defineProperty(exports, "buildBaseContentStyle", { enumerable: true, get: function () { return helpers_2.buildBaseContentStyle; } });
|
|
61
|
+
Object.defineProperty(exports, "buildPanelContentStyle", { enumerable: true, get: function () { return helpers_2.buildPanelContentStyle; } });
|
|
62
|
+
Object.defineProperty(exports, "buildTextContentStyle", { enumerable: true, get: function () { return helpers_2.buildTextContentStyle; } });
|
|
63
|
+
Object.defineProperty(exports, "buildImageContentStyle", { enumerable: true, get: function () { return helpers_2.buildImageContentStyle; } });
|
|
64
|
+
Object.defineProperty(exports, "getTextValue", { enumerable: true, get: function () { return helpers_2.getTextValue; } });
|
|
65
|
+
Object.defineProperty(exports, "getImageSrc", { enumerable: true, get: function () { return helpers_2.getImageSrc; } });
|
|
66
|
+
Object.defineProperty(exports, "getIconName", { enumerable: true, get: function () { return helpers_2.getIconName; } });
|
|
67
|
+
Object.defineProperty(exports, "buildTextIconMeta", { enumerable: true, get: function () { return helpers_2.buildTextIconMeta; } });
|
|
@@ -16,5 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
__exportStar(require("./elements"), exports);
|
|
18
18
|
__exportStar(require("./layout"), exports);
|
|
19
|
-
__exportStar(require("./render"), exports);
|
|
20
19
|
__exportStar(require("./data/payload"), exports);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = exports.backgroundChange = void 0;
|
|
3
|
+
exports.setElementVisible = exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = exports.backgroundChange = void 0;
|
|
4
4
|
const toNameArray = (name) => {
|
|
5
5
|
if (Array.isArray(name))
|
|
6
6
|
return name.filter(Boolean);
|
|
@@ -133,3 +133,10 @@ const updateElementsStyle = (layout, targetIds, updates) => {
|
|
|
133
133
|
};
|
|
134
134
|
};
|
|
135
135
|
exports.updateElementsStyle = updateElementsStyle;
|
|
136
|
+
const setElementVisible = (layout, key, visible) => {
|
|
137
|
+
return layout.map(la => ({
|
|
138
|
+
...la,
|
|
139
|
+
children: la.children.map(el => (el.key === key ? { ...el, visible } : el)),
|
|
140
|
+
}));
|
|
141
|
+
};
|
|
142
|
+
exports.setElementVisible = setElementVisible;
|