amis-editor 4.1.0-beta.4 → 5.2.0-beta.1

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

@@ -0,0 +1,191 @@
+/**
+ * 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.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file  BoxModel
+ * @description 盒模型控件，支持编辑 margin & padding
+ */
+import React from 'react';
+import type { FormControlProps } from 'amis-core';
+import type { PlainObject } from './types';
+export declare type Direction = 'left' | 'right' | 'top' | 'bottom';
+declare function BoxModel({ value, onChange }: {
+    value?: PlainObject;
+    onChange: (value: PlainObject) => void;
+}): JSX.Element;
+declare const _default: typeof BoxModel;
+export default _default;
+export declare class BoxModelRenderer extends React.Component<FormControlProps> {
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,73 @@
+/**
+ * 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.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file 阴影
+ * @description 阴影配置
+ * @grammar
+ * x偏移量 | y偏移量 | 阴影颜色
+ * x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色
+ * 插页(阴影向内) | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
+ */
+import React from 'react';
+import type { FormControlProps } from 'amis-core';
+declare function BoxShadow({ value, onChange }: {
+    value?: string;
+    onChange: (value: any) => void;
+}): JSX.Element;
+export default BoxShadow;
+export declare class BoxShadowRenderer extends React.Component<FormControlProps> {
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,125 @@
+/**
+ * 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.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file Display
+ * @description 布局展示相关控件
+ */
+import React from 'react';
+import type { FormControlProps } from 'amis-core';
+import type { PlainObject } from './types';
+export interface DisplayProps extends FormControlProps {
+    value?: PlainObject;
+    onChange: (value: PlainObject) => void;
+}
+export default class DisplayRenderer extends React.Component<FormControlProps> {
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,233 @@
+/**
+ * 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));