@gem-sdk/components 2.1.10 → 2.1.11

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 (9) hide show
  1. package/dist/cjs/grid/components/Row.js +8 -7
  2. package/dist/cjs/grid/components/Row.liquid.js +13 -11
  3. package/dist/cjs/product/components/ProductVariants/variants/index.js +1 -1
  4. package/dist/cjs/product/components/ProductVariants/variants/index.liquid.js +1 -1
  5. package/dist/esm/grid/components/Row.js +8 -7
  6. package/dist/esm/grid/components/Row.liquid.js +13 -11
  7. package/dist/esm/product/components/ProductVariants/variants/index.js +1 -1
  8. package/dist/esm/product/components/ProductVariants/variants/index.liquid.js +1 -1
  9. package/package.json +2 -2
package/dist/cjs/grid/components/Row.js CHANGED
@@ -55,11 +55,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
55
55
  'left',
56
56
  'bottom',
57
57
  'right',
58
- 'z'
58
+ 'z',
59
+ 'ml',
60
+ 'mr'
59
61
  ], style);
60
62
  const getStyles = ()=>{
61
63
  let result = {
62
- ...isSection ? restStyle : style,
64
+ ...restStyle,
63
65
  ...core.makeStyleResponsive('cg', verticalGutter),
64
66
  ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
65
67
  ...core.makeStyleResponsive('w', styleObject.content)
@@ -117,7 +119,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
117
119
  ref: ref,
118
120
  style: getStyles(),
119
121
  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
- 'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
122
+ 'gp-content-visibility-hidden': mode !== 'edit' && lazy && !inView
121
123
  }),
122
124
  children: inView || mode !== 'edit' ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
123
125
  children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : React.Children.map(children, (el)=>{
@@ -156,16 +158,15 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
156
158
  })
157
159
  ]
158
160
  }),
159
- isSection ? /*#__PURE__*/ jsxRuntime.jsx(Element, {
160
- className: "gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full",
161
+ /*#__PURE__*/ jsxRuntime.jsx(Element, {
162
+ className: "gp-max-w-full [&_*]:gp-max-w-full",
161
163
  style: {
162
164
  ...wrapStyle,
163
- ...core.makeStyleResponsive('w', styleObject.wrapper),
164
165
  ...core.makeStyleResponsive('pl', styleObject.padding),
165
166
  ...core.makeStyleResponsive('pr', styleObject.padding)
166
167
  },
167
168
  children: element
168
- }) : element
169
+ })
169
170
  ]
170
171
  });
171
172
  };
package/dist/cjs/grid/components/Row.liquid.js CHANGED
@@ -16,7 +16,9 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
16
16
  'left',
17
17
  'bottom',
18
18
  'right',
19
- 'z'
19
+ 'z',
20
+ 'ml',
21
+ 'mr'
20
22
  ], style);
21
23
  const element = core.template`
22
24
  <div
@@ -26,7 +28,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
26
28
  'data-id': builderProps?.uidInteraction ?? builderProps?.uid
27
29
  }}
28
30
  style="${{
29
- ...isSection ? restStyle : style,
31
+ ...restStyle,
30
32
  ...core.makeStyleResponsive('cg', verticalGutter),
31
33
  ...core.makeStyleResponsive('pc', horizontalAlign),
32
34
  ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
@@ -53,21 +55,21 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
53
55
  }))}
54
56
  </div>
55
57
  `;
58
+ const elementTag = isSection ? 'section' : 'div';
56
59
  return core.template`
57
60
  ${core.RenderIf(!!styles?.preloadBgImage, `${core.RenderIf(!!background?.desktop?.image?.src, `<link rel="preload" href="${background?.desktop?.image?.src}" as="image" />`)}${core.RenderIf(!!background?.tablet?.image?.src, `<link rel="preload" href="${background?.tablet?.image?.src}" as="image" />`)}${core.RenderIf(!!background?.mobile?.image?.src, `<link rel="preload" href="${background?.mobile?.image?.src}" as="image" />`)}`)}
58
- ${isSection ? core.template`
59
- <section
60
- class="gp-mx-auto gp-max-w-full ${helpers.getSettingPreloadData('gps-lazy')}"
61
- style="${{
61
+ ${core.template`
62
+ <${elementTag}
63
+ class="gp-max-w-full ${isSection ? helpers.getSettingPreloadData('gps-lazy') : ''}"
64
+ style="${{
62
65
  ...wrapStyle,
63
- ...core.makeStyleResponsive('w', styleObject.wrapper),
64
66
  ...core.makeStyleResponsive('pl', styleObject.padding),
65
67
  ...core.makeStyleResponsive('pr', styleObject.padding)
66
68
  }}"
67
- >
68
- ${element}
69
- </section>
70
- ` : element}
69
+ >
70
+ ${element}
71
+ </${elementTag}>
72
+ `}
71
73
  `;
