amis-editor 5.2.0 → 5.2.1-beta.19

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

@@ -0,0 +1,222 @@
+/**
+ * amis-editor v5.2.1-beta.19
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import cx from 'classnames';
+import React__default, { useState } from 'react';
+import camelCase from 'lodash/camelCase';
+import { observer } from 'mobx-react';
+import { FormItem, NumberInput, Select } from 'amis';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 边框圆角
+ * @description 边框 & 圆角设置
+ */
+var borderItems = [{
+  item: 'left',
+  tip: i18n("a80a25b59908402cf7ee31a07d0e7739"),
+  content: '┣'
+}, {
+  item: 'top',
+  tip: i18n("e0dfa25ebceabddb2180720d36d4c3b6"),
+  content: '┳'
+}, {
+  item: 'right',
+  tip: i18n("57463587977a534f7859eb9d7c536629"),
+  content: '┫'
+}, {
+  item: 'bottom',
+  tip: i18n("154d5216e42c916884431f0eea951999"),
+  content: '┻'
+}, {
+  item: 'all',
+  tip: i18n("a8b0c20416853bda54120bf19477ad11"),
+  content: '╋'
+}];
+var radiusItems = [{
+  item: 'top-left',
+  tip: i18n("df68a5dc8f8847179b7afdf943f80796"),
+  content: '┏'
+}, {
+  item: 'top-right',
+  tip: i18n("e717b4ae480e7c073fd5a44647a7f0da"),
+  content: '┓'
+}, {
+  item: 'bottom-left',
+  tip: i18n("2a97dfb2d236c87c41fd588f006111dc"),
+  content: '┗'
+}, {
+  item: 'bottom-right',
+  tip: i18n("1c9bc9dab33944e953412f8b22cb024a"),
+  content: '┛'
+}, {
+  item: 'all',
+  tip: i18n("a8b0c20416853bda54120bf19477ad11"),
+  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,
+    render = _a.render;
+  var _e = useState('all'),
+    borderItem = _e[0],
+    setBorderItem = _e[1];
+  var _f = 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("".concat(type, "-top-left-").concat(field)) : camelCase("".concat(type, "-left-").concat(field));
+    }
+    return camelCase("".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("".concat(type, "-").concat(item.item, "-").concat(key));
+          newValue_1[itemKey] = val;
+        });
+        onChange(__assign(__assign({}, value), newValue_1));
+      } else {
+        onChange(__assign(__assign({}, value), (_a = {}, _a[field] = val, _a)));
+      }
+    };
+  }
+  function renderRadius() {
+    return React__default.createElement("div", {
+      className: "ae-border-wrap ae-border-radius flex items-center"
+    }, React__default.createElement("div", {
+      className: "ae-border-items"
+    }, radiusItems.map(function (item) {
+      var valueKey = camelCase("border-".concat(item.item));
+      return React__default.createElement("div", {
+        key: valueKey,
+        className: cx("ae-border-item ".concat(item.item), {
+          active: radiusItem === item.item
+        }),
+        onClick: function () {
+          return setRadiusItem(item.item);
+        }
+      }, React__default.createElement("span", {
+        "data-tooltip": item.tip,
+        "data-position": "top"
+      }, item.content));
+    })), React__default.createElement("div", {
+      className: "ae-border-settings"
+    }, React__default.createElement("div", {
+      className: "flex items-center"
+    }, React__default.createElement("label", null, "\u5706\u89D2"), React__default.createElement(NumberInput, {
+      placeholder: "\u5706\u89D2\u5C3A\u5BF8",
+      value: value[getKey('border', 'radius')],
+      step: 1,
+      min: 0,
+      onChange: changeItem('border', 'radius')
+    }))));
+  }
+  function renderBorder() {
+    return React__default.createElement("div", {
+      className: "ae-border-wrap flex flex-top mb-2"
+    }, React__default.createElement("div", {
+      className: "ae-border-items"
+    }, borderItems.map(function (item) {
+      var valueKey = camelCase("border-".concat(item.item));
+      return React__default.createElement("div", {
+        key: valueKey,
+        className: cx("ae-border-item ".concat(item.item), {
+          active: borderItem === item.item
+        }),
+        onClick: function () {
+          return setBorderItem(item.item);
+        }
+      }, React__default.createElement("span", {
+        "data-tooltip": item.tip,
+        "data-position": "top"
+      }, item.content));
+    })), React__default.createElement("div", {
+      className: "ae-border-settings"
+    }, React__default.createElement("div", {
+      className: "flex items-center"
+    }, React__default.createElement("label", null, "\u7EBF\u5F62"), React__default.createElement(Select, {
+      className: "ae-border-input",
+      placeholder: "\u8FB9\u6846\u7EBF\u578B",
+      onChange: changeItem('border', 'style'),
+      value: value[getKey('border', 'style')],
+      options: [{
+        label: i18n("d81bb206a889656035b929cd8bb1ef10"),
+        value: 'none'
+      }, {
+        label: i18n("cc4c575642609fbf059a5df81eb86bfc"),
+        value: 'solid'
+      }, {
+        label: i18n("b1e0ebac23ed95807ecc566da3ffab48"),
+        value: 'dotted'
+      }, {
+        label: i18n("61f6f4fc0b806ac9d41ad0792e6155f6"),
+        value: 'dashed'
+      }]
+    })), React__default.createElement("div", {
+      className: "flex items-center"
+    }, React__default.createElement("label", null, "\u7EBF\u5BBD"), React__default.createElement(NumberInput, {
+      placeholder: "\u8FB9\u6846\u5BBD\u5EA6",
+      value: value[getKey('border', 'width')],
+      step: 1,
+      min: 0,
+      onChange: changeItem('border', 'width')
+    })), React__default.createElement("div", {
+      className: "flex items-center"
+    }, React__default.createElement("label", null, "\u989C\u8272"), render('color', {
+      type: 'input-color',
+      placeholder: i18n("9b4bae5d8251de0b6f00b704936b00d3"),
+      clearable: true,
+      value: value[getKey('border', 'color')],
+      inputClassName: 'ae-border-colorpicker',
+      label: false
+    }, {
+      onChange: changeItem('border', 'color')
+    }))));
+  }
+  return React__default.createElement("div", {
+    className: "p-2 ae-border"
+  }, !disableBorder && renderBorder(), !disableRadius && renderRadius());
+}
+observer(BoxBorder);
+/** @class */(function (_super) {
+  __extends(BorderRenderer, _super);
+  function BorderRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  Object.defineProperty(BorderRenderer.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return React__default.createElement(BoxBorder, __assign({}, this.props));
+    }
+  });
+  BorderRenderer = __decorate([FormItem({
+    type: 'style-border',
+    renderLabel: false
+  })], BorderRenderer);
+  return BorderRenderer;
+})(React__default.Component);

