amis-editor 5.2.0-beta.2 → 5.2.1-beta.15

package/lib/renderer/event-control/types.d.ts

@@ -17,6 +17,7 @@ export interface ComponentInfo {
     disabled?: boolean;
     actions?: RendererPluginAction[];
     children?: ComponentInfo[];
+    id: string;
 }
 export interface ContextVariables {
     label: string;

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

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.2
+ * amis-editor v5.2.1-beta.15
  * Copyright 2018-2022 @fex
  */
 
@@ -28,45 +28,35 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @file Background.ts
  * @description 背景设置
  */
-
 var Background = function (props) {
   var _a;
-
   var _b = React.useState(0),
-      tabIndex = _b[0],
-      setTabIndex = _b[1];
-
+    tabIndex = _b[0],
+    setTabIndex = _b[1];
   var noImage = props.noImage,
-      render = props.render;
+    render = props.render;
   var tabList = noImage ? ['pure', 'gradient', 'noset'] : ['pure', 'gradient', 'image', 'noset'];
-
   function onChange(key) {
     return function (e) {
       var _a;
-
       var _b, _c, _d;
-
       var eventValue = e !== null && typeof e === 'object' ? typeof e.target === 'object' ? e.target.value : e.value : e;
       var value = props.value,
-          onChange = props.onChange;
-
-      var result = tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[key] = eventValue, _a)); // 透明度
-
-
+        onChange = props.onChange;
+      var result = tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[key] = eventValue, _a));
+      // 透明度
       if (key === 'alpha') {
         result.backgroundColor = (_b = result.backgroundColor) === null || _b === void 0 ? void 0 : _b.replace(/,\s(1|0){1}.?[0-9]*\)$/g, ", ".concat(e / 100, ")"));
