@gem-sdk/pages 1.42.3-dev.63 → 1.43.0-dev.103

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 (10) hide show
  1. package/dist/cjs/components/builder/Toolbar.js +24 -8
  2. package/dist/cjs/libs/helpers/gen-css.js +12 -2
  3. package/dist/cjs/libs/helpers/gen-fonts.js +12 -5
  4. package/dist/cjs/pages/builder.js +3 -2
  5. package/dist/esm/components/builder/Toolbar.js +24 -8
  6. package/dist/esm/libs/helpers/gen-css.js +12 -2
  7. package/dist/esm/libs/helpers/gen-fonts.js +12 -5
  8. package/dist/esm/pages/builder.js +3 -2
  9. package/dist/types/index.d.ts +5 -2
  10. package/package.json +5 -5
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -379,23 +379,27 @@ const Toolbar = ()=>{
379
379
  countShowOnboarding,
380
380
  onCloseOnboarding
381
381
  ]);
382
- const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
382
+ const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
383
383
  if (marqueeKey) {
384
384
  return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
385
385
  }
386
+ if (articleId) {
387
+ return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
388
+ }
386
389
  return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
387
390
  };
388
- const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
391
+ const setActiveComponent = react.useCallback(async ({ componentUid, productId, articleId, timeAwait = 600, forceReActive, marqueeKey })=>{
389
392
  if (!componentUid) return;
390
393
  const selector = getSelectorComponent({
391
394
  componentUid,
392
395
  productId,
396
+ articleId,
393
397
  marqueeKey
394
398
  });
395
399
  const $component = await waitForElementToExist(selector, timeAwait);
396
400
  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) {
401
+ if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
402
+ if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
399
403
  removeActiveComponent();
400
404
  }
401
405
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
@@ -406,6 +410,7 @@ const Toolbar = ()=>{
406
410
  currentComponentActive.current = {
407
411
  componentUid,
408
412
  productId,
413
+ articleId,
409
414
  marqueeKey
410
415
  };
411
416
  $toolbar.removeAttribute('style');
@@ -427,7 +432,7 @@ const Toolbar = ()=>{
427
432
  }
428
433
  const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
429
434
  // Active same element in product list
430
- if (productId || isChildOfMarquee) {
435
+ if (productId || isChildOfMarquee || articleId) {
431
436
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
432
437
  if ($relatedElements?.length) {
433
438
  $relatedElements.forEach(($relatedElement)=>{
@@ -455,6 +460,7 @@ const Toolbar = ()=>{
455
460
  setActiveComponent({
456
461
  componentUid,
457
462
  productId,
463
+ articleId,
458
464
  timeAwait: 2000,
459
465
  forceReActive: true
460
466
  });
@@ -557,18 +563,27 @@ const Toolbar = ()=>{
557
563
  const isElementInsideProduct = async ()=>{
558
564
  const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
559
565
  const $product = $component?.closest('[data-product-id]');
560
- const productId = $product?.getAttribute('data-product-id') || '';
561
- return productId ? true : false;
566
+ return !!($product?.getAttribute('data-product-id') || '');
567
+ };
568
+ const isElementInsideArticle = async ()=>{
569
+ const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
570
+ const $article = $component?.closest('[data-article-id]');
571
+ return !!($article?.getAttribute('data-article-id') || '');
562
572
  };
563
573
  let productId = '';
574
+ let articleId = '';
564
575
  if (await isElementInsideProduct()) {
565
576
  productId = currentComponentActive.current?.productId || '';
566
577
  }
578
+ if (await isElementInsideArticle()) {
579
+ articleId = currentComponentActive.current?.articleId || '';
580
+ }
567
581
  const event = new CustomEvent('editor:toolbar:force-active-component', {
568
582
  bubbles: true,
569
583
  detail: {
570
584
  componentUid: uid,
571
- productId: productId
585
+ productId,
586
+ articleId
572
587
  }
573
588
  });
574
589
  outHover($parent);
@@ -678,6 +693,7 @@ const Toolbar = ()=>{
678
693
  setActiveComponent({
679
694
  componentUid: detail.componentUid,
680
695
  productId: detail.productId,
696
+ articleId: detail.articleId,
681
697
  marqueeKey: detail.marqueeKey
682
698
  });
683
699
  } else {
package/dist/cjs/libs/helpers/gen-css.js CHANGED
@@ -63,7 +63,15 @@ const getValueByDevice = (data, device)=>{
63
63
  key,
64
64
  value?.family
65
65
  ];
66
- }))
66
+ })),
67
+ theme: {
68
+ font: Object.fromEntries(Object.entries(data?.theme?.font ?? {}).map(([key, value])=>{
69
+ return [
70
+ key,
71
+ value?.family
72
+ ];
73
+ }))
74
+ }
67
75
  };
68
76
  return deviceData;
69
77
  };
@@ -80,7 +88,9 @@ const genCSSVariable = (deviceData)=>{
80
88
  if (value === undefined) return undefined;
81
89
  if ([
82
90
  'font-heading',
83
- 'font-body'
91
+ 'font-body',
92
+ 'theme-font-heading',
93
+ 'theme-font-body'
84
94
  ].includes(key)) {
85
95
  return `--g-${key}: ${quoteFontName(value)}`;
86
96
  }
package/dist/cjs/libs/helpers/gen-fonts.js CHANGED
@@ -18,7 +18,14 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
18
18
  if (Object.prototype.hasOwnProperty.call(groupSetting, attr)) {
19
19
  const value = groupSetting[attr];
20
20
  if (value) {
21
- const customFontFamily = value.custom?.fontFamily;
21
+ let customFontFamily = value.custom?.fontFamily;
22
+ if (typeof customFontFamily === 'string') {
23
+ customFontFamily = {
24
+ value: value.custom?.fontFamily || '',
25
+ type: 'google'
26
+ };
27
+ }
28
+ const fontFamily = customFontFamily?.value;
22
29
  let customFontVariants = value.custom?.fontVariants;
23
30
  if (!customFontVariants?.length) {
24
31
  customFontVariants = [
@@ -35,9 +42,9 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
35
42
  });
36
43
  const customFontWeight = value.custom?.fontWeight && variants.includes(value.custom?.fontWeight) ? value.custom?.fontWeight : variants[0];
37
44
  if (customFontWeight) {
38
- const isExist = fonts.find((item)=>item.family == customFontFamily && item.variants.includes(customFontWeight));
45
+ const isExist = fonts.find((item)=>item.family == fontFamily && item.variants.includes(customFontWeight));
39
46
  if (!isExist) {
40
- const isFontFamily = fonts.find((item)=>item.family == customFontFamily);
47
+ const isFontFamily = fonts.find((item)=>item.family == fontFamily);
41
48
  if (isFontFamily) {
42
49
  isFontFamily.variants.push(customFontWeight);
43
50
  } else {
@@ -50,10 +57,10 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
50
57
  }
51
58
  }
52
59
  fonts.push({
53
- family: customFontFamily,
60
+ family: fontFamily || '',
54
61
  variants: fontVariants,
55
62
  subsets: [],
56
- type: 'google'
63
+ type: customFontFamily.type
57
64
  });
58
65
  }
59
66
  }
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, isOriginTemplate })=>{
18
+ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
19
19
  const [loadSuccess, setLoadSuccess] = react.useState(false);
20
20
  const isDisableHeaderFooter = ()=>{
21
21
  return isThemeSectionEditor;
@@ -60,6 +60,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
60
60
  children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
61
61
  data: sectionData,
62
62
  children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
63
+ pageName: pageName,
63
64
  state: initState,
64
65
  isThemeSectionEditor: isThemeSectionEditor,
65
66
  children: [
@@ -70,7 +71,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
70
71
  className: "builder gp-z-1 gp-relative",
71
72
  children: [
72
73
  !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsxRuntime.jsx("div", {
73
- className: "gp-h-[40px] bg-[#f4f4f4]",
74
+ className: "gp-h-[40px] gp-bg-[#f4f4f4]",
74
75
  children: /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {})
75
76
  }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
76
77
  pageType: pageType,
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -375,23 +375,27 @@ const Toolbar = ()=>{
375
375
  countShowOnboarding,
376
376
  onCloseOnboarding
377
377
  ]);
378
- const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
378
+ const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
379
379
  if (marqueeKey) {
380
380
  return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
381
381
  }
382
+ if (articleId) {
383
+ return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
384
+ }
382
385
  return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
383
386
  };
384
- const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
387
+ const setActiveComponent = useCallback(async ({ componentUid, productId, articleId, timeAwait = 600, forceReActive, marqueeKey })=>{
385
388
  if (!componentUid) return;
386
389
  const selector = getSelectorComponent({
387
390
  componentUid,
388
391
  productId,
392
+ articleId,
389
393
  marqueeKey
390
394
  });
391
395
  const $component = await waitForElementToExist(selector, timeAwait);
392
396
  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) {
397
+ if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
398
+ if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
395
399
  removeActiveComponent();
396
400
  }
397
401
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
@@ -402,6 +406,7 @@ const Toolbar = ()=>{
402
406
  currentComponentActive.current = {
403
407
  componentUid,
404
408
  productId,
409
+ articleId,
405
410
  marqueeKey
406
411
  };
407
412
  $toolbar.removeAttribute('style');
@@ -423,7 +428,7 @@ const Toolbar = ()=>{
423
428
  }
424
429
  const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
425
430
  // Active same element in product list
426
- if (productId || isChildOfMarquee) {
431
+ if (productId || isChildOfMarquee || articleId) {
427
432
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
428
433
  if ($relatedElements?.length) {
429
434
  $relatedElements.forEach(($relatedElement)=>{
@@ -451,6 +456,7 @@ const Toolbar = ()=>{
451
456
  setActiveComponent({
452
457
  componentUid,
453
458
  productId,
459
+ articleId,
454
460
  timeAwait: 2000,
455
461
  forceReActive: true
456
462
  });
@@ -553,18 +559,27 @@ const Toolbar = ()=>{
553
559
  const isElementInsideProduct = async ()=>{
554
560
  const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
555
561
  const $product = $component?.closest('[data-product-id]');
556
- const productId = $product?.getAttribute('data-product-id') || '';
557
- return productId ? true : false;
562
+ return !!($product?.getAttribute('data-product-id') || '');
563
+ };
564
+ const isElementInsideArticle = async ()=>{
565
+ const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
566
+ const $article = $component?.closest('[data-article-id]');
567
+ return !!($article?.getAttribute('data-article-id') || '');
558
568
  };
559
569
  let productId = '';
570
+ let articleId = '';
560
571
  if (await isElementInsideProduct()) {
561
572
  productId = currentComponentActive.current?.productId || '';
562
573
  }
574
+ if (await isElementInsideArticle()) {
575
+ articleId = currentComponentActive.current?.articleId || '';
576
+ }
563
577
  const event = new CustomEvent('editor:toolbar:force-active-component', {
564
578
  bubbles: true,
565
579
  detail: {
566
580
  componentUid: uid,
567
- productId: productId
581
+ productId,
582
+ articleId
568
583
  }
569
584
  });
570
585
  outHover($parent);
@@ -674,6 +689,7 @@ const Toolbar = ()=>{
674
689
  setActiveComponent({
675
690
  componentUid: detail.componentUid,
676
691
  productId: detail.productId,
692
+ articleId: detail.articleId,
677
693
  marqueeKey: detail.marqueeKey
678
694
  });
679
695
  } else {
package/dist/esm/libs/helpers/gen-css.js CHANGED
@@ -61,7 +61,15 @@ const getValueByDevice = (data, device)=>{
61
61
  key,
62
62
  value?.family
63
63
  ];
64
- }))
64
+ })),
65
+ theme: {
66
+ font: Object.fromEntries(Object.entries(data?.theme?.font ?? {}).map(([key, value])=>{
67
+ return [
68
+ key,
69
+ value?.family
70
+ ];
71
+ }))
72
+ }
65
73
  };
66
74
  return deviceData;
67
75
  };
@@ -78,7 +86,9 @@ const genCSSVariable = (deviceData)=>{
78
86
  if (value === undefined) return undefined;
79
87
  if ([
80
88
  'font-heading',
81
- 'font-body'
89
+ 'font-body',
90
+ 'theme-font-heading',
91
+ 'theme-font-body'
82
92
  ].includes(key)) {
83
93
  return `--g-${key}: ${quoteFontName(value)}`;
84
94
  }
package/dist/esm/libs/helpers/gen-fonts.js CHANGED
@@ -16,7 +16,14 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
16
16
  if (Object.prototype.hasOwnProperty.call(groupSetting, attr)) {
17
17
  const value = groupSetting[attr];
18
18
  if (value) {
19
- const customFontFamily = value.custom?.fontFamily;
19
+ let customFontFamily = value.custom?.fontFamily;
20
+ if (typeof customFontFamily === 'string') {
21
+ customFontFamily = {
22
+ value: value.custom?.fontFamily || '',
23
+ type: 'google'
24
+ };
25
+ }
26
+ const fontFamily = customFontFamily?.value;
20
27
  let customFontVariants = value.custom?.fontVariants;
21
28
  if (!customFontVariants?.length) {
22
29
  customFontVariants = [
@@ -33,9 +40,9 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
33
40
  });
34
41
  const customFontWeight = value.custom?.fontWeight && variants.includes(value.custom?.fontWeight) ? value.custom?.fontWeight : variants[0];
35
42
  if (customFontWeight) {
36
- const isExist = fonts.find((item)=>item.family == customFontFamily && item.variants.includes(customFontWeight));
43
+ const isExist = fonts.find((item)=>item.family == fontFamily && item.variants.includes(customFontWeight));
37
44
  if (!isExist) {
38
- const isFontFamily = fonts.find((item)=>item.family == customFontFamily);
45
+ const isFontFamily = fonts.find((item)=>item.family == fontFamily);
39
46
  if (isFontFamily) {
40
47
  isFontFamily.variants.push(customFontWeight);
41
48
  } else {
@@ -48,10 +55,10 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
48
55
  }
49
56
  }
50
57
  fonts.push({
51
- family: customFontFamily,
58
+ family: fontFamily || '',
52
59
  variants: fontVariants,
53
60
  subsets: [],
54
- type: 'google'
61
+ type: customFontFamily.type
55
62
  });
56
63
  }
57
64
  }
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, isOriginTemplate })=>{
16
+ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
17
17
  const [loadSuccess, setLoadSuccess] = useState(false);
18
18
  const isDisableHeaderFooter = ()=>{
19
19
  return isThemeSectionEditor;
@@ -58,6 +58,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
58
58
  children: /*#__PURE__*/ jsx(SectionProvider, {
59
59
  data: sectionData,
60
60
  children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
61
+ pageName: pageName,
61
62
  state: initState,
62
63
  isThemeSectionEditor: isThemeSectionEditor,
63
64
  children: [
@@ -68,7 +69,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
68
69
  className: "builder gp-z-1 gp-relative",
69
70
  children: [
70
71
  !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsx("div", {
71
- className: "gp-h-[40px] bg-[#f4f4f4]",
72
+ className: "gp-h-[40px] gp-bg-[#f4f4f4]",
72
73
  children: /*#__PURE__*/ jsx(Devices, {})
73
74
  }) : /*#__PURE__*/ jsx(Header, {
74
75
  pageType: pageType,
package/dist/types/index.d.ts CHANGED
@@ -176,14 +176,17 @@ type BuilderPageProps = {
176
176
  editorImageToLayout?: boolean;
177
177
  isThemeSectionEditor?: boolean;
178
178
  hiddenToolbar?: boolean;
179
+ pageName: string;
179
180
  isOriginTemplate?: boolean;
180
181
  };
181
182
  declare const BuilderPage: React.FC<BuilderPageProps>;
182
183
 
183
184
  declare const getStaticPaths: GetStaticPaths;
184
185
 
186
+ type TypographyV2FontFamilyType = 'google' | 'custom' | 'theme';
187
+
185
188
  type FontItem = {
186
- type: 'google' | 'custom';
189
+ type: TypographyV2FontFamilyType;
187
190
  family: string;
188
191
  variants: string[];
189
192
  subsets: string[];
@@ -194,7 +197,7 @@ type FontOption = {
194
197
  effect?: string;
195
198
  };
196
199
  declare function getFonts(fonts: FontItem[], option?: FontOption, isImportFontByUrl?: boolean): Promise<string>;
197
- declare const getFontFromGlobalStyle: (data?: string) => Promise<string> | "";
200
+ declare const getFontFromGlobalStyle: (data?: string) => "" | Promise<string>;
198
201
 
199
202
  declare const getFontsFromDataBuilder: (dataBuilder: Record<string, any>) => FontItem[];
200
203
  declare const getFontFromGroupSetting: (fonts: FontItem[], groupSetting: Record<string, any>) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.42.3-dev.63",
3
+ "version": "1.43.0-dev.103",
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.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"
29
+ "@gem-sdk/core": "1.43.0-dev.102",
30
+ "@gem-sdk/plugin-cookie-bar": "1.43.0-dev.102",
31
+ "@gem-sdk/plugin-quick-view": "1.43.0-dev.102",
32
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.43.0-dev.102"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "next": ">=13"