@fonixtree/magic-design 0.0.6 → 0.0.9

package/src/components/composite-comp/bol/components/Text/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-text__Eyu8p {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.index_m-text__Eyu8p .index_title-wrap__4KbfX {\n  font-weight: 500;\n  font-size: 20px;\n}\n.index_m-text__Eyu8p .index_sub-title__2WkcU {\n  font-size: 15px;\n  color: #b7b7b7;\n  margin-top: 10px;\n}\n.index_m-text__Eyu8p .index_group-content-wrap__hVP2M {\n  width: 100%;\n}\n.index_m-text__Eyu8p .index_group-content-wrap__hVP2M .index_group-wrap-container__mGnzp {\n  padding: 20px;\n}\n.index_m-text__Eyu8p .index_group-content-wrap__hVP2M .index_group-wrap__Iyot- {\n  display: flex;\n  flex-direction: column;\n  margin-top: 20px;\n  width: 100%;\n}\n.index_m-text__Eyu8p .index_group-content-wrap__hVP2M .index_group-wrap__Iyot- .index_group-title__lmpDR {\n  font-size: 14px;\n}\n.index_m-text__Eyu8p .index_group-content-wrap__hVP2M.index_col-1__ZZ9nC .index_group-wrap__Iyot- {\n  width: 100%;\n}\n.index_m-text__Eyu8p .index_group-content-wrap__hVP2M.index_col-2__FaGmd {\n  display: grid;\n  grid-template-columns: 50% 50%;\n}\n.index_m-text__Eyu8p .index_group-content-wrap__hVP2M.index_col-3__alo2- {\n  display: grid;\n  grid-template-columns: 33.3% 33.3% 33.3%;\n}\n.index_m-text__Eyu8p .index_group-content-wrap__hVP2M.index_mobile__JOQKx {\n  display: block;\n}\n";
+styleInject(css_248z);

package/src/components/composite-comp/bol/config-panels/BannerConfig/BannerConfigGroup/index.js

@@ -0,0 +1,73 @@
+import { __extends, __decorate } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { inject, observer } from '../../../../../../../node_modules/mobx-react/dist/mobxreact.esm.js';
+import GroupList from '../../../../../common/GroupList/index.js';
+import { bannerGroupSourceJSON } from '../../../components/Banner/defaultJSON.js';
+import { renderPreview } from '../../../../../utils/coreUtil.js';
+import Button from '../../../../../common/Button/index.js';
+import './index.less.js';
+
+var notice = 'For best results, use an image at least 1920px wide';
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.onClickItem = function (node) {
+      _this.props.store.setState({
+        clickedGroup: node.id
+      });
+    };
+
+    _this.onAddClick = function () {
+      var json = bannerGroupSourceJSON();
+
+      _this.props.source.push(json);
+
+      _this.setState({});
+
+      renderPreview();
+    };
+
+    _this.reRender = function () {
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  AComponent.prototype.render = function () {
+    var source = this.props.source;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "banner_group"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "node_list"
+    }, source.length === 0 ? /*#__PURE__*/React__default.createElement("span", {
+      className: "notice"
+    }, notice) : /*#__PURE__*/React__default.createElement(GroupList, {
+      onClickItem: this.onClickItem,
+      reRender: this.reRender,
+      source: source
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "btn_wrap"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      icon: "icon-add",
+      onClick: this.onAddClick,
+      type: "primary"
+    }, "Add Banner")));
+  };
+
+  AComponent.defaultProps = {
+    source: []
+  };
+  AComponent = __decorate([inject('store'), observer], AComponent);
+  return AComponent;
+}(React__default.Component);
+
+export { AComponent as default };

