@gem-sdk/components 2.5.3 → 2.5.5

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.
Files changed (7) hide show
  1. package/dist/cjs/grid/components/Row.js +9 -2
  2. package/dist/cjs/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js +6 -1
  3. package/dist/cjs/product/setting/product-image-v2/ProductFeatureImage.js +11 -6
  4. package/dist/esm/grid/components/Row.js +10 -3
  5. package/dist/esm/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js +6 -1
  6. package/dist/esm/product/setting/product-image-v2/ProductFeatureImage.js +11 -6
  7. package/package.json +2 -2
package/dist/cjs/grid/components/Row.js CHANGED
@@ -13,6 +13,7 @@ var ChildrenDroppable = require('./ChildrenDroppable.js');
13
13
  const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
14
14
  const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
15
15
  const mode = core.useEditorMode();
16
+ const pageType = core.usePageType();
16
17
  //=== START lazyload section ====
17
18
  const [cacheHeightOutViewport, setCacheHeightOutViewport] = React.useState(500);
18
19
  const [ref, inView] = useInView.useInView({
@@ -29,6 +30,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
29
30
  }
30
31
  }
31
32
  });
33
+ const isDisplaySection = React.useMemo(()=>{
34
+ return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
35
+ }, [
36
+ inView,
37
+ mode,
38
+ pageType
39
+ ]);
32
40
  //=== END lazyload section ====
33
41
  const childHasChildren = React.useMemo(()=>{
34
42
  return builderProps?.builderData?.childrens?.length;
@@ -43,7 +51,6 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
43
51
  children
44
52
  ]);
45
53
  const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
46
- const pageType = core.usePageType();
47
54
  const styleObject = helpers.createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
48
55
  desktop: false,
49
56
  tablet: false,
@@ -119,7 +126,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
119
126
  className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
120
127
  'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
121
128
  }),
