@cloudbase/cals 0.4.11 → 0.4.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/parser/cals/utils/style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/parser/cals/utils/style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,wBAAgB,2BAA2B,CAAC,SAAS,GAAE,GAA2B,GAAG,GAAG,CAUvF;AA+ID,wBAAgB,gCAAgC,CAC9C,WAAW,GAAE,GAAQ,EACrB,OAAO,GAAE;IACP,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACoD,GACrE,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,CAgU7B;AASD,wBAAgB,wBAAwB,CACtC,KAAK,GAAE,UAAU,CAAC,MAAM,GAAG,MAAM,CAAM,EACvC,OAAO;;CAAwB,GAC9B,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,CAE7B"}
|
|
@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
14
14
|
exports.processCSSProperties2Rem = exports.processCommonStyle2CSSProperties = exports.removeInvalidStyleFormValue = void 0;
|
|
15
15
|
const common_1 = require("./common");
|
|
16
16
|
const lodash_1 = require("lodash");
|
|
17
|
-
const
|
|
17
|
+
const utils_1 = require("../../../utils");
|
|
18
18
|
const DISTANCE_KEY_LIST = ['top', 'right', 'bottom', 'left'];
|
|
19
19
|
function removeInvalidStyleFormValue(styleForm = {}) {
|
|
20
20
|
return Object.keys(styleForm).reduce((result, key) => {
|
|
@@ -40,7 +40,13 @@ function setStyleValue(object, key, value) {
|
|
|
40
40
|
if ((0, common_1.isEmptyObj)(value)) {
|
|
41
41
|
return;
|
|
42
42
|
}
|
|
43
|
-
|
|
43
|
+
if (key.startsWith('--')) {
|
|
44
|
+
// css 自定义属性
|
|
45
|
+
object[key] = value;
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
object[(0, common_1.camelcase)(key)] = value;
|
|
49
|
+
}
|
|
44
50
|
}
|
|
45
51
|
function _handleStyleNumValue(styleVal, addPXUnit) {
|
|
46
52
|
if (addPXUnit) {
|
|
@@ -81,7 +87,7 @@ function setDistanceStyle(style, distance, attr, addPXUnit) {
|
|
|
81
87
|
function translateStyleByHandler(style = {}, handler, options = { looseError: false }) {
|
|
82
88
|
return Object.keys(style).reduce((result, key) => {
|
|
83
89
|
const value = style[key];
|
|
84
|
-
if (
|
|
90
|
+
if (utils_1.isUnitlessNumber[key]) {
|
|
85
91
|
setStyleValue(result, key, value);
|
|
86
92
|
}
|
|
87
93
|
else if (value !== undefined && value !== null) {
|
|
@@ -147,7 +153,7 @@ function toRPX(cssLen) {
|
|
|
147
153
|
function processCommonStyle2CSSProperties(commonStyle = {}, options = { toRem: true, ignoreSelf: false, addPXUnit: false, toRpx: false }) {
|
|
148
154
|
const { size,
|
|
149
155
|
// transform,
|
|
150
|
-
text, border, background, margin, padding, zIndex, position, display, flexConfig, custom, self, } = commonStyle;
|
|
156
|
+
text, border, background, margin, padding, zIndex, position, display, flexConfig, custom, self, boxShadow, } = commonStyle;
|
|
151
157
|
const style = {};
|
|
152
158
|
if (size) {
|
|
153
159
|
setStyleValue(style, 'width', _handleStyleNumValue(size.width, !!options.addPXUnit));
|
|
@@ -200,7 +206,8 @@ function processCommonStyle2CSSProperties(commonStyle = {}, options = { toRem: t
|
|
|
200
206
|
}
|
|
201
207
|
if (border) {
|
|
202
208
|
const { type, color, width, radius, radiusInfo } = border;
|
|
203
|
-
|
|
209
|
+
// width
|
|
210
|
+
if (typeof width === 'string') {
|
|
204
211
|
if (type && type !== 'none') {
|
|
205
212
|
setStyleValue(style, 'border', `${_handleStyleNumValue(width, !!options.addPXUnit)} ${type} ${color || ''}`);
|
|
206
213
|
}
|
|
@@ -210,31 +217,60 @@ function processCommonStyle2CSSProperties(commonStyle = {}, options = { toRem: t
|
|
|
210
217
|
setStyleValue(style, 'borderColor', color);
|
|
211
218
|
}
|
|
212
219
|
}
|
|
220
|
+
else if (Object.prototype.toString.call(width) === '[object Object]' && Object.keys(width).length !== 0) {
|
|
221
|
+
// https://developer.mozilla.org/zh-CN/docs/Web/CSS/border
|
|
222
|
+
// 虽然border-width,、border-style和 border-color 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 boder 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。
|
|
223
|
+
const { top = '0', right = '0', bottom = '0', left = '0' } = width;
|
|
224
|
+
setStyleValue(style, 'borderWidth', `${_handleStyleNumValue(top, !!options.addPXUnit) || '0'} ${_handleStyleNumValue(right, !!options.addPXUnit) || '0'} ${_handleStyleNumValue(bottom, !!options.addPXUnit) || '0'} ${_handleStyleNumValue(left, !!options.addPXUnit) || '0'}`);
|
|
225
|
+
if (type) {
|
|
226
|
+
setStyleValue(style, 'borderStyle', type);
|
|
227
|
+
}
|
|
228
|
+
if (color) {
|
|
229
|
+
setStyleValue(style, 'borderColor', color);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
// border radius
|
|
213
233
|
if (radius !== undefined) {
|
|
214
234
|
setStyleValue(style, 'borderRadius', _handleStyleNumValue(radius, !!options.addPXUnit));
|
|
215
235
|
}
|
|
216
236
|
if (radiusInfo && !(0, common_1.isEmptyObj)(radiusInfo)) {
|
|
237
|
+
let { topLeft, topRight, bottomRight, bottomLeft } = radiusInfo;
|
|
217
238
|
if (Object.keys(radiusInfo).length === 4) {
|
|
239
|
+
// 包含不为空的属性，将部分为空属性处理成 0
|
|
240
|
+
if (Object.values(radiusInfo).some((corner) => !!corner)) {
|
|
241
|
+
if (!topLeft) {
|
|
242
|
+
topLeft = '0';
|
|
243
|
+
}
|
|
244
|
+
if (!topRight) {
|
|
245
|
+
topRight = '0';
|
|
246
|
+
}
|
|
247
|
+
if (!bottomRight) {
|
|
248
|
+
bottomRight = '0';
|
|
249
|
+
}
|
|
250
|
+
if (!bottomLeft) {
|
|
251
|
+
bottomLeft = '0';
|
|
252
|
+
}
|
|
253
|
+
}
|
|
218
254
|
if ((0, lodash_1.uniq)((0, lodash_1.map)(radiusInfo, (val) => val)).length === 1) {
|
|
219
255
|
// 4个值全相等的情况
|
|
220
|
-
setStyleValue(style, 'borderRadius', _handleStyleNumValue(
|
|
256
|
+
setStyleValue(style, 'borderRadius', _handleStyleNumValue(topLeft, !!options.addPXUnit));
|
|
221
257
|
}
|
|
222
|
-
else if (
|
|
258
|
+
else if (topLeft === bottomRight && topRight === bottomLeft) {
|
|
223
259
|
// 俩俩相等的情况
|
|
224
|
-
setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(
|
|
260
|
+
setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(topRight, !!options.addPXUnit)}`);
|
|
225
261
|
}
|
|
226
|
-
else if (
|
|
227
|
-
setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(
|
|
262
|
+
else if (topRight === bottomLeft) {
|
|
263
|
+
setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(topRight, !!options.addPXUnit)} ${_handleStyleNumValue(bottomRight, !!options.addPXUnit)}`);
|
|
228
264
|
}
|
|
229
265
|
else {
|
|
230
|
-
setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(
|
|
266
|
+
setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(topRight, !!options.addPXUnit)} ${_handleStyleNumValue(bottomRight, !!options.addPXUnit)} ${_handleStyleNumValue(bottomLeft, !!options.addPXUnit)}`);
|
|
231
267
|
}
|
|
232
268
|
}
|
|
233
269
|
else {
|
|
234
|
-
setStyleValue(style, 'borderTopLeftRadius', _handleStyleNumValue(
|
|
235
|
-
setStyleValue(style, 'borderTopRightRadius', _handleStyleNumValue(
|
|
236
|
-
setStyleValue(style, 'borderBottomRightRadius', _handleStyleNumValue(
|
|
237
|
-
setStyleValue(style, 'borderBottomLeftRadius', _handleStyleNumValue(
|
|
270
|
+
setStyleValue(style, 'borderTopLeftRadius', _handleStyleNumValue(topLeft, !!options.addPXUnit));
|
|
271
|
+
setStyleValue(style, 'borderTopRightRadius', _handleStyleNumValue(topRight, !!options.addPXUnit));
|
|
272
|
+
setStyleValue(style, 'borderBottomRightRadius', _handleStyleNumValue(bottomRight, !!options.addPXUnit));
|
|
273
|
+
setStyleValue(style, 'borderBottomLeftRadius', _handleStyleNumValue(bottomLeft, !!options.addPXUnit));
|
|
238
274
|
}
|
|
239
275
|
}
|
|
240
276
|
if (type === 'none') {
|
|
@@ -292,6 +328,76 @@ function processCommonStyle2CSSProperties(commonStyle = {}, options = { toRem: t
|
|
|
292
328
|
setStyleValue(style, 'bottom', _handleStyleNumValue(position.bottom, !!options.addPXUnit));
|
|
293
329
|
}
|
|
294
330
|
}
|
|
331
|
+
if (boxShadow) {
|
|
332
|
+
let processedBoxShadow = boxShadow;
|
|
333
|
+
if (Object.prototype.toString.call(boxShadow) === '[object Object]') {
|
|
334
|
+
processedBoxShadow = [boxShadow];
|
|
335
|
+
}
|
|
336
|
+
let boxShadowStyleString = '';
|
|
337
|
+
if (Array.isArray(processedBoxShadow)) {
|
|
338
|
+
processedBoxShadow.forEach((boxShadowItem, index) => {
|
|
339
|
+
let currentBoxShadowStyleString = '';
|
|
340
|
+
const { keyWord, offsetX, offsetY, blurRadius, spreadRadius, color, global, inset } = boxShadowItem;
|
|
341
|
+
// Keyword values
|
|
342
|
+
if (keyWord === 'none') {
|
|
343
|
+
currentBoxShadowStyleString = 'none';
|
|
344
|
+
}
|
|
345
|
+
else if (!!global) {
|
|
346
|
+
currentBoxShadowStyleString = global;
|
|
347
|
+
}
|
|
348
|
+
else if (!!offsetX || !!offsetY) {
|
|
349
|
+
// inset
|
|
350
|
+
if (!!inset) {
|
|
351
|
+
currentBoxShadowStyleString = 'inset ';
|
|
352
|
+
}
|
|
353
|
+
// offsetX
|
|
354
|
+
if (!!offsetX) {
|
|
355
|
+
currentBoxShadowStyleString += _handleStyleNumValue(offsetX, !!options.addPXUnit);
|
|
356
|
+
}
|
|
357
|
+
else {
|
|
358
|
+
currentBoxShadowStyleString += '0';
|
|
359
|
+
}
|
|
360
|
+
// offsetY
|
|
361
|
+
if (!!offsetY) {
|
|
362
|
+
currentBoxShadowStyleString += ' ' + _handleStyleNumValue(offsetY, !!options.addPXUnit);
|
|
363
|
+
}
|
|
364
|
+
else {
|
|
365
|
+
currentBoxShadowStyleString += ' 0';
|
|
366
|
+
}
|
|
367
|
+
// blur-radius 当 spread-radius 存在时，即使不存在 blur-radius，blur-radius 也要为 0
|
|
368
|
+
if (!!blurRadius || !!spreadRadius) {
|
|
369
|
+
if (!!blurRadius) {
|
|
370
|
+
currentBoxShadowStyleString += ' ' + _handleStyleNumValue(blurRadius, !!options.addPXUnit);
|
|
371
|
+
}
|
|
372
|
+
else {
|
|
373
|
+
currentBoxShadowStyleString += ' 0';
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
// spread-radius
|
|
377
|
+
if (!!spreadRadius) {
|
|
378
|
+
currentBoxShadowStyleString += ' ' + _handleStyleNumValue(spreadRadius, !!options.addPXUnit);
|
|
379
|
+
}
|
|
380
|
+
// color
|
|
381
|
+
if (!!color) {
|
|
382
|
+
currentBoxShadowStyleString += ' ' + color;
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
if (!!currentBoxShadowStyleString) {
|
|
386
|
+
let splitLabel;
|
|
387
|
+
if (!!boxShadowStyleString) {
|
|
388
|
+
splitLabel = ' , ';
|
|
389
|
+
}
|
|
390
|
+
else {
|
|
391
|
+
splitLabel = '';
|
|
392
|
+
}
|
|
393
|
+
boxShadowStyleString += splitLabel + currentBoxShadowStyleString;
|
|
394
|
+
}
|
|
395
|
+
});
|
|
396
|
+
}
|
|
397
|
+
if (!!boxShadowStyleString) {
|
|
398
|
+
setStyleValue(style, 'boxShadow', boxShadowStyleString);
|
|
399
|
+
}
|
|
400
|
+
}
|
|
295
401
|
if (custom && custom.length > 0) {
|
|
296
402
|
custom.map((item) => {
|
|
297
403
|
setStyleValue(style, item.key, item.value);
|