@gem-sdk/core 1.23.0-staging.135 → 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.
Files changed (3) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +31 -38
  2. package/dist/esm/components/ComponentToolbarPreview.js +31 -38
  3. package/package.json +1 -1
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -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 * 24) {
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 ? `${-36 * (index + 1)}px` // 32 height + 4 spacing
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: parent_label
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.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
430
- fill: "#212121"
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.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
450
- fill: "#212121"
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
  })
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -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 * 24) {
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 ? `${-36 * (index + 1)}px` // 32 height + 4 spacing
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: parent_label
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.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
428
- fill: "#212121"
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.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
448
- fill: "#212121"
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
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.23.0-staging.135",
3
+ "version": "1.23.0-staging.147",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",