@gem-sdk/components 2.2.0-staging.54 → 2.2.0-staging.56

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 (10) hide show
  1. package/dist/cjs/accordion/components/AccordionItem.liquid.js +11 -14
  2. package/dist/cjs/button/components/Button.liquid.js +4 -4
  3. package/dist/cjs/product/components/ProductButton.liquid.js +3 -3
  4. package/dist/cjs/third-party/components/Releasit.liquid.js +0 -1
  5. package/dist/esm/accordion/components/AccordionItem.liquid.js +11 -14
  6. package/dist/esm/button/components/Button.liquid.js +4 -4
  7. package/dist/esm/product/components/ProductButton.liquid.js +3 -3
  8. package/dist/esm/third-party/components/Releasit.liquid.js +0 -1
  9. package/dist/types/index.d.ts +2 -2
  10. package/package.json +2 -2
package/dist/cjs/accordion/components/AccordionItem.liquid.js CHANGED
@@ -71,10 +71,17 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
71
71
  return '';
72
72
  };
73
73
  const composeColorIconStyle = ()=>{
74
- return `.${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon, .${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-icon {
75
- color: ${isShow ? color?.active : color?.hover}
76
- } {
77
- }`;
74
+ return `.gp-accordion-item-${parentUid}-${index}:hover
75
+ {
76
+ .gp-collapsible-icon {
77
+ color: ${isShow ? color?.active : color?.hover}
78
+ }
79
+
80
+ .gp-icon {
81
+ color: ${isShow ? iconColor?.active : iconColor?.hover}
82
+ }
83
+ }
84
+ `;
78
85
  };
79
86
  const getTemplateRow = ()=>{
80
87
  return {
@@ -82,16 +89,6 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
82
89
  };
83
90
  };
84
91
  return core.template`
85
- <style title="gp-accordion-item-style">
86
- .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-hover, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-hover
87
- {
88
- color: ${color?.hover} !important
89
- }
90
- .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
91
- {
92
- color: ${color?.active} !important
93
- }
94
- </style>
95
92
  <div class="gp-overflow-clip" style="${{
96
93
  ...widthStyle,
97
94
  '--height-iconCollapseSize': `${iconCollapseSize || 16}px`,
package/dist/cjs/button/components/Button.liquid.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var core = require('@gem-sdk/core');
6
6
  var helpers = require('../../helpers.js');
7
7
 
8
- const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
8
+ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = false })=>{
9
9
  const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
10
10
  const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
11
11
  const [wrapStyle, restStyle] = core.splitStyle([
@@ -50,7 +50,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
50
50
  color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
51
51
  }
52
52
 
53
- .${builderProps?.uid} .gp-button-icon {
53
+ .${builderProps?.uid} .gp-button-icon {
54
54
  color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
55
55
  }
56
56
 
@@ -63,14 +63,14 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
63
63
  }
64
64
 
65
65
  .${builderProps?.uid} .gp-product-dot-price {
66
- color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
66
+ color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
67
67
  }
68
68
 
69
69
  .${builderProps?.uid}:hover .gp-product-dot-price {
70
70
  color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
71
71
  }
72
72
  `;
