amis-editor 5.2.0-beta.1 → 5.2.0

package/lib/renderer/style-control/Border.js

@@ -1,191 +0,0 @@
-/**
- * amis-editor v5.2.0-beta.1
- * Copyright 2018-2022 @fex
- */
-
-'use strict';
-
-var tslib = require('tslib');
-var cx = require('classnames');
-var React = require('react');
-var camelCase = require('lodash/camelCase');
-var mobxReact = require('mobx-react');
-var amis = require('amis');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var camelCase__default = /*#__PURE__*/_interopDefaultLegacy(camelCase);
-
-/**
- * @file 边框圆角
- * @description 边框 & 圆角设置
- */
-var borderItems = [
-    {
-        item: 'left',
-        tip: '左边框',
-        content: '┣'
-    },
-    {
-        item: 'top',
-        tip: '上边框',
-        content: '┳'
-    },
-    {
-        item: 'right',
-        tip: '右边框',
-        content: '┫'
-    },
-    {
-        item: 'bottom',
-        tip: '下边框',
-        content: '┻'
-    },
-    {
-        item: 'all',
-        tip: '全部',
-        content: '╋'
-    }
-];
-var radiusItems = [
-    {
-        item: 'top-left',
-        tip: '左上角',
-        content: '┏'
-    },
-    {
-        item: 'top-right',
-        tip: '右上角',
-        content: '┓'
-    },
-    {
-        item: 'bottom-left',
-        tip: '左下角',
-        content: '┗'
-    },
-    {
-        item: 'bottom-right',
-        tip: '右下角',
-        content: '┛'
-    },
-    {
-        item: 'all',
-        tip: '全部',
-        content: '╋'
-    }
-];
-function BoxBorder(_a) {
-    var _b = _a.disableBorder, disableBorder = _b === void 0 ? false : _b, _c = _a.disableRadius, disableRadius = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.value, value = _d === void 0 ? {} : _d;
-    var _e = React.useState('all'), borderItem = _e[0], setBorderItem = _e[1];
-    var _f = React.useState('all'), radiusItem = _f[0], setRadiusItem = _f[1];
-    function getKey(type, field) {
-        var activeItem = field === 'radius' ? radiusItem : borderItem;
-        // TODO: 获取全部的时候应该判断是否所有值都相等，不相等的话返回空或者返回组合提示？
-        if (activeItem === 'all') {
-            return field === 'radius'
-                ? camelCase__default["default"]("".concat(type, "-top-left-").concat(field))
-                : camelCase__default["default"]("".concat(type, "-left-").concat(field));
-        }
-        return camelCase__default["default"]("".concat(type, "-").concat(activeItem, "-").concat(field));
-    }
-    function changeItem(type, key) {
-        return function (e) {
-            var _a;
-            var val = (e === null || e === void 0 ? void 0 : e.value) || e;
-            var field = getKey(type, key);
-            var isRadius = key === 'radius';
-            var activeItem = isRadius ? radiusItem : borderItem;
-            if (activeItem === 'all') {
-                var newValue_1 = {};
-                // 过滤掉all
-                var items = (isRadius ? radiusItems : borderItems).filter(function (position) { return (position === null || position === void 0 ? void 0 : position.item) !== 'all'; });
-                items.forEach(function (item) {
-                    var itemKey = camelCase__default["default"]("".concat(type, "-").concat(item.item, "-").concat(key));
-                    newValue_1[itemKey] = val;
-                });
-                onChange(tslib.__assign(tslib.__assign({}, value), newValue_1));
-            }
-            else {
-                onChange(tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[field] = val, _a)));
-            }
-        };
-    }
-    function renderRadius() {
-        return (React__default["default"].createElement("div", { className: "ae-border-wrap ae-border-radius flex items-center" },
-            React__default["default"].createElement("div", { className: "ae-border-items" }, radiusItems.map(function (item) {
-                var valueKey = camelCase__default["default"]("border-".concat(item.item));
-                return (React__default["default"].createElement("div", { key: valueKey, className: cx__default["default"]("ae-border-item ".concat(item.item), {
-                        active: radiusItem === item.item
-                    }), onClick: function () { return setRadiusItem(item.item); } },
-                    React__default["default"].createElement("span", { "data-tooltip": item.tip, "data-position": "top" }, item.content)));
-            })),
-            React__default["default"].createElement("div", { className: "ae-border-settings" },
-                React__default["default"].createElement("div", { className: "flex items-center" },
-                    React__default["default"].createElement("label", null, "\u5706\u89D2"),
-                    React__default["default"].createElement(amis.NumberInput, { placeholder: "\u5706\u89D2\u5C3A\u5BF8", value: value[getKey('border', 'radius')], step: 1, min: 0, onChange: changeItem('border', 'radius') })))));
-    }
-    function renderBorder() {
-        return (React__default["default"].createElement("div", { className: "ae-border-wrap flex flex-top mb-2" },
-            React__default["default"].createElement("div", { className: "ae-border-items" }, borderItems.map(function (item) {
-                var valueKey = camelCase__default["default"]("border-".concat(item.item));
-                return (React__default["default"].createElement("div", { key: valueKey, className: cx__default["default"]("ae-border-item ".concat(item.item), {
-                        active: borderItem === item.item
-                    }), onClick: function () { return setBorderItem(item.item); } },
-                    React__default["default"].createElement("span", { "data-tooltip": item.tip, "data-position": "top" }, item.content)));
-            })),
-            React__default["default"].createElement("div", { className: "ae-border-settings" },
-                React__default["default"].createElement("div", { className: "flex items-center" },
-                    React__default["default"].createElement("label", null, "\u7EBF\u5F62"),
-                    React__default["default"].createElement(amis.Select, { className: "ae-border-input", placeholder: "\u8FB9\u6846\u7EBF\u578B", onChange: changeItem('border', 'style'), value: value[getKey('border', 'style')], options: [
-                            {
-                                label: '无',
-                                value: 'none'
-                            },
-                            {
-                                label: '实线',
-                                value: 'solid'
-                            },
-                            {
-                                label: '点线',
-                                value: 'dotted'
-                            },
-                            {
-                                label: '虚线',
-                                value: 'dashed'
-                            }
-                        ] })),
-                React__default["default"].createElement("div", { className: "flex items-center" },
-                    React__default["default"].createElement("label", null, "\u7EBF\u5BBD"),
-                    React__default["default"].createElement(amis.NumberInput, { placeholder: "\u8FB9\u6846\u5BBD\u5EA6", value: value[getKey('border', 'width')], step: 1, min: 0, onChange: changeItem('border', 'width') })),
-                React__default["default"].createElement("div", { className: "flex items-center" },
-                    React__default["default"].createElement("label", null, "\u989C\u8272"),
-                    amis.render({
-                        type: 'input-color',
-                        placeholder: '边框颜色',
-                        clearable: true,
-                        value: value[getKey('border', 'color')],
-                        inputClassName: 'ae-border-colorpicker'
-                    }, {
-                        onChange: changeItem('border', 'color')
-                    })))));
-    }
-    return (React__default["default"].createElement("div", { className: "p-2 ae-border" },
-        !disableBorder && renderBorder(),
-        !disableRadius && renderRadius()));
-}
-mobxReact.observer(BoxBorder);
-/** @class */ ((function (_super) {
-    tslib.__extends(BorderRenderer, _super);
-    function BorderRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BorderRenderer.prototype.render = function () {
-        return React__default["default"].createElement(BoxBorder, tslib.__assign({}, this.props));
-    };
-    BorderRenderer = tslib.__decorate([
-        amis.FormItem({ type: 'style-border', renderLabel: false })
-    ], BorderRenderer);
-    return BorderRenderer;
-})(React__default["default"].Component));

