@gem-sdk/pages 1.43.0-dev.80 → 1.43.0-staging.4
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.
- package/dist/cjs/components/builder/Toolbar.js +31 -34
- package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +2 -2
- package/dist/cjs/libs/helpers/gen-css.js +2 -12
- package/dist/cjs/libs/helpers/gen-fonts.js +5 -12
- package/dist/cjs/pages/builder.js +3 -5
- package/dist/esm/components/builder/Toolbar.js +31 -34
- package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +2 -2
- package/dist/esm/libs/helpers/gen-css.js +2 -12
- package/dist/esm/libs/helpers/gen-fonts.js +5 -12
- package/dist/esm/pages/builder.js +3 -5
- package/dist/types/index.d.ts +2 -5
- package/package.json +5 -5
|
@@ -85,7 +85,7 @@ const Toolbar = ()=>{
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
|
-
const setHoverComponent = react.useCallback(({ $component, componentUid, focus,
|
|
88
|
+
const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, 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 (
|
|
105
|
+
if (isThemeSection && $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 (
|
|
127
|
+
if (isThemeSection) {
|
|
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
|
|
383
|
-
if (marqueeKey) {
|
|
384
|
-
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
385
|
-
}
|
|
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 })=>{
|
|
382
|
+
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
|
|
389
383
|
if (!componentUid) return;
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
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
|
+
}
|
|
400
395
|
}
|
|
396
|
+
if (!$component) {
|
|
397
|
+
return;
|
|
398
|
+
}
|
|
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,8 +405,7 @@ const Toolbar = ()=>{
|
|
|
405
405
|
if ($toolbar) {
|
|
406
406
|
currentComponentActive.current = {
|
|
407
407
|
componentUid,
|
|
408
|
-
productId
|
|
409
|
-
marqueeKey
|
|
408
|
+
productId
|
|
410
409
|
};
|
|
411
410
|
$toolbar.removeAttribute('style');
|
|
412
411
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -425,9 +424,8 @@ const Toolbar = ()=>{
|
|
|
425
424
|
if ($btnAddBottom) {
|
|
426
425
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
427
426
|
}
|
|
428
|
-
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
429
427
|
// Active same element in product list
|
|
430
|
-
if (productId
|
|
428
|
+
if (productId) {
|
|
431
429
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
432
430
|
if ($relatedElements?.length) {
|
|
433
431
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -634,23 +632,23 @@ const Toolbar = ()=>{
|
|
|
634
632
|
}
|
|
635
633
|
}
|
|
636
634
|
}
|
|
637
|
-
const $
|
|
638
|
-
if ($
|
|
635
|
+
const $themeSection = $target.closest('[data-theme-section]');
|
|
636
|
+
if ($themeSection) {
|
|
639
637
|
setHoverComponent({
|
|
640
|
-
$component: $
|
|
638
|
+
$component: $themeSection,
|
|
641
639
|
focus: true,
|
|
642
|
-
|
|
640
|
+
isThemeSection: true
|
|
643
641
|
});
|
|
644
642
|
} else {
|
|
645
643
|
return;
|
|
646
644
|
}
|
|
647
645
|
}
|
|
648
|
-
const $
|
|
649
|
-
if ($
|
|
646
|
+
const $themeSection = $target.closest('[data-theme-section]');
|
|
647
|
+
if ($themeSection) {
|
|
650
648
|
setHoverComponent({
|
|
651
|
-
$component: $
|
|
649
|
+
$component: $themeSection,
|
|
652
650
|
focus: true,
|
|
653
|
-
|
|
651
|
+
isThemeSection: true
|
|
654
652
|
});
|
|
655
653
|
} else {
|
|
656
654
|
setHoverComponent({
|
|
@@ -677,8 +675,7 @@ const Toolbar = ()=>{
|
|
|
677
675
|
if (detail?.componentUid) {
|
|
678
676
|
setActiveComponent({
|
|
679
677
|
componentUid: detail.componentUid,
|
|
680
|
-
productId: detail.productId
|
|
681
|
-
marqueeKey: detail.marqueeKey
|
|
678
|
+
productId: detail.productId
|
|
682
679
|
});
|
|
683
680
|
} else {
|
|
684
681
|
removeActiveComponent();
|
|
@@ -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]
|
|
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'}`,
|
|
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]",
|
|
98
98
|
children: [
|
|
99
99
|
action.title,
|
|
100
100
|
action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
@@ -63,15 +63,7 @@ const getValueByDevice = (data, device)=>{
|
|
|
63
63
|
key,
|
|
64
64
|
value?.family
|
|
65
65
|
];
|
|
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
|
-
}
|
|
66
|
+
}))
|
|
75
67
|
};
|
|
76
68
|
return deviceData;
|
|
77
69
|
};
|
|
@@ -88,9 +80,7 @@ const genCSSVariable = (deviceData)=>{
|
|
|
88
80
|
if (value === undefined) return undefined;
|
|
89
81
|
if ([
|
|
90
82
|
'font-heading',
|
|
91
|
-
'font-body'
|
|
92
|
-
'theme-font-heading',
|
|
93
|
-
'theme-font-body'
|
|
83
|
+
'font-body'
|
|
94
84
|
].includes(key)) {
|
|
95
85
|
return `--g-${key}: ${quoteFontName(value)}`;
|
|
96
86
|
}
|
|
@@ -18,14 +18,7 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
|
18
18
|
if (Object.prototype.hasOwnProperty.call(groupSetting, attr)) {
|
|
19
19
|
const value = groupSetting[attr];
|
|
20
20
|
if (value) {
|
|
21
|
-
|
|
22
|
-
if (typeof customFontFamily === 'string') {
|
|
23
|
-
customFontFamily = {
|
|
24
|
-
value: value.custom?.fontFamily || '',
|
|
25
|
-
type: 'google'
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
const fontFamily = customFontFamily?.value;
|
|
21
|
+
const customFontFamily = value.custom?.fontFamily;
|
|
29
22
|
let customFontVariants = value.custom?.fontVariants;
|
|
30
23
|
if (!customFontVariants?.length) {
|
|
31
24
|
customFontVariants = [
|
|
@@ -42,9 +35,9 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
|
42
35
|
});
|
|
43
36
|
const customFontWeight = value.custom?.fontWeight && variants.includes(value.custom?.fontWeight) ? value.custom?.fontWeight : variants[0];
|
|
44
37
|
if (customFontWeight) {
|
|
45
|
-
const isExist = fonts.find((item)=>item.family ==
|
|
38
|
+
const isExist = fonts.find((item)=>item.family == customFontFamily && item.variants.includes(customFontWeight));
|
|
46
39
|
if (!isExist) {
|
|
47
|
-
const isFontFamily = fonts.find((item)=>item.family ==
|
|
40
|
+
const isFontFamily = fonts.find((item)=>item.family == customFontFamily);
|
|
48
41
|
if (isFontFamily) {
|
|
49
42
|
isFontFamily.variants.push(customFontWeight);
|
|
50
43
|
} else {
|
|
@@ -57,10 +50,10 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
|
57
50
|
}
|
|
58
51
|
}
|
|
59
52
|
fonts.push({
|
|
60
|
-
family:
|
|
53
|
+
family: customFontFamily,
|
|
61
54
|
variants: fontVariants,
|
|
62
55
|
subsets: [],
|
|
63
|
-
type:
|
|
56
|
+
type: 'google'
|
|
64
57
|
});
|
|
65
58
|
}
|
|
66
59
|
}
|
|
@@ -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 })=>{
|
|
19
19
|
const [loadSuccess, setLoadSuccess] = react.useState(false);
|
|
20
20
|
const isDisableHeaderFooter = ()=>{
|
|
21
21
|
return isThemeSectionEditor;
|
|
@@ -73,8 +73,7 @@ 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
|
|
77
|
-
isOriginTemplate: isOriginTemplate
|
|
76
|
+
pageType: pageType
|
|
78
77
|
})),
|
|
79
78
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
80
79
|
id: "storefront",
|
|
@@ -97,8 +96,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
|
|
|
97
96
|
id: "visual-content"
|
|
98
97
|
}),
|
|
99
98
|
!isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {
|
|
100
|
-
pageType: pageType
|
|
101
|
-
isOriginTemplate: isOriginTemplate
|
|
99
|
+
pageType: pageType
|
|
102
100
|
})
|
|
103
101
|
]
|
|
104
102
|
})
|
|
@@ -81,7 +81,7 @@ const Toolbar = ()=>{
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
|
-
const setHoverComponent = useCallback(({ $component, componentUid, focus,
|
|
84
|
+
const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, 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 (
|
|
101
|
+
if (isThemeSection && $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 (
|
|
123
|
+
if (isThemeSection) {
|
|
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
|
|
379
|
-
if (marqueeKey) {
|
|
380
|
-
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
381
|
-
}
|
|
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 })=>{
|
|
378
|
+
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
|
|
385
379
|
if (!componentUid) return;
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
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
|
+
}
|
|
396
391
|
}
|
|
392
|
+
if (!$component) {
|
|
393
|
+
return;
|
|
394
|
+
}
|
|
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,8 +401,7 @@ const Toolbar = ()=>{
|
|
|
401
401
|
if ($toolbar) {
|
|
402
402
|
currentComponentActive.current = {
|
|
403
403
|
componentUid,
|
|
404
|
-
productId
|
|
405
|
-
marqueeKey
|
|
404
|
+
productId
|
|
406
405
|
};
|
|
407
406
|
$toolbar.removeAttribute('style');
|
|
408
407
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -421,9 +420,8 @@ const Toolbar = ()=>{
|
|
|
421
420
|
if ($btnAddBottom) {
|
|
422
421
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
423
422
|
}
|
|
424
|
-
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
425
423
|
// Active same element in product list
|
|
426
|
-
if (productId
|
|
424
|
+
if (productId) {
|
|
427
425
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
428
426
|
if ($relatedElements?.length) {
|
|
429
427
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -630,23 +628,23 @@ const Toolbar = ()=>{
|
|
|
630
628
|
}
|
|
631
629
|
}
|
|
632
630
|
}
|
|
633
|
-
const $
|
|
634
|
-
if ($
|
|
631
|
+
const $themeSection = $target.closest('[data-theme-section]');
|
|
632
|
+
if ($themeSection) {
|
|
635
633
|
setHoverComponent({
|
|
636
|
-
$component: $
|
|
634
|
+
$component: $themeSection,
|
|
637
635
|
focus: true,
|
|
638
|
-
|
|
636
|
+
isThemeSection: true
|
|
639
637
|
});
|
|
640
638
|
} else {
|
|
641
639
|
return;
|
|
642
640
|
}
|
|
643
641
|
}
|
|
644
|
-
const $
|
|
645
|
-
if ($
|
|
642
|
+
const $themeSection = $target.closest('[data-theme-section]');
|
|
643
|
+
if ($themeSection) {
|
|
646
644
|
setHoverComponent({
|
|
647
|
-
$component: $
|
|
645
|
+
$component: $themeSection,
|
|
648
646
|
focus: true,
|
|
649
|
-
|
|
647
|
+
isThemeSection: true
|
|
650
648
|
});
|
|
651
649
|
} else {
|
|
652
650
|
setHoverComponent({
|
|
@@ -673,8 +671,7 @@ const Toolbar = ()=>{
|
|
|
673
671
|
if (detail?.componentUid) {
|
|
674
672
|
setActiveComponent({
|
|
675
673
|
componentUid: detail.componentUid,
|
|
676
|
-
productId: detail.productId
|
|
677
|
-
marqueeKey: detail.marqueeKey
|
|
674
|
+
productId: detail.productId
|
|
678
675
|
});
|
|
679
676
|
} else {
|
|
680
677
|
removeActiveComponent();
|
|
@@ -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]
|
|
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'}`,
|
|
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]",
|
|
94
94
|
children: [
|
|
95
95
|
action.title,
|
|
96
96
|
action.hasAILogo && /*#__PURE__*/ jsxs("svg", {
|
|
@@ -61,15 +61,7 @@ const getValueByDevice = (data, device)=>{
|
|
|
61
61
|
key,
|
|
62
62
|
value?.family
|
|
63
63
|
];
|
|
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
|
-
}
|
|
64
|
+
}))
|
|
73
65
|
};
|
|
74
66
|
return deviceData;
|
|
75
67
|
};
|
|
@@ -86,9 +78,7 @@ const genCSSVariable = (deviceData)=>{
|
|
|
86
78
|
if (value === undefined) return undefined;
|
|
87
79
|
if ([
|
|
88
80
|
'font-heading',
|
|
89
|
-
'font-body'
|
|
90
|
-
'theme-font-heading',
|
|
91
|
-
'theme-font-body'
|
|
81
|
+
'font-body'
|
|
92
82
|
].includes(key)) {
|
|
93
83
|
return `--g-${key}: ${quoteFontName(value)}`;
|
|
94
84
|
}
|
|
@@ -16,14 +16,7 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
|
16
16
|
if (Object.prototype.hasOwnProperty.call(groupSetting, attr)) {
|
|
17
17
|
const value = groupSetting[attr];
|
|
18
18
|
if (value) {
|
|
19
|
-
|
|
20
|
-
if (typeof customFontFamily === 'string') {
|
|
21
|
-
customFontFamily = {
|
|
22
|
-
value: value.custom?.fontFamily || '',
|
|
23
|
-
type: 'google'
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
const fontFamily = customFontFamily?.value;
|
|
19
|
+
const customFontFamily = value.custom?.fontFamily;
|
|
27
20
|
let customFontVariants = value.custom?.fontVariants;
|
|
28
21
|
if (!customFontVariants?.length) {
|
|
29
22
|
customFontVariants = [
|
|
@@ -40,9 +33,9 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
|
40
33
|
});
|
|
41
34
|
const customFontWeight = value.custom?.fontWeight && variants.includes(value.custom?.fontWeight) ? value.custom?.fontWeight : variants[0];
|
|
42
35
|
if (customFontWeight) {
|
|
43
|
-
const isExist = fonts.find((item)=>item.family ==
|
|
36
|
+
const isExist = fonts.find((item)=>item.family == customFontFamily && item.variants.includes(customFontWeight));
|
|
44
37
|
if (!isExist) {
|
|
45
|
-
const isFontFamily = fonts.find((item)=>item.family ==
|
|
38
|
+
const isFontFamily = fonts.find((item)=>item.family == customFontFamily);
|
|
46
39
|
if (isFontFamily) {
|
|
47
40
|
isFontFamily.variants.push(customFontWeight);
|
|
48
41
|
} else {
|
|
@@ -55,10 +48,10 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
|
55
48
|
}
|
|
56
49
|
}
|
|
57
50
|
fonts.push({
|
|
58
|
-
family:
|
|
51
|
+
family: customFontFamily,
|
|
59
52
|
variants: fontVariants,
|
|
60
53
|
subsets: [],
|
|
61
|
-
type:
|
|
54
|
+
type: 'google'
|
|
62
55
|
});
|
|
63
56
|
}
|
|
64
57
|
}
|
|
@@ -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 })=>{
|
|
17
17
|
const [loadSuccess, setLoadSuccess] = useState(false);
|
|
18
18
|
const isDisableHeaderFooter = ()=>{
|
|
19
19
|
return isThemeSectionEditor;
|
|
@@ -71,8 +71,7 @@ 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
|
|
75
|
-
isOriginTemplate: isOriginTemplate
|
|
74
|
+
pageType: pageType
|
|
76
75
|
})),
|
|
77
76
|
/*#__PURE__*/ jsx("div", {
|
|
78
77
|
id: "storefront",
|
|
@@ -95,8 +94,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
|
|
|
95
94
|
id: "visual-content"
|
|
96
95
|
}),
|
|
97
96
|
!isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsx(Footer, {
|
|
98
|
-
pageType: pageType
|
|
99
|
-
isOriginTemplate: isOriginTemplate
|
|
97
|
+
pageType: pageType
|
|
100
98
|
})
|
|
101
99
|
]
|
|
102
100
|
})
|
package/dist/types/index.d.ts
CHANGED
|
@@ -176,16 +176,13 @@ type BuilderPageProps = {
|
|
|
176
176
|
editorImageToLayout?: boolean;
|
|
177
177
|
isThemeSectionEditor?: boolean;
|
|
178
178
|
hiddenToolbar?: boolean;
|
|
179
|
-
isOriginTemplate?: boolean;
|
|
180
179
|
};
|
|
181
180
|
declare const BuilderPage: React.FC<BuilderPageProps>;
|
|
182
181
|
|
|
183
182
|
declare const getStaticPaths: GetStaticPaths;
|
|
184
183
|
|
|
185
|
-
type TypographyV2FontFamilyType = 'google' | 'custom' | 'theme';
|
|
186
|
-
|
|
187
184
|
type FontItem = {
|
|
188
|
-
type:
|
|
185
|
+
type: 'google' | 'custom';
|
|
189
186
|
family: string;
|
|
190
187
|
variants: string[];
|
|
191
188
|
subsets: string[];
|
|
@@ -196,7 +193,7 @@ type FontOption = {
|
|
|
196
193
|
effect?: string;
|
|
197
194
|
};
|
|
198
195
|
declare function getFonts(fonts: FontItem[], option?: FontOption, isImportFontByUrl?: boolean): Promise<string>;
|
|
199
|
-
declare const getFontFromGlobalStyle: (data?: string) =>
|
|
196
|
+
declare const getFontFromGlobalStyle: (data?: string) => Promise<string> | "";
|
|
200
197
|
|
|
201
198
|
declare const getFontsFromDataBuilder: (dataBuilder: Record<string, any>) => FontItem[];
|
|
202
199
|
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.43.0-
|
|
3
|
+
"version": "1.43.0-staging.4",
|
|
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.43.0-
|
|
30
|
-
"@gem-sdk/plugin-cookie-bar": "1.43.0-
|
|
31
|
-
"@gem-sdk/plugin-quick-view": "1.43.0-
|
|
32
|
-
"@gem-sdk/plugin-sticky-add-to-cart": "1.43.0-
|
|
29
|
+
"@gem-sdk/core": "1.43.0-staging.4",
|
|
30
|
+
"@gem-sdk/plugin-cookie-bar": "1.43.0-staging.4",
|
|
31
|
+
"@gem-sdk/plugin-quick-view": "1.43.0-staging.4",
|
|
32
|
+
"@gem-sdk/plugin-sticky-add-to-cart": "1.43.0-staging.4"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"next": ">=13"
|