@gem-sdk/pages 1.53.0-dev.26 → 1.53.0-dev.39

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 (7) hide show
  1. package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js +12 -7
  2. package/dist/cjs/components/builder/Toolbox.js +5 -1
  3. package/dist/cjs/libs/hooks/useSelectModeInteraction.js +16 -0
  4. package/dist/esm/components/builder/InteractionSelectOnPageHeader.js +12 -7
  5. package/dist/esm/components/builder/Toolbox.js +5 -1
  6. package/dist/esm/libs/hooks/useSelectModeInteraction.js +14 -0
  7. package/package.json +2 -2
package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -4,11 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
+ var useSelectModeInteraction = require('../../libs/hooks/useSelectModeInteraction.js');
7
8
 
8
9
  const InteractionSelectOnPageHeader = ()=>{
9
10
  const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
10
11
  const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
11
12
  const { closeSelectOnPage } = core.useInteraction();
13
+ const { changeSelectMode } = useSelectModeInteraction.useSelectModeInteraction();
14
+ core.usePageStore((s)=>s.interactionData);
15
+ const handleSetInteraction = (type)=>{
16
+ setInteractionSelectType(type);
17
+ changeSelectMode(type);
18
+ };
12
19
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
13
20
  children: [
14
21
  /*#__PURE__*/ jsxRuntime.jsxs("header", {
@@ -22,15 +29,13 @@ const InteractionSelectOnPageHeader = ()=>{
22
29
  className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
23
30
  children: [
24
31
  /*#__PURE__*/ jsxRuntime.jsx("button", {
25
- "data-interaction-mode": "element",
26
- onClick: ()=>setInteractionSelectType('element'),
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]'}`,
32
+ onClick: ()=>handleSetInteraction('ELEMENT'),
33
+ 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
34
  children: "Choose an element on page"
29
35
  }),
30
36
  /*#__PURE__*/ jsxRuntime.jsx("button", {
31
- "data-interaction-mode": "page",
32
- onClick: ()=>setInteractionSelectType('page'),
33
- 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
+ onClick: ()=>handleSetInteraction('PAGE'),
38
+ 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]'}`,
34
39
  children: "Use entire page"
35
40
  })
36
41
  ]
@@ -53,7 +58,7 @@ const InteractionSelectOnPageHeader = ()=>{
53
58
  ]
54
59
  }),
55
60
  /*#__PURE__*/ jsxRuntime.jsx("div", {
56
- className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] gp-z-[999] gp-pointer-events-none ${selectType === 'page' ? 'gp-z-[999] gp-bg-[#3c67ff]/[0.25]' : ''}`,
61
+ className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-mt-[40px] gp-z-[999] ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
57
62
  style: {
58
63
  height: 'calc(100% - 40px)'
59
64
  }
package/dist/cjs/components/builder/Toolbox.js CHANGED
@@ -39,6 +39,7 @@ const Toolbox = ()=>{
39
39
  const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
40
40
  const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
41
41
  const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
42
+ const setInteractionSettingType = core.usePageStore((s)=>s.setInteractionSettingType);
42
43
  const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
43
44
  state
44
45
  ]);
@@ -335,11 +336,14 @@ const Toolbox = ()=>{
335
336
  const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
336
337
  const isSelectOnPage = e.detail.value;
337
338
  const mode = e.detail.mode;
339
+ const settingType = e.detail.settingType;
338
340
  setInteractionIsSelectOnPage(isSelectOnPage);
339
341
  setInteractionSelectType(mode);
342
+ setInteractionSettingType(settingType);
340
343
  }, [
341
344
  setInteractionIsSelectOnPage,
342
- setInteractionSelectType
345
+ setInteractionSelectType,
346
+ setInteractionSettingType
343
347
  ]);
344
348
  const onUpdateInteractionItem = react.useCallback((e)=>{
345
349
  const interactionItem = e.detail;
package/dist/cjs/libs/hooks/useSelectModeInteraction.js ADDED
@@ -0,0 +1,16 @@
1
+ 'use strict';
2
+
3
+ const useSelectModeInteraction = ()=>{
4
+ const changeSelectMode = (mode)=>{
5
+ const event = new CustomEvent('editor:interaction:change-select-mode', {
6
+ bubbles: true,
7
+ detail: mode
8
+ });
9
+ window.dispatchEvent(event);
10
+ };
11
+ return {
12
+ changeSelectMode
13
+ };
14
+ };
15
+
16
+ exports.useSelectModeInteraction = useSelectModeInteraction;
package/dist/esm/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -1,10 +1,17 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { usePageStore, useInteraction } from '@gem-sdk/core';
3
+ import { useSelectModeInteraction } from '../../libs/hooks/useSelectModeInteraction.js';
3
4
 
4
5
  const InteractionSelectOnPageHeader = ()=>{
5
6
  const selectType = usePageStore((s)=>s.interactionData?.selectType);
6
7
  const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
7
8
  const { closeSelectOnPage } = useInteraction();
9
+ const { changeSelectMode } = useSelectModeInteraction();
10
+ usePageStore((s)=>s.interactionData);
11
+ const handleSetInteraction = (type)=>{
12
+ setInteractionSelectType(type);
13
+ changeSelectMode(type);
14
+ };
8
15
  return /*#__PURE__*/ jsxs(Fragment, {
9
16
  children: [
10
17
  /*#__PURE__*/ jsxs("header", {
@@ -18,15 +25,13 @@ const InteractionSelectOnPageHeader = ()=>{
18
25
  className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
19
26
  children: [
20
27
  /*#__PURE__*/ jsx("button", {
21
- "data-interaction-mode": "element",
22
- onClick: ()=>setInteractionSelectType('element'),
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]'}`,
28
+ onClick: ()=>handleSetInteraction('ELEMENT'),
29
+ 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
30
  children: "Choose an element on page"
25
31
  }),
