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

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

@@ -1,330 +0,0 @@
-"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;