package/esm/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 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/esm/renderer/style-control/BoxModel.js

@@ -0,0 +1,72 @@
+/**
+ * amis-editor v5.2.1-beta.19
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import cx from 'classnames';
+import React__default from 'react';
+import { observer } from 'mobx-react';
+import camelCase from 'lodash/camelCase';
+import { FormItem } from 'amis';
+import { isNumeric } from 'amis-editor-core';
+import { isAuto } from '../../util.js';
+
+/**
+ * @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(__assign(__assign({}, value), (_a = {}, _a[styleName] = undefined, _a)));
+                return;
+            }
+            // 数字类型或带有合法单位的字符串都支持
+            if (isNumeric(inputValue) ||
+                isAuto(inputValue) ||
+                /^(-?(\d*\.)?\d+)((px)|(em)|(%)|(ex)|(ch)|(rem)|(vw)|(vh)|(vmin)|(vmax)|(cm)|(mm)|(in)|(pt)|(pc))$/.test(inputValue)) {
+                onChange(__assign(__assign({}, value), (_b = {}, _b[styleName] = inputValue, _b)));
+            }
+        };
+    }
+    function renderBoxItem(item) {
+        return (React__default.createElement(React__default.Fragment, null,
+            directions.map(function (direction) {
+                var propsName = camelCase("".concat(item, "-").concat(direction));
+                return (React__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.createElement("div", { className: "ae-BoxModel-title" }, item.toUpperCase()),
+            ['lt', 'lb', 'rt', 'rb'].map(function (position) { return (React__default.createElement("div", { key: position, className: cx('ae-BoxModel-line', position) })); })));
+    }
+    return (React__default.createElement("div", { className: "mx-2 ae-BoxModel" },
+        React__default.createElement("div", { className: "ae-BoxModel-inner" },
+            React__default.createElement("div", { className: "ae-BoxModel" },
+                React__default.createElement("div", { className: "ae-BoxModel-inner" }),
+                renderBoxItem('padding'))),
+        renderBoxItem('margin')));
+}
+observer(BoxModel);
+/** @class */ ((function (_super) {
+    __extends(BoxModelRenderer, _super);
+    function BoxModelRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(BoxModelRenderer.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            return React__default.createElement(BoxModel, __assign({}, this.props));
+        }
+    });
+    BoxModelRenderer = __decorate([
+        FormItem({ type: 'style-box-model' })
+    ], BoxModelRenderer);
+    return BoxModelRenderer;
+})(React__default.Component));