package/src/components/composite-comp/bol/config-panels/BannerConfig/BannerConfigGroup/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_banner_group__l-1p- {\n  margin-bottom: 20px;\n}\n.index_banner_group__l-1p- .index_node_list__qpqzh {\n  margin-bottom: 12px;\n}\n.index_banner_group__l-1p- .index_node_list__qpqzh .index_notice__9HDjC {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  color: #232F46;\n}\n";
+styleInject(css_248z);

package/src/components/composite-comp/bol/config-panels/BannerConfig/BannerConfigSetting/index.js

@@ -0,0 +1,200 @@
+import { __extends } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import '../../../../../common/LayoutSelector/index.js';
+import Field from '../../../../../common/Field/index.js';
+import '../../../../../common/UrlPicker/index.js';
+import '../../../../../common/Iconfont/index.js';
+import '../../../../../common/Button/index.js';
+import '../../../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../../../common/Collapse/index.js';
+import '../../../../../common/ColorPickerInput/index.js';
+import '../../../../../common/ImagePicker/index.js';
+import '../../../../../common/IconPicker/index.js';
+import '../../../../../common/SwitchCollapse/index.js';
+import SliderInput from '../../../../../common/Slider/index.js';
+import '../../../../../common/FontStyles/index.js';
+import '../../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../../node_modules/axios/index.js';
+import '../../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../../common/ProductModal/index.js';
+import '../../../../../common/ProductSource/index.less.js';
+import './index.less.js';
+import { isPc, renderPreview } from '../../../../../utils/coreUtil.js';
+import NewInputNumber from '../../../../../common/InputNumber/index.js';
+
+var BannerConfigSetting =
+/** @class */
+function (_super) {
+  __extends(BannerConfigSetting, _super);
+
+  function BannerConfigSetting() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.reRender = function () {
+      renderPreview();
+
+      _this.setState({});
+    };
+
+    _this.onChangeHeight = function (v) {
+      var setting = _this.props.setting;
+
+      if (isPc()) {
+        setting.pcHeight = v;
+      } else {
+        setting.mobileHeight = v;
+      }
+
+      _this.reRender();
+    };
+
+    return _this;
+  }
+
+  BannerConfigSetting.prototype.render = function () {
+    var _this = this;
+
+    var setting = this.props.setting;
+    var autoplaySetting = /*#__PURE__*/React__default.createElement(Field, {
+      title: "How long between slides (secs)"
+    }, /*#__PURE__*/React__default.createElement(SliderInput, {
+      maxVal: 60,
+      minVal: 1,
+      onChange: function (value) {
+        setting.autoplay.interval = value.count;
+
+        _this.reRender();
+      },
+      unit: "s",
+      value: {
+        count: setting.autoplay.interval
+      }
+    }));
+    var navigationSetting = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+      title: "Navigation arrow"
+    }, /*#__PURE__*/React__default.createElement(SliderInput, {
+      needColor: true,
+      onChange: function (value) {
+        setting.navigation.size = value.count;
+        setting.navigation.color = value.color;
+
+        _this.reRender();
+      },
+      unit: "px",
+      value: {
+        count: setting.navigation.size,
+        color: setting.navigation.color
+      }
+    })), /*#__PURE__*/React__default.createElement(Field, {
+      title: "Selected arrow"
+    }, /*#__PURE__*/React__default.createElement(SliderInput, {
+      needColor: true,
+      onChange: function (value) {
+        setting.navigation.hoverSize = value.count;
+        setting.navigation.hoverColor = value.color;
+
+        _this.reRender();
+      },
+      unit: "px",
+      value: {
+        count: setting.navigation.hoverSize,
+        color: setting.navigation.hoverColor
+      }
+    })));
+    var dotsSetting = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+      title: "Slide button"
+    }, /*#__PURE__*/React__default.createElement(SliderInput, {
+      needColor: true,
+      onChange: function (value) {
+        setting.dots.size = value.count;
+        setting.dots.color = value.color;
+
+        _this.reRender();
+      },
+      unit: "px",
+      value: {
+        count: setting.dots.size,
+        color: setting.dots.color
+      }
+    })), /*#__PURE__*/React__default.createElement(Field, {
+      title: "Selected button"
+    }, /*#__PURE__*/React__default.createElement(SliderInput, {
+      needColor: true,
+      onChange: function (value) {
+        setting.dots.hoverSize = value.count;
+        setting.dots.hoverColor = value.color;
+
+        _this.reRender();
+      },
+      unit: "px",
+      value: {
+        count: setting.dots.hoverSize,
+        color: setting.dots.hoverColor
+      }
+    })));
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "banner_setting"
+    }, /*#__PURE__*/React__default.createElement(Field, {
+      layout: "horizontal",
+      title: "Banner Height"
+    }, /*#__PURE__*/React__default.createElement(NewInputNumber, {
+      max: 1000,
+      onChange: function (v) {
+        return _this.onChangeHeight(v);
+      },
+      unit: "px",
+      value: setting[isPc() ? 'pcHeight' : 'mobileHeight']
+    })), /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      divider: "dashed",
+      onRefresh: this.reRender,
+      source: [{
+        key: '1',
+        name: 'Autoplays',
+        value: autoplaySetting,
+        metaOption: setting.autoplay,
+        toggleType: 'switch'
+      }, {
+        key: '2',
+        name: 'Show navigation arrow',
+        value: navigationSetting,
+        metaOption: setting.navigation,
+        toggleType: 'switch'
+      }, {
+        key: '3',
+        name: 'Show slide button',
+        value: dotsSetting,
+        metaOption: setting.dots,
+        toggleType: 'switch'
+      }]
+    }));
+  };
+
+  BannerConfigSetting.defaultProps = {
+    setting: {
+      pcHeight: 360,
+      mobileHeight: 386,
+      autoplay: {
+        open: false,
+        interval: 4
+      },
+      navigation: {
+        open: false,
+        size: 16,
+        color: '#384966',
+        hoverSize: 16,
+        hoverColor: '#384966'
+      },
+      dots: {
+        open: false,
+        size: 16,
+        color: '#fff',
+        hoverSize: 16,
+        hoverColor: '#fff'
+      }
+    }
+  };
+  return BannerConfigSetting;
+}(React__default.Component);
+
+export { BannerConfigSetting as default };

