@gem-sdk/pages 1.23.0-moon.57 → 1.23.0-moon.60

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

@@ -11,6 +11,7 @@ const Toolbar = ()=>{
     const isDragging = react.useRef(false);
     const stopWatchReRenderComponent = react.useRef();
     const isResizeSpacing = react.useRef(false);
+    const isResizeColumn = react.useRef(false);
     /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
         const $parentOverflow = findOverflowParent($component, $toolbar);
         if ($parentOverflow) {
@@ -47,6 +48,7 @@ const Toolbar = ()=>{
         const $outline = getChildrenByAttrSelector($component, 'data-outline');
         const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
         const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
+        const $resizeColumn = getChildrenByAttrSelector($component, 'data-column');
         const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
         if (isThemeSection && $themeSectionStatus) {
             $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
@@ -78,6 +80,9 @@ const Toolbar = ()=>{
         if ($btnAddBottom) {
             $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
         }
+        if ($resizeColumn) {
+            $resizeColumn.setAttribute('data-column-visible', 'true');
+        }
     }, []);
     const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
         if (!$component) {
@@ -167,7 +172,8 @@ const Toolbar = ()=>{
             'data-toolbar-hover-revert',
             'data-toolbar-hover-inside',
             'data-outline-hover',
-            'data-toolbar-add-hover'
+            'data-toolbar-add-hover',
+            'data-column-visible'
         ];
         const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
         if ($elms) {
@@ -189,7 +195,8 @@ const Toolbar = ()=>{
             'data-toolbar-active-inside',
             'data-spacing-margin-bottom-active',
             'data-toolbar-force-hover',
-            'data-outline-force-hover'
+            'data-outline-force-hover',
+            'data-column-force-visible'
         ];
         const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
         if ($elms) {
@@ -290,6 +297,7 @@ const Toolbar = ()=>{
         const $outline = getChildrenByAttrSelector($component, 'data-outline');
         const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
         const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
+        const $resizeColumn = getChildrenByAttrSelector($component, 'data-column');
         if ($toolbar) {
             currentComponentActive.current = {
                 componentUid,
@@ -312,6 +320,9 @@ const Toolbar = ()=>{
         if ($btnAddBottom) {
             $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
         }
+        if ($resizeColumn) {
+            $resizeColumn.setAttribute('data-column-force-visible', 'true');
+        }
         // Active same element in product list
         if (productId) {
             const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
@@ -464,6 +475,7 @@ const Toolbar = ()=>{
     /* Event listener */ const onMouseMove = react.useCallback((e)=>{
         if (isDragging.current) return;
         if (isResizeSpacing.current) return;
+        if (isResizeColumn.current) return;
         const $target = e.target;
         if (!$target) {
             removeHoverOverlayComponent();
@@ -608,6 +620,17 @@ const Toolbar = ()=>{
     }, [
         removeHoverComponent
     ]);
+    const onResizeColumn = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.value) {
+            removeHoverComponent();
+            isResizeColumn.current = true;
+        } else {
+            isResizeColumn.current = false;
+        }
+    }, [
+        removeHoverComponent
+    ]);
     /* Register event */ react.useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -616,6 +639,7 @@ const Toolbar = ()=>{
         window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
         window.addEventListener('editor:toolbar:show-parents', onShowParents);
         window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
+        window.addEventListener('editor:toolbar:resize-column', onResizeColumn);
         return ()=>{
             document.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('editor:active-component', onActiveComponent);
@@ -624,6 +648,7 @@ const Toolbar = ()=>{
             window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
             window.removeEventListener('editor:toolbar:show-parents', onShowParents);
             window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
+            window.removeEventListener('editor:toolbar:resize-column', onResizeColumn);
         };
     }, [
         onMouseMove,
@@ -632,7 +657,8 @@ const Toolbar = ()=>{
         onIsDragging,
         onIsEditingTextEditor,
         onShowParents,
-        onResizeSpacing
+        onResizeSpacing,
+        onResizeColumn
     ]);
     return null;
 };

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

@@ -7,6 +7,7 @@ const Toolbar = ()=>{
     const isDragging = useRef(false);
     const stopWatchReRenderComponent = useRef();
     const isResizeSpacing = useRef(false);
+    const isResizeColumn = useRef(false);
     /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
         const $parentOverflow = findOverflowParent($component, $toolbar);
         if ($parentOverflow) {
@@ -43,6 +44,7 @@ const Toolbar = ()=>{
         const $outline = getChildrenByAttrSelector($component, 'data-outline');
         const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
         const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
+        const $resizeColumn = getChildrenByAttrSelector($component, 'data-column');
         const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
         if (isThemeSection && $themeSectionStatus) {
             $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
@@ -74,6 +76,9 @@ const Toolbar = ()=>{
         if ($btnAddBottom) {
             $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
         }
+        if ($resizeColumn) {
+            $resizeColumn.setAttribute('data-column-visible', 'true');
+        }
     }, []);
     const setHoverComponentParents = useCallback(({ $component, componentUid })=>{
         if (!$component) {
@@ -163,7 +168,8 @@ const Toolbar = ()=>{
             'data-toolbar-hover-revert',
             'data-toolbar-hover-inside',
             'data-outline-hover',
-            'data-toolbar-add-hover'
+            'data-toolbar-add-hover',
+            'data-column-visible'
         ];
         const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
         if ($elms) {
@@ -185,7 +191,8 @@ const Toolbar = ()=>{
             'data-toolbar-active-inside',
             'data-spacing-margin-bottom-active',
             'data-toolbar-force-hover',
-            'data-outline-force-hover'
+            'data-outline-force-hover',
+            'data-column-force-visible'
         ];
         const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
         if ($elms) {
@@ -286,6 +293,7 @@ const Toolbar = ()=>{
         const $outline = getChildrenByAttrSelector($component, 'data-outline');
         const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
         const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
+        const $resizeColumn = getChildrenByAttrSelector($component, 'data-column');
         if ($toolbar) {
             currentComponentActive.current = {
                 componentUid,
@@ -308,6 +316,9 @@ const Toolbar = ()=>{
         if ($btnAddBottom) {
             $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
         }
+        if ($resizeColumn) {
+            $resizeColumn.setAttribute('data-column-force-visible', 'true');
+        }
         // Active same element in product list
         if (productId) {
             const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
@@ -460,6 +471,7 @@ const Toolbar = ()=>{
     /* Event listener */ const onMouseMove = useCallback((e)=>{
         if (isDragging.current) return;
         if (isResizeSpacing.current) return;
+        if (isResizeColumn.current) return;
         const $target = e.target;
         if (!$target) {
             removeHoverOverlayComponent();
@@ -604,6 +616,17 @@ const Toolbar = ()=>{
     }, [
         removeHoverComponent
     ]);
+    const onResizeColumn = useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.value) {
+            removeHoverComponent();
+            isResizeColumn.current = true;
+        } else {
+            isResizeColumn.current = false;
+        }
+    }, [
+        removeHoverComponent
+    ]);
     /* Register event */ useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -612,6 +635,7 @@ const Toolbar = ()=>{
         window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
         window.addEventListener('editor:toolbar:show-parents', onShowParents);
         window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
+        window.addEventListener('editor:toolbar:resize-column', onResizeColumn);
         return ()=>{
             document.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('editor:active-component', onActiveComponent);
@@ -620,6 +644,7 @@ const Toolbar = ()=>{
             window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
             window.removeEventListener('editor:toolbar:show-parents', onShowParents);
             window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
+            window.removeEventListener('editor:toolbar:resize-column', onResizeColumn);
         };
     }, [
         onMouseMove,
@@ -628,7 +653,8 @@ const Toolbar = ()=>{
         onIsDragging,
         onIsEditingTextEditor,
         onShowParents,
-        onResizeSpacing
+        onResizeSpacing,
+        onResizeColumn
     ]);
     return null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.23.0-moon.57",
+  "version": "1.23.0-moon.60",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,10 +25,10 @@
     "next-seo": "^6.0.0"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.23.0-staging.55",
-    "@gem-sdk/plugin-cookie-bar": "1.23.0-staging.26",
-    "@gem-sdk/plugin-quick-view": "1.23.0-staging.26",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-staging.26"
+    "@gem-sdk/core": "1.23.0-moon.60",
+    "@gem-sdk/plugin-cookie-bar": "1.23.0-moon.58",
+    "@gem-sdk/plugin-quick-view": "1.23.0-moon.58",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-moon.58"
   },
   "peerDependencies": {
     "next": ">=13"