@fonixtree/magic-design 0.0.162 → 0.0.163

package/es/common/ColorPicker/index.less

@@ -1,5 +1,6 @@
 .m-color-picker-panel {
-  position: absolute;
+  position: fixed;
+  bottom: 5px;
   z-index: 999;
 
   .panel-bg {

package/es/composite-comp/bol/components/Carousel/defaultJSON.js

@@ -18,8 +18,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       open: true,
       type: 'IMAGE',
       content: {
-        h5Name: 'h5Name',
-        pcName: 'pcName',
+        h5Name: 'Image Name',
+        pcName: 'Image Name',
         h5ImgSrc: '',
         pcImgSrc: '',
         clickUrl: ''

package/es/composite-comp/bol/components/Carousel/mobile/index.js

@@ -208,12 +208,13 @@ function (_super) {
         });
       }
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) + 12 + "px";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {

package/es/composite-comp/bol/components/Carousel/mobile/index.less

@@ -85,11 +85,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2em;
+        height: 1em;
         border-radius: 100px;
         opacity: 1;
       }

package/es/composite-comp/bol/components/Carousel/pc/index.js

@@ -205,12 +205,14 @@ function (_super) {
       fontSize: data.setting.navigation.size,
       color: data.setting.navigation.color
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) * 1.25 + 20 + "px";
+    var sliderWidth = "calc(100% - " + (data.setting.navigation.size + 20) * 2 + "px)";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
@@ -225,7 +227,11 @@ function (_super) {
       ref: function ref(slider) {
         return _this.sliderRef = slider;
       }
-    }, settings), data.groupSource.map(function (item) {
+    }, settings, {
+      style: {
+        width: sliderWidth
+      }
+    }), data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "img-wrap"

package/es/composite-comp/bol/components/Carousel/pc/index.less

@@ -18,7 +18,7 @@
   }
 
   .slider-wrap {
-    width: calc(100% - 72px);
+    // width: calc(100% - 72px);
     margin: 0 auto;
     line-height: 1;
 
@@ -101,11 +101,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1.25em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2.5em;
+        height: 1.25em;
         border-radius: 100px;
         opacity: 1;
       }

package/es/composite-comp/bol/components/Text/index.js