package/src/components/composite-comp/bol/config-panels/BannerConfig/BannerConfigSetting/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_banner_setting__fT3ak .index_collapse_wrap__uha-O .index_header_wrap__J-RLa {\n  font-weight: 600 !important;\n}\n";
+styleInject(css_248z);

package/src/components/composite-comp/bol/config-panels/BannerConfig/index.js

@@ -0,0 +1,35 @@
+import React__default from 'react';
+import AComponent from './BannerConfigGroup/index.js';
+import BannerConfigSetting from './BannerConfigSetting/index.js';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import SpacingConfig from '../../../common/config-panels/SpacingConfig/index.js';
+
+function BannerConfig(props) {
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+    divider: "bold",
+    headerSize: "large",
+    source: [{
+      key: 'bannerGroup',
+      name: 'Group',
+      value: /*#__PURE__*/React__default.createElement(AComponent, {
+        source: data.groupSource
+      })
+    }, {
+      key: 'bannerSetting',
+      name: 'Setting',
+      value: /*#__PURE__*/React__default.createElement(BannerConfigSetting, {
+        setting: data.setting
+      })
+    }, {
+      key: 'Spacing',
+      name: 'Spacing',
+      value: /*#__PURE__*/React__default.createElement(SpacingConfig, {
+        data: data.spacing
+      })
+    }],
+    type: "triangle"
+  }));
+}
+
+export { BannerConfig as default };

package/src/components/composite-comp/bol/config-panels/ButtonCompConfig/ButtonConfigContent/index.js

