@gem-sdk/core 1.33.5 → 1.33.7

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -13,9 +13,9 @@ require('../hooks/useCartUI.js');
 var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
 var Tooltip = require('./toolbar/Tooltip.js');
 var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
+var Resize = require('./resize/Resize.js');
 require('../helpers/convert.js');
 
-// import Resize from './resize/Resize';
 const SECTION_LIMIT = 25;
 const notVisible = (el)=>{
     const overflow = getComputedStyle(el).overflow;
@@ -462,6 +462,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         })
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
+                ...props
             })
         ]
     });

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Spacing = require('./Spacing.js');
+
+function Resize(props) {
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
+            ...props
+        })
+    });
+}
+
+exports.default = Resize;

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

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('zustand');
+var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
+require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../../hooks/useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+require('../../helpers/convert.js');
+
+function Spacing(props) {
+    const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const $bottomDrag = react.useRef(null);
+    const $bottomBg = react.useRef(null);
+    const delayMouseMove = react.useRef(null);
+    const isDragging = react.useRef(false);
+    const startY = react.useRef(0);
+    const marginBottom = react.useRef(0);
+    const getNewValueMargin = (event)=>{
+        const top = event.clientY;
+        const diffY = Math.ceil(top - startY.current);
+        const currentValue = marginBottom.current || 0;
+        const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
+        return {
+            newValue
+        };
+    };
+    const onMouseMoveDocument = (event)=>{
+        if ($bottomDrag.current && $bottomBg.current) {
+            // $bottomDrag.current.
+            const { newValue } = getNewValueMargin(event);
+            $bottomBg.current.style.height = newValue;
+            $bottomDrag.current.style.top = newValue;
+            const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
+            if ($component) {
+                $component.style.marginBottom = newValue;
+            }
+        }
+    };
+    const onMouseUpDocument = ()=>{
+        endDrag();
+    };
+    const startDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        delayMouseMove.current = setTimeout(()=>{
+            isDragging.current = true;
+            const event = new CustomEvent('editor:toolbar:resize-spacing', {
+                bubbles: true,
+                detail: {
+                    value: true
+                }
+            });
+            window.dispatchEvent(event);
+            document.addEventListener('mousemove', onMouseMoveDocument);
+            document.addEventListener('mouseup', onMouseUpDocument);
+        }, 100);
+    };
+    const endDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        isDragging.current = false;
+        const event = new CustomEvent('editor:toolbar:resize-spacing', {
+            bubbles: true,
+            detail: {
+                value: false
+            }
+        });
+        window.dispatchEvent(event);
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            const marginBottom = style.top;
+            const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
+                bubbles: true,
+                detail: {
+                    componentUid: props.uid,
+                    marginBottom
+                }
+            });
+            window.dispatchEvent(event);
+        }
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            $component.style.marginBottom = '';
+        }
+        document.removeEventListener('mousemove', onMouseMoveDocument);
+        document.removeEventListener('mouseup', onMouseUpDocument);
+    };
+    const onMouseDown = (event)=>{
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            startY.current = event.clientY;
+            marginBottom.current = parseFloat(style.top);
+            startDrag();
+        }
+    };
+    const onMouseUp = ()=>{
+        endDrag();
+    };
+    const getChildrenByAttrSelector = ($el, attrSelector)=>{
+        const childLen = $el.children.length;
+        if (childLen) {
+            for(let i = 0; i < childLen; i++){
+                const children = $el.children[i];
+                if (children) {
+                    const is = children.getAttribute(attrSelector);
+                    if (is) {
+                        return children;
+                    }
+                }
+            }
+        }
+    };
+    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 tag = el.getAttribute('data-component-tag');
+        return tag === 'Dialog';
+    };
+    const isSticky = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Sticky';
+    };
+    const setPositionSpacing = react.useCallback((paddingLeft)=>{
+        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;
+                    $bottomDrag.current.style.transform = translateCss;
+                }
+            }
+        }
+    }, []);
+    const onUpdatePaddingLeft = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        if (detail?.paddingLeft) {
+            setPositionSpacing(detail.paddingLeft);
+        }
+    }, [
+        setPositionSpacing
+    ]);
+    react.useEffect(()=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            const style = getComputedStyle($component);
+            const paddingLeft = style.paddingLeft;
+            setPositionSpacing(paddingLeft);
+        }
+    });
+    react.useEffect(()=>{
+        window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+        window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
+        return ()=>{
+            window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+            window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
+        };
+    }, [
+        onUpdateMarginBottom,
+        onUpdatePaddingLeft
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            className: "absolute w-full bottom-0",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                "data-spacing-margin-bottom": true,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        "data-spacing-margin-bottom-bg": true,
+                        ref: $bottomBg,
+                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            "data-spacing-margin-bottom-value": true
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        ref: $bottomDrag,
+                        "data-spacing-margin-bottom-drag": true,
+                        onMouseDown: onMouseDown,
+                        onMouseUp: onMouseUp,
+                        role: "presentation"
+                    })
+                ]
+            })
+        })
+    });
+}
+
+exports.default = Spacing;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -11,9 +11,9 @@ import '../hooks/useCartUI.js';
 import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
 import Tooltip from './toolbar/Tooltip.js';
 import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
+import Resize from './resize/Resize.js';
 import '../helpers/convert.js';
 
-// import Resize from './resize/Resize';
 const SECTION_LIMIT = 25;
 const notVisible = (el)=>{
     const overflow = getComputedStyle(el).overflow;
@@ -460,6 +460,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         })
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsx(Resize, {
+                ...props
             })
         ]
     });

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

@@ -0,0 +1,12 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import Spacing from './Spacing.js';
+
+function Resize(props) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Spacing, {
+            ...props
+        })
+    });
+}
+
+export { Resize as default };

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

@@ -0,0 +1,218 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useCallback, useEffect } from 'react';
+import 'zustand';
+import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
+import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import '../../helpers/convert.js';
+
+function Spacing(props) {
+    const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const $bottomDrag = useRef(null);
+    const $bottomBg = useRef(null);
+    const delayMouseMove = useRef(null);
+    const isDragging = useRef(false);
+    const startY = useRef(0);
+    const marginBottom = useRef(0);
+    const getNewValueMargin = (event)=>{
+        const top = event.clientY;
+        const diffY = Math.ceil(top - startY.current);
+        const currentValue = marginBottom.current || 0;
+        const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
+        return {
+            newValue
+        };
+    };
+    const onMouseMoveDocument = (event)=>{
+        if ($bottomDrag.current && $bottomBg.current) {
+            // $bottomDrag.current.
+            const { newValue } = getNewValueMargin(event);
+            $bottomBg.current.style.height = newValue;
+            $bottomDrag.current.style.top = newValue;
+            const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
+            if ($component) {
+                $component.style.marginBottom = newValue;
+            }
+        }
+    };
+    const onMouseUpDocument = ()=>{
+        endDrag();
+    };
+    const startDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        delayMouseMove.current = setTimeout(()=>{
+            isDragging.current = true;
+            const event = new CustomEvent('editor:toolbar:resize-spacing', {
+                bubbles: true,
+                detail: {
+                    value: true
+                }
+            });
+            window.dispatchEvent(event);
+            document.addEventListener('mousemove', onMouseMoveDocument);
+            document.addEventListener('mouseup', onMouseUpDocument);
+        }, 100);
+    };
+    const endDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        isDragging.current = false;
+        const event = new CustomEvent('editor:toolbar:resize-spacing', {
+            bubbles: true,
+            detail: {
+                value: false
+            }
+        });
+        window.dispatchEvent(event);
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            const marginBottom = style.top;
+            const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
+                bubbles: true,
+                detail: {
+                    componentUid: props.uid,
+                    marginBottom
+                }
+            });
+            window.dispatchEvent(event);
+        }
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            $component.style.marginBottom = '';
+        }
+        document.removeEventListener('mousemove', onMouseMoveDocument);
+        document.removeEventListener('mouseup', onMouseUpDocument);
+    };
+    const onMouseDown = (event)=>{
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            startY.current = event.clientY;
+            marginBottom.current = parseFloat(style.top);
+            startDrag();
+        }
+    };
+    const onMouseUp = ()=>{
+        endDrag();
+    };
+    const getChildrenByAttrSelector = ($el, attrSelector)=>{
+        const childLen = $el.children.length;
+        if (childLen) {
+            for(let i = 0; i < childLen; i++){
+                const children = $el.children[i];
+                if (children) {
+                    const is = children.getAttribute(attrSelector);
+                    if (is) {
+                        return children;
+                    }
+                }
+            }
+        }
+    };
+    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 tag = el.getAttribute('data-component-tag');
+        return tag === 'Dialog';
+    };
+    const isSticky = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Sticky';
+    };
+    const setPositionSpacing = useCallback((paddingLeft)=>{
+        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;
+                    $bottomDrag.current.style.transform = translateCss;
+                }
+            }
+        }
+    }, []);
+    const onUpdatePaddingLeft = useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        if (detail?.paddingLeft) {
+            setPositionSpacing(detail.paddingLeft);
+        }
+    }, [
+        setPositionSpacing
+    ]);
+    useEffect(()=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            const style = getComputedStyle($component);
+            const paddingLeft = style.paddingLeft;
+            setPositionSpacing(paddingLeft);
+        }
+    });
+    useEffect(()=>{
+        window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+        window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
+        return ()=>{
+            window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+            window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
+        };
+    }, [
+        onUpdateMarginBottom,
+        onUpdatePaddingLeft
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            className: "absolute w-full bottom-0",
+            children: /*#__PURE__*/ jsxs("div", {
+                "data-spacing-margin-bottom": true,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        "data-spacing-margin-bottom-bg": true,
+                        ref: $bottomBg,
+                        children: /*#__PURE__*/ jsx("div", {
+                            "data-spacing-margin-bottom-value": true
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        ref: $bottomDrag,
+                        "data-spacing-margin-bottom-drag": true,
+                        onMouseDown: onMouseDown,
+                        onMouseUp: onMouseUp,
+                        role: "presentation"
+                    })
+                ]
+            })
+        })
+    });
+}
+
+export { Spacing as default };

package/dist/types/index.d.ts

@@ -1250,6 +1250,9 @@ type ControlUI = {
         tooltip?: {
             icon?: string;
             content?: string;
+            iconClass?: string;
+            containerClass?: string;
+            enableTeleport?: boolean;
         };
         hideOnDevices?: {
             desktop?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.33.5",
+  "version": "1.33.7",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",