package/esm/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, RendererProps } from 'amis-core';
+declare function BoxShadow({ value, onChange, render }: {
+    value?: string;
+    onChange: (value: any) => void;
+} & RendererProps): JSX.Element;
+export default BoxShadow;
+export declare class BoxShadowRenderer extends React.Component<FormControlProps> {
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,119 @@
+/**
+ * amis-editor v5.2.1-beta.19
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __decorate, __spreadArray } from 'tslib';
+import React__default from 'react';
+import mapValues from 'lodash/mapValues';
+import { FormItem } from 'amis';
+import { parseBoxShadow, normalizeBoxShadow } from './transformation.js';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 阴影
+ * @description 阴影配置
+ * @grammar
+ * x偏移量 | y偏移量 | 阴影颜色
+ * x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色
+ * 插页(阴影向内) | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
+ */
+function BoxShadow(_a) {
+  var _b = _a.value,
+    value = _b === void 0 ? '' : _b,
+    onChange = _a.onChange,
+    render = _a.render;
+  var boxShadowContext = mapValues(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(normalizeBoxShadow(formValue).boxShadow);
+  };
+  return React__default.createElement(React__default.Fragment, null, render('inner', {
+    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: __spreadArray(__spreadArray([], [{
+      name: i18n("af208c560d926f0daf4b2ce2d396505d"),
+      field: 'x'
+    }, {
+      name: i18n("b6b46126bfb0851ca10e74541c5d7be1"),
+      field: 'y'
+    }, {
+      name: i18n("4a32b29da68a6ee204b3743e0fab8bb3"),
+      field: 'blur'
+    }, {
+      name: i18n("22d460dcddb7fda718bc62034c459158"),
+      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: i18n("b24a723b73f96ab3340fe9502370ee13"),
+      mode: 'row',
+      inputClassName: 'inline-flex justify-between flex-row-reverse'
+    }, {
+      type: 'input-color',
+      name: 'color',
+      label: i18n("1cbac849ccc41edb12271d9fe9b65b5f"),
+      placeholder: i18n("e94d6fc08a97892ff9d8c8d9a8d9e0ab"),
+      mode: 'row'
+    }], false)
+  }, {
+    data: boxShadowContext,
+    onSubmit: handleSubmit
+  }));
+}
+/** @class */(function (_super) {
+  __extends(BoxShadowRenderer, _super);
+  function BoxShadowRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  Object.defineProperty(BoxShadowRenderer.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return React__default.createElement(BoxShadow, __assign({}, this.props));
+    }
+  });
+  BoxShadowRenderer = __decorate([FormItem({
+    type: 'style-box-shadow'
+  })], BoxShadowRenderer);
+  return BoxShadowRenderer;
+})(React__default.Component);
+
+export { BoxShadow as default };

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

