@gem-sdk/pages 1.8.0 → 1.8.11
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/Footer.js +33 -8
- package/dist/cjs/components/builder/PopupManager.js +43 -0
- package/dist/cjs/components/builder/Toolbox.js +1 -11
- package/dist/cjs/pages/builder.js +28 -26
- package/dist/esm/components/Footer.js +35 -10
- package/dist/esm/components/builder/PopupManager.js +39 -0
- package/dist/esm/components/builder/Toolbox.js +2 -12
- package/dist/esm/pages/builder.js +29 -27
- package/package.json +1 -1
|
@@ -7,15 +7,40 @@ var core = require('@gem-sdk/core');
|
|
|
7
7
|
|
|
8
8
|
const Footer = ()=>{
|
|
9
9
|
const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
|
|
10
|
-
if (!layoutSetting?.showFooter) return null;
|
|
11
10
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
12
|
-
className:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
className: core.cls('flex h-40 items-center justify-center bg-[#D6D6D6]', {
|
|
12
|
+
hidden: !layoutSetting?.showFooter
|
|
13
|
+
}),
|
|
14
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
15
|
+
className: "gp-footer children:hover:block group flex h-6 cursor-pointer items-center justify-center rounded bg-[#E2E2E2] p-1",
|
|
16
|
+
children: [
|
|
17
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
18
|
+
className: "font-xs text-[#252525]",
|
|
19
|
+
children: "Shopify theme’s footer"
|
|
20
|
+
}),
|
|
21
|
+
/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
22
|
+
className: "ml-[5px] w-0 group-hover:w-auto",
|
|
23
|
+
width: "16",
|
|
24
|
+
height: "16",
|
|
25
|
+
viewBox: "0 0 16 16",
|
|
26
|
+
fill: "none",
|
|
27
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
28
|
+
children: [
|
|
29
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
30
|
+
fillRule: "evenodd",
|
|
31
|
+
clipRule: "evenodd",
|
|
32
|
+
d: "M7.9996 5.08501C6.38958 5.08501 5.08441 6.39019 5.08441 8.00021C5.08441 9.61023 6.38958 10.9154 7.9996 10.9154C9.60962 10.9154 10.9148 9.61023 10.9148 8.00021C10.9148 6.39019 9.60962 5.08501 7.9996 5.08501ZM6.08441 8.00021C6.08441 6.94247 6.94187 6.08501 7.9996 6.08501C9.05734 6.08501 9.9148 6.94247 9.9148 8.00021C9.9148 9.05794 9.05734 9.9154 7.9996 9.9154C6.94187 9.9154 6.08441 9.05794 6.08441 8.00021Z",
|
|
33
|
+
fill: "#252525"
|
|
34
|
+
}),
|
|
35
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
36
|
+
fillRule: "evenodd",
|
|
37
|
+
clipRule: "evenodd",
|
|
38
|
+
d: "M6.52326 1.00391C6.28114 1.00391 6.07381 1.17739 6.0311 1.41572L5.74126 3.03321C5.40322 3.18248 5.08321 3.36419 4.78533 3.57432L3.18532 3.00147C2.9566 2.91958 2.70211 3.01395 2.58207 3.22517L1.12196 5.79451C1.00193 6.00572 1.05109 6.27266 1.2385 6.42725L2.50062 7.46836C2.48333 7.64355 2.4745 7.82106 2.4745 8.00047C2.4745 8.17981 2.48333 8.35726 2.5006 8.53238L1.2385 9.57347C1.05109 9.72806 1.00193 9.995 1.12196 10.2062L2.58207 12.7756C2.70211 12.9868 2.9566 13.0811 3.18532 12.9993L4.78513 12.4265C5.08308 12.6367 5.40317 12.8185 5.7413 12.9678L6.0311 14.585C6.07381 14.8233 6.28114 14.9968 6.52326 14.9968H9.47623C9.71835 14.9968 9.92568 14.8233 9.96839 14.585L10.2582 12.9676C10.5963 12.8183 10.9163 12.6365 11.2141 12.4264L12.8142 12.9993C13.0429 13.0811 13.2974 12.9868 13.4174 12.7756L14.8775 10.2062C14.9976 9.995 14.9484 9.72806 14.761 9.57347L13.4985 8.5321C13.5158 8.35706 13.5246 8.17971 13.5246 8.00047C13.5246 7.82116 13.5158 7.64375 13.4985 7.46864L14.761 6.42725C14.9484 6.27266 14.9976 6.00572 14.8775 5.79451L13.4174 3.22517C13.2974 3.01395 13.0429 2.91958 12.8142 3.00147L11.2139 3.57441C10.9161 3.36433 10.5962 3.18264 10.2583 3.0334L9.96839 1.41572C9.92568 1.17739 9.71835 1.00391 9.47623 1.00391H6.52326ZM6.67723 3.47943L6.94163 2.00391H9.05786L9.32229 3.47958C9.35324 3.6523 9.47246 3.79616 9.63643 3.85863C10.0674 4.02283 10.4665 4.25007 10.8219 4.5288C10.9571 4.63483 11.1373 4.66402 11.299 4.6061L12.7556 4.08459L13.8005 5.92323L12.6501 6.8722C12.5142 6.98427 12.4473 7.15956 12.474 7.33366C12.5073 7.55089 12.5246 7.77354 12.5246 8.00047C12.5246 8.22735 12.5073 8.44993 12.474 8.66711C12.4474 8.8412 12.5142 9.01648 12.6501 9.12855L13.8005 10.0775L12.7556 11.9161L11.2992 11.3947C11.1374 11.3368 10.9573 11.366 10.8221 11.472C10.4666 11.7508 10.0675 11.9781 9.6364 12.1423C9.47242 12.2048 9.3532 12.3487 9.32225 12.5214L9.05786 13.9968H6.94163L6.67727 12.5215C6.64632 12.3488 6.52708 12.2049 6.36308 12.1425C5.9319 11.9782 5.53267 11.7509 5.17713 11.4721C5.04194 11.3661 4.86178 11.3369 4.70003 11.3948L3.24387 11.9161L2.199 10.0775L3.34904 9.12883C3.48491 9.01675 3.55179 8.84146 3.52511 8.66736C3.4918 8.4501 3.4745 8.22743 3.4745 8.00047C3.4745 7.77345 3.49181 7.55072 3.52513 7.33341C3.55183 7.15931 3.48495 6.984 3.34907 6.87192L2.199 5.92323L3.24387 4.08459L4.70022 4.60601C4.86197 4.66392 5.04212 4.63474 5.17731 4.52872C5.53279 4.24994 5.93195 4.02269 6.36304 3.85849C6.52704 3.79603 6.64628 3.65216 6.67723 3.47943Z",
|
|
39
|
+
fill: "#252525"
|
|
40
|
+
})
|
|
41
|
+
]
|
|
42
|
+
})
|
|
43
|
+
]
|
|
19
44
|
})
|
|
20
45
|
});
|
|
21
46
|
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var core = require('@gem-sdk/core');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
|
|
9
|
+
const isDialog = (item)=>!!item && item?.tag === 'Dialog' && item.type === 'component';
|
|
10
|
+
const PopupManager = ()=>{
|
|
11
|
+
const state = core.useBuilderPreviewStore((s)=>s.state);
|
|
12
|
+
const setModalActive = core.useModalStore((s)=>s.setModalActive);
|
|
13
|
+
const activeModalId = core.useModalStore((s)=>s.activeId);
|
|
14
|
+
const popups = react.useMemo(()=>{
|
|
15
|
+
return state.ROOT.childrens?.map((id)=>{
|
|
16
|
+
return state?.[id];
|
|
17
|
+
}).filter(isDialog);
|
|
18
|
+
}, [
|
|
19
|
+
state
|
|
20
|
+
]);
|
|
21
|
+
const setActiveModal = (modalId)=>{
|
|
22
|
+
setModalActive(modalId);
|
|
23
|
+
};
|
|
24
|
+
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
25
|
+
className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
|
|
26
|
+
children: popups?.map((item)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
27
|
+
className: core.cls('pointer-events-auto inline-flex w-full shrink cursor-pointer select-none items-center justify-center whitespace-nowrap py-2 text-white [writing-mode:vertical-lr]', {
|
|
28
|
+
'bg-blue-500': activeModalId === item.uid,
|
|
29
|
+
'bg-blue-700': activeModalId !== item.uid
|
|
30
|
+
}),
|
|
31
|
+
role: "button",
|
|
32
|
+
"aria-hidden": "true",
|
|
33
|
+
onClick: ()=>setActiveModal(item?.uid),
|
|
34
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
35
|
+
className: "text-ellipsis whitespace-nowrap",
|
|
36
|
+
children: item?.settings?.name ?? 'Popup Name'
|
|
37
|
+
})
|
|
38
|
+
}, item?.uid))
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
var PopupManager$1 = /*#__PURE__*/ react.memo(PopupManager);
|
|
42
|
+
|
|
43
|
+
exports.default = PopupManager$1;
|
|
@@ -21,7 +21,6 @@ const Toolbox = ()=>{
|
|
|
21
21
|
const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
|
|
22
22
|
const moveItem = core.useBuilderPreviewStore((s)=>s.moveItem);
|
|
23
23
|
const removeItem = core.useBuilderPreviewStore((s)=>s.removeItem);
|
|
24
|
-
const setModalActive = core.useModalStore((s)=>s.setModalActive);
|
|
25
24
|
const addSection = core.useSectionStore((s)=>s.addSection);
|
|
26
25
|
const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
|
|
27
26
|
const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
|
|
@@ -32,12 +31,6 @@ const Toolbox = ()=>{
|
|
|
32
31
|
}, [
|
|
33
32
|
matchMutate
|
|
34
33
|
]);
|
|
35
|
-
const onSetActiveModal = react.useCallback((e)=>{
|
|
36
|
-
const detail = e.detail;
|
|
37
|
-
setModalActive(detail?.modalId);
|
|
38
|
-
}, [
|
|
39
|
-
setModalActive
|
|
40
|
-
]);
|
|
41
34
|
// Update shop info
|
|
42
35
|
const onChangeShopInfo = react.useCallback((e)=>{
|
|
43
36
|
const detail = e.detail;
|
|
@@ -188,7 +181,6 @@ const Toolbox = ()=>{
|
|
|
188
181
|
changeLayoutSettings
|
|
189
182
|
]);
|
|
190
183
|
react.useEffect(()=>{
|
|
191
|
-
window.addEventListener('set-active-modal', onSetActiveModal);
|
|
192
184
|
window.addEventListener('update-shop-info', onChangeShopInfo);
|
|
193
185
|
window.addEventListener('revalidate-query', onRevalidateQuery);
|
|
194
186
|
window.addEventListener('init-builder', onInitBuilder);
|
|
@@ -201,7 +193,6 @@ const Toolbox = ()=>{
|
|
|
201
193
|
window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
|
|
202
194
|
setInitEventSuccess(true);
|
|
203
195
|
return ()=>{
|
|
204
|
-
window.removeEventListener('set-active-modal', onSetActiveModal);
|
|
205
196
|
window.removeEventListener('update-shop-info', onChangeShopInfo);
|
|
206
197
|
window.removeEventListener('revalidate-query', onRevalidateQuery);
|
|
207
198
|
window.removeEventListener('init-builder', onInitBuilder);
|
|
@@ -223,8 +214,7 @@ const Toolbox = ()=>{
|
|
|
223
214
|
onChangeSwatchesData,
|
|
224
215
|
onRevalidateQuery,
|
|
225
216
|
onChangeShopInfo,
|
|
226
|
-
onChangeLayoutSettingData
|
|
227
|
-
onSetActiveModal
|
|
217
|
+
onChangeLayoutSettingData
|
|
228
218
|
]);
|
|
229
219
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
230
220
|
className: core.cls({
|
|
@@ -9,6 +9,7 @@ var Toolbox = require('../components/builder/Toolbox.js');
|
|
|
9
9
|
var Header = require('../components/Header.js');
|
|
10
10
|
var Footer = require('../components/Footer.js');
|
|
11
11
|
var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
|
|
12
|
+
var PopupManager = require('../components/builder/PopupManager.js');
|
|
12
13
|
|
|
13
14
|
const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData , pageType })=>{
|
|
14
15
|
const [loadSuccess, setLoadSuccess] = react.useState(false);
|
|
@@ -23,29 +24,7 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
|
|
|
23
24
|
react.useEffect(()=>{
|
|
24
25
|
setLoadSuccess(true);
|
|
25
26
|
}, []);
|
|
26
|
-
const
|
|
27
|
-
data: sectionData,
|
|
28
|
-
children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
|
|
29
|
-
state: initState,
|
|
30
|
-
children: [
|
|
31
|
-
/*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
|
|
32
|
-
loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
33
|
-
className: "builder",
|
|
34
|
-
children: [
|
|
35
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
36
|
-
id: "storefront",
|
|
37
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
|
|
38
|
-
uid: "ROOT"
|
|
39
|
-
})
|
|
40
|
-
}),
|
|
41
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
42
|
-
id: "visual-content"
|
|
43
|
-
})
|
|
44
|
-
]
|
|
45
|
-
})
|
|
46
|
-
]
|
|
47
|
-
}, "preview")
|
|
48
|
-
});
|
|
27
|
+
const WrapProvider = pageType === 'GP_COLLECTION' ? CollectionGlobalProvider.default : react.Fragment;
|
|
49
28
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
50
29
|
children: [
|
|
51
30
|
/*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
|
|
@@ -72,9 +51,32 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
|
|
|
72
51
|
/*#__PURE__*/ jsxRuntime.jsx(Header.default, {}),
|
|
73
52
|
/*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
|
|
74
53
|
components: components,
|
|
75
|
-
children:
|
|
76
|
-
children:
|
|
77
|
-
|
|
54
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(WrapProvider, {
|
|
55
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
|
|
56
|
+
data: sectionData,
|
|
57
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
|
|
58
|
+
state: initState,
|
|
59
|
+
children: [
|
|
60
|
+
/*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
|
|
61
|
+
/*#__PURE__*/ jsxRuntime.jsx(PopupManager.default, {}),
|
|
62
|
+
loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
63
|
+
className: "builder z-1 relative",
|
|
64
|
+
children: [
|
|
65
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
66
|
+
id: "storefront",
|
|
67
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
|
|
68
|
+
uid: "ROOT"
|
|
69
|
+
})
|
|
70
|
+
}),
|
|
71
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
72
|
+
id: "visual-content"
|
|
73
|
+
})
|
|
74
|
+
]
|
|
75
|
+
})
|
|
76
|
+
]
|
|
77
|
+
}, "preview")
|
|
78
|
+
})
|
|
79
|
+
})
|
|
78
80
|
}),
|
|
79
81
|
/*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
|
|
80
82
|
]
|
|
@@ -1,17 +1,42 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useShopStore } from '@gem-sdk/core';
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useShopStore, cls } from '@gem-sdk/core';
|
|
3
3
|
|
|
4
4
|
const Footer = ()=>{
|
|
5
5
|
const layoutSetting = useShopStore((s)=>s.layoutSettings);
|
|
6
|
-
if (!layoutSetting?.showFooter) return null;
|
|
7
6
|
return /*#__PURE__*/ jsx("div", {
|
|
8
|
-
className:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
className: cls('flex h-40 items-center justify-center bg-[#D6D6D6]', {
|
|
8
|
+
hidden: !layoutSetting?.showFooter
|
|
9
|
+
}),
|
|
10
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
11
|
+
className: "gp-footer children:hover:block group flex h-6 cursor-pointer items-center justify-center rounded bg-[#E2E2E2] p-1",
|
|
12
|
+
children: [
|
|
13
|
+
/*#__PURE__*/ jsx("span", {
|
|
14
|
+
className: "font-xs text-[#252525]",
|
|
15
|
+
children: "Shopify theme’s footer"
|
|
16
|
+
}),
|
|
17
|
+
/*#__PURE__*/ jsxs("svg", {
|
|
18
|
+
className: "ml-[5px] w-0 group-hover:w-auto",
|
|
19
|
+
width: "16",
|
|
20
|
+
height: "16",
|
|
21
|
+
viewBox: "0 0 16 16",
|
|
22
|
+
fill: "none",
|
|
23
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
24
|
+
children: [
|
|
25
|
+
/*#__PURE__*/ jsx("path", {
|
|
26
|
+
fillRule: "evenodd",
|
|
27
|
+
clipRule: "evenodd",
|
|
28
|
+
d: "M7.9996 5.08501C6.38958 5.08501 5.08441 6.39019 5.08441 8.00021C5.08441 9.61023 6.38958 10.9154 7.9996 10.9154C9.60962 10.9154 10.9148 9.61023 10.9148 8.00021C10.9148 6.39019 9.60962 5.08501 7.9996 5.08501ZM6.08441 8.00021C6.08441 6.94247 6.94187 6.08501 7.9996 6.08501C9.05734 6.08501 9.9148 6.94247 9.9148 8.00021C9.9148 9.05794 9.05734 9.9154 7.9996 9.9154C6.94187 9.9154 6.08441 9.05794 6.08441 8.00021Z",
|
|
29
|
+
fill: "#252525"
|
|
30
|
+
}),
|
|
31
|
+
/*#__PURE__*/ jsx("path", {
|
|
32
|
+
fillRule: "evenodd",
|
|
33
|
+
clipRule: "evenodd",
|
|
34
|
+
d: "M6.52326 1.00391C6.28114 1.00391 6.07381 1.17739 6.0311 1.41572L5.74126 3.03321C5.40322 3.18248 5.08321 3.36419 4.78533 3.57432L3.18532 3.00147C2.9566 2.91958 2.70211 3.01395 2.58207 3.22517L1.12196 5.79451C1.00193 6.00572 1.05109 6.27266 1.2385 6.42725L2.50062 7.46836C2.48333 7.64355 2.4745 7.82106 2.4745 8.00047C2.4745 8.17981 2.48333 8.35726 2.5006 8.53238L1.2385 9.57347C1.05109 9.72806 1.00193 9.995 1.12196 10.2062L2.58207 12.7756C2.70211 12.9868 2.9566 13.0811 3.18532 12.9993L4.78513 12.4265C5.08308 12.6367 5.40317 12.8185 5.7413 12.9678L6.0311 14.585C6.07381 14.8233 6.28114 14.9968 6.52326 14.9968H9.47623C9.71835 14.9968 9.92568 14.8233 9.96839 14.585L10.2582 12.9676C10.5963 12.8183 10.9163 12.6365 11.2141 12.4264L12.8142 12.9993C13.0429 13.0811 13.2974 12.9868 13.4174 12.7756L14.8775 10.2062C14.9976 9.995 14.9484 9.72806 14.761 9.57347L13.4985 8.5321C13.5158 8.35706 13.5246 8.17971 13.5246 8.00047C13.5246 7.82116 13.5158 7.64375 13.4985 7.46864L14.761 6.42725C14.9484 6.27266 14.9976 6.00572 14.8775 5.79451L13.4174 3.22517C13.2974 3.01395 13.0429 2.91958 12.8142 3.00147L11.2139 3.57441C10.9161 3.36433 10.5962 3.18264 10.2583 3.0334L9.96839 1.41572C9.92568 1.17739 9.71835 1.00391 9.47623 1.00391H6.52326ZM6.67723 3.47943L6.94163 2.00391H9.05786L9.32229 3.47958C9.35324 3.6523 9.47246 3.79616 9.63643 3.85863C10.0674 4.02283 10.4665 4.25007 10.8219 4.5288C10.9571 4.63483 11.1373 4.66402 11.299 4.6061L12.7556 4.08459L13.8005 5.92323L12.6501 6.8722C12.5142 6.98427 12.4473 7.15956 12.474 7.33366C12.5073 7.55089 12.5246 7.77354 12.5246 8.00047C12.5246 8.22735 12.5073 8.44993 12.474 8.66711C12.4474 8.8412 12.5142 9.01648 12.6501 9.12855L13.8005 10.0775L12.7556 11.9161L11.2992 11.3947C11.1374 11.3368 10.9573 11.366 10.8221 11.472C10.4666 11.7508 10.0675 11.9781 9.6364 12.1423C9.47242 12.2048 9.3532 12.3487 9.32225 12.5214L9.05786 13.9968H6.94163L6.67727 12.5215C6.64632 12.3488 6.52708 12.2049 6.36308 12.1425C5.9319 11.9782 5.53267 11.7509 5.17713 11.4721C5.04194 11.3661 4.86178 11.3369 4.70003 11.3948L3.24387 11.9161L2.199 10.0775L3.34904 9.12883C3.48491 9.01675 3.55179 8.84146 3.52511 8.66736C3.4918 8.4501 3.4745 8.22743 3.4745 8.00047C3.4745 7.77345 3.49181 7.55072 3.52513 7.33341C3.55183 7.15931 3.48495 6.984 3.34907 6.87192L2.199 5.92323L3.24387 4.08459L4.70022 4.60601C4.86197 4.66392 5.04212 4.63474 5.17731 4.52872C5.53279 4.24994 5.93195 4.02269 6.36304 3.85849C6.52704 3.79603 6.64628 3.65216 6.67723 3.47943Z",
|
|
35
|
+
fill: "#252525"
|
|
36
|
+
})
|
|
37
|
+
]
|
|
38
|
+
})
|
|
39
|
+
]
|
|
15
40
|
})
|
|
16
41
|
});
|
|
17
42
|
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useBuilderPreviewStore, useModalStore, cls } from '@gem-sdk/core';
|
|
3
|
+
import { memo, useMemo } from 'react';
|
|
4
|
+
|
|
5
|
+
const isDialog = (item)=>!!item && item?.tag === 'Dialog' && item.type === 'component';
|
|
6
|
+
const PopupManager = ()=>{
|
|
7
|
+
const state = useBuilderPreviewStore((s)=>s.state);
|
|
8
|
+
const setModalActive = useModalStore((s)=>s.setModalActive);
|
|
9
|
+
const activeModalId = useModalStore((s)=>s.activeId);
|
|
10
|
+
const popups = useMemo(()=>{
|
|
11
|
+
return state.ROOT.childrens?.map((id)=>{
|
|
12
|
+
return state?.[id];
|
|
13
|
+
}).filter(isDialog);
|
|
14
|
+
}, [
|
|
15
|
+
state
|
|
16
|
+
]);
|
|
17
|
+
const setActiveModal = (modalId)=>{
|
|
18
|
+
setModalActive(modalId);
|
|
19
|
+
};
|
|
20
|
+
return /*#__PURE__*/ jsx("div", {
|
|
21
|
+
className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
|
|
22
|
+
children: popups?.map((item)=>/*#__PURE__*/ jsx("div", {
|
|
23
|
+
className: cls('pointer-events-auto inline-flex w-full shrink cursor-pointer select-none items-center justify-center whitespace-nowrap py-2 text-white [writing-mode:vertical-lr]', {
|
|
24
|
+
'bg-blue-500': activeModalId === item.uid,
|
|
25
|
+
'bg-blue-700': activeModalId !== item.uid
|
|
26
|
+
}),
|
|
27
|
+
role: "button",
|
|
28
|
+
"aria-hidden": "true",
|
|
29
|
+
onClick: ()=>setActiveModal(item?.uid),
|
|
30
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
31
|
+
className: "text-ellipsis whitespace-nowrap",
|
|
32
|
+
children: item?.settings?.name ?? 'Popup Name'
|
|
33
|
+
})
|
|
34
|
+
}, item?.uid))
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
var PopupManager$1 = /*#__PURE__*/ memo(PopupManager);
|
|
38
|
+
|
|
39
|
+
export { PopupManager$1 as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useMatchMutate, useShopStore, useBuilderPreviewStore,
|
|
2
|
+
import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, cls } from '@gem-sdk/core';
|
|
3
3
|
import { memo, useState, useCallback, useEffect } from 'react';
|
|
4
4
|
import { createFontUrl } from '../../libs/google-fonts.js';
|
|
5
5
|
import { genCSS } from '../../libs/helpers/gen-css.js';
|
|
@@ -17,7 +17,6 @@ const Toolbox = ()=>{
|
|
|
17
17
|
const addItem = useBuilderPreviewStore((s)=>s.addItem);
|
|
18
18
|
const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
|
|
19
19
|
const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
|
|
20
|
-
const setModalActive = useModalStore((s)=>s.setModalActive);
|
|
21
20
|
const addSection = useSectionStore((s)=>s.addSection);
|
|
22
21
|
const changeSwatches = useShopStore((s)=>s.changeSwatches);
|
|
23
22
|
const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
|
|
@@ -28,12 +27,6 @@ const Toolbox = ()=>{
|
|
|
28
27
|
}, [
|
|
29
28
|
matchMutate
|
|
30
29
|
]);
|
|
31
|
-
const onSetActiveModal = useCallback((e)=>{
|
|
32
|
-
const detail = e.detail;
|
|
33
|
-
setModalActive(detail?.modalId);
|
|
34
|
-
}, [
|
|
35
|
-
setModalActive
|
|
36
|
-
]);
|
|
37
30
|
// Update shop info
|
|
38
31
|
const onChangeShopInfo = useCallback((e)=>{
|
|
39
32
|
const detail = e.detail;
|
|
@@ -184,7 +177,6 @@ const Toolbox = ()=>{
|
|
|
184
177
|
changeLayoutSettings
|
|
185
178
|
]);
|
|
186
179
|
useEffect(()=>{
|
|
187
|
-
window.addEventListener('set-active-modal', onSetActiveModal);
|
|
188
180
|
window.addEventListener('update-shop-info', onChangeShopInfo);
|
|
189
181
|
window.addEventListener('revalidate-query', onRevalidateQuery);
|
|
190
182
|
window.addEventListener('init-builder', onInitBuilder);
|
|
@@ -197,7 +189,6 @@ const Toolbox = ()=>{
|
|
|
197
189
|
window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
|
|
198
190
|
setInitEventSuccess(true);
|
|
199
191
|
return ()=>{
|
|
200
|
-
window.removeEventListener('set-active-modal', onSetActiveModal);
|
|
201
192
|
window.removeEventListener('update-shop-info', onChangeShopInfo);
|
|
202
193
|
window.removeEventListener('revalidate-query', onRevalidateQuery);
|
|
203
194
|
window.removeEventListener('init-builder', onInitBuilder);
|
|
@@ -219,8 +210,7 @@ const Toolbox = ()=>{
|
|
|
219
210
|
onChangeSwatchesData,
|
|
220
211
|
onRevalidateQuery,
|
|
221
212
|
onChangeShopInfo,
|
|
222
|
-
onChangeLayoutSettingData
|
|
223
|
-
onSetActiveModal
|
|
213
|
+
onChangeLayoutSettingData
|
|
224
214
|
]);
|
|
225
215
|
return /*#__PURE__*/ jsx("div", {
|
|
226
216
|
className: cls({
|
|
@@ -2,11 +2,12 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
|
|
3
3
|
import { NextSeo } from 'next-seo';
|
|
4
4
|
import Head from 'next/head';
|
|
5
|
-
import { useState, useEffect } from 'react';
|
|
5
|
+
import { useState, useEffect, Fragment as Fragment$1 } from 'react';
|
|
6
6
|
import Toolbox from '../components/builder/Toolbox.js';
|
|
7
7
|
import Header from '../components/Header.js';
|
|
8
8
|
import Footer from '../components/Footer.js';
|
|
9
9
|
import CollectionGlobalProvider from './CollectionGlobalProvider.js';
|
|
10
|
+
import PopupManager from '../components/builder/PopupManager.js';
|
|
10
11
|
|
|
11
12
|
const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData , pageType })=>{
|
|
12
13
|
const [loadSuccess, setLoadSuccess] = useState(false);
|
|
@@ -21,29 +22,7 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
|
|
|
21
22
|
useEffect(()=>{
|
|
22
23
|
setLoadSuccess(true);
|
|
23
24
|
}, []);
|
|
24
|
-
const
|
|
25
|
-
data: sectionData,
|
|
26
|
-
children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
|
|
27
|
-
state: initState,
|
|
28
|
-
children: [
|
|
29
|
-
/*#__PURE__*/ jsx(Toolbox, {}),
|
|
30
|
-
loadSuccess && /*#__PURE__*/ jsxs("div", {
|
|
31
|
-
className: "builder",
|
|
32
|
-
children: [
|
|
33
|
-
/*#__PURE__*/ jsx("div", {
|
|
34
|
-
id: "storefront",
|
|
35
|
-
children: /*#__PURE__*/ jsx(RenderPreview, {
|
|
36
|
-
uid: "ROOT"
|
|
37
|
-
})
|
|
38
|
-
}),
|
|
39
|
-
/*#__PURE__*/ jsx("div", {
|
|
40
|
-
id: "visual-content"
|
|
41
|
-
})
|
|
42
|
-
]
|
|
43
|
-
})
|
|
44
|
-
]
|
|
45
|
-
}, "preview")
|
|
46
|
-
});
|
|
25
|
+
const WrapProvider = pageType === 'GP_COLLECTION' ? CollectionGlobalProvider : Fragment$1;
|
|
47
26
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
48
27
|
children: [
|
|
49
28
|
/*#__PURE__*/ jsx(NextSeo, {
|
|
@@ -70,9 +49,32 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
|
|
|
70
49
|
/*#__PURE__*/ jsx(Header, {}),
|
|
71
50
|
/*#__PURE__*/ jsx(BuilderComponentProvider, {
|
|
72
51
|
components: components,
|
|
73
|
-
children:
|
|
74
|
-
children:
|
|
75
|
-
|
|
52
|
+
children: /*#__PURE__*/ jsx(WrapProvider, {
|
|
53
|
+
children: /*#__PURE__*/ jsx(SectionProvider, {
|
|
54
|
+
data: sectionData,
|
|
55
|
+
children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
|
|
56
|
+
state: initState,
|
|
57
|
+
children: [
|
|
58
|
+
/*#__PURE__*/ jsx(Toolbox, {}),
|
|
59
|
+
/*#__PURE__*/ jsx(PopupManager, {}),
|
|
60
|
+
loadSuccess && /*#__PURE__*/ jsxs("div", {
|
|
61
|
+
className: "builder z-1 relative",
|
|
62
|
+
children: [
|
|
63
|
+
/*#__PURE__*/ jsx("div", {
|
|
64
|
+
id: "storefront",
|
|
65
|
+
children: /*#__PURE__*/ jsx(RenderPreview, {
|
|
66
|
+
uid: "ROOT"
|
|
67
|
+
})
|
|
68
|
+
}),
|
|
69
|
+
/*#__PURE__*/ jsx("div", {
|
|
70
|
+
id: "visual-content"
|
|
71
|
+
})
|
|
72
|
+
]
|
|
73
|
+
})
|
|
74
|
+
]
|
|
75
|
+
}, "preview")
|
|
76
|
+
})
|
|
77
|
+
})
|
|
76
78
|
}),
|
|
77
79
|
/*#__PURE__*/ jsx(Footer, {})
|
|
78
80
|
]
|