@gem-sdk/core 1.0.0

package/dist/cjs/graphql/queries/preview-page.generated.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var publishedThemePage_generated = require('../fragments/published-theme-page.generated.js');
+var publishedPageSection_generated = require('../fragments/published-page-section.generated.js');
+var publishedCustomSection_generated = require('../fragments/published-custom-section.generated.js');
+var dataSeo_generated = require('../fragments/data-seo.generated.js');
+var publishedThemeStyle_generated = require('../fragments/published-theme-style.generated.js');
+var analytic_generated = require('../fragments/analytic.generated.js');
+
+const PreviewPageDocument = `
+    query previewPage($handleURL: String, $pageType: PublishedThemePageType!) {
+  previewPage(handleURL: $handleURL, pageType: $pageType) {
+    ...PublishedThemePageSelect
+  }
+}
+    ${publishedThemePage_generated.PublishedThemePageSelect}
+${publishedPageSection_generated.PublishedPageSectionSelect}
+${publishedCustomSection_generated.PublishedCustomSectionSelect}
+${dataSeo_generated.DataSeoSelect}
+${publishedThemeStyle_generated.PublishedThemeStyleSelect}
+${analytic_generated.AnalyticSelect}`;
+
+exports.PreviewPageDocument = PreviewPageDocument;

package/dist/cjs/graphql/queries/product-little-detail.generated.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var productLittle_generated = require('../fragments/product-little.generated.js');
+var productOption_generated = require('../fragments/product-option.generated.js');
+var productOptionValue_generated = require('../fragments/product-option-value.generated.js');
+var media_generated = require('../fragments/media.generated.js');
+
+const ProductLittleDetailDocument = `
+    query productLittleDetail($orderBy: ProductOrder, $where: ProductWhereInput) {
+  product: products(first: 1, orderBy: $orderBy, where: $where) {
+    edges {
+      cursor
+      node {
+        ...ProductLittleSelect
+      }
+    }
+  }
+}
+    ${productLittle_generated.ProductLittleSelect}
+${productOption_generated.ProductOptionSelect}
+${productOptionValue_generated.ProductOptionValueSelect}
+${media_generated.MediaSelect}`;
+
+exports.ProductLittleDetailDocument = ProductLittleDetailDocument;

package/dist/cjs/graphql/queries/product-medias.generated.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var media_generated = require('../fragments/media.generated.js');
+
+const ProductMediasDocument = `
+    query productMedias($firstMedia: Int = 50, $afterMedia: Cursor, $orderBy: ProductOrder, $where: ProductWhereInput) {
+  medias: products(first: 1, orderBy: $orderBy, where: $where) {
+    edges {
+      node {
+        id
+        medias(first: $firstMedia, after: $afterMedia) {
+          edges {
+            cursor
+            node {
+              ...MediaSelect
+            }
+          }
+          pageInfo {
+            hasNextPage
+            endCursor
+          }
+        }
+      }
+    }
+  }
+}
+    ${media_generated.MediaSelect}`;
+
+exports.ProductMediasDocument = ProductMediasDocument;

package/dist/cjs/graphql/queries/product-variants.generated.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var variant_generated = require('../fragments/variant.generated.js');
+var selectedOption_generated = require('../fragments/selected-option.generated.js');
+var media_generated = require('../fragments/media.generated.js');
+
+const ProductVariantsDocument = `
+    query productVariants($firstVariant: Int = 100, $afterVariant: Cursor, $orderBy: ProductOrder, $where: ProductWhereInput, $first: Int = 1) {
+  variants: products(first: $first, orderBy: $orderBy, where: $where) {
+    edges {
+      node {
+        id
+        variants(first: $firstVariant, after: $afterVariant) {
+          edges {
+            cursor
+            node {
+              ...VariantSelect
+            }
+          }
+          pageInfo {
+            hasNextPage
+            endCursor
+          }
+        }
+      }
+    }
+  }
+}
+    ${variant_generated.VariantSelect}
+${selectedOption_generated.SelectedOptionSelect}
+${media_generated.MediaSelect}`;
+
+exports.ProductVariantsDocument = ProductVariantsDocument;