73
- const labelValDisplay = isForceValue ? label : helpers.getDynamicSourceLocales({
73
+ const labelValDisplay = !isUseTranslatedValue ? label : helpers.getDynamicSourceLocales({
74
74
  val: label,
75
75
  uid: builderProps?.uidTranslate ?? builderProps?.uid,
76
76
  settingId: translate ?? 'label',
package/dist/cjs/product/components/ProductButton.liquid.js CHANGED
@@ -211,8 +211,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
211
211
  <gp-product-button
212
212
  class="gp-product-button"
213
213
  gp-data-wrapper="true"
214
- label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
215
- label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
214
+ gp-label-out-of-stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
215
+ gp-label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
216
216
  gp-data='${JSON.stringify({
217
217
  setting: {
218
218
  actionEffect: setting?.actionEffect,
@@ -310,7 +310,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
310
310
  },
311
311
  pageContext,
312
312
  nodePrice: composeNodePrice(),
313
- isForceValue: true
313
+ isUseTranslatedValue: true
314
314
  })}
315
315
  </gp-product-button>
316
316
  ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
package/dist/cjs/third-party/components/Releasit.liquid.js CHANGED
@@ -7,7 +7,6 @@ var core = require('@gem-sdk/core');
7
7
 
8
8
  const Releasit = ({ setting, advanced })=>{
9
9
  const { align, version, appBlockId } = setting ?? {};
10
- console.log('version', version);
11
10
  return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : core.template`
12
11
  <div
13
12
  class="${advanced?.cssClass}"
package/dist/esm/accordion/components/AccordionItem.liquid.js CHANGED
@@ -67,10 +67,17 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
67
67
  return '';
68
68
  };
69
69
  const composeColorIconStyle = ()=>{
70
- return `.${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon, .${parentUid}.gp-accordion-item-${parentUid}-${index}:hover .gp-icon {
71
- color: ${isShow ? color?.active : color?.hover}
72
- } {
73
- }`;
70
+ return `.gp-accordion-item-${parentUid}-${index}:hover
71
+ {
72
+ .gp-collapsible-icon {
73
+ color: ${isShow ? color?.active : color?.hover}
74
+ }
75
+
76
+ .gp-icon {
77
+ color: ${isShow ? iconColor?.active : iconColor?.hover}
78
+ }
79
+ }
80
+ `;
74
81
  };
75
82
  const getTemplateRow = ()=>{
76
83
  return {
@@ -78,16 +85,6 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
78
85
  };
79
86
  };
80
87
  return template`
81
- <style title="gp-accordion-item-style">
82
- .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-hover, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-hover
83
- {
84
- color: ${color?.hover} !important
85
- }
86
- .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
87
- {
88
- color: ${color?.active} !important
89
- }
90
- </style>
91
88
  <div class="gp-overflow-clip" style="${{
92
89
  ...widthStyle,
93
90
  '--height-iconCollapseSize': `${iconCollapseSize || 16}px`,
package/dist/esm/button/components/Button.liquid.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { splitStyle, makeStyleResponsive, makeGlobalSize, composeTypographyClassName, composeTypographyStyle, composeBorderCss, composeCornerCss, getSingleColorVariable, template, cls, getGlobalColorStateClass, getGlobalColorStateStyle, composeRadius, getStyleShadowState, composeSize, getGradientBgrStyleForButton, RenderIf } from '@gem-sdk/core';
2
2
  import { getInsertLinkData, getDynamicSourceLocales } from '../../helpers.js';
3
3
 
4
- const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
4
+ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = false })=>{
5
5
  const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
6
6
  const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
7
7
  const [wrapStyle, restStyle] = splitStyle([
@@ -46,7 +46,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
46
46
  color: ${getSingleColorVariable(styles?.textColor?.hover)};
47
47
  }
48
48
 
49
- .${builderProps?.uid} .gp-button-icon {
49
+ .${builderProps?.uid} .gp-button-icon {
50
50
  color: ${getSingleColorVariable(styles?.textColor?.normal)};
51
51
  }
52
52
 
@@ -59,14 +59,14 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
59
59
  }
60
60
 
61
61
  .${builderProps?.uid} .gp-product-dot-price {
62
- color: ${getSingleColorVariable(styles?.textColor?.normal)};
62
+ color: ${getSingleColorVariable(styles?.textColor?.normal)};
63
63
  }
64
64
 
65
65
  .${builderProps?.uid}:hover .gp-product-dot-price {
66
66
  color: ${getSingleColorVariable(styles?.textColor?.hover)};
67
67
  }
68
68
  `;
69
- const labelValDisplay = isForceValue ? label : getDynamicSourceLocales({
69
+ const labelValDisplay = !isUseTranslatedValue ? label : getDynamicSourceLocales({
70
70
  val: label,
71
71
  uid: builderProps?.uidTranslate ?? builderProps?.uid,
72
72
  settingId: translate ?? 'label',
package/dist/esm/product/components/ProductButton.liquid.js CHANGED
@@ -207,8 +207,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
207
207
  <gp-product-button
208
208
  class="gp-product-button"
209
209
  gp-data-wrapper="true"
210
- label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
211
- label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
210
+ gp-label-out-of-stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
211
+ gp-label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
212
212
  gp-data='${JSON.stringify({
213
213
  setting: {
214
214
  actionEffect: setting?.actionEffect,
@@ -306,7 +306,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
306
306
  },
307
307
  pageContext,
308
308
  nodePrice: composeNodePrice(),
309
- isForceValue: true
309
+ isUseTranslatedValue: true
310
310
  })}
311
311
  </gp-product-button>
312
312
  ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
package/dist/esm/third-party/components/Releasit.liquid.js CHANGED
@@ -3,7 +3,6 @@ import { template, makeStyleResponsive } from '@gem-sdk/core';
3
3
 
4
4
  const Releasit = ({ setting, advanced })=>{
5
5
  const { align, version, appBlockId } = setting ?? {};
6
- console.log('version', version);
7
6
  return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : template`
8
7
  <div
9
8
  class="${advanced?.cssClass}"
package/dist/types/index.d.ts CHANGED
@@ -5437,11 +5437,11 @@ type ButtonLiquidProps = MixedProps & ButtonProps & {
5437
5437
  advanced?: any;
5438
5438
  pageContext?: PageContext;
5439
5439
  nodePrice?: string | null;
5440
- isForceValue?: boolean;
5440
+ isUseTranslatedValue?: boolean;
5441
5441
  } & {
5442
5442
  dataId?: string;
5443
5443
  };
5444
- declare const Button: ({ className, builderProps, customAttrs, pageContext, setting, styles, style, wrapClassName, advanced, nodePrice, dataId, isForceValue, }: ButtonLiquidProps) => string;
5444
+ declare const Button: ({ className, builderProps, customAttrs, pageContext, setting, styles, style, wrapClassName, advanced, nodePrice, dataId, isUseTranslatedValue, }: ButtonLiquidProps) => string;
5445
5445
 
5446
5446
  declare const Coupon: ({ setting, builderProps, builderAttrs, style, styles, advanced, pageContext, }: _gem_sdk_core.BaseProps<{
5447
5447
  copyContent?: string | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.2.0-staging.54",
3
+ "version": "2.2.0-staging.56",
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.2.0-staging.50",
24
+ "@gem-sdk/core": "2.2.0-staging.56",
25
25
  "@gem-sdk/styles": "2.2.0-staging.52",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },