@gem-sdk/core 1.8.40 → 1.9.0

package/dist/cjs/components/Render.liquid.js

@@ -12,6 +12,10 @@ var constant = require('./constant.js');
 const componentsRenderWithParentId = [
     'CarouselItem'
 ];
+const componentTexts = [
+    'Text',
+    'Heading'
+];
 const Render = ({ uid , builder , components , parentId , ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
@@ -61,6 +65,7 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                     setting: item.settings,
                     advanced: item.advanced,
                     style,
+                    isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     ...passProps
                 }));
@@ -94,6 +99,7 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                 },
                 styles: item.styles,
                 setting: item.settings,
+                isText: componentTexts.includes(item.tag) ? true : null,
                 ...passProps
             }))}
     </div>`;

package/dist/cjs/helpers/layout.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var constant = require('./constant.js');
+var getResonsiveValue = require('./get-resonsive-value.js');
 
 const optionLayoutStyle = (column)=>{
     if (!column) return {};
@@ -12,5 +13,17 @@ const optionLayoutStyle = (column)=>{
     }
     return style;
 };
+const composeGridLayout = (layout)=>{
+    const display = getResonsiveValue.getResponsiveValue(layout, 'display');
+    const desktop = (getResonsiveValue.getResponsiveValueByScreen(display, 'desktop') === 'fit' ? layout?.desktop?.cols?.map(()=>`auto`) : layout?.desktop?.cols?.map((col)=>`minmax(0, ${col}fr)`))?.join(' ');
+    const tablet = (getResonsiveValue.getResponsiveValueByScreen(display, 'tablet') === 'fit' ? layout?.tablet?.cols?.map(()=>`auto`) : layout?.tablet?.cols?.map((col)=>`minmax(0, ${col}fr)`))?.join(' ');
+    const mobile = (getResonsiveValue.getResponsiveValueByScreen(display, 'mobile') === 'fit' ? layout?.mobile?.cols?.map(()=>`auto`) : layout?.mobile?.cols?.map((col)=>`minmax(0, ${col}fr)`))?.join(' ');
+    return {
+        [`--gtc`]: desktop,
+        [`--gtc-tablet`]: tablet,
+        [`--gtc-mobile`]: mobile
+    };
+};
 
+exports.composeGridLayout = composeGridLayout;
 exports.optionLayoutStyle = optionLayoutStyle;

package/dist/cjs/index.js

@@ -40,9 +40,9 @@ var size = require('./helpers/size.js');
 var spacing = require('./helpers/spacing.js');
 var loadScript = require('./helpers/load-script.js');
 var email = require('./helpers/email.js');
-var layout = require('./helpers/layout.js');
 var background = require('./helpers/background.js');
 var cssVariable = require('./helpers/css-variable.js');
+var layout = require('./helpers/layout.js');
 var isDefined = require('./helpers/is-defined.js');
 var colors = require('./helpers/colors.js');
 var typography = require('./helpers/typography.js');
@@ -156,9 +156,10 @@ exports.composeSpacing = spacing.composeSpacing;
 exports.getSpacingVariable = spacing.getSpacingVariable;
 exports.loadScript = loadScript.loadScript;
 exports.validateEmail = email.validateEmail;
-exports.optionLayoutStyle = layout.optionLayoutStyle;
 exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
 exports.genVariable = cssVariable.genVariable;
+exports.composeGridLayout = layout.composeGridLayout;
+exports.optionLayoutStyle = layout.optionLayoutStyle;
 exports.isDefined = isDefined.isDefined;
 exports.getGlobalColorCSSProp = colors.getGlobalColorCSSProp;
 exports.getGlobalColorClass = colors.getGlobalColorClass;

package/dist/esm/components/Render.liquid.js

@@ -8,6 +8,10 @@ import { disableWrap } from './constant.js';
 const componentsRenderWithParentId = [
     'CarouselItem'
 ];
+const componentTexts = [
+    'Text',
+    'Heading'
+];
 const Render = ({ uid , builder , components , parentId , ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
@@ -57,6 +61,7 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                     setting: item.settings,
                     advanced: item.advanced,
                     style,
+                    isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     ...passProps
                 }));
@@ -90,6 +95,7 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                 },
                 styles: item.styles,
                 setting: item.settings,
+                isText: componentTexts.includes(item.tag) ? true : null,
                 ...passProps
             }))}
     </div>`;

package/dist/esm/helpers/layout.js

@@ -1,4 +1,5 @@
 import { devicesMapping } from './constant.js';
