@gem-sdk/pages 1.12.1 → 1.12.19

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 (11) hide show
  1. package/dist/cjs/components/AddSectionImageToLayout.js +156 -185
  2. package/dist/cjs/components/Footer.js +97 -116
  3. package/dist/cjs/components/Header.js +90 -121
  4. package/dist/cjs/components/builder/Toolbox.js +27 -50
  5. package/dist/cjs/libs/google-fonts.js +23 -2
  6. package/dist/esm/components/AddSectionImageToLayout.js +158 -187
  7. package/dist/esm/components/Footer.js +98 -117
  8. package/dist/esm/components/Header.js +91 -122
  9. package/dist/esm/components/builder/Toolbox.js +28 -51
  10. package/dist/esm/libs/google-fonts.js +23 -3
  11. package/package.json +1 -1
package/dist/esm/components/Footer.js CHANGED
@@ -1,48 +1,25 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
3
3
  import { useState, useEffect } from 'react';
4
4
 
5
- const defaultPadding = {
6
- desktop: '68px',
5
+ const defaultMargin = {
6
+ desktop: '40px',
7
7
  tablet: '40px',
8
8
  mobile: '40px'
9
9
  };
10
10
  const Footer = ()=>{
11
11
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
12
12
  const [shouldFixed, setShouldFixed] = useState(false);
13
- const [padding, setPadding] = useState(defaultPadding);
14
13
  useEffect(()=>{
15
14
  const $iframe = parent.document.querySelector('.iframe');
16
15
  if (!$iframe) return;
17
16
  const $storefront = document.querySelector('#storefront');
18
17
  if (!$storefront) return;
19
- const $iframeDoc = $iframe.contentDocument || $iframe.contentWindow.document;
20
- const $section = $iframeDoc.getElementsByTagName('section');
21
18
  const headerHeight = 40;
22
19
  const footerHeight = 48;
23
20
  const iframeHeight = $iframe.clientHeight;
24
21
  const comparedHeight = layoutSetting?.showHeader ? iframeHeight - headerHeight - footerHeight : iframeHeight - footerHeight;
25
- let prevWidth = 0;
26
22
  const observer = new ResizeObserver((entries)=>{
27
- // Handle resize footer padding according to content
28
- const currentWidth = entries[0]?.borderBoxSize?.[0]?.inlineSize;
29
- const shouldUpdatePadding = !!$section.length && typeof currentWidth === 'number' && currentWidth !== prevWidth;
30
- if (shouldUpdatePadding) {
31
- prevWidth = currentWidth;
32
- const padding = getComputedStyle($section[0]).getPropertyValue('padding-left');
33
- const margin = getComputedStyle($section[0]).getPropertyValue('margin-left');
34
- const newPadding = parseInt(margin, 10) + parseInt(padding, 10);
35
- const basePadding = 68;
36
- if (newPadding > basePadding) {
37
- setPadding({
38
- desktop: `${newPadding}px`,
39
- tablet: `${newPadding}px`,
40
- mobile: `${newPadding}px`
41
- });
42
- } else {
43
- setPadding(defaultPadding);
44
- }
45
- }
46
23
  // Handle set fixed footer
47
24
  const currentEditingFrameHeight = entries[0]?.target.clientHeight;
48
25
  if (currentEditingFrameHeight && comparedHeight) setShouldFixed(currentEditingFrameHeight < comparedHeight);
@@ -54,102 +31,106 @@ const Footer = ()=>{
54
31
  }, [
55
32
  layoutSetting
56
33
  ]);
57
- return /*#__PURE__*/ jsxs("div", {
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', {
34
+ return /*#__PURE__*/ jsx("div", {
35
+ className: cls('gp-footer-container border-1 group flex h-[48px] justify-center border-y border-[#EEEEEE] bg-white font-sans', {
59
36
  hidden: !layoutSetting?.showFooter,
60
37
  'fixed bottom-0 w-full': shouldFixed
61
38
  }),
62
- style: {
63
- ...makeStyleResponsive('pl', padding),
64
- ...makeStyleResponsive('pr', padding)
65
- },
66
- children: [
67
- /*#__PURE__*/ jsxs("svg", {
68
- width: "192",
69
- height: "8",
70
- viewBox: "0 0 192 8",
71
- fill: "none",
72
- xmlns: "http://www.w3.org/2000/svg",
73
- children: [
74
- /*#__PURE__*/ jsx("rect", {
75
- width: "56",
76
- height: "8",
77
- rx: "3",
78
- fill: "#E1E1E1"
79
- }),
80
- /*#__PURE__*/ jsx("rect", {
81
- x: "68",
82
- width: "56",
83
- height: "8",
84
- rx: "3",
85
- fill: "#E1E1E1"
86
- }),
87
- /*#__PURE__*/ jsx("rect", {
88
- x: "136",
89
- width: "56",
90
- height: "8",
91
- rx: "3",
92
- fill: "#E1E1E1"
93
- })
94
- ]
95
- }),
96
- /*#__PURE__*/ jsx("div", {
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
- children: /*#__PURE__*/ jsx("div", {
99
- className: "flex h-[24px] w-[24px] items-center justify-center",
100
- children: /*#__PURE__*/ jsxs("svg", {
101
- width: "14",
102
- height: "14",
103
- viewBox: "0 0 14 14",
104
- fill: "none",
105
- xmlns: "http://www.w3.org/2000/svg",
106
- children: [
107
- /*#__PURE__*/ jsx("path", {
108
- fillRule: "evenodd",
109
- clipRule: "evenodd",
110
- 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",
111
- fill: "#212121"
112
- }),
113
- /*#__PURE__*/ jsx("path", {
114
- fillRule: "evenodd",
115
- clipRule: "evenodd",
116
- 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",
117
- fill: "#212121"
118
- })
119
- ]
39
+ children: /*#__PURE__*/ jsxs("div", {
40
+ className: "flex flex-1 h-[40px] items-center justify-between",
41
+ style: {
42
+ maxWidth: `var(--g-ct-w)`,
43
+ ...makeStyleResponsive('ml', defaultMargin),
44
+ ...makeStyleResponsive('mr', defaultMargin)
45
+ },
46
+ children: [
47
+ /*#__PURE__*/ jsxs("svg", {
48
+ width: "192",
49
+ height: "8",
50
+ viewBox: "0 0 192 8",
51
+ fill: "none",
52
+ xmlns: "http://www.w3.org/2000/svg",
53
+ children: [
54
+ /*#__PURE__*/ jsx("rect", {
55
+ width: "56",
56
+ height: "8",
57
+ rx: "3",
58
+ fill: "#E1E1E1"
59
+ }),
60
+ /*#__PURE__*/ jsx("rect", {
61
+ x: "68",
62
+ width: "56",
63
+ height: "8",
64
+ rx: "3",
65
+ fill: "#E1E1E1"
66
+ }),
67
+ /*#__PURE__*/ jsx("rect", {
68
+ x: "136",
69
+ width: "56",
70
+ height: "8",
71
+ rx: "3",
72
+ fill: "#E1E1E1"
73
+ })
74
+ ]
75
+ }),
76
+ /*#__PURE__*/ jsx("div", {
77
+ 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",
78
+ children: /*#__PURE__*/ jsx("div", {
79
+ className: "flex h-[24px] w-[24px] items-center justify-center",
80
+ children: /*#__PURE__*/ jsxs("svg", {
81
+ width: "14",
82
+ height: "14",
83
+ viewBox: "0 0 14 14",
84
+ fill: "none",
85
+ xmlns: "http://www.w3.org/2000/svg",
86
+ children: [
87
+ /*#__PURE__*/ jsx("path", {
88
+ fillRule: "evenodd",
89
+ clipRule: "evenodd",
90
+ 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",
91
+ fill: "#212121"
92
+ }),
93
+ /*#__PURE__*/ jsx("path", {
94
+ fillRule: "evenodd",
95
+ clipRule: "evenodd",
96
+ 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",
97
+ fill: "#212121"
98
+ })
99
+ ]
100
+ })
120
101
  })
102
+ }),
103
+ /*#__PURE__*/ jsxs("svg", {
104
+ width: "82",
105
+ height: "8",
106
+ viewBox: "0 0 82 8",
107
+ fill: "none",
108
+ xmlns: "http://www.w3.org/2000/svg",
109
+ children: [
110
+ /*#__PURE__*/ jsx("rect", {
111
+ width: "22",
112
+ height: "8",
113
+ rx: "3",
114
+ fill: "#E1E1E1"
115
+ }),
116
+ /*#__PURE__*/ jsx("rect", {
117
+ x: "30",
118
+ width: "22",
119
+ height: "8",
120
+ rx: "3",
121
+ fill: "#E1E1E1"
122
+ }),
123
+ /*#__PURE__*/ jsx("rect", {
124
+ x: "60",
125
+ width: "22",
126
+ height: "8",
127
+ rx: "3",
128
+ fill: "#E1E1E1"
129
+ })
130
+ ]
121
131
  })
122
- }),
123
- /*#__PURE__*/ jsxs("svg", {
124
- width: "82",
125
- height: "8",
126
- viewBox: "0 0 82 8",
127
- fill: "none",
128
- xmlns: "http://www.w3.org/2000/svg",
129
- children: [
130
- /*#__PURE__*/ jsx("rect", {
131
- width: "22",
132
- height: "8",
133
- rx: "3",
134
- fill: "#E1E1E1"
135
- }),
136
- /*#__PURE__*/ jsx("rect", {
137
- x: "30",
138
- width: "22",
139
- height: "8",
140
- rx: "3",
141
- fill: "#E1E1E1"
142
- }),
143
- /*#__PURE__*/ jsx("rect", {
144
- x: "60",
145
- width: "22",
146
- height: "8",
147
- rx: "3",
148
- fill: "#E1E1E1"
149
- })
150
- ]
151
- })
152
- ]
132
+ ]
133
+ })
153
134
  });
154
135
  };
155
136
 
package/dist/esm/components/Header.js CHANGED
@@ -1,136 +1,105 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
3
- import { useState, useEffect } from 'react';
4
3
 
5
- const defaultPadding = {
6
- desktop: '68px',
4
+ const defaultMargin = {
5
+ desktop: '40px',
7
6
  tablet: '40px',
8
7
  mobile: '40px'
9
8
  };
10
9
  const Header = ()=>{
11
10
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
12
- const [padding, setPadding] = useState(defaultPadding);
13
- useEffect(()=>{
14
- const $iframe = parent.document.querySelector('.iframe');
15
- if (!$iframe) return;
16
- const $storefront = document.querySelector('#storefront');
17
- if (!$storefront) return;
18
- const $iframeDoc = $iframe.contentDocument || $iframe.contentWindow.document;
19
- const $section = $iframeDoc.getElementsByTagName('section');
20
- let prevWidth = 0;
21
- const observer = new ResizeObserver((entries)=>{
22
- const currentWidth = entries[0]?.borderBoxSize?.[0]?.inlineSize;
23
- const shouldUpdatePadding = !!$section.length && typeof currentWidth === 'number' && currentWidth !== prevWidth;
24
- if (shouldUpdatePadding) {
25
- prevWidth = currentWidth;
26
- const padding = getComputedStyle($section[0]).getPropertyValue('padding-left');
27
- const margin = getComputedStyle($section[0]).getPropertyValue('margin-left');
28
- const newPadding = parseInt(margin, 10) + parseInt(padding, 10);
29
- const basePadding = 68;
30
- if (newPadding > basePadding) {
31
- setPadding({
32
- desktop: `${newPadding}px`,
33
- tablet: `${newPadding}px`,
34
- mobile: `${newPadding}px`
35
- });
36
- } else {
37
- setPadding(defaultPadding);
38
- }
39
- }
40
- });
41
- observer.observe($storefront);
42
- return ()=>{
43
- observer.unobserve($storefront);
44
- };
45
- }, []);
46
- return /*#__PURE__*/ jsxs("div", {
47
- className: cls('gp-header-container flex h-[40px] items-center justify-between border-b border-1 border-[#EEEEEE] group relative font-sans', {
11
+ return /*#__PURE__*/ jsx("div", {
12
+ className: cls('gp-header-container border-b border-1 border-[#EEEEEE] group relative font-sans flex justify-center', {
48
13
  hidden: !layoutSetting?.showHeader
49
14
  }),
50
- style: {
51
- ...makeStyleResponsive('pl', padding),
52
- ...makeStyleResponsive('pr', padding)
53
- },
54
- children: [
55
- /*#__PURE__*/ jsxs("svg", {
56
- width: "84",
57
- height: "8",
58
- viewBox: "0 0 84 8",
59
- fill: "none",
60
- xmlns: "http://www.w3.org/2000/svg",
61
- children: [
62
- /*#__PURE__*/ jsx("rect", {
63
- width: "22",
64
- height: "8",
65
- rx: "3",
66
- fill: "#9E9E9E"
67
- }),
68
- /*#__PURE__*/ jsx("rect", {
69
- x: "28",
70
- width: "56",
71
- height: "8",
72
- rx: "3",
73
- fill: "#E1E1E1"
74
- })
75
- ]
76
- }),
77
- /*#__PURE__*/ jsx("div", {
78
- 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]",
79
- children: /*#__PURE__*/ jsx("div", {
80
- className: "h-[24px] w-[24px] flex items-center justify-center",
81
- children: /*#__PURE__*/ jsxs("svg", {
82
- width: "14",
83
- height: "14",
84
- viewBox: "0 0 14 14",
85
- fill: "none",
86
- xmlns: "http://www.w3.org/2000/svg",
87
- children: [
88
- /*#__PURE__*/ jsx("path", {
89
- fillRule: "evenodd",
90
- clipRule: "evenodd",
91
- 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",
92
- fill: "#212121"
93
- }),
94
- /*#__PURE__*/ jsx("path", {
95
- fillRule: "evenodd",
96
- clipRule: "evenodd",
97
- 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",
98
- fill: "#212121"
99
- })
100
- ]
15
+ children: /*#__PURE__*/ jsxs("div", {
16
+ className: "flex flex-1 h-[40px] items-center justify-between",
17
+ style: {
18
+ maxWidth: `var(--g-ct-w)`,
19
+ ...makeStyleResponsive('ml', defaultMargin),
20
+ ...makeStyleResponsive('mr', defaultMargin)
21
+ },
22
+ children: [
23
+ /*#__PURE__*/ jsxs("svg", {
24
+ width: "84",
25
+ height: "8",
26
+ viewBox: "0 0 84 8",
27
+ fill: "none",
28
+ xmlns: "http://www.w3.org/2000/svg",
29
+ children: [
30
+ /*#__PURE__*/ jsx("rect", {
31
+ width: "22",
32
+ height: "8",
33
+ rx: "3",
34
+ fill: "#9E9E9E"
35
+ }),
36
+ /*#__PURE__*/ jsx("rect", {
37
+ x: "28",
38
+ width: "56",
39
+ height: "8",
40
+ rx: "3",
41
+ fill: "#E1E1E1"
42
+ })
43
+ ]
44
+ }),
45
+ /*#__PURE__*/ jsx("div", {
46
+ 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]",
47
+ children: /*#__PURE__*/ jsx("div", {
48
+ className: "h-[24px] w-[24px] flex items-center justify-center",
49
+ children: /*#__PURE__*/ jsxs("svg", {
50
+ width: "14",
51
+ height: "14",
52
+ viewBox: "0 0 14 14",
53
+ fill: "none",
54
+ xmlns: "http://www.w3.org/2000/svg",
55
+ children: [
56
+ /*#__PURE__*/ jsx("path", {
57
+ fillRule: "evenodd",
58
+ clipRule: "evenodd",
59
+ 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",
60
+ fill: "#212121"
61
+ }),
62
+ /*#__PURE__*/ jsx("path", {
63
+ fillRule: "evenodd",
64
+ clipRule: "evenodd",
65
+ 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",
66
+ fill: "#212121"
67
+ })
68
+ ]
69
+ })
101
70
  })
71
+ }),
72
+ /*#__PURE__*/ jsxs("svg", {
73
+ width: "192",
74
+ height: "8",
75
+ viewBox: "0 0 192 8",
76
+ fill: "none",
77
+ xmlns: "http://www.w3.org/2000/svg",
78
+ children: [
79
+ /*#__PURE__*/ jsx("rect", {
80
+ width: "56",
81
+ height: "8",
82
+ rx: "3",
83
+ fill: "#E1E1E1"
84
+ }),
85
+ /*#__PURE__*/ jsx("rect", {
86
+ x: "68",
87
+ width: "56",
88
+ height: "8",
89
+ rx: "3",
90
+ fill: "#E1E1E1"
91
+ }),
92
+ /*#__PURE__*/ jsx("rect", {
93
+ x: "136",
94
+ width: "56",
95
+ height: "8",
96
+ rx: "3",
97
+ fill: "#E1E1E1"
98
+ })
99
+ ]
102
100
  })
103
- }),
104
- /*#__PURE__*/ jsxs("svg", {
105
- width: "192",
106
- height: "8",
107
- viewBox: "0 0 192 8",
108
- fill: "none",
109
- xmlns: "http://www.w3.org/2000/svg",
110
- children: [
111
- /*#__PURE__*/ jsx("rect", {
112
- width: "56",
113
- height: "8",
114
- rx: "3",
115
- fill: "#E1E1E1"
116
- }),
117
- /*#__PURE__*/ jsx("rect", {
118
- x: "68",
119
- width: "56",
120
- height: "8",
121
- rx: "3",
122
- fill: "#E1E1E1"
123
- }),
124
- /*#__PURE__*/ jsx("rect", {
125
- x: "136",
126
- width: "56",
127
- height: "8",
128
- rx: "3",
129
- fill: "#E1E1E1"
130
- })
131
- ]
132
- })
133
- ]
101
+ ]
102
+ })
134
103
  });
135
104
  };
136
105
 
package/dist/esm/components/builder/Toolbox.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
3
- import { memo, useState, useCallback, useEffect } from 'react';
3
+ import { memo, useMemo, useCallback, useEffect } from 'react';
4
+ import { getStorefrontApi } from '../../libs/get-storefront-api.js';
4
5
  import { createFontUrl } from '../../libs/google-fonts.js';
5
6
  import { genCSS } from '../../libs/helpers/gen-css.js';
6
- import { getStorefrontApi } from '../../libs/get-storefront-api.js';
7
+ import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
7
8
  import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
8
- import { normalizeBuilderData } from '../../libs/helpers/normalize.js';
9
- import { getFontsFromDataBuilder, getFontFromGroupSetting } from '../../libs/helpers/gen-fonts.js';
10
9
 
11
10
  const globalStyleId = 'global-style';
12
11
  const globalFontId = 'google-font-builder';
@@ -16,6 +15,7 @@ const Toolbox = ()=>{
16
15
  const provider = useShopStore((s)=>s.provider);
17
16
  const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
18
17
  const initState = useBuilderPreviewStore((s)=>s.initState);
18
+ const state = useBuilderPreviewStore((s)=>s.state);
19
19
  const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
20
20
  const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
21
21
  const addItem = useBuilderPreviewStore((s)=>s.addItem);
@@ -25,7 +25,14 @@ const Toolbox = ()=>{
25
25
  const changeSwatches = useShopStore((s)=>s.changeSwatches);
26
26
  const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
27
27
  const clearModal = useModalStore((s)=>s.clearModal);
28
- const [fonts, setFonts] = useState([]);
28
+ const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
29
+ state
30
+ ]);
31
+ const customFontUrl = useMemo(()=>{
32
+ return createFontUrl(fonts);
33
+ }, [
34
+ fonts
35
+ ]);
29
36
  // Revalidate all query with key match query/
30
37
  const onRevalidateQuery = useCallback(()=>{
31
38
  matchMutate(/query\//, {
@@ -96,24 +103,10 @@ const Toolbox = ()=>{
96
103
  try {
97
104
  const detail = e.detail;
98
105
  if (detail.data) {
99
- let dataBuilder = {};
100
106
  if (detail.type === 'flat') {
101
107
  initNormalizeState(detail.data);
102
- dataBuilder = detail.data;
103
108
  } else {
104
109
  initState(detail.data);
105
- dataBuilder = detail.data.reduceRight((prev, current)=>{
106
- const item = normalizeBuilderData(current);
107
- return {
108
- ...prev,
109
- ...item
110
- };
111
- }, {});
112
- }
113
- // Append link font to head
114
- if (dataBuilder) {
115
- const fonts = getFontsFromDataBuilder(dataBuilder);
116
- setFonts(fonts);
117
110
  }
118
111
  }
119
112
  } catch {
@@ -157,21 +150,11 @@ const Toolbox = ()=>{
157
150
  data: detail.propValue,
158
151
  group: detail.group
159
152
  });
160
- // Check link google font to <head>
161
- if (detail.propValue?.custom) {
162
- const settings = {
163
- [detail.propName]: detail.propValue
164
- };
165
- const currentFonts = JSON.parse(JSON.stringify(fonts));
166
- getFontFromGroupSetting(currentFonts, settings);
167
- setFonts(currentFonts);
168
- }
169
153
  }
170
154
  } catch {
171
155
  //
172
156
  }
173
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
174
- [
157
+ }, [
175
158
  changeItemPropByKey
176
159
  ]);
177
160
  // Move entity
@@ -221,30 +204,24 @@ const Toolbox = ()=>{
221
204
  changeLayoutSettings
222
205
  ]);
223
206
  useEffect(()=>{
224
- if (fonts?.length) {
225
- fonts.forEach((font)=>{
226
- const fontUrl = createFontUrl([
227
- font
228
- ]);
229
- if (fontUrl) {
230
- const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
231
- if (googleFont) {
232
- if (googleFont.getAttribute('href') !== fontUrl) {
233
- googleFont.setAttribute('href', fontUrl);
234
- }
235
- } else {
236
- const link = document.createElement('link');
237
- link.className = fontElementSettingClassName;
238
- link.dataset.font = encodeURI(font.family);
239
- link.href = fontUrl;
240
- link.rel = 'stylesheet';
241
- document.head.appendChild(link);
242
- }
207
+ if (customFontUrl) {
208
+ const fontId = 'google-font';
209
+ const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
210
+ if (googleFont) {
211
+ if (googleFont.getAttribute('href') !== customFontUrl) {
212
+ googleFont.setAttribute('href', customFontUrl);
243
213
  }
244
- });
214
+ } else {
215
+ const link = document.createElement('link');
216
+ link.className = fontElementSettingClassName;
217
+ link.dataset.font = fontId;
218
+ link.href = customFontUrl;
219
+ link.rel = 'stylesheet';
220
+ document.head.appendChild(link);
221
+ }
245
222
  }
246
223
  }, [
247
- fonts
224
+ customFontUrl
248
225
  ]);
249
226
  useEffect(()=>{
250
227
  window.addEventListener('update-shop-info', onChangeShopInfo);