package/lib/renderer/style-control/BoxModel.js

@@ -1,73 +0,0 @@
-/**
- * amis-editor v5.2.0-beta.1
- * Copyright 2018-2022 @fex
- */
-
-'use strict';
-
-var tslib = require('tslib');
-var cx = require('classnames');
-var React = require('react');
-var mobxReact = require('mobx-react');
-var camelCase = require('lodash/camelCase');
-var amis = require('amis');
-var AMisCodeEditor = require('amis-editor-core');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var camelCase__default = /*#__PURE__*/_interopDefaultLegacy(camelCase);
-
-/**
- * @file  BoxModel
- * @description 盒模型控件，支持编辑 margin & padding
- */
-function BoxModel(_a) {
-    var value = _a.value, onChange = _a.onChange;
-    var directions = ['left', 'right', 'top', 'bottom'];
-    function handleChange(styleName) {
-        return function (e) {
-            var _a, _b;
-            var inputValue = e.target.value;
-            if (!inputValue) {
-                onChange(tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[styleName] = undefined, _a)));
-                return;
-            }
-            // 数字类型或带有合法单位的字符串都支持
-            if (AMisCodeEditor.isNumeric(inputValue) ||
-                /^(-?(\d*\.)?\d+)((px)|(em)|(%)|(ex)|(ch)|(rem)|(vw)|(vh)|(vmin)|(vmax)|(cm)|(mm)|(in)|(pt)|(pc))$/.test(inputValue)) {
-                onChange(tslib.__assign(tslib.__assign({}, value), (_b = {}, _b[styleName] = inputValue, _b)));
-            }
-        };
-    }
-    function renderBoxItem(item) {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            directions.map(function (direction) {
-                var propsName = camelCase__default["default"]("".concat(item, "-").concat(direction));
-                return (React__default["default"].createElement("input", { key: propsName, placeholder: "0", className: "ae-BoxModel-input ".concat(direction), type: "text", onChange: handleChange(propsName), value: (value === null || value === void 0 ? void 0 : value[propsName]) || '' }));
-            }),
-            React__default["default"].createElement("div", { className: "ae-BoxModel-title" }, item.toUpperCase()),
-            ['lt', 'lb', 'rt', 'rb'].map(function (position) { return (React__default["default"].createElement("div", { key: position, className: cx__default["default"]('ae-BoxModel-line', position) })); })));
-    }
-    return (React__default["default"].createElement("div", { className: "mx-2 ae-BoxModel" },
-        React__default["default"].createElement("div", { className: "ae-BoxModel-inner" },
-            React__default["default"].createElement("div", { className: "ae-BoxModel" },
-                React__default["default"].createElement("div", { className: "ae-BoxModel-inner" }),
-                renderBoxItem('padding'))),
-        renderBoxItem('margin')));
-}
-mobxReact.observer(BoxModel);
-/** @class */ ((function (_super) {
-    tslib.__extends(BoxModelRenderer, _super);
-    function BoxModelRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BoxModelRenderer.prototype.render = function () {
-        return React__default["default"].createElement(BoxModel, tslib.__assign({}, this.props));
-    };
-    BoxModelRenderer = tslib.__decorate([
-        amis.FormItem({ type: 'style-box-model' })
-    ], BoxModelRenderer);
-    return BoxModelRenderer;
-})(React__default["default"].Component));

