@cloudbase/framework-plugin-low-code 1.7.2 → 1.7.3

package/lib/weapps-core/utils/style.js

@@ -0,0 +1,330 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCssText = exports.removeEffectTwiceStyle = exports.removeWrapperBadEffectStyle = exports.toRPX = exports.toREM = exports.translateStyleByHandler = exports.translateStyleToRem = exports.translateStyleToRpx = exports.removeInvalidStyleFormValue = exports.toCssStyle = void 0;
+const uniq_1 = __importDefault(require("lodash/uniq"));
+const map_1 = __importDefault(require("lodash/map"));
+const config_1 = require("../config");
+const common_1 = require("./common");
+function _handleStyleNumValue(styleVal, addPXUnit) {
+    if (addPXUnit) {
+        const value = `${styleVal}`;
+        if (value.search(/^\d+$/) >= 0) {
+            return value + 'px';
+        }
+    }
+    return styleVal;
+}
+function toCssStyle(commonStyle = {}, options = { toRem: true, ignoreSelf: false, addPXUnit: false, toRpx: false }) {
+    const { size, text, border, background, margin, padding, zIndex, position, display, flexConfig, custom, self, } = commonStyle;
+    const style = {};
+    if (size) {
+        setStyleValue(style, 'width', _handleStyleNumValue(size.width, !!options.addPXUnit));
+        setStyleValue(style, 'height', _handleStyleNumValue(size.height, !!options.addPXUnit));
+    }
+    if (margin) {
+        setDistanceStyle(style, margin, 'margin', !!options.addPXUnit);
+    }
+    if (padding) {
+        setDistanceStyle(style, padding, 'padding', !!options.addPXUnit);
+    }
+    if (display) {
+        setStyleValue(style, 'display', display);
+    }
+    if (display === 'flex' && flexConfig) {
+        if (flexConfig.justifyContent)
+            setStyleValue(style, 'justifyContent', flexConfig.justifyContent);
+        if (flexConfig.alignItems)
+            setStyleValue(style, 'alignItems', flexConfig.alignItems);
+        if (flexConfig.flexWrap && flexConfig.flexDirection) {
+            setStyleValue(style, 'flexFlow', `${flexConfig.flexDirection} ${flexConfig.flexWrap}`);
+        }
+        else {
+            if (flexConfig.flexWrap)
+                setStyleValue(style, 'flexWrap', flexConfig.flexWrap);
+            if (flexConfig.flexDirection)
+                setStyleValue(style, 'flexDirection', flexConfig.flexDirection);
+        }
+    }
+    if (typeof zIndex === 'number' || `${zIndex}`.search(/^\d+$/) === 0) {
+        style.zIndex = zIndex;
+    }
+    if (text) {
+        setStyleValue(style, 'color', text.color);
+        setStyleValue(style, 'fontSize', _handleStyleNumValue(text.fontSize, !!options.addPXUnit));
+        setStyleValue(style, 'lineHeight', text.lineHeight);
+        setStyleValue(style, 'textAlign', text.textAlign);
+        setStyleValue(style, 'fontWeight', text.weight);
+        if (text.opacity) {
+            setStyleValue(style, 'opacity', text.opacity / 100);
+        }
+    }
+    if (border) {
+        const { type, color, width, radius, radiusInfo } = border;
+        if (width !== undefined) {
+            if (type) {
+                setStyleValue(style, 'border', `${_handleStyleNumValue(width, !!options.addPXUnit)} ${type} ${color || ''}`);
+            }
+            else {
+                setStyleValue(style, 'borderWidth', _handleStyleNumValue(width, !!options.addPXUnit));
+                if (color)
+                    setStyleValue(style, 'borderColor', color);
+            }
+        }
+        if (radius !== undefined) {
+            setStyleValue(style, 'borderRadius', _handleStyleNumValue(radius, !!options.addPXUnit));
+        }
+        if (radiusInfo && !(0, common_1.isEmptyObj)(radiusInfo)) {
+            if (Object.keys(radiusInfo).length === 4) {
+                if ((0, uniq_1.default)((0, map_1.default)(radiusInfo, (val) => val)).length === 1) {
+                    setStyleValue(style, 'borderRadius', _handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit));
+                }
+                else if (radiusInfo.topLeft === radiusInfo.bottomRight && radiusInfo.topRight === radiusInfo.bottomLeft) {
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit)}`);
+                }
+                else if (radiusInfo.topRight === radiusInfo.bottomLeft) {
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.bottomRight, !!options.addPXUnit)}`);
+                }
+                else {
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.bottomRight, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.bottomLeft, !!options.addPXUnit)}`);
+                }
+            }
+            else {
+                setStyleValue(style, 'borderTopLeftRadius', _handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit));
+                setStyleValue(style, 'borderTopRightRadius', _handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit));
+                setStyleValue(style, 'borderBottomRightRadius', _handleStyleNumValue(radiusInfo.bottomRight, !!options.addPXUnit));
+                setStyleValue(style, 'borderBottomLeftRadius', _handleStyleNumValue(radiusInfo.bottomLeft, !!options.addPXUnit));
+            }
+        }
+    }
+    if (background) {
+        const { bgType, color, image, size, repeat, position, positionObj } = background;
+        if (bgType === 'color') {
+            setStyleValue(style, 'background', color);
+        }
+        else if (bgType === 'image') {
+            if (image != null) {
+                if (image.search(/[()]/) >= 0) {
+                    style.background = image;
+                }
+                else {
+                    style.background = `url(${image})`;
+                }
+            }
+            if (repeat)
+                style.background += ` ${repeat}`;
+            if (size) {
+                setStyleValue(style, 'backgroundSize', _handleStyleNumValue(size, !!options.addPXUnit));
+            }
+            setStyleValue(style, 'backgroundPosition', position);
+            if (positionObj && !(0, common_1.isEmptyObj)(positionObj)) {
+                style.background += ` ${_handleStyleNumValue(positionObj.left, !!options.addPXUnit)} ${_handleStyleNumValue(positionObj.top, !!options.addPXUnit)}`;
+            }
+        }
+        if (bgType === undefined) {
+            setStyleValue(style, 'backgroundColor', color);
+            if (image != null) {
+                style.backgroundImage = `url(${image})`;
+                setStyleValue(style, 'backgroundRepeat', repeat);
+                setStyleValue(style, 'backgroundSize', _handleStyleNumValue(size, !!options.addPXUnit));
+                setStyleValue(style, 'backgroundPosition', position);
+            }
+        }
+    }
+    if (position) {
+        setStyleValue(style, 'position', position.position);
+        if (position.left !== undefined) {
+            setStyleValue(style, 'left', _handleStyleNumValue(position.left, !!options.addPXUnit));
+        }
+        if (position.right !== undefined) {
+            setStyleValue(style, 'right', _handleStyleNumValue(position.right, !!options.addPXUnit));
+        }
+        if (position.top !== undefined) {
+            setStyleValue(style, 'top', _handleStyleNumValue(position.top, !!options.addPXUnit));
+        }
+        if (position.bottom !== undefined) {
+            setStyleValue(style, 'bottom', _handleStyleNumValue(position.bottom, !!options.addPXUnit));
+        }
+    }
+    if (custom && custom.length > 0) {
+        custom.map((item) => {
+            setStyleValue(style, item.key, item.value);
+        });
+    }
+    if (self && !options.ignoreSelf) {
+        const _a = self, { cssFloat } = _a, restSelf = __rest(_a, ["cssFloat"]);
+        Object.assign(style, restSelf, { float: cssFloat });
+    }
+    if (options.toRpx) {
+        return translateStyleToRpx(style);
+    }
+    return options.toRem ? translateStyleToRem(style) : style;
+}
+exports.toCssStyle = toCssStyle;
+function removeInvalidStyleFormValue(styleForm = {}) {
+    return Object.keys(styleForm).reduce((result, key) => {
+        const propStyleFormData = styleForm[key];
+        if ((0, common_1.isPlainObject)(propStyleFormData)) {
+            setStyleValue(result, key, removeInvalidStyleFormValue(propStyleFormData));
+        }
+        else {
+            setStyleValue(result, key, styleForm[key]);
+        }
+        return result;
+    }, {});
+}
+exports.removeInvalidStyleFormValue = removeInvalidStyleFormValue;
+function setDistanceStyle(style, distance, attr, addPXUnit) {
+    if (Object.keys(distance).length === 4) {
+        if ((0, uniq_1.default)((0, map_1.default)(distance, (val) => val)).length === 1) {
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), _handleStyleNumValue(distance.top, addPXUnit));
+        }
+        else if (distance.top === distance.bottom && distance.left === distance.right) {
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)}`);
+        }
+        else if (distance.left === distance.right) {
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)}`);
+        }
+        else {
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)} ${_handleStyleNumValue(distance.left, addPXUnit)}`);
+        }
+    }
+    else {
+        config_1.DISTANCE_KEY_LIST.forEach((key) => {
+            if (distance[key] !== undefined)
+                setStyleValue(style, (0, common_1.camelcase)(`${attr}_${key}`), _handleStyleNumValue(distance[key], addPXUnit));
+        });
+    }
+}
+function translateStyleToRpx(style = {}) {
+    return translateStyleByHandler(style, toRPX);
+}
+exports.translateStyleToRpx = translateStyleToRpx;
+function translateStyleToRem(style = {}) {
+    return translateStyleByHandler(style, toREM);
+}
+exports.translateStyleToRem = translateStyleToRem;
+function translateStyleByHandler(style = {}, handler) {
+    return Object.keys(style).reduce((result, key) => {
+        const value = style[key];
+        if (config_1.PERCENTAGE_KEY_LIST.includes(key)) {
+            setStyleValue(result, key, value);
+        }
+        else if (value !== undefined && value !== null) {
+            setStyleValue(result, key, handler(value));
+        }
+        return result;
+    }, {});
+}
+exports.translateStyleByHandler = translateStyleByHandler;
+function setStyleValue(object, key, value) {
+    if (value === undefined || value === null || value === '') {
+        return;
+    }
+    if (key === 'open') {
+        return;
+    }
+    if ((0, common_1.isEmptyObj)(value)) {
+        return;
+    }
+    object[(0, common_1.camelcase)(key)] = value;
+}
+function calPxToREM(px) {
+    if (Number.isNaN(px / 28))
+        return px.toString();
+    if (+px === 0) {
+        return '0';
+    }
+    return (px / 28).toFixed(4) + 'rem';
+}
+function toREM(cssLen) {
+    if (typeof cssLen === 'string') {
+        const cssLenArr = cssLen.split(' ');
+        return cssLenArr
+            .map((attr) => {
+            const matchResult = attr.match(/^(-?\d+)(px)?$/);
+            if (matchResult && matchResult[1]) {
+                return calPxToREM(+matchResult[1]);
+            }
+            return attr;
+        })
+            .join(' ');
+    }
+    else if (typeof cssLen === 'number') {
+        return calPxToREM(cssLen);
+    }
+    else {
+        throw new Error('cssLen type error');
+    }
+}
+exports.toREM = toREM;
+function toRPX(cssLen) {
+    if (typeof cssLen === 'string') {
+        const cssLenArr = cssLen.split(' ');
+        return cssLenArr
+            .map((attr) => {
+            const matchResult = attr.match(/^(-?\d+)(px)?$/);
+            if (matchResult && matchResult[1]) {
+                return `${+matchResult[1]}rpx`;
+            }
+            return attr;
+        })
+            .join(' ');
+    }
+    return `${cssLen}rpx`;
+}
+exports.toRPX = toRPX;
+function removeWrapperBadEffectStyle(commonStyle = {}) {
+    return Object.keys(commonStyle).reduce((result, key) => {
+        const value = commonStyle[key];
+        const camelcaseKey = (0, common_1.camelcase)(key);
+        if (config_1.WRAPPER_REMOVE_STYLE_KEY_LIST.includes(camelcaseKey)) {
+            return result;
+        }
+        if (key === 'display' && value === 'flex') {
+            return result;
+        }
+        setStyleValue(result, camelcaseKey, value);
+        return result;
+    }, {});
+}
+exports.removeWrapperBadEffectStyle = removeWrapperBadEffectStyle;
+function removeEffectTwiceStyle(commonStyle = {}) {
+    const style = {};
+    Object.keys(commonStyle).map((key) => {
+        const value = commonStyle[key];
+        const camelcaseKey = (0, common_1.camelcase)(key);
+        if (config_1.SELF_REMOVE_STYLE_KEY_LIST.includes(camelcaseKey)) {
+            return false;
+        }
+        if (config_1.SELF_REMOVE_WITH_PERCENTAGE_KEY_LIST.includes(camelcaseKey) && String(value).match(/.+%$/)) {
+            return false;
+        }
+        setStyleValue(style, camelcaseKey, value);
+    });
+    return style;
+}
+exports.removeEffectTwiceStyle = removeEffectTwiceStyle;
+function toCssText(style, className = '.some-class-name') {
+    const attrText = Object.keys(style)
+        .map((key) => {
+        const value = style[key];
+        return `${(0, common_1.kebabCase)(key)}: ${value};`;
+    })
+        .join('\n');
+    return `${className} { ${attrText} }\n`;
+}
+exports.toCssText = toCssText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/framework-plugin-low-code",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",
@@ -39,7 +39,7 @@
     "@cloudbase/framework-core": "^1.8.16",
     "@cloudbase/framework-plugin-auth": "^1.8.16",
     "@cloudbase/framework-plugin-website": "^1.8.17",
-    "@cloudbase/lowcode-builder": "1.8.2",
+    "@cloudbase/lowcode-builder": "1.8.4",
     "@cloudbase/lowcode-deployer": "^1.3.0",
     "@formily/react-schema-renderer": "1.1.7",
     "archiver": "^4.0.1",
@@ -64,4 +64,4 @@
     "jest": "^27.5.1",
     "typescript": "^4.7.4"
   }
-}
+}