@@ -0,0 +1,79 @@
+import { __extends } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import ButtonConfig from '../../../../../meta-comp/config-panels/ButtonConfig/index.js';
+import { renderPreview } from '../../../../../utils/coreUtil.js';
+import '../../../../../common/LayoutSelector/index.js';
+import '../../../../../common/Field/index.js';
+import '../../../../../common/UrlPicker/index.js';
+import '../../../../../common/Iconfont/index.js';
+import '../../../../../common/Button/index.js';
+import '../../../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../../../common/Collapse/index.js';
+import '../../../../../common/ColorPickerInput/index.js';
+import '../../../../../common/ImagePicker/index.js';
+import '../../../../../common/IconPicker/index.js';
+import '../../../../../common/SwitchCollapse/index.js';
+import '../../../../../common/Slider/index.js';
+import '../../../../../common/FontStyles/index.js';
+import '../../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../../node_modules/axios/index.js';
+import '../../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../../common/ProductModal/index.js';
+import '../../../../../common/ProductSource/index.less.js';
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.reRender = function () {
+      renderPreview();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  AComponent.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "recommend_content"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      headerSize: "middle",
+      onRefresh: this.reRender,
+      source: [{
+        key: '1',
+        name: 'Button',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: panelProps.button
+        }),
+        metaOption: panelProps.button
+      }, {
+        key: '2',
+        name: 'Secondary Button',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: panelProps.secondaryButton
+        }),
+        metaOption: panelProps.secondaryButton
+      }],
+      type: "switch"
+    }));
+  };
+
+  AComponent.defaultProps = {
+    panelProps: {
+      button: {},
+      secondaryButton: {}
+    }
+  };
+  return AComponent;
+}(React__default.Component);
+
+export { AComponent as default };

package/src/components/composite-comp/bol/config-panels/ButtonCompConfig/imgs/layout1.png.js

@@ -0,0 +1,3 @@
+var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAACECAYAAAAqYEFrAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAS5SURBVHgB7d1dbhtVFMDxc8cejz9KsRvUghQkJyygUXmnqGwgYgNdAogFUFgBdAftErqBEjYAYQPYUp/aSBmriu34ay73unFE3XxaqNTn/H9PY8fuw+jfkztzR4qTK8pz3yyl/d20lN4vvN/xvmg755oCvGfe+55zSTcc7CeJ7B0fV5+1Wq53le+6yz6Q58N2mvrvwycfEjg+WF6ejMfyc6tV6170sXODjxM9y0aPvITYgTXhxP9Sr9d/OP/nZ4hTvZLJb+GwLcD66YxH8uCsaZ8sv5HnRzvEjjW3FRp+fnQ03ln+wVsTnskOZd6Z9KfBxzV7JTv+U4gduoToq/cWd3FOlzTxAlWIHfpsZdnwx8WL+YQ/Wcp0BNDJh6XNdlzazCd8mhY/CaCXC3tJ380P8jwPa/dqLoBqLh+Psu0kTdNdAdR782hMWNK4rwXQz5VKpa8Sce6uABYUfqfsFN+KnE5n8uqwL6PJTIrCCy7WqKWy0axLWi6JSi5pu/5gqLKEGPuLl68J/ZqSxMnmnZtao/eJKHXQGxD7CuI5OzgciFZqgx8MJ4LVjCZT0Upt8Fid5t+MBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DCF4GEKwcMUgocpBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxS1wSfOCbBMbfBZpSxYTaNWEa3UBn/7VoMpv4J4zjaaddHK9QdDtX9nfDot5KA3kMFwLLhYDL1SKYVBcUPSsto56FUHDyzx3KWBKQQPUwgephA8TCF4mELwMIXgYYrq/ffpdCavDvsymsykKNhuuEyjls53WdNySbRSu/EUY3/x8jWhX1OSONm8c1Nr9Ho3nuIjBcR+ffGcHRwORCu1wQ+GE8FqRpOpaMVFK96h+TcjwcMUgocpBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DCF4GEKwcMUgocpBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMEVt8IlzAixTG3xWKQtW06hVRCu1wd++1WDKryCes41mXbRKxPueKFQuJ/L5px9LXfG0+i/F0KtZWTbDOUvLaudgr+xFumEO7ohCMfrPPrkhwJz33fBf2f8lgAWJ208K7/cE0M8nUtpzeZ43K5WsI841BdDLj0fVW0mr1eoVXp4KoJmTJ62W683v2w2Hw3aIviOATj5xsl2r1brz+0/xoCj8rwLo433hH8fG44vTnZn5Wj6r/hEOtwTQ4+9GvfbF4sXpDkNcy4ex/yAcsrSBFp3Q9Df/fuOtLbU49n0x+1aIHuuvE1teLGUWznzY5OQi9rmwvMH68XIy2Zdjj858aCJ+cDw6vndyIesFWA/zC9R6rfrlWbFHlz5OGKf9rCgeOZc8vOp3gPfI+/gApJOnJecenxf6wpXjDf9os98/3hVX3A9fuxveajt2Z/E/8G+e8O26pLQ/m01+/6jReBZavNJTv/8AGdhTMvCZnhQAAAAASUVORK5CYII=";
+
+export { img as default };

