@gem-sdk/pages 1.12.0-next.32 → 1.12.0-next.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/components/AddSectionImageToLayout.js +17 -2
  2. package/dist/cjs/components/Footer.js +4 -4
  3. package/dist/cjs/components/ImageToLayout.js +3 -4
  4. package/dist/esm/components/AddSectionImageToLayout.js +18 -3
  5. package/dist/esm/components/Footer.js +4 -4
  6. package/dist/esm/components/ImageToLayout.js +3 -4
  7. package/package.json +2 -2
package/dist/cjs/components/AddSectionImageToLayout.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
+ var core = require('@gem-sdk/core');
7
8
 
8
9
  const ACTIONS_DATA = [
9
10
  {
@@ -25,6 +26,7 @@ const ACTIONS_DATA = [
25
26
  id: 'gps-add-section-bottom-from-library'
26
27
  }
27
28
  ];
29
+ const FOOTER_HEIGHT = 48;
28
30
  const AddSectionImageToLayout = ()=>{
29
31
  const [link, setLink] = react.useState('');
30
32
  const [isInput, setIsInput] = react.useState(false);
@@ -33,9 +35,22 @@ const AddSectionImageToLayout = ()=>{
33
35
  setIsInput(true);
34
36
  }
35
37
  };
38
+ const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
39
+ const offset = react.useMemo(()=>{
40
+ let result = 0;
41
+ if (layoutSetting?.showFooter) {
42
+ result += FOOTER_HEIGHT;
43
+ }
44
+ return result;
45
+ }, [
46
+ layoutSetting?.showFooter
47
+ ]);
36
48
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
37
49
  id: "gps-add-section-image-to-layout-of-bottom",
38
50
  className: "gps-base-font-family mobile:mx-[16px] mobile:w-[calc(100%_-_32px)] relative mx-[44px] mb-[24px] mt-[40px] hidden w-[calc(100%_-_88px)] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px]",
51
+ style: {
52
+ marginBottom: `${offset + 24}px`
53
+ },
39
54
  children: [
40
55
  /*#__PURE__*/ jsxRuntime.jsx("span", {
41
56
  className: "absolute top-[-12px] bg-white px-[8px] text-[14px] font-normal text-[#9E9E9E]",
@@ -43,7 +58,7 @@ const AddSectionImageToLayout = ()=>{
43
58
  }),
44
59
  ACTIONS_DATA.map((action, index)=>{
45
60
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
46
- className: `relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
61
+ className: `hover:bg-black/10 relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] ${isInput ? 'hidden' : 'flex'}`,
47
62
  id: action.id,
48
63
  onClick: ()=>onClick(index),
49
64
  "aria-hidden": true,
@@ -131,7 +146,7 @@ const AddSectionImageToLayout = ()=>{
131
146
  /*#__PURE__*/ jsxRuntime.jsx("div", {
132
147
  "aria-hidden": true,
133
148
  onClick: ()=>setIsInput(false),
134
- className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
149
+ className: "hover:bg-black/10 mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px]",
135
150
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
136
151
  width: "16",
137
152
  height: "16",
package/dist/cjs/components/Footer.js CHANGED
@@ -59,9 +59,9 @@ const Footer = ()=>{
59
59
  layoutSetting
60
60
  ]);
61
61
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
62
- className: core.cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] font-sans', {
62
+ className: core.cls('gp-footer-container border-1 group flex h-[48px] items-center justify-between border-y border-[#EEEEEE] bg-white px-[68px] font-sans', {
63
63
  hidden: !layoutSetting?.showFooter,
64
- 'fixed w-full bottom-0': shouldFixed
64
+ 'fixed bottom-0 w-full': shouldFixed
65
65
  }),
66
66
  style: {
67
67
  ...core.makeStyleResponsive('pl', padding),
@@ -98,9 +98,9 @@ const Footer = ()=>{
98
98
  ]
99
99
  }),
100
100
  /*#__PURE__*/ jsxRuntime.jsx("div", {
101
- 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]",
101
+ className: "gp-footer hover:bg-[#0000001a] invisible absolute left-[8px] flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded bg-[#EEEEEE] p-[4px] group-hover:visible",
102
102
  children: /*#__PURE__*/ jsxRuntime.jsx("div", {
103
- className: "h-[24px] w-[24px] flex items-center justify-center",
103
+ className: "flex h-[24px] w-[24px] items-center justify-center",
104
104
  children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
105
105
  width: "14",
106
106
  height: "14",
package/dist/cjs/components/ImageToLayout.js CHANGED
@@ -29,11 +29,10 @@ const ImageToLayout = ({ editorImageToLayout })=>{
29
29
  return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
30
30
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
31
31
  id: "gp-img-to-layout-wrapper",
32
- className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family hidden flex-1 flex-col items-center justify-center bg-[#F4F4F4] p-[16px]`, {
33
- hidden: !editorImageToLayout
34
- }),
32
+ className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family hidden flex-1 flex-col items-center justify-center bg-[#F4F4F4] p-[16px]`),
35
33
  style: {
36
- height: `calc(100vh - ${offset}px)`
34
+ height: `calc(100vh - ${offset}px)`,
35
+ display: editorImageToLayout ? 'flex' : 'none'
37
36
  },
38
37
  children: [
39
38
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
package/dist/esm/components/AddSectionImageToLayout.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useState } from 'react';
2
+ import { useState, useMemo } from 'react';
3
+ import { useShopStore } from '@gem-sdk/core';
3
4
 
4
5
  const ACTIONS_DATA = [
5
6
  {
@@ -21,6 +22,7 @@ const ACTIONS_DATA = [
21
22
  id: 'gps-add-section-bottom-from-library'
22
23
  }
23
24
  ];
25
+ const FOOTER_HEIGHT = 48;
24
26
  const AddSectionImageToLayout = ()=>{
25
27
  const [link, setLink] = useState('');
26
28
  const [isInput, setIsInput] = useState(false);
@@ -29,9 +31,22 @@ const AddSectionImageToLayout = ()=>{
29
31
  setIsInput(true);
30
32
  }
31
33
  };
34
+ const layoutSetting = useShopStore((s)=>s.layoutSettings);
35
+ const offset = useMemo(()=>{
36
+ let result = 0;
37
+ if (layoutSetting?.showFooter) {
38
+ result += FOOTER_HEIGHT;
39
+ }
40
+ return result;
41
+ }, [
42
+ layoutSetting?.showFooter
43
+ ]);
32
44
  return /*#__PURE__*/ jsxs("div", {
33
45
  id: "gps-add-section-image-to-layout-of-bottom",
34
46
  className: "gps-base-font-family mobile:mx-[16px] mobile:w-[calc(100%_-_32px)] relative mx-[44px] mb-[24px] mt-[40px] hidden w-[calc(100%_-_88px)] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px]",
47
+ style: {
48
+ marginBottom: `${offset + 24}px`
49
+ },
35
50
  children: [
36
51
  /*#__PURE__*/ jsx("span", {
37
52
  className: "absolute top-[-12px] bg-white px-[8px] text-[14px] font-normal text-[#9E9E9E]",
@@ -39,7 +54,7 @@ const AddSectionImageToLayout = ()=>{
39
54
  }),
40
55
  ACTIONS_DATA.map((action, index)=>{
41
56
  return /*#__PURE__*/ jsxs("div", {
42
- className: `relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
57
+ className: `hover:bg-black/10 relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] ${isInput ? 'hidden' : 'flex'}`,
43
58
  id: action.id,
44
59
  onClick: ()=>onClick(index),
45
60
  "aria-hidden": true,
@@ -127,7 +142,7 @@ const AddSectionImageToLayout = ()=>{
127
142
  /*#__PURE__*/ jsx("div", {
128
143
  "aria-hidden": true,
129
144
  onClick: ()=>setIsInput(false),
130
- className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
145
+ className: "hover:bg-black/10 mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px]",
131
146
  children: /*#__PURE__*/ jsx("svg", {
132
147
  width: "16",
133
148
  height: "16",
package/dist/esm/components/Footer.js CHANGED
@@ -55,9 +55,9 @@ const Footer = ()=>{
55
55
  layoutSetting
56
56
  ]);
57
57
  return /*#__PURE__*/ jsxs("div", {
58
- className: cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] font-sans', {
58
+ className: cls('gp-footer-container border-1 group flex h-[48px] items-center justify-between border-y border-[#EEEEEE] bg-white px-[68px] font-sans', {
59
59
  hidden: !layoutSetting?.showFooter,
60
- 'fixed w-full bottom-0': shouldFixed
60
+ 'fixed bottom-0 w-full': shouldFixed
61
61
  }),
62
62
  style: {
63
63
  ...makeStyleResponsive('pl', padding),
@@ -94,9 +94,9 @@ const Footer = ()=>{
94
94
  ]
95
95
  }),
96
96
  /*#__PURE__*/ jsx("div", {
97
- 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]",
97
+ className: "gp-footer hover:bg-[#0000001a] invisible absolute left-[8px] flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded bg-[#EEEEEE] p-[4px] group-hover:visible",
98
98
  children: /*#__PURE__*/ jsx("div", {
99
- className: "h-[24px] w-[24px] flex items-center justify-center",
99
+ className: "flex h-[24px] w-[24px] items-center justify-center",
100
100
  children: /*#__PURE__*/ jsxs("svg", {
101
101
  width: "14",
102
102
  height: "14",
package/dist/esm/components/ImageToLayout.js CHANGED
@@ -25,11 +25,10 @@ const ImageToLayout = ({ editorImageToLayout })=>{
25
25
  return /*#__PURE__*/ jsx(Fragment, {
26
26
  children: /*#__PURE__*/ jsxs("div", {
27
27
  id: "gp-img-to-layout-wrapper",
28
- className: cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family hidden flex-1 flex-col items-center justify-center bg-[#F4F4F4] p-[16px]`, {
29
- hidden: !editorImageToLayout
30
- }),
28
+ className: cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family hidden flex-1 flex-col items-center justify-center bg-[#F4F4F4] p-[16px]`),
31
29
  style: {
32
- height: `calc(100vh - ${offset}px)`
30
+ height: `calc(100vh - ${offset}px)`,
31
+ display: editorImageToLayout ? 'flex' : 'none'
33
32
  },
34
33
  children: [
35
34
  /*#__PURE__*/ jsxs("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.12.0-next.32",
3
+ "version": "1.12.0-next.35",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.12.0-next.31",
28
+ "@gem-sdk/core": "1.12.0-next.35",
29
29
  "@gem-sdk/plugin-cookie-bar": "*",
30
30
  "@gem-sdk/plugin-quick-view": "*",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "*"