72
74
  };
73
75
 
package/dist/cjs/product/components/ProductVariants/variants/index.js CHANGED
@@ -80,7 +80,7 @@ const VariantItem = ({ name, variantKey, optionName, optionValue, ...props })=>{
80
80
  htmlFor: `${props.uid}-${variantKey}`,
81
81
  children: [
82
82
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
83
- className: "gp-invisible !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-visible gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]",
83
+ className: "gp-invisible mobile:gp-overflow-hidden mobile:!gp-max-w-[0px] !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-visible gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] mobile:gp-px-[0px] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute mobile:after:gp-p-[0px] after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]",
84
84
  children: [
85
85
  /*#__PURE__*/ jsxRuntime.jsx("p", {
86
86
  className: "gp-text-[#F9F9F9]",
package/dist/cjs/product/components/ProductVariants/variants/index.liquid.js CHANGED
@@ -120,7 +120,7 @@ const VariantItem = ({ name, variantKey, value, id, activeClass, optionPosition,
120
120
  for="{{product.id}}-${props.uid}-${variantKey}"
121
121
  class="gp-group gp-relative option-item gp-child-item-${props.uid}"
122
122
  >
123
- <div class="gp-invisible !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-visible gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]">
123
+ <div class="gp-invisible mobile:gp-overflow-hidden mobile:!gp-max-w-[0px] !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-visible gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] mobile:gp-px-[0px] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute mobile:after:gp-p-[0px] after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]">
124
124
  <p class="gp-text-[#F9F9F9]">${value?.label}</p>
125
125
  <svg class="gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]" width="8" height="4" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
126
126
  <path d="M8 10L0 0L16 1.41326e-06L8 10Z" fill="#333333"/>
package/dist/esm/grid/components/Row.js CHANGED
@@ -51,11 +51,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
51
51
  'left',
52
52
  'bottom',
53
53
  'right',
54
- 'z'
54
+ 'z',
55
+ 'ml',
56
+ 'mr'
55
57
  ], style);
56
58
  const getStyles = ()=>{
57
59
  let result = {
58
- ...isSection ? restStyle : style,
60
+ ...restStyle,
59
61
  ...makeStyleResponsive('cg', verticalGutter),
60
62
  ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
61
63
  ...makeStyleResponsive('w', styleObject.content)
@@ -113,7 +115,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
113
115
  ref: ref,
114
116
  style: getStyles(),
115
117
  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
- 'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
118
+ 'gp-content-visibility-hidden': mode !== 'edit' && lazy && !inView
117
119
  }),
118
120
  children: inView || mode !== 'edit' ? /*#__PURE__*/ jsx(Fragment, {
119
121
  children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : Children.map(children, (el)=>{
@@ -152,16 +154,15 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
152
154
  })
153
155
  ]
154
156
  }),
155
- isSection ? /*#__PURE__*/ jsx(Element, {
156
- className: "gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full",
157
+ /*#__PURE__*/ jsx(Element, {
158
+ className: "gp-max-w-full [&_*]:gp-max-w-full",
157
159
  style: {
158
160
  ...wrapStyle,
159
- ...makeStyleResponsive('w', styleObject.wrapper),
160
161
  ...makeStyleResponsive('pl', styleObject.padding),
161
162
  ...makeStyleResponsive('pr', styleObject.padding)
162
163
  },
163
164
  children: element
164
- }) : element
165
+ })
165
166
  ]
166
167
  });
167
168
  };