package/src/components/composite-comp/bol/config-panels/ButtonCompConfig/imgs/layout2.png.js

@@ -0,0 +1,3 @@
+var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAACECAYAAAAqYEFrAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAR5SURBVHgB7d1dbhtVGIfx94wz/gRktxLccOGEBTQq9xSVDURsoEsAsQAKK4DuoF1CN1DCBiBsAFviCiJ1LBR/xp7DHDeOUuPgmYim9fyf39XYHvvizKOjM/bI4yynJPHtSjw8iivxg9T7Q+/TrnOubcAt894PnIv62cZJFNnxZFJ/3um4QZ73um07JMm4G8f+62zPRwSOd5a3p7OZfd/pNPr/tdu1wYcZvVabPvaWxQ7sCGf+h2az+c31r28QZvVqzX7KNrsG7J7ebGoPN8320foTSXJ2SOzYcftZwy/OzmaH6y+8NsMzs6Nk/jXTXwYf1uzV2uRXI3aUSxZ9/f7qW5zLJU04QTViR/ns12rjb1cPljP8xVKmZ0A5+WxpcxCWNssZPo7T7wwoL5f9lvTVciNJkmztXk8MKDWXzKa1gyiO4yMDSu/VpTHZksZ9bkD5uUql8llkzt0zQEHqDyPHV5FQ4aKuG47G3gANPjJACMFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDCsFDyp7dwHy+sL9eDm16vrA05X+crtNqxHa33bR4r5Jrf8Y1n6LjelXhfx4LB+WPP//mgOQURc4+/uiDrQeHcS0m77iuKf7PY6eDEQelgDBWpy9HW/djXIvJO67rCgc/Gp8bipmez7fuw7gWl2dc13HSeguYud+Mm4wrwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUMKwUNK4eAj5wz/P8b1dhQOvlbdMxTTalS37sO4FpdnXNcVDv7DOy1mowLCWN1tN7fux7gWk3dc17nhaFz4/t3zeWqng5GNxjPDZuGAVKuVLOT3LN7LN68wrtvdZFyv8DcKHthRnm9pIIXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgIYXgISUy7wcGaBhE3qxvgALv+9mSxv9mgILInUSp98cGlJ+PrHLskiRpV6u1njnXNqC8/GxavxN1Op1B6u2ZAWXm7Gmn4wbLu2iNx+NuFn3PgHLykbODRqPRX34PHzbS1P9oQPl4n/onofHw4PI+icu1fK3+S7a5b0B5/N5qNj5ZPbj8pTWs5bNp/2G2ydIGZdHLmv7i6hOvXVoQpn2fLr40osfu64WWV0uZlY23fr44iX1hLG+we8J9h5cz+3rswcaLx8KOs+nk/sWJLDcuxq5YnqA2G/VPN8UeuG2fEGb7RZo+di56lPc9wC3yPlwA6exZxbkn14W+kjve7EPbw+HkyFz6IHvbveypruPXWbwF/tUVvn0XVU4Wi/Of32+1nmct5rrq9x9MC1ruwN9Z1wAAAABJRU5ErkJggg==";
+
+export { img as default };

