@gem-sdk/pages 1.8.6 → 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/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/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
|
@@ -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
|
]
|
|
@@ -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
|
]
|