@@ -59,11 +59,6 @@ var __decorate = void 0 && (void 0).__decorate || function (decorators, target,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 
-// import './index.less';
-// less to css 在线地址 https://tool.oschina.net/less
-// css 压缩地址 https://www.runoob.com/csspack
-var style = '.m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{padding:10px 20px;}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}';
-
 var Text =
 /** @class */
 function (_super) {
@@ -80,6 +75,8 @@ function (_super) {
         nodeData = _b.nodeData,
         mode = _b.mode,
         outputType = _b.outputType;
+    var groupWrapContainerStyle = window.magicDesign.device === 'pc' ? 'padding: 16px 20px;' : 'padding: 12px 20px;';
+    var style = ".m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{" + groupWrapContainerStyle + "}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-text",
       onClick: this.onComponentClick

package/es/composite-comp/bol/components/Text/index.less

@@ -1,7 +1,7 @@
 .m-text {
   display: flex;
   flex-direction: column;
-  
+
   .title-wrap {
     font-weight: 500;
     font-size: 20px;
@@ -17,7 +17,7 @@
     width: 100%;
 
     .group-wrap-container {
-      padding: 10px 20px;
+      padding: 16px 20px;
     }
 
     .group-wrap {

package/es/composite-comp/bol/config-panels/CarouselConfig/CarouselConfigImageGroup/index.js

@@ -112,7 +112,7 @@ function (_super) {
         src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, (0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc));
+      }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {

package/es/core/Designer/ConfigPanel/index.js

@@ -217,7 +217,7 @@ function (_super) {
     };
 
     _this.getSecondConfigName = function () {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 
       var selectedNode = _this.state.selectedNode;
 
@@ -237,6 +237,7 @@ function (_super) {
       }
 
       var groupName = '';
+      console.log('...', selectedNode.type, panelProps);
 
       switch (selectedNode.type) {
         case 'IMAGE_GALLERY':
@@ -250,11 +251,19 @@ function (_super) {
 
           break;
 
+        case 'CAROUSEL':
+          groupName = (0, _coreUtil.isPc)() ? (_g = (_f = panelProps.image) === null || _f === void 0 ? void 0 : _f.content) === null || _g === void 0 ? void 0 : _g.pcName : (_j = (_h = panelProps.image) === null || _h === void 0 ? void 0 : _h.content) === null || _j === void 0 ? void 0 : _j.h5Name;
+          break;
+
         case 'MOBILE_NAVIGATION':
         case 'PC_NAVIGATION':
           groupName = (panelProps === null || panelProps === void 0 ? void 0 : panelProps.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
           break;
 
+        case 'TEXT':
+          groupName = panelProps.content.title.text;
+          break;
+
         case 'RECOMMEND':
           groupName = panelProps.groupName.text;
           break;

package/es/meta-comp/components/Text/index.js

@@ -481,7 +481,8 @@ function (_super) {
       style = __assign(__assign({}, style), {
         textDecorationLine: data.underline.open ? 'underline' : 'none',
         textDecorationColor: data.underline.textDecorationColor,
-        textDecorationStyle: data.underline.textDecorationStyle
+        textDecorationStyle: data.underline.textDecorationStyle,
+        textUnderlineOffset: Math.ceil(style.fontSize * 0.2) + 'px'
       });
     }
 

package/lib/common/ColorPicker/index.less

@@ -1,5 +1,6 @@
 .m-color-picker-panel {
-  position: absolute;
+  position: fixed;
+  bottom: 5px;
   z-index: 999;
 
   .panel-bg {

package/lib/composite-comp/bol/components/Carousel/defaultJSON.js

@@ -18,8 +18,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       open: true,
       type: 'IMAGE',
       content: {
-        h5Name: 'h5Name',
-        pcName: 'pcName',
+        h5Name: 'Image Name',
+        pcName: 'Image Name',
         h5ImgSrc: '',
         pcImgSrc: '',
         clickUrl: ''

package/lib/composite-comp/bol/components/Carousel/mobile/index.js

@@ -208,12 +208,13 @@ function (_super) {
         });
       }
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) + 12 + "px";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {

package/lib/composite-comp/bol/components/Carousel/mobile/index.less

@@ -85,11 +85,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2em;
+        height: 1em;
         border-radius: 100px;
         opacity: 1;
       }

package/lib/composite-comp/bol/components/Carousel/pc/index.js

@@ -205,12 +205,14 @@ function (_super) {
       fontSize: data.setting.navigation.size,
       color: data.setting.navigation.color
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) * 1.25 + 20 + "px";
+    var sliderWidth = "calc(100% - " + (data.setting.navigation.size + 20) * 2 + "px)";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
@@ -225,7 +227,11 @@ function (_super) {
       ref: function ref(slider) {
         return _this.sliderRef = slider;
       }
-    }, settings), data.groupSource.map(function (item) {
+    }, settings, {
+      style: {
+        width: sliderWidth
+      }
+    }), data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "img-wrap"

package/lib/composite-comp/bol/components/Carousel/pc/index.less

@@ -18,7 +18,7 @@
   }
 
   .slider-wrap {
-    width: calc(100% - 72px);
+    // width: calc(100% - 72px);
     margin: 0 auto;
     line-height: 1;
 
@@ -101,11 +101,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1.25em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2.5em;
+        height: 1.25em;
         border-radius: 100px;
         opacity: 1;
       }

package/lib/composite-comp/bol/components/Text/index.js

@@ -59,11 +59,6 @@ var __decorate = void 0 && (void 0).__decorate || function (decorators, target,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 
-// import './index.less';
-// less to css 在线地址 https://tool.oschina.net/less
-// css 压缩地址 https://www.runoob.com/csspack
-var style = '.m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{padding:10px 20px;}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}';
-
 var Text =
 /** @class */
 function (_super) {
@@ -80,6 +75,8 @@ function (_super) {
         nodeData = _b.nodeData,
         mode = _b.mode,
         outputType = _b.outputType;
+    var groupWrapContainerStyle = window.magicDesign.device === 'pc' ? 'padding: 16px 20px;' : 'padding: 12px 20px;';
+    var style = ".m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{" + groupWrapContainerStyle + "}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-text",
       onClick: this.onComponentClick

package/lib/composite-comp/bol/components/Text/index.less

@@ -1,7 +1,7 @@
 .m-text {
   display: flex;
   flex-direction: column;
-  
+
   .title-wrap {
     font-weight: 500;
     font-size: 20px;
@@ -17,7 +17,7 @@
     width: 100%;
 
     .group-wrap-container {
-      padding: 10px 20px;
+      padding: 16px 20px;
     }
 
     .group-wrap {

package/lib/composite-comp/bol/config-panels/CarouselConfig/CarouselConfigImageGroup/index.js

@@ -112,7 +112,7 @@ function (_super) {
         src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, (0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc));
+      }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/core/Designer/ConfigPanel/index.js

@@ -217,7 +217,7 @@ function (_super) {
     };
 
     _this.getSecondConfigName = function () {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 
       var selectedNode = _this.state.selectedNode;
 
@@ -237,6 +237,7 @@ function (_super) {
       }
 
       var groupName = '';
+      console.log('...', selectedNode.type, panelProps);
 
       switch (selectedNode.type) {
         case 'IMAGE_GALLERY':
@@ -250,11 +251,19 @@ function (_super) {
 
           break;
 
+        case 'CAROUSEL':
+          groupName = (0, _coreUtil.isPc)() ? (_g = (_f = panelProps.image) === null || _f === void 0 ? void 0 : _f.content) === null || _g === void 0 ? void 0 : _g.pcName : (_j = (_h = panelProps.image) === null || _h === void 0 ? void 0 : _h.content) === null || _j === void 0 ? void 0 : _j.h5Name;
+          break;
+
         case 'MOBILE_NAVIGATION':
         case 'PC_NAVIGATION':
           groupName = (panelProps === null || panelProps === void 0 ? void 0 : panelProps.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
           break;
 
+        case 'TEXT':
+          groupName = panelProps.content.title.text;
+          break;
+
         case 'RECOMMEND':
           groupName = panelProps.groupName.text;
           break;

package/lib/meta-comp/components/Text/index.js

@@ -481,7 +481,8 @@ function (_super) {
       style = __assign(__assign({}, style), {
         textDecorationLine: data.underline.open ? 'underline' : 'none',
         textDecorationColor: data.underline.textDecorationColor,
-        textDecorationStyle: data.underline.textDecorationStyle
+        textDecorationStyle: data.underline.textDecorationStyle,
+        textUnderlineOffset: Math.ceil(style.fontSize * 0.2) + 'px'
       });
     }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.162",
+  "version": "0.0.163",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",