26
32
  /*#__PURE__*/ jsx("button", {
27
- "data-interaction-mode": "page",
28
- onClick: ()=>setInteractionSelectType('page'),
29
- 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
+ onClick: ()=>handleSetInteraction('PAGE'),
34
+ 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]'}`,
30
35
  children: "Use entire page"
31
36
  })
32
37
  ]
@@ -49,7 +54,7 @@ const InteractionSelectOnPageHeader = ()=>{
49
54
  ]
50
55
  }),
51
56
  /*#__PURE__*/ jsx("div", {
52
- className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] gp-z-[999] gp-pointer-events-none ${selectType === 'page' ? 'gp-z-[999] gp-bg-[#3c67ff]/[0.25]' : ''}`,
57
+ className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-mt-[40px] gp-z-[999] ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
53
58
  style: {
54
59
  height: 'calc(100% - 40px)'
55
60
  }
package/dist/esm/components/builder/Toolbox.js CHANGED
@@ -35,6 +35,7 @@ const Toolbox = ()=>{
35
35
  const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
36
36
  const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
37
37
  const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
38
+ const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
38
39
  const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
39
40
  state
40
41
  ]);
@@ -331,11 +332,14 @@ const Toolbox = ()=>{
331
332
  const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
332
333
  const isSelectOnPage = e.detail.value;
333
334
  const mode = e.detail.mode;
335
+ const settingType = e.detail.settingType;
334
336
  setInteractionIsSelectOnPage(isSelectOnPage);
335
337
  setInteractionSelectType(mode);
338
+ setInteractionSettingType(settingType);
336
339
  }, [
337
340
  setInteractionIsSelectOnPage,
338
- setInteractionSelectType
341
+ setInteractionSelectType,
342
+ setInteractionSettingType
339
343
  ]);
340
344
  const onUpdateInteractionItem = useCallback((e)=>{
341
345
  const interactionItem = e.detail;
package/dist/esm/libs/hooks/useSelectModeInteraction.js ADDED
@@ -0,0 +1,14 @@
1
+ const useSelectModeInteraction = ()=>{
2
+ const changeSelectMode = (mode)=>{
3
+ const event = new CustomEvent('editor:interaction:change-select-mode', {
4
+ bubbles: true,
5
+ detail: mode
6
+ });
7
+ window.dispatchEvent(event);
8
+ };
9
+ return {
10
+ changeSelectMode
11
+ };
12
+ };
13
+
14
+ export { useSelectModeInteraction };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.53.0-dev.26",
3
+ "version": "1.53.0-dev.39",
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.53.0-dev.28",
29
+ "@gem-sdk/core": "1.53.0-dev.39",
30
30
  "@gem-sdk/plugin-cookie-bar": "1.53.0-dev.4",
31
31
  "@gem-sdk/plugin-quick-view": "1.53.0-dev.4",
32
32
  "@gem-sdk/plugin-sticky-add-to-cart": "1.53.0-dev.4"