@fonixtree/magic-design 0.0.30 → 0.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/README.md +311 -0
  2. package/es/composite-comp/bol/components/Carousel/mobile/index.js +6 -4
  3. package/es/composite-comp/bol/components/Carousel/mobile/index.less +9 -11
  4. package/es/composite-comp/bol/components/Carousel/pc/index.js +24 -15
  5. package/es/composite-comp/bol/components/Carousel/pc/index.less +8 -0
  6. package/es/composite-comp/bol/components/ImageText/mobile/index.js +10 -3
  7. package/es/composite-comp/bol/components/Text/defaultJSON.js +11 -5
  8. package/es/composite-comp/bol/config-panels/CarouselConfig/index.js +1 -0
  9. package/es/composite-comp/common/components/ProductItem/index.js +1 -1
  10. package/es/composite-comp/common/config-panels/SpacingConfig/index.js +17 -2
  11. package/es/core/Designer/QuickMenuBar/index.js +8 -0
  12. package/es/meta-comp/components/Image/index.js +5 -0
  13. package/lib/composite-comp/bol/components/Carousel/mobile/index.js +6 -4
  14. package/lib/composite-comp/bol/components/Carousel/mobile/index.less +9 -11
  15. package/lib/composite-comp/bol/components/Carousel/pc/index.js +24 -15
  16. package/lib/composite-comp/bol/components/Carousel/pc/index.less +8 -0
  17. package/lib/composite-comp/bol/components/ImageText/mobile/index.js +10 -3
  18. package/lib/composite-comp/bol/components/Text/defaultJSON.js +11 -5
  19. package/lib/composite-comp/bol/config-panels/CarouselConfig/index.js +1 -0
  20. package/lib/composite-comp/common/components/ProductItem/index.js +1 -1
  21. package/lib/composite-comp/common/config-panels/SpacingConfig/index.js +17 -2
  22. package/lib/core/Designer/QuickMenuBar/index.js +8 -0
  23. package/lib/meta-comp/components/Image/index.js +5 -0
  24. package/package.json +79 -1