-      } // 位置
-
-
+      }
+      // 位置
       if (key === 'backgroundPosition') {
         result.backgroundPosition = e.target.getAttribute('data-pos');
-      } // 背景大小级平铺模式
-
-
+      }
+      // 背景大小级平铺模式
       if (key === 'backgroundSize') {
         var bsValue = eventValue !== null && eventValue !== void 0 ? eventValue : '';
-        var bsArr = bsValue.split(' '); // 0位size 1位平铺方式
-
+        var bsArr = bsValue.split(' ');
+        // 0位size 1位平铺方式
         if (bsArr.length > 1) {
           result.backgroundSize = bsArr[0];
           result.backgroundRepeat = bsArr[1];
@@ -74,40 +64,35 @@ var Background = function (props) {
           result.backgroundSize = bsValue;
           result.backgroundRepeat = 'no-repeat';
         }
-      } // 渐变色角度
-
-
+      }
+      // 渐变色角度
       if (key === 'angle') {
         var backgroundImage = (_c = result.backgroundImage) !== null && _c !== void 0 ? _c : '';
         var lineraGradient = backgroundImage.indexOf('linear-gradient') !== -1 ? backgroundImage : 'linear-gradient(180deg, transparent, transparent)';
         result.backgroundImage = lineraGradient.replace(/linear-gradient\(\d{1,3}/g, "linear-gradient(".concat(eventValue));
-      } // 渐变色
-
-
+      }
+      // 渐变色
       if (key === 'gradientPrev' || key === 'gradientNext') {
         var backgroundImage = (_d = result.backgroundImage) !== null && _d !== void 0 ? _d : '';
         var lineraGradient = backgroundImage.indexOf('linear-gradient') !== -1 ? backgroundImage : 'linear-gradient(180deg, transparent, transparent)';
         var tempArr = lineraGradient.split(', ');
-        var len = tempArr.length; // 前景色
-
+        var len = tempArr.length;
+        // 前景色
         if (key === 'gradientPrev') {
           if (len === 3) {
             tempArr[1] = eventValue;
           } else if (len === 5 || len === 6) {
             var startPos = 0;
             var endPos = 0;
-
             for (var i = 0; i < len; i++) {
               if (tempArr[i].indexOf('rgb') !== -1) {
                 startPos = i;
               }
-
               if (tempArr[i].indexOf(')') !== -1 && endPos === 0) {
                 endPos = i;
               }
-            } // 后景色是rgb或rgba
-
-
+            }
+            // 后景色是rgb或rgba
             if (endPos === len - 1) {
               tempArr.splice(1, 1, eventValue);
             } else {
@@ -117,34 +102,29 @@ var Background = function (props) {
             // 前景色和后景色都是rgb
             for (var i = 0; i < len; i++) {
               var pos = tempArr[i].indexOf(')');
-
               if (pos !== -1) {
                 tempArr.splice(1, i, eventValue);
                 break;
               }
             }
           }
-        } // 后景色
-
-
+        }
+        // 后景色
         if (key === 'gradientNext') {
           if (len === 3) {
             tempArr[2] = eventValue + ')';
           } else if (len === 5 || len === 6) {
             var startPos = 0;
             var endPos = 0;
-
             for (var i = 0; i < len; i++) {
               if (tempArr[i].indexOf('rgb') !== -1) {
                 startPos = i;
               }
-
               if (tempArr[i].indexOf(')') !== -1 && endPos === 0) {
                 endPos = i;
               }
-            } // 后景色是rgb或rgba
-
-
+            }
+            // 后景色是rgb或rgba
             if (endPos === len - 1) {
               tempArr.splice(startPos, endPos + 1, eventValue + ')');
             } else {
@@ -153,13 +133,10 @@ var Background = function (props) {
           } else if (len >= 7) {
             // 前景色和后景色都是rgb
             var flag = 0;
-
             for (var i = 0; i < len; i++) {
               var pos = tempArr[i].indexOf('rgb');
-
               if (pos !== -1) {
                 flag++;
-
                 if (flag === 2) {
                   tempArr.splice(i, len - i + 1, eventValue);
                   break;
@@ -168,16 +145,13 @@ var Background = function (props) {
             }
           }
         }
-
         result.backgroundImage = tempArr.join(', ');
         result = pick__default["default"](result, 'backgroundImage');
-      } // 删除无用属性
-
-
+      }
+      // 删除无用属性
       if (key === 'alpha' || key === 'backgroundColor') {
         result = pick__default["default"](result, 'backgroundColor');
       }
-
       if (key === 'backgroundImage' || key === 'backgroundPosition' || key === 'backgroundSize') {
         if (/linear-gradient/g.test(result === null || result === void 0 ? void 0 : result.backgroundImage)) {
           result = pick__default["default"](result, 'backgroundPosition', 'backgroundSize', 'backgroundRepeat');
@@ -185,23 +159,18 @@ var Background = function (props) {
           result = pick__default["default"](result, 'backgroundImage', 'backgroundPosition', 'backgroundSize', 'backgroundRepeat');
         }
       }
-
       onChange(tslib.__assign(tslib.__assign({}, omit__default["default"](value, ['backgroundColor', 'backgroundImage', 'backgroundPosition', 'backgroundSize', 'backgroundRepeat', 'angle', 'gradientNext', 'gradientPrev'])), result));
     };
-  } // 获取渐变颜色
-
-
+  }
+  // 获取渐变颜色
   function getGradient(type) {
     var _a;
-
     var linearGradient = (_a = props.value) === null || _a === void 0 ? void 0 : _a.backgroundImage;
     var prevColor = '';
     var nextColor = '';
-
     if (/linear-gradient/g.test(linearGradient)) {
       var tempArr = linearGradient.split(', ');
       var len = tempArr.length;
-
       if (len === 3) {
         // 非rgb颜色
         prevColor = tempArr[1];
@@ -210,15 +179,12 @@ var Background = function (props) {
         // rgb或rgba颜色
         var startPos = 0;
         var endPos = 0;
-
         for (var i = 0; i < len; i++) {
           if (tempArr[i].indexOf('rgb') !== -1) {
             startPos = i;
           }
-
           if (tempArr[i].indexOf(')') !== -1 && endPos === 0) {
             endPos = i;
-
             if (i !== len - 1) {
               prevColor = tempArr.slice(startPos, i + 1).join(', ');
               nextColor = tempArr.slice(i + 1).join('').slice(0, -1);
@@ -234,7 +200,6 @@ var Background = function (props) {
         var prevEndPos = 0;
         var nextStartPos = 0;
         var nextEndPos = 0;
-
         for (var i = 0; i < len; i++) {
           if (tempArr[i].indexOf('rgb') !== -1) {
             if (prevStartPos === 0) {
@@ -243,7 +208,6 @@ var Background = function (props) {
               nextStartPos = i;
             }
           }
-
           if (tempArr[i].indexOf(')') !== -1) {
             if (prevEndPos === 0) {
               prevEndPos = i;
@@ -252,42 +216,31 @@ var Background = function (props) {
             }
           }
         }
-
         prevColor = tempArr.slice(prevStartPos, prevEndPos + 1).join(', ');
         nextColor = tempArr.slice(nextStartPos, nextEndPos).join(', ');
       }
-
       linearGradient.split('');
     }
-
     var returnColor = type === 'prev' ? prevColor : nextColor;
-
     if (returnColor === 'transparent') {
       return '';
     }
-
     return returnColor;
-  } // 获取渐变角度
-
-
+  }
+  // 获取渐变角度
   function getGradientAngle() {
     var _a;
-
     var linearGradient = (_a = props.value) === null || _a === void 0 ? void 0 : _a.backgroundImage;
     var angle = 180;
     var match = /linear-gradient\((\d{1,3})/.exec(String(linearGradient || ''));
-
     if (match) {
       angle = +match[1];
     }
-
     return +angle;
-  } // 背景颜色透明度
-
-
+  }
+  // 获取激活的tab
   function setActiveTab() {
     var value = props.value;
-
     if ((value === null || value === void 0 ? void 0 : value.backgroundColor) || (value === null || value === void 0 ? void 0 : value.alpha)) {
       // 背景色
       setTabIndex(0);
@@ -306,65 +259,61 @@ var Background = function (props) {
       // 无背景
       setTabIndex(tabList.length - 1);
     }
-  } // 上传图片
-
-
+  }
+  // 背景图尺寸设置
   function getbsValue() {
     var _a, _b;
-
     var backgroundSize = (_a = props.value) === null || _a === void 0 ? void 0 : _a.backgroundSize;
     var backgroundRepeat = (_b = props.value) === null || _b === void 0 ? void 0 : _b.backgroundRepeat;
     var returnVal = backgroundSize || '';
-
     if (backgroundSize === 'auto' && backgroundRepeat) {
       returnVal = backgroundSize + ' ' + backgroundRepeat;
     }
-
     return returnVal;
-  } // 背景图路径设置
-
-
+  }
+  // 背景图路径设置
   function getbgValue() {
     var _a, _b;
-
     var backgroundImage = (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.backgroundImage;
     return /linear-gradient/g.test(backgroundImage) ? '' : backgroundImage;
-  } // 清空背景颜色、渐变色、背景图
-
-
+  }
+  // 清空背景颜色、渐变色、背景图
   function clearValues() {
     var value = props.value,
-        onChange = props.onChange;
-
+      onChange = props.onChange;
     var result = tslib.__assign(tslib.__assign({}, value), {
       backgroundSize: '',
       backgroundPosition: '',
       backgroundColor: '',
       backgroundImage: ''
     });
-
     onChange(result);
   }
-
   function tabChange(index, item) {
     if (item === 'noset') {
       clearValues();
     }
-
     setTabIndex(index);
   }
-
   function handleChange(key, keyValue) {
-    var _a;
-
+    var _a, _b;
     var value = props.value,
-        onChange = props.onChange;
-
-    var result = tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[key] = keyValue, _a));
-
+      onChange = props.onChange;
+    var result = {};
+    if (key === 'backgroundColor') {
+      result = tslib.__assign(tslib.__assign({}, omit__default["default"](value, ['backgroundImage', 'backgroundPosition', 'backgroundSize', 'backgroundRepeat', 'angle'])), (_a = {}, _a[key] = keyValue, _a));
+    } else if (key === 'angle') {
+      keyValue = keyValue || 0;
+      var linearGradient = value === null || value === void 0 ? void 0 : value.backgroundImage;
+      var backgroundImage = linearGradient === null || linearGradient === void 0 ? void 0 : linearGradient.replace(/(\d{1,})?deg/, "".concat(keyValue, "deg"));
+      result = tslib.__assign(tslib.__assign({}, value), {
+        backgroundImage: backgroundImage
+      });
+    } else {
+      result = tslib.__assign(tslib.__assign({}, value), (_b = {}, _b[key] = keyValue, _b));
+    }
     onChange(result);
   }
-
   var currentItem = tabList[tabIndex];
   React.useEffect(function () {
     setActiveTab();
@@ -476,7 +425,6 @@ var Background = function (props) {
           className: "ae-Background_setting\u2014pos"
         }, ['0 0', '50% 0', '100% 0', '0 50%', '50% 50%', '100% 50%', '0 100%', '50% 100%', '100% 100%'].map(function (item) {
           var _a;
-
           return React__default["default"].createElement("li", {
             key: item,
             "data-pos": item,
@@ -525,19 +473,19 @@ var Background = function (props) {
     className: "ae-Background_setting noset"
   }))));
 };
-
-/** @class */
-(function (_super) {
+/** @class */(function (_super) {
   tslib.__extends(BackgroundRenderer, _super);
-
   function BackgroundRenderer() {
     return _super !== null && _super.apply(this, arguments) || this;
   }
-
-  BackgroundRenderer.prototype.render = function () {
-    return React__default["default"].createElement(Background, tslib.__assign({}, this.props));
-  };
-
+  Object.defineProperty(BackgroundRenderer.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return React__default["default"].createElement(Background, tslib.__assign({}, this.props));
+    }
+  });
   BackgroundRenderer = tslib.__decorate([amis.FormItem({
     type: 'style-background'
   })], BackgroundRenderer);

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

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.2
+ * amis-editor v5.2.1-beta.15
  * Copyright 2018-2022 @fex
  */
 
@@ -65,47 +65,39 @@ var radiusItems = [{
   tip: i18nRuntime.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;
-
+    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 = React.useState('all'),
-      borderItem = _e[0],
-      setBorderItem = _e[1];
-
+    borderItem = _e[0],
+    setBorderItem = _e[1];
   var _f = React.useState('all'),
-      radiusItem = _f[0],
-      setRadiusItem = _f[1];
-
+    radiusItem = _f[0],
+    setRadiusItem = _f[1];
   function getKey(type, field) {
-    var activeItem = field === 'radius' ? radiusItem : borderItem; // TODO: 获取全部的时候应该判断是否所有值都相等，不相等的话返回空或者返回组合提示？
-
+    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 newValue_1 = {};
+        // 过滤掉all
         var items = (isRadius ? radiusItems : borderItems).filter(function (position) {
           return (position === null || position === void 0 ? void 0 : position.item) !== 'all';
         });
@@ -119,7 +111,6 @@ function BoxBorder(_a) {
       }
     };
   }
-
   function renderRadius() {
     return React__default["default"].createElement("div", {
       className: "ae-border-wrap ae-border-radius flex items-center"
@@ -151,7 +142,6 @@ function BoxBorder(_a) {
       onChange: changeItem('border', 'radius')
     }))));
   }
-
   function renderBorder() {
     return React__default["default"].createElement("div", {
       className: "ae-border-wrap flex flex-top mb-2"
@@ -208,31 +198,30 @@ function BoxBorder(_a) {
       placeholder: i18nRuntime.i18n("9b4bae5d8251de0b6f00b704936b00d3"),
       clearable: true,
       value: value[getKey('border', 'color')],
-      inputClassName: 'ae-border-colorpicker'
+      inputClassName: 'ae-border-colorpicker',
+      label: false
     }, {
       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) {
+/** @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));
-  };
-
+  Object.defineProperty(BorderRenderer.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return React__default["default"].createElement(BoxBorder, tslib.__assign({}, this.props));
+    }
+  });
   BorderRenderer = tslib.__decorate([amis.FormItem({
     type: 'style-border',
     renderLabel: false

package/lib/renderer/style-control/BoxModel.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import type { FormControlProps } from 'amis-core';
 import type { PlainObject } from './types';
-export declare type Direction = 'left' | 'right' | 'top' | 'bottom';
+export type Direction = 'left' | 'right' | 'top' | 'bottom';
 declare function BoxModel({ value, onChange }: {
     value?: PlainObject;
     onChange: (value: PlainObject) => void;

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

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.2
+ * amis-editor v5.2.1-beta.15
  * Copyright 2018-2022 @fex
  */
 
@@ -12,6 +12,7 @@ var mobxReact = require('mobx-react');
 var camelCase = require('lodash/camelCase');
 var amis = require('amis');
 var amisEditorCore = require('amis-editor-core');
+var util = require('../../util.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -36,6 +37,7 @@ function BoxModel(_a) {
             }
             // 数字类型或带有合法单位的字符串都支持
             if (amisEditorCore.isNumeric(inputValue) ||
+                util.isAuto(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)));
             }
@@ -63,9 +65,14 @@ mobxReact.observer(BoxModel);
     function BoxModelRenderer() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    BoxModelRenderer.prototype.render = function () {
-        return React__default["default"].createElement(BoxModel, tslib.__assign({}, this.props));
-    };
+    Object.defineProperty(BoxModelRenderer.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            return React__default["default"].createElement(BoxModel, tslib.__assign({}, this.props));
+        }
+    });
     BoxModelRenderer = tslib.__decorate([
         amis.FormItem({ type: 'style-box-model' })
     ], BoxModelRenderer);

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

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.2
+ * amis-editor v5.2.1-beta.15
  * Copyright 2018-2022 @fex
  */
 
@@ -27,23 +27,21 @@ var mapValues__default = /*#__PURE__*/_interopDefaultLegacy(mapValues);
  * x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色
  * 插页(阴影向内) | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
  */
-
 function BoxShadow(_a) {
   var _b = _a.value,
-      value = _b === void 0 ? '' : _b,
-      onChange = _a.onChange,
-      render = _a.render;
+    value = _b === void 0 ? '' : _b,
+    onChange = _a.onChange,
+    render = _a.render;
   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，否则取不到值
-
+  });
+  // 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, render('inner', {
     type: 'form',
     wrapWithPanel: false,
@@ -85,9 +83,9 @@ function BoxShadow(_a) {
           name: 'unit',
           columnClassName: 'ae-BoxShadow-unit',
           size: 'xs',
-          options: ['px'] // TODO: 暂时先支持px
+          options: ['px']
+          // TODO: 暂时先支持px
           // options: ['px', 'em', 'rem', 'vw', 'vh']
-
         }]
       };
     }), true), [{
@@ -108,19 +106,19 @@ function BoxShadow(_a) {
     onSubmit: handleSubmit
   }));
 }
-
-/** @class */
-(function (_super) {
+/** @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));
-  };
-
+  Object.defineProperty(BoxShadowRenderer.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return React__default["default"].createElement(BoxShadow, tslib.__assign({}, this.props));
+    }
+  });
   BoxShadowRenderer = tslib.__decorate([amis.FormItem({
     type: 'style-box-shadow'
   })], BoxShadowRenderer);