package/dist/esm/grid/components/Row.liquid.js CHANGED
@@ -12,7 +12,9 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
12
12
  'left',
13
13
  'bottom',
14
14
  'right',
15
- 'z'
15
+ 'z',
16
+ 'ml',
17
+ 'mr'
16
18
  ], style);
17
19
  const element = template`
18
20
  <div
@@ -22,7 +24,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
22
24
  'data-id': builderProps?.uidInteraction ?? builderProps?.uid
23
25
  }}
24
26
  style="${{
25
- ...isSection ? restStyle : style,
27
+ ...restStyle,
26
28
  ...makeStyleResponsive('cg', verticalGutter),
27
29
  ...makeStyleResponsive('pc', horizontalAlign),
28
30
  ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
@@ -49,21 +51,21 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
49
51
  }))}
50
52
  </div>
51
53
  `;
54
+ const elementTag = isSection ? 'section' : 'div';
52
55
  return template`
53
56
  ${RenderIf(!!styles?.preloadBgImage, `${RenderIf(!!background?.desktop?.image?.src, `<link rel="preload" href="${background?.desktop?.image?.src}" as="image" />`)}${RenderIf(!!background?.tablet?.image?.src, `<link rel="preload" href="${background?.tablet?.image?.src}" as="image" />`)}${RenderIf(!!background?.mobile?.image?.src, `<link rel="preload" href="${background?.mobile?.image?.src}" as="image" />`)}`)}
54
- ${isSection ? template`
55
- <section
56
- class="gp-mx-auto gp-max-w-full ${getSettingPreloadData('gps-lazy')}"
57
- style="${{
57
+ ${template`
58
+ <${elementTag}
59
+ class="gp-max-w-full ${isSection ? getSettingPreloadData('gps-lazy') : ''}"
60
+ style="${{
58
61
  ...wrapStyle,
59
- ...makeStyleResponsive('w', styleObject.wrapper),
60
62
  ...makeStyleResponsive('pl', styleObject.padding),
61
63
  ...makeStyleResponsive('pr', styleObject.padding)
62
64
  }}"
63
- >
64
- ${element}
65
- </section>
66
- ` : element}
65
+ >
66
+ ${element}
67
+ </${elementTag}>
68
+ `}
67
69
  `;
68
70
  };
69
71
 
package/dist/esm/product/components/ProductVariants/variants/index.js CHANGED
@@ -76,7 +76,7 @@ const VariantItem = ({ name, variantKey, optionName, optionValue, ...props })=>{
76
76
  htmlFor: `${props.uid}-${variantKey}`,
77
77
  children: [
78
78
  /*#__PURE__*/ jsxs("div", {
79
- className: "gp-invisible !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-visible gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]",
79
+ className: "gp-invisible mobile:gp-overflow-hidden mobile:!gp-max-w-[0px] !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-visible gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] mobile:gp-px-[0px] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute mobile:after:gp-p-[0px] after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]",
80
80
  children: [
81
81
  /*#__PURE__*/ jsx("p", {
82
82
  className: "gp-text-[#F9F9F9]",
package/dist/esm/product/components/ProductVariants/variants/index.liquid.js CHANGED
@@ -116,7 +116,7 @@ const VariantItem = ({ name, variantKey, value, id, activeClass, optionPosition,
116
116
  for="{{product.id}}-${props.uid}-${variantKey}"
117
117
  class="gp-group gp-relative option-item gp-child-item-${props.uid}"
118
118
  >
119
- <div class="gp-invisible !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-visible gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]">
119
+ <div class="gp-invisible mobile:gp-overflow-hidden mobile:!gp-max-w-[0px] !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-visible gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] mobile:gp-px-[0px] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute mobile:after:gp-p-[0px] after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]">
120
120
  <p class="gp-text-[#F9F9F9]">${value?.label}</p>
121
121
  <svg class="gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]" width="8" height="4" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
122
122
  <path d="M8 10L0 0L16 1.41326e-06L8 10Z" fill="#333333"/>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.1.10",
3
+ "version": "2.1.11",
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.1.9",
24
+ "@gem-sdk/core": "2.1.11",
25
25
  "@gem-sdk/styles": "2.1.0",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },