@gem-sdk/core 1.27.11 → 1.27.15

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -25,24 +25,6 @@ const isSection = (el)=>{
     const tag = el.getAttribute('data-component-tag');
     return tag === 'Section';
 };
-const isOverToolbarPosition = (el, parent)=>{
-    const rect = el.getBoundingClientRect();
-    const rectP = parent.getBoundingClientRect();
-    // 32px = toolbar active height
-    return rect.top - rectP.top < 32 + 1;
-};
-const findOverflowParent = (element, initEl)=>{
-    const thisEl = element;
-    const origEl = initEl || thisEl;
-    if (!thisEl) return;
-    if (isSection(thisEl)) return;
-    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
-    if (thisEl.parentElement) {
-        return findOverflowParent(thisEl.parentElement, origEl);
-    } else {
-        return;
-    }
-};
 const ComponentToolbarPreview = ({ ...props })=>{
     const isThemeSection = props.isThemeSection;
     const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
@@ -53,13 +35,32 @@ const ComponentToolbarPreview = ({ ...props })=>{
     const [isShowParent, setIsShowParent] = react.useState(false);
     const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
     const [parents, setParents] = react.useState([]);
+    const isOverToolbarPosition = (el, parent)=>{
+        const parentLenght = parents.length;
+        const rect = el.getBoundingClientRect();
+        const rectP = parent.getBoundingClientRect();
+        // 36px = toolbar active height + 4 spaces
+        return rect.top - rectP.top < parentLenght * 36;
+    };
+    const findOverflowParent = (element, initEl)=>{
+        const thisEl = element;
+        const origEl = initEl || thisEl;
+        if (!thisEl) return;
+        if (isSection(thisEl)) return;
+        if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+        if (thisEl.parentElement) {
+            return findOverflowParent(thisEl.parentElement, origEl);
+        } else {
+            return;
+        }
+    };
     // Get parents
     const onActiveComponent = react.useCallback((e)=>{
         const detail = e.detail;
         if (detail?.componentUid == props.uid) {
             const currentParents = getParents(props.uid).filter((parent)=>{
                 if (parent.uid === 'ROOT') return false;
-                if (parent.tag === 'Section') return false;
+                if (parent.tag === 'Section' && isThemeSectionEditor) return false;
                 if (parent.editorConfigs?.toolbar?.hide) return false;
                 if (parent.editorConfigs?.component?.noSetting) return false;
                 return true;
@@ -72,7 +73,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
     }, [
         setParents,
         getParents,
-        props.uid
+        props.uid,
+        isThemeSectionEditor
     ]);
     react.useEffect(()=>{
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -115,7 +117,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                 setIsShowParentRevert(true);
             } else {
                 const rect = $toolbar.getBoundingClientRect();
-                if (rect.top < parents.length * 24) {
+                if (rect.top < parents.length * 36) {
                     setIsShowParentRevert(true);
                 } else {
                     setIsShowParentRevert(false);
@@ -281,12 +283,21 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             })
                         ]
                     }),
-                    isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    isShowParent && parents.map((parent, index)=>{
+                        // Update count columns of Row
+                        const parentLength = parent?.childrens?.length ?? 0;
+                        let parent_label = parent.label;
+                        if (parent.label === 'Row') {
+                            parent_label = parentLength <= 1 ? parent.label + ' ' + parentLength + ' col' : parent.label + ' ' + parentLength + ' cols';
+                        }
+                        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                             "data-toolbar-parent": true,
                             "data-parent-uid": parent.uid,
                             "data-toolbar-theme-section": isThemeSectionEditor,
+                            "data-toolbar-parent-revert": isShowParentRevert,
                             style: {
-                                top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
+                                top: !isShowParentRevert ? `${-36 * (index + 1)}px` // 32 height + 4 spacing
+                                 : `${36 * (index + 1)}px`
                             },
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -326,10 +337,11 @@ const ComponentToolbarPreview = ({ ...props })=>{
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx("div", {
                                     "data-toolbar-name": true,
-                                    children: parent.label
+                                    children: parent_label
                                 })
                             ]
-                        }, parent.uid)),
+                        }, parent.uid);
+                    }),
                     props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
                         ...props
                     }),
