@gem-sdk/components 2.1.13-staging.2 → 2.1.13-staging.20

package/dist/esm/collection/components/CollectionDescription.js

@@ -1,15 +1,109 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCollection } from '@gem-sdk/core';
-import Text from '../../text/components/Text.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCurrentDevice, useCollection, getResponsiveValueByScreen, composeTypographyClassName, composeTypographyStyle, isSafari, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
+import { useState, useRef, useEffect } from 'react';
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, builderProps })=>{
+    const [open, setOpen] = useState(false);
+    const [isShowViewMore, allowShowViewMore] = useState(false);
+    const ref = useRef(null);
+    const currentDevice = useCurrentDevice();
     const collection = useCollection();
-    return /*#__PURE__*/ jsx(Text, {
-        styles: setting,
-        setting: {
-            text: collection?.descriptionHtml ?? 'Collection description',
-            excludeFlex: true
+    const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
+    const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
+    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
+    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
+    useEffect(()=>{
+        const dom = ref.current;
+        setOpen(false);
+        if (dom && hasLineClamp && collection?.description) {
+            const value = lineClamp;
+            setTimeout(()=>{
+                const scrollHeight = dom?.scrollHeight ?? 0;
+                const clientHeight = dom?.clientHeight ?? 0;
+                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
+                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
+                const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                if (value && conditionCheckLine) {
+                    allowShowViewMore(()=>true);
+                } else {
+                    allowShowViewMore(()=>false);
+                }
+            }, 100);
         }
+    }, [
+        hasLineClamp,
+        lineClamp,
+        collection?.description
+    ]);
+    const css = `
+  .gp-p-description-text > *:not(ol):not(ul):not(table):not(div) {
+    display: inline !important;
+  }
+  .gp-p-description-text > *:not(ol):not(ul):not(table):not(div)::after {
+    content: "\\A";
+    white-space: pre;
+  }
+  .gp-p-description-text > table {
+    box-shadow: none;
+  }
+`;
+    const hasDescription = collection?.description && collection.description?.trim() != '';
+    return /*#__PURE__*/ jsxs("div", {
+        "data-id": builderProps?.uid,
+        children: [
+            !isSafari() && /*#__PURE__*/ jsx("style", {
+                children: css
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                "data-gp-text": true,
+                className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
+                style: {
+                    ...getStyleShadow({
+                        styleAppliedFor: 'text-shadow'
+                    }),
+                    ...makeStyleResponsive('ta', setting?.textAlign),
+                    ...hasLineClamp && !open ? makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
+                    ...makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle
+                },
+                dangerouslySetInnerHTML: {
+                    __html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
+                }
+            }),
+            hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
+                className: cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
+                style: {
+                    ...makeStyleResponsive('ta', setting?.textAlign),
+                    ...makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle,
+                    ...getGlobalColorStyle(setting?.showMoreColor)
+                },
+                onClick: ()=>setOpen((prev)=>!prev),
+                children: [
+                    !open ? setting?.viewMoreText : setting?.viewLessText,
+                    setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {
+                        className: "gp-ml-1 gp-inline-block",
+                        height: "1em",
+                        width: "1em",
+                        viewBox: "0 0 22 12",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: !open ? /*#__PURE__*/ jsx("path", {
+                            d: "M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z",
+                            fill: "currentColor"
+                        }) : /*#__PURE__*/ jsx("path", {
+                            d: "M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683417 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM11 1L11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L11 1ZM20.2929 11.7071C20.6834 12.0976 21.3166 12.0976 21.7071 11.7071C22.0976 11.3166 22.0976 10.6834 21.7071 10.2929L20.2929 11.7071ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071ZM10.2929 1.70711L20.2929 11.7071L21.7071 10.2929L11.7071 0.292893L10.2929 1.70711Z",
+                            fill: "currentColor"
+                        })
+                    })
+                ]
+            })
+        ]
     });
 };
 

package/dist/esm/collection/components/CollectionDescription.liquid.js