package/dist/cjs/graphql/queries/products.generated.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var product_generated = require('../fragments/product.generated.js');
+var productLittle_generated = require('../fragments/product-little.generated.js');
+var productOption_generated = require('../fragments/product-option.generated.js');
+var productOptionValue_generated = require('../fragments/product-option-value.generated.js');
+var media_generated = require('../fragments/media.generated.js');
+var variant_generated = require('../fragments/variant.generated.js');
+var selectedOption_generated = require('../fragments/selected-option.generated.js');
+
+const ProductsEdgeDetail = `
+    fragment ProductsEdgeDetail on ProductEdge {
+  cursor
+  node {
+    ...ProductSelect
+  }
+}
+    `;
+const ProductsDocument = `
+    query products($first: Int, $where: ProductWhereInput, $firstMedia: Int, $orderBy: ProductOrder, $after: Cursor, $firstVariant: Int, $afterVariant: Cursor, $afterMedia: Cursor) {
+  products(first: $first, where: $where, orderBy: $orderBy, after: $after) {
+    edges {
+      ...ProductsEdgeDetail
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+    }
+  }
+}
+    ${ProductsEdgeDetail}
+${product_generated.ProductSelect}
+${productLittle_generated.ProductLittleSelect}
+${productOption_generated.ProductOptionSelect}
+${productOptionValue_generated.ProductOptionValueSelect}
+${media_generated.MediaSelect}
+${variant_generated.VariantSelect}
+${selectedOption_generated.SelectedOptionSelect}`;
+
+exports.ProductsDocument = ProductsDocument;
+exports.ProductsEdgeDetail = ProductsEdgeDetail;

package/dist/cjs/graphql/queries/published-theme-pages.generated.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var publishedThemePage_generated = require('../fragments/published-theme-page.generated.js');
+var publishedPageSection_generated = require('../fragments/published-page-section.generated.js');
+var publishedCustomSection_generated = require('../fragments/published-custom-section.generated.js');
+var dataSeo_generated = require('../fragments/data-seo.generated.js');
+var publishedThemeStyle_generated = require('../fragments/published-theme-style.generated.js');
+var analytic_generated = require('../fragments/analytic.generated.js');
+
+const PublishedThemePagesDocument = `
+    query publishedThemePages($slug: String, $slugType: PublishedThemePageType!) {
+  publishedThemePages(slug: $slug, slugType: $slugType) {
+    ...PublishedThemePageSelect
+  }
+}
+    ${publishedThemePage_generated.PublishedThemePageSelect}
+${publishedPageSection_generated.PublishedPageSectionSelect}
+${publishedCustomSection_generated.PublishedCustomSectionSelect}
+${dataSeo_generated.DataSeoSelect}
+${publishedThemeStyle_generated.PublishedThemeStyleSelect}
+${analytic_generated.AnalyticSelect}`;
+
+exports.PublishedThemePagesDocument = PublishedThemePagesDocument;

package/dist/cjs/graphql/queries/storeProperty.generated.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const StorePropertyDocument = `
+    query storeProperty {
+  storeProperty {
+    favicon
+    swatchesConfig
+  }
+}
+    `;
+
+exports.StorePropertyDocument = StorePropertyDocument;

package/dist/cjs/helpers/GlobalEvent.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const globalEvent = {
+    subscribe(callback) {
+        document.addEventListener('onDispatch', (e) => callback(e.detail));
+    },
+    dispatch(data) {
+        document.dispatchEvent(new CustomEvent('onDispatch', { detail: data }));
+    },
+    remove(callback) {
+        document.removeEventListener('onDispatch', callback);
+    },
+};
+
+exports.default = globalEvent;