package/lib/renderer/style-control/BoxShadow.js

@@ -1,125 +0,0 @@
-/**
- * amis-editor v5.2.0-beta.1
- * Copyright 2018-2022 @fex
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var mapValues = require('lodash/mapValues');
-var amis = require('amis');
-var transformation = require('./transformation.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var mapValues__default = /*#__PURE__*/_interopDefaultLegacy(mapValues);
-
-/**
- * @file 阴影
- * @description 阴影配置
- * @grammar
- * x偏移量 | y偏移量 | 阴影颜色
- * x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色
- * 插页(阴影向内) | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
- */
-function BoxShadow(_a) {
-    var _b = _a.value, value = _b === void 0 ? '' : _b, onChange = _a.onChange;
-    var boxShadowContext = mapValues__default["default"](transformation.parseBoxShadow(typeof value !== 'string' ? '' : value), function (value, key, collection) {
-        return key === 'color' || key === 'inset' ? value : { length: value, unit: 'px' };
-    });
-    // style-box-shadow组件name需要具体指定，比如style.boxShadow，否则取不到值
-    var handleSubmit = function (formValue, action) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(transformation.normalizeBoxShadow(formValue).boxShadow);
-    };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, amis.render({
-        type: 'form',
-        wrapWithPanel: false,
-        panelClassName: 'border-none shadow-none mb-0',
-        bodyClassName: 'p-none',
-        actionsClassName: 'border-none mt-2.5',
-        wrapperComponent: 'div',
-        formLazyChange: true,
-        preventEnterSubmit: true,
-        submitOnChange: true,
-        body: tslib.__spreadArray(tslib.__spreadArray([], [
-            {
-                name: 'X轴偏移量',
-                field: 'x'
-            },
-            {
-                name: 'Y轴偏移量',
-                field: 'y'
-            },
-            {
-                name: '模糊半径',
-                field: 'blur'
-            },
-            {
-                name: '扩散半径',
-                field: 'spread'
-            }
-        ].map(function (item) { return ({
-            type: 'combo',
-            name: item.field,
-            label: item.name,
-            formClassName: 'ae-BoxShadow-group',
-            items: [
-                {
-                    type: 'input-range',
-                    label: false,
-                    name: 'length',
-                    max: 120,
-                    min: 0,
-                    step: 1
-                },
-                {
-                    type: 'select',
-                    label: false,
-                    name: 'unit',
-                    columnClassName: 'ae-BoxShadow-unit',
-                    size: 'xs',
-                    options: ['px']
-                    // TODO: 暂时先支持px
-                    // options: ['px', 'em', 'rem', 'vw', 'vh']
-                }
-            ]
-        }); }), true), [
-            {
-                type: 'switch',
-                name: 'inset',
-                label: '内阴影',
-                mode: 'row',
-                inputClassName: 'inline-flex justify-between flex-row-reverse'
-            },
-            {
-                type: 'input-color',
-                name: 'color',
-                label: '阴影颜色',
-                placeholder: '设置阴影颜色',
-                mode: 'row'
-            }
-        ], false)
-    }, {
-        data: boxShadowContext,
-        onSubmit: handleSubmit
-    })));
-}
-/** @class */ ((function (_super) {
-    tslib.__extends(BoxShadowRenderer, _super);
-    function BoxShadowRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BoxShadowRenderer.prototype.render = function () {
-        return React__default["default"].createElement(BoxShadow, tslib.__assign({}, this.props));
-    };
-    BoxShadowRenderer = tslib.__decorate([
-        amis.FormItem({ type: 'style-box-shadow' })
-    ], BoxShadowRenderer);
-    return BoxShadowRenderer;
-})(React__default["default"].Component));
-
-exports["default"] = BoxShadow;

