@gem-sdk/core 1.35.2 → 1.36.1

package/dist/cjs/components/Render.liquid.js

@@ -234,7 +234,6 @@ const appendAnimation = (props, liquid)=>{
         transform: 'unset'
     };
     return render.template`
-  ${render.RenderIf(convert.isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${convert.baseAssetURL}/assets-v2/gp-animation.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   <gp-animation
     gp-data='${JSON.stringify({
         config: animation,
@@ -248,6 +247,7 @@ const appendAnimation = (props, liquid)=>{
         ...makeStyle.makeStyleResponsive('op', opacityObject)
     }}">${liquid}</div>
   </gp-animation>
+  ${render.RenderIf(convert.isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${convert.baseAssetURL}/assets-v2/gp-animation.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };
 const RenderChildren = (props)=>{

package/dist/cjs/components/resize/Spacing.js

@@ -23,6 +23,10 @@ function Spacing(props) {
     const isDragging = react.useRef(false);
     const startY = react.useRef(0);
     const marginBottom = react.useRef(0);
+    const $visualNumberValue = react.useRef(null);
+    const [marginBottomValue, setMarginBottomValue] = react.useState(0);
+    const [isShowVisual, setIsShowVisual] = react.useState(false);
+    const hideVisualNumberValue = react.useRef(null);
     const getNewValueMargin = (event)=>{
         const top = event.clientY;
         const diffY = Math.ceil(top - startY.current);
@@ -41,6 +45,7 @@ function Spacing(props) {
             const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
             if ($component) {
                 $component.style.marginBottom = newValue;
+                onShowMarginBottomNumber(newValue);
             }
         }
     };
@@ -116,80 +121,84 @@ function Spacing(props) {
             }
         }
     };
-    const onUpdateMarginBottom = react.useCallback((e)=>{
-        if (isDragging.current) return;
-        const detail = e.detail;
-        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
-        const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
-        const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
-        if (isActive && detail?.marginBottom) {
-            const currentValue = parseInt(detail?.marginBottom);
-            const newValue = `${currentValue}px`;
-            if ($bottomDrag.current && $bottomBg.current) {
-                if (currentValue < 0) {
-                    $bottomBg.current.style.display = 'none';
-                    $bottomDrag.current.style.display = 'none';
-                } else {
-                    $bottomBg.current.style.display = 'block';
-                    $bottomDrag.current.style.display = 'block';
-                    $bottomBg.current.style.height = newValue;
-                    $bottomDrag.current.style.top = newValue;
-                }
-            }
-        }
-    }, []);
-    const isPopup = (el)=>{
+    const isLayoutElement = (el)=>{
         const tag = el.getAttribute('data-component-tag');
-        return tag === 'Dialog';
+        return tag === 'Row' || tag === 'Product';
     };
-    const isSticky = (el)=>{
-        const tag = el.getAttribute('data-component-tag');
-        return tag === 'Sticky';
-    };
-    const setPositionSpacing = react.useCallback((paddingLeft)=>{
+    const updateSpacing = react.useCallback(()=>{
         const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
-        if ($component) {
-            if (isPopup($component) || isSticky($component)) return;
-            const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
-            const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
-            if (isActive && paddingLeft) {
-                const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
-                const newValue = `-${currentValue}px`;
-                const translateCss = `translate(-${currentValue}px, -100%)`;
-                if ($bottomDrag.current && $bottomBg.current) {
-                    $bottomBg.current.style.left = newValue;
+        if (!$component) return;
+        const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+        if (!toolbar) return;
+        const isActive = toolbar.getAttribute('data-toolbar-active');
+        if (!isActive) return;
+        const style = getComputedStyle($component);
+        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+        const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
+        if ($marginBottom) {
+            if ($bottomBg.current && $bottomDrag.current) {
+                let value = style.marginBottom;
+                onShowMarginBottomNumber(value);
+                if (parseFloat(value) < 0) {
+                    value = '0';
+                }
+                $bottomBg.current.style.height = value;
+                $bottomDrag.current.style.top = value;
+                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
+                if (isLayoutElement($component)) {
+                    $bottomBg.current.style.left = '0';
+                } else {
+                    const paddingLeft = style.paddingLeft;
+                    const leftValue = `-${paddingLeft}`;
+                    const translateCss = `translate(${leftValue}, -100%)`;
+                    $bottomBg.current.style.left = leftValue;
                     $bottomDrag.current.style.transform = translateCss;
                 }
             }
         }
     }, []);
-    const onUpdatePaddingLeft = react.useCallback((e)=>{
-        if (isDragging.current) return;
-        const detail = e.detail;
-        if (detail?.paddingLeft) {
-            setPositionSpacing(detail.paddingLeft);
+    const onShowMarginBottomNumber = (value)=>{
+        const parsedValue = parseFloat(value);
+        setMarginBottomValue(parsedValue);
+        setIsShowVisual(true);
+        if (hideVisualNumberValue.current) clearTimeout(hideVisualNumberValue.current);
+        hideVisualNumberValue.current = setTimeout(()=>{
+            setIsShowVisual(false);
+        }, 2000);
+        // break point 28px
+        const topPosition = parsedValue < 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
+        if ($visualNumberValue.current) {
+            $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
         }
-    }, [
-        setPositionSpacing
-    ]);
+    };
+    const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
     react.useEffect(()=>{
-        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
-        if ($component) {
-            const style = getComputedStyle($component);
-            const paddingLeft = style.paddingLeft;
-            setPositionSpacing(paddingLeft);
+        // validate spacing setting changed
+        if (JSON.stringify(previousAdvanced) !== JSON.stringify(props.advanced?.['spacing-setting'])) {
+            updateSpacing();
         }
-    });
+    }, [
+        previousAdvanced,
+        props.advanced,
+        updateSpacing
+    ]);
+    const onWindowResize = react.useCallback(()=>{
+        updateSpacing();
+    }, [
+        updateSpacing
+    ]);
     react.useEffect(()=>{
-        window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
-        window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
+        window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
+        window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        window.addEventListener('resize', onWindowResize);
         return ()=>{
-            window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
-            window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
+            window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
+            window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
+            window.removeEventListener('resize', onWindowResize);
         };
     }, [
-        onUpdateMarginBottom,
-        onUpdatePaddingLeft
+        onWindowResize,
+        updateSpacing
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -199,12 +208,20 @@ function Spacing(props) {
             children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 "data-spacing-margin-bottom": true,
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         "data-spacing-margin-bottom-bg": true,
                         ref: $bottomBg,
-                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            "data-spacing-margin-bottom-value": true
-                        })
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-active": isShowVisual,
+                                "data-value-number": true,
+                                ref: $visualNumberValue,
+                                children: marginBottomValue
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                         ref: $bottomDrag,
@@ -218,5 +235,14 @@ function Spacing(props) {
         })
     });
 }
+const usePrevious = (value)=>{
+    const ref = react.useRef();
+    react.useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
 
 exports.default = Spacing;

package/dist/esm/components/Render.liquid.js

@@ -230,7 +230,6 @@ const appendAnimation = (props, liquid)=>{
         transform: 'unset'
     };
     return template`