package/dist/cjs/helpers/background.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var colors = require('./colors.js');
+var makeStyle = require('./make-style.js');
+
+const getStyleBackgroundByDevice = (background) => {
+    if (!background) {
+        return {};
+    }
+    return {
+        ...getStyleBgColor(background),
+        ...getStyleBgImage(background),
+        ...getStyleBgPosition(background),
+        ...getStyleBgSize(background),
+        ...getStyleBgRepeat(background),
+        ...getStyleBgAttachment(background),
+    };
+};
+const getStyleBgColor = (background) => {
+    const bgColor = {
+        desktop: getBgColorByDevice(background, 'desktop'),
+        tablet: getBgColorByDevice(background, 'tablet'),
+        mobile: getBgColorByDevice(background, 'mobile'),
+    };
+    return makeStyle.makeStyleResponsive('bgc', bgColor);
+};
+const getBgColorByDevice = (background, device) => {
+    return getColor(background?.[device]?.color);
+};
+const getColor = (color) => {
+    if (!color) {
+        return;
+    }
+    if (colors.isColor(color?.toString())) {
+        return color;
+    }
+    return `var(--g-c-${color})`;
+};
+const getStyleBgImage = (background) => {
+    const bgImage = {
+        // desktop:
+        //   background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
+        // tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
+        // mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
+        desktop: getBgImageByDevice(background, 'desktop'),
+        tablet: getBgImageByDevice(background, 'tablet'),
+        mobile: getBgImageByDevice(background, 'mobile'),
+    };
+    return makeStyle.makeStyleResponsive('bgi', bgImage);
+};
+const getBgImageByDevice = (background, device) => {
+    const imageByDevice = background?.[device]?.image?.src;
+    if (typeof imageByDevice === 'string') {
+        return `url(${imageByDevice})`;
+    }
+    return;
+};
+const getStyleBgPosition = (background) => {
+    const bgPosition = {
+        desktop: getBgPositionByDevice(background, 'desktop'),
+        tablet: getBgPositionByDevice(background, 'tablet'),
+        mobile: getBgPositionByDevice(background, 'mobile'),
+    };
+    return makeStyle.makeStyleResponsive('bgp', bgPosition);
+};
+const getBgPositionByDevice = (background, device) => {
+    const positionByDevice = background?.[device]?.position;
+    return positionByDevice && `${positionByDevice.x}% ${positionByDevice.y}%`;
+};
+const getStyleBgSize = (background) => {
+    const bgSize = {
+        desktop: getBgSizeByDevice(background, 'desktop'),
+        tablet: getBgSizeByDevice(background, 'tablet'),
+        mobile: getBgSizeByDevice(background, 'mobile'),
+    };
+    return makeStyle.makeStyleResponsive('bgs', bgSize);
+};
+const getBgSizeByDevice = (background, device) => {
+    return background?.[device]?.size;
+};
+const getStyleBgRepeat = (background) => {
+    const bgRepeat = {
+        desktop: getBgRepeatByDevice(background, 'desktop'),
+        tablet: getBgRepeatByDevice(background, 'tablet'),
+        mobile: getBgRepeatByDevice(background, 'mobile'),
+    };
+    return makeStyle.makeStyleResponsive('bgr', bgRepeat);
+};
+const getBgRepeatByDevice = (background, device) => {
+    return background?.[device]?.repeat;
+};
+const getStyleBgAttachment = (background) => {
+    const bgAttachment = {
+        desktop: getBgAttachmentByDevice(background, 'desktop'),
+        tablet: getBgAttachmentByDevice(background, 'tablet'),
+        mobile: getBgAttachmentByDevice(background, 'mobile'),
+    };
+    return makeStyle.makeStyleResponsive('bga', bgAttachment);
+};
+const getBgAttachmentByDevice = (background, device) => {
+    return background?.[device]?.attachment;
+};
+
+exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;