@@ -417,8 +429,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             viewBox: "0 0 16 16",
                             fill: "none",
                             children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
-                                fill: "currentColor"
+                                d: "M8.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
+                                fill: "#212121"
                             })
                         })
                     }),
@@ -437,8 +449,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             viewBox: "0 0 16 16",
                             fill: "none",
                             children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
-                                fill: "currentColor"
+                                d: "M8.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
+                                fill: "#212121"
                             })
                         })
                     })

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

@@ -102,6 +102,43 @@ function Spacing(props) {
     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 = isNaN(parseInt(detail?.marginBottom)) ? 0 : Math.max(parseInt(detail?.marginBottom), 0);
+            const newValue = `${currentValue}px`;
+            if ($bottomDrag.current && $bottomBg.current) {
+                $bottomBg.current.style.height = newValue;
+                $bottomDrag.current.style.top = newValue;
+            }
+        }
+    }, []);
+    react.useEffect(()=>{
+        window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+        return ()=>{
+            window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+        };
+    }, [
+        onUpdateMarginBottom
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
             "data-spacing": true,

package/dist/cjs/helpers/background.js

@@ -157,6 +157,8 @@ const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
             [`--pos${subfix}`]: 'absolute'
         },
         content: {
+            [`--w${subfix}`]: 'inherit',
+            [`--h${subfix}`]: 'inherit',
             [`--pos${subfix}`]: 'absolute',
             [`--bga${subfix}`]: bgAttachment
         }

package/dist/esm/components/ComponentToolbarPreview.js

@@ -23,24 +23,6 @@ const isSection = (el)=>{
     const tag = el.getAttribute('data-component-tag');
     return tag === 'Section';
 };
-const isOverToolbarPosition = (el, parent)=>{
-    const rect = el.getBoundingClientRect();
-    const rectP = parent.getBoundingClientRect();
-    // 32px = toolbar active height
-    return rect.top - rectP.top < 32 + 1;
-};
-const findOverflowParent = (element, initEl)=>{
-    const thisEl = element;
-    const origEl = initEl || thisEl;
-    if (!thisEl) return;
-    if (isSection(thisEl)) return;
-    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
-    if (thisEl.parentElement) {
-        return findOverflowParent(thisEl.parentElement, origEl);
-    } else {
-        return;
-    }
-};
 const ComponentToolbarPreview = ({ ...props })=>{
     const isThemeSection = props.isThemeSection;
     const editingPageType = useShopStore((s)=>s.pageType);
@@ -51,13 +33,32 @@ const ComponentToolbarPreview = ({ ...props })=>{
     const [isShowParent, setIsShowParent] = useState(false);
     const [isShowParentRevert, setIsShowParentRevert] = useState(false);
     const [parents, setParents] = useState([]);
+    const isOverToolbarPosition = (el, parent)=>{
+        const parentLenght = parents.length;
+        const rect = el.getBoundingClientRect();
+        const rectP = parent.getBoundingClientRect();
+        // 36px = toolbar active height + 4 spaces
+        return rect.top - rectP.top < parentLenght * 36;
+    };
+    const findOverflowParent = (element, initEl)=>{
+        const thisEl = element;
+        const origEl = initEl || thisEl;
+        if (!thisEl) return;
+        if (isSection(thisEl)) return;
+        if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+        if (thisEl.parentElement) {
+            return findOverflowParent(thisEl.parentElement, origEl);
+        } else {
+            return;
+        }
+    };
     // Get parents
     const onActiveComponent = useCallback((e)=>{
         const detail = e.detail;
         if (detail?.componentUid == props.uid) {
             const currentParents = getParents(props.uid).filter((parent)=>{
                 if (parent.uid === 'ROOT') return false;
-                if (parent.tag === 'Section') return false;
+                if (parent.tag === 'Section' && isThemeSectionEditor) return false;
                 if (parent.editorConfigs?.toolbar?.hide) return false;
                 if (parent.editorConfigs?.component?.noSetting) return false;
                 return true;
@@ -70,7 +71,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
     }, [
         setParents,
         getParents,
-        props.uid
+        props.uid,
+        isThemeSectionEditor
     ]);
     useEffect(()=>{
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -113,7 +115,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                 setIsShowParentRevert(true);
             } else {
                 const rect = $toolbar.getBoundingClientRect();
-                if (rect.top < parents.length * 24) {
+                if (rect.top < parents.length * 36) {
                     setIsShowParentRevert(true);
                 } else {
                     setIsShowParentRevert(false);
@@ -279,12 +281,21 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             })
                         ]
                     }),
-                    isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxs("div", {
+                    isShowParent && parents.map((parent, index)=>{
+                        // Update count columns of Row
+                        const parentLength = parent?.childrens?.length ?? 0;
+                        let parent_label = parent.label;
+                        if (parent.label === 'Row') {
+                            parent_label = parentLength <= 1 ? parent.label + ' ' + parentLength + ' col' : parent.label + ' ' + parentLength + ' cols';
+                        }
+                        return /*#__PURE__*/ jsxs("div", {
                             "data-toolbar-parent": true,
                             "data-parent-uid": parent.uid,
                             "data-toolbar-theme-section": isThemeSectionEditor,
+                            "data-toolbar-parent-revert": isShowParentRevert,
                             style: {
-                                top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
+                                top: !isShowParentRevert ? `${-36 * (index + 1)}px` // 32 height + 4 spacing
+                                 : `${36 * (index + 1)}px`
                             },
                             children: [
                                 /*#__PURE__*/ jsx("div", {
@@ -324,10 +335,11 @@ const ComponentToolbarPreview = ({ ...props })=>{
                                 }),
                                 /*#__PURE__*/ jsx("div", {
                                     "data-toolbar-name": true,
-                                    children: parent.label
+                                    children: parent_label
                                 })
                             ]
-                        }, parent.uid)),
+                        }, parent.uid);
+                    }),
                     props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
                         ...props
                     }),
@@ -415,8 +427,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             viewBox: "0 0 16 16",
                             fill: "none",
                             children: /*#__PURE__*/ jsx("path", {
-                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
-                                fill: "currentColor"
+                                d: "M8.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
+                                fill: "#212121"
                             })
                         })
                     }),
