km-card-layout-component-miniprogram 0.1.7 → 0.1.9
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 +107 -16
- package/miniprogram_dist/components/card-layout/elements/custom-element/index.js +27 -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 +39 -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 +31 -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 +47 -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 +16 -201
- 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 -63
- package/miniprogram_dist/utils/card-schema.js +12 -3
- package/miniprogram_dist/vendor/km-card-layout-core/bindings.js +78 -0
- package/miniprogram_dist/vendor/km-card-layout-core/data.js +38 -0
- package/miniprogram_dist/vendor/km-card-layout-core/helpers.js +72 -0
- package/miniprogram_dist/vendor/km-card-layout-core/index.js +46 -367
- package/miniprogram_dist/vendor/km-card-layout-core/interface/index.js +1 -1
- package/miniprogram_dist/vendor/km-card-layout-core/layout.js +117 -0
- package/miniprogram_dist/vendor/km-card-layout-core/ops/changeBackground.js +142 -0
- package/miniprogram_dist/vendor/km-card-layout-core/render/helpers.js +133 -0
- package/miniprogram_dist/vendor/km-card-layout-core/render/tool.js +16 -0
- package/miniprogram_dist/vendor/km-card-layout-core/utils.js +23 -130
- package/package.json +1 -1
- package/script/sync-core.js +13 -2
- package/src/components/card-layout/elements/custom-element/index.json +3 -0
- package/src/components/card-layout/elements/custom-element/index.ts +30 -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 +42 -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 +35 -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 +52 -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 +30 -296
- package/src/components/card-layout/index.wxml +15 -63
- package/src/components/card-layout/index.wxss +0 -63
- package/src/utils/card-schema.ts +11 -4
- package/src/vendor/km-card-layout-core/bindings.ts +87 -0
- package/src/vendor/km-card-layout-core/data.ts +39 -0
- package/src/vendor/km-card-layout-core/helpers.ts +76 -0
- package/src/vendor/km-card-layout-core/index.ts +53 -460
- package/src/vendor/km-card-layout-core/interface/context.ts +6 -0
- package/src/vendor/km-card-layout-core/interface/data/payload.ts +1 -0
- package/src/vendor/km-card-layout-core/interface/index.ts +2 -2
- package/src/vendor/km-card-layout-core/layout.ts +129 -0
- package/src/vendor/km-card-layout-core/ops/changeBackground.ts +179 -0
- package/src/vendor/km-card-layout-core/render/helpers.ts +144 -0
- package/src/vendor/km-card-layout-core/render/tool.ts +21 -0
- package/src/vendor/km-card-layout-core/types.d.ts +166 -15
- package/src/vendor/km-card-layout-core/utils.ts +13 -141
- package/src/vendor/km-card-layout-core/interface/render.ts +0 -52
- /package/miniprogram_dist/vendor/km-card-layout-core/interface/{render.js → context.js} +0 -0
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
/**
|
|
3
|
-
* CardMaster 布局 JSON
|
|
3
|
+
* CardMaster 布局 JSON 渲染核心
|
|
4
4
|
*
|
|
5
5
|
* - 平台无关:不依赖 DOM/小程序 API,方便在 Web/小程序/Node 复用。
|
|
6
|
-
* - 职责:将布局 Schema
|
|
6
|
+
* - 职责:将布局 Schema 与业务数据合成可渲染树,外层只需将节点映射到各端组件。
|
|
7
7
|
*/
|
|
8
8
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
9
9
|
if (k2 === undefined) k2 = k;
|
|
@@ -20,369 +20,48 @@ 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.
|
|
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
* 数字追加单位,非数字原样转字符串。
|
|
69
|
-
*/
|
|
70
|
-
const addUnit = (value, unit) => {
|
|
71
|
-
if (value === undefined || value === null || value === '')
|
|
72
|
-
return undefined;
|
|
73
|
-
if (typeof value === 'number') {
|
|
74
|
-
const ratio = unit === 'rpx' ? 2 : 1;
|
|
75
|
-
return `${value * ratio}${unit}`;
|
|
76
|
-
}
|
|
77
|
-
if (typeof value === 'string') {
|
|
78
|
-
const parsed = Number(value);
|
|
79
|
-
if (Number.isFinite(parsed)) {
|
|
80
|
-
const ratio = unit === 'rpx' ? 2 : 1;
|
|
81
|
-
return `${parsed * ratio}${unit}`;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
return `${value}`;
|
|
85
|
-
};
|
|
86
|
-
exports.addUnit = addUnit;
|
|
87
|
-
/**
|
|
88
|
-
* 样式对象转内联样式字符串,对需要单位的字段自动补单位。
|
|
89
|
-
*/
|
|
90
|
-
const styleObjectToString = (style, unit = 'px') => {
|
|
91
|
-
if (!style)
|
|
92
|
-
return '';
|
|
93
|
-
const pairs = [];
|
|
94
|
-
Object.keys(style).forEach(key => {
|
|
95
|
-
const value = style[key];
|
|
96
|
-
if (value === undefined || value === null || value === '')
|
|
97
|
-
return;
|
|
98
|
-
const useUnit = DIMENSION_PROPS.has(key)
|
|
99
|
-
? (0, exports.addUnit)(value, unit)
|
|
100
|
-
: value;
|
|
101
|
-
if (useUnit === undefined || useUnit === null || useUnit === '')
|
|
102
|
-
return;
|
|
103
|
-
pairs.push(`${toKebab(key)}:${useUnit}`);
|
|
104
|
-
});
|
|
105
|
-
return pairs.join(';');
|
|
106
|
-
};
|
|
107
|
-
exports.styleObjectToString = styleObjectToString;
|
|
108
|
-
/**
|
|
109
|
-
* 容错 JSON 解析:字符串用 JSON.parse,其他保持原样或返回 null。
|
|
110
|
-
*/
|
|
111
|
-
const parseJson = (input) => {
|
|
112
|
-
if (typeof input !== 'string')
|
|
113
|
-
return input !== null && input !== void 0 ? input : null;
|
|
114
|
-
try {
|
|
115
|
-
return JSON.parse(input);
|
|
116
|
-
}
|
|
117
|
-
catch (err) {
|
|
118
|
-
console.warn('[km-card-layout-core] JSON parse failed', err);
|
|
119
|
-
return null;
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
const isObject = (val) => Boolean(val) && typeof val === 'object';
|
|
123
|
-
const getAbsLayout = (el) => el.layout && el.layout.mode === 'absolute'
|
|
124
|
-
? el.layout
|
|
125
|
-
: null;
|
|
126
|
-
/** ---------- 布局与数据解析 ---------- */
|
|
127
|
-
/**
|
|
128
|
-
* 归一化布局输入(对象或 JSON 字符串),补齐宽高/容器/children 默认值。
|
|
129
|
-
*/
|
|
130
|
-
const normalizeLayout = (layout) => {
|
|
131
|
-
if (!Array.isArray(layout))
|
|
132
|
-
return [];
|
|
133
|
-
return layout
|
|
134
|
-
.map(item => {
|
|
135
|
-
var _a, _b;
|
|
136
|
-
if (!item || typeof item !== 'object')
|
|
137
|
-
return null;
|
|
138
|
-
const parsed = item;
|
|
139
|
-
return {
|
|
140
|
-
...parsed,
|
|
141
|
-
width: (_a = toNumber(parsed.width)) !== null && _a !== void 0 ? _a : DEFAULT_CARD_WIDTH,
|
|
142
|
-
height: (_b = toNumber(parsed.height)) !== null && _b !== void 0 ? _b : DEFAULT_CARD_HEIGHT,
|
|
143
|
-
container: parsed.container || { mode: 'absolute' },
|
|
144
|
-
children: Array.isArray(parsed.children)
|
|
145
|
-
? parsed.children
|
|
146
|
-
: [],
|
|
147
|
-
};
|
|
148
|
-
})
|
|
149
|
-
.filter((v) => Boolean(v));
|
|
150
|
-
};
|
|
151
|
-
exports.normalizeLayout = normalizeLayout;
|
|
152
|
-
/**
|
|
153
|
-
* 将绑定路径拆分为片段,支持点语法与数组下标。
|
|
154
|
-
*/
|
|
155
|
-
const pathToSegments = (path) => `${path || ''}`
|
|
156
|
-
.replace(/\[(\d+)\]/g, '.$1')
|
|
157
|
-
.split('.')
|
|
158
|
-
.map(p => p.trim())
|
|
159
|
-
.filter(Boolean);
|
|
160
|
-
/**
|
|
161
|
-
* 按路径访问对象/数组,缺失时返回 undefined/null。
|
|
162
|
-
*/
|
|
163
|
-
const readByPath = (data, path) => {
|
|
164
|
-
if (path === undefined || path === null || path === '')
|
|
165
|
-
return data;
|
|
166
|
-
const segments = pathToSegments(path);
|
|
167
|
-
let cursor = data;
|
|
168
|
-
for (let i = 0; i < segments.length; i += 1) {
|
|
169
|
-
if (!isObject(cursor) && !Array.isArray(cursor))
|
|
170
|
-
return undefined;
|
|
171
|
-
const key = segments[i];
|
|
172
|
-
if (Array.isArray(cursor)) {
|
|
173
|
-
const idx = Number(key);
|
|
174
|
-
cursor = Number.isNaN(idx) ? undefined : cursor[idx];
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
cursor = cursor[key];
|
|
178
|
-
}
|
|
179
|
-
if (cursor === undefined || cursor === null) {
|
|
180
|
-
return cursor;
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
return cursor;
|
|
184
|
-
};
|
|
185
|
-
/**
|
|
186
|
-
* Resolve element binding against provided data.
|
|
187
|
-
*/
|
|
188
|
-
const resolveBindingValue = (binding, rootData, context) => {
|
|
189
|
-
if (!binding)
|
|
190
|
-
return undefined;
|
|
191
|
-
const value = readByPath(rootData, binding);
|
|
192
|
-
return value === undefined ? undefined : value;
|
|
193
|
-
};
|
|
194
|
-
exports.resolveBindingValue = resolveBindingValue;
|
|
195
|
-
/** ---------- 样式构建 ---------- */
|
|
196
|
-
/**
|
|
197
|
-
* 生成元素外层样式(绝对/弹性布局),始终返回内联样式字符串。
|
|
198
|
-
*/
|
|
199
|
-
const buildWrapperStyle = (el, unit) => {
|
|
200
|
-
var _a;
|
|
201
|
-
const abs = getAbsLayout(el);
|
|
202
|
-
if (abs) {
|
|
203
|
-
const textAlign = (_a = el === null || el === void 0 ? void 0 : el.style) === null || _a === void 0 ? void 0 : _a.textAlign;
|
|
204
|
-
return (0, exports.styleObjectToString)({
|
|
205
|
-
position: 'absolute',
|
|
206
|
-
left: (0, exports.addUnit)(abs.x, unit),
|
|
207
|
-
top: (0, exports.addUnit)(abs.y, unit),
|
|
208
|
-
width: (0, exports.addUnit)(abs.width, unit),
|
|
209
|
-
height: (0, exports.addUnit)(abs.height, unit),
|
|
210
|
-
zIndex: abs.zIndex,
|
|
211
|
-
boxSizing: 'border-box',
|
|
212
|
-
textAlign,
|
|
213
|
-
}, unit);
|
|
214
|
-
}
|
|
215
|
-
return '';
|
|
216
|
-
};
|
|
217
|
-
/**
|
|
218
|
-
* padding 数组/数字转 CSS 缩写字符串。
|
|
219
|
-
*/
|
|
220
|
-
/**
|
|
221
|
-
* 构建 layout-panel 的容器样式(绝对布局容器)。
|
|
222
|
-
*/
|
|
223
|
-
const buildPanelStyle = (el, unit) => {
|
|
224
|
-
const style = {
|
|
225
|
-
display: 'block',
|
|
226
|
-
};
|
|
227
|
-
return (0, exports.styleObjectToString)(style, unit);
|
|
228
|
-
};
|
|
229
|
-
/**
|
|
230
|
-
* 元素样式转内联字符串(自动补单位)。
|
|
231
|
-
*/
|
|
232
|
-
const normalizeElementStyle = (style, unit) => {
|
|
233
|
-
if (!style)
|
|
234
|
-
return '';
|
|
235
|
-
return (0, exports.styleObjectToString)(style, unit);
|
|
236
|
-
};
|
|
237
|
-
const buildTextIcon = (el, unit) => {
|
|
238
|
-
var _a, _b, _c;
|
|
239
|
-
const icon = el.icon;
|
|
240
|
-
if (!icon || icon.enable === false)
|
|
241
|
-
return undefined;
|
|
242
|
-
const style = icon.style || 'fill';
|
|
243
|
-
const baseName = el.key || el.binding || el.id;
|
|
244
|
-
let name;
|
|
245
|
-
if (style === 'dot')
|
|
246
|
-
name = 'round';
|
|
247
|
-
else if (style === 'line')
|
|
248
|
-
name = baseName ? `${baseName}-line` : undefined;
|
|
249
|
-
else
|
|
250
|
-
name = baseName || undefined;
|
|
251
|
-
if (!name)
|
|
252
|
-
return undefined;
|
|
253
|
-
const size = icon.size !== undefined && icon.size !== null
|
|
254
|
-
? icon.size
|
|
255
|
-
: (_a = el.style) === null || _a === void 0 ? void 0 : _a.fontSize;
|
|
256
|
-
const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
|
|
257
|
-
const color = (_b = icon.color) !== null && _b !== void 0 ? _b : (typeof ((_c = el.style) === null || _c === void 0 ? void 0 : _c.color) === 'string' ? el.style.color : undefined);
|
|
258
|
-
return {
|
|
259
|
-
name: `${name}`,
|
|
260
|
-
text: `${name}`,
|
|
261
|
-
size: (0, exports.addUnit)(size, unit),
|
|
262
|
-
gap: (0, exports.addUnit)(gap, unit),
|
|
263
|
-
color: color,
|
|
264
|
-
align: icon.align || 'left',
|
|
265
|
-
};
|
|
266
|
-
};
|
|
267
|
-
/** ---------- 渲染树构建 ---------- */
|
|
268
|
-
/**
|
|
269
|
-
* 将 children 展开为渲染节点。
|
|
270
|
-
*/
|
|
271
|
-
const buildRenderNodes = (children, rootData, unit = 'px', context = {}) => {
|
|
272
|
-
if (!Array.isArray(children))
|
|
273
|
-
return [];
|
|
274
|
-
const nodes = [];
|
|
275
|
-
children.forEach(el => {
|
|
276
|
-
if (!el || el.visible === false)
|
|
277
|
-
return;
|
|
278
|
-
const node = buildNode(el, rootData, unit, context);
|
|
279
|
-
if (node)
|
|
280
|
-
nodes.push(node);
|
|
281
|
-
});
|
|
282
|
-
return nodes;
|
|
283
|
-
};
|
|
284
|
-
exports.buildRenderNodes = buildRenderNodes;
|
|
285
|
-
/**
|
|
286
|
-
* 构建单个渲染节点(layout-panel 递归处理子元素)。
|
|
287
|
-
*/
|
|
288
|
-
const buildNode = (el, rootData, unit, context) => {
|
|
289
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
290
|
-
if (!el || el.visible === false)
|
|
291
|
-
return null;
|
|
292
|
-
const wrapperStyle = buildWrapperStyle(el, unit);
|
|
293
|
-
if (el.type === 'layout-panel') {
|
|
294
|
-
return {
|
|
295
|
-
id: el.id,
|
|
296
|
-
type: el.type,
|
|
297
|
-
visible: !!el.visible,
|
|
298
|
-
wrapperStyle,
|
|
299
|
-
contentStyle: buildPanelStyle(el, unit),
|
|
300
|
-
children: (0, exports.buildRenderNodes)(el.children || [], rootData, unit, context),
|
|
301
|
-
};
|
|
302
|
-
}
|
|
303
|
-
const baseStyle = normalizeElementStyle(el.style, unit);
|
|
304
|
-
if (el.type === 'text') {
|
|
305
|
-
const align = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align;
|
|
306
|
-
const textStyle = align ? `${baseStyle};text-align:${align}` : baseStyle;
|
|
307
|
-
const value = (_c = (_b = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _b !== void 0 ? _b : el.defaultValue) !== null && _c !== void 0 ? _c : '';
|
|
308
|
-
return {
|
|
309
|
-
id: el.id,
|
|
310
|
-
type: el.type,
|
|
311
|
-
wrapperStyle,
|
|
312
|
-
contentStyle: textStyle,
|
|
313
|
-
text: `${value}`,
|
|
314
|
-
visible: !!el.visible,
|
|
315
|
-
icon: buildTextIcon(el, unit),
|
|
316
|
-
};
|
|
317
|
-
}
|
|
318
|
-
if (el.type === 'image') {
|
|
319
|
-
const src = (_f = (_e = (_d = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _d !== void 0 ? _d : el.defaultUrl) !== null && _e !== void 0 ? _e : el.defaultValue) !== null && _f !== void 0 ? _f : '';
|
|
320
|
-
const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
|
|
321
|
-
return {
|
|
322
|
-
id: el.id,
|
|
323
|
-
type: el.type,
|
|
324
|
-
wrapperStyle,
|
|
325
|
-
contentStyle: baseStyle,
|
|
326
|
-
src,
|
|
327
|
-
mode,
|
|
328
|
-
visible: !!el.visible,
|
|
329
|
-
};
|
|
330
|
-
}
|
|
331
|
-
if (el.type === 'icon') {
|
|
332
|
-
const name = (_j = (_h = (_g = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _g !== void 0 ? _g : el.name) !== null && _h !== void 0 ? _h : el.defaultValue) !== null && _j !== void 0 ? _j : '';
|
|
333
|
-
return {
|
|
334
|
-
id: el.id,
|
|
335
|
-
type: el.type,
|
|
336
|
-
wrapperStyle,
|
|
337
|
-
contentStyle: baseStyle,
|
|
338
|
-
name: `${name}`,
|
|
339
|
-
text: `${name}`,
|
|
340
|
-
visible: !!el.visible,
|
|
341
|
-
};
|
|
342
|
-
}
|
|
343
|
-
if (el.type === 'custom') {
|
|
344
|
-
return {
|
|
345
|
-
id: el.id,
|
|
346
|
-
type: el.type,
|
|
347
|
-
wrapperStyle,
|
|
348
|
-
contentStyle: baseStyle,
|
|
349
|
-
visible: !!el.visible,
|
|
350
|
-
};
|
|
351
|
-
}
|
|
352
|
-
return null;
|
|
353
|
-
};
|
|
354
|
-
/**
|
|
355
|
-
* 主入口:合并布局 Schema 与数据,生成供前端使用的渲染结果。
|
|
356
|
-
*/
|
|
357
|
-
const buildRenderResult = (layoutInput, dataInput, unit = 'px') => {
|
|
358
|
-
const layouts = (0, exports.normalizeLayout)(layoutInput);
|
|
359
|
-
return layouts.map(layout => {
|
|
360
|
-
const cardStyle = (0, exports.styleObjectToString)({
|
|
361
|
-
width: (0, exports.addUnit)(layout.width, unit),
|
|
362
|
-
height: (0, exports.addUnit)(layout.height, unit),
|
|
363
|
-
color: layout.fontColor,
|
|
364
|
-
borderRadius: layout.borderRadius !== undefined
|
|
365
|
-
? (0, exports.addUnit)(layout.borderRadius, unit)
|
|
366
|
-
: undefined,
|
|
367
|
-
padding: layout.padding !== undefined
|
|
368
|
-
? (0, exports.addUnit)(layout.padding, unit)
|
|
369
|
-
: undefined,
|
|
370
|
-
position: 'relative',
|
|
371
|
-
}, unit);
|
|
372
|
-
const bgStyle = (0, exports.styleObjectToString)({
|
|
373
|
-
zIndex: layout.backgroundZIndex,
|
|
374
|
-
borderRadius: layout.borderRadius !== undefined
|
|
375
|
-
? (0, exports.addUnit)(layout.borderRadius, unit)
|
|
376
|
-
: undefined,
|
|
377
|
-
}, unit);
|
|
378
|
-
const renderTree = (0, exports.buildRenderNodes)(layout.children || [], dataInput || {}, unit);
|
|
379
|
-
return {
|
|
380
|
-
renderTree,
|
|
381
|
-
cardStyle,
|
|
382
|
-
backgroundImage: layout.backgroundImage || '',
|
|
383
|
-
backgroundStyle: bgStyle,
|
|
384
|
-
};
|
|
385
|
-
});
|
|
386
|
-
};
|
|
387
|
-
exports.buildRenderResult = buildRenderResult;
|
|
388
|
-
__exportStar(require("./utils"), 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; } });
|
|
47
|
+
var changeBackground_1 = require("./ops/changeBackground");
|
|
48
|
+
Object.defineProperty(exports, "backgroundChange", { enumerable: true, get: function () { return changeBackground_1.backgroundChange; } });
|
|
49
|
+
Object.defineProperty(exports, "DEFAULT_DECOR_COLOR", { enumerable: true, get: function () { return changeBackground_1.DEFAULT_DECOR_COLOR; } });
|
|
50
|
+
Object.defineProperty(exports, "resolveSpecialStyle", { enumerable: true, get: function () { return changeBackground_1.resolveSpecialStyle; } });
|
|
51
|
+
Object.defineProperty(exports, "applySpecialStyle", { enumerable: true, get: function () { return changeBackground_1.applySpecialStyle; } });
|
|
52
|
+
Object.defineProperty(exports, "applyBackground", { enumerable: true, get: function () { return changeBackground_1.applyBackground; } });
|
|
53
|
+
Object.defineProperty(exports, "updateElementsStyle", { enumerable: true, get: function () { return changeBackground_1.updateElementsStyle; } });
|
|
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,5 @@ 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);
|
|
20
|
+
__exportStar(require("./context"), exports);
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.areChildrenEqual = exports.normalizeLayout = exports.parseLayout = exports.normalizeId = exports.collectBindings = exports.sanitizeLayout = exports.sanitizeElement = exports.getAbsLayout = exports.roundToInt = void 0;
|
|
4
|
+
const helpers_1 = require("./helpers");
|
|
5
|
+
const DEFAULT_CARD_WIDTH = 343;
|
|
6
|
+
const DEFAULT_CARD_HEIGHT = 210;
|
|
7
|
+
const roundToInt = (value) => Number.isFinite(value) ? Math.round(value) : value;
|
|
8
|
+
exports.roundToInt = roundToInt;
|
|
9
|
+
const getAbsLayout = (el) => el.layout && el.layout.mode === 'absolute'
|
|
10
|
+
? el.layout
|
|
11
|
+
: null;
|
|
12
|
+
exports.getAbsLayout = getAbsLayout;
|
|
13
|
+
const roundAbsLayout = (layout) => ({
|
|
14
|
+
...layout,
|
|
15
|
+
x: (0, exports.roundToInt)(layout.x),
|
|
16
|
+
y: (0, exports.roundToInt)(layout.y),
|
|
17
|
+
width: (0, exports.roundToInt)(layout.width),
|
|
18
|
+
height: (0, exports.roundToInt)(layout.height),
|
|
19
|
+
zIndex: layout.zIndex !== undefined ? (0, exports.roundToInt)(layout.zIndex) : layout.zIndex,
|
|
20
|
+
});
|
|
21
|
+
const sanitizeElement = (el) => {
|
|
22
|
+
const layout = (0, exports.getAbsLayout)(el);
|
|
23
|
+
const base = layout ? { ...el, layout: roundAbsLayout(layout) } : el;
|
|
24
|
+
if (el.type === 'layout-panel' && el.children) {
|
|
25
|
+
return {
|
|
26
|
+
...base,
|
|
27
|
+
children: el.children.map(child => (0, exports.sanitizeElement)(child)),
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
return base;
|
|
31
|
+
};
|
|
32
|
+
exports.sanitizeElement = sanitizeElement;
|
|
33
|
+
const sanitizeLayout = (layout) => ({
|
|
34
|
+
...layout,
|
|
35
|
+
width: (0, exports.roundToInt)(layout.width),
|
|
36
|
+
height: (0, exports.roundToInt)(layout.height),
|
|
37
|
+
backgroundZIndex: layout.backgroundZIndex !== undefined
|
|
38
|
+
? (0, exports.roundToInt)(layout.backgroundZIndex)
|
|
39
|
+
: layout.backgroundZIndex,
|
|
40
|
+
children: (layout.children || []).map(child => (0, exports.sanitizeElement)(child)),
|
|
41
|
+
});
|
|
42
|
+
exports.sanitizeLayout = sanitizeLayout;
|
|
43
|
+
const collectBindings = (elements = []) => {
|
|
44
|
+
const result = [];
|
|
45
|
+
elements.forEach(el => {
|
|
46
|
+
if (el.binding)
|
|
47
|
+
result.push(el.binding);
|
|
48
|
+
if (el.type === 'layout-panel' && el.children) {
|
|
49
|
+
result.push(...(0, exports.collectBindings)(el.children));
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
return Array.from(new Set(result));
|
|
53
|
+
};
|
|
54
|
+
exports.collectBindings = collectBindings;
|
|
55
|
+
const normalizeId = (id) => {
|
|
56
|
+
if (id === undefined || id === null)
|
|
57
|
+
return undefined;
|
|
58
|
+
const num = Number(id);
|
|
59
|
+
return Number.isFinite(num) ? num : id;
|
|
60
|
+
};
|
|
61
|
+
exports.normalizeId = normalizeId;
|
|
62
|
+
const safeParseJson = (input) => {
|
|
63
|
+
try {
|
|
64
|
+
return JSON.parse(input);
|
|
65
|
+
}
|
|
66
|
+
catch (err) {
|
|
67
|
+
console.warn('[km-card-layout-core] parseLayout failed', err);
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
const parseSingleLayout = (value) => {
|
|
72
|
+
if (!value)
|
|
73
|
+
return null;
|
|
74
|
+
if (Array.isArray(value))
|
|
75
|
+
return parseSingleLayout(value[0]);
|
|
76
|
+
if (typeof value === 'string') {
|
|
77
|
+
return parseSingleLayout(safeParseJson(value));
|
|
78
|
+
}
|
|
79
|
+
if ((0, helpers_1.isObject)(value)) {
|
|
80
|
+
const content = value.content;
|
|
81
|
+
if (content !== undefined) {
|
|
82
|
+
const nested = parseSingleLayout(content);
|
|
83
|
+
if (nested)
|
|
84
|
+
return nested;
|
|
85
|
+
}
|
|
86
|
+
return (0, exports.sanitizeLayout)(value);
|
|
87
|
+
}
|
|
88
|
+
return null;
|
|
89
|
+
};
|
|
90
|
+
const parseLayout = (input) => parseSingleLayout(input);
|
|
91
|
+
exports.parseLayout = parseLayout;
|
|
92
|
+
const normalizeLayout = (layout) => {
|
|
93
|
+
if (!Array.isArray(layout))
|
|
94
|
+
return [];
|
|
95
|
+
return layout
|
|
96
|
+
.map(item => {
|
|
97
|
+
var _a, _b;
|
|
98
|
+
if (!item || typeof item !== 'object')
|
|
99
|
+
return null;
|
|
100
|
+
const parsed = item;
|
|
101
|
+
return {
|
|
102
|
+
...parsed,
|
|
103
|
+
width: (_a = (0, helpers_1.toNumber)(parsed.width)) !== null && _a !== void 0 ? _a : DEFAULT_CARD_WIDTH,
|
|
104
|
+
height: (_b = (0, helpers_1.toNumber)(parsed.height)) !== null && _b !== void 0 ? _b : DEFAULT_CARD_HEIGHT,
|
|
105
|
+
container: parsed.container || { mode: 'absolute' },
|
|
106
|
+
children: Array.isArray(parsed.children)
|
|
107
|
+
? parsed.children
|
|
108
|
+
: [],
|
|
109
|
+
};
|
|
110
|
+
})
|
|
111
|
+
.filter((value) => Boolean(value));
|
|
112
|
+
};
|
|
113
|
+
exports.normalizeLayout = normalizeLayout;
|
|
114
|
+
const areChildrenEqual = (a, b) => {
|
|
115
|
+
return JSON.stringify(a === null || a === void 0 ? void 0 : a.children) === JSON.stringify(b === null || b === void 0 ? void 0 : b.children);
|
|
116
|
+
};
|
|
117
|
+
exports.areChildrenEqual = areChildrenEqual;
|