+import { getResponsiveValueByScreen, getResponsiveValue } from './get-resonsive-value.js';
 
 const optionLayoutStyle = (column)=>{
     if (!column) return {};
@@ -10,5 +11,16 @@ const optionLayoutStyle = (column)=>{
     }
     return style;
 };
+const composeGridLayout = (layout)=>{
+    const display = getResponsiveValue(layout, 'display');
+    const desktop = (getResponsiveValueByScreen(display, 'desktop') === 'fit' ? layout?.desktop?.cols?.map(()=>`auto`) : layout?.desktop?.cols?.map((col)=>`minmax(0, ${col}fr)`))?.join(' ');
+    const tablet = (getResponsiveValueByScreen(display, 'tablet') === 'fit' ? layout?.tablet?.cols?.map(()=>`auto`) : layout?.tablet?.cols?.map((col)=>`minmax(0, ${col}fr)`))?.join(' ');
+    const mobile = (getResponsiveValueByScreen(display, 'mobile') === 'fit' ? layout?.mobile?.cols?.map(()=>`auto`) : layout?.mobile?.cols?.map((col)=>`minmax(0, ${col}fr)`))?.join(' ');
+    return {
+        [`--gtc`]: desktop,
+        [`--gtc-tablet`]: tablet,
+        [`--gtc-mobile`]: mobile
+    };
+};
 
-export { optionLayoutStyle };
+export { composeGridLayout, optionLayoutStyle };

package/dist/esm/index.js

@@ -38,9 +38,9 @@ export { composeSize } from './helpers/size.js';
 export { composeSpacing, getSpacingVariable } from './helpers/spacing.js';
 export { loadScript } from './helpers/load-script.js';
 export { validateEmail } from './helpers/email.js';
-export { optionLayoutStyle } from './helpers/layout.js';
 export { getStyleBackgroundByDevice } from './helpers/background.js';
 export { genVariable } from './helpers/css-variable.js';
+export { composeGridLayout, optionLayoutStyle } from './helpers/layout.js';
 export { isDefined } from './helpers/is-defined.js';
 export { getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
 export { genTypoClass } from './helpers/typography.js';

package/dist/types/index.d.ts

@@ -126,6 +126,10 @@ type AlignItemProp = 'left' | 'center' | 'right';
 type JudgeMeReviewsWidgetType = 'single_product_preview_badge' | 'review_widget' | 'reviews_carousel' | 'all_reviews_widget' | 'verified_reviews_count_badge' | 'all_reviews_text';
 type LooxReviewsWidgetType = 'reviews_widget' | 'rating_widget' | 'carousel_widget';
 type KlaviyoWidgetType = 'popup_widget' | 'flyout_widget' | 'embed_widget' | 'full_page_widget';
+type ObjectLayoutValue = {
+    display?: 'fill' | 'fit';
+    cols?: number[];
+};
 
 type ResponsiveConfig<T> = {
     desktop: {
@@ -786,7 +790,12 @@ type SwatchesLinkControlType<T> = SharedControlType<T> & {
     type: 'swatchesLink';
 };
 
-type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | CustomCodeEditor | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | SwatchesLinkControlType<T>;
+type LayoutControlType<T> = SharedControlType<T> & {
+    type: 'layout';
+    maxCol?: number;
+};
+
+type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | CustomCodeEditor | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T>;
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -7349,8 +7358,6 @@ declare function loadScript(src: string, options?: {
 
 declare const validateEmail: (email: string) => boolean;
 
-declare const optionLayoutStyle: (column?: ObjectDevices<string | number>) => React.CSSProperties;
-
 type Options = {
     liquid?: boolean;
 };
@@ -7358,6 +7365,9 @@ declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background
 
 declare const genVariable: (variableName: string) => string;
 
+declare const optionLayoutStyle: (column?: ObjectDevices<string | number>) => React.CSSProperties;
+declare const composeGridLayout: (layout?: ObjectDevices<ObjectLayoutValue>) => React.CSSProperties;
+
 declare function isDefined<T>(argument: T | undefined): argument is T;
 
 type ColorType = 'bg' | 'text' | 'border' | 'decoration';
@@ -7685,4 +7695,4 @@ declare const fetchMedias: (fetcher: FetchFunc, { id, isSample, isStorefront }:
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RoundedSize, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, calculateFirstProduct, cls, composeAdvanceStyle, composeRadius, composeSize, composeSpacing, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, 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 };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RoundedSize, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, calculateFirstProduct, cls, composeAdvanceStyle, composeGridLayout, composeRadius, composeSize, composeSpacing, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, 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

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.8.40",
+  "version": "1.9.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",