@gem-sdk/pages 1.12.0-next.1 → 1.12.0-next.16

package/dist/cjs/components/Footer.js

@@ -6,19 +6,48 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var react = require('react');
 
+const defaultPadding = {
+    desktop: '68px',
+    tablet: '40px',
+    mobile: '40px'
+};
 const Footer = ()=>{
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
     const [shouldFixed, setShouldFixed] = react.useState(false);
+    const [padding, setPadding] = react.useState(defaultPadding);
     react.useEffect(()=>{
         const $iframe = parent.document.querySelector('.iframe');
         if (!$iframe) return;
         const $storefront = document.querySelector('#storefront');
         if (!$storefront) return;
+        const $iframeDoc = $iframe.contentDocument || $iframe.contentWindow.document;
+        const $section = $iframeDoc.getElementsByTagName('section');
         const headerHeight = 40;
         const footerHeight = 48;
         const iframeHeight = $iframe.clientHeight;
         const comparedHeight = layoutSetting?.showHeader ? iframeHeight - headerHeight - footerHeight : iframeHeight - footerHeight;
+        let prevWidth = 0;
         const observer = new ResizeObserver((entries)=>{
+            // Handle resize footer padding according to content
+            const currentWidth = entries[0]?.borderBoxSize?.[0]?.inlineSize;
+            const shouldUpdatePadding = !!$section.length && typeof currentWidth === 'number' && currentWidth !== prevWidth;
+            if (shouldUpdatePadding) {
+                prevWidth = currentWidth;
+                const padding = getComputedStyle($section[0]).getPropertyValue('padding-left');
+                const margin = getComputedStyle($section[0]).getPropertyValue('margin-left');
+                const newPadding = parseInt(margin, 10) + parseInt(padding, 10);
+                const basePadding = 68;
+                if (newPadding > basePadding) {
+                    setPadding({
+                        desktop: `${newPadding}px`,
+                        tablet: `${newPadding}px`,
+                        mobile: `${newPadding}px`
+                    });
+                } else {
+                    setPadding(defaultPadding);
+                }
+            }
+            // Handle set fixed footer
             const currentEditingFrameHeight = entries[0]?.target.clientHeight;
             if (currentEditingFrameHeight && comparedHeight) setShouldFixed(currentEditingFrameHeight < comparedHeight);
         });
@@ -26,12 +55,18 @@ const Footer = ()=>{
         return ()=>{
             observer.unobserve($storefront);
         };
-    });
+    }, [
+        layoutSetting
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: core.cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] ', {
+        className: core.cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] font-sans', {
             hidden: !layoutSetting?.showFooter,
-            'fixed w-full bottom-0 z-50': shouldFixed
+            'fixed w-full bottom-0': shouldFixed
         }),
