@gem-sdk/core 1.23.0-staging.133 → 1.23.0-staging.147
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.
|
@@ -25,24 +25,6 @@ const isSection = (el)=>{
|
|
|
25
25
|
const tag = el.getAttribute('data-component-tag');
|
|
26
26
|
return tag === 'Section';
|
|
27
27
|
};
|
|
28
|
-
const isOverToolbarPosition = (el, parent)=>{
|
|
29
|
-
const rect = el.getBoundingClientRect();
|
|
30
|
-
const rectP = parent.getBoundingClientRect();
|
|
31
|
-
// 32px = toolbar active height
|
|
32
|
-
return rect.top - rectP.top < 32 + 1;
|
|
33
|
-
};
|
|
34
|
-
const findOverflowParent = (element, initEl)=>{
|
|
35
|
-
const thisEl = element;
|
|
36
|
-
const origEl = initEl || thisEl;
|
|
37
|
-
if (!thisEl) return;
|
|
38
|
-
if (isSection(thisEl)) return;
|
|
39
|
-
if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
|
|
40
|
-
if (thisEl.parentElement) {
|
|
41
|
-
return findOverflowParent(thisEl.parentElement, origEl);
|
|
42
|
-
} else {
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
28
|
const ComponentToolbarPreview = ({ ...props })=>{
|
|
47
29
|
const isThemeSection = props.isThemeSection;
|
|
48
30
|
const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
|
|
@@ -53,12 +35,32 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
53
35
|
const [isShowParent, setIsShowParent] = react.useState(false);
|
|
54
36
|
const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
|
|
55
37
|
const [parents, setParents] = react.useState([]);
|
|
38
|
+
const isOverToolbarPosition = (el, parent)=>{
|
|
39
|
+
const parentLenght = parents.length;
|
|
40
|
+
const rect = el.getBoundingClientRect();
|
|
41
|
+
const rectP = parent.getBoundingClientRect();
|
|
42
|
+
// 36px = toolbar active height + 4 spaces
|
|
43
|
+
return rect.top - rectP.top < parentLenght * 36;
|
|
44
|
+
};
|
|
45
|
+
const findOverflowParent = (element, initEl)=>{
|
|
46
|
+
const thisEl = element;
|
|
47
|
+
const origEl = initEl || thisEl;
|
|
48
|
+
if (!thisEl) return;
|
|
49
|
+
if (isSection(thisEl)) return;
|
|
50
|
+
if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
|
|
51
|
+
if (thisEl.parentElement) {
|
|
52
|
+
return findOverflowParent(thisEl.parentElement, origEl);
|
|
53
|
+
} else {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
56
57
|
// Get parents
|
|
57
58
|
const onActiveComponent = react.useCallback((e)=>{
|
|
58
59
|
const detail = e.detail;
|
|
59
60
|
if (detail?.componentUid == props.uid) {
|
|
60
61
|
const currentParents = getParents(props.uid).filter((parent)=>{
|
|
61
62
|
if (parent.uid === 'ROOT') return false;
|
|
63
|
+
if (parent.tag === 'Section' && isThemeSectionEditor) return false;
|
|
62
64
|
if (parent.editorConfigs?.toolbar?.hide) return false;
|
|
63
65
|
if (parent.editorConfigs?.component?.noSetting) return false;
|
|
64
66
|
return true;
|
|
@@ -71,7 +73,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
71
73
|
}, [
|
|
72
74
|
setParents,
|
|
73
75
|
getParents,
|
|
74
|
-
props.uid
|
|
76
|
+
props.uid,
|
|
77
|
+
isThemeSectionEditor
|
|
75
78
|
]);
|
|
76
79
|
react.useEffect(()=>{
|
|
77
80
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -114,7 +117,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
114
117
|
setIsShowParentRevert(true);
|
|
115
118
|
} else {
|
|
116
119
|
const rect = $toolbar.getBoundingClientRect();
|
|
117
|
-
if (rect.top < parents.length *
|
|
120
|
+
if (rect.top < parents.length * 36) {
|
|
118
121
|
setIsShowParentRevert(true);
|
|
119
122
|
} else {
|
|
120
123
|
setIsShowParentRevert(false);
|
|
@@ -280,21 +283,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
280
283
|
})
|
|
281
284
|
]
|
|
282
285
|
}),
|
|
283
|
-
isShowParent && parents.map((parent, index)
|
|
284
|
-
// Update count columns of Row
|
|
285
|
-
const parentLength = parent?.childrens?.length ?? 0;
|
|
286
|
-
let parent_label = parent.label;
|
|
287
|
-
if (parent.label === 'Row') {
|
|
288
|
-
parent_label = parentLength <= 1 ? parent.label + ' ' + parentLength + ' col' : parent.label + ' ' + parentLength + ' cols';
|
|
289
|
-
}
|
|
290
|
-
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
286
|
+
isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
291
287
|
"data-toolbar-parent": true,
|
|
292
288
|
"data-parent-uid": parent.uid,
|
|
293
289
|
"data-toolbar-theme-section": isThemeSectionEditor,
|
|
294
|
-
"data-toolbar-parent-revert": isShowParentRevert,
|
|
295
290
|
style: {
|
|
296
|
-
top: !isShowParentRevert ? `${-
|
|
297
|
-
: `${36 * (index + 1)}px`
|
|
291
|
+
top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
|
|
298
292
|
},
|
|
299
293
|
children: [
|
|
300
294
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
@@ -334,11 +328,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
334
328
|
}),
|
|
335
329
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
336
330
|
"data-toolbar-name": true,
|
|
337
|
-
children:
|
|
331
|
+
children: parent.label
|
|
338
332
|
})
|
|
339
333
|
]
|
|
340
|
-
}, parent.uid)
|
|
341
|
-
}),
|
|
334
|
+
}, parent.uid)),
|
|
342
335
|
props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
|
|
343
336
|
...props
|
|
344
337
|
}),
|
|
@@ -426,8 +419,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
426
419
|
viewBox: "0 0 16 16",
|
|
427
420
|
fill: "none",
|
|
428
421
|
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
429
|
-
d: "M8.
|
|
430
|
-
fill: "
|
|
422
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
423
|
+
fill: "currentColor"
|
|
431
424
|
})
|
|
432
425
|
})
|
|
433
426
|
}),
|
|
@@ -446,8 +439,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
446
439
|
viewBox: "0 0 16 16",
|
|
447
440
|
fill: "none",
|
|
448
441
|
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
449
|
-
d: "M8.
|
|
450
|
-
fill: "
|
|
442
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
443
|
+
fill: "currentColor"
|
|
451
444
|
})
|
|
452
445
|
})
|
|
453
446
|
})
|
|
@@ -20,7 +20,6 @@ const disableWrap = [
|
|
|
20
20
|
'Header',
|
|
21
21
|
'HeroBanner',
|
|
22
22
|
'Icon',
|
|
23
|
-
'IconList',
|
|
24
23
|
'HTMLCode',
|
|
25
24
|
'IconListHoz',
|
|
26
25
|
'IconListItem',
|
|
@@ -46,6 +45,7 @@ const customRenderChildren = [
|
|
|
46
45
|
];
|
|
47
46
|
const excludeApplyStyle = [
|
|
48
47
|
'IconListV2',
|
|
48
|
+
'IconList',
|
|
49
49
|
'Accordion'
|
|
50
50
|
];
|
|
51
51
|
|
|
@@ -23,24 +23,6 @@ const isSection = (el)=>{
|
|
|
23
23
|
const tag = el.getAttribute('data-component-tag');
|
|
24
24
|
return tag === 'Section';
|
|
25
25
|
};
|
|
26
|
-
const isOverToolbarPosition = (el, parent)=>{
|
|
27
|
-
const rect = el.getBoundingClientRect();
|
|
28
|
-
const rectP = parent.getBoundingClientRect();
|
|
29
|
-
// 32px = toolbar active height
|
|
30
|
-
return rect.top - rectP.top < 32 + 1;
|
|
31
|
-
};
|
|
32
|
-
const findOverflowParent = (element, initEl)=>{
|
|
33
|
-
const thisEl = element;
|
|
34
|
-
const origEl = initEl || thisEl;
|
|
35
|
-
if (!thisEl) return;
|
|
36
|
-
if (isSection(thisEl)) return;
|
|
37
|
-
if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
|
|
38
|
-
if (thisEl.parentElement) {
|
|
39
|
-
return findOverflowParent(thisEl.parentElement, origEl);
|
|
40
|
-
} else {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
26
|
const ComponentToolbarPreview = ({ ...props })=>{
|
|
45
27
|
const isThemeSection = props.isThemeSection;
|
|
46
28
|
const editingPageType = useShopStore((s)=>s.pageType);
|
|
@@ -51,12 +33,32 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
51
33
|
const [isShowParent, setIsShowParent] = useState(false);
|
|
52
34
|
const [isShowParentRevert, setIsShowParentRevert] = useState(false);
|
|
53
35
|
const [parents, setParents] = useState([]);
|
|
36
|
+
const isOverToolbarPosition = (el, parent)=>{
|
|
37
|
+
const parentLenght = parents.length;
|
|
38
|
+
const rect = el.getBoundingClientRect();
|
|
39
|
+
const rectP = parent.getBoundingClientRect();
|
|
40
|
+
// 36px = toolbar active height + 4 spaces
|
|
41
|
+
return rect.top - rectP.top < parentLenght * 36;
|
|
42
|
+
};
|
|
43
|
+
const findOverflowParent = (element, initEl)=>{
|
|
44
|
+
const thisEl = element;
|
|
45
|
+
const origEl = initEl || thisEl;
|
|
46
|
+
if (!thisEl) return;
|
|
47
|
+
if (isSection(thisEl)) return;
|
|
48
|
+
if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
|
|
49
|
+
if (thisEl.parentElement) {
|
|
50
|
+
return findOverflowParent(thisEl.parentElement, origEl);
|
|
51
|
+
} else {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
};
|
|
54
55
|
// Get parents
|
|
55
56
|
const onActiveComponent = useCallback((e)=>{
|
|
56
57
|
const detail = e.detail;
|
|
57
58
|
if (detail?.componentUid == props.uid) {
|
|
58
59
|
const currentParents = getParents(props.uid).filter((parent)=>{
|
|
59
60
|
if (parent.uid === 'ROOT') return false;
|
|
61
|
+
if (parent.tag === 'Section' && isThemeSectionEditor) return false;
|
|
60
62
|
if (parent.editorConfigs?.toolbar?.hide) return false;
|
|
61
63
|
if (parent.editorConfigs?.component?.noSetting) return false;
|
|
62
64
|
return true;
|
|
@@ -69,7 +71,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
69
71
|
}, [
|
|
70
72
|
setParents,
|
|
71
73
|
getParents,
|
|
72
|
-
props.uid
|
|
74
|
+
props.uid,
|
|
75
|
+
isThemeSectionEditor
|
|
73
76
|
]);
|
|
74
77
|
useEffect(()=>{
|
|
75
78
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -112,7 +115,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
112
115
|
setIsShowParentRevert(true);
|
|
113
116
|
} else {
|
|
114
117
|
const rect = $toolbar.getBoundingClientRect();
|
|
115
|
-
if (rect.top < parents.length *
|
|
118
|
+
if (rect.top < parents.length * 36) {
|
|
116
119
|
setIsShowParentRevert(true);
|
|
117
120
|
} else {
|
|
118
121
|
setIsShowParentRevert(false);
|
|
@@ -278,21 +281,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
278
281
|
})
|
|
279
282
|
]
|
|
280
283
|
}),
|
|
281
|
-
isShowParent && parents.map((parent, index)
|
|
282
|
-
// Update count columns of Row
|
|
283
|
-
const parentLength = parent?.childrens?.length ?? 0;
|
|
284
|
-
let parent_label = parent.label;
|
|
285
|
-
if (parent.label === 'Row') {
|
|
286
|
-
parent_label = parentLength <= 1 ? parent.label + ' ' + parentLength + ' col' : parent.label + ' ' + parentLength + ' cols';
|
|
287
|
-
}
|
|
288
|
-
return /*#__PURE__*/ jsxs("div", {
|
|
284
|
+
isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxs("div", {
|
|
289
285
|
"data-toolbar-parent": true,
|
|
290
286
|
"data-parent-uid": parent.uid,
|
|
291
287
|
"data-toolbar-theme-section": isThemeSectionEditor,
|
|
292
|
-
"data-toolbar-parent-revert": isShowParentRevert,
|
|
293
288
|
style: {
|
|
294
|
-
top: !isShowParentRevert ? `${-
|
|
295
|
-
: `${36 * (index + 1)}px`
|
|
289
|
+
top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
|
|
296
290
|
},
|
|
297
291
|
children: [
|
|
298
292
|
/*#__PURE__*/ jsx("div", {
|
|
@@ -332,11 +326,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
332
326
|
}),
|
|
333
327
|
/*#__PURE__*/ jsx("div", {
|
|
334
328
|
"data-toolbar-name": true,
|
|
335
|
-
children:
|
|
329
|
+
children: parent.label
|
|
336
330
|
})
|
|
337
331
|
]
|
|
338
|
-
}, parent.uid)
|
|
339
|
-
}),
|
|
332
|
+
}, parent.uid)),
|
|
340
333
|
props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
|
|
341
334
|
...props
|
|
342
335
|
}),
|
|
@@ -424,8 +417,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
424
417
|
viewBox: "0 0 16 16",
|
|
425
418
|
fill: "none",
|
|
426
419
|
children: /*#__PURE__*/ jsx("path", {
|
|
427
|
-
d: "M8.
|
|
428
|
-
fill: "
|
|
420
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
421
|
+
fill: "currentColor"
|
|
429
422
|
})
|
|
430
423
|
})
|
|
431
424
|
}),
|
|
@@ -444,8 +437,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
444
437
|
viewBox: "0 0 16 16",
|
|
445
438
|
fill: "none",
|
|
446
439
|
children: /*#__PURE__*/ jsx("path", {
|
|
447
|
-
d: "M8.
|
|
448
|
-
fill: "
|
|
440
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
441
|
+
fill: "currentColor"
|
|
449
442
|
})
|
|
450
443
|
})
|
|
451
444
|
})
|
|
@@ -18,7 +18,6 @@ const disableWrap = [
|
|
|
18
18
|
'Header',
|
|
19
19
|
'HeroBanner',
|
|
20
20
|
'Icon',
|
|
21
|
-
'IconList',
|
|
22
21
|
'HTMLCode',
|
|
23
22
|
'IconListHoz',
|
|
24
23
|
'IconListItem',
|
|
@@ -44,6 +43,7 @@ const customRenderChildren = [
|
|
|
44
43
|
];
|
|
45
44
|
const excludeApplyStyle = [
|
|
46
45
|
'IconListV2',
|
|
46
|
+
'IconList',
|
|
47
47
|
'Accordion'
|
|
48
48
|
];
|
|
49
49
|
|