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.
Files changed (66) hide show
  1. package/example/pages/home/index.js +382 -16
  2. package/miniprogram_dist/components/card-layout/elements/custom-element/index.js +31 -0
  3. package/miniprogram_dist/components/card-layout/elements/custom-element/index.json +3 -0
  4. package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxml +5 -0
  5. package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxss +14 -0
  6. package/miniprogram_dist/components/card-layout/elements/icon-element/index.js +43 -0
  7. package/miniprogram_dist/components/card-layout/elements/icon-element/index.json +3 -0
  8. package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxml +5 -0
  9. package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxss +37 -0
  10. package/miniprogram_dist/components/card-layout/elements/image-element/index.js +36 -0
  11. package/miniprogram_dist/components/card-layout/elements/image-element/index.json +3 -0
  12. package/miniprogram_dist/components/card-layout/elements/image-element/index.wxml +8 -0
  13. package/miniprogram_dist/components/card-layout/elements/image-element/index.wxss +10 -0
  14. package/miniprogram_dist/components/card-layout/elements/text-element/index.js +52 -0
  15. package/miniprogram_dist/components/card-layout/elements/text-element/index.json +3 -0
  16. package/miniprogram_dist/components/card-layout/elements/text-element/index.wxml +29 -0
  17. package/miniprogram_dist/components/card-layout/elements/text-element/index.wxss +59 -0
  18. package/miniprogram_dist/components/card-layout/index.js +23 -38
  19. package/miniprogram_dist/components/card-layout/index.json +7 -1
  20. package/miniprogram_dist/components/card-layout/index.wxml +15 -63
  21. package/miniprogram_dist/components/card-layout/index.wxss +0 -65
  22. package/miniprogram_dist/utils/card-schema.js +12 -3
  23. package/miniprogram_dist/vendor/km-card-layout-core/bindings.js +4 -0
  24. package/miniprogram_dist/vendor/km-card-layout-core/data.js +1 -1
  25. package/miniprogram_dist/vendor/km-card-layout-core/index.js +37 -6
  26. package/miniprogram_dist/vendor/km-card-layout-core/interface/index.js +0 -1
  27. package/miniprogram_dist/vendor/km-card-layout-core/ops/changeBackground.js +8 -1
  28. package/miniprogram_dist/vendor/km-card-layout-core/render/helpers.js +143 -0
  29. package/miniprogram_dist/vendor/km-card-layout-core/render/tool.js +16 -0
  30. package/package.json +1 -1
  31. package/script/sync-core.js +3 -0
  32. package/src/components/card-layout/elements/custom-element/index.json +3 -0
  33. package/src/components/card-layout/elements/custom-element/index.ts +34 -0
  34. package/src/components/card-layout/elements/custom-element/index.wxml +5 -0
  35. package/src/components/card-layout/elements/custom-element/index.wxss +14 -0
  36. package/src/components/card-layout/elements/icon-element/index.json +3 -0
  37. package/src/components/card-layout/elements/icon-element/index.ts +46 -0
  38. package/src/components/card-layout/elements/icon-element/index.wxml +5 -0
  39. package/src/components/card-layout/elements/icon-element/index.wxss +37 -0
  40. package/src/components/card-layout/elements/image-element/index.json +3 -0
  41. package/src/components/card-layout/elements/image-element/index.ts +40 -0
  42. package/src/components/card-layout/elements/image-element/index.wxml +8 -0
  43. package/src/components/card-layout/elements/image-element/index.wxss +10 -0
  44. package/src/components/card-layout/elements/text-element/index.json +3 -0
  45. package/src/components/card-layout/elements/text-element/index.ts +57 -0
  46. package/src/components/card-layout/elements/text-element/index.wxml +29 -0
  47. package/src/components/card-layout/elements/text-element/index.wxss +59 -0
  48. package/src/components/card-layout/index.json +7 -1
  49. package/src/components/card-layout/index.ts +40 -47
  50. package/src/components/card-layout/index.wxml +15 -63
  51. package/src/components/card-layout/index.wxss +0 -65
  52. package/src/utils/card-schema.ts +11 -4
  53. package/src/vendor/km-card-layout-core/bindings.ts +3 -0
  54. package/src/vendor/km-card-layout-core/data.ts +1 -2
  55. package/src/vendor/km-card-layout-core/index.ts +37 -5
  56. package/src/vendor/km-card-layout-core/interface/data/payload.ts +1 -0
  57. package/src/vendor/km-card-layout-core/interface/index.ts +1 -2
  58. package/src/vendor/km-card-layout-core/ops/changeBackground.ts +14 -4
  59. package/src/vendor/km-card-layout-core/render/helpers.ts +159 -0
  60. package/src/vendor/km-card-layout-core/render/tool.ts +21 -0
  61. package/src/vendor/km-card-layout-core/types.d.ts +74 -15
  62. package/src/vendor/km-card-layout-core/utils.ts +4 -0
  63. package/miniprogram_dist/vendor/km-card-layout-core/interface/render.js +0 -2
  64. package/miniprogram_dist/vendor/km-card-layout-core/render/builder.js +0 -210
  65. package/src/vendor/km-card-layout-core/interface/render.ts +0 -53
  66. 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 mapIconGlyph = (name, fallback) => {
16
- if (!name)
17
- return fallback;
18
- const glyph = icon_map_1.ICON_CODE_MAP[name];
19
- if (glyph)
20
- return String.fromCharCode(parseInt(glyph, 16));
21
- return fallback || name;
22
- };
23
- const mapRenderNode = (node) => {
24
- var _a;
25
- const icon = node.icon
26
- ? {
27
- ...node.icon,
28
- text: mapIconGlyph(node.icon.name, node.icon.text),
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: render.cardStyle,
46
- backgroundImage: render.backgroundImage || '',
47
- backgroundStyle: render.backgroundStyle,
48
- nodes: mapRenderTree(render.renderTree),
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 dataInput = (this.data.data || {});
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, dataInput);
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.nodes}}" wx:key="id">
13
- <template is="render-node" data="{{node:item}}" />
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-node">
21
- <block wx:if="{{node.type === 'image'}}">
22
- <view class="km-node" style="{{node.wrapperStyle}}">
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="{{node.type === 'icon'}}">
32
- <view class="km-node km-node--icon" style="{{node.wrapperStyle}}">
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="{{node.type === 'layout-panel'}}">
46
- <view class="km-node" style="{{node.wrapperStyle}}">
47
- <view class="km-node__panel" style="{{node.contentStyle}}">
48
- <block wx:for="{{node.children}}" wx:key="id">
49
- <template is="render-node" data="{{node:item}}" />
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="{{node.type === 'custom'}}">
55
- <view class="km-node km-node--custom" style="{{node.wrapperStyle}}">
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
- <view class="km-node km-node--text" style="{{node.wrapperStyle}}">
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.buildRenderResult = exports.buildRenderNodes = exports.addUnit = void 0;
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, "buildRenderNodes", { enumerable: true, get: function () { return index_1.buildRenderNodes; } });
7
- Object.defineProperty(exports, "buildRenderResult", { enumerable: true, get: function () { return index_1.buildRenderResult; } });
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, context) => {
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
- __exportStar(require("./helpers"), exports);
26
- __exportStar(require("./layout"), exports);
27
- __exportStar(require("./data"), exports);
28
- __exportStar(require("./bindings"), exports);
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
- __exportStar(require("./render/builder"), exports);
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;