122
- children: inView || mode !== 'edit' ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
129
+ children: isDisplaySection ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
123
130
  children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : React.Children.map(children, (el)=>{
124
131
  if (/*#__PURE__*/ React.isValidElement(el)) return /*#__PURE__*/ React.createElement(el.type, {
125
132
  ...el.props,
package/dist/cjs/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js CHANGED
@@ -123,7 +123,12 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
123
123
  return core.template`
124
124
  {% assign src = featureMedia.src %}
125
125
  ${hasHoverEffect && setting.hoverEffect == 'other' ? `
126
- {% assign otherImage = product.media[${setting.otherImage}] %}
126
+ {% assign media_length = product.media | size %}
127
+ {% assign other_image_index = ${setting.otherImage} | plus: 0 %}
128
+ {% if other_image_index >= media_length %}
129
+ {% assign other_image_index = media_length | minus: 1 %}
130
+ {% endif %}
131
+ {% assign otherImage = product.media[other_image_index] %}
127
132
  {% assign src = otherImage.src %}
128
133
  {% if otherImage.media_type != 'image' %}
129
134
  {% assign src = otherImage.preview_image.src %}
package/dist/cjs/product/setting/product-image-v2/ProductFeatureImage.js CHANGED
@@ -70,23 +70,28 @@ const productFeatureImageSetting = [
70
70
  {
71
71
  id: 'otherImage',
72
72
  label: 'Other image',
73
- type: 'select',
74
- options: [
73
+ type: 'dropdown:input',
74
+ inputType: 'number',
75
+ useOnlyUnitInit: true,
76
+ hideUnit: true,
77
+ isReturnNumber: true,
78
+ isIndexValue: true,
79
+ displayOptions: [
75
80
  {
76
81
  label: 'Image 1',
77
- value: 0
82
+ value: 1
78
83
  },
79
84
  {
80
85
  label: 'Image 2',
81
- value: 1
86
+ value: 2
82
87
  },
83
88
  {
84
89
  label: 'Image 3',
85
- value: 2
90
+ value: 3
86
91
  },
87
92
  {
88
93
  label: 'Image 4',
89
- value: 3
94
+ value: 4
90
95
  },
91
96
  {
92
97
  label: 'Last image',
package/dist/esm/grid/components/Row.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { useState, useMemo, Children, isValidElement, createElement } from 'react';
3
- import { useEditorMode, useCurrentDevice, isEmptyChildren, usePageType, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
3
+ import { useEditorMode, usePageType, useCurrentDevice, isEmptyChildren, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
4
4
  import Head from 'next/head';
5
5
  import { useInView } from '../../intersection-observer/useInView.js';
6
6
  import { createStyleObject } from './helpers.js';
@@ -9,6 +9,7 @@ import ChildrenDroppable from './ChildrenDroppable.js';
9
9
  const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
10
10
  const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
11
11
  const mode = useEditorMode();
12
+ const pageType = usePageType();
12
13
  //=== START lazyload section ====
13
14
  const [cacheHeightOutViewport, setCacheHeightOutViewport] = useState(500);
14
15
  const [ref, inView] = useInView({
@@ -25,6 +26,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
25
26
  }
26
27
  }
27
28
  });
29
+ const isDisplaySection = useMemo(()=>{
30
+ return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
31
+ }, [
32
+ inView,
33
+ mode,
34
+ pageType
35
+ ]);
28
36
  //=== END lazyload section ====
29
37
  const childHasChildren = useMemo(()=>{
30
38
  return builderProps?.builderData?.childrens?.length;
@@ -39,7 +47,6 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
39
47
  children
40
48
  ]);
41
49
  const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
42
- const pageType = usePageType();
43
50
  const styleObject = createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
44
51
  desktop: false,
45
52
  tablet: false,
@@ -115,7 +122,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
115
122
  className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
116
123
  'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
117
124
  }),
118
- children: inView || mode !== 'edit' ? /*#__PURE__*/ jsx(Fragment, {
125
+ children: isDisplaySection ? /*#__PURE__*/ jsx(Fragment, {
119
126
  children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : Children.map(children, (el)=>{
120
127
  if (/*#__PURE__*/ isValidElement(el)) return /*#__PURE__*/ createElement(el.type, {
121
128
  ...el.props,
package/dist/esm/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js CHANGED
@@ -119,7 +119,12 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
119
119
  return template`
120
120
  {% assign src = featureMedia.src %}
121
121
  ${hasHoverEffect && setting.hoverEffect == 'other' ? `
122
- {% assign otherImage = product.media[${setting.otherImage}] %}
122
+ {% assign media_length = product.media | size %}
123
+ {% assign other_image_index = ${setting.otherImage} | plus: 0 %}
124
+ {% if other_image_index >= media_length %}
125
+ {% assign other_image_index = media_length | minus: 1 %}
126
+ {% endif %}
127
+ {% assign otherImage = product.media[other_image_index] %}
123
128
  {% assign src = otherImage.src %}
124
129
  {% if otherImage.media_type != 'image' %}
125
130
  {% assign src = otherImage.preview_image.src %}
package/dist/esm/product/setting/product-image-v2/ProductFeatureImage.js CHANGED
@@ -68,23 +68,28 @@ const productFeatureImageSetting = [
68
68
  {
69
69
  id: 'otherImage',
70
70
  label: 'Other image',
71
- type: 'select',
72
- options: [
71
+ type: 'dropdown:input',
72
+ inputType: 'number',
73
+ useOnlyUnitInit: true,
74
+ hideUnit: true,
75
+ isReturnNumber: true,
76
+ isIndexValue: true,
77
+ displayOptions: [
73
78
  {
74
79
  label: 'Image 1',
75
- value: 0
80
+ value: 1
76
81
  },
77
82
  {
78
83
  label: 'Image 2',
79
- value: 1
84
+ value: 2
80
85
  },
81
86
  {
82
87
  label: 'Image 3',
83
- value: 2
88
+ value: 3
84
89
  },
85
90
  {
86
91
  label: 'Image 4',
87
- value: 3
92
+ value: 4
88
93
  },
89
94
  {
90
95
  label: 'Last image',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.5.3",
3
+ "version": "2.5.5",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
21
21
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
22
22
  },
23
23
  "devDependencies": {
24
- "@gem-sdk/core": "2.4.11",
24
+ "@gem-sdk/core": "2.5.5",
25
25
  "@gem-sdk/styles": "2.4.8",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },