@gem-sdk/components 4.0.0-staging.1167 → 4.0.0-staging.1168
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.
- package/dist/cjs/collection/components/collection-description/CollectionDescription.js +1 -1
- package/dist/cjs/collection/components/collection-description/CollectionDescription.liquid.js +1 -1
- package/dist/cjs/product/components/product-badge/ProductBadge.liquid.js +4 -4
- package/dist/cjs/product/components/product-description/ProductDescription.js +1 -1
- package/dist/cjs/product/components/product-description/ProductDescription.liquid.js +8 -7
- package/dist/cjs/product/components/product-description/common/styles.js +6 -5
- package/dist/esm/collection/components/collection-description/CollectionDescription.js +1 -1
- package/dist/esm/collection/components/collection-description/CollectionDescription.liquid.js +13 -13
- package/dist/esm/product/components/product-badge/ProductBadge.liquid.js +19 -19
- package/dist/esm/product/components/product-description/ProductDescription.js +1 -1
- package/dist/esm/product/components/product-description/ProductDescription.liquid.js +8 -7
- package/dist/esm/product/components/product-description/common/styles.js +7 -6
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),system=require("@gem-sdk/system"),helpers=require("./common/helpers.js"),useDescription=require("../../hooks/useDescription.js");const DescriptionNotFoundString="This collection does not have a description",CollectionDescription=({setting:e,builderProps:s,pageContext:t,advanced:l})=>{let r=core.useCollection(),{ref:i,open:a,isShowViewMore:n,handleToggleShowMore:c,hasLineClamp:o}=useDescription.useGpDescription(e),m=r?.descriptionHtml,u=system.createClass(classes.getClassContainerCollectionDes({setting:e})),y=system.createClass(classes.getClassEmptyCollectionDes()),p=system.createClass(classes.getClassButtonViewMore({setting:e})),d=system.createClass(classes.getDescriptionClasses({advanced:l})),x=system.createClass({...classes.getShowMoreIconClasses(),...a?{"gp-rotate-180":!0}:{}}),j=system.createClass(classes.getShowMoreTextClasses()),C=system.createClass(classes.getClassPreBuilt()),g=system.createStyle({...styles.getDefaultStyleCollectionDes({setting:e}),...a?{}:core.makeStyleResponsive("line-clamp",core.makeLineClamp(e?.lineClamp,e?.hasLineClamp))}),h=system.createStyle({...styles.getStyleDefaultViewMore(e)}),S=helpers.getViewLessText({setting:e,builderProps:s,pageContext:t,type:"react"}),D=helpers.getViewMoreText({setting:e,builderProps:s,pageContext:t,type:"react"}),R=system.createAttr({"data-id":`${s?.uid}`}),
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),system=require("@gem-sdk/system"),helpers=require("./common/helpers.js"),useDescription=require("../../hooks/useDescription.js");const DescriptionNotFoundString="This collection does not have a description",CollectionDescription=({setting:e,builderProps:s,pageContext:t,advanced:l})=>{let r=core.useCollection(),{ref:i,open:a,isShowViewMore:n,handleToggleShowMore:c,hasLineClamp:o}=useDescription.useGpDescription(e),m=r?.descriptionHtml,u=system.createClass(classes.getClassContainerCollectionDes({setting:e})),y=system.createClass(classes.getClassEmptyCollectionDes()),p=system.createClass(classes.getClassButtonViewMore({setting:e})),d=system.createClass(classes.getDescriptionClasses({advanced:l})),x=system.createClass({...classes.getShowMoreIconClasses(),...a?{"gp-rotate-180":!0}:{}}),j=system.createClass(classes.getShowMoreTextClasses()),C=system.createClass(classes.getClassPreBuilt()),g=system.createStyle({...styles.getDefaultStyleCollectionDes({setting:e}),...a?{}:core.makeStyleResponsive("line-clamp",core.makeLineClamp(e?.lineClamp,e?.hasLineClamp))}),h=system.createStyle({...styles.getStyleDefaultViewMore(e)}),S=helpers.getViewLessText({setting:e,builderProps:s,pageContext:t,type:"react"}),D=helpers.getViewMoreText({setting:e,builderProps:s,pageContext:t,type:"react"}),R=system.createAttr({"data-id":`${s?.uid}`}),I=system.createAttr({"data-gp-text":""}),{gpDescriptionCss:M,textDescriptionCss:f}=styles.getStaticCss();return jsxRuntime.jsx(jsxRuntime.Fragment,{children:system.If(!m,jsxRuntime.jsx("div",{className:y,dangerouslySetInnerHTML:{__html:"This collection does not have a description"}}),jsxRuntime.jsxs("div",{...R,className:d,children:[jsxRuntime.jsx("style",{children:f}),jsxRuntime.jsx("style",{children:M}),jsxRuntime.jsx("div",{className:C}),jsxRuntime.jsx("div",{ref:i,className:u,style:g,dangerouslySetInnerHTML:{__html:r?.descriptionHtml??""},...I}),system.If(o&&n,jsxRuntime.jsxs("button",{type:"button",className:p,style:h,onClick:c,children:[jsxRuntime.jsx("span",{className:j,children:system.If(a,S?.toString()??"",D?.toString()??"")}),system.If(e?.enableViewMoreIcon,jsxRuntime.jsx("span",{className:x,dangerouslySetInnerHTML:{__html:helpers.ICON_SVG}}),"")]}),"")]}))})};exports.default=CollectionDescription;
|
package/dist/cjs/collection/components/collection-description/CollectionDescription.liquid.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
gp-data='${JSON.stringify(v).replaceAll("'","'")}'
|
|
6
6
|
>
|
|
7
7
|
<style>${u}</style>
|
|
8
|
-
|
|
8
|
+
<style>${C}</style>
|
|
9
9
|
<div class="${n}" ></div>
|
|
10
10
|
${system.LiquidUnless("collection","<p>Collection not found</p>",core.template`<div ${g} class="${i}" style="${p}">
|
|
11
11
|
{{collection.description}}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),common=require("./utils/common.js"),generateLiquidContent=require("./utils/generateLiquidContent.js"),renderBadgeLiquid=require("./utils/renderBadgeLiquid.js"),system=require("@gem-sdk/system"),constants=require("./constants.js"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),attrs=require("./common/attrs.js");const ProductBadge=e=>{let{styles:t,setting:s,builderProps:r,pageContext:a}=e,i=s?.shape!=="image",c=common.checkDiscountContentProductBadge(s?.displayContent),n=system.createStyle({...styles.getContainerStyle(e,constants.IS_LIQUID)}),l=system.createClass({...classes.getWrapperClasses(e)}),o=system.createClass({...classes.getSubWrapperClass(e)}),d=system.createStyle({...styles.getSubWrapperStyle(e)}),p=system.createAttr({...attrs.getSubWrapperAttrs(e)}),u=styles.getContentStyleInternal(e),y=system.createClass({...classes.getTextContainerClasses()}),g=system.createAttr({...attrs.getContainerAttrs(e)}),m=system.createClass({...classes.getTextWrapperClasses()}),C=system.createStyle({...styles.getTextBadgeWrapperStyles({setting:s,styles:t})}),v=system.createClass({...classes.getTextContentClasses(t)})
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),common=require("./utils/common.js"),generateLiquidContent=require("./utils/generateLiquidContent.js"),renderBadgeLiquid=require("./utils/renderBadgeLiquid.js"),system=require("@gem-sdk/system"),constants=require("./constants.js"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),attrs=require("./common/attrs.js");const ProductBadge=e=>{let{styles:t,setting:s,builderProps:r,pageContext:a}=e,i=s?.shape!=="image",c=common.checkDiscountContentProductBadge(s?.displayContent),n=system.createStyle({...styles.getContainerStyle(e,constants.IS_LIQUID)}),l=system.createClass({...classes.getWrapperClasses(e)}),o=system.createClass({...classes.getSubWrapperClass(e)}),d=system.createStyle({...styles.getSubWrapperStyle(e)}),p=system.createAttr({...attrs.getSubWrapperAttrs(e)}),u=styles.getContentStyleInternal(e),y=system.createClass({...classes.getTextContainerClasses()}),g=system.createAttr({...attrs.getContainerAttrs(e)}),m=system.createClass({...classes.getTextWrapperClasses()}),C=system.createStyle({...styles.getTextBadgeWrapperStyles({setting:s,styles:t})}),v=system.createClass({...classes.getTextContentClasses(t)}),S=system.createStyle({...styles.getTextContentStyle({setting:s,styles:t})}),$=system.createAttr({...attrs.getTextContentAttrs()}),q=system.createClass({...classes.getImageContainerClasses()}),I=system.createStyle({...styles.getImageContainerStyles({setting:s,styles:t})}),j=system.createClass({...classes.getImageClasses()}),D=system.createAttr({...attrs.getImageAttr({setting:s})}),P=system.createStateOrContext({minPrice:"{{ minPriceValue | replace: '\"', '\\\"' | escape }}",variantIDs:'{{ product.variants | map: "id" | json | escape }}',variantInventoryQuantities:'{{ product.variants | map: "inventory_quantity" | json | escape }}',amountDiscount:"{{amountDiscountValue | replace: '\"', '\\\"' | escape }}",percentDiscount:"{{percentDiscountValue}}",price:"{{price}}",displayTrigger:JSON.parse(JSON.stringify(s?.displayTrigger).replaceAll("'","'")),uid:e.builderProps?.uid,productCreatedAt:'{{product.created_at | date: "%Y-%m-%d" }}',productTags:"{{ product.tags | join: \",\" | replace: '\"', '\\\"' | escape }}",isTextBadge:i}),{displayContent:f,translate:A}=s??{},L=helpers.getDynamicSourceLocales({val:f?.trim(),uid:r?.uid,settingId:"displayContent",isLiquid:!0,pageContext:a,translate:A});return core.template`
|
|
2
2
|
{% if product %}
|
|
3
3
|
${generateLiquidContent.generateBadgeContent(L,a?.isPreviewing)}
|
|
4
4
|
${renderBadgeLiquid.renderBadgeInFirstTime(s?.displayTrigger,c,i)}
|
|
5
5
|
<gp-product-badge
|
|
6
6
|
${{...g}}
|
|
7
|
-
gp-data='${
|
|
7
|
+
gp-data='${core.dataStringify(P)}'
|
|
8
8
|
class="containerClass {{className}}"
|
|
9
9
|
style="${n}"
|
|
10
10
|
data-display-content="${a?.isPreviewing?L:core.sanitizeLiquid(`{{${L}}}`)}"
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
style="${C}"
|
|
24
24
|
>
|
|
25
25
|
<pre
|
|
26
|
-
${{
|
|
26
|
+
${{...$}}
|
|
27
27
|
class="${v}"
|
|
28
|
-
style="${
|
|
28
|
+
style="${S}"
|
|
29
29
|
>{{ content | replace: percentDiscountKey, percentDiscountValue | replace: amountDiscountKey, amountDiscountValue | replace: inventoryQuantityKey, inventoryQuantityValue | replace: minPriceKey, minPriceValue }}</pre>
|
|
30
30
|
</div>
|
|
31
31
|
</div>`,core.template`<div class="${q}" style="${I}">
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),NoDataState=require("../../../common/components/NoDataState.js"),helpers=require("./common/helpers.js"),system=require("@gem-sdk/system"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),useGpDescription=require("./hooks/useGpDescription.js");const ProductDescription=e=>{let{setting:s,advanced:t,builderProps:r}=e,{htmlTag:i}=s??{},a="html"===i?"div":"p",c=core.useProduct(),l=core.useCurrentDevice(),n=core.getResponsiveValueByScreen(s?.hasLineClamp,l),{ref:o,open:m,isShowViewMore:u,handleToggleShowMore:p,mode:d,redirectProductShopifyLink:y}=useGpDescription.useGpDescription(s),x=system.createClass({"gp-product-description":!0,[t?.cssClass]:!0}),j=system.createClass(classes.getClasses({setting:s,isLiquid:!1})),g=system.createClass(classes.getButtonClasses({setting:s})),h=system.createClass({"gp-show-more-text":!0}),C=system.createClass({"gp-show-more-icon gp-ml-1":!0,...m?{"gp-rotate-180":!0}:{}}),R=system.createClass(classes.getClassPreBuilt()),S=system.createStyle({...styles.getTextStyle({setting:s}),...m?{}:core.makeStyleResponsive("line-clamp",core.makeLineClamp(s?.lineClamp,s?.hasLineClamp))}),
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),NoDataState=require("../../../common/components/NoDataState.js"),helpers=require("./common/helpers.js"),system=require("@gem-sdk/system"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),useGpDescription=require("./hooks/useGpDescription.js");const ProductDescription=e=>{let{setting:s,advanced:t,builderProps:r}=e,{htmlTag:i}=s??{},a="html"===i?"div":"p",c=core.useProduct(),l=core.useCurrentDevice(),n=core.getResponsiveValueByScreen(s?.hasLineClamp,l),{ref:o,open:m,isShowViewMore:u,handleToggleShowMore:p,mode:d,redirectProductShopifyLink:y}=useGpDescription.useGpDescription(s),x=system.createClass({"gp-product-description":!0,[t?.cssClass]:!0}),j=system.createClass(classes.getClasses({setting:s,isLiquid:!1})),g=system.createClass(classes.getButtonClasses({setting:s})),h=system.createClass({"gp-show-more-text":!0}),C=system.createClass({"gp-show-more-icon gp-ml-1":!0,...m?{"gp-rotate-180":!0}:{}}),R=system.createClass(classes.getClassPreBuilt()),S=system.createStyle({...styles.getTextStyle({setting:s}),...m?{}:core.makeStyleResponsive("line-clamp",core.makeLineClamp(s?.lineClamp,s?.hasLineClamp))}),v=system.createStyle(styles.getButtonStyle({setting:s})),D=system.createAttr({"data-id":`${r?.uid}`}),N=system.createAttr({"data-gp-text":""}),{gpDescriptionCss:f,textDescriptionCss:k}=styles.getStaticCss(),q=!c?.descriptionHtml;return q&&"edit"===d?jsxRuntime.jsx(NoDataState.default,{elementType:"secondary",description:"Highlight key benefits with product description.",descriptionActions:[{text:"Add description",callback:y},{text:"sync data",callback:"syncProduct"}]}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:system.If(q,"",jsxRuntime.jsxs("div",{...D,className:x,children:[jsxRuntime.jsx("style",{children:k}),jsxRuntime.jsx("style",{children:f}),jsxRuntime.jsx("div",{className:R}),jsxRuntime.jsx(a,{ref:o,...N,className:j,style:S,dangerouslySetInnerHTML:{__html:c?.descriptionHtml||""}}),system.If(n&&u,jsxRuntime.jsxs("button",{className:g,style:v,onClick:p,children:[jsxRuntime.jsx("span",{className:h,children:system.If(m,s?.viewLessText||"",s?.viewMoreText)}),system.If(s?.enableViewMoreIcon,jsxRuntime.jsx("span",{className:C,dangerouslySetInnerHTML:{__html:helpers.ICON_SVG}}))]})," ")]}))})};exports.default=ProductDescription;
|
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),system=require("@gem-sdk/system"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),helpers$1=require("./common/helpers.js");const ProductDescription=e=>{let{setting:s,advanced:t,builderProps:r,pageContext:a}=e,{htmlTag:l,translate:i,viewMoreText:c,viewLessText:o}=s??{},p="html"===l?"div":"p",n=system.createClass({"gp-product-description":!0,[t?.cssClass]:!0}),d=system.createClass(classes.getClasses({setting:s,isLiquid:!0})),m=system.createClass(classes.getButtonClasses({setting:s})),u=system.createClass({"gp-show-more-text":!0}),y=system.createClass({"gp-show-more-icon gp-ml-1":!0}),g=system.createStyle({...styles.getTextStyle({setting:s,renderMaxHeight:!0}),...core.makeStyleResponsive("line-clamp",core.makeLineClamp(s?.lineClamp,s?.hasLineClamp))}),$=system.createClass(classes.getClassPreBuilt()),v=system.createStyle(styles.getButtonStyle({setting:s})),C=system.createAttr({"data-id":`${r?.uid}`}),S=system.createAttr({"data-gp-text":""}),{textDescriptionCss:h}=styles.getStaticCss(),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),system=require("@gem-sdk/system"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),helpers$1=require("./common/helpers.js");const ProductDescription=e=>{let{setting:s,advanced:t,builderProps:r,pageContext:a}=e,{htmlTag:l,translate:i,viewMoreText:c,viewLessText:o}=s??{},p="html"===l?"div":"p",n=system.createClass({"gp-product-description":!0,[t?.cssClass]:!0}),d=system.createClass(classes.getClasses({setting:s,isLiquid:!0})),m=system.createClass(classes.getButtonClasses({setting:s})),u=system.createClass({"gp-show-more-text":!0}),y=system.createClass({"gp-show-more-icon gp-ml-1":!0}),g=system.createStyle({...styles.getTextStyle({setting:s,renderMaxHeight:!0}),...core.makeStyleResponsive("line-clamp",core.makeLineClamp(s?.lineClamp,s?.hasLineClamp))}),$=system.createClass(classes.getClassPreBuilt()),v=system.createStyle(styles.getButtonStyle({setting:s})),C=system.createAttr({"data-id":`${r?.uid}`}),S=system.createAttr({"data-gp-text":""}),{textDescriptionCss:h,gpDescriptionCss:L}=styles.getStaticCss(),x="product.description == blank",w=()=>{let e=core.isLocalEnv?"{{ 'gp-product-description-v7-5.js' | asset_url }}":`${core.baseAssetURL}/assets-v2/gp-product-description-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`},q=system.createStateOrContext({setting:{lineClamp:s?.lineClamp,hasLineClamp:s?.hasLineClamp,viewMoreText:s?.viewMoreText,viewLessText:s?.viewLessText,enableViewMoreIcon:s?.enableViewMoreIcon},textStyle:g}),f=helpers.getDynamicSourceLocales({val:c,uid:r?.uid,settingId:"viewMoreText",pageContext:a,translate:i}),I=helpers.getDynamicSourceLocales({val:o,uid:r?.uid,settingId:"viewLessText",pageContext:a,translate:i});return system.LiquidIf(x,"",system.Liquid(core.template`
|
|
2
2
|
<gp-product-description
|
|
3
3
|
${C}
|
|
4
4
|
class="${n}"
|
|
5
|
-
gp-data='${core.dataStringify(
|
|
6
|
-
data-view-more-text="${
|
|
7
|
-
data-view-less-text="${
|
|
5
|
+
gp-data='${core.dataStringify(q).replaceAll("'","'")}'
|
|
6
|
+
data-view-more-text="${f}"
|
|
7
|
+
data-view-less-text="${I}"
|
|
8
8
|
>
|
|
9
9
|
<style>${h}</style>
|
|
10
|
+
<style>${L}</style>
|
|
10
11
|
<div class="${$}" ></div>
|
|
11
12
|
${system.LiquidUnless("product","<p>Product not found</p>",core.template`<${p} ${S} class="${d}" style="${g}">
|
|
12
13
|
{{product.description}}
|
|
13
14
|
</${p}>
|
|
14
|
-
${system.LiquidUnless(
|
|
15
|
+
${system.LiquidUnless(x,core.template`<button type="button" class="${m}" style="${v}">
|
|
15
16
|
<span class="${u}">
|
|
16
|
-
${system.If(!1,
|
|
17
|
+
${system.If(!1,I?.toString(),f?.toString())}
|
|
17
18
|
</span>
|
|
18
19
|
${system.If(s?.enableViewMoreIcon,core.template`<span class="${y}">${helpers$1.ICON_SVG}</span>`," ")}
|
|
19
20
|
</button>`)}`)}
|
|
20
21
|
</gp-product-description>
|
|
21
22
|
|
|
22
|
-
${
|
|
23
|
+
${w()}
|
|
23
24
|
`))};exports.default=ProductDescription;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";var core=require("@gem-sdk/core"),helpers=require("./helpers.js");const devices=["desktop","mobile","tablet"],getDisplayStyle=(e,t)=>{let o={};return devices.forEach(l=>{o={...o,[`--d${"desktop"===l?"":`-${l}`}`]:`${e(l)?"none":t}`}}),o},getTextStyle=({setting:e,renderMaxHeight:t})=>{let o=core.composeTypographyStyle(e?.typo,e?.typography),l={...core.getStyleShadow({value:e?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:e?.typo?.custom?.hasShadowText}),...core.makeStyleResponsive("ta",e?.textAlign),...core.getGlobalColorStyle(e?.color),...core.makeStyle({tt:e?.transform}),...o,...t&&getMaxHeightStyleDefault(e)};return core.filterTruthyStyles(l)},getButtonStyle=({setting:e})=>{let t=core.composeTypographyStyle(e?.typo,e?.typography),o=()=>getDisplayStyle(t=>!!e?.hasLineClamp&&void 0!==e.hasLineClamp[t]&&!e.hasLineClamp[t],"inline-flex"),l={...core.makeStyleResponsive("jc",e?.textAlign),...core.makeStyle({tt:e?.transform}),...t,...core.getGlobalColorStyle(e?.showMoreColor),...o()};return core.filterTruthyStyles(l)},getStaticCss=()=>{let e=`
|
|
2
|
-
|
|
2
|
+
.gp-p-description-text > :not(ol, ul, table, div, style, script) {
|
|
3
3
|
display: inline !important;
|
|
4
4
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
|
|
6
|
+
.gp-p-description-text > :not(ol, ul, table, div, style, script)::after {
|
|
7
|
+
content: "";
|
|
8
|
+
display: block; /* đảm bảo xuống d\xf2ng tr\xean Safari/iOS */
|
|
8
9
|
}
|
|
9
10
|
.gp-p-description-text > table {
|
|
10
11
|
box-shadow: none;
|
|
@@ -13,4 +14,4 @@
|
|
|
13
14
|
.p-description-wrapper.gp-p-description-text * {
|
|
14
15
|
color: inherit;
|
|
15
16
|
line-height: inherit !important;
|
|
16
|
-
}`;return{gpDescriptionCss:e,textDescriptionCss:t}},getMaxHeightStyleDefault=e=>{let t={desktop:"none"},o=["desktop","mobile","tablet"];o.forEach(o=>{let l=core.getResponsiveValueByScreen(e?.lineClamp,o),r=core.getResponsiveValueByScreen(e?.hasLineClamp,o),
|
|
17
|
+
}`;return{gpDescriptionCss:e,textDescriptionCss:t}},getMaxHeightStyleDefault=e=>{let t={desktop:"none"},o=["desktop","mobile","tablet"];o.forEach(o=>{let l=core.getResponsiveValueByScreen(e?.lineClamp,o),r=core.getResponsiveValueByScreen(e?.hasLineClamp,o),a=r&&l?`${l*helpers.DESCRIPTION_LINE_HEIGHT_DEFAULT}px`:"none";t={...t,[o]:a}});let l=core.makeStyleResponsive("maxh",t);return l};exports.getButtonStyle=getButtonStyle,exports.getMaxHeightStyleDefault=getMaxHeightStyleDefault,exports.getStaticCss=getStaticCss,exports.getTextStyle=getTextStyle;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useCollection as s,makeStyleResponsive as i,makeLineClamp as r
|
|
2
|
+
import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useCollection as s,makeStyleResponsive as i,makeLineClamp as r}from"@gem-sdk/core";import{getDefaultStyleCollectionDes as n,getStyleDefaultViewMore as l,getStaticCss as a}from"./common/styles.js";import{getClassContainerCollectionDes as m,getClassEmptyCollectionDes as c,getClassButtonViewMore as d,getDescriptionClasses as p,getShowMoreIconClasses as h,getShowMoreTextClasses as y,getClassPreBuilt as u}from"./common/classes.js";import{createClass as g,createStyle as f,createAttr as N,If as v}from"@gem-sdk/system";import{getViewLessText as S,getViewMoreText as _,ICON_SVG as j}from"./common/helpers.js";import{useGpDescription as C}from"../../hooks/useDescription.js";let DescriptionNotFoundString="This collection does not have a description",CollectionDescription=({setting:H,builderProps:T,pageContext:k,advanced:D})=>{let I=s(),{ref:L,open:M,isShowViewMore:b,handleToggleShowMore:x,hasLineClamp:w}=C(H),F=I?.descriptionHtml,V=g(m({setting:H})),$=g(c()),q=g(d({setting:H})),z=g(p({advanced:D})),A=g({...h(),...M?{"gp-rotate-180":!0}:{}}),B=g(y()),E=g(u()),G=f({...n({setting:H}),...M?{}:i("line-clamp",r(H?.lineClamp,H?.hasLineClamp))}),J=f({...l(H)}),K=S({setting:H,builderProps:T,pageContext:k,type:"react"}),O=_({setting:H,builderProps:T,pageContext:k,type:"react"}),P=N({"data-id":`${T?.uid}`}),Q=N({"data-gp-text":""}),{gpDescriptionCss:R,textDescriptionCss:U}=a();return e(t,{children:v(!F,e("div",{className:$,dangerouslySetInnerHTML:{__html:"This collection does not have a description"}}),o("div",{...P,className:z,children:[e("style",{children:U}),e("style",{children:R}),e("div",{className:E}),e("div",{ref:L,className:V,style:G,dangerouslySetInnerHTML:{__html:I?.descriptionHtml??""},...Q}),v(w&&b,o("button",{type:"button",className:q,style:J,onClick:x,children:[e("span",{className:B,children:v(M,K?.toString()??"",O?.toString()??"")}),v(H?.enableViewMoreIcon,e("span",{className:A,dangerouslySetInnerHTML:{__html:j}}),"")]}),"")]}))})};export{CollectionDescription as default};
|
package/dist/esm/collection/components/collection-description/CollectionDescription.liquid.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import{makeStyleResponsive as e,makeLineClamp as i,template as s,
|
|
1
|
+
import{makeStyleResponsive as e,makeLineClamp as i,template as s,isLocalEnv as t,baseAssetURL as l}from"@gem-sdk/core";import{getSettingPreloadData as o}from"../../../helpers.js";import{getDefaultStyleCollectionDes as n,getStyleDefaultViewMore as c,getStaticCss as r}from"./common/styles.js";import{createClass as p,createStyle as a,createAttr as m,createStateOrContext as $,If as d,Liquid as g,LiquidUnless as v,LiquidIf as y}from"@gem-sdk/system";import{getClassContainerCollectionDes as f,getClassButtonViewMore as u,getDescriptionClasses as w,getShowMoreIconClasses as C,getShowMoreTextClasses as b,getClassPreBuilt as S}from"./common/classes.js";import{getViewLessText as h,getViewMoreText as j,ICON_SVG as x}from"./common/helpers.js";let CollectionDescription=({setting:M,advanced:k,builderProps:E,pageContext:I})=>{let L=p(f({setting:M})),P=p(u({setting:M})),V=p(w({advanced:k})),A=p(C()),T=p(b()),q=p(S()),D=a({...n({setting:M}),...e("line-clamp",i(M?.lineClamp,M?.hasLineClamp))}),G=a({...c(M)}),N=h({setting:M,builderProps:E,pageContext:I,type:"liquid"}),O=j({setting:M,builderProps:E,pageContext:I,type:"liquid"}),_=m({"data-id":`${E?.uid}`,"view-more-text":`${I?.isPreviewing?O:`{{${O}}}`}`,"view-less-text":`${I?.isPreviewing?N:`{{${N}}}`}`}),J=m({"data-gp-text":""}),{gpDescriptionCss:R,textDescriptionCss:z}=r(),B=$({setting:{lineClamp:M?.lineClamp,hasLineClamp:M?.hasLineClamp,viewMoreText:O,viewLessText:N,enableViewMoreIcon:M?.enableViewMoreIcon},textStyle:D}),F=()=>{let e=t?"{{ 'gp-collection-description-v7-5.js' | asset_url }}":`${l}/assets-v2/gp-collection-description-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${o('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return d(!1,"",g(s`
|
|
2
2
|
<gp-collection-description
|
|
3
|
-
${
|
|
4
|
-
class="${
|
|
5
|
-
gp-data='${JSON.stringify(
|
|
3
|
+
${_}
|
|
4
|
+
class="${V}"
|
|
5
|
+
gp-data='${JSON.stringify(B).replaceAll("'","'")}'
|
|
6
6
|
>
|
|
7
|
-
<style>${
|
|
8
|
-
|
|
9
|
-
<div class="${
|
|
10
|
-
${
|
|
7
|
+
<style>${z}</style>
|
|
8
|
+
<style>${R}</style>
|
|
9
|
+
<div class="${q}" ></div>
|
|
10
|
+
${v("collection","<p>Collection not found</p>",s`<div ${J} class="${L}" style="${D}">
|
|
11
11
|
{{collection.description}}
|
|
12
12
|
</div>
|
|
13
|
-
${
|
|
14
|
-
<span class="${
|
|
15
|
-
${
|
|
13
|
+
${y("collection.description != blank",s`<button type="button" class="${P}" style="${G}">
|
|
14
|
+
<span class="${T}">
|
|
15
|
+
${d(I?.isPreviewing,O?.toString()||"",`{{${O}}}`)}
|
|
16
16
|
</span>
|
|
17
|
-
${
|
|
17
|
+
${d(M?.enableViewMoreIcon,s`<span class="${A}">${x}</span>`," ")}
|
|
18
18
|
</button>`)}`)}
|
|
19
19
|
</gp-collection-description>
|
|
20
|
-
${
|
|
20
|
+
${F()}
|
|
21
21
|
`))};export{CollectionDescription as default};
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import{template as e,sanitizeLiquid as t,RenderIf as
|
|
1
|
+
import{template as e,dataStringify as s,sanitizeLiquid as t,RenderIf as i,isLocalEnv as r,baseAssetURL as a}from"@gem-sdk/core";import{getDynamicSourceLocales as c,getSettingPreloadData as o}from"../../../helpers.js";import{checkDiscountContentProductBadge as n}from"./utils/common.js";import{generateBadgeContent as p}from"./utils/generateLiquidContent.js";import{renderBadgeInFirstTime as d}from"./utils/renderBadgeLiquid.js";import{createStyle as l,createClass as u,createAttr as m,createStateOrContext as g}from"@gem-sdk/system";import{IS_LIQUID as y}from"./constants.js";import{getContainerStyle as $,getSubWrapperStyle as v,getContentStyleInternal as f,getTextBadgeWrapperStyles as j,getTextContentStyle as P,getImageContainerStyles as D}from"./common/styles.js";import{getWrapperClasses as V,getSubWrapperClass as S,getTextContainerClasses as b,getTextWrapperClasses as C,getTextContentClasses as T,getImageContainerClasses as k,getImageClasses as q}from"./common/classes.js";import{getSubWrapperAttrs as A,getContainerAttrs as E,getTextContentAttrs as I,getImageAttr as K}from"./common/attrs.js";let ProductBadge=N=>{let{styles:_,setting:h,builderProps:B,pageContext:L}=N,O=h?.shape!=="image",Q=n(h?.displayContent),w=l({...$(N,y)}),G=u({...V(N)}),J=u({...S(N)}),x=l({...v(N)}),M=m({...A(N)}),R=f(N),Y=u({...b()}),z=m({...E(N)}),F=u({...C()}),H=l({...j({setting:h,styles:_})}),U=u({...T(_)}),W=l({...P({setting:h,styles:_})}),X=m({...I()}),Z=u({...k()}),ee=l({...D({setting:h,styles:_})}),es=u({...q()}),et=m({...K({setting:h})}),ei=g({minPrice:"{{ minPriceValue | replace: '\"', '\\\"' | escape }}",variantIDs:'{{ product.variants | map: "id" | json | escape }}',variantInventoryQuantities:'{{ product.variants | map: "inventory_quantity" | json | escape }}',amountDiscount:"{{amountDiscountValue | replace: '\"', '\\\"' | escape }}",percentDiscount:"{{percentDiscountValue}}",price:"{{price}}",displayTrigger:JSON.parse(JSON.stringify(h?.displayTrigger).replaceAll("'","'")),uid:N.builderProps?.uid,productCreatedAt:'{{product.created_at | date: "%Y-%m-%d" }}',productTags:"{{ product.tags | join: \",\" | replace: '\"', '\\\"' | escape }}",isTextBadge:O}),{displayContent:er,translate:ea}=h??{},ec=c({val:er?.trim(),uid:B?.uid,settingId:"displayContent",isLiquid:!0,pageContext:L,translate:ea});return e`
|
|
2
2
|
{% if product %}
|
|
3
|
-
${
|
|
4
|
-
${
|
|
3
|
+
${p(ec,L?.isPreviewing)}
|
|
4
|
+
${d(h?.displayTrigger,Q,O)}
|
|
5
5
|
<gp-product-badge
|
|
6
|
-
${{...
|
|
7
|
-
gp-data='${
|
|
6
|
+
${{...z}}
|
|
7
|
+
gp-data='${s(ei)}'
|
|
8
8
|
class="containerClass {{className}}"
|
|
9
9
|
style="${w}"
|
|
10
|
-
data-display-content="${L?.isPreviewing?
|
|
10
|
+
data-display-content="${L?.isPreviewing?ec:t(`{{${ec}}}`)}"
|
|
11
11
|
>
|
|
12
12
|
<div class="${G}">
|
|
13
13
|
<div
|
|
14
|
-
${{...
|
|
15
|
-
class="${
|
|
14
|
+
${{...M}}
|
|
15
|
+
class="${J}"
|
|
16
16
|
style="${x}"
|
|
17
17
|
>
|
|
18
|
-
<style>${
|
|
19
|
-
${
|
|
20
|
-
<div class="${
|
|
18
|
+
<style>${R}</style>
|
|
19
|
+
${i(O,e`
|
|
20
|
+
<div class="${Y}">
|
|
21
21
|
<div
|
|
22
|
-
class="${
|
|
23
|
-
style="${
|
|
22
|
+
class="${F}"
|
|
23
|
+
style="${H}"
|
|
24
24
|
>
|
|
25
25
|
<pre
|
|
26
|
-
${{...
|
|
27
|
-
class="${
|
|
28
|
-
style="${
|
|
26
|
+
${{...X}}
|
|
27
|
+
class="${U}"
|
|
28
|
+
style="${W}"
|
|
29
29
|
>{{ content | replace: percentDiscountKey, percentDiscountValue | replace: amountDiscountKey, amountDiscountValue | replace: inventoryQuantityKey, inventoryQuantityValue | replace: minPriceKey, minPriceValue }}</pre>
|
|
30
30
|
</div>
|
|
31
|
-
</div>`,e`<div class="${
|
|
32
|
-
<img ${{...et}} class="${
|
|
31
|
+
</div>`,e`<div class="${Z}" style="${ee}">
|
|
32
|
+
<img ${{...et}} class="${es}" alt="" />
|
|
33
33
|
</div>`)}
|
|
34
34
|
</div>
|
|
35
35
|
</div>
|
|
36
36
|
</gp-product-badge>
|
|
37
|
-
${
|
|
37
|
+
${i(r,`<script ${o('class="gps-link" delay',"src")}="{{ 'gp-product-badge-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${o('class="gps-link" delay',"src")}="${a}/assets-v2/gp-product-badge-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
|
|
38
38
|
{% endif %}
|
|
39
39
|
`};export{ProductBadge as default};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import{useProduct as o,useCurrentDevice as i,getResponsiveValueByScreen as r,makeStyleResponsive as c,makeLineClamp as m
|
|
2
|
+
import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import{useProduct as o,useCurrentDevice as i,getResponsiveValueByScreen as r,makeStyleResponsive as c,makeLineClamp as m}from"@gem-sdk/core";import n from"../../../common/components/NoDataState.js";import{ICON_SVG as l}from"./common/helpers.js";import{createClass as a,createStyle as p,createAttr as d,If as h}from"@gem-sdk/system";import{getClasses as u,getButtonClasses as y,getClassPreBuilt as g}from"./common/classes.js";import{getTextStyle as f,getButtonStyle as x,getStaticCss as k}from"./common/styles.js";import{useGpDescription as N}from"./hooks/useGpDescription.js";let ProductDescription=j=>{let{setting:w,advanced:L,builderProps:b}=j,{htmlTag:v}=w??{},C="html"===v?"div":"p",H=o(),T=i(),D=r(w?.hasLineClamp,T),{ref:M,open:_,isShowViewMore:I,handleToggleShowMore:P,mode:S,redirectProductShopifyLink:A}=N(w),q=a({"gp-product-description":!0,[L?.cssClass]:!0}),G=a(u({setting:w,isLiquid:!1})),V=a(y({setting:w})),$=a({"gp-show-more-text":!0}),z=a({"gp-show-more-icon gp-ml-1":!0,..._?{"gp-rotate-180":!0}:{}}),B=a(g()),E=p({...f({setting:w}),..._?{}:c("line-clamp",m(w?.lineClamp,w?.hasLineClamp))}),F=p(x({setting:w})),J=d({"data-id":`${b?.uid}`}),K=d({"data-gp-text":""}),{gpDescriptionCss:O,textDescriptionCss:Q}=k(),R=!H?.descriptionHtml;return R&&"edit"===S?e(n,{elementType:"secondary",description:"Highlight key benefits with product description.",descriptionActions:[{text:"Add description",callback:A},{text:"sync data",callback:"syncProduct"}]}):e(t,{children:h(R,"",s("div",{...J,className:q,children:[e("style",{children:Q}),e("style",{children:O}),e("div",{className:B}),e(C,{ref:M,...K,className:G,style:E,dangerouslySetInnerHTML:{__html:H?.descriptionHtml||""}}),h(D&&I,s("button",{className:V,style:F,onClick:P,children:[e("span",{className:$,children:h(_,w?.viewLessText||"",w?.viewMoreText)}),h(w?.enableViewMoreIcon,e("span",{className:z,dangerouslySetInnerHTML:{__html:l}}))]})," ")]}))})};export{ProductDescription as default};
|
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
import{makeStyleResponsive as e,makeLineClamp as t,template as s,dataStringify as i,isLocalEnv as o,baseAssetURL as r}from"@gem-sdk/core";import{getDynamicSourceLocales as p,getSettingPreloadData as
|
|
1
|
+
import{makeStyleResponsive as e,makeLineClamp as t,template as s,dataStringify as i,isLocalEnv as o,baseAssetURL as r}from"@gem-sdk/core";import{getDynamicSourceLocales as p,getSettingPreloadData as l}from"../../../helpers.js";import{createClass as a,createStyle as n,createAttr as d,createStateOrContext as c,LiquidIf as m,Liquid as $,LiquidUnless as u,If as g}from"@gem-sdk/system";import{getClasses as v,getButtonClasses as w,getClassPreBuilt as x}from"./common/classes.js";import{getTextStyle as f,getButtonStyle as h,getStaticCss as y}from"./common/styles.js";import{ICON_SVG as M}from"./common/helpers.js";let ProductDescription=b=>{let{setting:C,advanced:L,builderProps:S,pageContext:T}=b,{htmlTag:j,translate:I,viewMoreText:k,viewLessText:E}=C??{},P="html"===j?"div":"p",V=a({"gp-product-description":!0,[L?.cssClass]:!0}),A=a(v({setting:C,isLiquid:!0})),D=a(w({setting:C})),G=a({"gp-show-more-text":!0}),_=a({"gp-show-more-icon gp-ml-1":!0}),q=n({...f({setting:C,renderMaxHeight:!0}),...e("line-clamp",t(C?.lineClamp,C?.hasLineClamp))}),H=a(x()),N=n(h({setting:C})),O=d({"data-id":`${S?.uid}`}),R=d({"data-gp-text":""}),{textDescriptionCss:z,gpDescriptionCss:B}=y(),F="product.description == blank",J=()=>{let e=o?"{{ 'gp-product-description-v7-5.js' | asset_url }}":`${r}/assets-v2/gp-product-description-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`},K=c({setting:{lineClamp:C?.lineClamp,hasLineClamp:C?.hasLineClamp,viewMoreText:C?.viewMoreText,viewLessText:C?.viewLessText,enableViewMoreIcon:C?.enableViewMoreIcon},textStyle:q}),Q=p({val:k,uid:S?.uid,settingId:"viewMoreText",pageContext:T,translate:I}),U=p({val:E,uid:S?.uid,settingId:"viewLessText",pageContext:T,translate:I});return m(F,"",$(s`
|
|
2
2
|
<gp-product-description
|
|
3
3
|
${O}
|
|
4
4
|
class="${V}"
|
|
5
|
-
gp-data='${i(
|
|
6
|
-
data-view-more-text="${
|
|
7
|
-
data-view-less-text="${
|
|
5
|
+
gp-data='${i(K).replaceAll("'","'")}'
|
|
6
|
+
data-view-more-text="${Q}"
|
|
7
|
+
data-view-less-text="${U}"
|
|
8
8
|
>
|
|
9
9
|
<style>${z}</style>
|
|
10
|
+
<style>${B}</style>
|
|
10
11
|
<div class="${H}" ></div>
|
|
11
12
|
${u("product","<p>Product not found</p>",s`<${P} ${R} class="${A}" style="${q}">
|
|
12
13
|
{{product.description}}
|
|
13
14
|
</${P}>
|
|
14
|
-
${u(
|
|
15
|
+
${u(F,s`<button type="button" class="${D}" style="${N}">
|
|
15
16
|
<span class="${G}">
|
|
16
|
-
${g(!1,
|
|
17
|
+
${g(!1,U?.toString(),Q?.toString())}
|
|
17
18
|
</span>
|
|
18
19
|
${g(C?.enableViewMoreIcon,s`<span class="${_}">${M}</span>`," ")}
|
|
19
20
|
</button>`)}`)}
|
|
20
21
|
</gp-product-description>
|
|
21
22
|
|
|
22
|
-
${
|
|
23
|
+
${J()}
|
|
23
24
|
`))};export{ProductDescription as default};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import{composeTypographyStyle as t,getStyleShadow as e,makeStyleResponsive as o,getGlobalColorStyle as l,makeStyle as
|
|
2
|
-
|
|
1
|
+
import{composeTypographyStyle as t,getStyleShadow as e,makeStyleResponsive as o,getGlobalColorStyle as l,makeStyle as i,filterTruthyStyles as a,getResponsiveValueByScreen as p}from"@gem-sdk/core";import{DESCRIPTION_LINE_HEIGHT_DEFAULT as n}from"./helpers.js";let devices=["desktop","mobile","tablet"],getDisplayStyle=(t,e)=>{let o={};return devices.forEach(l=>{o={...o,[`--d${"desktop"===l?"":`-${l}`}`]:`${t(l)?"none":e}`}}),o},getTextStyle=({setting:p,renderMaxHeight:n})=>{let r=t(p?.typo,p?.typography),s={...e({value:p?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:p?.typo?.custom?.hasShadowText}),...o("ta",p?.textAlign),...l(p?.color),...i({tt:p?.transform}),...r,...n&&getMaxHeightStyleDefault(p)};return a(s)},getButtonStyle=({setting:e})=>{let p=t(e?.typo,e?.typography),n=()=>getDisplayStyle(t=>!!e?.hasLineClamp&&void 0!==e.hasLineClamp[t]&&!e.hasLineClamp[t],"inline-flex"),r={...o("jc",e?.textAlign),...i({tt:e?.transform}),...p,...l(e?.showMoreColor),...n()};return a(r)},getStaticCss=()=>{let t=`
|
|
2
|
+
.gp-p-description-text > :not(ol, ul, table, div, style, script) {
|
|
3
3
|
display: inline !important;
|
|
4
4
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
|
|
6
|
+
.gp-p-description-text > :not(ol, ul, table, div, style, script)::after {
|
|
7
|
+
content: "";
|
|
8
|
+
display: block; /* đảm bảo xuống d\xf2ng tr\xean Safari/iOS */
|
|
8
9
|
}
|
|
9
10
|
.gp-p-description-text > table {
|
|
10
11
|
box-shadow: none;
|
|
@@ -13,4 +14,4 @@ import{composeTypographyStyle as t,getStyleShadow as e,makeStyleResponsive as o,
|
|
|
13
14
|
.p-description-wrapper.gp-p-description-text * {
|
|
14
15
|
color: inherit;
|
|
15
16
|
line-height: inherit !important;
|
|
16
|
-
}`;return{gpDescriptionCss:t,textDescriptionCss:e}},getMaxHeightStyleDefault=t=>{let e={desktop:"none"},l=["desktop","mobile","tablet"];l.forEach(o=>{let l=p(t?.lineClamp,o),
|
|
17
|
+
}`;return{gpDescriptionCss:t,textDescriptionCss:e}},getMaxHeightStyleDefault=t=>{let e={desktop:"none"},l=["desktop","mobile","tablet"];l.forEach(o=>{let l=p(t?.lineClamp,o),i=p(t?.hasLineClamp,o),a=i&&l?`${l*n}px`:"none";e={...e,[o]:a}});let i=o("maxh",e);return i};export{getButtonStyle,getMaxHeightStyleDefault,getStaticCss,getTextStyle};
|