@gem-sdk/core 1.22.21 → 1.22.31-new-feature.1
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.
- package/dist/cjs/components/ComponentToolbarPreview.js +356 -0
- package/dist/cjs/components/ComponentWrapperPreview.js +23 -4
- package/dist/cjs/components/Render.liquid.js +6 -0
- package/dist/cjs/contexts/BuilderPreviewContext.js +18 -0
- package/dist/cjs/helpers/filter-toolbar-preview.js +14 -0
- package/dist/cjs/helpers/is-empty-children.js +4 -1
- package/dist/cjs/hooks/useProduct.js +7 -1
- package/dist/cjs/index.js +2 -0
- package/dist/esm/components/ComponentToolbarPreview.js +354 -0
- package/dist/esm/components/ComponentWrapperPreview.js +23 -4
- package/dist/esm/components/Render.liquid.js +6 -0
- package/dist/esm/contexts/BuilderPreviewContext.js +18 -0
- package/dist/esm/helpers/filter-toolbar-preview.js +9 -0
- package/dist/esm/helpers/is-empty-children.js +5 -2
- package/dist/esm/hooks/useProduct.js +7 -1
- package/dist/esm/index.js +1 -0
- package/dist/types/index.d.ts +4 -1
- package/package.json +3 -3
|
@@ -0,0 +1,356 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
require('zustand');
|
|
6
|
+
var BuilderPreviewContext = require('../contexts/BuilderPreviewContext.js');
|
|
7
|
+
require('swr');
|
|
8
|
+
require('@gem-sdk/adapter-shopify');
|
|
9
|
+
require('swr/mutation');
|
|
10
|
+
require('vanilla-lazyload');
|
|
11
|
+
require('../hooks/useCartUI.js');
|
|
12
|
+
require('../helpers/convert.js');
|
|
13
|
+
|
|
14
|
+
const ComponentToolbarPreview = ({ ...props })=>{
|
|
15
|
+
const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
|
|
16
|
+
const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
|
|
17
|
+
const [activeAddSection, setActiveAddSection] = react.useState(null);
|
|
18
|
+
const [isShowParent, setIsShowParent] = react.useState(false);
|
|
19
|
+
const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
|
|
20
|
+
const [parents, setParents] = react.useState([]);
|
|
21
|
+
// Get parents
|
|
22
|
+
const onActiveComponent = react.useCallback((e)=>{
|
|
23
|
+
const detail = e.detail;
|
|
24
|
+
if (detail?.componentUid == props.uid) {
|
|
25
|
+
const currentParents = getParents(props.uid).filter((parent)=>{
|
|
26
|
+
if (parent.uid === 'ROOT') return false;
|
|
27
|
+
if (parent.tag === 'Section') return false;
|
|
28
|
+
if (parent.editorConfigs?.toolbar?.hide) return false;
|
|
29
|
+
if (parent.editorConfigs?.component?.noSetting) return false;
|
|
30
|
+
return true;
|
|
31
|
+
}).slice(0, 3);
|
|
32
|
+
setParents(currentParents);
|
|
33
|
+
} else {
|
|
34
|
+
setParents([]);
|
|
35
|
+
setIsShowParent(false);
|
|
36
|
+
}
|
|
37
|
+
}, [
|
|
38
|
+
setParents,
|
|
39
|
+
getParents,
|
|
40
|
+
props.uid
|
|
41
|
+
]);
|
|
42
|
+
react.useEffect(()=>{
|
|
43
|
+
window.addEventListener('editor:active-component', onActiveComponent);
|
|
44
|
+
return ()=>{
|
|
45
|
+
window.removeEventListener('editor:active-component', onActiveComponent);
|
|
46
|
+
};
|
|
47
|
+
}, [
|
|
48
|
+
onActiveComponent
|
|
49
|
+
]);
|
|
50
|
+
// End get parents
|
|
51
|
+
if (props.type === 'section') {
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
if (props.editorConfigs?.toolbar?.hide) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
const getIndexSection = ()=>{
|
|
58
|
+
if (props.tag !== 'Section') {
|
|
59
|
+
return -1;
|
|
60
|
+
}
|
|
61
|
+
if (root?.childrens?.length) {
|
|
62
|
+
return root.childrens.findIndex((sectionUid)=>sectionUid == props.uid);
|
|
63
|
+
}
|
|
64
|
+
return -1;
|
|
65
|
+
};
|
|
66
|
+
const onShowParent = (e)=>{
|
|
67
|
+
if (!parents.length) return;
|
|
68
|
+
const $target = (e?.target) || null;
|
|
69
|
+
const $toolbar = $target.closest('[data-toolbar-active]');
|
|
70
|
+
if (!$target || !$toolbar) return;
|
|
71
|
+
if (isShowParent) {
|
|
72
|
+
setIsShowParentRevert(false);
|
|
73
|
+
setIsShowParent(false);
|
|
74
|
+
} else {
|
|
75
|
+
const rect = $toolbar.getBoundingClientRect();
|
|
76
|
+
if (rect.top < parents.length * 24) {
|
|
77
|
+
setIsShowParentRevert(true);
|
|
78
|
+
} else {
|
|
79
|
+
setIsShowParentRevert(false);
|
|
80
|
+
}
|
|
81
|
+
setIsShowParent(true);
|
|
82
|
+
}
|
|
83
|
+
const event = new CustomEvent('editor:toolbar:show-parents', {
|
|
84
|
+
bubbles: true,
|
|
85
|
+
detail: {
|
|
86
|
+
value: !isShowParent
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
window.dispatchEvent(event);
|
|
90
|
+
};
|
|
91
|
+
const onDelete = (e)=>{
|
|
92
|
+
e.preventDefault();
|
|
93
|
+
e.stopPropagation();
|
|
94
|
+
const event = new CustomEvent('editor:toolbar:delete-component', {
|
|
95
|
+
bubbles: true,
|
|
96
|
+
detail: {
|
|
97
|
+
componentUid: props.uid
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
window.dispatchEvent(event);
|
|
101
|
+
return false;
|
|
102
|
+
};
|
|
103
|
+
const onDuplicate = (e)=>{
|
|
104
|
+
e.preventDefault();
|
|
105
|
+
e.stopPropagation();
|
|
106
|
+
const event = new CustomEvent('editor:toolbar:duplicate-component', {
|
|
107
|
+
bubbles: true,
|
|
108
|
+
detail: {
|
|
109
|
+
componentUid: props.uid
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
window.dispatchEvent(event);
|
|
113
|
+
return false;
|
|
114
|
+
};
|
|
115
|
+
const closeAddSection = ()=>{
|
|
116
|
+
setActiveAddSection(null);
|
|
117
|
+
window.removeEventListener('editor:close-add-section-popup', closeAddSection);
|
|
118
|
+
};
|
|
119
|
+
const onAddSection = (e, position)=>{
|
|
120
|
+
e.preventDefault();
|
|
121
|
+
e.stopPropagation();
|
|
122
|
+
const $target = e.target;
|
|
123
|
+
if ($target) {
|
|
124
|
+
setActiveAddSection(position);
|
|
125
|
+
const rect = $target.getBoundingClientRect();
|
|
126
|
+
const event = new CustomEvent('editor:toolbar:add-section', {
|
|
127
|
+
bubbles: true,
|
|
128
|
+
detail: {
|
|
129
|
+
componentUid: props.uid,
|
|
130
|
+
position,
|
|
131
|
+
top: rect.top + rect.height / 2
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
window.dispatchEvent(event);
|
|
135
|
+
window.addEventListener('editor:close-add-section-popup', closeAddSection);
|
|
136
|
+
}
|
|
137
|
+
return false;
|
|
138
|
+
};
|
|
139
|
+
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
140
|
+
children: [
|
|
141
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
142
|
+
"data-toolbar": true,
|
|
143
|
+
"data-toolbar-section": props.tag == 'Section',
|
|
144
|
+
children: [
|
|
145
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
146
|
+
"data-toolbar-show-parent": true,
|
|
147
|
+
onClick: (e)=>onShowParent(e),
|
|
148
|
+
"aria-hidden": "true",
|
|
149
|
+
children: [
|
|
150
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
151
|
+
"data-toolbar-icon-drag": true,
|
|
152
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
153
|
+
width: "16",
|
|
154
|
+
height: "16",
|
|
155
|
+
viewBox: "0 0 16 16",
|
|
156
|
+
fill: "none",
|
|
157
|
+
children: [
|
|
158
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
159
|
+
d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
|
|
160
|
+
fill: "currentColor"
|
|
161
|
+
}),
|
|
162
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
163
|
+
d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
|
|
164
|
+
fill: "currentColor"
|
|
165
|
+
}),
|
|
166
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
167
|
+
d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
|
|
168
|
+
fill: "currentColor"
|
|
169
|
+
}),
|
|
170
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
171
|
+
d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
|
|
172
|
+
fill: "currentColor"
|
|
173
|
+
}),
|
|
174
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
175
|
+
d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
|
|
176
|
+
fill: "currentColor"
|
|
177
|
+
}),
|
|
178
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
179
|
+
d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
|
|
180
|
+
fill: "currentColor"
|
|
181
|
+
})
|
|
182
|
+
]
|
|
183
|
+
})
|
|
184
|
+
}),
|
|
185
|
+
props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
186
|
+
"data-toolbar-name": true,
|
|
187
|
+
children: [
|
|
188
|
+
"Section ",
|
|
189
|
+
getIndexSection() + 1
|
|
190
|
+
]
|
|
191
|
+
}) : /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
192
|
+
"data-toolbar-name": true,
|
|
193
|
+
children: props.label
|
|
194
|
+
}),
|
|
195
|
+
props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
196
|
+
"data-toolbar-icon-parent": true,
|
|
197
|
+
"data-toolbar-icon-parent-open": isShowParent,
|
|
198
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
199
|
+
width: "16",
|
|
200
|
+
height: "16",
|
|
201
|
+
viewBox: "0 0 16 16",
|
|
202
|
+
fill: "none",
|
|
203
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
204
|
+
d: "M5.65522 10C5.07265 10 4.7809 9.22865 5.19284 8.77753L7.53762 6.20974C7.79298 5.93009 8.20702 5.93009 8.46238 6.20974L10.8072 8.77754C11.2191 9.22866 10.9274 10 10.3448 10H5.65522Z",
|
|
205
|
+
fill: "currentColor"
|
|
206
|
+
})
|
|
207
|
+
})
|
|
208
|
+
})
|
|
209
|
+
]
|
|
210
|
+
}),
|
|
211
|
+
isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
212
|
+
"data-toolbar-parent": true,
|
|
213
|
+
"data-parent-uid": parent.uid,
|
|
214
|
+
style: {
|
|
215
|
+
top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
|
|
216
|
+
},
|
|
217
|
+
children: [
|
|
218
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
219
|
+
"data-toolbar-icon-drag": true,
|
|
220
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
221
|
+
width: "16",
|
|
222
|
+
height: "16",
|
|
223
|
+
viewBox: "0 0 16 16",
|
|
224
|
+
fill: "none",
|
|
225
|
+
children: [
|
|
226
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
227
|
+
d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
|
|
228
|
+
fill: "currentColor"
|
|
229
|
+
}),
|
|
230
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
231
|
+
d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
|
|
232
|
+
fill: "currentColor"
|
|
233
|
+
}),
|
|
234
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
235
|
+
d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
|
|
236
|
+
fill: "currentColor"
|
|
237
|
+
}),
|
|
238
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
239
|
+
d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
|
|
240
|
+
fill: "currentColor"
|
|
241
|
+
}),
|
|
242
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
243
|
+
d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
|
|
244
|
+
fill: "currentColor"
|
|
245
|
+
}),
|
|
246
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
247
|
+
d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
|
|
248
|
+
fill: "currentColor"
|
|
249
|
+
})
|
|
250
|
+
]
|
|
251
|
+
})
|
|
252
|
+
}),
|
|
253
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
254
|
+
"data-toolbar-name": true,
|
|
255
|
+
children: parent.label
|
|
256
|
+
})
|
|
257
|
+
]
|
|
258
|
+
}, parent.uid)),
|
|
259
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
260
|
+
"data-toolbar-duplicate": true,
|
|
261
|
+
onClick: (e)=>onDuplicate(e),
|
|
262
|
+
"aria-hidden": "true",
|
|
263
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
264
|
+
width: "16",
|
|
265
|
+
height: "16",
|
|
266
|
+
viewBox: "0 0 16 16",
|
|
267
|
+
fill: "none",
|
|
268
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
269
|
+
fillRule: "evenodd",
|
|
270
|
+
clipRule: "evenodd",
|
|
271
|
+
d: "M6.08423 1.21289C5.53194 1.21289 5.08423 1.66061 5.08423 2.21289V3.78711H4.26172C3.43329 3.78711 2.76172 4.45868 2.76172 5.28711V13.2871C2.76172 14.1155 3.43329 14.7871 4.26172 14.7871H10.2617C11.0901 14.7871 11.7617 14.1155 11.7617 13.2871V12.4629H13.0842C13.6365 12.4629 14.0842 12.0152 14.0842 11.4629V2.21289C14.0842 1.66061 13.6365 1.21289 13.0842 1.21289H6.08423ZM10.7617 12.4629H6.08423C5.53194 12.4629 5.08423 12.0152 5.08423 11.4629V4.78711H4.26172C3.98558 4.78711 3.76172 5.01097 3.76172 5.28711V13.2871C3.76172 13.5633 3.98558 13.7871 4.26172 13.7871H10.2617C10.5379 13.7871 10.7617 13.5633 10.7617 13.2871V12.4629Z",
|
|
272
|
+
fill: "currentColor"
|
|
273
|
+
})
|
|
274
|
+
})
|
|
275
|
+
}),
|
|
276
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
277
|
+
"data-toolbar-delete": true,
|
|
278
|
+
onClick: (e)=>onDelete(e),
|
|
279
|
+
"aria-hidden": "true",
|
|
280
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
281
|
+
width: "16",
|
|
282
|
+
height: "16",
|
|
283
|
+
viewBox: "0 0 16 16",
|
|
284
|
+
fill: "none",
|
|
285
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
286
|
+
fillRule: "evenodd",
|
|
287
|
+
clipRule: "evenodd",
|
|
288
|
+
d: "M11 2.88965V2.38965C11 1.56122 10.3284 0.889648 9.5 0.889648H6.5C5.67157 0.889648 5 1.56122 5 2.38965V2.88965H2C1.72386 2.88965 1.5 3.11351 1.5 3.38965C1.5 3.66579 1.72386 3.88965 2 3.88965H3.21997V13.1099C3.21997 14.2144 4.1154 15.1099 5.21997 15.1099H11.22C12.3245 15.1099 13.22 14.2144 13.22 13.1099V3.88965H14C14.2761 3.88965 14.5 3.66579 14.5 3.38965C14.5 3.11351 14.2761 2.88965 14 2.88965H11ZM6 2.88965H10V2.38965C10 2.11351 9.77614 1.88965 9.5 1.88965H6.5C6.22386 1.88965 6 2.11351 6 2.38965V2.88965ZM6.24976 6.13965C6.66397 6.13965 6.99976 6.47543 6.99976 6.88965V11.3896C6.99976 11.8039 6.66397 12.1396 6.24976 12.1396C5.83554 12.1396 5.49976 11.8039 5.49976 11.3896V6.88965C5.49976 6.47543 5.83554 6.13965 6.24976 6.13965ZM10.4998 6.88965C10.4998 6.47543 10.164 6.13965 9.74976 6.13965C9.33554 6.13965 8.99976 6.47543 8.99976 6.88965V11.3896C8.99976 11.8039 9.33554 12.1396 9.74976 12.1396C10.164 12.1396 10.4998 11.8039 10.4998 11.3896V6.88965Z",
|
|
289
|
+
fill: "currentColor"
|
|
290
|
+
})
|
|
291
|
+
})
|
|
292
|
+
})
|
|
293
|
+
]
|
|
294
|
+
}),
|
|
295
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
296
|
+
"data-outline": true,
|
|
297
|
+
"data-outline-section": props.tag == 'Section'
|
|
298
|
+
}),
|
|
299
|
+
props.tag == 'Section' && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
300
|
+
children: [
|
|
301
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
302
|
+
"data-toolbar-add-top": true,
|
|
303
|
+
"data-toolbar-add-open": activeAddSection == 'above',
|
|
304
|
+
onClick: (e)=>onAddSection(e, 'above'),
|
|
305
|
+
"aria-hidden": "true",
|
|
306
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
307
|
+
width: "16",
|
|
308
|
+
height: "16",
|
|
309
|
+
viewBox: "0 0 16 16",
|
|
310
|
+
fill: "none",
|
|
311
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
312
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
313
|
+
fill: "currentColor"
|
|
314
|
+
})
|
|
315
|
+
})
|
|
316
|
+
}),
|
|
317
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
318
|
+
"data-toolbar-add-bottom": true,
|
|
319
|
+
"data-toolbar-add-open": activeAddSection == 'below',
|
|
320
|
+
onClick: (e)=>onAddSection(e, 'below'),
|
|
321
|
+
"aria-hidden": "true",
|
|
322
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
323
|
+
width: "16",
|
|
324
|
+
height: "16",
|
|
325
|
+
viewBox: "0 0 16 16",
|
|
326
|
+
fill: "none",
|
|
327
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
328
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
329
|
+
fill: "currentColor"
|
|
330
|
+
})
|
|
331
|
+
})
|
|
332
|
+
})
|
|
333
|
+
]
|
|
334
|
+
}),
|
|
335
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
336
|
+
"data-spacing": true,
|
|
337
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
338
|
+
"data-spacing-margin-bottom": true,
|
|
339
|
+
children: [
|
|
340
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
341
|
+
"data-spacing-margin-bottom-bg": true,
|
|
342
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
343
|
+
"data-spacing-margin-bottom-value": true
|
|
344
|
+
})
|
|
345
|
+
}),
|
|
346
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
347
|
+
"data-spacing-margin-bottom-drag": true
|
|
348
|
+
})
|
|
349
|
+
]
|
|
350
|
+
})
|
|
351
|
+
})
|
|
352
|
+
]
|
|
353
|
+
});
|
|
354
|
+
};
|
|
355
|
+
|
|
356
|
+
exports.ComponentToolbarPreview = ComponentToolbarPreview;
|
|
@@ -7,6 +7,7 @@ var react = require('react');
|
|
|
7
7
|
var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
|
|
8
8
|
var constant = require('./constant.js');
|
|
9
9
|
var RenderCustomCode = require('./RenderCustomCode.js');
|
|
10
|
+
var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
|
|
10
11
|
|
|
11
12
|
const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
12
13
|
if (props.type === 'section') {
|
|
@@ -43,6 +44,13 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
43
44
|
if (editorConfigs.slots?.children) {
|
|
44
45
|
customProps['data-slots-children'] = true;
|
|
45
46
|
}
|
|
47
|
+
if (!editorConfigs.toolbar?.hide) {
|
|
48
|
+
customProps['data-toolbar-wrap'] = true;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
// Show toolbar wrapper
|
|
52
|
+
if (!props?.editorConfigs?.toolbar?.hide) {
|
|
53
|
+
customProps['data-toolbar-wrap'] = true;
|
|
46
54
|
}
|
|
47
55
|
const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
|
|
48
56
|
const advanced = props.advanced;
|
|
@@ -60,12 +68,18 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
60
68
|
uid: props.uid,
|
|
61
69
|
advanced: advanced
|
|
62
70
|
}),
|
|
63
|
-
/*#__PURE__*/ jsxRuntime.
|
|
71
|
+
/*#__PURE__*/ jsxRuntime.jsxs(children.type, {
|
|
64
72
|
className: advanced?.cssClass,
|
|
65
73
|
...children.props,
|
|
66
74
|
style,
|
|
67
75
|
builderAttrs,
|
|
68
|
-
advanced
|
|
76
|
+
advanced,
|
|
77
|
+
children: [
|
|
78
|
+
children.props['children'],
|
|
79
|
+
/*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
|
|
80
|
+
...props
|
|
81
|
+
})
|
|
82
|
+
]
|
|
69
83
|
})
|
|
70
84
|
]
|
|
71
85
|
});
|
|
@@ -77,11 +91,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
77
91
|
uid: props.uid,
|
|
78
92
|
advanced: advanced
|
|
79
93
|
}),
|
|
80
|
-
/*#__PURE__*/ jsxRuntime.
|
|
94
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
81
95
|
style: style,
|
|
82
96
|
className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
|
|
83
97
|
...builderAttrs,
|
|
84
|
-
children:
|
|
98
|
+
children: [
|
|
99
|
+
children,
|
|
100
|
+
/*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
|
|
101
|
+
...props
|
|
102
|
+
})
|
|
103
|
+
]
|
|
85
104
|
})
|
|
86
105
|
]
|
|
87
106
|
});
|
|
@@ -3,7 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
require('react');
|
|
6
|
+
require('react/jsx-runtime');
|
|
7
|
+
require('zustand');
|
|
6
8
|
require('swr');
|
|
9
|
+
require('@gem-sdk/adapter-shopify');
|
|
10
|
+
require('swr/mutation');
|
|
11
|
+
require('vanilla-lazyload');
|
|
12
|
+
require('../hooks/useCartUI.js');
|
|
7
13
|
var render = require('../helpers/render.js');
|
|
8
14
|
require('../helpers/convert.js');
|
|
9
15
|
var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
|
|
@@ -390,6 +390,24 @@ const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
|
|
|
390
390
|
ROOT: cloneDeep.cloneDeep(ROOT)
|
|
391
391
|
}
|
|
392
392
|
});
|
|
393
|
+
},
|
|
394
|
+
getParents: (id, limit)=>{
|
|
395
|
+
const state = get().state;
|
|
396
|
+
const parents = [];
|
|
397
|
+
let index = 0;
|
|
398
|
+
let currentId = id;
|
|
399
|
+
// eslint-disable-next-line no-constant-condition
|
|
400
|
+
while(true){
|
|
401
|
+
if (limit && index >= limit) break;
|
|
402
|
+
const parent = Object.entries(state).find(([, value])=>value.type !== 'section' && value.childrens?.includes(currentId));
|
|
403
|
+
if (!parent) break;
|
|
404
|
+
const [, parentItem] = parent;
|
|
405
|
+
if (!parentItem) break;
|
|
406
|
+
parents.push(parentItem);
|
|
407
|
+
currentId = parentItem.uid;
|
|
408
|
+
index++;
|
|
409
|
+
}
|
|
410
|
+
return parents;
|
|
393
411
|
}
|
|
394
412
|
}));
|
|
395
413
|
const BuilderPreviewProvider = ({ children, state, lazy, ...passProps })=>{
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js');
|
|
7
|
+
|
|
8
|
+
const filterToolbarPreview = (children, keep = false)=>{
|
|
9
|
+
const arrChild = react.Children.toArray(children);
|
|
10
|
+
return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview.ComponentToolbarPreview : child?.type == ComponentToolbarPreview.ComponentToolbarPreview);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
exports.default = filterToolbarPreview;
|
|
14
|
+
exports.filterToolbarPreview = filterToolbarPreview;
|
|
@@ -3,9 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var react = require('react');
|
|
6
|
+
var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js');
|
|
6
7
|
|
|
7
8
|
const isEmptyChildren = (children)=>{
|
|
8
|
-
|
|
9
|
+
let arrChild = react.Children.toArray(children);
|
|
10
|
+
arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview && react.isValidElement(child));
|
|
11
|
+
return react.Children.count(arrChild) < 1 || !children;
|
|
9
12
|
};
|
|
10
13
|
|
|
11
14
|
exports.default = isEmptyChildren;
|
|
@@ -3,10 +3,16 @@
|
|
|
3
3
|
var react = require('react');
|
|
4
4
|
var ProductContext = require('../contexts/ProductContext.js');
|
|
5
5
|
var flattenConnection = require('../helpers/flatten-connection.js');
|
|
6
|
+
require('react/jsx-runtime');
|
|
7
|
+
require('zustand');
|
|
6
8
|
require('swr');
|
|
9
|
+
require('@gem-sdk/adapter-shopify');
|
|
10
|
+
require('swr/mutation');
|
|
11
|
+
require('vanilla-lazyload');
|
|
12
|
+
require('./useCartUI.js');
|
|
13
|
+
var variant = require('../helpers/variant.js');
|
|
7
14
|
var product = require('../helpers/product.js');
|
|
8
15
|
require('../helpers/convert.js');
|
|
9
|
-
var variant = require('../helpers/variant.js');
|
|
10
16
|
|
|
11
17
|
const useUniqProductID = ()=>{
|
|
12
18
|
return ProductContext.useProductStore((s)=>s.uiqueId);
|
package/dist/cjs/index.js
CHANGED
|
@@ -32,6 +32,7 @@ var GlobalEvent = require('./helpers/GlobalEvent.js');
|
|
|
32
32
|
var isBrowser = require('./helpers/is-browser.js');
|
|
33
33
|
var isSafari = require('./helpers/is-safari.js');
|
|
34
34
|
var isEmptyChildren = require('./helpers/is-empty-children.js');
|
|
35
|
+
var filterToolbarPreview = require('./helpers/filter-toolbar-preview.js');
|
|
35
36
|
var makeStyle = require('./helpers/make-style.js');
|
|
36
37
|
var normalizeBuilderData = require('./helpers/normalize-builder-data.js');
|
|
37
38
|
var prefetchQueries = require('./helpers/prefetch-queries.js');
|
|
@@ -148,6 +149,7 @@ exports.globalEvent = GlobalEvent.default;
|
|
|
148
149
|
exports.isBrowser = isBrowser.default;
|
|
149
150
|
exports.isSafari = isSafari.default;
|
|
150
151
|
exports.isEmptyChildren = isEmptyChildren.isEmptyChildren;
|
|
152
|
+
exports.filterToolbarPreview = filterToolbarPreview.filterToolbarPreview;
|
|
151
153
|
exports.makeAspectRatio = makeStyle.makeAspectRatio;
|
|
152
154
|
exports.makeHeight = makeStyle.makeHeight;
|
|
153
155
|
exports.makeLineClamp = makeStyle.makeLineClamp;
|
|
@@ -0,0 +1,354 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useState, useCallback, useEffect } from 'react';
|
|
3
|
+
import 'zustand';
|
|
4
|
+
import { useBuilderPreviewStore } from '../contexts/BuilderPreviewContext.js';
|
|
5
|
+
import 'swr';
|
|
6
|
+
import '@gem-sdk/adapter-shopify';
|
|
7
|
+
import 'swr/mutation';
|
|
8
|
+
import 'vanilla-lazyload';
|
|
9
|
+
import '../hooks/useCartUI.js';
|
|
10
|
+
import '../helpers/convert.js';
|
|
11
|
+
|
|
12
|
+
const ComponentToolbarPreview = ({ ...props })=>{
|
|
13
|
+
const getParents = useBuilderPreviewStore((s)=>s.getParents);
|
|
14
|
+
const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
|
|
15
|
+
const [activeAddSection, setActiveAddSection] = useState(null);
|
|
16
|
+
const [isShowParent, setIsShowParent] = useState(false);
|
|
17
|
+
const [isShowParentRevert, setIsShowParentRevert] = useState(false);
|
|
18
|
+
const [parents, setParents] = useState([]);
|
|
19
|
+
// Get parents
|
|
20
|
+
const onActiveComponent = useCallback((e)=>{
|
|
21
|
+
const detail = e.detail;
|
|
22
|
+
if (detail?.componentUid == props.uid) {
|
|
23
|
+
const currentParents = getParents(props.uid).filter((parent)=>{
|
|
24
|
+
if (parent.uid === 'ROOT') return false;
|
|
25
|
+
if (parent.tag === 'Section') return false;
|
|
26
|
+
if (parent.editorConfigs?.toolbar?.hide) return false;
|
|
27
|
+
if (parent.editorConfigs?.component?.noSetting) return false;
|
|
28
|
+
return true;
|
|
29
|
+
}).slice(0, 3);
|
|
30
|
+
setParents(currentParents);
|
|
31
|
+
} else {
|
|
32
|
+
setParents([]);
|
|
33
|
+
setIsShowParent(false);
|
|
34
|
+
}
|
|
35
|
+
}, [
|
|
36
|
+
setParents,
|
|
37
|
+
getParents,
|
|
38
|
+
props.uid
|
|
39
|
+
]);
|
|
40
|
+
useEffect(()=>{
|
|
41
|
+
window.addEventListener('editor:active-component', onActiveComponent);
|
|
42
|
+
return ()=>{
|
|
43
|
+
window.removeEventListener('editor:active-component', onActiveComponent);
|
|
44
|
+
};
|
|
45
|
+
}, [
|
|
46
|
+
onActiveComponent
|
|
47
|
+
]);
|
|
48
|
+
// End get parents
|
|
49
|
+
if (props.type === 'section') {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
if (props.editorConfigs?.toolbar?.hide) {
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
const getIndexSection = ()=>{
|
|
56
|
+
if (props.tag !== 'Section') {
|
|
57
|
+
return -1;
|
|
58
|
+
}
|
|
59
|
+
if (root?.childrens?.length) {
|
|
60
|
+
return root.childrens.findIndex((sectionUid)=>sectionUid == props.uid);
|
|
61
|
+
}
|
|
62
|
+
return -1;
|
|
63
|
+
};
|
|
64
|
+
const onShowParent = (e)=>{
|
|
65
|
+
if (!parents.length) return;
|
|
66
|
+
const $target = (e?.target) || null;
|
|
67
|
+
const $toolbar = $target.closest('[data-toolbar-active]');
|
|
68
|
+
if (!$target || !$toolbar) return;
|
|
69
|
+
if (isShowParent) {
|
|
70
|
+
setIsShowParentRevert(false);
|
|
71
|
+
setIsShowParent(false);
|
|
72
|
+
} else {
|
|
73
|
+
const rect = $toolbar.getBoundingClientRect();
|
|
74
|
+
if (rect.top < parents.length * 24) {
|
|
75
|
+
setIsShowParentRevert(true);
|
|
76
|
+
} else {
|
|
77
|
+
setIsShowParentRevert(false);
|
|
78
|
+
}
|
|
79
|
+
setIsShowParent(true);
|
|
80
|
+
}
|
|
81
|
+
const event = new CustomEvent('editor:toolbar:show-parents', {
|
|
82
|
+
bubbles: true,
|
|
83
|
+
detail: {
|
|
84
|
+
value: !isShowParent
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
window.dispatchEvent(event);
|
|
88
|
+
};
|
|
89
|
+
const onDelete = (e)=>{
|
|
90
|
+
e.preventDefault();
|
|
91
|
+
e.stopPropagation();
|
|
92
|
+
const event = new CustomEvent('editor:toolbar:delete-component', {
|
|
93
|
+
bubbles: true,
|
|
94
|
+
detail: {
|
|
95
|
+
componentUid: props.uid
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
window.dispatchEvent(event);
|
|
99
|
+
return false;
|
|
100
|
+
};
|
|
101
|
+
const onDuplicate = (e)=>{
|
|
102
|
+
e.preventDefault();
|
|
103
|
+
e.stopPropagation();
|
|
104
|
+
const event = new CustomEvent('editor:toolbar:duplicate-component', {
|
|
105
|
+
bubbles: true,
|
|
106
|
+
detail: {
|
|
107
|
+
componentUid: props.uid
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
window.dispatchEvent(event);
|
|
111
|
+
return false;
|
|
112
|
+
};
|
|
113
|
+
const closeAddSection = ()=>{
|
|
114
|
+
setActiveAddSection(null);
|
|
115
|
+
window.removeEventListener('editor:close-add-section-popup', closeAddSection);
|
|
116
|
+
};
|
|
117
|
+
const onAddSection = (e, position)=>{
|
|
118
|
+
e.preventDefault();
|
|
119
|
+
e.stopPropagation();
|
|
120
|
+
const $target = e.target;
|
|
121
|
+
if ($target) {
|
|
122
|
+
setActiveAddSection(position);
|
|
123
|
+
const rect = $target.getBoundingClientRect();
|
|
124
|
+
const event = new CustomEvent('editor:toolbar:add-section', {
|
|
125
|
+
bubbles: true,
|
|
126
|
+
detail: {
|
|
127
|
+
componentUid: props.uid,
|
|
128
|
+
position,
|
|
129
|
+
top: rect.top + rect.height / 2
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
window.dispatchEvent(event);
|
|
133
|
+
window.addEventListener('editor:close-add-section-popup', closeAddSection);
|
|
134
|
+
}
|
|
135
|
+
return false;
|
|
136
|
+
};
|
|
137
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
138
|
+
children: [
|
|
139
|
+
/*#__PURE__*/ jsxs("div", {
|
|
140
|
+
"data-toolbar": true,
|
|
141
|
+
"data-toolbar-section": props.tag == 'Section',
|
|
142
|
+
children: [
|
|
143
|
+
/*#__PURE__*/ jsxs("div", {
|
|
144
|
+
"data-toolbar-show-parent": true,
|
|
145
|
+
onClick: (e)=>onShowParent(e),
|
|
146
|
+
"aria-hidden": "true",
|
|
147
|
+
children: [
|
|
148
|
+
/*#__PURE__*/ jsx("div", {
|
|
149
|
+
"data-toolbar-icon-drag": true,
|
|
150
|
+
children: /*#__PURE__*/ jsxs("svg", {
|
|
151
|
+
width: "16",
|
|
152
|
+
height: "16",
|
|
153
|
+
viewBox: "0 0 16 16",
|
|
154
|
+
fill: "none",
|
|
155
|
+
children: [
|
|
156
|
+
/*#__PURE__*/ jsx("path", {
|
|
157
|
+
d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
|
|
158
|
+
fill: "currentColor"
|
|
159
|
+
}),
|
|
160
|
+
/*#__PURE__*/ jsx("path", {
|
|
161
|
+
d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
|
|
162
|
+
fill: "currentColor"
|
|
163
|
+
}),
|
|
164
|
+
/*#__PURE__*/ jsx("path", {
|
|
165
|
+
d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
|
|
166
|
+
fill: "currentColor"
|
|
167
|
+
}),
|
|
168
|
+
/*#__PURE__*/ jsx("path", {
|
|
169
|
+
d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
|
|
170
|
+
fill: "currentColor"
|
|
171
|
+
}),
|
|
172
|
+
/*#__PURE__*/ jsx("path", {
|
|
173
|
+
d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
|
|
174
|
+
fill: "currentColor"
|
|
175
|
+
}),
|
|
176
|
+
/*#__PURE__*/ jsx("path", {
|
|
177
|
+
d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
|
|
178
|
+
fill: "currentColor"
|
|
179
|
+
})
|
|
180
|
+
]
|
|
181
|
+
})
|
|
182
|
+
}),
|
|
183
|
+
props.tag == 'Section' ? /*#__PURE__*/ jsxs("div", {
|
|
184
|
+
"data-toolbar-name": true,
|
|
185
|
+
children: [
|
|
186
|
+
"Section ",
|
|
187
|
+
getIndexSection() + 1
|
|
188
|
+
]
|
|
189
|
+
}) : /*#__PURE__*/ jsx("div", {
|
|
190
|
+
"data-toolbar-name": true,
|
|
191
|
+
children: props.label
|
|
192
|
+
}),
|
|
193
|
+
props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsx("div", {
|
|
194
|
+
"data-toolbar-icon-parent": true,
|
|
195
|
+
"data-toolbar-icon-parent-open": isShowParent,
|
|
196
|
+
children: /*#__PURE__*/ jsx("svg", {
|
|
197
|
+
width: "16",
|
|
198
|
+
height: "16",
|
|
199
|
+
viewBox: "0 0 16 16",
|
|
200
|
+
fill: "none",
|
|
201
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
202
|
+
d: "M5.65522 10C5.07265 10 4.7809 9.22865 5.19284 8.77753L7.53762 6.20974C7.79298 5.93009 8.20702 5.93009 8.46238 6.20974L10.8072 8.77754C11.2191 9.22866 10.9274 10 10.3448 10H5.65522Z",
|
|
203
|
+
fill: "currentColor"
|
|
204
|
+
})
|
|
205
|
+
})
|
|
206
|
+
})
|
|
207
|
+
]
|
|
208
|
+
}),
|
|
209
|
+
isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxs("div", {
|
|
210
|
+
"data-toolbar-parent": true,
|
|
211
|
+
"data-parent-uid": parent.uid,
|
|
212
|
+
style: {
|
|
213
|
+
top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
|
|
214
|
+
},
|
|
215
|
+
children: [
|
|
216
|
+
/*#__PURE__*/ jsx("div", {
|
|
217
|
+
"data-toolbar-icon-drag": true,
|
|
218
|
+
children: /*#__PURE__*/ jsxs("svg", {
|
|
219
|
+
width: "16",
|
|
220
|
+
height: "16",
|
|
221
|
+
viewBox: "0 0 16 16",
|
|
222
|
+
fill: "none",
|
|
223
|
+
children: [
|
|
224
|
+
/*#__PURE__*/ jsx("path", {
|
|
225
|
+
d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
|
|
226
|
+
fill: "currentColor"
|
|
227
|
+
}),
|
|
228
|
+
/*#__PURE__*/ jsx("path", {
|
|
229
|
+
d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
|
|
230
|
+
fill: "currentColor"
|
|
231
|
+
}),
|
|
232
|
+
/*#__PURE__*/ jsx("path", {
|
|
233
|
+
d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
|
|
234
|
+
fill: "currentColor"
|
|
235
|
+
}),
|
|
236
|
+
/*#__PURE__*/ jsx("path", {
|
|
237
|
+
d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
|
|
238
|
+
fill: "currentColor"
|
|
239
|
+
}),
|
|
240
|
+
/*#__PURE__*/ jsx("path", {
|
|
241
|
+
d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
|
|
242
|
+
fill: "currentColor"
|
|
243
|
+
}),
|
|
244
|
+
/*#__PURE__*/ jsx("path", {
|
|
245
|
+
d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
|
|
246
|
+
fill: "currentColor"
|
|
247
|
+
})
|
|
248
|
+
]
|
|
249
|
+
})
|
|
250
|
+
}),
|
|
251
|
+
/*#__PURE__*/ jsx("div", {
|
|
252
|
+
"data-toolbar-name": true,
|
|
253
|
+
children: parent.label
|
|
254
|
+
})
|
|
255
|
+
]
|
|
256
|
+
}, parent.uid)),
|
|
257
|
+
/*#__PURE__*/ jsx("div", {
|
|
258
|
+
"data-toolbar-duplicate": true,
|
|
259
|
+
onClick: (e)=>onDuplicate(e),
|
|
260
|
+
"aria-hidden": "true",
|
|
261
|
+
children: /*#__PURE__*/ jsx("svg", {
|
|
262
|
+
width: "16",
|
|
263
|
+
height: "16",
|
|
264
|
+
viewBox: "0 0 16 16",
|
|
265
|
+
fill: "none",
|
|
266
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
267
|
+
fillRule: "evenodd",
|
|
268
|
+
clipRule: "evenodd",
|
|
269
|
+
d: "M6.08423 1.21289C5.53194 1.21289 5.08423 1.66061 5.08423 2.21289V3.78711H4.26172C3.43329 3.78711 2.76172 4.45868 2.76172 5.28711V13.2871C2.76172 14.1155 3.43329 14.7871 4.26172 14.7871H10.2617C11.0901 14.7871 11.7617 14.1155 11.7617 13.2871V12.4629H13.0842C13.6365 12.4629 14.0842 12.0152 14.0842 11.4629V2.21289C14.0842 1.66061 13.6365 1.21289 13.0842 1.21289H6.08423ZM10.7617 12.4629H6.08423C5.53194 12.4629 5.08423 12.0152 5.08423 11.4629V4.78711H4.26172C3.98558 4.78711 3.76172 5.01097 3.76172 5.28711V13.2871C3.76172 13.5633 3.98558 13.7871 4.26172 13.7871H10.2617C10.5379 13.7871 10.7617 13.5633 10.7617 13.2871V12.4629Z",
|
|
270
|
+
fill: "currentColor"
|
|
271
|
+
})
|
|
272
|
+
})
|
|
273
|
+
}),
|
|
274
|
+
/*#__PURE__*/ jsx("div", {
|
|
275
|
+
"data-toolbar-delete": true,
|
|
276
|
+
onClick: (e)=>onDelete(e),
|
|
277
|
+
"aria-hidden": "true",
|
|
278
|
+
children: /*#__PURE__*/ jsx("svg", {
|
|
279
|
+
width: "16",
|
|
280
|
+
height: "16",
|
|
281
|
+
viewBox: "0 0 16 16",
|
|
282
|
+
fill: "none",
|
|
283
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
284
|
+
fillRule: "evenodd",
|
|
285
|
+
clipRule: "evenodd",
|
|
286
|
+
d: "M11 2.88965V2.38965C11 1.56122 10.3284 0.889648 9.5 0.889648H6.5C5.67157 0.889648 5 1.56122 5 2.38965V2.88965H2C1.72386 2.88965 1.5 3.11351 1.5 3.38965C1.5 3.66579 1.72386 3.88965 2 3.88965H3.21997V13.1099C3.21997 14.2144 4.1154 15.1099 5.21997 15.1099H11.22C12.3245 15.1099 13.22 14.2144 13.22 13.1099V3.88965H14C14.2761 3.88965 14.5 3.66579 14.5 3.38965C14.5 3.11351 14.2761 2.88965 14 2.88965H11ZM6 2.88965H10V2.38965C10 2.11351 9.77614 1.88965 9.5 1.88965H6.5C6.22386 1.88965 6 2.11351 6 2.38965V2.88965ZM6.24976 6.13965C6.66397 6.13965 6.99976 6.47543 6.99976 6.88965V11.3896C6.99976 11.8039 6.66397 12.1396 6.24976 12.1396C5.83554 12.1396 5.49976 11.8039 5.49976 11.3896V6.88965C5.49976 6.47543 5.83554 6.13965 6.24976 6.13965ZM10.4998 6.88965C10.4998 6.47543 10.164 6.13965 9.74976 6.13965C9.33554 6.13965 8.99976 6.47543 8.99976 6.88965V11.3896C8.99976 11.8039 9.33554 12.1396 9.74976 12.1396C10.164 12.1396 10.4998 11.8039 10.4998 11.3896V6.88965Z",
|
|
287
|
+
fill: "currentColor"
|
|
288
|
+
})
|
|
289
|
+
})
|
|
290
|
+
})
|
|
291
|
+
]
|
|
292
|
+
}),
|
|
293
|
+
/*#__PURE__*/ jsx("div", {
|
|
294
|
+
"data-outline": true,
|
|
295
|
+
"data-outline-section": props.tag == 'Section'
|
|
296
|
+
}),
|
|
297
|
+
props.tag == 'Section' && /*#__PURE__*/ jsxs(Fragment, {
|
|
298
|
+
children: [
|
|
299
|
+
/*#__PURE__*/ jsx("div", {
|
|
300
|
+
"data-toolbar-add-top": true,
|
|
301
|
+
"data-toolbar-add-open": activeAddSection == 'above',
|
|
302
|
+
onClick: (e)=>onAddSection(e, 'above'),
|
|
303
|
+
"aria-hidden": "true",
|
|
304
|
+
children: /*#__PURE__*/ jsx("svg", {
|
|
305
|
+
width: "16",
|
|
306
|
+
height: "16",
|
|
307
|
+
viewBox: "0 0 16 16",
|
|
308
|
+
fill: "none",
|
|
309
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
310
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
311
|
+
fill: "currentColor"
|
|
312
|
+
})
|
|
313
|
+
})
|
|
314
|
+
}),
|
|
315
|
+
/*#__PURE__*/ jsx("div", {
|
|
316
|
+
"data-toolbar-add-bottom": true,
|
|
317
|
+
"data-toolbar-add-open": activeAddSection == 'below',
|
|
318
|
+
onClick: (e)=>onAddSection(e, 'below'),
|
|
319
|
+
"aria-hidden": "true",
|
|
320
|
+
children: /*#__PURE__*/ jsx("svg", {
|
|
321
|
+
width: "16",
|
|
322
|
+
height: "16",
|
|
323
|
+
viewBox: "0 0 16 16",
|
|
324
|
+
fill: "none",
|
|
325
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
326
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
327
|
+
fill: "currentColor"
|
|
328
|
+
})
|
|
329
|
+
})
|
|
330
|
+
})
|
|
331
|
+
]
|
|
332
|
+
}),
|
|
333
|
+
/*#__PURE__*/ jsx("div", {
|
|
334
|
+
"data-spacing": true,
|
|
335
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
336
|
+
"data-spacing-margin-bottom": true,
|
|
337
|
+
children: [
|
|
338
|
+
/*#__PURE__*/ jsx("div", {
|
|
339
|
+
"data-spacing-margin-bottom-bg": true,
|
|
340
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
341
|
+
"data-spacing-margin-bottom-value": true
|
|
342
|
+
})
|
|
343
|
+
}),
|
|
344
|
+
/*#__PURE__*/ jsx("div", {
|
|
345
|
+
"data-spacing-margin-bottom-drag": true
|
|
346
|
+
})
|
|
347
|
+
]
|
|
348
|
+
})
|
|
349
|
+
})
|
|
350
|
+
]
|
|
351
|
+
});
|
|
352
|
+
};
|
|
353
|
+
|
|
354
|
+
export { ComponentToolbarPreview };
|
|
@@ -3,6 +3,7 @@ import { isValidElement } from 'react';
|
|
|
3
3
|
import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
|
|
4
4
|
import { disableWrap } from './constant.js';
|
|
5
5
|
import RenderCustomCode from './RenderCustomCode.js';
|
|
6
|
+
import { ComponentToolbarPreview } from './ComponentToolbarPreview.js';
|
|
6
7
|
|
|
7
8
|
const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
8
9
|
if (props.type === 'section') {
|
|
@@ -39,6 +40,13 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
39
40
|
if (editorConfigs.slots?.children) {
|
|
40
41
|
customProps['data-slots-children'] = true;
|
|
41
42
|
}
|
|
43
|
+
if (!editorConfigs.toolbar?.hide) {
|
|
44
|
+
customProps['data-toolbar-wrap'] = true;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
// Show toolbar wrapper
|
|
48
|
+
if (!props?.editorConfigs?.toolbar?.hide) {
|
|
49
|
+
customProps['data-toolbar-wrap'] = true;
|
|
42
50
|
}
|
|
43
51
|
const style = composeAdvanceStyle(props.advanced, props.tag);
|
|
44
52
|
const advanced = props.advanced;
|
|
@@ -56,12 +64,18 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
56
64
|
uid: props.uid,
|
|
57
65
|
advanced: advanced
|
|
58
66
|
}),
|
|
59
|
-
/*#__PURE__*/
|
|
67
|
+
/*#__PURE__*/ jsxs(children.type, {
|
|
60
68
|
className: advanced?.cssClass,
|
|
61
69
|
...children.props,
|
|
62
70
|
style,
|
|
63
71
|
builderAttrs,
|
|
64
|
-
advanced
|
|
72
|
+
advanced,
|
|
73
|
+
children: [
|
|
74
|
+
children.props['children'],
|
|
75
|
+
/*#__PURE__*/ jsx(ComponentToolbarPreview, {
|
|
76
|
+
...props
|
|
77
|
+
})
|
|
78
|
+
]
|
|
65
79
|
})
|
|
66
80
|
]
|
|
67
81
|
});
|
|
@@ -73,11 +87,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
73
87
|
uid: props.uid,
|
|
74
88
|
advanced: advanced
|
|
75
89
|
}),
|
|
76
|
-
/*#__PURE__*/
|
|
90
|
+
/*#__PURE__*/ jsxs("div", {
|
|
77
91
|
style: style,
|
|
78
92
|
className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
|
|
79
93
|
...builderAttrs,
|
|
80
|
-
children:
|
|
94
|
+
children: [
|
|
95
|
+
children,
|
|
96
|
+
/*#__PURE__*/ jsx(ComponentToolbarPreview, {
|
|
97
|
+
...props
|
|
98
|
+
})
|
|
99
|
+
]
|
|
81
100
|
})
|
|
82
101
|
]
|
|
83
102
|
});
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
+
import 'react/jsx-runtime';
|
|
3
|
+
import 'zustand';
|
|
2
4
|
import 'swr';
|
|
5
|
+
import '@gem-sdk/adapter-shopify';
|
|
6
|
+
import 'swr/mutation';
|
|
7
|
+
import 'vanilla-lazyload';
|
|
8
|
+
import '../hooks/useCartUI.js';
|
|
3
9
|
import { RenderIf, template } from '../helpers/render.js';
|
|
4
10
|
import '../helpers/convert.js';
|
|
5
11
|
import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
|
|
@@ -388,6 +388,24 @@ const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
|
|
|
388
388
|
ROOT: cloneDeep(ROOT)
|
|
389
389
|
}
|
|
390
390
|
});
|
|
391
|
+
},
|
|
392
|
+
getParents: (id, limit)=>{
|
|
393
|
+
const state = get().state;
|
|
394
|
+
const parents = [];
|
|
395
|
+
let index = 0;
|
|
396
|
+
let currentId = id;
|
|
397
|
+
// eslint-disable-next-line no-constant-condition
|
|
398
|
+
while(true){
|
|
399
|
+
if (limit && index >= limit) break;
|
|
400
|
+
const parent = Object.entries(state).find(([, value])=>value.type !== 'section' && value.childrens?.includes(currentId));
|
|
401
|
+
if (!parent) break;
|
|
402
|
+
const [, parentItem] = parent;
|
|
403
|
+
if (!parentItem) break;
|
|
404
|
+
parents.push(parentItem);
|
|
405
|
+
currentId = parentItem.uid;
|
|
406
|
+
index++;
|
|
407
|
+
}
|
|
408
|
+
return parents;
|
|
391
409
|
}
|
|
392
410
|
}));
|
|
393
411
|
const BuilderPreviewProvider = ({ children, state, lazy, ...passProps })=>{
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Children } from 'react';
|
|
2
|
+
import { ComponentToolbarPreview } from '../components/ComponentToolbarPreview.js';
|
|
3
|
+
|
|
4
|
+
const filterToolbarPreview = (children, keep = false)=>{
|
|
5
|
+
const arrChild = Children.toArray(children);
|
|
6
|
+
return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview : child?.type == ComponentToolbarPreview);
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export { filterToolbarPreview as default, filterToolbarPreview };
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import { Children } from 'react';
|
|
1
|
+
import { Children, isValidElement } from 'react';
|
|
2
|
+
import { ComponentToolbarPreview } from '../components/ComponentToolbarPreview.js';
|
|
2
3
|
|
|
3
4
|
const isEmptyChildren = (children)=>{
|
|
4
|
-
|
|
5
|
+
let arrChild = Children.toArray(children);
|
|
6
|
+
arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview && isValidElement(child));
|
|
7
|
+
return Children.count(arrChild) < 1 || !children;
|
|
5
8
|
};
|
|
6
9
|
|
|
7
10
|
export { isEmptyChildren as default, isEmptyChildren };
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { useCallback, useEffect, useMemo } from 'react';
|
|
2
2
|
import { useProductStore } from '../contexts/ProductContext.js';
|
|
3
3
|
import { flattenConnection } from '../helpers/flatten-connection.js';
|
|
4
|
+
import 'react/jsx-runtime';
|
|
5
|
+
import 'zustand';
|
|
4
6
|
import 'swr';
|
|
7
|
+
import '@gem-sdk/adapter-shopify';
|
|
8
|
+
import 'swr/mutation';
|
|
9
|
+
import 'vanilla-lazyload';
|
|
10
|
+
import './useCartUI.js';
|
|
11
|
+
import { checkInStock } from '../helpers/variant.js';
|
|
5
12
|
import { getSelectedVariant } from '../helpers/product.js';
|
|
6
13
|
import '../helpers/convert.js';
|
|
7
|
-
import { checkInStock } from '../helpers/variant.js';
|
|
8
14
|
|
|
9
15
|
const useUniqProductID = ()=>{
|
|
10
16
|
return useProductStore((s)=>s.uiqueId);
|
package/dist/esm/index.js
CHANGED
|
@@ -30,6 +30,7 @@ export { default as globalEvent } from './helpers/GlobalEvent.js';
|
|
|
30
30
|
export { default as isBrowser } from './helpers/is-browser.js';
|
|
31
31
|
export { default as isSafari } from './helpers/is-safari.js';
|
|
32
32
|
export { isEmptyChildren } from './helpers/is-empty-children.js';
|
|
33
|
+
export { filterToolbarPreview } from './helpers/filter-toolbar-preview.js';
|
|
33
34
|
export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
|
|
34
35
|
export { normalizeBuilderData } from './helpers/normalize-builder-data.js';
|
|
35
36
|
export { prefetchQueries } from './helpers/prefetch-queries.js';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -7325,6 +7325,7 @@ type BuilderPreviewContextProps = {
|
|
|
7325
7325
|
removeItem: (id: string) => void;
|
|
7326
7326
|
forceChangeState: (data: BuilderState) => void;
|
|
7327
7327
|
initState: (data: BuilderEntityNested | BuilderEntityNested[]) => void;
|
|
7328
|
+
getParents: (id: string, limit?: number) => BuilderEntity[];
|
|
7328
7329
|
};
|
|
7329
7330
|
type BuilderPreviewProviderProps = Pick<BuilderPreviewContextProps, 'state'> & {
|
|
7330
7331
|
children: React.ReactNode;
|
|
@@ -7814,6 +7815,8 @@ declare function isSafari(): boolean;
|
|
|
7814
7815
|
|
|
7815
7816
|
declare const isEmptyChildren: (children: React.ReactNode) => boolean;
|
|
7816
7817
|
|
|
7818
|
+
declare const filterToolbarPreview: (children: React.ReactNode, keep?: boolean) => React.ReactNode;
|
|
7819
|
+
|
|
7817
7820
|
type ResponsiveKey<T extends ShortHandProperty> = `--${T}` | `--${T}-tablet` | `--${T}-mobile`;
|
|
7818
7821
|
declare const removeNullUndefined: <T extends Record<string, any>>(obj: T) => T;
|
|
7819
7822
|
declare const makeStyle: <T extends ShortHandProperty, K>(style: Record<T, K>) => {
|
|
@@ -9745,4 +9748,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
|
|
|
9745
9748
|
|
|
9746
9749
|
declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
|
|
9747
9750
|
|
|
9748
|
-
export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
|
|
9751
|
+
export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, filterToolbarPreview, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/core",
|
|
3
|
-
"version": "1.22.
|
|
3
|
+
"version": "1.22.31-new-feature.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"type-check": "yarn tsc --noEmit"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@gem-sdk/adapter-shopify": "1.
|
|
28
|
-
"@gem-sdk/styles": "1.22.
|
|
27
|
+
"@gem-sdk/adapter-shopify": "1.22.31-staging.0",
|
|
28
|
+
"@gem-sdk/styles": "1.22.31-new-feature.1"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"react-error-boundary": "4.0.10",
|