@gem-sdk/core 1.23.0-staging.194 → 1.23.0-staging.197

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/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/types/index.d.ts

@@ -940,6 +940,8 @@ type ShapeOptionKeyword = 'original' | 'square' | 'vertical' | 'horizontal' | 'c
 type HeightOptionKeyword = 'fit-content' | 'fit-screen';
 type OptionKeyword = 'default' | 'auto' | 'full' | 'equal' | 'small' | 'medium' | 'large' | HeightOptionKeyword | ShapeOptionKeyword;
 type PaddingOptions = 'small' | 'medium' | 'large' | 'custom';
+type ShapeOptions = 'square' | 'vertical' | 'horizontal' | 'custom' | 'original';
+type ShapeConfig = Partial<Record<ShapeOptions, string>>;
 type PaddingConfig = Partial<Record<PaddingOptions, {
     vertical: string;
     horizontal: string;
@@ -948,6 +950,8 @@ type SettingConfig = {
     sizeConfig?: Partial<Record<'small' | 'medium' | 'large', string>>;
     displayOptions?: OptionKeyword[];
     paddingConfig?: PaddingConfig;
+    shapeConfig?: ShapeConfig;
+    shapeTitleConfig?: ShapeConfig;
     name?: string;
     units?: string[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.23.0-staging.194",
+  "version": "1.23.0-staging.197",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.23.0-staging.26",
-    "@gem-sdk/styles": "1.23.0-staging.186"
+    "@gem-sdk/styles": "1.23.0-staging.196"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",