@gem-sdk/pages 1.57.0-staging.16 → 1.57.0-staging.20

package/dist/cjs/components/builder/Header.js

@@ -22,7 +22,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate, openPageSetting } = props;
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
-    const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
+    const sidebarMode = core.usePageStore((s)=>s.sidebarMode);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -181,7 +181,7 @@ const Header = (props)=>{
                     ]
                 })
             }),
-            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
+            sidebarMode === 'interaction' && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
         ]
     });
 };

package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js

@@ -14,6 +14,7 @@ const InteractionSelectOnPageHeader = ()=>{
     const [hoverOption, setHoverOption] = react.useState(null);
     const [openDropdown, setOpenDropdown] = react.useState(false);
     const popupRef = react.useRef(null);
+    const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const handleSetInteraction = (type)=>{
         setOpenDropdown(false);
         setInteractionSelectType(type);
@@ -70,7 +71,7 @@ const InteractionSelectOnPageHeader = ()=>{
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx("header", {
+            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("header", {
                 className: "gp-flex gp-text-[12px] gp-justify-center gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-[1000] gp-bg-[#151515] gp-text-white interaction-select-mode-header",
                 children: /*#__PURE__*/ jsxRuntime.jsxs("section", {
                     className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-2",
@@ -178,7 +179,9 @@ const InteractionSelectOnPageHeader = ()=>{
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : 'gp-pointer-events-none'}`,
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : ''}
+        ${isSelectOnPage ? 'gp-pointer-events-none' : 'gp-pointer-events-auto'}
+        `,
                 style: {
                     height: 'calc(100% - 40px)'
                 }

package/dist/cjs/components/builder/Toolbox.js

@@ -41,6 +41,7 @@ const Toolbox = ()=>{
     const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
     const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
     const setInteractionSettingType = core.usePageStore((s)=>s.setInteractionSettingType);
+    const setSidebarMode = core.usePageStore((s)=>s.setSidebarMode);
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
@@ -359,6 +360,13 @@ const Toolbox = ()=>{
     }, [
         setInteractionSettingType
     ]);
+    const onChangeSidebarMode = react.useCallback((e)=>{
+        const mode = e.detail.mode;
+        console.log(mode);
+        setSidebarMode(mode);
+    }, [
+        setSidebarMode
+    ]);
     const onUpdateInteractionItem = react.useCallback((e)=>{
         const interactionItem = e.detail;
         setInteractionItem(interactionItem);
@@ -396,6 +404,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
         window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -443,7 +452,8 @@ const Toolbox = ()=>{
         onLimitCreateThemeSection,
         onUpdateInteractionItem,
         onUpdateInteractionIsSelectOnPage,
-        onUpdateInteractionSettingType
+        onUpdateInteractionSettingType,
+        onChangeSidebarMode
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/esm/components/builder/Header.js

@@ -18,7 +18,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate, openPageSetting } = props;
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
-    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
+    const sidebarMode = usePageStore((s)=>s.sidebarMode);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -177,7 +177,7 @@ const Header = (props)=>{
                     ]
                 })
             }),
-            isSelectOnPage && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
+            sidebarMode === 'interaction' && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
         ]
     });
 };

package/dist/esm/components/builder/InteractionSelectOnPageHeader.js

@@ -10,6 +10,7 @@ const InteractionSelectOnPageHeader = ()=>{
     const [hoverOption, setHoverOption] = useState(null);
     const [openDropdown, setOpenDropdown] = useState(false);
     const popupRef = useRef(null);
+    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const handleSetInteraction = (type)=>{
         setOpenDropdown(false);
         setInteractionSelectType(type);
@@ -66,7 +67,7 @@ const InteractionSelectOnPageHeader = ()=>{
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx("header", {
+            isSelectOnPage && /*#__PURE__*/ jsx("header", {
                 className: "gp-flex gp-text-[12px] gp-justify-center gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-[1000] gp-bg-[#151515] gp-text-white interaction-select-mode-header",
                 children: /*#__PURE__*/ jsxs("section", {
                     className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-2",
@@ -174,7 +175,9 @@ const InteractionSelectOnPageHeader = ()=>{
                 })
             }),
             /*#__PURE__*/ jsx("div", {
-                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : 'gp-pointer-events-none'}`,
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : ''}
+        ${isSelectOnPage ? 'gp-pointer-events-none' : 'gp-pointer-events-auto'}
+        `,
                 style: {
                     height: 'calc(100% - 40px)'
                 }

package/dist/esm/components/builder/Toolbox.js

@@ -37,6 +37,7 @@ const Toolbox = ()=>{
     const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
     const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
     const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
+    const setSidebarMode = usePageStore((s)=>s.setSidebarMode);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -355,6 +356,13 @@ const Toolbox = ()=>{
     }, [
         setInteractionSettingType
     ]);
+    const onChangeSidebarMode = useCallback((e)=>{
+        const mode = e.detail.mode;
+        console.log(mode);
+        setSidebarMode(mode);
+    }, [
+        setSidebarMode
+    ]);
     const onUpdateInteractionItem = useCallback((e)=>{
         const interactionItem = e.detail;
         setInteractionItem(interactionItem);
@@ -392,6 +400,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
         window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -439,7 +448,8 @@ const Toolbox = ()=>{
         onLimitCreateThemeSection,
         onUpdateInteractionItem,
         onUpdateInteractionIsSelectOnPage,
-        onUpdateInteractionSettingType
+        onUpdateInteractionSettingType,
+        onChangeSidebarMode
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.57.0-staging.16",
+  "version": "1.57.0-staging.20",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.57.0-staging.16",
+    "@gem-sdk/core": "1.57.0-staging.20",
     "@gem-sdk/plugin-cookie-bar": "1.57.0-staging.2",
     "@gem-sdk/plugin-quick-view": "1.57.0-staging.2",
     "@gem-sdk/plugin-sticky-add-to-cart": "1.57.0-staging.2"