+        style: {
+            ...core.makeStyleResponsive('pl', padding),
+            ...core.makeStyleResponsive('pr', padding)
+        },
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                 width: "192",
@@ -62,36 +97,32 @@ const Footer = ()=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "gp-footer invisible flex h-[32px] cursor-pointer items-center justify-center rounded bg-[#151617] p-[4px] group-hover:visible absolute left-1/2 -translate-x-1/2",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "flex items-center pl-[4px] pr-[8px] py-[3px]",
-                        children: /*#__PURE__*/ jsxRuntime.jsx("span", {
-                            className: "text-[12px] leading-[150%] text-[#E2E2E2]",
-                            children: "Shopify theme’s footer"
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "border-r border-1 border-[#D6D6D6] h-full mx-[4px] opacity-10"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "h-[24px] w-[24px] flex items-center justify-center",
-                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
-                            width: "14",
-                            height: "14",
-                            viewBox: "0 0 14 14",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-footer invisible flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded bg-[#EEEEEE] p-[4px] group-hover:visible absolute left-[8px] hover:bg-[#0000001a]",
+                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "h-[24px] w-[24px] flex items-center justify-center",
+                    children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 14 14",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
+                                fill: "#212121"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("path", {
                                 fillRule: "evenodd",
                                 clipRule: "evenodd",
-                                d: "M8.71393 0.409265L9.01371 2.03382C9.54464 2.23024 10.0362 2.50205 10.4741 2.83548L12.1413 2.25585C12.3668 2.17743 12.6164 2.26947 12.737 2.47558L13.9315 4.51667C14.0568 4.73077 14.0062 5.00437 13.8126 5.15946L12.5134 6.2001C12.5546 6.46109 12.5759 6.72829 12.5759 7.00025C12.5759 7.27213 12.5546 7.53925 12.5134 7.80017L13.8126 8.84079C14.0062 8.99588 14.0568 9.26948 13.9315 9.48358L12.737 11.5247C12.6164 11.7308 12.3668 11.8228 12.1413 11.7444L10.4743 11.1648C10.0364 11.4984 9.5447 11.7702 9.01367 11.9667L8.71393 13.591C8.67017 13.8281 8.46337 14.0003 8.22223 14.0003H5.77778C5.53663 14.0003 5.32984 13.8281 5.28607 13.591L4.98636 11.9669C4.45521 11.7704 3.96343 11.4985 3.52544 11.1649L1.85874 11.7444C1.63317 11.8228 1.38363 11.7308 1.26301 11.5247L0.0684979 9.48358C-0.0568018 9.26948 -0.0061728 8.99588 0.187445 8.84079L1.48622 7.80047C1.44502 7.53946 1.42366 7.27223 1.42366 7.00025C1.42366 6.72818 1.44503 6.46089 1.48625 6.19981L0.187445 5.15946C-0.00617262 5.00437 -0.0568016 4.73077 0.0684982 4.51667L1.26301 2.47558C1.38364 2.26947 1.63317 2.17743 1.85874 2.25585L3.52566 2.83538C3.96358 2.5019 4.45527 2.23007 4.98632 2.03365L5.28607 0.409265C5.32984 0.172121 5.53663 0 5.77778 0H8.22223C8.46337 0 8.67017 0.172121 8.71393 0.409265ZM6.99986 9.41584C8.37352 9.41584 9.48709 8.33452 9.48709 7.00065C9.48709 5.66677 8.37352 4.58545 6.99986 4.58545C5.6262 4.58545 4.51264 5.66677 4.51264 7.00065C4.51264 8.33452 5.6262 9.41584 6.99986 9.41584Z",
-                                fill: "#E2E2E2"
+                                d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
+                                fill: "#212121"
                             })
-                        })
+                        ]
                     })
-                ]
+                })
             }),
             /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                 width: "82",

package/dist/cjs/components/Header.js

@@ -4,13 +4,57 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
+var react = require('react');
 
