@gem-sdk/pages 1.42.0 → 1.42.3-dev.63

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 (8) hide show
  1. package/dist/cjs/components/builder/Toolbar.js +34 -31
  2. package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +2 -2
  3. package/dist/cjs/pages/builder.js +5 -3
  4. package/dist/esm/components/builder/Toolbar.js +34 -31
  5. package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +2 -2
  6. package/dist/esm/pages/builder.js +5 -3
  7. package/dist/types/index.d.ts +1 -0
  8. package/package.json +5 -5
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -85,7 +85,7 @@ const Toolbar = ()=>{
85
85
  }
86
86
  }
87
87
  };
88
- const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
88
+ const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
89
89
  if (!$component && !componentUid) return;
90
90
  if (!$component) {
91
91
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -102,7 +102,7 @@ const Toolbar = ()=>{
102
102
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
103
103
  const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
104
104
  const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
105
- if (isThemeSection && $themeSectionStatus) {
105
+ if (isPreventSection && $themeSectionStatus) {
106
106
  $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
107
107
  }
108
108
  if ($toolbar) {
@@ -124,7 +124,7 @@ const Toolbar = ()=>{
124
124
  if (isParent) {
125
125
  $outline.setAttribute('data-outline-parent-hover', 'true');
126
126
  }
127
- if (isThemeSection) {
127
+ if (isPreventSection) {
128
128
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
129
129
  }
130
130
  if (focus) {
@@ -379,25 +379,25 @@ const Toolbar = ()=>{
379
379
  countShowOnboarding,
380
380
  onCloseOnboarding
381
381
  ]);
382
- const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
383
- if (!componentUid) return;
384
- let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`, timeAwait);
385
- // check element fetch data: product, product list
386
- if (!$component) {
387
- const isLoading = document.querySelector(`.gp-loading-placeholder`);
388
- if (!isLoading) {
389
- return;
390
- }
391
- if (isLoading) {
392
- // await element onload
393
- $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
394
- }
382
+ const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
383
+ if (marqueeKey) {
384
+ return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
395
385
  }
396
- if (!$component) {
397
- return;
386
+ return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
387
+ };
388
+ const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
389
+ if (!componentUid) return;
390
+ const selector = getSelectorComponent({
391
+ componentUid,
392
+ productId,
393
+ marqueeKey
394
+ });
395
+ const $component = await waitForElementToExist(selector, timeAwait);
396
+ if (!$component) return;
397
+ if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
398
+ if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
399
+ removeActiveComponent();
398
400
  }
399
- if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
400
- if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
401
401
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
402
402
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
403
403
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -405,7 +405,8 @@ const Toolbar = ()=>{
405
405
  if ($toolbar) {
406
406
  currentComponentActive.current = {
407
407
  componentUid,
408
- productId
408
+ productId,
409
+ marqueeKey
409
410
  };
410
411
  $toolbar.removeAttribute('style');
411
412
  $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -424,8 +425,9 @@ const Toolbar = ()=>{
424
425
  if ($btnAddBottom) {
425
426
  $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
426
427
  }
428
+ const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
427
429
  // Active same element in product list
428
- if (productId) {
430
+ if (productId || isChildOfMarquee) {
429
431
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
430
432
  if ($relatedElements?.length) {
431
433
  $relatedElements.forEach(($relatedElement)=>{
@@ -632,23 +634,23 @@ const Toolbar = ()=>{
632
634
  }
633
635
  }
634
636
  }
635
- const $themeSection = $target.closest('[data-theme-section]');
636
- if ($themeSection) {
637
+ const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
638
+ if ($preventSection) {
637
639
  setHoverComponent({
638
- $component: $themeSection,
640
+ $component: $preventSection,
639
641
  focus: true,
640
- isThemeSection: true
642
+ isPreventSection: true
641
643
  });
642
644
  } else {
643
645
  return;
644
646
  }
645
647
  }
646
- const $themeSection = $target.closest('[data-theme-section]');
647
- if ($themeSection) {
648
+ const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
649
+ if ($preventSection) {
648
650
  setHoverComponent({
649
- $component: $themeSection,
651
+ $component: $preventSection,
650
652
  focus: true,
651
- isThemeSection: true
653
+ isPreventSection: true
652
654
  });
653
655
  } else {
654
656
  setHoverComponent({
@@ -675,7 +677,8 @@ const Toolbar = ()=>{
675
677
  if (detail?.componentUid) {
676
678
  setActiveComponent({
677
679
  componentUid: detail.componentUid,
678
- productId: detail.productId
680
+ productId: detail.productId,
681
+ marqueeKey: detail.marqueeKey
679
682
  });
680
683
  } else {
681
684
  removeActiveComponent();
package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js CHANGED
@@ -89,12 +89,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
89
89
  }),
90
90
  ACTIONS_DATA.map((action)=>{
91
91
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
92
- className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
92
+ className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
93
93
  id: action.id,
94
94
  "aria-hidden": true,
95
95
  children: [
96
96
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
97
- className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
97
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121] mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
98
98
  children: [
99
99
  action.title,
100
100
  action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
package/dist/cjs/pages/builder.js CHANGED
@@ -15,7 +15,7 @@ var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionI
15
15
  var Toolbar = require('../components/builder/Toolbar.js');
16
16
  var SwitchView = require('../components/builder/SwitchView.js');
17
17
 
18
- const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
18
+ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, isOriginTemplate })=>{
19
19
  const [loadSuccess, setLoadSuccess] = react.useState(false);
20
20
  const isDisableHeaderFooter = ()=>{
21
21
  return isThemeSectionEditor;
@@ -73,7 +73,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
73
73
  className: "gp-h-[40px] bg-[#f4f4f4]",
74
74
  children: /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {})
75
75
  }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
76
- pageType: pageType
76
+ pageType: pageType,
77
+ isOriginTemplate: isOriginTemplate
77
78
  })),
78
79
  /*#__PURE__*/ jsxRuntime.jsx("div", {
79
80
  id: "storefront",
@@ -96,7 +97,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
96
97
  id: "visual-content"
97
98
  }),
98
99
  !isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {
99
- pageType: pageType
100
+ pageType: pageType,
101
+ isOriginTemplate: isOriginTemplate
100
102
  })
101
103
  ]
102
104
  })
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -81,7 +81,7 @@ const Toolbar = ()=>{
81
81
  }
82
82
  }
83
83
  };
84
- const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
84
+ const setHoverComponent = useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
85
85
  if (!$component && !componentUid) return;
86
86
  if (!$component) {
87
87
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -98,7 +98,7 @@ const Toolbar = ()=>{
98
98
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
99
99
  const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
100
100
  const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
101
- if (isThemeSection && $themeSectionStatus) {
101
+ if (isPreventSection && $themeSectionStatus) {
102
102
  $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
103
103
  }
104
104
  if ($toolbar) {
@@ -120,7 +120,7 @@ const Toolbar = ()=>{
120
120
  if (isParent) {
121
121
  $outline.setAttribute('data-outline-parent-hover', 'true');
122
122
  }
123
- if (isThemeSection) {
123
+ if (isPreventSection) {
124
124
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
125
125
  }
126
126
  if (focus) {
@@ -375,25 +375,25 @@ const Toolbar = ()=>{
375
375
  countShowOnboarding,
376
376
  onCloseOnboarding
377
377
  ]);
378
- const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
379
- if (!componentUid) return;
380
- let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`, timeAwait);
381
- // check element fetch data: product, product list
382
- if (!$component) {
383
- const isLoading = document.querySelector(`.gp-loading-placeholder`);
384
- if (!isLoading) {
385
- return;
386
- }
387
- if (isLoading) {
388
- // await element onload
389
- $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
390
- }
378
+ const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
379
+ if (marqueeKey) {
380
+ return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
391
381
  }
392
- if (!$component) {
393
- return;
382
+ return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
383
+ };
384
+ const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
385
+ if (!componentUid) return;
386
+ const selector = getSelectorComponent({
387
+ componentUid,
388
+ productId,
389
+ marqueeKey
390
+ });
391
+ const $component = await waitForElementToExist(selector, timeAwait);
392
+ if (!$component) return;
393
+ if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
394
+ if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
395
+ removeActiveComponent();
394
396
  }
395
- if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
396
- if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
397
397
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
398
398
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
399
399
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -401,7 +401,8 @@ const Toolbar = ()=>{
401
401
  if ($toolbar) {
402
402
  currentComponentActive.current = {
403
403
  componentUid,
404
- productId
404
+ productId,
405
+ marqueeKey
405
406
  };
406
407
  $toolbar.removeAttribute('style');
407
408
  $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -420,8 +421,9 @@ const Toolbar = ()=>{
420
421
  if ($btnAddBottom) {
421
422
  $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
422
423
  }
424
+ const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
423
425
  // Active same element in product list
424
- if (productId) {
426
+ if (productId || isChildOfMarquee) {
425
427
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
426
428
  if ($relatedElements?.length) {
427
429
  $relatedElements.forEach(($relatedElement)=>{
@@ -628,23 +630,23 @@ const Toolbar = ()=>{
628
630
  }
629
631
  }
630
632
  }
631
- const $themeSection = $target.closest('[data-theme-section]');
632
- if ($themeSection) {
633
+ const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
634
+ if ($preventSection) {
633
635
  setHoverComponent({
634
- $component: $themeSection,
636
+ $component: $preventSection,
635
637
  focus: true,
636
- isThemeSection: true
638
+ isPreventSection: true
637
639
  });
638
640
  } else {
639
641
  return;
640
642
  }
641
643
  }
642
- const $themeSection = $target.closest('[data-theme-section]');
643
- if ($themeSection) {
644
+ const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
645
+ if ($preventSection) {
644
646
  setHoverComponent({
645
- $component: $themeSection,
647
+ $component: $preventSection,
646
648
  focus: true,
647
- isThemeSection: true
649
+ isPreventSection: true
648
650
  });
649
651
  } else {
650
652
  setHoverComponent({
@@ -671,7 +673,8 @@ const Toolbar = ()=>{
671
673
  if (detail?.componentUid) {
672
674
  setActiveComponent({
673
675
  componentUid: detail.componentUid,
674
- productId: detail.productId
676
+ productId: detail.productId,
677
+ marqueeKey: detail.marqueeKey
675
678
  });
676
679
  } else {
677
680
  removeActiveComponent();
package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js CHANGED
@@ -85,12 +85,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
85
85
  }),
86
86
  ACTIONS_DATA.map((action)=>{
87
87
  return /*#__PURE__*/ jsxs("div", {
88
- className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
88
+ className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
89
89
  id: action.id,
90
90
  "aria-hidden": true,
91
91
  children: [
92
92
  /*#__PURE__*/ jsxs("div", {
93
- className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
93
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121] mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
94
94
  children: [
95
95
  action.title,
96
96
  action.hasAILogo && /*#__PURE__*/ jsxs("svg", {
package/dist/esm/pages/builder.js CHANGED
@@ -13,7 +13,7 @@ import AddSectionImageToLayout from '../components/image-to-layout/AddSectionIma
13
13
  import Toolbar from '../components/builder/Toolbar.js';
14
14
  import Devices from '../components/builder/SwitchView.js';
15
15
 
16
- const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
16
+ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, isOriginTemplate })=>{
17
17
  const [loadSuccess, setLoadSuccess] = useState(false);
18
18
  const isDisableHeaderFooter = ()=>{
19
19
  return isThemeSectionEditor;
@@ -71,7 +71,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
71
71
  className: "gp-h-[40px] bg-[#f4f4f4]",
72
72
  children: /*#__PURE__*/ jsx(Devices, {})
73
73
  }) : /*#__PURE__*/ jsx(Header, {
74
- pageType: pageType
74
+ pageType: pageType,
75
+ isOriginTemplate: isOriginTemplate
75
76
  })),
76
77
  /*#__PURE__*/ jsx("div", {
77
78
  id: "storefront",
@@ -94,7 +95,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
94
95
  id: "visual-content"
95
96
  }),
96
97
  !isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsx(Footer, {
97
- pageType: pageType
98
+ pageType: pageType,
99
+ isOriginTemplate: isOriginTemplate
98
100
  })
99
101
  ]
100
102
  })
package/dist/types/index.d.ts CHANGED
@@ -176,6 +176,7 @@ type BuilderPageProps = {
176
176
  editorImageToLayout?: boolean;
177
177
  isThemeSectionEditor?: boolean;
178
178
  hiddenToolbar?: boolean;
179
+ isOriginTemplate?: boolean;
179
180
  };
180
181
  declare const BuilderPage: React.FC<BuilderPageProps>;
181
182
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.42.0",
3
+ "version": "1.42.3-dev.63",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
26
26
  "next": "latest"
27
27
  },
28
28
  "devDependencies": {
29
- "@gem-sdk/core": "1.42.0",
30
- "@gem-sdk/plugin-cookie-bar": "1.40.0",
31
- "@gem-sdk/plugin-quick-view": "1.40.0",
32
- "@gem-sdk/plugin-sticky-add-to-cart": "1.40.0"
29
+ "@gem-sdk/core": "1.42.3-dev.63",
30
+ "@gem-sdk/plugin-cookie-bar": "1.42.3-dev.63",
31
+ "@gem-sdk/plugin-quick-view": "1.42.3-dev.63",
32
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.42.3-dev.63"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "next": ">=13"