package/src/components/composite-comp/bol/config-panels/ButtonCompConfig/index.js

@@ -0,0 +1,53 @@
+import React__default from 'react';
+import AComponent from './ButtonConfigContent/index.js';
+import img from './imgs/layout1.png.js';
+import img$1 from './imgs/layout2.png.js';
+import BackgroundConfig from '../../../common/config-panels/BackgroundConfig/index.js';
+import CustomizeConfig from '../../../common/config-panels/CustomizeConfig/index.js';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import SpacingConfig from '../../../common/config-panels/SpacingConfig/index.js';
+
+function ButtonConfig(props) {
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+    divider: "bold",
+    headerSize: "large",
+    source: [{
+      key: '1',
+      name: 'Content',
+      value: /*#__PURE__*/React__default.createElement(AComponent, {
+        panelProps: data.content
+      })
+    }, {
+      key: '2',
+      name: 'Spacing',
+      value: /*#__PURE__*/React__default.createElement(SpacingConfig, {
+        data: data.spacing
+      })
+    }, {
+      key: '3',
+      name: 'Customize',
+      value: /*#__PURE__*/React__default.createElement(CustomizeConfig, {
+        data: data.customize,
+        layoutSource: [{
+          id: 'layout1',
+          name: 'layout1',
+          image: img
+        }, {
+          id: 'layout2',
+          name: 'layout2',
+          image: img$1
+        }]
+      })
+    }, {
+      key: '4',
+      name: 'Background',
+      value: /*#__PURE__*/React__default.createElement(BackgroundConfig, {
+        data: data.background
+      })
+    }],
+    type: "triangle"
+  }));
+}
+
+export { ButtonConfig as default };

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

@@ -0,0 +1,91 @@
+import { __extends, __decorate } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { inject, observer } from '../../../../../../../node_modules/mobx-react/dist/mobxreact.esm.js';
+import { renderPreview, isPc } from '../../../../../utils/coreUtil.js';
+import GroupList from '../../../../../common/GroupList/index.js';
+import Button from '../../../../../common/Button/index.js';
+import { imagesGroupSourceJSON } from '../../../components/Carousel/defaultJSON.js';
+import img from '../imgs/defaultImg.png.js';
+
+var notice = "Looks like you don't have any images in your gallery. Choose images to feature on this page.";
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.onClickItem = function (node) {
+      _this.props.store.setState({
+        clickedGroup: node.id
+      });
+    };
+
+    _this.onAddClick = function () {
+      var json = imagesGroupSourceJSON('');
+
+      _this.props.source.push(json);
+
+      _this.setState({});
+
+      renderPreview();
+    };
+
+    _this.reRender = function () {
+      renderPreview();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  AComponent.prototype.render = function () {
+    var _a = this.props.source,
+        source = _a === void 0 ? [] : _a;
+
+    var renderCard = function (src) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "card_wrap"
+      }, /*#__PURE__*/React__default.createElement("img", {
+        alt: "",
+        src: (isPc() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || img
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "name"
+      }, isPc() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc));
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "carousel_image"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "node_list"
+    }, source.length === 0 ? /*#__PURE__*/React__default.createElement("span", {
+      className: "notice"
+    }, notice) : /*#__PURE__*/React__default.createElement(GroupList, {
+      onClickItem: this.onClickItem,
+      renderCard: function (v) {
+        return renderCard(v);
+      },
+      reRender: this.reRender,
+      source: source
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "btn_wrap"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      icon: "icon-add",
+      onClick: this.onAddClick,
+      type: "primary"
+    }, "Add Image")));
+  };
+
+  AComponent.defaultProps = {
+    source: []
+  };
+  AComponent = __decorate([inject('store'), observer], AComponent);
+  return AComponent;
+}(React__default.Component);
+
+export { AComponent as default };