-  ${RenderIf(isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${baseAssetURL}/assets-v2/gp-animation.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   <gp-animation
     gp-data='${JSON.stringify({
         config: animation,
@@ -244,6 +243,7 @@ const appendAnimation = (props, liquid)=>{
         ...makeStyleResponsive('op', opacityObject)
     }}">${liquid}</div>
   </gp-animation>
+  ${RenderIf(isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${baseAssetURL}/assets-v2/gp-animation.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };
 const RenderChildren = (props)=>{

package/dist/esm/components/resize/Spacing.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import 'zustand';
 import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
 import 'swr';
@@ -19,6 +19,10 @@ function Spacing(props) {
     const isDragging = useRef(false);
     const startY = useRef(0);
     const marginBottom = useRef(0);
+    const $visualNumberValue = useRef(null);
+    const [marginBottomValue, setMarginBottomValue] = useState(0);
+    const [isShowVisual, setIsShowVisual] = useState(false);
+    const hideVisualNumberValue = useRef(null);
     const getNewValueMargin = (event)=>{
         const top = event.clientY;
         const diffY = Math.ceil(top - startY.current);
@@ -37,6 +41,7 @@ function Spacing(props) {
             const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
             if ($component) {
                 $component.style.marginBottom = newValue;
+                onShowMarginBottomNumber(newValue);
             }
         }
     };
@@ -112,80 +117,84 @@ function Spacing(props) {
             }
         }
     };
-    const onUpdateMarginBottom = useCallback((e)=>{
-        if (isDragging.current) return;
-        const detail = e.detail;
-        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
-        const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
-        const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
-        if (isActive && detail?.marginBottom) {
-            const currentValue = parseInt(detail?.marginBottom);
-            const newValue = `${currentValue}px`;
-            if ($bottomDrag.current && $bottomBg.current) {
-                if (currentValue < 0) {
-                    $bottomBg.current.style.display = 'none';
-                    $bottomDrag.current.style.display = 'none';
-                } else {
-                    $bottomBg.current.style.display = 'block';
-                    $bottomDrag.current.style.display = 'block';
-                    $bottomBg.current.style.height = newValue;
-                    $bottomDrag.current.style.top = newValue;
-                }
-            }
-        }
-    }, []);
-    const isPopup = (el)=>{
+    const isLayoutElement = (el)=>{
         const tag = el.getAttribute('data-component-tag');
-        return tag === 'Dialog';
+        return tag === 'Row' || tag === 'Product';
     };
-    const isSticky = (el)=>{
-        const tag = el.getAttribute('data-component-tag');
-        return tag === 'Sticky';
-    };
-    const setPositionSpacing = useCallback((paddingLeft)=>{
+    const updateSpacing = useCallback(()=>{
         const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
-        if ($component) {
-            if (isPopup($component) || isSticky($component)) return;
-            const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
-            const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
-            if (isActive && paddingLeft) {
-                const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
-                const newValue = `-${currentValue}px`;
-                const translateCss = `translate(-${currentValue}px, -100%)`;
-                if ($bottomDrag.current && $bottomBg.current) {
-                    $bottomBg.current.style.left = newValue;
+        if (!$component) return;
+        const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+        if (!toolbar) return;
+        const isActive = toolbar.getAttribute('data-toolbar-active');
+        if (!isActive) return;
+        const style = getComputedStyle($component);
+        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+        const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
+        if ($marginBottom) {
+            if ($bottomBg.current && $bottomDrag.current) {
+                let value = style.marginBottom;
+                onShowMarginBottomNumber(value);
+                if (parseFloat(value) < 0) {
+                    value = '0';
+                }
+                $bottomBg.current.style.height = value;
+                $bottomDrag.current.style.top = value;
+                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
+                if (isLayoutElement($component)) {
+                    $bottomBg.current.style.left = '0';
+                } else {
+                    const paddingLeft = style.paddingLeft;
+                    const leftValue = `-${paddingLeft}`;
+                    const translateCss = `translate(${leftValue}, -100%)`;
+                    $bottomBg.current.style.left = leftValue;
                     $bottomDrag.current.style.transform = translateCss;
                 }
             }
         }
     }, []);
-    const onUpdatePaddingLeft = useCallback((e)=>{
-        if (isDragging.current) return;
-        const detail = e.detail;
-        if (detail?.paddingLeft) {
-            setPositionSpacing(detail.paddingLeft);
+    const onShowMarginBottomNumber = (value)=>{
+        const parsedValue = parseFloat(value);
+        setMarginBottomValue(parsedValue);
+        setIsShowVisual(true);
+        if (hideVisualNumberValue.current) clearTimeout(hideVisualNumberValue.current);
+        hideVisualNumberValue.current = setTimeout(()=>{
+            setIsShowVisual(false);
+        }, 2000);
+        // break point 28px
+        const topPosition = parsedValue < 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
+        if ($visualNumberValue.current) {
+            $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
         }
-    }, [
-        setPositionSpacing
-    ]);
+    };
+    const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
     useEffect(()=>{
-        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
-        if ($component) {
-            const style = getComputedStyle($component);
-            const paddingLeft = style.paddingLeft;
-            setPositionSpacing(paddingLeft);
+        // validate spacing setting changed
+        if (JSON.stringify(previousAdvanced) !== JSON.stringify(props.advanced?.['spacing-setting'])) {
+            updateSpacing();
         }
-    });
+    }, [
+        previousAdvanced,
+        props.advanced,
+        updateSpacing
+    ]);
+    const onWindowResize = useCallback(()=>{
+        updateSpacing();
+    }, [
+        updateSpacing
+    ]);
     useEffect(()=>{
-        window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
-        window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
+        window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
+        window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        window.addEventListener('resize', onWindowResize);
         return ()=>{
-            window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
-            window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
+            window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
+            window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
+            window.removeEventListener('resize', onWindowResize);
         };
     }, [
-        onUpdateMarginBottom,
-        onUpdatePaddingLeft
+        onWindowResize,
+        updateSpacing
     ]);
     return /*#__PURE__*/ jsx(Fragment, {
         children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
@@ -195,12 +204,20 @@ function Spacing(props) {
             children: /*#__PURE__*/ jsxs("div", {
                 "data-spacing-margin-bottom": true,
                 children: [
-                    /*#__PURE__*/ jsx("div", {
+                    /*#__PURE__*/ jsxs("div", {
                         "data-spacing-margin-bottom-bg": true,
                         ref: $bottomBg,
-                        children: /*#__PURE__*/ jsx("div", {
-                            "data-spacing-margin-bottom-value": true
-                        })
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                "data-active": isShowVisual,
+                                "data-value-number": true,
+                                ref: $visualNumberValue,
+                                children: marginBottomValue
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsx("div", {
                         ref: $bottomDrag,
@@ -214,5 +231,14 @@ function Spacing(props) {
         })
     });
 }
+const usePrevious = (value)=>{
+    const ref = useRef();
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
 
 export { Spacing as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.35.2",
+  "version": "1.36.1",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.25.0",
-    "@gem-sdk/styles": "1.35.0"
+    "@gem-sdk/styles": "1.36.1"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",