@gem-sdk/pages 1.14.0-next.48 → 1.14.0-next.58

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.
@@ -34,7 +34,7 @@ const PopupManager = ()=>{
34
34
  ]);
35
35
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
36
36
  className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
37
- children: popups?.map((item)=>{
37
+ children: popups?.map((item, index)=>{
38
38
  const display = item?.advanced?.d;
39
39
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
40
40
  className: core.cls('pointer-events-auto w-full shrink cursor-pointer select-none items-center justify-center whitespace-nowrap py-2 text-white [writing-mode:vertical-lr]', {
@@ -49,9 +49,13 @@ const PopupManager = ()=>{
49
49
  '--d-tablet': display?.tablet ? 'inline-flex' : 'none',
50
50
  '--d-mobile': display?.mobile ? 'inline-flex' : 'none'
51
51
  },
52
- children: /*#__PURE__*/ jsxRuntime.jsx("span", {
52
+ children: /*#__PURE__*/ jsxRuntime.jsxs("span", {
53
53
  className: "text-ellipsis whitespace-nowrap",
54
- children: item?.settings?.name || 'Popup Name'
54
+ children: [
55
+ item?.settings?.name || 'Popup Name',
56
+ " ",
57
+ index + 1
58
+ ]
55
59
  })
56
60
  }, item?.uid);
57
61
  })
@@ -33,6 +33,8 @@ const defaultPadding = {
33
33
  mobile: 'var(--g-ct-p)'
34
34
  };
35
35
  const AddSectionImageToLayout = ()=>{
36
+ const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
37
+ const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
36
38
  const [link, setLink] = react.useState('');
37
39
  const [isInput, setIsInput] = react.useState(false);
38
40
  const onClick = (index)=>{
@@ -40,8 +42,15 @@ const AddSectionImageToLayout = ()=>{
40
42
  setIsInput(true);
41
43
  }
42
44
  };
43
- const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
44
- const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
45
+ react.useEffect(()=>{
46
+ if (!isInput || totalSection === 0) {
47
+ setLink('');
48
+ setIsInput(false);
49
+ }
50
+ }, [
51
+ isInput,
52
+ totalSection
53
+ ]);
45
54
  const loaded = core.useBuilderPreviewStore((state)=>state.loaded);
46
55
  const offset = react.useMemo(()=>{
47
56
  let result = 0;
@@ -74,8 +83,10 @@ const AddSectionImageToLayout = ()=>{
74
83
  children: "Add section"
75
84
  }),
76
85
  ACTIONS_DATA.map((action, index)=>{
77
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
86
+ const CustomTag = index === 1 ? `label` : `div`;
87
+ return /*#__PURE__*/ jsxRuntime.jsxs(CustomTag, {
78
88
  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'}`,
89
+ htmlFor: "gp-add-section-bottom-from-select-image",
79
90
  id: action.id,
80
91
  onClick: ()=>onClick(index),
81
92
  "aria-hidden": true,
@@ -148,7 +159,7 @@ const AddSectionImageToLayout = ()=>{
148
159
  }),
149
160
  action.id === 'gps-add-section-bottom-from-image' && /*#__PURE__*/ jsxRuntime.jsx("input", {
150
161
  id: "gp-add-section-bottom-from-select-image",
151
- className: "rounded-medium z-2 absolute left-0 top-0 h-full w-full cursor-pointer opacity-0 outline-none",
162
+ className: "rounded-medium z-2 absolute left-0 top-0 hidden h-full w-full cursor-pointer opacity-0 outline-none",
152
163
  type: "file",
153
164
  accept: ".png, .jpg, .jpeg"
154
165
  })
@@ -162,6 +173,7 @@ const AddSectionImageToLayout = ()=>{
162
173
  children: [
163
174
  /*#__PURE__*/ jsxRuntime.jsx("div", {
164
175
  "aria-hidden": true,
176
+ id: "image-to-layout-input-wrapper-add-section-close",
165
177
  onClick: ()=>setIsInput(false),
166
178
  className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
167
179
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
@@ -237,16 +249,16 @@ const AddSectionImageToLayout = ()=>{
237
249
  ]
238
250
  }),
239
251
  /*#__PURE__*/ jsxRuntime.jsx("input", {
240
- value: link,
241
252
  onChange: (event)=>{
242
253
  setLink(event.target.value);
243
254
  },
244
255
  autoComplete: "off",
245
256
  id: "gp-img-to-layout-bottom-input-link",
246
257
  placeholder: "Paste your link",
247
- className: "ml-2 mr-2 flex-1 text-[14px] text-[#676767] outline-none"
258
+ className: "ml-2 mr-2 h-[56px] flex-1 text-[14px] text-[#676767] outline-none"
248
259
  }),
249
260
  /*#__PURE__*/ jsxRuntime.jsx("div", {
261
+ "aria-disabled": !link,
250
262
  id: "gp-img-to-layout-bottom-generate-btn",
251
263
  className: `generate-image-to-layout-btn flex h-[36px] w-[86px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
252
264
  children: "Generate"
@@ -30,25 +30,32 @@ const ImageToLayout = ({ editorImageToLayout })=>{
30
30
  if (!loaded) {
31
31
  return null;
32
32
  }
33
- return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
34
- children: /*#__PURE__*/ jsxRuntime.jsx("div", {
35
- id: "gp-img-to-layout-wrapper",
36
- className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
37
- hidden: !editorImageToLayout || !!totalSection,
38
- flex: editorImageToLayout && !totalSection
33
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
34
+ children: [
35
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
36
+ id: "gp-img-to-layout-wrapper",
37
+ className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
38
+ hidden: !editorImageToLayout || !!totalSection,
39
+ flex: editorImageToLayout && !totalSection
40
+ }),
41
+ style: {
42
+ height: `calc(100vh - ${offset}px)`
43
+ },
44
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
45
+ id: "gps-gem-ai-input-wrapper",
46
+ className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
47
+ children: [
48
+ /*#__PURE__*/ jsxRuntime.jsx(DropElement.DropElement, {}),
49
+ /*#__PURE__*/ jsxRuntime.jsx(ImageToLayoutInput.ImageToLayoutInput, {
50
+ totalSection: totalSection || 0
51
+ })
52
+ ]
53
+ })
39
54
  }),
40
- style: {
41
- height: `calc(100vh - ${offset}px)`
42
- },
43
- children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
44
- id: "gps-gem-ai-input-wrapper",
45
- className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
46
- children: [
47
- /*#__PURE__*/ jsxRuntime.jsx(DropElement.DropElement, {}),
48
- /*#__PURE__*/ jsxRuntime.jsx(ImageToLayoutInput.ImageToLayoutInput, {})
49
- ]
55
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
56
+ className: "limited-section"
50
57
  })
51
- })
58
+ ]
52
59
  });
53
60
  };
54
61
 
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
5
  var PagesSuggestion = require('./PagesSuggestion.js');
6
6
 
7
- const ImageToLayoutInput = ()=>{
7
+ const ImageToLayoutInput = ({ totalSection })=>{
8
8
  const [link, setLink] = react.useState('');
9
9
  const [isFocus, setIsFocus] = react.useState(false);
10
10
  const [openSuggestion, setOpenSuggestion] = react.useState(false);
@@ -16,6 +16,13 @@ const ImageToLayoutInput = ()=>{
16
16
  isFocus,
17
17
  openSuggestion
18
18
  ]);
19
+ react.useEffect(()=>{
20
+ if (totalSection > 0) {
21
+ setLink('');
22
+ }
23
+ }, [
24
+ totalSection
25
+ ]);
19
26
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
20
27
  className: "relative mt-[64px] flex w-full max-w-[calc(100%_-_32px)] flex-col items-center rounded-[3px] border border-[#EEEEEE] px-[16px] pb-[24px] pt-[32px]",
21
28
  children: [
@@ -85,7 +92,6 @@ const ImageToLayoutInput = ()=>{
85
92
  ]
86
93
  }),
87
94
  /*#__PURE__*/ jsxRuntime.jsx("input", {
88
- value: link,
89
95
  onFocus: ()=>setIsFocus(true),
90
96
  onChange: (event)=>{
91
97
  setLink(event.target.value);
@@ -94,9 +100,10 @@ const ImageToLayoutInput = ()=>{
94
100
  autoComplete: "off",
95
101
  id: "gp-img-to-layout-input-link",
96
102
  placeholder: "Paste your link",
97
- className: "mx-4 flex-1 text-[14px] text-[#676767] outline-none"
103
+ className: "mx-4 h-[60px] flex-1 text-[14px] text-[#676767] outline-none"
98
104
  }),
99
105
  /*#__PURE__*/ jsxRuntime.jsx("div", {
106
+ "aria-disabled": !link,
100
107
  id: "gp-img-to-layout-generate-btn",
101
108
  className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
102
109
  children: "Generate"
@@ -1,4 +1,4 @@
1
- import { jsx } from 'react/jsx-runtime';
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { useBuilderPreviewStore, useModalStore, cls } from '@gem-sdk/core';
3
3
  import { memo, useMemo, useCallback, useEffect } from 'react';
4
4
 
@@ -30,7 +30,7 @@ const PopupManager = ()=>{
30
30
  ]);
31
31
  return /*#__PURE__*/ jsx("div", {
32
32
  className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
33
- children: popups?.map((item)=>{
33
+ children: popups?.map((item, index)=>{
34
34
  const display = item?.advanced?.d;
35
35
  return /*#__PURE__*/ jsx("div", {
36
36
  className: cls('pointer-events-auto w-full shrink cursor-pointer select-none items-center justify-center whitespace-nowrap py-2 text-white [writing-mode:vertical-lr]', {
@@ -45,9 +45,13 @@ const PopupManager = ()=>{
45
45
  '--d-tablet': display?.tablet ? 'inline-flex' : 'none',
46
46
  '--d-mobile': display?.mobile ? 'inline-flex' : 'none'
47
47
  },
48
- children: /*#__PURE__*/ jsx("span", {
48
+ children: /*#__PURE__*/ jsxs("span", {
49
49
  className: "text-ellipsis whitespace-nowrap",
50
- children: item?.settings?.name || 'Popup Name'
50
+ children: [
51
+ item?.settings?.name || 'Popup Name',
52
+ " ",
53
+ index + 1
54
+ ]
51
55
  })
52
56
  }, item?.uid);
53
57
  })
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { useState, useMemo } from 'react';
2
+ import { useState, useEffect, useMemo } from 'react';
3
3
  import { useShopStore, useBuilderPreviewStore, makeStyleResponsive } from '@gem-sdk/core';
4
4
 
5
5
  const ACTIONS_DATA = [
@@ -29,6 +29,8 @@ const defaultPadding = {
29
29
  mobile: 'var(--g-ct-p)'
30
30
  };
31
31
  const AddSectionImageToLayout = ()=>{
32
+ const layoutSetting = useShopStore((s)=>s.layoutSettings);
33
+ const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
32
34
  const [link, setLink] = useState('');
33
35
  const [isInput, setIsInput] = useState(false);
34
36
  const onClick = (index)=>{
@@ -36,8 +38,15 @@ const AddSectionImageToLayout = ()=>{
36
38
  setIsInput(true);
37
39
  }
38
40
  };
39
- const layoutSetting = useShopStore((s)=>s.layoutSettings);
40
- const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
41
+ useEffect(()=>{
42
+ if (!isInput || totalSection === 0) {
43
+ setLink('');
44
+ setIsInput(false);
45
+ }
46
+ }, [
47
+ isInput,
48
+ totalSection
49
+ ]);
41
50
  const loaded = useBuilderPreviewStore((state)=>state.loaded);
42
51
  const offset = useMemo(()=>{
43
52
  let result = 0;
@@ -70,8 +79,10 @@ const AddSectionImageToLayout = ()=>{
70
79
  children: "Add section"
71
80
  }),
72
81
  ACTIONS_DATA.map((action, index)=>{
73
- return /*#__PURE__*/ jsxs("div", {
82
+ const CustomTag = index === 1 ? `label` : `div`;
83
+ return /*#__PURE__*/ jsxs(CustomTag, {
74
84
  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'}`,
85
+ htmlFor: "gp-add-section-bottom-from-select-image",
75
86
  id: action.id,
76
87
  onClick: ()=>onClick(index),
77
88
  "aria-hidden": true,
@@ -144,7 +155,7 @@ const AddSectionImageToLayout = ()=>{
144
155
  }),
145
156
  action.id === 'gps-add-section-bottom-from-image' && /*#__PURE__*/ jsx("input", {
146
157
  id: "gp-add-section-bottom-from-select-image",
147
- className: "rounded-medium z-2 absolute left-0 top-0 h-full w-full cursor-pointer opacity-0 outline-none",
158
+ className: "rounded-medium z-2 absolute left-0 top-0 hidden h-full w-full cursor-pointer opacity-0 outline-none",
148
159
  type: "file",
149
160
  accept: ".png, .jpg, .jpeg"
150
161
  })
@@ -158,6 +169,7 @@ const AddSectionImageToLayout = ()=>{
158
169
  children: [
159
170
  /*#__PURE__*/ jsx("div", {
160
171
  "aria-hidden": true,
172
+ id: "image-to-layout-input-wrapper-add-section-close",
161
173
  onClick: ()=>setIsInput(false),
162
174
  className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
163
175
  children: /*#__PURE__*/ jsx("svg", {
@@ -233,16 +245,16 @@ const AddSectionImageToLayout = ()=>{
233
245
  ]
234
246
  }),
235
247
  /*#__PURE__*/ jsx("input", {
236
- value: link,
237
248
  onChange: (event)=>{
238
249
  setLink(event.target.value);
239
250
  },
240
251
  autoComplete: "off",
241
252
  id: "gp-img-to-layout-bottom-input-link",
242
253
  placeholder: "Paste your link",
243
- className: "ml-2 mr-2 flex-1 text-[14px] text-[#676767] outline-none"
254
+ className: "ml-2 mr-2 h-[56px] flex-1 text-[14px] text-[#676767] outline-none"
244
255
  }),
245
256
  /*#__PURE__*/ jsx("div", {
257
+ "aria-disabled": !link,
246
258
  id: "gp-img-to-layout-bottom-generate-btn",
247
259
  className: `generate-image-to-layout-btn flex h-[36px] w-[86px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
248
260
  children: "Generate"
@@ -1,4 +1,4 @@
1
- import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
1
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { useMemo } from 'react';
3
3
  import { useShopStore, useBuilderPreviewStore, cls } from '@gem-sdk/core';
4
4
  import { DropElement } from './DropElement.js';
@@ -26,25 +26,32 @@ const ImageToLayout = ({ editorImageToLayout })=>{
26
26
  if (!loaded) {
27
27
  return null;
28
28
  }
29
- return /*#__PURE__*/ jsx(Fragment, {
30
- children: /*#__PURE__*/ jsx("div", {
31
- id: "gp-img-to-layout-wrapper",
32
- className: cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
33
- hidden: !editorImageToLayout || !!totalSection,
34
- flex: editorImageToLayout && !totalSection
29
+ return /*#__PURE__*/ jsxs(Fragment, {
30
+ children: [
31
+ /*#__PURE__*/ jsx("div", {
32
+ id: "gp-img-to-layout-wrapper",
33
+ className: cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
34
+ hidden: !editorImageToLayout || !!totalSection,
35
+ flex: editorImageToLayout && !totalSection
36
+ }),
37
+ style: {
38
+ height: `calc(100vh - ${offset}px)`
39
+ },
40
+ children: /*#__PURE__*/ jsxs("div", {
41
+ id: "gps-gem-ai-input-wrapper",
42
+ className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
43
+ children: [
44
+ /*#__PURE__*/ jsx(DropElement, {}),
45
+ /*#__PURE__*/ jsx(ImageToLayoutInput, {
46
+ totalSection: totalSection || 0
47
+ })
48
+ ]
49
+ })
35
50
  }),
36
- style: {
37
- height: `calc(100vh - ${offset}px)`
38
- },
39
- children: /*#__PURE__*/ jsxs("div", {
40
- id: "gps-gem-ai-input-wrapper",
41
- className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
42
- children: [
43
- /*#__PURE__*/ jsx(DropElement, {}),
44
- /*#__PURE__*/ jsx(ImageToLayoutInput, {})
45
- ]
51
+ /*#__PURE__*/ jsx("div", {
52
+ className: "limited-section"
46
53
  })
47
- })
54
+ ]
48
55
  });
49
56
  };
50
57
 
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useState, useEffect } from 'react';
3
3
  import { PagesSuggestion } from './PagesSuggestion.js';
4
4
 
5
- const ImageToLayoutInput = ()=>{
5
+ const ImageToLayoutInput = ({ totalSection })=>{
6
6
  const [link, setLink] = useState('');
7
7
  const [isFocus, setIsFocus] = useState(false);
8
8
  const [openSuggestion, setOpenSuggestion] = useState(false);
@@ -14,6 +14,13 @@ const ImageToLayoutInput = ()=>{
14
14
  isFocus,
15
15
  openSuggestion
16
16
  ]);
17
+ useEffect(()=>{
18
+ if (totalSection > 0) {
19
+ setLink('');
20
+ }
21
+ }, [
22
+ totalSection
23
+ ]);
17
24
  return /*#__PURE__*/ jsxs("div", {
18
25
  className: "relative mt-[64px] flex w-full max-w-[calc(100%_-_32px)] flex-col items-center rounded-[3px] border border-[#EEEEEE] px-[16px] pb-[24px] pt-[32px]",
19
26
  children: [
@@ -83,7 +90,6 @@ const ImageToLayoutInput = ()=>{
83
90
  ]
84
91
  }),
85
92
  /*#__PURE__*/ jsx("input", {
86
- value: link,
87
93
  onFocus: ()=>setIsFocus(true),
88
94
  onChange: (event)=>{
89
95
  setLink(event.target.value);
@@ -92,9 +98,10 @@ const ImageToLayoutInput = ()=>{
92
98
  autoComplete: "off",
93
99
  id: "gp-img-to-layout-input-link",
94
100
  placeholder: "Paste your link",
95
- className: "mx-4 flex-1 text-[14px] text-[#676767] outline-none"
101
+ className: "mx-4 h-[60px] flex-1 text-[14px] text-[#676767] outline-none"
96
102
  }),
97
103
  /*#__PURE__*/ jsx("div", {
104
+ "aria-disabled": !link,
98
105
  id: "gp-img-to-layout-generate-btn",
99
106
  className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
100
107
  children: "Generate"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.14.0-next.48",
3
+ "version": "1.14.0-next.58",
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.14.0-next.42",
28
+ "@gem-sdk/core": "1.14.0-next.54",
29
29
  "@gem-sdk/plugin-cookie-bar": "*",
30
30
  "@gem-sdk/plugin-quick-view": "*",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "*"