package/dist/cjs/helpers/borders.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var colors = require('./colors.js');
+var makeStyle = require('./make-style.js');
+
+const handleConvertBorderStyle = (value) => {
+    if (!value)
+        return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.border,
+                hover: data.desktop?.hover?.border,
+                focus: data.desktop?.focus?.border,
+            },
+            tablet: {
+                normal: data.tablet?.normal?.border,
+                hover: data.tablet?.hover?.border,
+                focus: data.tablet?.focus?.border,
+            },
+            mobile: {
+                normal: data.mobile?.normal?.border,
+                hover: data.mobile?.hover?.border,
+                focus: data.mobile?.focus?.border,
+            },
+        };
+        return makeStyle.makeStyleResponsiveState('bs', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.border,
+        hover: data?.hover?.border,
+        focus: data?.focus?.border,
+    };
+    return makeStyle.makeStyleState('bs', newVal);
+};
+const handleConvertBorderWidth = (value) => {
+    if (!value)
+        return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.width,
+                hover: data.desktop?.hover?.width,
+                focus: data.desktop?.focus?.width,
+            },
+            tablet: {
+                normal: data.tablet?.normal?.width,
+                hover: data.tablet?.hover?.width,
+                focus: data.tablet?.focus?.width,
+            },
+            mobile: {
+                normal: data.mobile?.normal?.width,
+                hover: data.mobile?.hover?.width,
+                focus: data.mobile?.focus?.width,
+            },
+        };
+        return makeStyle.makeStyleResponsiveState('bw', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.width,
+        hover: data?.hover?.width,
+        focus: data?.focus?.width,
+    };
+    return makeStyle.makeStyleState('bw', newVal);
+};
+const handleConvertBorderColor = (value) => {
+    if (!value)
+        return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color,
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color,
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color,
+            },
+        };
+        return colors.getGlobalColorStateResponsiveStyle('bc', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color,
+    };
+    return colors.getGlobalColorStateStyle('bc', newVal);
+};
+const handleConvertClassColor = (value) => {
+    if (!value)
+        return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color,
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color,
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color,
+            },
+        };
+        return colors.getGlobalColorStateResponsiveClass('border', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color,
+    };
+    return colors.getGlobalColorStateClass('border', newVal);
+};
+
+exports.handleConvertBorderColor = handleConvertBorderColor;
+exports.handleConvertBorderStyle = handleConvertBorderStyle;
+exports.handleConvertBorderWidth = handleConvertBorderWidth;
+exports.handleConvertClassColor = handleConvertClassColor;

package/dist/cjs/helpers/clone-deep.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const cloneDeep = (data) => JSON.parse(JSON.stringify(data));
+
+exports.cloneDeep = cloneDeep;

package/dist/cjs/helpers/cls.js

@@ -0,0 +1,20 @@
+'use strict';
+
+function toVal(mix) {
+    if (typeof mix === 'string') {
+        return mix;
+    }
+    else if (typeof mix === 'object' && mix !== null) {
+        return Object.keys(mix)
+            .filter((key) => mix[key])
+            .join(' ');
+    }
+    else {
+        return false;
+    }
+}
+function cls(...classes) {
+    return classes.map(toVal).filter(Boolean).join(' ');
+}
+
+exports.cls = cls;