@@ -435,8 +447,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             viewBox: "0 0 16 16",
                             fill: "none",
                             children: /*#__PURE__*/ jsx("path", {
-                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
-                                fill: "currentColor"
+                                d: "M8.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
+                                fill: "#212121"
                             })
                         })
                     })

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

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import 'zustand';
 import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
 import 'swr';
@@ -98,6 +98,43 @@ function Spacing(props) {
     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 = isNaN(parseInt(detail?.marginBottom)) ? 0 : Math.max(parseInt(detail?.marginBottom), 0);
+            const newValue = `${currentValue}px`;
+            if ($bottomDrag.current && $bottomBg.current) {
+                $bottomBg.current.style.height = newValue;
+                $bottomDrag.current.style.top = newValue;
+            }
+        }
+    }, []);
+    useEffect(()=>{
+        window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+        return ()=>{
+            window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
+        };
+    }, [
+        onUpdateMarginBottom
+    ]);
     return /*#__PURE__*/ jsx(Fragment, {
         children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
             "data-spacing": true,

package/dist/esm/helpers/background.js

@@ -155,6 +155,8 @@ const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
             [`--pos${subfix}`]: 'absolute'
         },
         content: {
+            [`--w${subfix}`]: 'inherit',
+            [`--h${subfix}`]: 'inherit',
             [`--pos${subfix}`]: 'absolute',
             [`--bga${subfix}`]: bgAttachment
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.27.11",
+  "version": "1.27.15",
   "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.27.9"
+    "@gem-sdk/styles": "1.27.14"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",