@gem-sdk/core 1.48.0-dev.69 → 1.48.0-dev.72
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/helpers/interaction/index.js +40 -0
- package/dist/cjs/helpers/render.js +2 -0
- package/dist/cjs/index.js +2 -0
- package/dist/esm/helpers/interaction/index.js +38 -0
- package/dist/esm/helpers/render.js +2 -0
- package/dist/esm/index.js +1 -0
- package/dist/types/index.d.ts +18 -5
- package/package.json +2 -2
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const useInteraction = ()=>{
|
|
4
|
+
const onListener = ({ event, selector }, callback)=>{
|
|
5
|
+
const element = document.querySelector(selector);
|
|
6
|
+
if (!element) return;
|
|
7
|
+
element.addEventListener(event, (e)=>{
|
|
8
|
+
const event = e;
|
|
9
|
+
const params = event.detail;
|
|
10
|
+
if (callback) callback(params);
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
const trigger = ({ event, data, selector })=>{
|
|
14
|
+
const element = document.querySelector(selector);
|
|
15
|
+
if (!element) return;
|
|
16
|
+
const eventDispatch = new CustomEvent(event, {
|
|
17
|
+
bubbles: false,
|
|
18
|
+
cancelable: true,
|
|
19
|
+
detail: {
|
|
20
|
+
data
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
element.dispatchEvent(eventDispatch);
|
|
24
|
+
};
|
|
25
|
+
const saveToElementInteractionData = (element, key, value)=>{
|
|
26
|
+
const interactionData = element.getAttribute('gp-data-interaction');
|
|
27
|
+
const interactionDataJson = JSON.parse(interactionData || '{}');
|
|
28
|
+
element.setAttribute('gp-data-interaction', JSON.stringify({
|
|
29
|
+
...interactionDataJson,
|
|
30
|
+
[key]: value
|
|
31
|
+
}));
|
|
32
|
+
};
|
|
33
|
+
return {
|
|
34
|
+
onListener,
|
|
35
|
+
trigger,
|
|
36
|
+
saveToElementInteractionData
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
exports.useInteraction = useInteraction;
|
package/dist/cjs/index.js
CHANGED
|
@@ -108,6 +108,7 @@ var getProduct = require('./helpers/queries/get-product.js');
|
|
|
108
108
|
var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
|
|
109
109
|
var getAppBlocks = require('./helpers/third-party/getAppBlocks.js');
|
|
110
110
|
var addAppBlockId = require('./helpers/third-party/addAppBlockId.js');
|
|
111
|
+
var index = require('./helpers/interaction/index.js');
|
|
111
112
|
|
|
112
113
|
|
|
113
114
|
|
|
@@ -404,3 +405,4 @@ exports.getProduct = getProduct.getProduct;
|
|
|
404
405
|
exports.getProductBySlug = getProductBySlug.getProductBySlug;
|
|
405
406
|
exports.getAppBlocks = getAppBlocks.getAppBlocks;
|
|
406
407
|
exports.addAppBlockId = addAppBlockId.addAppBlockId;
|
|
408
|
+
exports.useInteraction = index.useInteraction;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
const useInteraction = ()=>{
|
|
2
|
+
const onListener = ({ event, selector }, callback)=>{
|
|
3
|
+
const element = document.querySelector(selector);
|
|
4
|
+
if (!element) return;
|
|
5
|
+
element.addEventListener(event, (e)=>{
|
|
6
|
+
const event = e;
|
|
7
|
+
const params = event.detail;
|
|
8
|
+
if (callback) callback(params);
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
const trigger = ({ event, data, selector })=>{
|
|
12
|
+
const element = document.querySelector(selector);
|
|
13
|
+
if (!element) return;
|
|
14
|
+
const eventDispatch = new CustomEvent(event, {
|
|
15
|
+
bubbles: false,
|
|
16
|
+
cancelable: true,
|
|
17
|
+
detail: {
|
|
18
|
+
data
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
element.dispatchEvent(eventDispatch);
|
|
22
|
+
};
|
|
23
|
+
const saveToElementInteractionData = (element, key, value)=>{
|
|
24
|
+
const interactionData = element.getAttribute('gp-data-interaction');
|
|
25
|
+
const interactionDataJson = JSON.parse(interactionData || '{}');
|
|
26
|
+
element.setAttribute('gp-data-interaction', JSON.stringify({
|
|
27
|
+
...interactionDataJson,
|
|
28
|
+
[key]: value
|
|
29
|
+
}));
|
|
30
|
+
};
|
|
31
|
+
return {
|
|
32
|
+
onListener,
|
|
33
|
+
trigger,
|
|
34
|
+
saveToElementInteractionData
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export { useInteraction };
|
package/dist/esm/index.js
CHANGED
|
@@ -111,3 +111,4 @@ export { fetchMedias, fetchVariants, getProduct } from './helpers/queries/get-pr
|
|
|
111
111
|
export { getProductBySlug } from './helpers/queries/get-product-by-slug.js';
|
|
112
112
|
export { getAppBlocks } from './helpers/third-party/getAppBlocks.js';
|
|
113
113
|
export { addAppBlockId } from './helpers/third-party/addAppBlockId.js';
|
|
114
|
+
export { useInteraction } from './helpers/interaction/index.js';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -8163,7 +8163,7 @@ type Plan = 'trial' | 'build' | 'starter' | 'optimize' | 'advanced' | 'trial2022
|
|
|
8163
8163
|
type SettingUIControl = {
|
|
8164
8164
|
id?: string;
|
|
8165
8165
|
controlConfig?: ControlConfig;
|
|
8166
|
-
|
|
8166
|
+
type?: 'control' | 'combo' | 'tab' | 'toggleGroup';
|
|
8167
8167
|
layout?: 'vertical' | 'horizontal';
|
|
8168
8168
|
toggleGroupId?: string;
|
|
8169
8169
|
label?: LabelWithLang;
|
|
@@ -8186,6 +8186,7 @@ type SettingUIControl = {
|
|
|
8186
8186
|
state?: SettingStateType;
|
|
8187
8187
|
};
|
|
8188
8188
|
searchKeyword?: string;
|
|
8189
|
+
tabs?: SettingUITab[];
|
|
8189
8190
|
} & SettingUICompo;
|
|
8190
8191
|
type SettingUICompo = {
|
|
8191
8192
|
controls?: SettingUIControl[];
|
|
@@ -8201,7 +8202,7 @@ type SettingUIMoreSetting = {
|
|
|
8201
8202
|
controls?: SettingUIControl[];
|
|
8202
8203
|
help?: SettingUIHelpType;
|
|
8203
8204
|
};
|
|
8204
|
-
type
|
|
8205
|
+
type SettingUITab = {
|
|
8205
8206
|
label?: LabelWithLang;
|
|
8206
8207
|
controls?: SettingUIControl[];
|
|
8207
8208
|
hide?: boolean;
|
|
@@ -8213,7 +8214,6 @@ type SettingUIToggleGroup = {
|
|
|
8213
8214
|
controls?: SettingUIControl[];
|
|
8214
8215
|
};
|
|
8215
8216
|
type SettingUIToggleSettings = {
|
|
8216
|
-
type: 'control' | 'toggleGroup';
|
|
8217
8217
|
controls?: SettingUIControl[];
|
|
8218
8218
|
isActiveDefault?: boolean;
|
|
8219
8219
|
} & SettingUIControl & SettingUIToggleGroup;
|
|
@@ -8226,7 +8226,7 @@ type SettingUIGroup = {
|
|
|
8226
8226
|
controls?: SettingUIControl[];
|
|
8227
8227
|
moreSettings?: SettingUIMoreSetting;
|
|
8228
8228
|
toggleSettings?: SettingUIToggleSettings[];
|
|
8229
|
-
states?:
|
|
8229
|
+
states?: SettingUITab[];
|
|
8230
8230
|
help?: SettingUIHelpType;
|
|
8231
8231
|
options?: {
|
|
8232
8232
|
disableMessage?: string;
|
|
@@ -39304,4 +39304,17 @@ declare const getAppBlocks: (section: PublishedPageSection$1 & {
|
|
|
39304
39304
|
|
|
39305
39305
|
declare const addAppBlockId: (component: Component) => Component;
|
|
39306
39306
|
|
|
39307
|
-
|
|
39307
|
+
declare const useInteraction: () => {
|
|
39308
|
+
onListener: ({ event, selector }: {
|
|
39309
|
+
event: string;
|
|
39310
|
+
selector: string;
|
|
39311
|
+
}, callback: (data: any) => void) => void;
|
|
39312
|
+
trigger: ({ event, data, selector }: {
|
|
39313
|
+
event: string;
|
|
39314
|
+
data?: any;
|
|
39315
|
+
selector: string;
|
|
39316
|
+
}) => void;
|
|
39317
|
+
saveToElementInteractionData: (element: HTMLElement, key: string, value: string) => void;
|
|
39318
|
+
};
|
|
39319
|
+
|
|
39320
|
+
export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, ArticleListProvider, ArticleListProviderProps, ArticleProvider, ArticleProviderProps, Background, BaseProps, BasePropsWrap, BlockEntity, BogosWidgetType, 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, ControlTriggerAction, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, Interaction, InteractionCondition, InteractionElement, InteractionTarget, InteractionTargetEvent, InteractionTargetEventObject, InteractionTriggerEvent, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibrarySaleFunnelDocument, LibrarySaleFunnelQueryResponse, LibrarySaleFunnelQueryVariables, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OnlyOne, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, Options, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreOrderNowWodWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublicStoreFrontData, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RawChild, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveKey, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SaleFunnelDiscount$1 as SaleFunnelDiscount, SaleFunnelDiscountEdge$1 as SaleFunnelDiscountEdge, SaleFunnelDiscountObjectType$1 as SaleFunnelDiscountObjectType, SaleFunnelDiscountType$1 as SaleFunnelDiscountType, SaleFunnelDiscountValueType$1 as SaleFunnelDiscountValueType, SaleFunnelDiscountsDocument, SaleFunnelDiscountsQueryResponse, SaleFunnelDiscountsQueryVariables, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, SettingByAnimationType, SettingByAnimationValues, SettingUIGroup, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, ThemeSectionStatus$1 as ThemeSectionStatus, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, addAppBlockId, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBorderCss, composeCornerCss, composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertHTML, convertOldLayout, convertTextAlignToJustify, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterCornerInStyle, filterToolbarPreview, flattenConnection, formatMoney, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAppBlocks, getAspectRatioGlobalSize, getBgImageByDevice, getBorderRadiusStyle, getBorderStyle, getCarouselContainerHeight, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResonsiveStyleShadow, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleBgColor, getStyleShadow, getStyleShadowState, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeIcon, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, removeUndefinedValuesFromObject, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useArticleListStore, useArticleStore, useArticlesQuery, useBlogsQuery, 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, useInteraction, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useProductsQueryAll, 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.48.0-dev.
|
|
3
|
+
"version": "1.48.0-dev.72",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@gem-sdk/adapter-shopify": "1.48.0-dev.3",
|
|
31
|
-
"@gem-sdk/styles": "1.48.0-dev.
|
|
31
|
+
"@gem-sdk/styles": "1.48.0-dev.72",
|
|
32
32
|
"@types/classnames": "^2.3.1"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|