@@ -0,0 +1,189 @@
+/**
+ * amis-editor v5.2.1-beta.19
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React__default from 'react';
+import pick from 'lodash/pick';
+import mapValues from 'lodash/mapValues';
+import { FormItem } from 'amis';
+import { isObject } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file Display
+ * @description 布局展示相关控件
+ */
+var Display = function (props) {
+  var onChange = props.onChange,
+    value = props.value,
+    render = props.render;
+  // 下拉菜单通用渲染
+  var menuTpl = {
+    type: 'html',
+    html: "<span>${label}</span><code class='ae-Code'>${value}</code>",
+    className: 'ae-selection-code'
+  };
+  var displayContext = pick(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(displayContext, function (value, key) {
+      // 非flex布局/默认布局需要把不相关的参数干掉
+      return key !== 'display' || key === 'display' && form[key] === 'default' ? undefined : form[key];
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(__assign(__assign({}, value), displayValue));
+  };
+  return React__default.createElement(React__default.Fragment, null, render('inner', {
+    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: i18n("a5d833839a610994dc4752e2d91f4192"),
+      name: 'display',
+      type: 'select',
+      mode: 'row',
+      menuTpl: menuTpl,
+      options: [{
+        label: i18n("18c63459a2c069022c7790430f761214"),
+        value: 'default'
+      }, {
+        label: i18n("2c86d897c71cc9c2e648222a200d5bbb"),
+        icon: 'display-block',
+        value: 'block'
+      }, {
+        label: i18n("0b0052c532b457b2d032c9f56af9e4e5"),
+        icon: 'display-inline-block',
+        value: 'inline-block'
+      }, {
+        label: i18n("70d457cd36de1acefe7d9587f3f862c9"),
+        icon: 'display-inline',
+        value: 'inline'
+      }, {
+        label: i18n("b5f55e5c7101d9be5218d63850e1ad8b"),
+        icon: 'display-flex',
+        value: 'flex'
+      }]
+    }, {
+      type: 'wrapper',
+      visibleOn: "this.display === 'flex'",
+      className: 'ae-Display-group',
+      body: [{
+        type: 'tpl',
+        tpl: i18n("a648bd0b9eb3c86e39cabeac484917a5"),
+        className: 'text-base font-bold mb-1'
+      }, {
+        label: i18n("452dba7c65211630f8066b070fdf157f"),
+        name: 'flexWrap',
+        type: 'switch',
+        trueValue: 'wrap',
+        falseValue: 'nowrap',
+        mode: 'row',
+        inputClassName: 'inline-flex justify-between flex-row-reverse',
+        clearValueOnHidden: true
+      }, {
+        label: i18n("098d946b6f0cc85110c54cfac8691cc3"),
+        name: 'flexDirection',
+        type: 'select',
+        clearValueOnHidden: true,
+        menuTpl: menuTpl,
+        options: [{
+          label: i18n("aee1aeb8d65547f8a368bd7364cacf12"),
+          value: 'row',
+          icon: 'drow'
+        }, {
+          label: i18n("4c38eb0fea71a9506fd434a7ac5cb1c2"),
+          value: 'column',
+          icon: 'dcolumn'
+        }, {
+          label: i18n("ae07817b441091793c8af39256908373"),
+          value: 'row-reverse',
+          icon: 'drowReverse'
+        }, {
+          label: i18n("618515fd68ecfc4a5b58462f0cb9666b"),
+          value: 'column-reverse',
+          icon: 'dcolumnReverse'
+        }]
+      }, {
+        label: i18n("58554717be87c1f8a6d6c769f74f0679"),
+        type: 'select',
+        name: 'justifyContent',
+        clearValueOnHidden: true,
+        menuTpl: menuTpl,
+        options: [{
+          label: i18n("4ba6c2256050d805ae5cd1e0e84737cf"),
+          value: 'flex-start'
+        }, {
+          label: i18n("56c17ba6a56c01706ae00a31611deb03"),
+          value: 'center'
+        }, {
+          label: i18n("abeb360ab1e66534a041fb8b44e1a00e"),
+          value: 'flex-end'
+        }, {
+          label: i18n("dfc71567fb75f5c73da377013a223168"),
+          value: 'space-around'
+        }, {
+          label: i18n("eb5ec10ef70689996dd5cd66e17a64aa"),
+          value: 'space-between'
+        }, {
+          label: i18n("ba3a7db7cc1ac5a908358f62fdbb21de"),
+          value: 'space-evenly'
+        }, {
+          label: i18n("7ac1519928de413cfe36f5d2e0610430"),
+          value: 'stretch'
+        }]
+      }, {
+        label: i18n("f6cbf29fdb5e94052a22986533c7267f"),
+        type: 'select',
+        name: 'alignItems',
+        clearValueOnHidden: true,
+        menuTpl: menuTpl,
+        options: [{
+          label: i18n("4ba6c2256050d805ae5cd1e0e84737cf"),
+          value: 'flex-start'
+        }, {
+          label: i18n("56c17ba6a56c01706ae00a31611deb03"),
+          value: 'center'
+        }, {
+          label: i18n("abeb360ab1e66534a041fb8b44e1a00e"),
+          value: 'flex-end'
+        }, {
+          label: i18n("ed97c73866617b40a7b1215867e0f489"),
+          value: 'baseline'
+        }, {
+          label: i18n("7ac1519928de413cfe36f5d2e0610430"),
+          value: 'stretch'
+        }]
+      }]
+    }]
+  }, {
+    data: displayContext,
+    onSubmit: handleSubmit
+  }));
+};
+/** @class */(function (_super) {
+  __extends(DisplayRenderer, _super);
+  function DisplayRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  Object.defineProperty(DisplayRenderer.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return React__default.createElement(Display, __assign({}, this.props));
+    }
+  });
+  DisplayRenderer = __decorate([FormItem({
+    type: 'style-display'
+  })], DisplayRenderer);
+  return DisplayRenderer;
+})(React__default.Component);