@gem-sdk/core 1.22.31-new-feature.17 → 1.22.31-new-feature.18
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 +4 -18
- package/dist/cjs/components/resize/Resize.js +16 -0
- package/dist/cjs/components/resize/Spacing.js +124 -0
- package/dist/esm/components/ComponentToolbarPreview.js +4 -18
- package/dist/esm/components/resize/Resize.js +12 -0
- package/dist/esm/components/resize/Spacing.js +120 -0
- package/package.json +2 -2
|
@@ -13,6 +13,7 @@ require('../hooks/useCartUI.js');
|
|
|
13
13
|
var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
|
|
14
14
|
var Tooltip = require('./toolbar/Tooltip.js');
|
|
15
15
|
var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
|
|
16
|
+
var Resize = require('./resize/Resize.js');
|
|
16
17
|
require('../helpers/convert.js');
|
|
17
18
|
|
|
18
19
|
const SECTION_LIMIT = 25;
|
|
@@ -217,7 +218,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
217
218
|
}),
|
|
218
219
|
props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
219
220
|
"data-toolbar-name": true,
|
|
220
|
-
children: isThemeSection ? props.
|
|
221
|
+
children: isThemeSection ? props.customLabel || props.label : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
|
|
221
222
|
}) : /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
222
223
|
"data-toolbar-name": true,
|
|
223
224
|
children: props.customLabel || props.label
|
|
@@ -401,23 +402,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
401
402
|
})
|
|
402
403
|
]
|
|
403
404
|
}),
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
"data-spacing-theme-section": isThemeSectionEditor,
|
|
407
|
-
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
408
|
-
"data-spacing-margin-bottom": true,
|
|
409
|
-
children: [
|
|
410
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
411
|
-
"data-spacing-margin-bottom-bg": true,
|
|
412
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
413
|
-
"data-spacing-margin-bottom-value": true
|
|
414
|
-
})
|
|
415
|
-
}),
|
|
416
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
417
|
-
"data-spacing-margin-bottom-drag": true
|
|
418
|
-
})
|
|
419
|
-
]
|
|
420
|
-
})
|
|
405
|
+
/*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
|
|
406
|
+
...props
|
|
421
407
|
})
|
|
422
408
|
]
|
|
423
409
|
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var Spacing = require('./Spacing.js');
|
|
7
|
+
|
|
8
|
+
function Resize(props) {
|
|
9
|
+
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
10
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
|
|
11
|
+
...props
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
exports.default = Resize;
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
require('zustand');
|
|
8
|
+
var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
|
|
9
|
+
require('swr');
|
|
10
|
+
require('@gem-sdk/adapter-shopify');
|
|
11
|
+
require('swr/mutation');
|
|
12
|
+
require('vanilla-lazyload');
|
|
13
|
+
require('../../hooks/useCartUI.js');
|
|
14
|
+
require('react-transition-group');
|
|
15
|
+
require('@gem-sdk/core');
|
|
16
|
+
require('../../helpers/convert.js');
|
|
17
|
+
|
|
18
|
+
function Spacing(props) {
|
|
19
|
+
const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
20
|
+
const $bottomDrag = react.useRef(null);
|
|
21
|
+
const $bottomBg = react.useRef(null);
|
|
22
|
+
const delayMouseMove = react.useRef(null);
|
|
23
|
+
const isDragging = react.useRef(false);
|
|
24
|
+
const startY = react.useRef(0);
|
|
25
|
+
const marginBottom = react.useRef(0);
|
|
26
|
+
const getNewValueMargin = (event)=>{
|
|
27
|
+
const top = event.clientY;
|
|
28
|
+
const diffY = Math.ceil(top - startY.current);
|
|
29
|
+
const currentValue = marginBottom.current || 0;
|
|
30
|
+
const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
|
|
31
|
+
return {
|
|
32
|
+
newValue
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
const onMouseMoveDocument = (event)=>{
|
|
36
|
+
if ($bottomDrag.current && $bottomBg.current) {
|
|
37
|
+
// $bottomDrag.current.
|
|
38
|
+
const { newValue } = getNewValueMargin(event);
|
|
39
|
+
$bottomBg.current.style.height = newValue;
|
|
40
|
+
$bottomDrag.current.style.top = newValue;
|
|
41
|
+
const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
|
|
42
|
+
if ($component) {
|
|
43
|
+
$component.style.marginBottom = newValue;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
const onMouseUpDocument = ()=>{
|
|
48
|
+
endDrag();
|
|
49
|
+
};
|
|
50
|
+
const startDrag = ()=>{
|
|
51
|
+
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
52
|
+
delayMouseMove.current = setTimeout(()=>{
|
|
53
|
+
isDragging.current = true;
|
|
54
|
+
document.addEventListener('mousemove', onMouseMoveDocument);
|
|
55
|
+
document.addEventListener('mouseup', onMouseUpDocument);
|
|
56
|
+
}, 100);
|
|
57
|
+
};
|
|
58
|
+
const endDrag = ()=>{
|
|
59
|
+
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
60
|
+
isDragging.current = false;
|
|
61
|
+
if ($bottomDrag.current) {
|
|
62
|
+
const style = getComputedStyle($bottomDrag.current);
|
|
63
|
+
const marginBottom = style.top;
|
|
64
|
+
const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
|
|
65
|
+
bubbles: true,
|
|
66
|
+
detail: {
|
|
67
|
+
componentUid: props.uid,
|
|
68
|
+
marginBottom
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
window.dispatchEvent(event);
|
|
72
|
+
}
|
|
73
|
+
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
74
|
+
if ($component) {
|
|
75
|
+
$component.style.marginBottom = '';
|
|
76
|
+
}
|
|
77
|
+
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
78
|
+
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
79
|
+
};
|
|
80
|
+
const onMouseDown = (event)=>{
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
event.stopPropagation();
|
|
83
|
+
if ($bottomDrag.current) {
|
|
84
|
+
const style = getComputedStyle($bottomDrag.current);
|
|
85
|
+
startY.current = event.clientY;
|
|
86
|
+
marginBottom.current = parseFloat(style.top);
|
|
87
|
+
startDrag();
|
|
88
|
+
}
|
|
89
|
+
return false;
|
|
90
|
+
};
|
|
91
|
+
const onMouseUp = (event)=>{
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
event.stopPropagation();
|
|
94
|
+
endDrag();
|
|
95
|
+
return false;
|
|
96
|
+
};
|
|
97
|
+
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
98
|
+
children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
99
|
+
"data-spacing": true,
|
|
100
|
+
"data-spacing-theme-section": isThemeSectionEditor,
|
|
101
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
102
|
+
"data-spacing-margin-bottom": true,
|
|
103
|
+
children: [
|
|
104
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
105
|
+
"data-spacing-margin-bottom-bg": true,
|
|
106
|
+
ref: $bottomBg,
|
|
107
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
108
|
+
"data-spacing-margin-bottom-value": true
|
|
109
|
+
})
|
|
110
|
+
}),
|
|
111
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
112
|
+
ref: $bottomDrag,
|
|
113
|
+
"data-spacing-margin-bottom-drag": true,
|
|
114
|
+
onMouseDown: onMouseDown,
|
|
115
|
+
onMouseUp: onMouseUp,
|
|
116
|
+
role: "presentation"
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
})
|
|
120
|
+
})
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
exports.default = Spacing;
|
|
@@ -11,6 +11,7 @@ import '../hooks/useCartUI.js';
|
|
|
11
11
|
import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
|
|
12
12
|
import Tooltip from './toolbar/Tooltip.js';
|
|
13
13
|
import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
|
|
14
|
+
import Resize from './resize/Resize.js';
|
|
14
15
|
import '../helpers/convert.js';
|
|
15
16
|
|
|
16
17
|
const SECTION_LIMIT = 25;
|
|
@@ -215,7 +216,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
215
216
|
}),
|
|
216
217
|
props.tag == 'Section' ? /*#__PURE__*/ jsx("div", {
|
|
217
218
|
"data-toolbar-name": true,
|
|
218
|
-
children: isThemeSection ? props.
|
|
219
|
+
children: isThemeSection ? props.customLabel || props.label : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
|
|
219
220
|
}) : /*#__PURE__*/ jsx("div", {
|
|
220
221
|
"data-toolbar-name": true,
|
|
221
222
|
children: props.customLabel || props.label
|
|
@@ -399,23 +400,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
399
400
|
})
|
|
400
401
|
]
|
|
401
402
|
}),
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
"data-spacing-theme-section": isThemeSectionEditor,
|
|
405
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
406
|
-
"data-spacing-margin-bottom": true,
|
|
407
|
-
children: [
|
|
408
|
-
/*#__PURE__*/ jsx("div", {
|
|
409
|
-
"data-spacing-margin-bottom-bg": true,
|
|
410
|
-
children: /*#__PURE__*/ jsx("div", {
|
|
411
|
-
"data-spacing-margin-bottom-value": true
|
|
412
|
-
})
|
|
413
|
-
}),
|
|
414
|
-
/*#__PURE__*/ jsx("div", {
|
|
415
|
-
"data-spacing-margin-bottom-drag": true
|
|
416
|
-
})
|
|
417
|
-
]
|
|
418
|
-
})
|
|
403
|
+
/*#__PURE__*/ jsx(Resize, {
|
|
404
|
+
...props
|
|
419
405
|
})
|
|
420
406
|
]
|
|
421
407
|
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import Spacing from './Spacing.js';
|
|
3
|
+
|
|
4
|
+
function Resize(props) {
|
|
5
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
6
|
+
children: /*#__PURE__*/ jsx(Spacing, {
|
|
7
|
+
...props
|
|
8
|
+
})
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { Resize as default };
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef } 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 'react-transition-group';
|
|
11
|
+
import '@gem-sdk/core';
|
|
12
|
+
import '../../helpers/convert.js';
|
|
13
|
+
|
|
14
|
+
function Spacing(props) {
|
|
15
|
+
const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
16
|
+
const $bottomDrag = useRef(null);
|
|
17
|
+
const $bottomBg = useRef(null);
|
|
18
|
+
const delayMouseMove = useRef(null);
|
|
19
|
+
const isDragging = useRef(false);
|
|
20
|
+
const startY = useRef(0);
|
|
21
|
+
const marginBottom = useRef(0);
|
|
22
|
+
const getNewValueMargin = (event)=>{
|
|
23
|
+
const top = event.clientY;
|
|
24
|
+
const diffY = Math.ceil(top - startY.current);
|
|
25
|
+
const currentValue = marginBottom.current || 0;
|
|
26
|
+
const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
|
|
27
|
+
return {
|
|
28
|
+
newValue
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
const onMouseMoveDocument = (event)=>{
|
|
32
|
+
if ($bottomDrag.current && $bottomBg.current) {
|
|
33
|
+
// $bottomDrag.current.
|
|
34
|
+
const { newValue } = getNewValueMargin(event);
|
|
35
|
+
$bottomBg.current.style.height = newValue;
|
|
36
|
+
$bottomDrag.current.style.top = newValue;
|
|
37
|
+
const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
|
|
38
|
+
if ($component) {
|
|
39
|
+
$component.style.marginBottom = newValue;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const onMouseUpDocument = ()=>{
|
|
44
|
+
endDrag();
|
|
45
|
+
};
|
|
46
|
+
const startDrag = ()=>{
|
|
47
|
+
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
48
|
+
delayMouseMove.current = setTimeout(()=>{
|
|
49
|
+
isDragging.current = true;
|
|
50
|
+
document.addEventListener('mousemove', onMouseMoveDocument);
|
|
51
|
+
document.addEventListener('mouseup', onMouseUpDocument);
|
|
52
|
+
}, 100);
|
|
53
|
+
};
|
|
54
|
+
const endDrag = ()=>{
|
|
55
|
+
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
56
|
+
isDragging.current = false;
|
|
57
|
+
if ($bottomDrag.current) {
|
|
58
|
+
const style = getComputedStyle($bottomDrag.current);
|
|
59
|
+
const marginBottom = style.top;
|
|
60
|
+
const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
|
|
61
|
+
bubbles: true,
|
|
62
|
+
detail: {
|
|
63
|
+
componentUid: props.uid,
|
|
64
|
+
marginBottom
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
window.dispatchEvent(event);
|
|
68
|
+
}
|
|
69
|
+
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
70
|
+
if ($component) {
|
|
71
|
+
$component.style.marginBottom = '';
|
|
72
|
+
}
|
|
73
|
+
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
74
|
+
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
75
|
+
};
|
|
76
|
+
const onMouseDown = (event)=>{
|
|
77
|
+
event.preventDefault();
|
|
78
|
+
event.stopPropagation();
|
|
79
|
+
if ($bottomDrag.current) {
|
|
80
|
+
const style = getComputedStyle($bottomDrag.current);
|
|
81
|
+
startY.current = event.clientY;
|
|
82
|
+
marginBottom.current = parseFloat(style.top);
|
|
83
|
+
startDrag();
|
|
84
|
+
}
|
|
85
|
+
return false;
|
|
86
|
+
};
|
|
87
|
+
const onMouseUp = (event)=>{
|
|
88
|
+
event.preventDefault();
|
|
89
|
+
event.stopPropagation();
|
|
90
|
+
endDrag();
|
|
91
|
+
return false;
|
|
92
|
+
};
|
|
93
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
94
|
+
children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
|
|
95
|
+
"data-spacing": true,
|
|
96
|
+
"data-spacing-theme-section": isThemeSectionEditor,
|
|
97
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
98
|
+
"data-spacing-margin-bottom": true,
|
|
99
|
+
children: [
|
|
100
|
+
/*#__PURE__*/ jsx("div", {
|
|
101
|
+
"data-spacing-margin-bottom-bg": true,
|
|
102
|
+
ref: $bottomBg,
|
|
103
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
104
|
+
"data-spacing-margin-bottom-value": true
|
|
105
|
+
})
|
|
106
|
+
}),
|
|
107
|
+
/*#__PURE__*/ jsx("div", {
|
|
108
|
+
ref: $bottomDrag,
|
|
109
|
+
"data-spacing-margin-bottom-drag": true,
|
|
110
|
+
onMouseDown: onMouseDown,
|
|
111
|
+
onMouseUp: onMouseUp,
|
|
112
|
+
role: "presentation"
|
|
113
|
+
})
|
|
114
|
+
]
|
|
115
|
+
})
|
|
116
|
+
})
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export { Spacing as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/core",
|
|
3
|
-
"version": "1.22.31-new-feature.
|
|
3
|
+
"version": "1.22.31-new-feature.18",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@gem-sdk/adapter-shopify": "1.22.31-staging.0",
|
|
28
|
-
"@gem-sdk/styles": "1.22.31-new-feature.
|
|
28
|
+
"@gem-sdk/styles": "1.22.31-new-feature.18"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"react-error-boundary": "4.0.10",
|