package/lib/renderer/style-control/Display.js

@@ -1,233 +0,0 @@
-/**
- * amis-editor v5.2.0-beta.1
- * Copyright 2018-2022 @fex
- */
-
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var pick = require('lodash/pick');
-var mapValues = require('lodash/mapValues');
-var amis = require('amis');
-var AMisCodeEditor = require('amis-editor-core');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var pick__default = /*#__PURE__*/_interopDefaultLegacy(pick);
-var mapValues__default = /*#__PURE__*/_interopDefaultLegacy(mapValues);
-
-/**
- * @file Display
- * @description 布局展示相关控件
- */
-var Display = function (props) {
-    var onChange = props.onChange, value = props.value;
-    // 下拉菜单通用渲染
-    var menuTpl = {
-        type: 'html',
-        html: "<span>${label}</span><code class='ae-Code'>${value}</code>",
-        className: 'ae-selection-code'
-    };
-    var displayContext = pick__default["default"](AMisCodeEditor.isObject(value) ? value : {}, [
-        'display',
-        'flexWrap',
-        'flexDirection',
-        'justifyContent',
-        'alignItems'
-    ]);
-    if (!displayContext.display) {
-        displayContext.display = 'default';
-    }
-    var handleSubmit = function (form, action) {
-        var displayValue = form.display === 'flex'
-            ? form
-            : mapValues__default["default"](displayContext, function (value, key) {
-                // 非flex布局/默认布局需要把不相关的参数干掉
-                return key !== 'display' || (key === 'display' && form[key] === 'default')
-                    ? undefined
-                    : form[key];
-            });
-        onChange === null || onChange === void 0 ? void 0 : onChange(tslib.__assign(tslib.__assign({}, value), displayValue));
-    };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, amis.render({
-        type: 'form',
-        wrapWithPanel: false,
-        panelClassName: 'border-none shadow-none mb-0',
-        bodyClassName: 'p-none',
-        actionsClassName: 'border-none mt-2.5',
-        wrapperComponent: 'div',
-        formLazyChange: true,
-        preventEnterSubmit: true,
-        submitOnChange: true,
-        body: [
-            {
-                label: '显示类型',
-                name: 'display',
-                type: 'select',
-                mode: 'row',
-                menuTpl: menuTpl,
-                options: [
-                    {
-                        label: '默认',
-                        value: 'default'
-                    },
-                    {
-                        label: '区块',
-                        icon: 'display-block',
-                        value: 'block'
-                    },
-                    {
-                        label: '行内区块',
-                        icon: 'display-inline-block',
-                        value: 'inline-block'
-                    },
-                    {
-                        label: '行内元素',
-                        icon: 'display-inline',
-                        value: 'inline'
-                    },
-                    {
-                        label: '弹性布局',
-                        icon: 'display-flex',
-                        value: 'flex'
-                    }
-                ]
-            },
-            {
-                type: 'wrapper',
-                visibleOn: "this.display === 'flex'",
-                className: 'ae-Display-group',
-                body: [
-                    {
-                        type: 'tpl',
-                        tpl: '弹性布局配置',
-                        className: 'text-base font-bold mb-1'
-                    },
-                    {
-                        label: '自动换行',
-                        name: 'flexWrap',
-                        type: 'switch',
-                        trueValue: 'wrap',
-                        falseValue: 'nowrap',
-                        mode: 'row',
-                        inputClassName: 'inline-flex justify-between flex-row-reverse',
-                        clearValueOnHidden: true
-                    },
-                    {
-                        label: '主轴方向',
-                        name: 'flexDirection',
-                        type: 'select',
-                        clearValueOnHidden: true,
-                        menuTpl: menuTpl,
-                        options: [
-                            {
-                                label: '默认水平',
-                                value: 'row',
-                                icon: 'drow'
-                            },
-                            {
-                                label: '默认垂直',
-                                value: 'column',
-                                icon: 'dcolumn'
-                            },
-                            {
-                                label: '水平反向',
-                                value: 'row-reverse',
-                                icon: 'drowReverse'
-                            },
-                            {
-                                label: '垂直反向',
-                                value: 'column-reverse',
-                                icon: 'dcolumnReverse'
-                            }
-                        ]
-                    },
-                    {
-                        label: '主轴对齐方式',
-                        type: 'select',
-                        name: 'justifyContent',
-                        clearValueOnHidden: true,
-                        menuTpl: menuTpl,
-                        options: [
-                            {
-                                label: '起始端对齐',
-                                value: 'flex-start'
-                            },
-                            {
-                                label: '居中对齐',
-                                value: 'center'
-                            },
-                            {
-                                label: '末尾端对齐',
-                                value: 'flex-end'
-                            },
-                            {
-                                label: '首尾留空',
-                                value: 'space-around'
-                            },
-                            {
-                                label: '首尾对齐',
-                                value: 'space-between'
-                            },
-                            {
-                                label: '元素等间距',
-                                value: 'space-evenly'
-                            },
-                            {
-                                label: '自动拉伸',
-                                value: 'stretch'
-                            }
-                        ]
-                    },
-                    {
-                        label: '交叉轴对齐方式',
-                        type: 'select',
-                        name: 'alignItems',
-                        clearValueOnHidden: true,
-                        menuTpl: menuTpl,
-                        options: [
-                            {
-                                label: '起始端对齐',
-                                value: 'flex-start'
-                            },
-                            {
-                                label: '居中对齐',
-                                value: 'center'
-                            },
-                            {
-                                label: '末尾端对齐',
-                                value: 'flex-end'
-                            },
-                            {
-                                label: '基线对齐',
-                                value: 'baseline'
-                            },
-                            {
-                                label: '自动拉伸',
-                                value: 'stretch'
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
-    }, {
-        data: displayContext,
-        onSubmit: handleSubmit
-    })));
-};
-/** @class */ ((function (_super) {
-    tslib.__extends(DisplayRenderer, _super);
-    function DisplayRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DisplayRenderer.prototype.render = function () {
-        return React__default["default"].createElement(Display, tslib.__assign({}, this.props));
-    };
-    DisplayRenderer = tslib.__decorate([
-        amis.FormItem({ type: 'style-display' })
-    ], DisplayRenderer);
-    return DisplayRenderer;
-})(React__default["default"].Component));