@gem-sdk/core 1.5.41 → 1.5.44

package/dist/cjs/helpers/borders.js

@@ -3,6 +3,13 @@
 var colors = require('./colors.js');
 var makeStyle = require('./make-style.js');
 
+const getBorderStyle = (value)=>{
+    return makeStyle.makeStyle({
+        'b': value?.border,
+        'bc': value?.color,
+        'bw': value?.width
+    });
+};
 const handleConvertBorderStyle = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -128,6 +135,7 @@ const handleConvertClassColor = (value)=>{
     return colors.getGlobalColorStateClass('border', newVal);
 };
 
+exports.getBorderStyle = getBorderStyle;
 exports.handleConvertBorderColor = handleConvertBorderColor;
 exports.handleConvertBorderStyle = handleConvertBorderStyle;
 exports.handleConvertBorderWidth = handleConvertBorderWidth;

package/dist/cjs/helpers/compose-advance-style.js

@@ -114,6 +114,13 @@ function composeAdvanceStyle(data, tag) {
                             Object.assign(styles, shadow.getStyleShadowState(value, 'box-shadow', hasBoxShadow));
                             break;
                     }
+                } else {
+                    if (attr === 'border') {
+                        Object.assign(styles, borders.getBorderStyle(value));
+                    }
+                    if (attr === 'rounded') {
+                        Object.assign(styles, radius.getCornerCSSFromGlobal(value));
+                    }
                 }
             });
         } else {

package/dist/cjs/helpers/radius.js

@@ -1,7 +1,18 @@
 'use strict';
 
 var constant = require('./constant.js');
+var makeStyle = require('./make-style.js');
 
+const getCornerCSSFromGlobal = (corner)=>{
+    if (!corner.radiusType) return {};
+    return makeStyle.makeStyle({
+        'bblr': corner.bblr,
+        'bbrr': corner.bbrr,
+        'btlr': corner.btlr,
+        'btrr': corner.btrr,
+        'radius': `var(--g-radius-${corner.radiusType})`
+    });
+};
 const getRadiusCSSFromGlobal = (state, key, device)=>{
     if (!key || !state) return {};
     const suffix = device && device !== 'desktop' ? constant.devicesMapping?.[device] : '';
@@ -83,6 +94,7 @@ const getRadiusStyleActiveState = (radiusValue)=>{
 };
 
 exports.composeRadius = composeRadius;
+exports.getCornerCSSFromGlobal = getCornerCSSFromGlobal;
 exports.getCustomRadius = getCustomRadius;
 exports.getRadiusCSSFromGlobal = getRadiusCSSFromGlobal;
 exports.getRadiusStyleActiveState = getRadiusStyleActiveState;

package/dist/cjs/index.js

@@ -166,6 +166,7 @@ exports.getSingleColorVariable = colors.getSingleColorVariable;
 exports.isColor = colors.isColor;
 exports.genTypoClass = typography.genTypoClass;
 exports.composeRadius = radius.composeRadius;
+exports.getCornerCSSFromGlobal = radius.getCornerCSSFromGlobal;
 exports.getCustomRadius = radius.getCustomRadius;
 exports.getRadiusCSSFromGlobal = radius.getRadiusCSSFromGlobal;
 exports.getRadiusStyleActiveState = radius.getRadiusStyleActiveState;

package/dist/esm/helpers/borders.js

@@ -1,6 +1,13 @@
 import { getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass } from './colors.js';
-import { makeStyleResponsiveState, makeStyleState } from './make-style.js';
+import { makeStyleResponsiveState, makeStyleState, makeStyle } from './make-style.js';
 
+const getBorderStyle = (value)=>{
+    return makeStyle({
+        'b': value?.border,
+        'bc': value?.color,
+        'bw': value?.width
+    });
+};
 const handleConvertBorderStyle = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -126,4 +133,4 @@ const handleConvertClassColor = (value)=>{
     return getGlobalColorStateClass('border', newVal);
 };
 
-export { handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };
+export { getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };

package/dist/esm/helpers/compose-advance-style.js

@@ -1,7 +1,7 @@
-import { handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor } from './borders.js';
+import { handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, getBorderStyle } from './borders.js';
 import { isColor } from './colors.js';
 import { layoutComponent } from './constant.js';
-import { composeRadius } from './radius.js';
+import { composeRadius, getCornerCSSFromGlobal } from './radius.js';
 import { getStyleShadowState } from './shadow.js';
 
 const composeSpacing = ({ source , spacing , type , suffix =''  })=>{
@@ -112,6 +112,13 @@ function composeAdvanceStyle(data, tag) {
                             Object.assign(styles, getStyleShadowState(value, 'box-shadow', hasBoxShadow));
                             break;
                     }
+                } else {
+                    if (attr === 'border') {
+                        Object.assign(styles, getBorderStyle(value));
+                    }
+                    if (attr === 'rounded') {
+                        Object.assign(styles, getCornerCSSFromGlobal(value));
+                    }
                 }
             });
         } else {

package/dist/esm/helpers/radius.js

@@ -1,5 +1,16 @@
 import { devicesMapping, stateMapping } from './constant.js';
+import { makeStyle } from './make-style.js';
 
+const getCornerCSSFromGlobal = (corner)=>{
+    if (!corner.radiusType) return {};
+    return makeStyle({
+        'bblr': corner.bblr,
+        'bbrr': corner.bbrr,
+        'btlr': corner.btlr,
+        'btrr': corner.btrr,
+        'radius': `var(--g-radius-${corner.radiusType})`
+    });
+};
 const getRadiusCSSFromGlobal = (state, key, device)=>{
     if (!key || !state) return {};
     const suffix = device && device !== 'desktop' ? devicesMapping?.[device] : '';
@@ -80,4 +91,4 @@ const getRadiusStyleActiveState = (radiusValue)=>{
     return getRadiusCSSFromGlobal('normal', radiusValue?.active?.radiusType);
 };
 
-export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };
+export { composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };

package/dist/esm/index.js

@@ -42,7 +42,7 @@ export { genVariable } from './helpers/css-variable.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';
-export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
+export { composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 import * as fpixel from './helpers/tracking/fpixel.js';
 export { fpixel };

package/dist/types/index.d.ts

@@ -399,6 +399,7 @@ type RangeControlType<T> = SharedControlType<T> & {
     readonly?: boolean;
     units?: string[];
     disableOnChange?: boolean;
+    ignoreUnit?: boolean;
 };
 
 type Option$2<T> = {
@@ -548,6 +549,7 @@ type TypographyControlType<T> = SharedControlType<T> & {
 
 type PickLinkControlType<T> = SharedControlType<T> & {
     type: 'pick-link';
+    pickLinkLabel?: string;
 };
 
 type BehaviorStateControlType<T> = {
@@ -760,7 +762,13 @@ type LayoutSegmentControlType<T> = {
     [K in keyof T]-?: Mapped<K, T[K]>;
 }[keyof T];
 
-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>;
+type InputSpacing<T> = SharedControlType<T> & {
+    type: 'spacingInput';
+    placeholder?: string;
+    readonly?: boolean;
+};
+
+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>;
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -7308,6 +7316,7 @@ declare const getGlobalColorStyle: (data?: ColorValueType) => React.CSSPropertie
 type TypographyClass = `g-${TypographyType}`;
 declare const genTypoClass: (name: TypographyType) => TypographyClass;
 
+declare const getCornerCSSFromGlobal: (corner: CornerRadius) => React.CSSProperties;
 declare const getRadiusCSSFromGlobal: (state: StateType, key?: RoundedSize, device?: NameDevices) => React.CSSProperties;
 declare const getCustomRadius: (state: StateType, radius?: CornerRadius, device?: NameDevices) => React.CSSProperties;
 declare const composeRadius: (value?: StateProp<CornerRadius> | ResponsiveStateProp<CornerRadius>) => React.CSSProperties;
@@ -7601,4 +7610,4 @@ declare const fetchMedias: (fetcher: FetchFunc, { id, isSample }: FetchParams) =
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, 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, 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, getCollection, 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, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, 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, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, 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, 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, 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, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, 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.5.41",
+  "version": "1.5.44",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",