@fonixtree/magic-design 0.0.16 → 0.0.17

package/dist/src/components/composite-comp/bol/components/Text/defaultJSON.js

@@ -0,0 +1,125 @@
+import { __assign } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../my_my_node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaTextJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    type: 'Text',
+    specialContent: [],
+    text: 'Flash Deal',
+    content: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 14,
+      color: '#CE1126'
+    },
+    underline: {
+      open: false,
+      textDecorationColor: '',
+      textDecorationStyle: 'solid'
+    },
+    vertical: {
+      open: false,
+      lineHeight: 18
+    }
+  };
+};
+
+var textGroupSourceJSON = function (parentId) {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    parentId: parentId,
+    content: {
+      title: __assign(__assign({
+        parentId: groupId,
+        id: uuid_1.v4()
+      }, getDefaultMetaTextJson()), {
+        text: 'Group Name',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 26,
+          width: '100%',
+          color: '#232F46'
+        }
+      }),
+      text: __assign(__assign({
+        parentId: groupId,
+        id: uuid_1.v4()
+      }, getDefaultMetaTextJson()), {
+        text: 'For the text area, you can enter a subtitle or description, the default width is the same as title.',
+        content: {
+          sizeType: 'Body 1',
+          fontFamily: 'Open Sans',
+          fontWeight: 400,
+          fontSize: 18,
+          width: '100%',
+          color: '#232F46'
+        }
+      })
+    }
+  };
+};
+var getDefaultJSON = function () {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    type: 'TEXT',
+    title: {
+      headline: __assign(__assign({}, getDefaultMetaTextJson()), {
+        text: 'Title use, click modify text.',
+        content: {
+          sizeType: 'Headline 1',
+          fontFamily: 'Montserrat',
+          fontWeight: 600,
+          fontSize: 68,
+          color: '#232F46'
+        }
+      }),
+      subtitle: __assign(__assign({}, getDefaultMetaTextJson()), {
+        text: 'For the text area, you can enter a subtitle or description',
+        content: {
+          sizeType: 'Title 1',
+          fontFamily: 'Montserrat',
+          fontWeight: 400,
+          fontSize: 32,
+          color: '#232F46'
+        }
+      })
+    },
+    groupSource: [textGroupSourceJSON(groupId), textGroupSourceJSON(groupId), textGroupSourceJSON(groupId)],
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'left',
+      align: 'left',
+      rowNum: 3
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON, textGroupSourceJSON };

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

@@ -0,0 +1,68 @@
+import { __extends, __decorate } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from '../../../../../../my_my_node_modules/classnames/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import Text$1 from '../../../../meta-comp/components/Text/index.js';
+import '../../../../meta-comp/components/Button/index.js';
+import '../../../../meta-comp/components/Image/index.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+import './index.less.js';
+
+var Text =
+/** @class */
+function (_super) {
+  __extends(Text, _super);
+
+  function Text() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Text.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData;
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-text",
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, nodeData.title.headline.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "title-wrap"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      data: nodeData.title.headline
+    })), nodeData.title.subtitle.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "sub-title"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      data: nodeData.title.subtitle
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('group-content-wrap', 'col-' + nodeData.customize.rowNum, (_a = {}, _a[window.magicDesign.device] = true, _a))
+    }, nodeData.groupSource.map(function (group) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "group-wrap-container"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        key: group.id,
+        className: "group-wrap",
+        style: {
+          textAlign: nodeData.customize.align
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "group-title"
+      }, /*#__PURE__*/React__default.createElement(Text$1, {
+        data: group.content.title
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "group-content"
+      }, /*#__PURE__*/React__default.createElement(Text$1, {
+        data: group.content.text
+      }))));
+    })));
+  };
+
+  Text.defaultProps = {};
+  Text.type = 'TEXT';
+  Text.getDefaultJSON = getDefaultJSON;
+  Text = __decorate([compositeDecorator], Text);
+  return Text;
+}(Component);
+
+export { Text as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../my_my_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/dist/src/components/composite-comp/bol/config-panels/BannerConfig/BannerConfigGroup/index.js

@@ -0,0 +1,73 @@
+import { __extends, __decorate } from '../../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { inject, observer } from 'mobx-react';
+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/dist/src/components/composite-comp/bol/config-panels/BannerConfig/BannerConfigGroup/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../my_my_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/dist/src/components/composite-comp/bol/config-panels/BannerConfig/BannerConfigSetting/index.js

@@ -0,0 +1,200 @@
+import { __extends } from '../../../../../../../my_my_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 'axios';
+import '../../../../../../../my_my_node_modules/qs/lib/stringify.js';
+import '../../../../../../../my_my_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/dist/src/components/composite-comp/bol/config-panels/BannerConfig/BannerConfigSetting/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../my_my_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/dist/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/dist/src/components/composite-comp/bol/config-panels/ButtonCompConfig/ButtonConfigContent/index.js

@@ -0,0 +1,79 @@
+import { __extends } from '../../../../../../../my_my_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 'axios';
+import '../../../../../../../my_my_node_modules/qs/lib/stringify.js';
+import '../../../../../../../my_my_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/dist/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/dist/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/dist/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 };