package/README.md ADDED
@@ -0,0 +1,311 @@
1
+ # 设计器二期
2
+
3
+ ## 1、基本概念
4
+
5
+ ### 1.1、元组件：构成复合组件的最小单位
6
+
7
+ Text、Image、Button、Divider、Video 等
8
+
9
+ ### 1.2、复合组件：由若干个元组件构成的一个大组件
10
+
11
+ Text、Banner、Image Gallery、Image and Text、Carousel、Reward、Newsletter 等
12
+
13
+ ### 1.3、业务公共组件：项目中复用的公共组件
14
+
15
+ 所有的公共组件需要开放 value 和 onChange Api（除 Button、Iconfont）
16
+
17
+ Button、Iconfont、AlignSelecter、Collapse、ColorPicker、ImagePicker、LayoutSelecter、Slider、UrlPicker
18
+
19
+ ## 2、元组件
20
+
21
+ ### 2.1
22
+
23
+ 元组件类型：
24
+
25
+ TEXT、IMAGE、BUTTON、DIVIDER、VIDEO
26
+
27
+ 元组件报文格式：
28
+
29
+ ```json
30
+ {
31
+ id:'xxxx' //元组件key
32
+ type: 'TYPE', //元组件类型
33
+ style:{
34
+ fontFamily:'xxx', //字体
35
+ ...css //属性名称尽量使用标准css名称
36
+ },
37
+ hoverStyle:{
38
+
39
+ }
40
+ }
41
+ ```
42
+
43
+ 动态设置 hover 效果
44
+
45
+ onMouseEnter={e => { e.target.style.color = 'red'; }}
46
+
47
+ onMouseLeave={e => { e.target.style.color = 'white'; }}
48
+
49
+ 文本可编辑
50
+
51
+ contenteditable="true"
52
+
53
+ ### 2.2 、元组件报文
54
+
55
+ #### Text
56
+
57
+ ```json
58
+ {
59
+ id:'xxxx' //元组件key
60
+ type: 'TYPE', //元组件类型
61
+ content:'this is text',
62
+ style:{
63
+ fontFamily:'xxx', //字体
64
+ fontSize: '14px',
65
+ width: '200px',
66
+ ...css
67
+ }
68
+ }
69
+ ```
70
+
71
+ #### Image
72
+
73
+ ```json
74
+ {
75
+ id:'xxxx' //元组件key
76
+ type: 'IMAGE', //元组件类型
77
+ name:'123.png',
78
+ src:'../image.png', //图片地址
79
+ url:'www.baidu.com', //图片跳转地址
80
+ style:{
81
+ width: '200px',
82
+ ...css
83
+ },
84
+ hoverStyle:{ //hover 类型为new时保存src，类型为enlarge时保存scale
85
+ scale: '2',
86
+ src:'../image1.png',
87
+ }
88
+ }
89
+ ```
90
+
91
+ #### Button
92
+
93
+ ```json
94
+ {
95
+ id:'xxxx' //元组件key
96
+ type: 'BUTTON', //元组件类型
97
+ name:'Submit',
98
+ url: 'www.baidu.com',
99
+ style:{
100
+ buttonIconSrc:'../img.png',
101
+ buttonIconPlace: 'left',
102
+ color:'#FEFEFE',
103
+ border: '1px solid red',
104
+ borderRadius:'10px',
105
+ fontFamily:'xxx', //字体
106
+ fontSize: '14px',
107
+ ...css
108
+ },
109
+ hoverStyle {
110
+ color:'#FEFEFE',
111
+ border: '1px solid red',
112
+ fontFamily:'xxx', //字体
113
+ fontSize: '14px',
114
+ ...css
115
+ }
116
+ }
117
+ ```
118
+
119
+ ## 2、复合组件
120
+
121
+ ### 2.1
122
+
123
+ 元组件类型：
124
+
125
+ TEXT、BANNER、IMAGE_GALLERT、IMAGE_TEXT、CAROUSEL、REWARD、NEWSLETTER
126
+
127
+ 复合组件报文格式：
128
+
129
+ ```json
130
+ {
131
+ id:'xxxx' //复合组件key
132
+ type: 'TYPE', //复合组件类型
133
+ setting:{ //开关类型的配置及属性配置放在这里
134
+ autoplays: 3, //3秒轮播
135
+ },
136
+ groupSource:[], //元组件集合组数据放在这里
137
+ metas:{
138
+ title:{
139
+ open:false,
140
+ type:'IMAGE'
141
+ ...metaCompJson
142
+ },
143
+ subTitle:{
144
+ open:false,
145
+ type:'IMAGE'
146
+ ...metaCompJson
147
+ }
148
+ },
149
+ customize:{
150
+ layout:'',
151
+ background:{
152
+
153
+ }
154
+ }
155
+ }
156
+ ```
157
+
158
+ #### Text
159
+
160
+ ```js
161
+ {
162
+ id: 'xxxx', //复合组件key
163
+ type: 'TEXT', //复合组件类型
164
+ setting:{
165
+ layout:'left', // 模块布局 left/center/right ，每一个layout可能都是一个不同的组件
166
+ title:{
167
+ type:'TEXT'
168
+ ...metaCompJson
169
+ },
170
+ subtitle:{
171
+ type:'TEXT'
172
+ ...metaCompJson
173
+ },
174
+ },
175
+ source:[
176
+ { //此处可以抽出业务组件
177
+ title:{
178
+ type:'TEXT'
179
+ ...metaCompJson
180
+ },
181
+ content:{
182
+ type:'TEXT'
183
+ ...metaCompJson
184
+ }
185
+ }
186
+ ],
187
+ style:{
188
+ align:'left', //文本布局 left/center/right
189
+ backgroundColor: 'red',
190
+ backgroundImage:'../image.png'
191
+ }
192
+ }
193
+ ```
194
+
195
+ #### Banner
196
+
197
+ modifySetting
198
+
199
+ ```json
200
+ {
201
+ "comositeId": "1111",
202
+
203
+ "value": {
204
+ "autoplays": 4
205
+ }
206
+ }
207
+ ```
208
+
209
+ ```json
210
+ {
211
+ id: 'xxxx',
212
+ type: 'BANNER',
213
+ setting:{
214
+ open:false
215
+ autoplays: 3, //3秒轮播
216
+ arrows:{ // 滚动箭头
217
+ open:false,
218
+ color:'red',
219
+ size:'',
220
+ hoverSize:'',
221
+ hoverColor:'green',
222
+ },
223
+ dots:{ //面板指示点
224
+ open:false,
225
+ color: 'red',
226
+ size:'',
227
+ hoverSize:''
228
+ hoverColor:'green',
229
+ },
230
+ },
231
+ groupSource:[
232
+ { //此处可以作为一个业务组件
233
+ id:'xxxxx',
234
+ image:{
235
+ open:false,
236
+ type:'IMAGE'
237
+ ...metaCompJson
238
+ },
239
+ title:{
240
+ open:false,
241
+ type:'TEXT',
242
+ ...metaCompJson
243
+ },
244
+ content:{
245
+ open:false,
246
+ type:'TEXT',
247
+ ...metaCompJson
248
+ },
249
+ button:{
250
+ type:'BUTTON',
251
+ ...metaCompJson
252
+ },
253
+ secondaryButton:{
254
+ type:'BUTTON',
255
+ ...metaCompJson
256
+ },
257
+ layout:'center',
258
+ align:'left',
259
+ //文本布局 left/center/right
260
+ }
261
+ ]
262
+ }
263
+ ```
264
+
265
+ #### Image Gallery
266
+
267
+ ```json
268
+
269
+ ```
270
+
271
+ #### Image and Text
272
+
273
+ ```json
274
+ {
275
+ id:'xxxx'
276
+ type: 'IMAGE_TEXT',
277
+ setting:{
278
+ layout:'left',
279
+ title:{},
280
+ subtitle:{},
281
+ button:{},
282
+ secondaryButton:{}
283
+ },
284
+ source:[
285
+
286
+ ],
287
+ style:{
288
+ align:'left',
289
+ backgroundColor:'red',
290
+ backgroundImage:'./img.png'
291
+ }
292
+ }
293
+ ```
294
+
295
+ 疑问：
296
+
297
+ Text 元组件
298
+
299
+ 文字链接配置好之后，怎么删除
300
+
301
+ 链接配置的规则，按单词还是字符
302
+
303
+ image 元组件
304
+
305
+ 属性控制进度条和输入框是否要限制最大最小值
306
+
307
+ button 元组件
308
+
309
+ 是否需要 icon 的 hover 效果
310
+
311
+ banner 中的 text Align 放在元组件里？
package/es/composite-comp/bol/components/Carousel/mobile/index.js CHANGED
@@ -73,11 +73,11 @@ var MOBILE_IMG_SIZE = [{
73
73
  w: 282,
74
74
  h: 212
75
75
  }, {
76
- w: 125,
76
+ w: 135,
77
77
  h: 102
78
78
  }, {
79
- w: 82,
80
- h: 64.5
79
+ w: 86,
80
+ h: 65
81
81
  }, {
82
82
  w: 60,
83
83
  h: 45
@@ -168,6 +168,8 @@ function (_super) {
168
168
  };
169
169
  }
170
170
 
171
+ var spacing = data.spacing[window.magicDesign.device];
172
+ if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
171
173
  var settings = {
172
174
  className: 'slider-wrap',
173
175
  arrows: false,
@@ -199,7 +201,7 @@ function (_super) {
199
201
  key: item.id,
200
202
  className: "img-wrap"
201
203
  }, item.image.open && /*#__PURE__*/_react["default"].createElement("div", {
202
- className: "image"
204
+ className: "img"
203
205
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
204
206
  data: item.image,
205
207
  isBackground: true,
package/es/composite-comp/bol/components/Carousel/mobile/index.less CHANGED
@@ -1,23 +1,21 @@
1
1
  .m-carousel-mobile {
2
2
  display: flex;
3
3
  position: relative;
4
-
5
- .carousel-icon-left {
6
- float: left;
7
- margin-left: 15px;
8
- }
9
-
10
- .carousel-icon-right {
11
- float: right;
12
- margin-right: 15px;
13
- }
4
+ margin: 0 auto;
14
5
 
15
6
  .slider-wrap {
16
- width: calc(100% - 90px);
7
+ width: 100%;
17
8
  padding: 30px 0;
18
9
  margin: 0 auto;
19
10
 
20
11
  .img-wrap {
12
+ .img {
13
+ width: fit-content;
14
+ height: fit-content;
15
+ display: block;
16
+ margin: 0 auto;
17
+ }
18
+
21
19
  .title {
22
20
  display: flex;
23
21
  justify-content: center;
package/es/composite-comp/bol/components/Carousel/pc/index.js CHANGED
@@ -56,23 +56,29 @@ var __extends = void 0 && (void 0).__extends || function () {
56
56
  }();
57
57
 
58
58
  var PC_IMG_SIZE = [{
59
- w: 1072,
60
- h: 662
59
+ minW: 806,
60
+ maxW: 1072,
61
+ maxH: 662
61
62
  }, {
62
- w: 500,
63
- h: 393
63
+ minW: 390,
64
+ maxW: 524,
65
+ maxH: 393
64
66
  }, {
65
- w: 330,
66
- h: 256
67
+ minW: 258,
68
+ maxW: 341,
69
+ maxH: 256
67
70
  }, {
68
- w: 240,
69
- h: 188
71
+ minW: 184,
72
+ maxW: 251,
73
+ maxH: 188
70
74
  }, {
71
- w: 190,
72
- h: 147
75
+ minW: 142,
76
+ maxW: 195,
77
+ maxH: 147
73
78
  }, {
74
- w: 121,
75
- h: 121
79
+ minW: 124,
80
+ maxW: 168,
81
+ maxH: 126
76
82
  }];
77
83
 
78
84
  var CarouselPc =
@@ -147,6 +153,8 @@ function (_super) {
147
153
  };
148
154
  }
149
155
 
156
+ var spacing = data.spacing[window.magicDesign.device];
157
+ if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
150
158
  var settings = {
151
159
  className: 'slider-wrap',
152
160
  arrows: false,
@@ -187,12 +195,13 @@ function (_super) {
187
195
  key: item.id,
188
196
  className: "img-wrap"
189
197
  }, item.image.open && /*#__PURE__*/_react["default"].createElement("div", {
190
- className: "image"
198
+ className: "img"
191
199
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
192
200
  data: item.image,
193
201
  isBackground: true,
194
- maxHeight: PC_IMG_SIZE[colNum - 1].h,
195
- maxWidth: PC_IMG_SIZE[colNum - 1].w
202
+ maxHeight: PC_IMG_SIZE[colNum - 1].maxH,
203
+ maxWidth: PC_IMG_SIZE[colNum - 1].maxW,
204
+ minWidth: PC_IMG_SIZE[colNum - 1].minW
196
205
  })), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
197
206
  className: "title"
198
207
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
package/es/composite-comp/bol/components/Carousel/pc/index.less CHANGED
@@ -1,6 +1,7 @@
1
1
  .m-carousel-pc {
2
2
  display: flex;
3
3
  position: relative;
4
+ margin: 0 auto;
4
5
 
5
6
  .carousel-icon-left {
6
7
  float: left;
@@ -18,6 +19,13 @@
18
19
  margin: 0 auto;
19
20
 
20
21
  .img-wrap {
22
+ .img {
23
+ width: fit-content;
24
+ height: fit-content;
25
+ display: block;
26
+ margin: 0 auto;
27
+ }
28
+
21
29
  .title {
22
30
  display: flex;
23
31
  justify-content: center;
package/es/composite-comp/bol/components/ImageText/mobile/index.js CHANGED
@@ -45,7 +45,14 @@ var __extends = void 0 && (void 0).__extends || function () {
45
45
  };
46
46
  }();
47
47
 
48
- var maxWidthAndHeight = {
48
+ var maxWidth = {
49
+ normal1: 60,
50
+ normal2: '100%',
51
+ normal3: '100%',
52
+ outsideM: 60,
53
+ centerM: 60
54
+ };
55
+ var maxHeight = {
49
56
  normal1: 60,
50
57
  normal2: '100%',
51
58
  normal3: 107,
@@ -135,8 +142,8 @@ function (_super) {
135
142
  className: "card-image",
136
143
  data: source.image,
137
144
  limitWidthHeight: true,
138
- maxHeight: maxWidthAndHeight[data.customize.layout.h5Layout],
139
- maxWidth: maxWidthAndHeight[data.customize.layout.h5Layout],
145
+ maxHeight: maxHeight[data.customize.layout.h5Layout],
146
+ maxWidth: maxWidth[data.customize.layout.h5Layout],
140
147
  scale: 0.5
141
148
  })), /*#__PURE__*/_react["default"].createElement("div", {
142
149
  className: "card-content-wrap"
package/es/composite-comp/bol/components/Text/defaultJSON.js CHANGED
@@ -67,7 +67,8 @@ var textGroupSourceJSON = function textGroupSourceJSON(parentId) {
67
67
  sizeType: 'Customize font styles',
68
68
  fontFamily: 'Open Sans',
69
69
  fontWeight: 600,
70
- fontSize: 26,
70
+ fontSize: 22,
71
+ pcFontSize: 22,
71
72
  width: '100%',
72
73
  color: '#232F46'
73
74
  }
@@ -82,6 +83,7 @@ var textGroupSourceJSON = function textGroupSourceJSON(parentId) {
82
83
  fontFamily: 'Open Sans',
83
84
  fontWeight: 400,
84
85
  fontSize: 18,
86
+ pcFontSize: 18,
85
87
  width: '100%',
86
88
  color: '#232F46'
87
89
  }
@@ -104,8 +106,10 @@ var getDefaultJSON = function getDefaultJSON() {
104
106
  sizeType: 'Headline 1',
105
107
  fontFamily: 'Montserrat',
106
108
  fontWeight: 600,
107
- fontSize: 68,
108
- color: '#232F46'
109
+ fontSize: 28,
110
+ pcFontSize: 68,
111
+ color: '#232F46',
112
+ textAlign: 'center'
109
113
  }
110
114
  }),
111
115
  subtitle: __assign(__assign({}, getDefaultMetaTextJson()), {
@@ -114,8 +118,10 @@ var getDefaultJSON = function getDefaultJSON() {
114
118
  sizeType: 'Title 1',
115
119
  fontFamily: 'Montserrat',
116
120
  fontWeight: 400,
117
- fontSize: 32,
118
- color: '#232F46'
121
+ fontSize: 16,
122
+ pcFontSize: 32,
123
+ color: '#232F46',
124
+ textAlign: 'center'
119
125
  }
120
126
  })
121
127
  },
package/es/composite-comp/bol/config-panels/CarouselConfig/index.js CHANGED
@@ -46,6 +46,7 @@ function CarouselConfig(props) {
46
46
  key: '3',
47
47
  name: (0, _locale.i18n)('SPACING'),
48
48
  value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
49
+ configWidth: true,
49
50
  data: data.spacing
50
51
  })
51
52
  }, {
package/es/composite-comp/common/components/ProductItem/index.js CHANGED
@@ -110,7 +110,7 @@ function (_super) {
110
110
  }
111
111
 
112
112
  var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
113
- var discount = data.discountPercent || 0;
113
+ var discount = Number(data.discountPercent) || 0;
114
114
  var salePercent = Number(data.salePercent) / 100 || 0;
115
115
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
116
116
  className: "m-product-item-wrap",
package/es/composite-comp/common/config-panels/SpacingConfig/index.js CHANGED
@@ -62,11 +62,25 @@ function (_super) {
62
62
 
63
63
  var _a = this.props,
64
64
  data = _a.data,
65
- type = _a.type;
65
+ type = _a.type,
66
+ configWidth = _a.configWidth;
66
67
  var obj = data[window.magicDesign.device];
67
68
  return /*#__PURE__*/_react["default"].createElement("div", {
68
69
  className: "spacing-config-container"
69
- }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
70
+ }, configWidth && /*#__PURE__*/_react["default"].createElement(_common.Field, {
71
+ title: "Width"
72
+ }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
73
+ maxVal: window.magicDesign.device === 'pc' ? 1240 : 375,
74
+ minVal: window.magicDesign.device === 'pc' ? 1010 : 348,
75
+ onChange: function onChange(value) {
76
+ obj.contentWidth = value.count;
77
+
78
+ _this.selfRender();
79
+ },
80
+ value: {
81
+ count: obj.contentWidth
82
+ }
83
+ })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
70
84
  title: (0, _locale.i18n)('PADDING')
71
85
  }, /*#__PURE__*/_react["default"].createElement("div", {
72
86
  className: "padding-wrap"
@@ -132,6 +146,7 @@ function (_super) {
132
146
 
133
147
  SpacingConfig.defaultProps = {
134
148
  type: 'default',
149
+ configWidth: false,
135
150
  data: {
136
151
  pc: {
137
152
  paddingTop: 10,
package/es/core/Designer/QuickMenuBar/index.js CHANGED
@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
 
14
+ var _mobx = require("../../../mobx");
15
+
14
16
  var _Button = _interopRequireDefault(require("../../../common/Button"));
15
17
 
16
18
  var _Iconfont = _interopRequireDefault(require("../../../common/Iconfont"));
@@ -82,6 +84,12 @@ function (_super) {
82
84
  _this.onBtnClick = function (event) {
83
85
  var code = event.currentTarget.dataset.code;
84
86
 
87
+ if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
88
+ _mobx.store.setState({
89
+ clickedFloor: ''
90
+ });
91
+ }
92
+
85
93
  if (_this.props.device === _constants.deviceTypeMap.PC) {}
86
94
 
87
95
  _this.props.onBtnClick(code);
package/es/meta-comp/components/Image/index.js CHANGED
@@ -74,6 +74,7 @@ function (_super) {
74
74
  hoverState = _a.hoverState,
75
75
  maxHeight = _a.maxHeight,
76
76
  maxWidth = _a.maxWidth,
77
+ minWidth = _a.minWidth,
77
78
  limitWidthHeight = _a.limitWidthHeight,
78
79
  scale = _a.scale;
79
80
  var hoverImgSrc = _this.state.hoverImgSrc;
@@ -92,6 +93,10 @@ function (_super) {
92
93
  obj.maxWidth = maxWidth;
93
94
  }
94
95
 
96
+ if (minWidth) {
97
+ obj.minWidth = minWidth;
98
+ }
99
+
95
100
  if (limitWidthHeight) {
96
101
  if ((0, _coreUtil.isPc)()) {
97
102
  if (data.content.pcImgWidth) obj.width = data.content.pcImgWidth * scale;
package/lib/composite-comp/bol/components/Carousel/mobile/index.js CHANGED
@@ -73,11 +73,11 @@ var MOBILE_IMG_SIZE = [{
73
73
  w: 282,
74
74
  h: 212
75
75
  }, {
76
- w: 125,
76
+ w: 135,
77
77
  h: 102
78
78
  }, {
79
- w: 82,
80
- h: 64.5
79
+ w: 86,
80
+ h: 65
81
81
  }, {
82
82
  w: 60,
83
83
  h: 45
@@ -168,6 +168,8 @@ function (_super) {
168
168
  };
169
169
  }
170
170
 
171
+ var spacing = data.spacing[window.magicDesign.device];
172
+ if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
171
173
  var settings = {
172
174
  className: 'slider-wrap',
173
175
  arrows: false,
@@ -199,7 +201,7 @@ function (_super) {
199
201
  key: item.id,
200
202
  className: "img-wrap"
201
203
  }, item.image.open && /*#__PURE__*/_react["default"].createElement("div", {
202
- className: "image"
204
+ className: "img"
203
205
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
204
206
  data: item.image,
205
207
  isBackground: true,
package/lib/composite-comp/bol/components/Carousel/mobile/index.less CHANGED
@@ -1,23 +1,21 @@
1
1
  .m-carousel-mobile {
2
2
  display: flex;
3
3
  position: relative;
4
-
5
- .carousel-icon-left {
6
- float: left;
7
- margin-left: 15px;
8
- }
9
-
10
- .carousel-icon-right {
11
- float: right;
12
- margin-right: 15px;
13
- }
4
+ margin: 0 auto;
14
5
 
15
6
  .slider-wrap {
16
- width: calc(100% - 90px);
7
+ width: 100%;
17
8
  padding: 30px 0;
18
9
  margin: 0 auto;
19
10
 
20
11
  .img-wrap {
12
+ .img {
13
+ width: fit-content;
14
+ height: fit-content;
15
+ display: block;
16
+ margin: 0 auto;
17
+ }
18
+
21
19
  .title {
22
20
  display: flex;
23
21
  justify-content: center;
package/lib/composite-comp/bol/components/Carousel/pc/index.js CHANGED
@@ -56,23 +56,29 @@ var __extends = void 0 && (void 0).__extends || function () {
56
56
  }();
57
57
 
58
58
  var PC_IMG_SIZE = [{
59
- w: 1072,
60
- h: 662
59
+ minW: 806,
60
+ maxW: 1072,
61
+ maxH: 662
61
62
  }, {
62
- w: 500,
63
- h: 393
63
+ minW: 390,
64
+ maxW: 524,
65
+ maxH: 393
64
66
  }, {
65
- w: 330,
66
- h: 256
67
+ minW: 258,
68
+ maxW: 341,
69
+ maxH: 256
67
70
  }, {
68
- w: 240,
69
- h: 188
71
+ minW: 184,
72
+ maxW: 251,
73
+ maxH: 188
70
74
  }, {
71
- w: 190,
72
- h: 147
75
+ minW: 142,
76
+ maxW: 195,
77
+ maxH: 147
73
78
  }, {
74
- w: 121,
75
- h: 121
79
+ minW: 124,
80
+ maxW: 168,
81
+ maxH: 126
76
82
  }];
77
83
 
78
84
  var CarouselPc =
@@ -147,6 +153,8 @@ function (_super) {
147
153
  };
148
154
  }
149
155
 
156
+ var spacing = data.spacing[window.magicDesign.device];
157
+ if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
150
158
  var settings = {
151
159
  className: 'slider-wrap',
152
160
  arrows: false,
@@ -187,12 +195,13 @@ function (_super) {
187
195
  key: item.id,
188
196
  className: "img-wrap"
189
197
  }, item.image.open && /*#__PURE__*/_react["default"].createElement("div", {
190
- className: "image"
198
+ className: "img"
191
199
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
192
200
  data: item.image,
193
201
  isBackground: true,
194
- maxHeight: PC_IMG_SIZE[colNum - 1].h,
195
- maxWidth: PC_IMG_SIZE[colNum - 1].w
202
+ maxHeight: PC_IMG_SIZE[colNum - 1].maxH,
203
+ maxWidth: PC_IMG_SIZE[colNum - 1].maxW,
204
+ minWidth: PC_IMG_SIZE[colNum - 1].minW
196
205
  })), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
197
206
  className: "title"
198
207
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
package/lib/composite-comp/bol/components/Carousel/pc/index.less CHANGED
@@ -1,6 +1,7 @@
1
1
  .m-carousel-pc {
2
2
  display: flex;
3
3
  position: relative;
4
+ margin: 0 auto;
4
5
 
5
6
  .carousel-icon-left {
6
7
  float: left;
@@ -18,6 +19,13 @@
18
19
  margin: 0 auto;
19
20
 
20
21
  .img-wrap {
22
+ .img {
23
+ width: fit-content;
24
+ height: fit-content;
25
+ display: block;
26
+ margin: 0 auto;
27
+ }
28
+
21
29
  .title {
22
30
  display: flex;
23
31
  justify-content: center;
package/lib/composite-comp/bol/components/ImageText/mobile/index.js CHANGED
@@ -45,7 +45,14 @@ var __extends = void 0 && (void 0).__extends || function () {
45
45
  };
46
46
  }();
47
47
 
48
- var maxWidthAndHeight = {
48
+ var maxWidth = {
49
+ normal1: 60,
50
+ normal2: '100%',
51
+ normal3: '100%',
52
+ outsideM: 60,
53
+ centerM: 60
54
+ };
55
+ var maxHeight = {
49
56
  normal1: 60,
50
57
  normal2: '100%',
51
58
  normal3: 107,
@@ -135,8 +142,8 @@ function (_super) {
135
142
  className: "card-image",
136
143
  data: source.image,
137
144
  limitWidthHeight: true,
138
- maxHeight: maxWidthAndHeight[data.customize.layout.h5Layout],
139
- maxWidth: maxWidthAndHeight[data.customize.layout.h5Layout],
145
+ maxHeight: maxHeight[data.customize.layout.h5Layout],
146
+ maxWidth: maxWidth[data.customize.layout.h5Layout],
140
147
  scale: 0.5
141
148
  })), /*#__PURE__*/_react["default"].createElement("div", {
142
149
  className: "card-content-wrap"
package/lib/composite-comp/bol/components/Text/defaultJSON.js CHANGED
@@ -67,7 +67,8 @@ var textGroupSourceJSON = function textGroupSourceJSON(parentId) {
67
67
  sizeType: 'Customize font styles',
68
68
  fontFamily: 'Open Sans',
69
69
  fontWeight: 600,
70
- fontSize: 26,
70
+ fontSize: 22,
71
+ pcFontSize: 22,
71
72
  width: '100%',
72
73
  color: '#232F46'
73
74
  }
@@ -82,6 +83,7 @@ var textGroupSourceJSON = function textGroupSourceJSON(parentId) {
82
83
  fontFamily: 'Open Sans',
83
84
  fontWeight: 400,
84
85
  fontSize: 18,
86
+ pcFontSize: 18,
85
87
  width: '100%',
86
88
  color: '#232F46'
87
89
  }
@@ -104,8 +106,10 @@ var getDefaultJSON = function getDefaultJSON() {
104
106
  sizeType: 'Headline 1',
105
107
  fontFamily: 'Montserrat',
106
108
  fontWeight: 600,
107
- fontSize: 68,
108
- color: '#232F46'
109
+ fontSize: 28,
110
+ pcFontSize: 68,
111
+ color: '#232F46',
112
+ textAlign: 'center'
109
113
  }
110
114
  }),
111
115
  subtitle: __assign(__assign({}, getDefaultMetaTextJson()), {
@@ -114,8 +118,10 @@ var getDefaultJSON = function getDefaultJSON() {
114
118
  sizeType: 'Title 1',
115
119
  fontFamily: 'Montserrat',
116
120
  fontWeight: 400,
117
- fontSize: 32,
118
- color: '#232F46'
121
+ fontSize: 16,
122
+ pcFontSize: 32,
123
+ color: '#232F46',
124
+ textAlign: 'center'
119
125
  }
120
126
  })
121
127
  },
package/lib/composite-comp/bol/config-panels/CarouselConfig/index.js CHANGED
@@ -46,6 +46,7 @@ function CarouselConfig(props) {
46
46
  key: '3',
47
47
  name: (0, _locale.i18n)('SPACING'),
48
48
  value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
49
+ configWidth: true,
49
50
  data: data.spacing
50
51
  })
51
52
  }, {
package/lib/composite-comp/common/components/ProductItem/index.js CHANGED
@@ -110,7 +110,7 @@ function (_super) {
110
110
  }
111
111
 
112
112
  var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
113
- var discount = data.discountPercent || 0;
113
+ var discount = Number(data.discountPercent) || 0;
114
114
  var salePercent = Number(data.salePercent) / 100 || 0;
115
115
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
116
116
  className: "m-product-item-wrap",
package/lib/composite-comp/common/config-panels/SpacingConfig/index.js CHANGED
@@ -62,11 +62,25 @@ function (_super) {
62
62
 
63
63
  var _a = this.props,
64
64
  data = _a.data,
65
- type = _a.type;
65
+ type = _a.type,
66
+ configWidth = _a.configWidth;
66
67
  var obj = data[window.magicDesign.device];
67
68
  return /*#__PURE__*/_react["default"].createElement("div", {
68
69
  className: "spacing-config-container"
69
- }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
70
+ }, configWidth && /*#__PURE__*/_react["default"].createElement(_common.Field, {
71
+ title: "Width"
72
+ }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
73
+ maxVal: window.magicDesign.device === 'pc' ? 1240 : 375,
74
+ minVal: window.magicDesign.device === 'pc' ? 1010 : 348,
75
+ onChange: function onChange(value) {
76
+ obj.contentWidth = value.count;
77
+
78
+ _this.selfRender();
79
+ },
80
+ value: {
81
+ count: obj.contentWidth
82
+ }
83
+ })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
70
84
  title: (0, _locale.i18n)('PADDING')
71
85
  }, /*#__PURE__*/_react["default"].createElement("div", {
72
86
  className: "padding-wrap"
@@ -132,6 +146,7 @@ function (_super) {
132
146
 
133
147
  SpacingConfig.defaultProps = {
134
148
  type: 'default',
149
+ configWidth: false,
135
150
  data: {
136
151
  pc: {
137
152
  paddingTop: 10,
package/lib/core/Designer/QuickMenuBar/index.js CHANGED
@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
 
14
+ var _mobx = require("../../../mobx");
15
+
14
16
  var _Button = _interopRequireDefault(require("../../../common/Button"));
15
17
 
16
18
  var _Iconfont = _interopRequireDefault(require("../../../common/Iconfont"));
@@ -82,6 +84,12 @@ function (_super) {
82
84
  _this.onBtnClick = function (event) {
83
85
  var code = event.currentTarget.dataset.code;
84
86
 
87
+ if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
88
+ _mobx.store.setState({
89
+ clickedFloor: ''
90
+ });
91
+ }
92
+
85
93
  if (_this.props.device === _constants.deviceTypeMap.PC) {}
86
94
 
87
95
  _this.props.onBtnClick(code);
package/lib/meta-comp/components/Image/index.js CHANGED
@@ -74,6 +74,7 @@ function (_super) {
74
74
  hoverState = _a.hoverState,
75
75
  maxHeight = _a.maxHeight,
76
76
  maxWidth = _a.maxWidth,
77
+ minWidth = _a.minWidth,
77
78
  limitWidthHeight = _a.limitWidthHeight,
78
79
  scale = _a.scale;
79
80
  var hoverImgSrc = _this.state.hoverImgSrc;
@@ -92,6 +93,10 @@ function (_super) {
92
93
  obj.maxWidth = maxWidth;
93
94
  }
94
95
 
96
+ if (minWidth) {
97
+ obj.minWidth = minWidth;
98
+ }
99
+
95
100
  if (limitWidthHeight) {
96
101
  if ((0, _coreUtil.isPc)()) {
97
102
  if (data.content.pcImgWidth) obj.width = data.content.pcImgWidth * scale;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "0.0.30",
4
+ "version": "0.0.33",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",
@@ -35,6 +35,84 @@
35
35
  "replace": "^1.2.1",
36
36
  "slick-carousel": "^1.8.1"
37
37
  },
38
+ "devDependencies": {
39
+ "@babel/core": "^7.16.0",
40
+ "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
41
+ "@rollup/plugin-babel": "^5.3.1",
42
+ "@rollup/plugin-commonjs": "^22.0.0",
43
+ "@rollup/plugin-image": "^2.1.1",
44
+ "@rollup/plugin-json": "^4.1.0",
45
+ "@rollup/plugin-node-resolve": "^13.3.0",
46
+ "@svgr/webpack": "^5.5.0",
47
+ "@types/axios": "^0.14.0",
48
+ "@types/lodash": "^4.14.182",
49
+ "@types/node": "^17.0.36",
50
+ "@types/react": "^18.0.9",
51
+ "@types/react-color": "^3.0.6",
52
+ "@types/react-dom": "^18.0.5",
53
+ "@types/uuid": "^8.3.4",
54
+ "@typescript-eslint/eslint-plugin": "^5.27.1",
55
+ "add": "^2.0.6",
56
+ "babel-loader": "^8.2.3",
57
+ "babel-plugin-named-asset-import": "^0.3.8",
58
+ "babel-preset-react-app": "^10.0.1",
59
+ "bfj": "^7.0.2",
60
+ "browserslist": "^4.18.1",
61
+ "camelcase": "^6.2.1",
62
+ "case-sensitive-paths-webpack-plugin": "^2.4.0",
63
+ "child_process": "^1.0.2",
64
+ "classnames": "^2.3.1",
65
+ "css-loader": "^6.5.1",
66
+ "css-minimizer-webpack-plugin": "^3.2.0",
67
+ "dotenv": "^10.0.0",
68
+ "dotenv-expand": "^5.1.0",
69
+ "eslint": "7",
70
+ "eslint-config-next": "^12.1.6",
71
+ "eslint-config-react-app": "^7.0.1",
72
+ "eslint-webpack-plugin": "^3.1.1",
73
+ "extract-zip": "^2.0.1",
74
+ "file-loader": "^6.2.0",
75
+ "fs-extra": "^10.0.0",
76
+ "html-webpack-plugin": "^5.5.0",
77
+ "http-proxy-middleware": "^2.0.6",
78
+ "identity-obj-proxy": "^3.0.0",
79
+ "less": "3.13.1",
80
+ "less-loader": "^11.0.0",
81
+ "mini-css-extract-plugin": "^2.4.5",
82
+ "mv": "^2.1.1",
83
+ "ora": "^4.1.1",
84
+ "postcss": "^8.4.4",
85
+ "postcss-flexbugs-fixes": "^5.0.2",
86
+ "postcss-loader": "^6.2.1",
87
+ "postcss-normalize": "^10.0.1",
88
+ "postcss-preset-env": "^7.0.1",
89
+ "postcss-px-to-viewport": "^1.1.1",
90
+ "postcss-selector-namespace": "^3.0.1",
91
+ "prompts": "^2.4.2",
92
+ "rc-tools": "^9.6.1-alpha.1",
93
+ "react-app-polyfill": "^3.0.0",
94
+ "react-dev-utils": "^12.0.1",
95
+ "react-refresh": "^0.11.0",
96
+ "resolve": "^1.20.0",
97
+ "resolve-url-loader": "^4.0.0",
98
+ "rollup-plugin-dts": "^4.2.2",
99
+ "rollup-plugin-peer-deps-external": "^2.2.4",
100
+ "rollup-plugin-postcss": "^4.0.2",
101
+ "rollup-plugin-styles": "^4.0.0",
102
+ "rollup-plugin-typescript2": "^0.32.1",
103
+ "sass-loader": "^12.3.0",
104
+ "semver": "^7.3.5",
105
+ "source-map-loader": "^3.0.0",
106
+ "style-loader": "^3.3.1",
107
+ "tailwindcss": "^3.0.2",
108
+ "terser-webpack-plugin": "^5.2.5",
109
+ "typescript": "^4.7.2",
110
+ "web-vitals": "^2.1.4",
111
+ "webpack": "^5.64.4",
112
+ "webpack-dev-server": "^4.6.0",
113
+ "webpack-manifest-plugin": "^4.0.2",
114
+ "workbox-webpack-plugin": "^6.4.1"
115
+ },
38
116
  "files": [
39
117
  "es",
40
118
  "lib",