+const defaultPadding = {
+    desktop: '68px',
+    tablet: '40px',
+    mobile: '40px'
+};
 const Header = ()=>{
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
+    const [padding, setPadding] = react.useState(defaultPadding);
+    react.useEffect(()=>{
+        const $iframe = parent.document.querySelector('.iframe');
+        if (!$iframe) return;
+        const $storefront = document.querySelector('#storefront');
+        if (!$storefront) return;
+        const $iframeDoc = $iframe.contentDocument || $iframe.contentWindow.document;
+        const $section = $iframeDoc.getElementsByTagName('section');
+        let prevWidth = 0;
+        const observer = new ResizeObserver((entries)=>{
+            const currentWidth = entries[0]?.borderBoxSize?.[0]?.inlineSize;
+            const shouldUpdatePadding = !!$section.length && typeof currentWidth === 'number' && currentWidth !== prevWidth;
+            if (shouldUpdatePadding) {
+                prevWidth = currentWidth;
+                const padding = getComputedStyle($section[0]).getPropertyValue('padding-left');
+                const margin = getComputedStyle($section[0]).getPropertyValue('margin-left');
+                const newPadding = parseInt(margin, 10) + parseInt(padding, 10);
+                const basePadding = 68;
+                if (newPadding > basePadding) {
+                    setPadding({
+                        desktop: `${newPadding}px`,
+                        tablet: `${newPadding}px`,
+                        mobile: `${newPadding}px`
+                    });
+                } else {
+                    setPadding(defaultPadding);
+                }
+            }
+        });
+        observer.observe($storefront);
+        return ()=>{
+            observer.unobserve($storefront);
+        };
+    }, []);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: core.cls('gp-header-container flex h-[40px] items-center justify-between border-b border-1 border-[#EEEEEE] group relative px-[68px]', {
+        className: core.cls('gp-header-container flex h-[40px] items-center justify-between border-b border-1 border-[#EEEEEE] group relative font-sans', {
             hidden: !layoutSetting?.showHeader
         }),
+        style: {
+            ...core.makeStyleResponsive('pl', padding),
+            ...core.makeStyleResponsive('pr', padding)
+        },
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                 width: "84",
@@ -34,36 +78,32 @@ const Header = ()=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "gp-header invisible flex h-[32px] cursor-pointer items-center justify-center rounded bg-[#151617] p-[4px] group-hover:visible absolute left-1/2 -translate-x-1/2",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "flex items-center pl-[4px] pr-[8px] py-[3px]",
-                        children: /*#__PURE__*/ jsxRuntime.jsx("span", {
-                            className: "text-[12px] leading-[150%] text-[#E2E2E2]",
-                            children: "Shopify theme’s header"
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "border-r border-1 border-[#D6D6D6] h-full mx-[4px] opacity-10"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "h-[24px] w-[24px] flex items-center justify-center",
-                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
-                            width: "14",
-                            height: "14",
-                            viewBox: "0 0 14 14",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-header invisible flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded bg-[#EEEEEE] p-[4px] group-hover:visible absolute left-[8px] hover:bg-[#0000001a]",
+                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "h-[24px] w-[24px] flex items-center justify-center",
+                    children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 14 14",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("path", {
                                 fillRule: "evenodd",
                                 clipRule: "evenodd",
-                                d: "M8.71393 0.409265L9.01371 2.03382C9.54464 2.23024 10.0362 2.50205 10.4741 2.83548L12.1413 2.25585C12.3668 2.17743 12.6164 2.26947 12.737 2.47558L13.9315 4.51667C14.0568 4.73077 14.0062 5.00437 13.8126 5.15946L12.5134 6.2001C12.5546 6.46109 12.5759 6.72829 12.5759 7.00025C12.5759 7.27213 12.5546 7.53925 12.5134 7.80017L13.8126 8.84079C14.0062 8.99588 14.0568 9.26948 13.9315 9.48358L12.737 11.5247C12.6164 11.7308 12.3668 11.8228 12.1413 11.7444L10.4743 11.1648C10.0364 11.4984 9.5447 11.7702 9.01367 11.9667L8.71393 13.591C8.67017 13.8281 8.46337 14.0003 8.22223 14.0003H5.77778C5.53663 14.0003 5.32984 13.8281 5.28607 13.591L4.98636 11.9669C4.45521 11.7704 3.96343 11.4985 3.52544 11.1649L1.85874 11.7444C1.63317 11.8228 1.38363 11.7308 1.26301 11.5247L0.0684979 9.48358C-0.0568018 9.26948 -0.0061728 8.99588 0.187445 8.84079L1.48622 7.80047C1.44502 7.53946 1.42366 7.27223 1.42366 7.00025C1.42366 6.72818 1.44503 6.46089 1.48625 6.19981L0.187445 5.15946C-0.00617262 5.00437 -0.0568016 4.73077 0.0684982 4.51667L1.26301 2.47558C1.38364 2.26947 1.63317 2.17743 1.85874 2.25585L3.52566 2.83538C3.96358 2.5019 4.45527 2.23007 4.98632 2.03365L5.28607 0.409265C5.32984 0.172121 5.53663 0 5.77778 0H8.22223C8.46337 0 8.67017 0.172121 8.71393 0.409265ZM6.99986 9.41584C8.37352 9.41584 9.48709 8.33452 9.48709 7.00065C9.48709 5.66677 8.37352 4.58545 6.99986 4.58545C5.6262 4.58545 4.51264 5.66677 4.51264 7.00065C4.51264 8.33452 5.6262 9.41584 6.99986 9.41584Z",
-                                fill: "#E2E2E2"
+                                d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
+                                fill: "#212121"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
+                                fill: "#212121"
                             })
-                        })
+                        ]
                     })
-                ]
+                })
             }),
             /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                 width: "192",