@@ -1,16 +1,109 @@
-import { template } from '@gem-sdk/core';
-import Text from '../../text/components/Text.liquid.js';
+import { composeTypographyStyle, composeTypographyClassName, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
+import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
+import { getDisplayStyle } from '../../product/components/ProductImages/common/common.js';
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
+    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
+    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
+    const defaultStyle = {
+        ...getStyleShadow({
+            styleAppliedFor: 'text-shadow'
+        }),
+        ...makeStyleResponsive('ta', setting?.textAlign),
+        ...getGlobalColorStyle(setting?.color),
+        ...makeStyle({
+            tt: setting?.transform
+        }),
+        ...appendTypoStyle
+    };
+    const collapseStyle = {
+        ...defaultStyle,
+        ...makeStyleResponsive('line-clamp', makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
+    };
+    const getDisplayCollapse = ()=>{
+        return getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
+    };
+    const moreIcon = `<svg
+          class="gp-ml-1 gp-inline-block"
+          style="display: inline-block; margin-left: 1px;"
+          height="1em"
+          width="1em"
+          viewBox="0 0 22 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+              d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
+              fill="currentColor"
+          />
+        </svg>`;
+    const viewMoreTextTranslate = getDynamicSourceLocales({
+        val: setting?.viewMoreText,
+        uid: builderProps?.uid,
+        settingId: 'viewMoreText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
+    const viewLessTextTranslate = getDynamicSourceLocales({
+        val: setting?.viewLessText,
+        uid: builderProps?.uid,
+        settingId: 'viewLessText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
     return template`
-    ${Text({
-        styles: setting,
+  <gp-collection-description  data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
         setting: {
-            ...setting,
-            text: '{{ collection.description }}',
-            excludeFlex: true
-        }
-    })}
+            lineClamp: setting?.lineClamp,
+            hasLineClamp: setting?.hasLineClamp,
+            viewMoreText: viewMoreTextTranslate,
+            viewLessText: viewLessTextTranslate,
+            enableViewMoreIcon: setting?.enableViewMoreIcon
+        },
+        defaultStyle,
+        collapseStyle
+    }).replaceAll("'", '&#039;')}'
+    view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
+    view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
+  >
+    <div></div>
+    <div
+     data-gp-text
+      class="${cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
+      data-gp-text
+      style="${collapseStyle}"
+    >
+    {{collection.description}}
+    </div>
+        {% if collection.description != blank -%}
+      <button
+        type="button"
+        class="p-description-show-more ${cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
+        style="${{
+        ...makeStyle({
+            tt: setting?.transform
+        }),
+        ...makeStyleResponsive('ta', setting?.textAlign),
+        ...appendTypoStyle,
+        ...getGlobalColorStyle(setting?.showMoreColor),
+        ...getDisplayCollapse(),
+        position: 'absolute',
+        visibility: 'hidden'
+    }}"
+    >
+      ${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
+      ${setting?.enableViewMoreIcon ? moreIcon : ''}
+      </button>
+    {%- endif -%}
+    {% style %}
+      .p-description-wrapper.gp-p-description-text * {
+        color: inherit
+      }
+    {% endstyle %}
+  </gp-collection-description>
+  ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };
 

package/dist/esm/collection/setting/CollectionDescription.js

@@ -35,6 +35,59 @@ const config = {
                         }
                     ]
                 },
+                {
+                    id: 'hasLineClamp',
+                    label: 'Enable View More',
+                    type: 'toggle',
+                    devices: {
+                        desktop: {
+                            default: true
+                        }
+                    }
+                },
+                {
+                    id: 'lineClamp',
+                    label: 'Maximum Row(s) To Show',
+                    type: 'input:number',
+                    min: 1,
+                    hide: true,
+                    devices: {
+                        desktop: {
+                            default: 12
+                        }
+                    }
+                },
+                {
+                    id: 'viewMoreText',
+                    label: 'View More Text',
+                    type: 'input',
+                    default: 'Show more',
+                    hide: true
+                },
+                {
+                    id: 'showMoreColor',
+                    type: 'colorpicker',
+                    default: 'text-1'
+                },
+                {
+                    id: 'viewLessText',
+                    label: 'View Less Text',
+                    type: 'input',
+                    default: 'Show less',
+                    hide: true
+                },
+                {
+                    id: 'enableViewMoreIcon',
+                    label: 'Enable Icon',
+                    type: 'toggle',
+                    default: true,
+                    hide: true
+                },
+                {
+                    id: 'translate',
+                    type: 'input',
+                    default: 'viewLessText,viewMoreText'
+                },
                 {
                     id: 'textAlign',
                     label: 'Align',
@@ -70,11 +123,86 @@ const config = {
                             default: 'center'
                         }
                     }
+                },
+                {
+                    id: 'color',
+                    type: 'colorpicker',
+                    default: 'text-1'
                 }
             ]
         }
     ],
     ui: [
+        {
+            type: 'group',
+            label: {
+                en: ''
+            },
+            controls: [
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more'
+                    },
+                    options: {
+                        label: 'large'
+                    },
+                    setting: {
+                        id: 'hasLineClamp'
+                    }
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Text color'
+                    },
+                    setting: {
+                        id: 'showMoreColor'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Max lines'
+                    },
+                    setting: {
+                        id: 'lineClamp'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more label'
+                    },
+                    setting: {
+                        id: 'viewMoreText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show less label'
+                    },
+                    setting: {
+                        id: 'viewLessText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Icon'
+                    },
+                    setting: {
+                        id: 'enableViewMoreIcon'
+                    },
+                    condition: 'hasLineClamp == true'
+                }
+            ]
+        },
         {
             label: {
                 en: 'Text'

package/dist/esm/common/const.js

@@ -1,5 +1,5 @@
 const ELEMENT_Z_INDEX = {
-    STICKY: 100000,
+    STICKY: 1000,
     DIALOG: 100001,
     CART_DRAWER: 100002,
     CART_DRAWER_CONFIRM_MODAL: 100003

package/dist/esm/form/components/textarea/TextArea.liquid.js

@@ -2,10 +2,10 @@ import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeTypographyC
 import { getDynamicSourceLocales } from '../../../helpers.js';
 
 const FormTextarea = ({ setting, builderProps, className, builderAttrs, advanced, pageContext })=>{
-    const { text, name, placeholder, required, width, fullWidth, typography } = setting ?? {};
+    const { text, name, placeholder, required, width, fullWidth, typography, translate } = setting ?? {};
     const textAreaWidth = makeStyleResponsive('w', makeWidth(width, fullWidth));
     const defaultName = name === '' || name === undefined ? 'contact[note]' : name;
-    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding, translate } = advanced ?? {};
+    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding } = advanced ?? {};
     const spacingSetting = advanced?.['spacing-setting'];
     const inputStyle = composeAdvanceStyle({
         border,

package/dist/esm/image/components/AdaptiveImage.liquid.js

@@ -2,7 +2,7 @@ import { template, cls, RenderIf, makeStyleResponsive } from '@gem-sdk/core';
 import { getImageSrc } from '../helpers/getSrcSet.js';
 import { createBlurDataURL } from './helpers.js';
 
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...props })=>{
+const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyLoadImage = true, pageContext, ...props })=>{
     const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
     const srcDesktop = getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getImageSrc(srcSet?.tablet, 'tablet') ?? getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
@@ -27,16 +27,17 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
     }}"
       />
     `, template`
-      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyloadImage ? imagePlaceholder?.['mobile'] ?? createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
-      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyloadImage ? imagePlaceholder?.['tablet'] ?? createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
+      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['mobile'] ?? createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
+      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['tablet'] ?? createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
       <img
         ${{
         ...props
     }}
         class="${cls(className, {
-        gp_lazyload: enableLazyloadImage
+        gp_lazyload: enableLazyLoadImage,
+        gp_force_load: pageContext?.isOptimizePlan
     })}"
-        src="${enableLazyloadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
+        src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
         data-src="${srcDesktop}"
         width="100%"
         alt="${alt}"

package/dist/esm/image/components/Image.js

@@ -1,13 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { useCurrentDevice, makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
 import { composeAspectRatio } from './helpers.js';
+import NoDataImage from './NoDataImage.js';
+import { useMemo } from 'react';
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
+    const currentDevice = useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link : 'div';
     const opacity = {
@@ -52,6 +55,18 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
+    const isShowNoDataState = useMemo(()=>{
+        if (setting?.disableNoDataState) return false;
+        if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
+        if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
+        return !setting?.srcSet?.desktop?.src;
+    }, [
+        currentDevice,
+        setting?.disableNoDataState,
+        setting?.srcSet?.desktop?.src,
+        setting?.srcSet?.mobile?.src,
+        setting?.srcSet?.tablet?.src
+    ]);
     return /*#__PURE__*/ jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -76,14 +91,18 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                 style: {
                     ...getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
                     borderRadius: 'inherit',
-                    overflow: 'hidden',
                     ...makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
+                    isShowNoDataState ? /*#__PURE__*/ jsx(NoDataImage, {
+                        style: {
+                            ...imageWidth,
+                            ...imageHeight
+                        }
+                    }) : setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
+                        className: cls(className, 'gp-inline-block gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,

package/dist/esm/image/components/Image.liquid.js

@@ -3,7 +3,7 @@ import AdaptiveImage from './AdaptiveImage.liquid.js';
 import NextImage from './NextImage.liquid.js';
 import { getInsertLinkData } from '../../helpers.js';
 
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
+const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage = true, pageContext })=>{
     const { imageLink, isNotLazyload } = setting ?? {};
     const { shape } = styles ?? {};
     const { Wrap: WrapLink, urlData } = getInsertLinkData('div', imageLink);
@@ -30,7 +30,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     }}
      data-id="${builderProps?.uid}"
     role="presentation"
-    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
+    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass, `force-publish-${new Date().getTime()}`)}"
     style="${{
         ...style,
         ...makeStyleResponsive('ta', styles?.align)
@@ -46,7 +46,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         style="${{
         ...getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
         'border-radius': 'inherit',
-        overflow: 'hidden',
         ...makeStyleResponsive('jc', styles?.align)
     }}"
       >
@@ -73,7 +72,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         aspectRatio: getAspectRatioGlobalSize(styles?.shape),
         layout: styles?.objectFit,
         priority: setting?.priority,
-        enableLazyloadImage
+        enableLazyLoadImage,
+        pageContext
     }) : NextImage({
         ...setting?.image,
         priority: setting?.priority,
@@ -102,7 +102,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             layout: styles?.objectFit
         },
         isNotLazyload,
-        enableLazyloadImage
+        enableLazyLoadImage,
+        pageContext
     })}
       </${WrapLink}>
   </div>`;

package/dist/esm/image/components/NextImage.liquid.js

@@ -3,7 +3,7 @@ import { getNewBackupFileKey, getImageSrc, getSrcSet } from '../helpers/getSrcSe
 import { DEVICES } from '../../product/components/ProductVariants/index.js';
 import { createBlurDataURL } from './helpers.js';
 
-const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyloadImage = true, srcset, sizes, ...props })=>{
+const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyLoadImage = true, pageContext, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getImageSrc({
@@ -93,12 +93,13 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${cls(className, {
-        gp_lazyload: !customLazyload && enableLazyloadImage
+        gp_lazyload: !customLazyload && enableLazyLoadImage,
+        gp_force_load: pageContext?.isOptimizePlan
     })}"
       ${{
         'data-src': srcImage,
         'data-srcset': srcSetImg,
-        src: enableLazyloadImage ? imagePlaceholder : srcImage,
+        src: enableLazyLoadImage ? imagePlaceholder : srcImage,
         width,
         height,
         alt,