@gem-sdk/core 1.23.0 → 1.23.1

package/dist/cjs/helpers/is-empty-children.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
+var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js');
 
 const isEmptyChildren = (children)=>{
-    return react.Children.count(children) < 1 || !children;
+    let arrChild = react.Children.toArray(children);
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview);
+    return react.Children.count(arrChild) < 1 || !children;
 };
 
 exports.default = isEmptyChildren;

package/dist/cjs/helpers/make-style.js

@@ -75,6 +75,13 @@ const makeWidth = (widthValue, fullWidthValue)=>{
         mobile: getVal('mobile', widthValue, fullWidthValue)
     };
 };
+const makeGlobalSizeWidthResponsive = (globalSize)=>{
+    return {
+        '--w': globalSize?.desktop?.width,
+        '--w-tablet': globalSize?.tablet?.width,
+        '--w-mobile': globalSize?.mobile?.width
+    };
+};
 const makeHeight = (heighValue, autoHeight)=>{
     const getVal = (deviceValue, heighValue, autoHeight)=>{
         const heightVal = heighValue?.[deviceValue];
@@ -128,6 +135,7 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
 };
 
 exports.makeAspectRatio = makeAspectRatio;
+exports.makeGlobalSizeWidthResponsive = makeGlobalSizeWidthResponsive;
 exports.makeHeight = makeHeight;
 exports.makeLineClamp = makeLineClamp;
 exports.makeStyle = makeStyle;

package/dist/cjs/helpers/size.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var makeStyle = require('./make-style.js');
 var constant = require('./constant.js');
 
 function getCustomSizeCSSByDevice(size, device) {
@@ -29,7 +30,60 @@ const composeSizeCss = (spacing)=>{
   ${sizeVerti ? `padding-top: ${sizeVerti}; padding-bottom: ${sizeVerti};` : undefined}
   `;
 };
+const makeGlobalSize = (globalSize)=>{
+    return {
+        width: makeStyleWithDefault('w', getWidthHeightGlobalSize('width', globalSize), {
+            desktop: '--g-ct-w',
+            tablet: '--g-ct-w',
+            mobile: '--g-ct-w'
+        }),
+        height: makeStyle.makeStyleResponsive('h', getWidthHeightGlobalSize('height', globalSize)),
+        padding: getPaddingGlobalSize(globalSize)
+    };
+};
+const makeStyleWithDefault = (name, value, defaultVal)=>{
+    return {
+        [`--${name}`]: value?.desktop === 'default' ? `var(${defaultVal?.desktop})` : value?.desktop,
+        [`--${name}-tablet`]: value?.tablet === 'default' ? `var(${defaultVal?.tablet})` : value?.tablet,
+        [`--${name}-mobile`]: value?.mobile === 'default' ? `var(${defaultVal?.mobile})` : value?.mobile
+    };
+};
+const getWidthHeightGlobalSize = (type, globalSize)=>{
+    if (!globalSize) return {};
+    const data = {
+        desktop: globalSize?.desktop?.[type],
+        tablet: globalSize?.tablet?.[type],
+        mobile: globalSize?.mobile?.[type]
+    };
+    if (data.desktop === undefined) {
+        data.desktop = 'auto';
+    }
+    if (data.tablet === undefined) {
+        data.tablet = data.desktop;
+    }
+    if (data.mobile === undefined) {
+        data.mobile = data.tablet;
+    }
+    return data;
+};
+function getCustomPaddingSizeCSSByDevice(globalSize, device) {
+    if (!globalSize || !device) return {};
+    const suffix = constant.devicesMapping[device] ?? '';
+    return {
+        [`--pl${suffix}`]: globalSize?.[device]?.padding?.left,
+        [`--pr${suffix}`]: globalSize?.[device]?.padding?.right,
+        [`--pt${suffix}`]: globalSize?.[device]?.padding?.top,
+        [`--pb${suffix}`]: globalSize?.[device]?.padding?.bottom
+    };
+}
+const getPaddingGlobalSize = (globalSize)=>{
+    return Object.assign({}, getCustomPaddingSizeCSSByDevice(globalSize, 'desktop'), getCustomPaddingSizeCSSByDevice(globalSize, 'tablet'), getCustomPaddingSizeCSSByDevice(globalSize, 'mobile'));
+};
 
 exports.composeSize = composeSize;
 exports.composeSizeCss = composeSizeCss;
 exports.genSizeClass = genSizeClass;
+exports.getPaddingGlobalSize = getPaddingGlobalSize;
+exports.getWidthHeightGlobalSize = getWidthHeightGlobalSize;
+exports.makeGlobalSize = makeGlobalSize;
+exports.makeStyleWithDefault = makeStyleWithDefault;

package/dist/cjs/helpers/typography.js

@@ -18,20 +18,21 @@ const composeTypographyCss = (typography)=>{
   ${lineHeight ? `line-height: ${lineHeight};` : ''}
   `;
 };
-const composeTypographyV2Css = (typography)=>{
+const composeTypographyV2Css = (typography, isImportant)=>{
     const typographyCustom = typography?.custom;
     const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
     const typographyAttrs = typography?.attrs;
     const { bold, italic, underline, transform } = typographyAttrs ?? {};
+    const composeImportant = isImportant ? '!important' : '';
     return `
-  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
-  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop};` : ''}
-  ${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight};` : ''}
-  ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
-  ${lineHeight ? `line-height: ${lineHeight};` : ''}
-  ${italic ? `font-style: italic;` : ''}
-  ${underline ? `text-decoration-line: underline;` : ''}
-  ${transform ? `text-transform: ${transform};` : ''}
+  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily}) ${composeImportant};` : ''}
+  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant};` : ''}
+  ${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant};` : ''}
+  ${letterSpacing ? `letter-spacing: ${letterSpacing} ${composeImportant};` : ''}
+  ${lineHeight ? `line-height: ${lineHeight} ${composeImportant};` : ''}
+  ${italic ? `font-style: italic${composeImportant};` : ''}
+  ${underline ? `text-decoration-line: underline ${composeImportant};` : ''}
+  ${transform ? `text-transform: ${transform} ${composeImportant};` : ''}
   `;
 };
 function getCustomCSSByDevice(typography, device) {

package/dist/cjs/hooks/useInitialSwatchesOptions.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useSWR = require('swr');
+var productValueLabel_generated = require('../graphql/queries/product-value-label.generated.js');
+var variantPresets = require('../components/src/product/helpers/variant-presets.js');
+var shop = require('./shop.js');
+var useFetchHandle = require('./useFetchHandle.js');
+var ShopContext = require('../contexts/ShopContext.js');
+
+let swatchChange = false;
+let colorChange = false;
+const useInitialSwatchesOptions = (options)=>{
+    const fetcher = useFetchHandle.useFetchHandle();
+    const changeSwatches = ShopContext.useShopStore((s)=>s.changeSwatches);
+    const { swatches } = shop.useSwatches();
+    const { data: productOptionName } = useSWR([
+        '/query/productOptionName',
+        {}
+    ], async ()=>fetchProductValueLabel(fetcher), {
+        revalidateOnMount: true
+    });
+    const swatchesTitleList = [];
+    swatches?.forEach((el)=>{
+        swatchesTitleList.push(el.optionTitle);
+    });
+    productOptionName?.productOptionName?.forEach((el)=>{
+        if (!swatchesTitleList.includes(el)) {
+            swatchChange = true;
+            swatches?.push({
+                optionTitle: el,
+                optionType: 'rectangle_list',
+                optionValues: []
+            });
+        }
+    });
+    if (!options) return [];
+    setDefaultSwatches(swatches, options);
+    if (swatches?.length && (swatchChange || colorChange)) {
+        window?.parent?.postMessage?.(JSON.stringify({
+            type: 'update-swatches',
+            swatches
+        }), '*');
+        changeSwatches(swatches);
+    }
+};
+const getColorDefault = (label, color)=>{
+    const colorByLabel = label ? variantPresets.colorPreset[label.toLocaleLowerCase()] : undefined;
+    const colorArray = colorByLabel ? [
+        colorByLabel
+    ] : [];
+    const firstColor = color?.[0];
+    if (!firstColor && colorArray.length) colorChange = true;
+    return firstColor ? [
+        firstColor
+    ] : colorArray;
+};
+const getProductOptionsLabelByName = (options, name)=>{
+    const labels = [];
+    const optionByName = options.find((op)=>op.name === name);
+    optionByName?.values.forEach((val)=>{
+        labels.push(val.label ?? '');
+    });
+    return labels;
+};
+const getSwatchesOptionsLabel = (options)=>{
+    const labels = [];
+    options.forEach((op)=>{
+        labels.push(op.label ?? '');
+        return;
+    });
+    return labels;
+};
+const setDefaultSwatches = (swatches, options)=>{
+    if (swatches) {
+        swatches?.map((sw)=>{
+            const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
+            const swLabels = getSwatchesOptionsLabel(sw.optionValues);
+            productLabels.forEach((label)=>{
+                if (!swLabels.includes(label)) {
+                    sw.optionValues.push({
+                        label,
+                        colors: getColorDefault(label),
+                        imageUrl: ''
+                    });
+                }
+            });
+            sw.optionValues = sw.optionValues.map((op)=>{
+                if (op.imageUrl === undefined) swatchChange = true;
+                return {
+                    label: op.label ?? '',
+                    colors: getColorDefault(op.label, op.colors),
+                    imageUrl: op.imageUrl ?? ''
+                };
+            });
+        });
+    }
+    return swatches;
+};
+const fetchProductValueLabel = async (fetcher)=>{
+    const initVariables = {};
+    const query = async (variables)=>{
+        const response = await fetcher([
+            productValueLabel_generated.ProductOptionNameDocument,
+            variables
+        ]);
+        return response;
+    };
+    return query(initVariables);
+};
+
+exports.default = useInitialSwatchesOptions;

package/dist/cjs/hooks/useProduct.js

@@ -3,10 +3,18 @@
 var react = require('react');
 var ProductContext = require('../contexts/ProductContext.js');
 var flattenConnection = require('../helpers/flatten-connection.js');
+require('react/jsx-runtime');
+require('zustand');
 require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('./useCartUI.js');
+var variant = require('../helpers/variant.js');
+require('react-transition-group');
+require('@gem-sdk/core');
 var product = require('../helpers/product.js');
 require('../helpers/convert.js');
-var variant = require('../helpers/variant.js');
 
 const useUniqProductID = ()=>{
     return ProductContext.useProductStore((s)=>s.uiqueId);
@@ -141,8 +149,7 @@ const useCurrentVariant = ()=>{
 };
 const useCurrentVariantInStock = ()=>{
     const currentVariant = useCurrentVariant();
-    const isInStock = variant.checkInStock(currentVariant);
-    return isInStock;
+    return variant.checkInStock(currentVariant);
 };
 const useVariantOutStock = (optionId, optionValue)=>{
     const { selectedOptions } = useSelectedOption();

package/dist/cjs/index.js

@@ -32,6 +32,7 @@ var GlobalEvent = require('./helpers/GlobalEvent.js');
 var isBrowser = require('./helpers/is-browser.js');
 var isSafari = require('./helpers/is-safari.js');
 var isEmptyChildren = require('./helpers/is-empty-children.js');
+var filterToolbarPreview = require('./helpers/filter-toolbar-preview.js');
 var makeStyle = require('./helpers/make-style.js');
 var normalizeBuilderData = require('./helpers/normalize-builder-data.js');
 var prefetchQueries = require('./helpers/prefetch-queries.js');
@@ -83,6 +84,7 @@ var useProduct = require('./hooks/useProduct.js');
 var useProductList = require('./hooks/useProductList.js');
 var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
 var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
+var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
 var shop$1 = require('./types/shop.js');
 var globalStyle = require('./types/global-style.js');
 var getCollection = require('./helpers/queries/get-collection.js');
@@ -147,7 +149,9 @@ exports.globalEvent = GlobalEvent.default;
 exports.isBrowser = isBrowser.default;
 exports.isSafari = isSafari.default;
 exports.isEmptyChildren = isEmptyChildren.isEmptyChildren;
+exports.filterToolbarPreview = filterToolbarPreview.filterToolbarPreview;
 exports.makeAspectRatio = makeStyle.makeAspectRatio;
+exports.makeGlobalSizeWidthResponsive = makeStyle.makeGlobalSizeWidthResponsive;
 exports.makeHeight = makeStyle.makeHeight;
 exports.makeLineClamp = makeStyle.makeLineClamp;
 exports.makeStyle = makeStyle.makeStyle;
@@ -214,12 +218,17 @@ exports.isLocalEnv = convert.isLocalEnv;
 exports.composeSize = size.composeSize;
 exports.composeSizeCss = size.composeSizeCss;
 exports.genSizeClass = size.genSizeClass;
+exports.getPaddingGlobalSize = size.getPaddingGlobalSize;
+exports.getWidthHeightGlobalSize = size.getWidthHeightGlobalSize;
+exports.makeGlobalSize = size.makeGlobalSize;
+exports.makeStyleWithDefault = size.makeStyleWithDefault;
 exports.composeShadowCss = shadow.composeShadowCss;
 exports.getStyleShadow = shadow.getStyleShadow;
 exports.getStyleShadowState = shadow.getStyleShadowState;
 exports.parseValueWithUnit = shadow.parseValueWithUnit;
 exports.composeBackgroundCss = background.composeBackgroundCss;
 exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
+exports.makeFixedBgAttachment = background.makeFixedBgAttachment;
 exports.generateCollectionQueryKey = query.generateCollectionQueryKey;
 exports.generateProductQueryKey = query.generateProductQueryKey;
 exports.generateProductsQueryKey = query.generateProductsQueryKey;
@@ -284,6 +293,7 @@ exports.useProductListSettings = useProductList.useProductListSettings;
 exports.useProductListStyles = useProductList.useProductListStyles;
 exports.useSuspenseFetch = useSuspenseFetch.default;
 exports.useSwatchesOptions = useSwatchesOptions.default;
+exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
 exports.ShopType = shop$1;
 exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
 exports.OptionSpecialStyle = globalStyle.OptionSpecialStyle;