@gem-sdk/pages 1.48.0-dev.87 → 1.48.0-dev.93
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.
|
@@ -8,57 +8,61 @@ var core = require('@gem-sdk/core');
|
|
|
8
8
|
const InteractionSelectOnPageHeader = ()=>{
|
|
9
9
|
const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
|
|
10
10
|
const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
|
|
11
|
-
const
|
|
12
|
-
const closeSelectOnPage = ()=>{
|
|
13
|
-
setInteractionIsSelectOnPage(false);
|
|
14
|
-
const event = new CustomEvent('editor:interaction:change-select-on-page', {
|
|
15
|
-
bubbles: true,
|
|
16
|
-
detail: false
|
|
17
|
-
});
|
|
18
|
-
window.dispatchEvent(event);
|
|
19
|
-
};
|
|
11
|
+
const { closeSelectOnPage } = core.useInteraction();
|
|
20
12
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
21
13
|
children: [
|
|
22
14
|
/*#__PURE__*/ jsxRuntime.jsxs("header", {
|
|
23
|
-
className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100",
|
|
15
|
+
className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-black gp-text-white",
|
|
24
16
|
children: [
|
|
25
17
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
26
|
-
className: "gp-
|
|
18
|
+
className: "gp-ml-4 gp-text-xs gp-mt-1",
|
|
19
|
+
children: "Select mode enabled"
|
|
27
20
|
}),
|
|
28
21
|
/*#__PURE__*/ jsxRuntime.jsxs("section", {
|
|
29
|
-
className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-
|
|
22
|
+
className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
|
|
30
23
|
children: [
|
|
31
24
|
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
25
|
+
"data-interaction-mode": "element",
|
|
32
26
|
onClick: ()=>setInteractionSelectType('element'),
|
|
33
|
-
className: `gp-h-
|
|
34
|
-
|
|
27
|
+
className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
|
|
28
|
+
style: {
|
|
29
|
+
cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
|
|
30
|
+
},
|
|
31
|
+
children: "Choose an element on page"
|
|
35
32
|
}),
|
|
36
33
|
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
34
|
+
"data-interaction-mode": "page",
|
|
37
35
|
onClick: ()=>setInteractionSelectType('page'),
|
|
38
|
-
className: `gp-h-
|
|
39
|
-
|
|
36
|
+
className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
|
|
37
|
+
style: {
|
|
38
|
+
cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
|
|
39
|
+
},
|
|
40
|
+
children: "Use entire page"
|
|
40
41
|
})
|
|
41
42
|
]
|
|
42
43
|
}),
|
|
43
44
|
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
44
45
|
onClick: closeSelectOnPage,
|
|
45
|
-
className: "gp-h-10 gp-w-10 gp-
|
|
46
|
+
className: "gp-h-10 gp-w-10 gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
|
|
46
47
|
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
47
|
-
width: "
|
|
48
|
-
height: "
|
|
49
|
-
viewBox: "0 0
|
|
48
|
+
width: "12",
|
|
49
|
+
height: "12",
|
|
50
|
+
viewBox: "0 0 12 12",
|
|
50
51
|
fill: "none",
|
|
51
52
|
xmlns: "http://www.w3.org/2000/svg",
|
|
52
53
|
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
53
|
-
d: "
|
|
54
|
-
fill: "#
|
|
54
|
+
d: "M9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L7.06066 6L11.0303 2.03033C11.3232 1.73744 11.3232 1.26256 11.0303 0.96967C10.7374 0.676777 10.2626 0.676777 9.96967 0.96967L6 4.93934L2.03033 0.96967C1.73744 0.676777 1.26256 0.676777 0.96967 0.96967C0.676777 1.26256 0.676777 1.73744 0.96967 2.03033L4.93934 6L0.96967 9.96967C0.676777 10.2626 0.676777 10.7374 0.96967 11.0303C1.26256 11.3232 1.73744 11.3232 2.03033 11.0303L6 7.06066L9.96967 11.0303Z",
|
|
55
|
+
fill: "#F9F9F9"
|
|
55
56
|
})
|
|
56
57
|
})
|
|
57
58
|
})
|
|
58
59
|
]
|
|
59
60
|
}),
|
|
60
61
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
61
|
-
className:
|
|
62
|
+
className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
|
|
63
|
+
style: {
|
|
64
|
+
height: 'calc(100% - 40px)'
|
|
65
|
+
}
|
|
62
66
|
})
|
|
63
67
|
]
|
|
64
68
|
});
|
|
@@ -38,6 +38,7 @@ const Toolbox = ()=>{
|
|
|
38
38
|
const clearModal = core.useModalStore((s)=>s.clearModal);
|
|
39
39
|
const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
40
40
|
const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
|
|
41
|
+
const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
|
|
41
42
|
const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
|
|
42
43
|
state
|
|
43
44
|
]);
|
|
@@ -332,10 +333,13 @@ const Toolbox = ()=>{
|
|
|
332
333
|
setSalePageProductId
|
|
333
334
|
]);
|
|
334
335
|
const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
|
|
335
|
-
const isSelectOnPage = e.detail;
|
|
336
|
+
const isSelectOnPage = e.detail.value;
|
|
337
|
+
const mode = e.detail.mode;
|
|
336
338
|
setInteractionIsSelectOnPage(isSelectOnPage);
|
|
339
|
+
setInteractionSelectType(mode);
|
|
337
340
|
}, [
|
|
338
|
-
setInteractionIsSelectOnPage
|
|
341
|
+
setInteractionIsSelectOnPage,
|
|
342
|
+
setInteractionSelectType
|
|
339
343
|
]);
|
|
340
344
|
const onUpdateInteractionItem = react.useCallback((e)=>{
|
|
341
345
|
const interactionItem = e.detail;
|
|
@@ -1,60 +1,64 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { usePageStore } from '@gem-sdk/core';
|
|
2
|
+
import { usePageStore, useInteraction } from '@gem-sdk/core';
|
|
3
3
|
|
|
4
4
|
const InteractionSelectOnPageHeader = ()=>{
|
|
5
5
|
const selectType = usePageStore((s)=>s.interactionData?.selectType);
|
|
6
6
|
const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
|
|
7
|
-
const
|
|
8
|
-
const closeSelectOnPage = ()=>{
|
|
9
|
-
setInteractionIsSelectOnPage(false);
|
|
10
|
-
const event = new CustomEvent('editor:interaction:change-select-on-page', {
|
|
11
|
-
bubbles: true,
|
|
12
|
-
detail: false
|
|
13
|
-
});
|
|
14
|
-
window.dispatchEvent(event);
|
|
15
|
-
};
|
|
7
|
+
const { closeSelectOnPage } = useInteraction();
|
|
16
8
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
17
9
|
children: [
|
|
18
10
|
/*#__PURE__*/ jsxs("header", {
|
|
19
|
-
className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100",
|
|
11
|
+
className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-black gp-text-white",
|
|
20
12
|
children: [
|
|
21
13
|
/*#__PURE__*/ jsx("div", {
|
|
22
|
-
className: "gp-
|
|
14
|
+
className: "gp-ml-4 gp-text-xs gp-mt-1",
|
|
15
|
+
children: "Select mode enabled"
|
|
23
16
|
}),
|
|
24
17
|
/*#__PURE__*/ jsxs("section", {
|
|
25
|
-
className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-
|
|
18
|
+
className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
|
|
26
19
|
children: [
|
|
27
20
|
/*#__PURE__*/ jsx("button", {
|
|
21
|
+
"data-interaction-mode": "element",
|
|
28
22
|
onClick: ()=>setInteractionSelectType('element'),
|
|
29
|
-
className: `gp-h-
|
|
30
|
-
|
|
23
|
+
className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
|
|
24
|
+
style: {
|
|
25
|
+
cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
|
|
26
|
+
},
|
|
27
|
+
children: "Choose an element on page"
|
|
31
28
|
}),
|
|
32
29
|
/*#__PURE__*/ jsx("button", {
|
|
30
|
+
"data-interaction-mode": "page",
|
|
33
31
|
onClick: ()=>setInteractionSelectType('page'),
|
|
34
|
-
className: `gp-h-
|
|
35
|
-
|
|
32
|
+
className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
|
|
33
|
+
style: {
|
|
34
|
+
cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
|
|
35
|
+
},
|
|
36
|
+
children: "Use entire page"
|
|
36
37
|
})
|
|
37
38
|
]
|
|
38
39
|
}),
|
|
39
40
|
/*#__PURE__*/ jsx("button", {
|
|
40
41
|
onClick: closeSelectOnPage,
|
|
41
|
-
className: "gp-h-10 gp-w-10 gp-
|
|
42
|
+
className: "gp-h-10 gp-w-10 gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
|
|
42
43
|
children: /*#__PURE__*/ jsx("svg", {
|
|
43
|
-
width: "
|
|
44
|
-
height: "
|
|
45
|
-
viewBox: "0 0
|
|
44
|
+
width: "12",
|
|
45
|
+
height: "12",
|
|
46
|
+
viewBox: "0 0 12 12",
|
|
46
47
|
fill: "none",
|
|
47
48
|
xmlns: "http://www.w3.org/2000/svg",
|
|
48
49
|
children: /*#__PURE__*/ jsx("path", {
|
|
49
|
-
d: "
|
|
50
|
-
fill: "#
|
|
50
|
+
d: "M9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L7.06066 6L11.0303 2.03033C11.3232 1.73744 11.3232 1.26256 11.0303 0.96967C10.7374 0.676777 10.2626 0.676777 9.96967 0.96967L6 4.93934L2.03033 0.96967C1.73744 0.676777 1.26256 0.676777 0.96967 0.96967C0.676777 1.26256 0.676777 1.73744 0.96967 2.03033L4.93934 6L0.96967 9.96967C0.676777 10.2626 0.676777 10.7374 0.96967 11.0303C1.26256 11.3232 1.73744 11.3232 2.03033 11.0303L6 7.06066L9.96967 11.0303Z",
|
|
51
|
+
fill: "#F9F9F9"
|
|
51
52
|
})
|
|
52
53
|
})
|
|
53
54
|
})
|
|
54
55
|
]
|
|
55
56
|
}),
|
|
56
57
|
/*#__PURE__*/ jsx("div", {
|
|
57
|
-
className:
|
|
58
|
+
className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
|
|
59
|
+
style: {
|
|
60
|
+
height: 'calc(100% - 40px)'
|
|
61
|
+
}
|
|
58
62
|
})
|
|
59
63
|
]
|
|
60
64
|
});
|
|
@@ -34,6 +34,7 @@ const Toolbox = ()=>{
|
|
|
34
34
|
const clearModal = useModalStore((s)=>s.clearModal);
|
|
35
35
|
const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
36
36
|
const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
|
|
37
|
+
const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
|
|
37
38
|
const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
|
|
38
39
|
state
|
|
39
40
|
]);
|
|
@@ -328,10 +329,13 @@ const Toolbox = ()=>{
|
|
|
328
329
|
setSalePageProductId
|
|
329
330
|
]);
|
|
330
331
|
const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
|
|
331
|
-
const isSelectOnPage = e.detail;
|
|
332
|
+
const isSelectOnPage = e.detail.value;
|
|
333
|
+
const mode = e.detail.mode;
|
|
332
334
|
setInteractionIsSelectOnPage(isSelectOnPage);
|
|
335
|
+
setInteractionSelectType(mode);
|
|
333
336
|
}, [
|
|
334
|
-
setInteractionIsSelectOnPage
|
|
337
|
+
setInteractionIsSelectOnPage,
|
|
338
|
+
setInteractionSelectType
|
|
335
339
|
]);
|
|
336
340
|
const onUpdateInteractionItem = useCallback((e)=>{
|
|
337
341
|
const interactionItem = e.detail;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.48.0-dev.
|
|
3
|
+
"version": "1.48.0-dev.93",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"next": "latest"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gem-sdk/core": "1.48.0-dev.
|
|
29
|
+
"@gem-sdk/core": "1.48.0-dev.91",
|
|
30
30
|
"@gem-sdk/plugin-cookie-bar": "1.48.0-dev.3",
|
|
31
31
|
"@gem-sdk/plugin-quick-view": "1.48.0-dev.3",
|
|
32
32
|
"@gem-sdk/plugin-sticky-add-to-cart": "1.48.0-dev.3"
|