@gem-sdk/core 1.56.2 → 1.57.0-dev.45
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 +181 -107
- package/dist/cjs/components/ComponentWrapper.js +16 -1
- package/dist/cjs/components/ComponentWrapperPreview.js +16 -2
- package/dist/cjs/components/InteractionSuffix.js +42 -0
- package/dist/cjs/components/Render.liquid.js +22 -7
- package/dist/cjs/contexts/PageContext.js +42 -1
- package/dist/cjs/contexts/ProductContext.js +10 -0
- package/dist/cjs/graphql/fragments/published-theme-page.generated.js +4 -0
- package/dist/cjs/helpers/animations.js +17 -8
- package/dist/cjs/helpers/background.js +10 -5
- package/dist/cjs/helpers/compose-advance-style.js +30 -4
- package/dist/cjs/helpers/interaction/index.js +110 -0
- package/dist/cjs/helpers/radius.js +11 -1
- package/dist/cjs/helpers/shadow.js +5 -4
- package/dist/cjs/helpers/third-party/appConfig.js +49 -0
- package/dist/cjs/helpers/third-party/appSetting.js +116 -1
- package/dist/cjs/helpers/third-party/constant.js +8 -1
- package/dist/cjs/helpers/third-party/getAppBlockConfig.js +8 -1
- package/dist/cjs/hooks/animation/useAnimationConfig.js +2 -1
- package/dist/cjs/hooks/animation/useAnimationTarget.js +5 -2
- package/dist/cjs/hooks/animation/useApplyAnimation.js +6 -4
- package/dist/cjs/hooks/useInteraction.js +19 -0
- package/dist/cjs/hooks/useToolbarPostPurchase.js +2 -2
- package/dist/cjs/index.js +14 -1
- package/dist/cjs/types/animations.js +2 -0
- package/dist/cjs/types/custom.js +52 -0
- package/dist/esm/components/ComponentToolbarPreview.js +181 -107
- package/dist/esm/components/ComponentWrapper.js +16 -1
- package/dist/esm/components/ComponentWrapperPreview.js +16 -2
- package/dist/esm/components/InteractionSuffix.js +40 -0
- package/dist/esm/components/Render.liquid.js +22 -7
- package/dist/esm/contexts/PageContext.js +42 -1
- package/dist/esm/contexts/ProductContext.js +10 -0
- package/dist/esm/graphql/fragments/published-theme-page.generated.js +4 -0
- package/dist/esm/helpers/animations.js +17 -8
- package/dist/esm/helpers/background.js +10 -5
- package/dist/esm/helpers/compose-advance-style.js +31 -5
- package/dist/esm/helpers/interaction/index.js +108 -0
- package/dist/esm/helpers/radius.js +11 -1
- package/dist/esm/helpers/shadow.js +5 -4
- package/dist/esm/helpers/third-party/appConfig.js +43 -1
- package/dist/esm/helpers/third-party/appSetting.js +116 -1
- package/dist/esm/helpers/third-party/constant.js +9 -2
- package/dist/esm/helpers/third-party/getAppBlockConfig.js +8 -1
- package/dist/esm/hooks/animation/useAnimationConfig.js +2 -1
- package/dist/esm/hooks/animation/useAnimationTarget.js +5 -2
- package/dist/esm/hooks/animation/useApplyAnimation.js +6 -4
- package/dist/esm/hooks/useInteraction.js +17 -0
- package/dist/esm/hooks/useToolbarPostPurchase.js +2 -2
- package/dist/esm/index.js +4 -1
- package/dist/esm/types/animations.js +2 -0
- package/dist/esm/types/custom.js +52 -0
- package/dist/types/index.d.ts +547 -184
- package/package.json +3 -3
|
@@ -25,7 +25,14 @@ const mapShopifyAppMeta = {
|
|
|
25
25
|
...appConfig.WhatmoreShoppableVideosreelConfig,
|
|
26
26
|
...appConfig.ProductOptionsCustomizerConfig,
|
|
27
27
|
...appConfig.AppointmentBookingCowlendarConfig,
|
|
28
|
-
...appConfig.BoldSubscriptionsConfig
|
|
28
|
+
...appConfig.BoldSubscriptionsConfig,
|
|
29
|
+
...appConfig.SproutPlantTreesGrowSalesConfig,
|
|
30
|
+
...appConfig.InstasellShoppableInstagramConfig,
|
|
31
|
+
...appConfig.GrowaveConfig,
|
|
32
|
+
...appConfig.KachingBundlesConfig,
|
|
33
|
+
...appConfig.LoloyalLoyaltyReferralsConfig,
|
|
34
|
+
...appConfig.PowerfulContactFormBuilderConfig,
|
|
35
|
+
...appConfig.WishlistKingConfig
|
|
29
36
|
};
|
|
30
37
|
const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
|
|
31
38
|
|
|
@@ -3,10 +3,17 @@
|
|
|
3
3
|
var appSetting = require('./appSetting.js');
|
|
4
4
|
var getAppBlockType = require('./getAppBlockType.js');
|
|
5
5
|
|
|
6
|
+
const listAppUpdateNewVersion = [
|
|
7
|
+
'Growave'
|
|
8
|
+
];
|
|
6
9
|
const getAppBlockConfig = (tag, appBlockId, settings)=>{
|
|
10
|
+
let widgetType = settings?.widgetType;
|
|
11
|
+
if (listAppUpdateNewVersion.includes(tag)) {
|
|
12
|
+
widgetType = settings?.widgetTypeV2;
|
|
13
|
+
}
|
|
7
14
|
const appBlockType = getAppBlockType.getAppBlockType({
|
|
8
15
|
tag,
|
|
9
|
-
widgetType
|
|
16
|
+
widgetType
|
|
10
17
|
});
|
|
11
18
|
const settingByWidget = appSetting.composeSettingsByWidgetType[tag][settings?.widgetType];
|
|
12
19
|
const appSettings = appSetting.overrideSettings(tag, settingByWidget, settings);
|
|
@@ -98,9 +98,12 @@ const useAnimationTarget = (props)=>{
|
|
|
98
98
|
const initListOfTargets = react.useCallback(()=>{
|
|
99
99
|
if (!isEnabledAnimation) return;
|
|
100
100
|
if (!targets.current) {
|
|
101
|
-
|
|
101
|
+
const $storefront = document.body.querySelector('#storefront');
|
|
102
|
+
if ($storefront) {
|
|
103
|
+
targets.current = $storefront.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
104
|
+
}
|
|
102
105
|
}
|
|
103
|
-
const targetsArray = Array.from(targets.current);
|
|
106
|
+
const targetsArray = Array.from(targets.current || []);
|
|
104
107
|
if (!targetsArray.length) return;
|
|
105
108
|
const updatedTargetObjects = getUpdatedTargetObjects(targetsArray);
|
|
106
109
|
targetObjects.current = updatedTargetObjects;
|
|
@@ -8,6 +8,7 @@ var useAnimationTarget = require('./useAnimationTarget.js');
|
|
|
8
8
|
var useAnimationConfig = require('./useAnimationConfig.js');
|
|
9
9
|
var useAnimationActions = require('./useAnimationActions.js');
|
|
10
10
|
var useAnimationPreview = require('./useAnimationPreview.js');
|
|
11
|
+
require('../../types/custom.js');
|
|
11
12
|
var animations = require('../../types/animations.js');
|
|
12
13
|
|
|
13
14
|
const useApplyAnimation = ({ props })=>{
|
|
@@ -24,13 +25,13 @@ const useApplyAnimation = ({ props })=>{
|
|
|
24
25
|
setAnimationOnFinish,
|
|
25
26
|
setToolbarActive
|
|
26
27
|
});
|
|
27
|
-
const generateAnimation = react.useCallback(({ target, setting, type })=>{
|
|
28
|
-
return animation[type](target, setting);
|
|
28
|
+
const generateAnimation = react.useCallback(({ target, setting, type, reverse })=>{
|
|
29
|
+
return animation[type](target, setting, reverse);
|
|
29
30
|
}, [
|
|
30
31
|
animation
|
|
31
32
|
]);
|
|
32
33
|
const initListAnimations = react.useCallback(()=>{
|
|
33
|
-
const { type, setting } = getAnimationConfig();
|
|
34
|
+
const { type, setting, reverse } = getAnimationConfig();
|
|
34
35
|
if (!type || type === animations.AnimationType.None || !targetObjects.current.length) {
|
|
35
36
|
cancelAnimation();
|
|
36
37
|
return;
|
|
@@ -38,7 +39,8 @@ const useApplyAnimation = ({ props })=>{
|
|
|
38
39
|
const listAnimations = targetObjects.current.map((item)=>generateAnimation({
|
|
39
40
|
type,
|
|
40
41
|
setting,
|
|
41
|
-
target: item.target
|
|
42
|
+
target: item.target,
|
|
43
|
+
reverse
|
|
42
44
|
}));
|
|
43
45
|
cancelAnimation();
|
|
44
46
|
setAnimation(listAnimations);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var PageContext = require('../contexts/PageContext.js');
|
|
4
|
+
|
|
5
|
+
const useInteraction = ()=>{
|
|
6
|
+
const interactionData = PageContext.usePageStore((state)=>state.interactionData);
|
|
7
|
+
const { item } = interactionData || {};
|
|
8
|
+
const getAnimationByUid = (uid)=>{
|
|
9
|
+
const targets = item?.targets;
|
|
10
|
+
const targetByUid = targets?.find((target)=>target.uid === uid);
|
|
11
|
+
const metaDataContainsAnimation = targetByUid?.events?.find((it)=>it.condition?.metaData?.animation);
|
|
12
|
+
return metaDataContainsAnimation?.condition?.metaData?.animation;
|
|
13
|
+
};
|
|
14
|
+
return {
|
|
15
|
+
getAnimationByUid
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
exports.useInteraction = useInteraction;
|
|
@@ -31,7 +31,7 @@ const usePostPurchase = (uid, tag)=>{
|
|
|
31
31
|
return count <= 1;
|
|
32
32
|
};
|
|
33
33
|
const verifyWrapContainsRequireElement = ()=>{
|
|
34
|
-
const $component = document.querySelector(`[data-uid="${uid}"]`);
|
|
34
|
+
const $component = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${uid}"]`);
|
|
35
35
|
if (!$component) return false;
|
|
36
36
|
for (const requiredElementTag of constant.postPurchaseRequiredElements){
|
|
37
37
|
const countElementInsidePage = getElementCountInPage(requiredElementTag);
|
|
@@ -44,7 +44,7 @@ const usePostPurchase = (uid, tag)=>{
|
|
|
44
44
|
};
|
|
45
45
|
const countRequiredElement = ()=>{
|
|
46
46
|
return constant.postPurchaseRequiredElements.reduce((acc, requiredElementTag)=>{
|
|
47
|
-
const $component = document.querySelector(`[data-uid="${uid}"]`);
|
|
47
|
+
const $component = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${uid}"]`);
|
|
48
48
|
if (!$component) return 0;
|
|
49
49
|
const count = $component.querySelectorAll(`[data-component-tag="${requiredElementTag}"]`).length;
|
|
50
50
|
return acc + count;
|
package/dist/cjs/index.js
CHANGED
|
@@ -62,6 +62,7 @@ var isDefined = require('./helpers/is-defined.js');
|
|
|
62
62
|
var layout = require('./helpers/layout.js');
|
|
63
63
|
var makeStyle = require('./helpers/make-style.js');
|
|
64
64
|
var align = require('./helpers/align.js');
|
|
65
|
+
var variant = require('./helpers/variant.js');
|
|
65
66
|
var product = require('./helpers/product.js');
|
|
66
67
|
var query = require('./helpers/query.js');
|
|
67
68
|
var radius = require('./helpers/radius.js');
|
|
@@ -99,6 +100,7 @@ var useProductList = require('./hooks/useProductList.js');
|
|
|
99
100
|
var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
|
|
100
101
|
var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
|
|
101
102
|
var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
|
|
103
|
+
var custom = require('./types/custom.js');
|
|
102
104
|
var shop$1 = require('./types/shop.js');
|
|
103
105
|
var appAPI = require('./types/appAPI.js');
|
|
104
106
|
var globalStyle = require('./types/global-style.js');
|
|
@@ -108,6 +110,7 @@ var getProduct = require('./helpers/queries/get-product.js');
|
|
|
108
110
|
var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
|
|
109
111
|
var getAppBlocks = require('./helpers/third-party/getAppBlocks.js');
|
|
110
112
|
var addAppBlockId = require('./helpers/third-party/addAppBlockId.js');
|
|
113
|
+
var index = require('./helpers/interaction/index.js');
|
|
111
114
|
|
|
112
115
|
|
|
113
116
|
|
|
@@ -247,6 +250,7 @@ exports.makeStyleState = makeStyle.makeStyleState;
|
|
|
247
250
|
exports.makeWidth = makeStyle.makeWidth;
|
|
248
251
|
exports.removeNullUndefined = makeStyle.removeNullUndefined;
|
|
249
252
|
exports.convertTextAlignToJustify = align.convertTextAlignToJustify;
|
|
253
|
+
exports.checkInStock = variant.checkInStock;
|
|
250
254
|
exports.checkAvailableVariantInStock = product.checkAvailableVariantInStock;
|
|
251
255
|
exports.getSelectedVariant = product.getSelectedVariant;
|
|
252
256
|
exports.parseSelectedOption = product.parseSelectedOption;
|
|
@@ -268,7 +272,7 @@ exports.removeUndefinedValuesFromObject = render.removeUndefinedValuesFromObject
|
|
|
268
272
|
exports.styles = render.styles;
|
|
269
273
|
exports.template = render.template;
|
|
270
274
|
exports.composeShadowCss = shadow.composeShadowCss;
|
|
271
|
-
exports.
|
|
275
|
+
exports.getResponsiveStyleShadow = shadow.getResponsiveStyleShadow;
|
|
272
276
|
exports.getStyleShadow = shadow.getStyleShadow;
|
|
273
277
|
exports.getStyleShadowState = shadow.getStyleShadowState;
|
|
274
278
|
exports.parseValueWithUnit = shadow.parseValueWithUnit;
|
|
@@ -362,6 +366,14 @@ exports.useProductListStyles = useProductList.useProductListStyles;
|
|
|
362
366
|
exports.useSuspenseFetch = useSuspenseFetch.default;
|
|
363
367
|
exports.useSwatchesOptions = useSwatchesOptions.default;
|
|
364
368
|
exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
|
|
369
|
+
Object.defineProperty(exports, 'InteractionTargetEvent', {
|
|
370
|
+
enumerable: true,
|
|
371
|
+
get: function () { return custom.InteractionTargetEvent; }
|
|
372
|
+
});
|
|
373
|
+
Object.defineProperty(exports, 'InteractionTriggerEvent', {
|
|
374
|
+
enumerable: true,
|
|
375
|
+
get: function () { return custom.InteractionTriggerEvent; }
|
|
376
|
+
});
|
|
365
377
|
exports.ShopType = shop$1;
|
|
366
378
|
exports.AppAPIType = appAPI;
|
|
367
379
|
exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
|
|
@@ -398,3 +410,4 @@ exports.getProduct = getProduct.getProduct;
|
|
|
398
410
|
exports.getProductBySlug = getProductBySlug.getProductBySlug;
|
|
399
411
|
exports.getAppBlocks = getAppBlocks.getAppBlocks;
|
|
400
412
|
exports.addAppBlockId = addAppBlockId.addAppBlockId;
|
|
413
|
+
exports.useInteraction = index.useInteraction;
|
|
@@ -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) {
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
exports.InteractionTargetEvent = void 0;
|
|
4
|
+
(function(InteractionTargetEvent) {
|
|
5
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-background-color'] = 0] = 'gp:change-background-color';
|
|
6
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:run-animation'] = 1] = 'gp:run-animation';
|
|
7
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:toggle-element-visibility'] = 2] = 'gp:toggle-element-visibility';
|
|
8
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-text'] = 3] = 'gp:change-text';
|
|
9
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:scroll-to'] = 4] = 'gp:scroll-to';
|
|
10
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-text-style'] = 5] = 'gp:change-text-style';
|
|
11
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-content'] = 6] = 'gp:change-content';
|
|
12
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-button-style'] = 7] = 'gp:change-button-style';
|
|
13
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:copy-text'] = 8] = 'gp:copy-text';
|
|
14
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-image'] = 9] = 'gp:change-image';
|
|
15
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:toggle-video-play'] = 10] = 'gp:toggle-video-play';
|
|
16
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-slider-ratio'] = 11] = 'gp:change-slider-ratio';
|
|
17
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-icon-style'] = 12] = 'gp:change-icon-style';
|
|
18
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-expanded-item'] = 13] = 'gp:change-expanded-item';
|
|
19
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-active-item'] = 14] = 'gp:change-active-item';
|
|
20
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-slide'] = 15] = 'gp:change-slide';
|
|
21
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-image-step'] = 16] = 'gp:change-image-step';
|
|
22
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-text-value'] = 17] = 'gp:change-text-value';
|
|
23
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:toggle-popup-open'] = 18] = 'gp:toggle-popup-open';
|
|
24
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:show-or-hide'] = 19] = 'gp:show-or-hide';
|
|
25
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-banner'] = 20] = 'gp:change-banner';
|
|
26
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-open-tab'] = 21] = 'gp:change-open-tab';
|
|
27
|
+
})(exports.InteractionTargetEvent || (exports.InteractionTargetEvent = {}));
|
|
28
|
+
exports.InteractionTriggerEvent = void 0;
|
|
29
|
+
(function(InteractionTriggerEvent) {
|
|
30
|
+
InteractionTriggerEvent[InteractionTriggerEvent['click'] = 0] = 'click';
|
|
31
|
+
InteractionTriggerEvent[InteractionTriggerEvent["active"] = 1] = "active";
|
|
32
|
+
InteractionTriggerEvent[InteractionTriggerEvent['mouseover'] = 2] = 'mouseover';
|
|
33
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:appear'] = 3] = 'gp:appear';
|
|
34
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:item-selected'] = 4] = 'gp:item-selected';
|
|
35
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:item-unselected'] = 5] = 'gp:item-unselected';
|
|
36
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:item-hovered'] = 6] = 'gp:item-hovered';
|
|
37
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:item-click'] = 7] = 'gp:item-click';
|
|
38
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:after-submit'] = 8] = 'gp:after-submit';
|
|
39
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:quantity-change'] = 9] = 'gp:quantity-change';
|
|
40
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:after-checked-value'] = 10] = 'gp:after-checked-value';
|
|
41
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:after-add-to-cart'] = 11] = 'gp:after-add-to-cart';
|
|
42
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-open'] = 12] = 'gp:popup-open';
|
|
43
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-close'] = 13] = 'gp:popup-close';
|
|
44
|
+
InteractionTriggerEvent[InteractionTriggerEvent['scroll-up'] = 14] = 'scroll-up';
|
|
45
|
+
InteractionTriggerEvent[InteractionTriggerEvent['scroll-down'] = 15] = 'scroll-down';
|
|
46
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:price-change'] = 16] = 'gp:price-change';
|
|
47
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback-price-change'] = 17] = 'gp:rollback-price-change';
|
|
48
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:compare-price-change'] = 18] = 'gp:compare-price-change';
|
|
49
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback:compare-price-change'] = 19] = 'gp:rollback:compare-price-change';
|
|
50
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:stock-change'] = 20] = 'gp:stock-change';
|
|
51
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback:stock-change'] = 21] = 'gp:rollback:stock-change';
|
|
52
|
+
})(exports.InteractionTriggerEvent || (exports.InteractionTriggerEvent = {}));
|