@gem-sdk/core 1.48.0-dev.72 → 1.48.0-dev.75
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/Render.liquid.js +5 -3
- package/dist/cjs/helpers/animations.js +6 -6
- package/dist/cjs/types/animations.js +2 -0
- package/dist/esm/components/Render.liquid.js +5 -3
- package/dist/esm/helpers/animations.js +6 -6
- package/dist/esm/types/animations.js +2 -0
- package/dist/types/index.d.ts +8 -5
- package/package.json +1 -1
|
@@ -219,7 +219,7 @@ const RenderCustomCode = (item)=>{
|
|
|
219
219
|
};
|
|
220
220
|
const appendAnimation = (props, liquid)=>{
|
|
221
221
|
const { advanced, tag } = props;
|
|
222
|
-
const { animation, op: opacity } = advanced ?? {};
|
|
222
|
+
const { animation, op: opacity, hasAnimationInteraction } = advanced ?? {};
|
|
223
223
|
const getAnimationType = (settings, type)=>{
|
|
224
224
|
return settings?.triggerConfig?.[type]?.animation ?? 'none';
|
|
225
225
|
};
|
|
@@ -233,7 +233,8 @@ const appendAnimation = (props, liquid)=>{
|
|
|
233
233
|
const hoverDesktop = getAnimationType(getSettingsByDevice('desktop'), 'hover');
|
|
234
234
|
const appearTablet = getAnimationType(getSettingsByDevice('tablet'), 'appear');
|
|
235
235
|
const appearMobile = getAnimationType(getSettingsByDevice('mobile'), 'appear');
|
|
236
|
-
const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
|
|
236
|
+
const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none' || !!hasAnimationInteraction;
|
|
237
|
+
const enableAnimationWhenInit = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
|
|
237
238
|
if (!enableAnimation) return liquid;
|
|
238
239
|
const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
|
|
239
240
|
'shake',
|
|
@@ -249,7 +250,8 @@ const appendAnimation = (props, liquid)=>{
|
|
|
249
250
|
gp-data='${JSON.stringify({
|
|
250
251
|
config: animation,
|
|
251
252
|
tag,
|
|
252
|
-
opacity
|
|
253
|
+
opacity,
|
|
254
|
+
notEnableAnimationWhenInit: !enableAnimationWhenInit
|
|
253
255
|
})}'
|
|
254
256
|
style="${{
|
|
255
257
|
display: 'contents'
|
|
@@ -46,7 +46,7 @@ const animations = ()=>{
|
|
|
46
46
|
});
|
|
47
47
|
return cloneOptions;
|
|
48
48
|
};
|
|
49
|
-
const slide = (target, options)=>{
|
|
49
|
+
const slide = (target, options, reverse)=>{
|
|
50
50
|
const normalizedOptions = normalizeOptions(options);
|
|
51
51
|
const { direction, distance } = normalizedOptions;
|
|
52
52
|
const coordinate = [
|
|
@@ -67,11 +67,11 @@ const animations = ()=>{
|
|
|
67
67
|
transform: `translate${coordinate}(0)`
|
|
68
68
|
}
|
|
69
69
|
];
|
|
70
|
-
return generateAnimationInstance(target, preset, {
|
|
70
|
+
return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
|
|
71
71
|
...generateOptions(normalizedOptions, 500)
|
|
72
72
|
});
|
|
73
73
|
};
|
|
74
|
-
const fade = (target, options)=>{
|
|
74
|
+
const fade = (target, options, reverse)=>{
|
|
75
75
|
const normalizedOptions = normalizeOptions(options);
|
|
76
76
|
const preset = [
|
|
77
77
|
{
|
|
@@ -81,7 +81,7 @@ const animations = ()=>{
|
|
|
81
81
|
opacity: 1
|
|
82
82
|
}
|
|
83
83
|
];
|
|
84
|
-
return generateAnimationInstance(target, preset, {
|
|
84
|
+
return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
|
|
85
85
|
...generateOptions(normalizedOptions, 500)
|
|
86
86
|
});
|
|
87
87
|
};
|
|
@@ -101,7 +101,7 @@ const animations = ()=>{
|
|
|
101
101
|
easing: EASING[easing ?? 'linear']
|
|
102
102
|
};
|
|
103
103
|
};
|
|
104
|
-
const zoom = (target, options)=>{
|
|
104
|
+
const zoom = (target, options, reverse)=>{
|
|
105
105
|
const normalizedOptions = normalizeOptions(options);
|
|
106
106
|
const { scale, zoomDirection, isFade } = normalizedOptions;
|
|
107
107
|
const [i1, i2] = scale.in;
|
|
@@ -127,7 +127,7 @@ const animations = ()=>{
|
|
|
127
127
|
}
|
|
128
128
|
];
|
|
129
129
|
const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
|
|
130
|
-
return generateAnimationInstance(target, zoomPreset, {
|
|
130
|
+
return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
|
|
131
131
|
...generateOptions(normalizedOptions, 700)
|
|
132
132
|
});
|
|
133
133
|
};
|
|
@@ -32,6 +32,8 @@ exports.AnimationTriggerType = void 0;
|
|
|
32
32
|
(function(AnimationTriggerType) {
|
|
33
33
|
AnimationTriggerType["Appear"] = 'appear';
|
|
34
34
|
AnimationTriggerType["Hover"] = 'hover';
|
|
35
|
+
AnimationTriggerType["Hidden"] = 'hidden';
|
|
36
|
+
AnimationTriggerType["AppearByTrigger"] = 'appearByTrigger';
|
|
35
37
|
})(exports.AnimationTriggerType || (exports.AnimationTriggerType = {}));
|
|
36
38
|
exports.AnimationZoomDirectionType = void 0;
|
|
37
39
|
(function(AnimationZoomDirectionType) {
|
|
@@ -215,7 +215,7 @@ const RenderCustomCode = (item)=>{
|
|
|
215
215
|
};
|
|
216
216
|
const appendAnimation = (props, liquid)=>{
|
|
217
217
|
const { advanced, tag } = props;
|
|
218
|
-
const { animation, op: opacity } = advanced ?? {};
|
|
218
|
+
const { animation, op: opacity, hasAnimationInteraction } = advanced ?? {};
|
|
219
219
|
const getAnimationType = (settings, type)=>{
|
|
220
220
|
return settings?.triggerConfig?.[type]?.animation ?? 'none';
|
|
221
221
|
};
|
|
@@ -229,7 +229,8 @@ const appendAnimation = (props, liquid)=>{
|
|
|
229
229
|
const hoverDesktop = getAnimationType(getSettingsByDevice('desktop'), 'hover');
|
|
230
230
|
const appearTablet = getAnimationType(getSettingsByDevice('tablet'), 'appear');
|
|
231
231
|
const appearMobile = getAnimationType(getSettingsByDevice('mobile'), 'appear');
|
|
232
|
-
const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
|
|
232
|
+
const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none' || !!hasAnimationInteraction;
|
|
233
|
+
const enableAnimationWhenInit = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
|
|
233
234
|
if (!enableAnimation) return liquid;
|
|
234
235
|
const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
|
|
235
236
|
'shake',
|
|
@@ -245,7 +246,8 @@ const appendAnimation = (props, liquid)=>{
|
|
|
245
246
|
gp-data='${JSON.stringify({
|
|
246
247
|
config: animation,
|
|
247
248
|
tag,
|
|
248
|
-
opacity
|
|
249
|
+
opacity,
|
|
250
|
+
notEnableAnimationWhenInit: !enableAnimationWhenInit
|
|
249
251
|
})}'
|
|
250
252
|
style="${{
|
|
251
253
|
display: 'contents'
|
|
@@ -44,7 +44,7 @@ const animations = ()=>{
|
|
|
44
44
|
});
|
|
45
45
|
return cloneOptions;
|
|
46
46
|
};
|
|
47
|
-
const slide = (target, options)=>{
|
|
47
|
+
const slide = (target, options, reverse)=>{
|
|
48
48
|
const normalizedOptions = normalizeOptions(options);
|
|
49
49
|
const { direction, distance } = normalizedOptions;
|
|
50
50
|
const coordinate = [
|
|
@@ -65,11 +65,11 @@ const animations = ()=>{
|
|
|
65
65
|
transform: `translate${coordinate}(0)`
|
|
66
66
|
}
|
|
67
67
|
];
|
|
68
|
-
return generateAnimationInstance(target, preset, {
|
|
68
|
+
return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
|
|
69
69
|
...generateOptions(normalizedOptions, 500)
|
|
70
70
|
});
|
|
71
71
|
};
|
|
72
|
-
const fade = (target, options)=>{
|
|
72
|
+
const fade = (target, options, reverse)=>{
|
|
73
73
|
const normalizedOptions = normalizeOptions(options);
|
|
74
74
|
const preset = [
|
|
75
75
|
{
|
|
@@ -79,7 +79,7 @@ const animations = ()=>{
|
|
|
79
79
|
opacity: 1
|
|
80
80
|
}
|
|
81
81
|
];
|
|
82
|
-
return generateAnimationInstance(target, preset, {
|
|
82
|
+
return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
|
|
83
83
|
...generateOptions(normalizedOptions, 500)
|
|
84
84
|
});
|
|
85
85
|
};
|
|
@@ -99,7 +99,7 @@ const animations = ()=>{
|
|
|
99
99
|
easing: EASING[easing ?? 'linear']
|
|
100
100
|
};
|
|
101
101
|
};
|
|
102
|
-
const zoom = (target, options)=>{
|
|
102
|
+
const zoom = (target, options, reverse)=>{
|
|
103
103
|
const normalizedOptions = normalizeOptions(options);
|
|
104
104
|
const { scale, zoomDirection, isFade } = normalizedOptions;
|
|
105
105
|
const [i1, i2] = scale.in;
|
|
@@ -125,7 +125,7 @@ const animations = ()=>{
|
|
|
125
125
|
}
|
|
126
126
|
];
|
|
127
127
|
const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
|
|
128
|
-
return generateAnimationInstance(target, zoomPreset, {
|
|
128
|
+
return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
|
|
129
129
|
...generateOptions(normalizedOptions, 700)
|
|
130
130
|
});
|
|
131
131
|
};
|
|
@@ -30,6 +30,8 @@ var AnimationTriggerType;
|
|
|
30
30
|
(function(AnimationTriggerType) {
|
|
31
31
|
AnimationTriggerType["Appear"] = 'appear';
|
|
32
32
|
AnimationTriggerType["Hover"] = 'hover';
|
|
33
|
+
AnimationTriggerType["Hidden"] = 'hidden';
|
|
34
|
+
AnimationTriggerType["AppearByTrigger"] = 'appearByTrigger';
|
|
33
35
|
})(AnimationTriggerType || (AnimationTriggerType = {}));
|
|
34
36
|
var AnimationZoomDirectionType;
|
|
35
37
|
(function(AnimationZoomDirectionType) {
|
package/dist/types/index.d.ts
CHANGED
|
@@ -8187,6 +8187,7 @@ type SettingUIControl = {
|
|
|
8187
8187
|
};
|
|
8188
8188
|
searchKeyword?: string;
|
|
8189
8189
|
tabs?: SettingUITab[];
|
|
8190
|
+
info?: LabelWithLang;
|
|
8190
8191
|
} & SettingUICompo;
|
|
8191
8192
|
type SettingUICompo = {
|
|
8192
8193
|
controls?: SettingUIControl[];
|
|
@@ -28770,10 +28771,12 @@ declare enum AnimationDirectionType {
|
|
|
28770
28771
|
Up = "up",
|
|
28771
28772
|
Down = "down"
|
|
28772
28773
|
}
|
|
28773
|
-
type AnimationTrigger = 'appear' | 'hover';
|
|
28774
|
+
type AnimationTrigger = 'appear' | 'hover' | "hidden" | 'appearByTrigger';
|
|
28774
28775
|
declare enum AnimationTriggerType {
|
|
28775
28776
|
Appear = "appear",
|
|
28776
|
-
Hover = "hover"
|
|
28777
|
+
Hover = "hover",
|
|
28778
|
+
Hidden = "hidden",
|
|
28779
|
+
AppearByTrigger = "appearByTrigger"
|
|
28777
28780
|
}
|
|
28778
28781
|
declare enum AnimationZoomDirectionType {
|
|
28779
28782
|
In = "in",
|
|
@@ -29558,10 +29561,10 @@ type ClassDictionary = Record<string, boolean | undefined | null>;
|
|
|
29558
29561
|
declare function cls(...classes: ClassValue[]): string;
|
|
29559
29562
|
|
|
29560
29563
|
declare const animations: () => {
|
|
29561
|
-
zoom: (target: Element, options: AnimationSettingType) => Animation;
|
|
29564
|
+
zoom: (target: Element, options: AnimationSettingType, reverse?: boolean) => Animation;
|
|
29562
29565
|
shake: (target: Element, options: AnimationSettingType) => Animation;
|
|
29563
|
-
fade: (target: Element, options: AnimationSettingType) => Animation;
|
|
29564
|
-
slide: (target: Element, options: AnimationSettingType) => Animation;
|
|
29566
|
+
fade: (target: Element, options: AnimationSettingType, reverse?: boolean) => Animation;
|
|
29567
|
+
slide: (target: Element, options: AnimationSettingType, reverse?: boolean) => Animation;
|
|
29565
29568
|
};
|
|
29566
29569
|
|
|
29567
29570
|
declare const filterToolbarPreview: (children: React.ReactNode, keep?: boolean) => React.ReactNode;
|