package/dist/cjs/helpers/colors.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var isDefined = require('./is-defined.js');
+var constant = require('./constant.js');
+
+const getGlobalColorCSSProp = (color) => {
+    return getSingleColorVariable(color);
+};
+const getGlobalColorClass = (type, color) => {
+    if (typeof color !== 'string' ||
+        !color ||
+        color?.startsWith('#') ||
+        color?.startsWith('rgb') ||
+        color?.startsWith('hsl') ||
+        color?.startsWith('transparent'))
+        return '';
+    return `${type}-g-${color}`;
+};
+const getGlobalColorResponsiveClass = (type, data) => {
+    if (!data)
+        return '';
+    return Object.entries(data)
+        .map(([device, value]) => {
+        if (device === 'desktop') {
+            return getGlobalColorClass(type, value);
+        }
+        else {
+            return `${device}:${getGlobalColorClass(type, value)}`;
+        }
+    })
+        .join(' ');
+};
+const getGlobalColorStateClass = (type, data) => {
+    if (!data)
+        return '';
+    return Object.entries(data)
+        .map(([state, value]) => {
+        if (state === 'normal') {
+            return getGlobalColorClass(type, value);
+        }
+        else {
+            return `${state}:${getGlobalColorClass(type, value)}`;
+        }
+    })
+        .join(' ');
+};
+const getGlobalColorStateResponsiveClass = (type, data) => {
+    if (!data)
+        return '';
+    return Object.entries(data)
+        .map(([device, objectState]) => {
+        if (device === 'desktop') {
+            return Object.entries(objectState)
+                .map(([state, value]) => {
+                if (state === 'normal') {
+                    return getGlobalColorClass(type, value);
+                }
+                else {
+                    return `${state}:${getGlobalColorClass(type, value)}`;
+                }
+            })
+                .join(' ');
+        }
+        else {
+            return Object.entries(objectState)
+                .map(([state, value]) => {
+                if (state === 'normal') {
+                    return `${device}:${getGlobalColorClass(type, value)}`;
+                }
+                else {
+                    return `${device}:${state}:${getGlobalColorClass(type, value)}`;
+                }
+            })
+                .join(' ');
+        }
+    })
+        .join(' ');
+};
+const getGlobalColorResponsiveStyle = (type, data) => {
+    if (!data)
+        return {};
+    return Object.fromEntries(Object.entries(data).map(([device, value]) => {
+        if (device === 'desktop') {
+            return [`--${type}`, getSingleColorVariable(value)];
+        }
+        else {
+            return [`--${type}-${device}`, getSingleColorVariable(value)];
+        }
+    }));
+};
+const getGlobalColorStateStyle = (type, data) => {
+    if (!data)
+        return {};
+    return Object.fromEntries(Object.entries(data)
+        .map(([state, value]) => {
+        if (state === 'active')
+            return [];
+        return [`-${constant.stateMapping?.[state]}-${type}`, getSingleColorVariable(value)];
+    })
+        .filter(isDefined.isDefined));
+};
+const getGlobalColorStateResponsiveStyle = (type, data) => {
+    if (!data)
+        return {};
+    return Object.entries(data)
+        .map(([device, objectState]) => {
+        if (device === 'desktop') {
+            return Object.fromEntries(Object.entries(objectState)
+                .map(([state, value]) => {
+                if (state === 'active')
+                    return [];
+                return [`-${constant.stateMapping[state]}-${type}`, getSingleColorVariable(value)];
+            })
+                .filter(isDefined.isDefined));
+        }
+        else {
+            return Object.fromEntries(Object.entries(objectState)
+                .map(([state, value]) => {
+                if (state === 'active')
+                    return [];
+                return [`-${constant.stateMapping[state]}-${type}-${device}`, getSingleColorVariable(value)];
+            })
+                .filter(isDefined.isDefined));
+        }
+    })
+        .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+};
+const getSingleColorVariable = (color) => {
+    if (!color)
+        return undefined;
+    if (isColor(color))
+        return color;
+    return `var(--g-c-${color}, ${color})`;
+};
+function isColor(color) {
+    return (color?.startsWith('#') ||
+        color?.startsWith('rgb') ||
+        color?.startsWith('hsl') ||
+        color?.startsWith('transparent'));
+}
+const getGlobalColorStyle = (data) => {
+    if (!data)
+        return {};
+    return { '--c': getSingleColorVariable(data) };
+};
+
+exports.getGlobalColorCSSProp = getGlobalColorCSSProp;
+exports.getGlobalColorClass = getGlobalColorClass;
+exports.getGlobalColorResponsiveClass = getGlobalColorResponsiveClass;
+exports.getGlobalColorResponsiveStyle = getGlobalColorResponsiveStyle;
+exports.getGlobalColorStateClass = getGlobalColorStateClass;
+exports.getGlobalColorStateResponsiveClass = getGlobalColorStateResponsiveClass;
+exports.getGlobalColorStateResponsiveStyle = getGlobalColorStateResponsiveStyle;
+exports.getGlobalColorStateStyle = getGlobalColorStateStyle;
+exports.getGlobalColorStyle = getGlobalColorStyle;
+exports.getSingleColorVariable = getSingleColorVariable;
+exports.isColor = isColor;