@anker-in/headless-ui 0.0.60-beta.1750820856510 → 0.0.60

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 (33) hide show
  1. package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
  2. package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
  3. package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
  4. package/dist/cjs/biz-components/Category/SwiperCategory.js.map +2 -2
  5. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
  6. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
  7. package/dist/cjs/biz-components/HeroBanner/types.d.ts +0 -4
  8. package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
  9. package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
  10. package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +0 -3
  11. package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -3
  12. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  13. package/dist/cjs/stories/category.stories.js +1 -1
  14. package/dist/cjs/stories/category.stories.js.map +3 -3
  15. package/dist/esm/biz-components/AccordionCards/index.js +1 -1
  16. package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
  17. package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
  18. package/dist/esm/biz-components/Category/SwiperCategory.js.map +2 -2
  19. package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
  20. package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
  21. package/dist/esm/biz-components/HeroBanner/types.d.ts +0 -4
  22. package/dist/esm/biz-components/ShelfDisplay/index.d.ts +0 -3
  23. package/dist/esm/biz-components/ShelfDisplay/index.js +5 -5
  24. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  25. package/dist/esm/stories/category.stories.js +1 -1
  26. package/dist/esm/stories/category.stories.js.map +2 -2
  27. package/package.json +1 -1
  28. package/dist/cjs/shared/throttle.d.ts +0 -1
  29. package/dist/cjs/shared/throttle.js +0 -2
  30. package/dist/cjs/shared/throttle.js.map +0 -7
  31. package/dist/esm/shared/throttle.d.ts +0 -1
  32. package/dist/esm/shared/throttle.js +0 -2
  33. package/dist/esm/shared/throttle.js.map +0 -7
package/dist/cjs/biz-components/AccordionCards/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var A=Object.create;var p=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var $=(e,i)=>{for(var l in i)p(e,l,{get:i[l],enumerable:!0})},T=(e,i,l,c)=>{if(i&&typeof i=="object"||typeof i=="function")for(let m of j(i))!V.call(e,m)&&m!==l&&p(e,m,{get:()=>i[m],enumerable:!(c=D(i,m))||c.enumerable});return e};var a=(e,i,l)=>(l=e!=null?A(P(e)):{},T(i||!e||!e.__esModule?p(l,"default",{value:e,enumerable:!0}):l,e)),W=e=>T(p({},"__esModule",{value:!0}),e);var F={};$(F,{default:()=>U});module.exports=W(F);var t=require("react/jsx-runtime"),B=a(require("../Title/index.js")),s=require("../../helpers/utils.js"),y=a(require("../../components/picture.js")),x=a(require("../../components/button.js")),I=a(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),n=a(require("react")),M=require("../../hooks/useExposure.js"),g=require("../../shared/trackUrlRef.js"),C=require("../../shared/track.js"),R=a(require("../../shared/throttle.js"));const u="image",d="scene_banner",q=n.default.forwardRef(({data:e,className:i="",event:l},c)=>{const[m,S]=(0,n.useState)(0),f=(0,n.useRef)(0),v=(0,n.useRef)([]),h=(0,n.useRef)(!1),[w,H]=(0,n.useState)(0),b=(0,n.useRef)(null);(0,n.useImperativeHandle)(c,()=>b.current),(0,M.useExposure)(b,{componentType:u,componentName:d,componentTitle:e?.title});const L=(o,r)=>{r&&(v.current[o]=r)};(0,n.useEffect)(()=>{const o=()=>{v.current[f.current]&&H(v.current[f.current].offsetWidth)};o();const r=(0,R.default)(o,300);return window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[]);const z=({data:o,configuration:r})=>(0,t.jsxs)("div",{className:(0,s.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",r?.itemShape==="round"?"rounded-2xl":""),children:[(0,t.jsx)(y.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.mobileImg?.url||"",alt:o?.mobileImg?.alt||""}),(0,t.jsxs)("div",{className:(0,s.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,t.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:o?.title}),(0,t.jsx)("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:o?.subTitle})]}),(0,t.jsx)("a",{href:(0,g.trackUrlRef)(o.link,`${u}_${d}`),onClick:()=>r?.event?.primaryButton(o,r),children:(0,t.jsx)(x.default,{variant:"secondary",className:(0,s.cn)("text-info-primary text-sm font-bold"),children:r?.primaryButton})})]})]}),k=(0,n.useCallback)(o=>{m===o||h.current||(h.current=!0,S(o),f.current=o,(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:u,component_name:d,component_title:e?.products[o]?.title,component_description:e?.products[o]?.subTitle,position:o+1}}))},[e?.products,m]);return(0,t.jsxs)(t.Fragment,{children:[e?.title&&(0,t.jsx)(B.default,{data:{title:e?.title}}),(0,t.jsx)("div",{ref:b,className:(0,s.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,s.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",i),children:e?.products?.map((o,r)=>{const _=m===r;return(0,t.jsxs)("div",{style:{flex:`${_?8:1} 1 0%`,transition:"all 0.6s"},ref:N=>{N&&L(r,N)},className:(0,s.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>k(r),onMouseLeave:()=>{h.current=!1},onClick:()=>k(r),children:[(0,t.jsx)(y.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:o?.img?.alt||""}),(0,t.jsxs)("div",{style:{width:w},className:(0,s.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",_&&w?"opacity-100":"opacity-0"),children:[(0,t.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:o?.title}),(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:o?.subTitle})]}),(0,t.jsx)("a",{href:(0,g.trackUrlRef)(o?.link,`${u}_${d}`),onClick:()=>l?.primaryButton?.(e,r),children:(0,t.jsx)(x.default,{className:(0,s.cn)("mb-1.5 font-bold"),children:e?.primaryButton})})]})]},r)})})}),(0,t.jsx)("div",{className:(0,s.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,t.jsx)(I.default,{className:(0,s.cn)("h-[400px] !overflow-visible",i),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:l}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var U=(0,E.withStyles)(q);
1
+ "use strict";"use client";var R=Object.create;var c=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var P=(e,i)=>{for(var l in i)c(e,l,{get:i[l],enumerable:!0})},N=(e,i,l,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let m of D(i))!z.call(e,m)&&m!==l&&c(e,m,{get:()=>i[m],enumerable:!(p=A(i,m))||p.enumerable});return e};var a=(e,i,l)=>(l=e!=null?R(j(e)):{},N(i||!e||!e.__esModule?c(l,"default",{value:e,enumerable:!0}):l,e)),V=e=>N(c({},"__esModule",{value:!0}),e);var q={};P(q,{default:()=>W});module.exports=V(q);var t=require("react/jsx-runtime"),T=a(require("../Title/index.js")),s=require("../../helpers/utils.js"),h=a(require("../../components/picture.js")),y=a(require("../../components/button.js")),B=a(require("../SwiperBox/index.js")),I=require("../../shared/Styles.js"),r=a(require("react")),E=require("../../hooks/useExposure.js"),x=require("../../shared/trackUrlRef.js"),M=require("../../shared/track.js");const d="image",u="scene_banner",$=r.default.forwardRef(({data:e,className:i="",event:l},p)=>{const[m,C]=(0,r.useState)(0),f=(0,r.useRef)([]),v=(0,r.useRef)(!1),[g,S]=(0,r.useState)(0),b=(0,r.useRef)(null);(0,r.useImperativeHandle)(p,()=>b.current),(0,E.useExposure)(b,{componentType:d,componentName:u,componentTitle:e?.title});const H=(o,n)=>{n&&(f.current[o]=n)};(0,r.useEffect)(()=>{const o=()=>{f.current[0]&&S(f.current[0].offsetWidth)};return o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[]);const L=({data:o,configuration:n})=>(0,t.jsxs)("div",{className:(0,s.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",n?.itemShape==="round"?"rounded-2xl":""),children:[(0,t.jsx)(h.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.mobileImg?.url||"",alt:o?.mobileImg?.alt||""}),(0,t.jsxs)("div",{className:(0,s.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,t.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:o?.title}),(0,t.jsx)("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:o?.subTitle})]}),(0,t.jsx)("a",{href:(0,x.trackUrlRef)(o.link,`${d}_${u}`),onClick:()=>n?.event?.primaryButton(o,n),children:(0,t.jsx)(y.default,{variant:"secondary",className:(0,s.cn)("text-info-primary text-sm font-bold"),children:n?.primaryButton})})]})]}),w=(0,r.useCallback)(o=>{m===o||v.current||(v.current=!0,C(o),(0,M.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:d,component_name:u,component_title:e?.products[o]?.title,component_description:e?.products[o]?.subTitle,position:o+1}}))},[e?.products,m]);return(0,t.jsxs)(t.Fragment,{children:[e?.title&&(0,t.jsx)(T.default,{data:{title:e?.title}}),(0,t.jsx)("div",{ref:b,className:(0,s.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,s.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",i),children:e?.products?.map((o,n)=>{const k=m===n;return(0,t.jsxs)("div",{style:{flex:`${k?8:1} 1 0%`,transition:"all 0.6s"},ref:_=>{_&&H(n,_)},className:(0,s.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>w(n),onMouseLeave:()=>{v.current=!1},onClick:()=>w(n),children:[(0,t.jsx)(h.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:o?.img?.alt||""}),(0,t.jsxs)("div",{style:{width:g},className:(0,s.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",k&&g?"opacity-100":"opacity-0"),children:[(0,t.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:o?.title}),(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:o?.subTitle})]}),(0,t.jsx)("a",{href:(0,x.trackUrlRef)(o?.link,`${d}_${u}`),onClick:()=>l?.primaryButton?.(e,n),children:(0,t.jsx)(y.default,{className:(0,s.cn)("mb-1.5 font-bold"),children:e?.primaryButton})})]})]},n)})})}),(0,t.jsx)("div",{className:(0,s.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,t.jsx)(B.default,{className:(0,s.cn)("h-[400px] !overflow-visible",i),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:l}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var W=(0,I.withStyles)($);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/AccordionCards/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\">\n {item?.subTitle}\n </h3>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button className={cn('mb-1.5 font-bold')}>{data?.primaryButton}</Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withStyles(AccordionCards)\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2FQ,IAAAI,EAAA,6BA1FRC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAqF,oBACrFC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAAwB,iCAExBC,EAAqB,uCAErB,MAAMC,EAAgB,QAChBC,EAAgB,eAkChBC,EAAiB,EAAAC,QAAM,WAA+C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,GAAI,MAAAC,CAAM,EAAGC,IAAQ,CACpH,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAwB,CAAC,EAEvDC,KAAgB,UAAe,CAAC,EAChCC,KAAe,UAAyB,CAAC,CAAC,EAC1CC,KAAc,UAAgB,EAAK,EACnC,CAACC,EAAcC,CAAe,KAAI,YAAiB,CAAC,EAEpDC,KAAW,UAAuB,IAAI,KAC5C,uBAAoBR,EAAK,IAAMQ,EAAS,OAAyB,KACjE,eAAYA,EAAU,CACpB,cAAAf,EACA,cAAAC,EACA,eAAgBG,GAAM,KACxB,CAAC,EAED,MAAMY,EAAS,CAACC,EAAeC,IAAuB,CAChDA,IACFP,EAAa,QAAQM,CAAK,EAAIC,EAElC,KAEA,aAAU,IAAM,CACd,MAAMC,EAAe,IAAM,CACrBR,EAAa,QAAQD,EAAc,OAAO,GAC5CI,EAAgBH,EAAa,QAAQD,EAAc,OAAO,EAAE,WAAW,CAE3E,EACAS,EAAa,EACb,MAAMC,KAAiB,EAAAC,SAASF,EAAc,GAAG,EACjD,cAAO,iBAAiB,SAAUC,CAAc,EACzC,IAAM,OAAO,oBAAoB,SAAUA,CAAc,CAClE,EAAG,CAAC,CAAC,EAEL,MAAME,EAAa,CAAC,CAAE,KAAAlB,EAAM,cAAAmB,CAAc,OAEtC,QAAC,OACC,aAAW,MACT,+FACAA,GAAe,YAAc,QAAU,cAAgB,EACzD,EAEA,oBAAC,EAAAC,QAAA,CACC,UAAU,6DACV,OAAQpB,GAAM,WAAW,KAAO,GAChC,IAAKA,GAAM,WAAW,KAAO,GAC/B,KACA,QAAC,OAAI,aAAW,MAAG,qEAAqE,EACtF,qBAAC,OAAI,UAAU,0CACb,oBAAC,KAAE,UAAU,qDAAsD,SAAAA,GAAM,MAAM,KAC/E,OAAC,MAAG,UAAU,uDAAwD,SAAAA,GAAM,SAAS,GACvF,KACA,OAAC,KACC,QAAM,eAAYA,EAAK,KAAM,GAAGJ,CAAa,IAAIC,CAAa,EAAE,EAChE,QAAS,IAAMsB,GAAe,OAAO,cAAcnB,EAAMmB,CAAa,EAEtE,mBAAC,EAAAE,QAAA,CAAO,QAAQ,YAAY,aAAW,MAAG,qCAAqC,EAC5E,SAAAF,GAAe,cAClB,EACF,GACF,GACF,EAIEG,KAAwB,eAC3BC,GAAgB,CACXnB,IAAemB,GAAOf,EAAY,UACtCA,EAAY,QAAU,GAEtBH,EAAckB,CAAG,EACjBjB,EAAc,QAAUiB,KACxB,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB3B,EAChB,eAAgBC,EAChB,gBAAiBG,GAAM,SAASuB,CAAG,GAAG,MACtC,sBAAuBvB,GAAM,SAASuB,CAAG,GAAG,SAC5C,SAAUA,EAAM,CAClB,CACF,CAAC,EACH,EACA,CAACvB,GAAM,SAAUI,CAAU,CAC7B,EAEA,SACE,oBACG,UAAAJ,GAAM,UAAS,OAAC,EAAAwB,QAAA,CAAM,KAAM,CAAE,MAAOxB,GAAM,KAAM,EAAG,KACrD,OAAC,OAAI,IAAKW,EAAU,aAAW,MAAG,sBAAuB,CAAE,YAAaX,GAAM,QAAU,MAAO,CAAC,EAC9F,mBAAC,OACC,aAAW,MACT,2KACAC,CACF,EAEC,SAAAD,GAAM,UAAU,IAAI,CAACyB,EAAMF,IAAQ,CAClC,MAAMG,EAAatB,IAAemB,EAElC,SACE,QAAC,OAEC,MAAO,CACL,KAAM,GALMG,EAAa,EAAI,CAKX,QAClB,WAAY,UACd,EACA,IAAMZ,GAA8B,CAC9BA,GAAIF,EAAOW,EAAKT,CAAE,CACxB,EACA,aAAW,MACT,0CACAd,GAAM,YAAc,QAAU,cAAgB,EAChD,EACA,aAAc,IAAMsB,EAAsBC,CAAG,EAC7C,aAAc,IAAM,CAClBf,EAAY,QAAU,EACxB,EACA,QAAS,IAAMc,EAAsBC,CAAG,EAExC,oBAAC,EAAAH,QAAA,CACC,OAAQK,GAAM,KAAK,IACnB,UAAU,6DACV,IAAKA,GAAM,KAAK,KAAO,GACzB,KACA,QAAC,OACC,MAAO,CACL,MAAOhB,CACT,EACA,aAAW,MACT,oJACAiB,GAAcjB,EAAe,cAAgB,WAC/C,EAEA,qBAAC,OAAI,UAAU,+BACb,oBAAC,KAAE,UAAU,+EACV,SAAAgB,GAAM,MACT,KACA,OAAC,MAAG,UAAU,mGACX,SAAAA,GAAM,SACT,GACF,KACA,OAAC,KACC,QAAM,eAAYA,GAAM,KAAM,GAAG7B,CAAa,IAAIC,CAAa,EAAE,EACjE,QAAS,IAAMK,GAAO,gBAAgBF,EAAMuB,CAAG,EAE/C,mBAAC,EAAAF,QAAA,CAAO,aAAW,MAAG,kBAAkB,EAAI,SAAArB,GAAM,cAAc,EAClE,GACF,IA9CKuB,CA+CP,CAEJ,CAAC,EACH,EACF,KACA,OAAC,OAAI,aAAW,MAAG,sBAAuB,CAAE,YAAavB,GAAM,QAAU,MAAO,CAAC,EAC/E,mBAAC,EAAA2B,QAAA,CACC,aAAW,MAAG,8BAA+B1B,CAAS,EACtD,GAAI,iBAAmBD,GAAM,IAC7B,KAAM,CACJ,KAAMA,GAAM,SACZ,cAAe,CACb,MAAOA,GAAM,MACb,UAAWA,GAAM,UACjB,cAAeA,GAAM,cACrB,MAAOE,CACT,CACF,EACA,MAAOgB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,CACF,EACF,EACF,GACF,CAEJ,CAAC,EACD,IAAOpC,KAAQ,cAAWgB,CAAc",
6
- "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_track", "import_throttle", "componentType", "componentName", "AccordionCards", "React", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "throttle", "MobileItem", "configuration", "Picture", "Button", "handleSwiperItemClick", "idx", "Title", "item", "isExpanded", "SwiperBox"]
4
+ "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[0]) {\n setContentWidth(accordionRef.current[0].offsetWidth)\n }\n }\n handleResize()\n window.addEventListener('resize', handleResize)\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\">\n {item?.subTitle}\n </h3>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button className={cn('mb-1.5 font-bold')}>{data?.primaryButton}</Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withStyles(AccordionCards)\n"],
5
+ "mappings": "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",
6
+ "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "AccordionCards", "React", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "MobileItem", "configuration", "Picture", "Button", "handleSwiperItemClick", "idx", "Title", "item", "isExpanded", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/Category/SwiperCategory.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var w=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var P=(e,i)=>{for(var r in i)t(e,r,{get:i[r],enumerable:!0})},p=(e,i,r,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of u(i))!g.call(e,o)&&o!==r&&t(e,o,{get:()=>i[o],enumerable:!(l=m(i,o))||l.enumerable});return e};var M=(e,i,r)=>(r=e!=null?w(S(e)):{},p(i||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),y=e=>p(t({},"__esModule",{value:!0}),e);var h={};P(h,{default:()=>B});module.exports=y(h);var a=require("react/jsx-runtime"),f=M(require("react")),n=require("swiper/react"),s=require("swiper/modules"),x=require("swiper/css"),k=require("swiper/css/pagination");const d=f.default.forwardRef(({data:e,Slide:i,id:r,pagination:l})=>(0,a.jsx)(n.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!0},className:"!overflow-visible",modules:[s.FreeMode,s.Mousewheel,s.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((o,c)=>(0,a.jsx)(n.SwiperSlide,{className:"!h-[unset]",children:(0,a.jsx)(i,{data:o,configuration:e?.configuration})},r+"SwiperSlide"+c))}));d.displayName="SwiperBox";var B=d;
1
+ "use strict";"use client";var w=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(e,i)=>{for(var r in i)t(e,r,{get:i[r],enumerable:!0})},p=(e,i,r,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of u(i))!g.call(e,o)&&o!==r&&t(e,o,{get:()=>i[o],enumerable:!(l=m(i,o))||l.enumerable});return e};var B=(e,i,r)=>(r=e!=null?w(S(e)):{},p(i||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),M=e=>p(t({},"__esModule",{value:!0}),e);var b={};y(b,{default:()=>P});module.exports=M(b);var n=require("react/jsx-runtime"),f=B(require("react")),s=require("swiper/react"),a=require("swiper/modules"),h=require("swiper/css"),k=require("swiper/css/pagination");const d=f.default.forwardRef(({data:e,Slide:i,id:r,pagination:l})=>(0,n.jsx)(s.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!0},className:"!overflow-visible",modules:[a.FreeMode,a.Mousewheel,a.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length)}},children:e?.list?.map((o,c)=>(0,n.jsx)(s.SwiperSlide,{className:"!h-[unset]",children:(0,n.jsx)(i,{data:o,configuration:e?.configuration})},r+"SwiperSlide"+c))}));d.displayName="SwiperBox";var P=d;
2
2
  //# sourceMappingURL=SwiperCategory.js.map
package/dist/cjs/biz-components/Category/SwiperCategory.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
4
- "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6DU,IAAAI,EAAA,6BA5DVC,EAAkB,oBAClBA,EAAoC,wBACpCC,EAAiD,0BACjDC,EAAO,sBACPC,EAAO,iCAcP,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,OAE9F,OAAC,UACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGH,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,OACtB,OAAC,eAA8C,UAAU,aACvD,mBAACJ,EAAA,CAAM,KAAMG,EAAM,cAAeJ,GAAM,cAAe,GADvCE,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDP,EAAU,YAAc,YAExB,IAAOP,EAAQO",
4
+ "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyDU,IAAAI,EAAA,6BAxDVC,EAAkB,oBAClBA,EAAoC,wBACpCC,EAAiD,0BACjDC,EAAO,sBACPC,EAAO,iCAcP,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,OAE9F,OAAC,UACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGH,GAAM,MAAM,MAAM,CAC/C,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,OACtB,OAAC,eAA8C,UAAU,aACvD,mBAACJ,EAAA,CAAM,KAAMG,EAAM,cAAeJ,GAAM,cAAe,GADvCE,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDP,EAAU,YAAc,YAExB,IAAOP,EAAQO",
6
6
  "names": ["SwiperCategory_exports", "__export", "SwiperCategory_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_css", "import_pagination", "SwiperBox", "React", "data", "Slide", "id", "pagination", "item", "jIndex"]
7
7
  }
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var G=Object.create;var h=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var r in a)h(t,r,{get:a[r],enumerable:!0})},V=(t,a,r,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of J(a))!O.call(t,s)&&s!==r&&h(t,s,{get:()=>a[s],enumerable:!(c=Q(a,s))||c.enumerable});return t};var z=(t,a,r)=>(r=t!=null?G(K(t)):{},V(a||!t||!t.__esModule?h(r,"default",{value:t,enumerable:!0}):r,t)),X=t=>V(h({},"__esModule",{value:!0}),t);var Z={};W(Z,{default:()=>Y});module.exports=X(Z);var e=require("react/jsx-runtime"),p=z(require("react")),U=require("@gsap/react"),g=z(require("gsap")),m=require("gsap/dist/ScrollTrigger"),B=require("react-responsive"),_=z(require("../../helpers/ScrollLoadVideo.js")),o=require("../../components/index.js"),i=require("../../helpers/index.js"),j=require("../../shared/Styles.js"),q=require("../../hooks/useExposure.js"),k=require("../../shared/trackUrlRef.js");const y="image",v="hero_banner",D=p.default.forwardRef(({data:t,className:a},r)=>{const{title:c,subtitle:s,pcImage:P,padImage:A,mobileImage:$,pcVideo:T,padVideo:I,mobileVideo:x,isShowVideo:C,primaryButton:f,secondaryButton:b,theme:F="light",size:R="default",caption:N=[],blockLink:E}=t,L=(0,B.useMediaQuery)({query:"(max-width: 768px)"}),M=(0,B.useMediaQuery)({query:"(max-width: 1024px)"}),u=(0,p.useRef)(null),l=(0,p.useRef)(null);return(0,q.useExposure)(l,{componentType:y,componentName:v,componentTitle:c,componentDescription:s}),(0,p.useImperativeHandle)(r,()=>l.current),(0,U.useGSAP)(()=>{if(g.default.registerPlugin(m.ScrollTrigger),!u.current)return;const w=l.current?.clientHeight||100;return window.innerHeight<=w?m.ScrollTrigger.create({trigger:l.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:n=>{const d=n.progress*40-20;g.default.set(u.current,{yPercent:d})}}):(m.ScrollTrigger.create({trigger:l.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:n=>{const d=n.progress*20-20;g.default.set(u.current,{yPercent:d})}}),m.ScrollTrigger.create({trigger:l.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:n=>{const d=n.progress*20;g.default.set(u.current,{yPercent:d})}})),()=>{m.ScrollTrigger.getAll().forEach(n=>n.kill())}},[]),(0,e.jsxs)("div",{ref:l,"data-ui-component-id":"HeroBanner",className:(0,i.cn)(F==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":R==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":R==="sm"},a),children:[E&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,k.trackUrlRef)(E,`${y}_${v}`),tabIndex:-1,"aria-hidden":"true"}),(0,e.jsx)("div",{ref:u,className:(0,i.cn)("absolute left-0 top-0 size-full"),children:C?(0,e.jsx)(_.default,{poster:L?x?.url:M?I?.url||x?.url:T?.url,src:L?x?.url:M?I?.url||x?.url:T?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:P?.alt||"",source:`${P?.url||""} , ${A?.url??($?.url||"")} 1024, ${$?.url||""} 767`})}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[c&&(0,e.jsx)(o.Heading,{as:"h2",size:5,className:(0,i.cn)("hero-banner-title"),html:c}),s&&(0,e.jsx)(o.Text,{as:"p",size:3,className:(0,i.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:s})]}),(0,e.jsxs)("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[b&&b.text&&(0,e.jsx)("a",{href:(0,k.trackUrlRef)(b.link,`${y}_${v}`),children:(0,e.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:b.text})}),f&&f.text&&(0,e.jsx)("a",{href:(0,k.trackUrlRef)(f.link,`${y}_${v}`),children:(0,e.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:f.text})})]})]}),N.length>0&&(0,e.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:N.map((w,H)=>(0,e.jsxs)(p.default.Fragment,{children:[(0,e.jsx)(o.Text,{size:2,className:(0,i.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:w.title}),H<N.length-1&&(0,e.jsx)("div",{className:(0,i.cn)("bg-info-primary w-px")})]},H))})]})});D.displayName="HeroBanner";var Y=(0,j.withStyles)(D);
1
+ "use strict";"use client";var _=Object.create;var f=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var C=(t,a)=>{for(var r in a)f(t,r,{get:a[r],enumerable:!0})},T=(t,a,r,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of j(a))!F.call(t,p)&&p!==r&&f(t,p,{get:()=>a[p],enumerable:!(c=S(a,p))||c.enumerable});return t};var R=(t,a,r)=>(r=t!=null?_(A(t)):{},T(a||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t)),G=t=>T(f({},"__esModule",{value:!0}),t);var J={};C(J,{default:()=>q});module.exports=G(J);var e=require("react/jsx-runtime"),s=R(require("react")),I=require("@gsap/react"),g=R(require("gsap")),m=require("gsap/dist/ScrollTrigger"),o=require("../../components/index.js"),i=require("../../helpers/index.js"),L=require("../../shared/Styles.js"),D=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const h="image",v="hero_banner",E=s.default.forwardRef(({data:t,className:a},r)=>{const{title:c,subtitle:p,pcImage:w,padImage:M,mobileImage:z,primaryButton:x,secondaryButton:b,theme:U="light",size:B="default",caption:k=[],blockLink:P}=t,u=(0,s.useRef)(null),l=(0,s.useRef)(null);return(0,D.useExposure)(l,{componentType:h,componentName:v,componentTitle:c,componentDescription:p}),(0,s.useImperativeHandle)(r,()=>l.current),(0,I.useGSAP)(()=>{if(g.default.registerPlugin(m.ScrollTrigger),!u.current)return;const N=l.current?.clientHeight||100;return window.innerHeight<=N?m.ScrollTrigger.create({trigger:l.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:n=>{const d=n.progress*40-20;g.default.set(u.current,{yPercent:d})}}):(m.ScrollTrigger.create({trigger:l.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:n=>{const d=n.progress*20-20;g.default.set(u.current,{yPercent:d})}}),m.ScrollTrigger.create({trigger:l.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:n=>{const d=n.progress*20;g.default.set(u.current,{yPercent:d})}})),()=>{m.ScrollTrigger.getAll().forEach(n=>n.kill())}},[]),(0,e.jsxs)("div",{ref:l,"data-ui-component-id":"HeroBanner",className:(0,i.cn)(U==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":B==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":B==="sm"},a),children:[P&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,y.trackUrlRef)(P,`${h}_${v}`),tabIndex:-1,"aria-hidden":"true"}),(0,e.jsx)("div",{ref:u,className:(0,i.cn)("absolute left-0 top-0 size-full"),children:(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:w?.alt||"",source:`${w?.url||""} , ${M?.url??(z?.url||"")} 1024, ${z?.url||""} 767`})}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[c&&(0,e.jsx)(o.Heading,{as:"h2",size:5,className:(0,i.cn)("hero-banner-title"),html:c}),p&&(0,e.jsx)(o.Text,{as:"p",size:3,className:(0,i.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:p})]}),(0,e.jsxs)("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[b&&b.text&&(0,e.jsx)("a",{href:(0,y.trackUrlRef)(b.link,`${h}_${v}`),children:(0,e.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:b.text})}),x&&x.text&&(0,e.jsx)("a",{href:(0,y.trackUrlRef)(x.link,`${h}_${v}`),children:(0,e.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:x.text})})]})]}),k.length>0&&(0,e.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:k.map((N,H)=>(0,e.jsxs)(s.default.Fragment,{children:[(0,e.jsx)(o.Text,{size:2,className:(0,i.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:N.title}),H<k.length-1&&(0,e.jsx)("div",{className:(0,i.cn)("bg-info-primary w-px")})]},H))})]})});E.displayName="HeroBanner";var q=(0,L.withStyles)(E);
2
2
  //# sourceMappingURL=HeroBanner.js.map
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
5
- "mappings": "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",
6
- "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "isMobile", "isPad", "bgRef", "boxRef", "gsap", "clientHeight", "self", "value", "t", "ScrollLoadVideo", "c", "index"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
5
+ "mappings": "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",
6
+ "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "bgRef", "boxRef", "gsap", "clientHeight", "self", "value", "t", "c", "index"]
7
7
  }
package/dist/cjs/biz-components/HeroBanner/types.d.ts CHANGED
@@ -9,10 +9,6 @@ export interface HeroBannerProps {
9
9
  pcImage: Media;
10
10
  padImage?: Media;
11
11
  mobileImage: Media;
12
- pcVideo?: Media;
13
- padVideo?: Media;
14
- mobileVideo?: Media;
15
- isShowVideo?: boolean;
16
12
  blockLink?: string;
17
13
  /** 主按钮文本和配置 */
18
14
  primaryButton?: {
package/dist/cjs/biz-components/HeroBanner/types.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var r=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var d=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of a(t))!p.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(o=s(t,i))||o.enumerable});return e};var m=e=>d(r({},"__esModule",{value:!0}),e);var l={};module.exports=m(l);
1
+ "use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(e,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of a(t))!m.call(e,i)&&i!==s&&n(e,i,{get:()=>t[i],enumerable:!(r=o(t,i))||r.enumerable});return e};var g=e=>p(n({},"__esModule",{value:!0}),e);var l={};module.exports=g(l);
2
2
  //# sourceMappingURL=types.js.map
package/dist/cjs/biz-components/HeroBanner/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/types.ts"],
4
- "sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nexport interface HeroBannerProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n pcImage: Media\n padImage?: Media\n mobileImage: Media\n pcVideo?: Media\n padVideo?: Media\n mobileVideo?: Media\n isShowVideo?: boolean\n blockLink?: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n } & Omit<ButtonProps, 'children'>\n\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n size?: 'default' | 'sm'\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n caption?: Array<{\n title: string\n }>\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
4
+ "sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nexport interface HeroBannerProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n pcImage: Media\n padImage?: Media\n mobileImage: Media\n blockLink?: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n } & Omit<ButtonProps, 'children'>\n\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n size?: 'default' | 'sm'\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n caption?: Array<{\n title: string\n }>\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["types_exports", "__toCommonJS"]
7
7
  }
package/dist/cjs/biz-components/ShelfDisplay/index.d.ts CHANGED
@@ -18,8 +18,6 @@ export interface ShelfDisplayItem {
18
18
  tagItems?: string[];
19
19
  tab?: string;
20
20
  data?: ShelfDisplayItem[];
21
- custom_name?: string;
22
- custom_description?: string;
23
21
  }
24
22
  type EventType = {
25
23
  primaryButton?: (v: any, index: number) => void;
@@ -30,7 +28,6 @@ export interface ShelfDisplayProps {
30
28
  title?: string;
31
29
  isShowTab?: boolean;
32
30
  isShowTag?: boolean;
33
- isShowOriginalPrice?: boolean;
34
31
  direction?: 'horizontal' | 'vertical';
35
32
  align?: 'left' | 'center' | 'right';
36
33
  productsTab?: any;
package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,6 +1,6 @@
1
- "use strict";"use client";var J=Object.create;var k=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,t)=>{for(var s in t)k(e,s,{get:t[s],enumerable:!0})},$=(e,t,s,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of X(t))!Z.call(e,a)&&a!==s&&k(e,a,{get:()=>t[a],enumerable:!(m=K(t,a))||m.enumerable});return e};var c=(e,t,s)=>(s=e!=null?J(Y(e)):{},$(t||!e||!e.__esModule?k(s,"default",{value:e,enumerable:!0}):s,e)),te=e=>$(k({},"__esModule",{value:!0}),e);var ne={};ee(ne,{default:()=>re});module.exports=te(ne);var i=require("react/jsx-runtime"),r=c(require("react")),x=require("../../helpers/utils.js"),E=c(require("../../components/picture.js")),O=c(require("./tabSwitch.js")),D=c(require("../../components/button.js")),q=c(require("../Title/index.js")),H=c(require("../SwiperBox/index.js")),L=require("../../shared/Styles.js"),R=require("./shelfDisplay.js"),C=require("react-responsive"),V=require("../../hooks/useExposure.js"),j=require("../../shared/track.js"),U=require("../AiuiProvider/index.js"),z=c(require("../../components/badge.js")),A=require("../../components/heading.js"),W=require("../../components/text.js"),F=require("../../shared/trackUrlRef.js");const N="image",P="product_shelf",ie=999999999e-2,se=({data:e,configuration:t})=>{const{locale:s="us",copyWriting:m}=(0,U.useAiuiContext)(),a=(0,C.useMediaQuery)({query:"(max-width: 768px)"}),S=(o,n)=>t?.event?.primaryButton?.(o,n+1),f=(o,n)=>t?.event?.secondaryButton?.(o,n+1),l=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},T=!l?.availableForSale&&l?.price?.amount===ie,B=t?.isShowTag,b=t?.isShowOriginalPrice,p=l?.coupons?.[0],{price:h,basePrice:_}=(0,R.formatVariantPrice)({locale:s,amount:b&&p?p.variant_price4wscode:l.price,baseAmount:b&&p?l.price:0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const o=e?.sku,n=e?.variants;return n?.find(y=>y?.sku===o)?.image?.url||n?.[0]?.image?.url||""},d=e?.custom_name||e?.title,w=e?.custom_description||e?.description;return(0,i.jsx)("div",{className:(0,x.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":a}),children:(0,i.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,i.jsx)("div",{className:(0,x.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,i.jsx)("a",{href:(0,F.trackUrlRef)(`${s==="us"||!s?"":`/${s}`}/products/${e?.handle}`,`${N}_${P}`),children:(0,i.jsx)(E.default,{source:g(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),B?(0,i.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((o,n)=>(0,i.jsx)(z.default,{children:o},n))}):null,d?(0,i.jsx)(A.Heading,{title:d||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:d||""}):null,w?(0,i.jsx)(W.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:w||""}):null,(0,i.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:T?(0,i.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.soldOutText}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:h||""}),(0,i.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:_||""})]})}),(0,i.jsxs)("div",{className:(0,x.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,i.jsx)(D.default,{variant:"secondary",onClick:()=>f(e,t?.index),className:`
1
+ "use strict";"use client";var G=Object.create;var v=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)v(e,o,{get:t[o],enumerable:!0})},I=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of K(t))!Y.call(e,a)&&a!==o&&v(e,a,{get:()=>t[a],enumerable:!(p=J(t,a))||p.enumerable});return e};var l=(e,t,o)=>(o=e!=null?G(X(e)):{},I(t||!e||!e.__esModule?v(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>I(v({},"__esModule",{value:!0}),e);var ne={};Z(ne,{default:()=>ie});module.exports=ee(ne);var r=require("react/jsx-runtime"),n=l(require("react")),h=require("../../helpers/utils.js"),_=l(require("../../components/picture.js")),M=l(require("./tabSwitch.js")),D=l(require("../../components/button.js")),$=l(require("../Title/index.js")),E=l(require("../SwiperBox/index.js")),V=require("../../shared/Styles.js"),q=require("./shelfDisplay.js"),P=require("react-responsive"),H=require("../../hooks/useExposure.js"),L=require("../../shared/track.js"),R=require("../AiuiProvider/index.js"),j=l(require("../../components/badge.js")),A=require("../../components/heading.js"),O=require("../../components/text.js"),U=require("../../shared/trackUrlRef.js");const B="image",N="product_shelf",te=999999999e-2,re=e=>typeof e=="object"?e?.amount:typeof e=="number"?e:0,oe=({data:e,configuration:t})=>{const{locale:o="us",copyWriting:p}=(0,R.useAiuiContext)(),a=(0,P.useMediaQuery)({query:"(max-width: 768px)"}),x=(s,i)=>t?.event?.primaryButton?.(s,i+1),m=(s,i)=>t?.event?.secondaryButton?.(s,i+1),c=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0]||{},b=!c?.availableForSale&&c?.price?.amount===te,g=t?.isShowTag,{price:w,basePrice:d}=(0,q.formatVariantPrice)({locale:o,amount:re(c?.price),baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const s=e?.sku,i=e?.variants;return i?.find(S=>S?.sku===s)?.image?.url||i?.[0]?.image?.url||""};return(0,r.jsx)("div",{className:(0,h.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":a}),children:(0,r.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,r.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,r.jsx)("a",{href:(0,U.trackUrlRef)(`${o==="us"||!o?"":`/${o}`}/products/${e?.handle}`,`${B}_${N}`),children:(0,r.jsx)(_.default,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),g?(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((s,i)=>(0,r.jsx)(j.default,{children:s},i))}):null,e?.title?(0,r.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",html:e?.title||""}):null,e?.description?(0,r.jsx)(O.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:e?.description||""}):null,(0,r.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:b?(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:w||""}),(0,r.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:d||""})]})}),(0,r.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,r.jsx)(D.default,{variant:"secondary",onClick:()=>m(e,t?.index),className:`
2
2
  ${t.direction==="vertical"?"w-full":""}
3
- `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,i.jsx)(D.default,{variant:"primary",onClick:()=>S(e,t?.index),className:`
3
+ `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,r.jsx)(D.default,{variant:"primary",onClick:()=>x(e,t?.index),className:`
4
4
  ${t.direction==="vertical"?"w-full":""}
5
- `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},oe=r.default.forwardRef(({data:e,buildData:t,className:s="",key:m,event:a},S)=>{const[f,l]=(0,r.useState)(""),[T,B]=(0,r.useState)([]),b=(0,C.useMediaQuery)({query:"(max-width: 768px)"}),p=(0,r.useRef)(null);(0,r.useImperativeHandle)(S,()=>p.current),(0,V.useExposure)(p,{componentType:N,componentName:P,componentTitle:e?.title,navigation:f});const{productsTab:h=[],productsCard:_=[],title:g,isShowTab:d=!0,tabShape:w="square",isShowTag:o=!1,isShowOriginalPrice:n=!0,...I}=e,y=v=>{const Q=v?.map(u=>{const M=t?.products?.find(G=>G?.handle===u?.handle);if(M)return{sku:u.sku,custom_name:u.custom_name,custom_description:u.custom_description,...M}})?.filter(u=>u);B(Q)};return(0,r.useEffect)(()=>{if(d){l(h?.[0]?.tab||""),y(h?.[0]?.data||[]);return}y(_)},[]),(0,i.jsxs)("div",{ref:p,className:(0,x.cn)("w-full",s,{"aiui-dark":e?.theme==="dark"}),children:[g&&(0,i.jsx)(q.default,{data:{title:g}}),d&&(0,i.jsx)("div",{className:`${b?"w-full overflow-hidden":""}`,children:(0,i.jsx)(O.default,{value:f,tabs:h,tabShape:w,onTabClick:v=>{l(v?.tab),y(v?.data||[]),(0,j.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:N,component_name:P,component_title:e?.title,component_position:1,navigation:v?.tab}})}})}),(0,i.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,i.jsx)(H.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${m}${f}`,data:{list:T,configuration:{...I,event:a,isShowTag:o,isShowOriginalPrice:n}},Slide:se,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var re=(0,L.withStyles)(oe);
5
+ `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},se=n.default.forwardRef(({data:e,buildData:t,className:o="",key:p,event:a},x)=>{const[m,c]=(0,n.useState)(""),[b,g]=(0,n.useState)([]),w=(0,P.useMediaQuery)({query:"(max-width: 768px)"}),d=(0,n.useRef)(null);(0,n.useImperativeHandle)(x,()=>d.current),(0,H.useExposure)(d,{componentType:B,componentName:N,componentTitle:e?.title,navigation:m});const{productsTab:u=[],productsCard:s=[],title:i,isShowTab:k=!0,tabShape:S="square",isShowTag:z=!1,...W}=e,T=f=>{const F=f?.map(y=>{const C=t?.products?.find(Q=>Q?.handle===y?.handle);if(C)return{sku:y.sku,...C}})?.filter(y=>y);g(F)};return(0,n.useEffect)(()=>{if(k){c(u?.[0]?.tab||""),T(u?.[0]?.data||[]);return}T(s)},[]),(0,r.jsxs)("div",{ref:d,className:(0,h.cn)("w-full",o,{"aiui-dark":e?.theme==="dark"}),children:[i&&(0,r.jsx)($.default,{data:{title:i}}),k&&(0,r.jsx)("div",{className:`${w?"w-full overflow-hidden":""}`,children:(0,r.jsx)(M.default,{value:m,tabs:u,tabShape:S,onTabClick:f=>{c(f?.tab),T(f?.data||[]),(0,L.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:B,component_name:N,component_title:e?.title,component_position:1,navigation:f?.tab}})}})}),(0,r.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,r.jsx)(E.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${m}`,data:{list:b,configuration:{...W,event:a,isShowTag:z}},Slide:oe,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var ie=(0,V.withStyles)(se);
6
6
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {basePrice || ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag, isShowOriginalPrice } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
- "mappings": "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",
6
- "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "SwiperBox"]
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst getVariantPrice = (price: any) => {\n if (typeof price === 'object') {\n return price?.amount\n } else if (typeof price === 'number') {\n return price\n } else {\n return 0\n }\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: getVariantPrice(variant?.price),\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={data?.title || ''}\n />\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n html={data?.description || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
+ "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "getVariantPrice", "price", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
7
7
  }
package/dist/cjs/stories/category.stories.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var i=Object.create;var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var r in e)p(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of d(e))!u.call(t,s)&&s!==r&&p(t,s,{get:()=>e[s],enumerable:!(n=l(e,s))||n.enumerable});return t};var b=(t,e,r)=>(r=t!=null?i(f(t)):{},m(e||!t||!t.__esModule?p(r,"default",{value:t,enumerable:!0}):r,t)),g=t=>m(p({},"__esModule",{value:!0}),t);var k={};y(k,{Default:()=>x,MoreThanFive:()=>_,Round:()=>P,default:()=>S});module.exports=g(k);var o=require("react/jsx-runtime"),c=b(require("../biz-components/Category/index.js"));const h={title:"Biz-Components/Category",component:c.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var S=h;const a=[{name:"Anker Prime 22",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 22"}},{name:"Anker Prime 25",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 25"}},{name:"Anker Prime 37",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 37"}}],x={args:{data:{isShowSelect:!0,productData:[],products:a},className:"p-4"}},P={args:{data:{isShowSelect:!0,productData:[],shape:"round",products:a},className:"p-4"}},_=()=>(0,o.jsxs)("div",{className:"flex size-full flex-col gap-6 p-4",children:[(0,o.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 5 Items"}),(0,o.jsx)(c.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...a,...a.slice(0,2)]}}),(0,o.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 6 Items"}),(0,o.jsx)(c.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...a,...a]}}),(0,o.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 9 Items"}),(0,o.jsx)(c.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...a,...a,...a]}})]});
1
+ "use strict";var i=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var a in e)c(t,a,{get:e[a],enumerable:!0})},n=(t,e,a,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of f(e))!u.call(t,s)&&s!==a&&c(t,s,{get:()=>e[s],enumerable:!(m=l(e,s))||m.enumerable});return t};var g=(t,e,a)=>(a=t!=null?i(d(t)):{},n(e||!t||!t.__esModule?c(a,"default",{value:t,enumerable:!0}):a,t)),b=t=>n(c({},"__esModule",{value:!0}),t);var k={};y(k,{Default:()=>x,MoreThanFive:()=>_,Round:()=>P,default:()=>h});module.exports=b(k);var r=require("react/jsx-runtime"),p=g(require("../biz-components/Category/index.js")),v=require("gsap"),I=require("@gsap/react"),w=require("gsap/dist/ScrollTrigger"),M=require("gsap/dist/SplitText");const S={title:"Biz-Components/Category",component:p.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var h=S;const o=[{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}},{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}},{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}}],x={args:{data:{isShowSelect:!0,productData:[],products:o},className:"p-4"}},P={args:{data:{isShowSelect:!0,productData:[],shape:"round",products:o},className:"p-4"}},_=()=>(0,r.jsxs)("div",{className:"flex size-full flex-col gap-6 p-4",children:[(0,r.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 5 Items"}),(0,r.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o.slice(0,2)]}}),(0,r.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 6 Items"}),(0,r.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o]}}),(0,r.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 9 Items"}),(0,r.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o,...o]}})]});
2
2
  //# sourceMappingURL=category.stories.js.map
package/dist/cjs/stories/category.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/stories/category.stories.tsx"],
4
- "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\n\nconst meta = {\n title: 'Biz-Components/Category',\n component: Category,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n name: 'Anker Prime 22',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 22',\n },\n },\n {\n name: 'Anker Prime 25',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 25',\n },\n },\n {\n name: 'Anker Prime 37',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 37',\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n shape: 'round',\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const MoreThanFive = () => {\n return (\n <div className=\"flex size-full flex-col gap-6 p-4\">\n <span className=\"text-info-primary text-center text-sm font-bold\"> 5 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock.slice(0, 2)],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 6 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 9 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock, ...mock],\n }}\n />\n </div>\n )\n}\n"],
5
- "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,iBAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAgEI,IAAAO,EAAA,6BA/DJC,EAAqB,kDAErB,MAAMC,EAAO,CACX,MAAO,0BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAGf,MAAME,EAAO,CACX,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,CACF,EAEaT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,SAAUS,CACZ,EACA,UAAW,KACb,CACF,EAEaP,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,MAAO,QACP,SAAUO,CACZ,EACA,UAAW,KACb,CACF,EAEaR,EAAe,OAExB,QAAC,OAAI,UAAU,oCACb,oBAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAO,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,EAAK,MAAM,EAAG,CAAC,CAAC,CACzC,EACF,KACA,OAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,CAAI,CAC7B,EACF,KACA,OAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,EAAM,GAAGA,CAAI,CACtC,EACF,GACF",
6
- "names": ["category_stories_exports", "__export", "Default", "MoreThanFive", "Round", "category_stories_default", "__toCommonJS", "import_jsx_runtime", "import_Category", "meta", "Category", "mock"]
4
+ "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\nimport { gsap } from 'gsap'\nimport { useGSAP } from '@gsap/react'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { SplitText } from 'gsap/dist/SplitText'\n\nconst meta = {\n title: 'Biz-Components/Category',\n component: Category,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n shape: 'round',\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const MoreThanFive = () => {\n return (\n <div className=\"flex size-full flex-col gap-6 p-4\">\n <span className=\"text-info-primary text-center text-sm font-bold\"> 5 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock.slice(0, 2)],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 6 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 9 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock, ...mock],\n }}\n />\n </div>\n )\n}\n"],
5
+ "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,iBAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAoEI,IAAAO,EAAA,6BAnEJC,EAAqB,kDACrBC,EAAqB,gBACrBC,EAAwB,uBACxBC,EAA8B,mCAC9BC,EAA0B,+BAE1B,MAAMC,EAAO,CACX,MAAO,0BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOT,EAAQQ,EAGf,MAAME,EAAO,CACX,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,CACF,EAEab,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,SAAUa,CACZ,EACA,UAAW,KACb,CACF,EAEaX,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,MAAO,QACP,SAAUW,CACZ,EACA,UAAW,KACb,CACF,EAEaZ,EAAe,OAExB,QAAC,OAAI,UAAU,oCACb,oBAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAW,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,EAAK,MAAM,EAAG,CAAC,CAAC,CACzC,EACF,KACA,OAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,CAAI,CAC7B,EACF,KACA,OAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,EAAM,GAAGA,CAAI,CACtC,EACF,GACF",
6
+ "names": ["category_stories_exports", "__export", "Default", "MoreThanFive", "Round", "category_stories_default", "__toCommonJS", "import_jsx_runtime", "import_Category", "import_gsap", "import_react", "import_ScrollTrigger", "import_SplitText", "meta", "Category", "mock"]
7
7
  }
package/dist/esm/biz-components/AccordionCards/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as V,jsx as r,jsxs as i}from"react/jsx-runtime";import M from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import g from"../../components/picture.js";import w from"../../components/button.js";import C from"../SwiperBox/index.js";import{withStyles as R}from"../../shared/Styles.js";import S,{useState as k,useRef as l,useCallback as H,useImperativeHandle as L,useEffect as z}from"react";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";import{gaTrack as D}from"../../shared/track.js";import j from"../../shared/throttle.js";const s="image",m="scene_banner",P=S.forwardRef(({data:t,className:f="",event:v},N)=>{const[a,T]=k(0),c=l(0),p=l([]),u=l(!1),[h,B]=k(0),d=l(null);L(N,()=>d.current),A(d,{componentType:s,componentName:m,componentTitle:t?.title});const I=(e,o)=>{o&&(p.current[e]=o)};z(()=>{const e=()=>{p.current[c.current]&&B(p.current[c.current].offsetWidth)};e();const o=j(e,300);return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]);const E=({data:e,configuration:o})=>i("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",o?.itemShape==="round"?"rounded-2xl":""),children:[r(g,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),i("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[i("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),r("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),r("a",{href:_(e.link,`${s}_${m}`),onClick:()=>o?.event?.primaryButton(e,o),children:r(w,{variant:"secondary",className:n("text-info-primary text-sm font-bold"),children:o?.primaryButton})})]})]}),b=H(e=>{a===e||u.current||(u.current=!0,T(e),c.current=e,D({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:s,component_name:m,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,a]);return i(V,{children:[t?.title&&r(M,{data:{title:t?.title}}),r("div",{ref:d,className:n("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:r("div",{className:n("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",f),children:t?.products?.map((e,o)=>{const y=a===o;return i("div",{style:{flex:`${y?8:1} 1 0%`,transition:"all 0.6s"},ref:x=>{x&&I(o,x)},className:n("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>b(o),onMouseLeave:()=>{u.current=!1},onClick:()=>b(o),children:[r(g,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),i("div",{style:{width:h},className:n("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",y&&h?"opacity-100":"opacity-0"),children:[i("div",{className:"mr-16 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),r("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),r("a",{href:_(e?.link,`${s}_${m}`),onClick:()=>v?.primaryButton?.(t,o),children:r(w,{className:n("mb-1.5 font-bold"),children:t?.primaryButton})})]})]},o)})})}),r("div",{className:n("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:r(C,{className:n("h-[400px] !overflow-visible",f),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:v}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var Z=R(P);export{Z as default};
1
+ "use client";import{Fragment as z,jsx as o,jsxs as n}from"react/jsx-runtime";import E from"../Title/index.js";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import g from"../../components/button.js";import M from"../SwiperBox/index.js";import{withStyles as C}from"../../shared/Styles.js";import S,{useState as w,useRef as d,useCallback as H,useImperativeHandle as L,useEffect as R}from"react";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";import{gaTrack as D}from"../../shared/track.js";const l="image",s="scene_banner",j=S.forwardRef(({data:t,className:u="",event:f},_)=>{const[m,N]=w(0),a=d([]),p=d(!1),[v,T]=w(0),c=d(null);L(_,()=>c.current),A(c,{componentType:l,componentName:s,componentTitle:t?.title});const B=(e,r)=>{r&&(a.current[e]=r)};R(()=>{const e=()=>{a.current[0]&&T(a.current[0].offsetWidth)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]);const I=({data:e,configuration:r})=>n("div",{className:i("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",r?.itemShape==="round"?"rounded-2xl":""),children:[o(x,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),n("div",{className:i("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[n("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[o("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),o("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:k(e.link,`${l}_${s}`),onClick:()=>r?.event?.primaryButton(e,r),children:o(g,{variant:"secondary",className:i("text-info-primary text-sm font-bold"),children:r?.primaryButton})})]})]}),b=H(e=>{m===e||p.current||(p.current=!0,N(e),D({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:l,component_name:s,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,m]);return n(z,{children:[t?.title&&o(E,{data:{title:t?.title}}),o("div",{ref:c,className:i("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:o("div",{className:i("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",u),children:t?.products?.map((e,r)=>{const h=m===r;return n("div",{style:{flex:`${h?8:1} 1 0%`,transition:"all 0.6s"},ref:y=>{y&&B(r,y)},className:i("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>b(r),onMouseLeave:()=>{p.current=!1},onClick:()=>b(r),children:[o(x,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),n("div",{style:{width:v},className:i("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",h&&v?"opacity-100":"opacity-0"),children:[n("div",{className:"mr-16 flex-1 overflow-hidden",children:[o("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),o("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),o("a",{href:k(e?.link,`${l}_${s}`),onClick:()=>f?.primaryButton?.(t,r),children:o(g,{className:i("mb-1.5 font-bold"),children:t?.primaryButton})})]})]},r)})})}),o("div",{className:i("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:o(M,{className:i("h-[400px] !overflow-visible",u),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:f}},Slide:I,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var Q=C(j);export{Q as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/AccordionCards/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\">\n {item?.subTitle}\n </h3>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button className={cn('mb-1.5 font-bold')}>{data?.primaryButton}</Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withStyles(AccordionCards)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "throttle", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
4
+ "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[0]) {\n setContentWidth(accordionRef.current[0].offsetWidth)\n }\n }\n handleResize()\n window.addEventListener('resize', handleResize)\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\">\n {item?.subTitle}\n </h3>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button className={cn('mb-1.5 font-bold')}>{data?.primaryButton}</Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withStyles(AccordionCards)\n"],
5
+ "mappings": "aA0FQ,OA8CJ,YAAAA,EA9CI,OAAAC,EAME,QAAAC,MANF,oBAzFR,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,GAAS,YAAAC,EAAU,UAAAC,EAAQ,eAAAC,EAAa,uBAAAC,EAAqB,aAAAC,MAAiB,QACrF,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,WAAAC,MAAe,wBAGxB,MAAMC,EAAgB,QAChBC,EAAgB,eAkChBC,EAAiBX,EAAM,WAA+C,CAAC,CAAE,KAAAY,EAAM,UAAAC,EAAY,GAAI,MAAAC,CAAM,EAAGC,IAAQ,CACpH,KAAM,CAACC,EAAYC,CAAa,EAAIhB,EAAwB,CAAC,EAEvDiB,EAAehB,EAAyB,CAAC,CAAC,EAC1CiB,EAAcjB,EAAgB,EAAK,EACnC,CAACkB,EAAcC,CAAe,EAAIpB,EAAiB,CAAC,EAEpDqB,EAAWpB,EAAuB,IAAI,EAC5CE,EAAoBW,EAAK,IAAMO,EAAS,OAAyB,EACjEhB,EAAYgB,EAAU,CACpB,cAAAb,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAED,MAAMW,EAAS,CAACC,EAAeC,IAAuB,CAChDA,IACFP,EAAa,QAAQM,CAAK,EAAIC,EAElC,EAEApB,EAAU,IAAM,CACd,MAAMqB,EAAe,IAAM,CACrBR,EAAa,QAAQ,CAAC,GACxBG,EAAgBH,EAAa,QAAQ,CAAC,EAAE,WAAW,CAEvD,EACA,OAAAQ,EAAa,EACb,OAAO,iBAAiB,SAAUA,CAAY,EACvC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAY,CACnD,CACF,EAAG,CAAC,CAAC,EAEL,MAAMC,EAAa,CAAC,CAAE,KAAAf,EAAM,cAAAgB,CAAc,IAEtCnC,EAAC,OACC,UAAWE,EACT,+FACAiC,GAAe,YAAc,QAAU,cAAgB,EACzD,EAEA,UAAApC,EAACI,EAAA,CACC,UAAU,6DACV,OAAQgB,GAAM,WAAW,KAAO,GAChC,IAAKA,GAAM,WAAW,KAAO,GAC/B,EACAnB,EAAC,OAAI,UAAWE,EAAG,qEAAqE,EACtF,UAAAF,EAAC,OAAI,UAAU,0CACb,UAAAD,EAAC,KAAE,UAAU,qDAAsD,SAAAoB,GAAM,MAAM,EAC/EpB,EAAC,MAAG,UAAU,uDAAwD,SAAAoB,GAAM,SAAS,GACvF,EACApB,EAAC,KACC,KAAMe,EAAYK,EAAK,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EAChE,QAAS,IAAMkB,GAAe,OAAO,cAAchB,EAAMgB,CAAa,EAEtE,SAAApC,EAACK,EAAA,CAAO,QAAQ,YAAY,UAAWF,EAAG,qCAAqC,EAC5E,SAAAiC,GAAe,cAClB,EACF,GACF,GACF,EAIEC,EAAwB1B,EAC3B2B,GAAgB,CACXd,IAAec,GAAOX,EAAY,UACtCA,EAAY,QAAU,GAEtBF,EAAca,CAAG,EACjBtB,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,gBAAiBE,GAAM,SAASkB,CAAG,GAAG,MACtC,sBAAuBlB,GAAM,SAASkB,CAAG,GAAG,SAC5C,SAAUA,EAAM,CAClB,CACF,CAAC,EACH,EACA,CAAClB,GAAM,SAAUI,CAAU,CAC7B,EAEA,OACEvB,EAAAF,EAAA,CACG,UAAAqB,GAAM,OAASpB,EAACE,EAAA,CAAM,KAAM,CAAE,MAAOkB,GAAM,KAAM,EAAG,EACrDpB,EAAC,OAAI,IAAK8B,EAAU,UAAW3B,EAAG,sBAAuB,CAAE,YAAaiB,GAAM,QAAU,MAAO,CAAC,EAC9F,SAAApB,EAAC,OACC,UAAWG,EACT,2KACAkB,CACF,EAEC,SAAAD,GAAM,UAAU,IAAI,CAACmB,EAAMD,IAAQ,CAClC,MAAME,EAAahB,IAAec,EAElC,OACErC,EAAC,OAEC,MAAO,CACL,KAAM,GALMuC,EAAa,EAAI,CAKX,QAClB,WAAY,UACd,EACA,IAAMP,GAA8B,CAC9BA,GAAIF,EAAOO,EAAKL,CAAE,CACxB,EACA,UAAW9B,EACT,0CACAiB,GAAM,YAAc,QAAU,cAAgB,EAChD,EACA,aAAc,IAAMiB,EAAsBC,CAAG,EAC7C,aAAc,IAAM,CAClBX,EAAY,QAAU,EACxB,EACA,QAAS,IAAMU,EAAsBC,CAAG,EAExC,UAAAtC,EAACI,EAAA,CACC,OAAQmC,GAAM,KAAK,IACnB,UAAU,6DACV,IAAKA,GAAM,KAAK,KAAO,GACzB,EACAtC,EAAC,OACC,MAAO,CACL,MAAO2B,CACT,EACA,UAAWzB,EACT,oJACAqC,GAAcZ,EAAe,cAAgB,WAC/C,EAEA,UAAA3B,EAAC,OAAI,UAAU,+BACb,UAAAD,EAAC,KAAE,UAAU,+EACV,SAAAuC,GAAM,MACT,EACAvC,EAAC,MAAG,UAAU,mGACX,SAAAuC,GAAM,SACT,GACF,EACAvC,EAAC,KACC,KAAMe,EAAYwB,GAAM,KAAM,GAAGtB,CAAa,IAAIC,CAAa,EAAE,EACjE,QAAS,IAAMI,GAAO,gBAAgBF,EAAMkB,CAAG,EAE/C,SAAAtC,EAACK,EAAA,CAAO,UAAWF,EAAG,kBAAkB,EAAI,SAAAiB,GAAM,cAAc,EAClE,GACF,IA9CKkB,CA+CP,CAEJ,CAAC,EACH,EACF,EACAtC,EAAC,OAAI,UAAWG,EAAG,sBAAuB,CAAE,YAAaiB,GAAM,QAAU,MAAO,CAAC,EAC/E,SAAApB,EAACM,EAAA,CACC,UAAWH,EAAG,8BAA+BkB,CAAS,EACtD,GAAI,iBAAmBD,GAAM,IAC7B,KAAM,CACJ,KAAMA,GAAM,SACZ,cAAe,CACb,MAAOA,GAAM,MACb,UAAWA,GAAM,UACjB,cAAeA,GAAM,cACrB,MAAOE,CACT,CACF,EACA,MAAOa,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,CACF,EACF,EACF,GACF,CAEJ,CAAC,EACD,IAAOM,EAAQlC,EAAWY,CAAc",
6
+ "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
7
7
  }
package/dist/esm/biz-components/Category/SwiperCategory.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const r=n.forwardRef(({data:e,Slide:o,id:s,pagination:w})=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!0},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,a)=>i(p,{className:"!h-[unset]",children:i(o,{data:t,configuration:e?.configuration})},s+"SwiperSlide"+a))}));r.displayName="SwiperBox";var M=r;export{M as default};
1
+ "use client";import{jsx as i}from"react/jsx-runtime";import s from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const r=s.forwardRef(({data:e,Slide:o,id:a,pagination:w})=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!0},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,n)=>i(p,{className:"!h-[unset]",children:i(o,{data:t,configuration:e?.configuration})},a+"SwiperSlide"+n))}));r.displayName="SwiperBox";var B=r;export{B as default};
2
2
  //# sourceMappingURL=SwiperCategory.js.map
package/dist/esm/biz-components/Category/SwiperCategory.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
4
- "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
5
- "mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,IACtBb,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMG,EAAM,cAAeJ,GAAM,cAAe,GADvCE,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAOO,EAAQP",
4
+ "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
5
+ "mappings": "aAyDU,cAAAA,MAAA,oBAxDV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,CAC/C,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,IACtBb,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMG,EAAM,cAAeJ,GAAM,cAAe,GADvCE,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAOO,EAAQP",
6
6
  "names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "item", "jIndex", "SwiperCategory_default"]
7
7
  }
package/dist/esm/biz-components/HeroBanner/HeroBanner.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import T,{useImperativeHandle as q,useRef as I}from"react";import{useGSAP as A}from"@gsap/react";import m from"gsap";import{ScrollTrigger as p}from"gsap/dist/ScrollTrigger";import{useMediaQuery as R}from"react-responsive";import C from"../../helpers/ScrollLoadVideo.js";import{Button as E,Heading as F,Picture as G,Text as L}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as Q}from"../../shared/Styles.js";import{useExposure as J}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";const u="image",d="hero_banner",M=T.forwardRef(({data:S,className:V},D)=>{const{title:g,subtitle:x,pcImage:v,padImage:U,mobileImage:k,pcVideo:N,padVideo:w,mobileVideo:n,isShowVideo:_,primaryButton:i,secondaryButton:c,theme:j="light",size:H="default",caption:f=[],blockLink:z}=S,B=R({query:"(max-width: 768px)"}),P=R({query:"(max-width: 1024px)"}),o=I(null),t=I(null);return J(t,{componentType:u,componentName:d,componentTitle:g,componentDescription:x}),q(D,()=>t.current),A(()=>{if(m.registerPlugin(p),!o.current)return;const b=t.current?.clientHeight||100;return window.innerHeight<=b?p.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:a=>{const s=a.progress*40-20;m.set(o.current,{yPercent:s})}}):(p.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:a=>{const s=a.progress*20-20;m.set(o.current,{yPercent:s})}}),p.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:a=>{const s=a.progress*20;m.set(o.current,{yPercent:s})}})),()=>{p.getAll().forEach(a=>a.kill())}},[]),l("div",{ref:t,"data-ui-component-id":"HeroBanner",className:r(j==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":H==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":H==="sm"},V),children:[z&&e("a",{className:"absolute inset-0 z-10",href:y(z,`${u}_${d}`),tabIndex:-1,"aria-hidden":"true"}),e("div",{ref:o,className:r("absolute left-0 top-0 size-full"),children:_?e(C,{poster:B?n?.url:P?w?.url||n?.url:N?.url,src:B?n?.url:P?w?.url||n?.url:N?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(G,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:v?.alt||"",source:`${v?.url||""} , ${U?.url??(k?.url||"")} 1024, ${k?.url||""} 767`})}),l("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[l("div",{className:"laptop:text-left max-w-[686px]",children:[g&&e(F,{as:"h2",size:5,className:r("hero-banner-title"),html:g}),x&&e(L,{as:"p",size:3,className:r("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:x})]}),l("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[c&&c.text&&e("a",{href:y(c.link,`${u}_${d}`),children:e(E,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:c.text})}),i&&i.text&&e("a",{href:y(i.link,`${u}_${d}`),children:e(E,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:i.text})})]})]}),f.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:f.map((b,h)=>l(T.Fragment,{children:[e(L,{size:2,className:r("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:b.title}),h<f.length-1&&e("div",{className:r("bg-info-primary w-px")})]},h))})]})});M.displayName="HeroBanner";var se=Q(M);export{se as default};
1
+ "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import w,{useImperativeHandle as D,useRef as z}from"react";import{useGSAP as M}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as B,Heading as U,Picture as _,Text as P}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as S}from"../../shared/Styles.js";import{useExposure as j}from"../../hooks/useExposure.js";import{trackUrlRef as h}from"../../shared/trackUrlRef.js";const m="image",u="hero_banner",$=w.forwardRef(({data:T,className:R},E)=>{const{title:d,subtitle:g,pcImage:v,padImage:I,mobileImage:y,primaryButton:n,secondaryButton:i,theme:L="light",size:k="default",caption:x=[],blockLink:N}=T,o=z(null),t=z(null);return j(t,{componentType:m,componentName:u,componentTitle:d,componentDescription:g}),D(E,()=>t.current),M(()=>{if(c.registerPlugin(s),!o.current)return;const b=t.current?.clientHeight||100;return window.innerHeight<=b?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:a=>{const p=a.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:a=>{const p=a.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:a=>{const p=a.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(a=>a.kill())}},[]),l("div",{ref:t,"data-ui-component-id":"HeroBanner",className:r(L==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":k==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":k==="sm"},R),children:[N&&e("a",{className:"absolute inset-0 z-10",href:h(N,`${m}_${u}`),tabIndex:-1,"aria-hidden":"true"}),e("div",{ref:o,className:r("absolute left-0 top-0 size-full"),children:e(_,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:v?.alt||"",source:`${v?.url||""} , ${I?.url??(y?.url||"")} 1024, ${y?.url||""} 767`})}),l("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[l("div",{className:"laptop:text-left max-w-[686px]",children:[d&&e(U,{as:"h2",size:5,className:r("hero-banner-title"),html:d}),g&&e(P,{as:"p",size:3,className:r("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:g})]}),l("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:h(i.link,`${m}_${u}`),children:e(B,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),n&&n.text&&e("a",{href:h(n.link,`${m}_${u}`),children:e(B,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:n.text})})]})]}),x.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:x.map((b,f)=>l(w.Fragment,{children:[e(P,{size:2,className:r("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:b.title}),f<x.length-1&&e("div",{className:r("bg-info-primary w-px")})]},f))})]})});$.displayName="HeroBanner";var V=S($);export{V as default};
2
2
  //# sourceMappingURL=HeroBanner.js.map
package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "useMediaQuery", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "isMobile", "isPad", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
7
7
  }
package/dist/esm/biz-components/HeroBanner/types.d.ts CHANGED
@@ -9,10 +9,6 @@ export interface HeroBannerProps {
9
9
  pcImage: Media;
10
10
  padImage?: Media;
11
11
  mobileImage: Media;
12
- pcVideo?: Media;
13
- padVideo?: Media;
14
- mobileVideo?: Media;
15
- isShowVideo?: boolean;
16
12
  blockLink?: string;
17
13
  /** 主按钮文本和配置 */
18
14
  primaryButton?: {
package/dist/esm/biz-components/ShelfDisplay/index.d.ts CHANGED
@@ -18,8 +18,6 @@ export interface ShelfDisplayItem {
18
18
  tagItems?: string[];
19
19
  tab?: string;
20
20
  data?: ShelfDisplayItem[];
21
- custom_name?: string;
22
- custom_description?: string;
23
21
  }
24
22
  type EventType = {
25
23
  primaryButton?: (v: any, index: number) => void;
@@ -30,7 +28,6 @@ export interface ShelfDisplayProps {
30
28
  title?: string;
31
29
  isShowTab?: boolean;
32
30
  isShowTag?: boolean;
33
- isShowOriginalPrice?: boolean;
34
31
  direction?: 'horizontal' | 'vertical';
35
32
  align?: 'left' | 'center' | 'right';
36
33
  productsTab?: any;
package/dist/esm/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,6 +1,6 @@
1
- "use client";import{Fragment as ee,jsx as t,jsxs as x}from"react/jsx-runtime";import E,{useState as D,useEffect as O,useRef as q,useImperativeHandle as H}from"react";import{cn as v}from"../../helpers/utils.js";import L from"../../components/picture.js";import R from"./tabSwitch.js";import C from"../../components/button.js";import V from"../Title/index.js";import j from"../SwiperBox/index.js";import{withStyles as U}from"../../shared/Styles.js";import{formatVariantPrice as z}from"./shelfDisplay.js";import{useMediaQuery as I}from"react-responsive";import{useExposure as A}from"../../hooks/useExposure.js";import{gaTrack as W}from"../../shared/track.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import Q from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";import{trackUrlRef as K}from"../../shared/trackUrlRef.js";const B="image",_="product_shelf",X=999999999e-2,Y=({data:e,configuration:i})=>{const{locale:a="us",copyWriting:b}=F(),g=I({query:"(max-width: 768px)"}),w=(s,o)=>i?.event?.primaryButton?.(s,o+1),c=(s,o)=>i?.event?.secondaryButton?.(s,o+1),r=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0]||{},k=!r?.availableForSale&&r?.price?.amount===X,S=i?.isShowTag,f=i?.isShowOriginalPrice,n=r?.coupons?.[0],{price:m,basePrice:T}=z({locale:a,amount:f&&n?n.variant_price4wscode:r.price,baseAmount:f&&n?r.price:0,currencyCode:e?.price?.currencyCode||"USD"}),h=()=>{const s=e?.sku,o=e?.variants;return o?.find(d=>d?.sku===s)?.image?.url||o?.[0]?.image?.url||""},l=e?.custom_name||e?.title,y=e?.custom_description||e?.description;return t("div",{className:v("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",i?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":g}),children:x("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[t("div",{className:v("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:t("a",{href:K(`${a==="us"||!a?"":`/${a}`}/products/${e?.handle}`,`${B}_${_}`),children:t(L,{source:h(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),S?t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((s,o)=>t(Q,{children:s},o))}):null,l?t(G,{title:l||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:l||""}):null,y?t(J,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:y||""}):null,t("div",{className:"mb-2 mt-[20px] flex items-center",children:k?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):x(ee,{children:[t("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:m||""}),t("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:T||""})]})}),x("div",{className:v("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[i?.secondaryButton?t(C,{variant:"secondary",onClick:()=>c(e,i?.index),className:`
2
- ${i.direction==="vertical"?"w-full":""}
3
- `,children:i?.secondaryButton||""}):null,i?.primaryButton?t(C,{variant:"primary",onClick:()=>w(e,i?.index),className:`
4
- ${i.direction==="vertical"?"w-full":""}
5
- `,children:i?.primaryButton||""}):null]})]})},e?.id||e?.handle)},Z=E.forwardRef(({data:e,buildData:i,className:a="",key:b,event:g},w)=>{const[c,r]=D(""),[k,S]=D([]),f=I({query:"(max-width: 768px)"}),n=q(null);H(w,()=>n.current),A(n,{componentType:B,componentName:_,componentTitle:e?.title,navigation:c});const{productsTab:m=[],productsCard:T=[],title:h,isShowTab:l=!0,tabShape:y="square",isShowTag:s=!1,isShowOriginalPrice:o=!0,...N}=e,d=u=>{const M=u?.map(p=>{const P=i?.products?.find($=>$?.handle===p?.handle);if(P)return{sku:p.sku,custom_name:p.custom_name,custom_description:p.custom_description,...P}})?.filter(p=>p);S(M)};return O(()=>{if(l){r(m?.[0]?.tab||""),d(m?.[0]?.data||[]);return}d(T)},[]),x("div",{ref:n,className:v("w-full",a,{"aiui-dark":e?.theme==="dark"}),children:[h&&t(V,{data:{title:h}}),l&&t("div",{className:`${f?"w-full overflow-hidden":""}`,children:t(R,{value:c,tabs:m,tabShape:y,onTabClick:u=>{r(u?.tab),d(u?.data||[]),W({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:B,component_name:_,component_title:e?.title,component_position:1,navigation:u?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(j,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${b}${c}`,data:{list:k,configuration:{...N,event:g,isShowTag:s,isShowOriginalPrice:o}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var xe=U(Z);export{xe as default};
1
+ "use client";import{Fragment as ee,jsx as t,jsxs as u}from"react/jsx-runtime";import $,{useState as N,useEffect as E,useRef as V,useImperativeHandle as q}from"react";import{cn as d}from"../../helpers/utils.js";import H from"../../components/picture.js";import L from"./tabSwitch.js";import D from"../../components/button.js";import R from"../Title/index.js";import j from"../SwiperBox/index.js";import{withStyles as A}from"../../shared/Styles.js";import{formatVariantPrice as O}from"./shelfDisplay.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as U}from"../../hooks/useExposure.js";import{gaTrack as z}from"../../shared/track.js";import{useAiuiContext as W}from"../AiuiProvider/index.js";import F from"../../components/badge.js";import{Heading as Q}from"../../components/heading.js";import{Text as G}from"../../components/text.js";import{trackUrlRef as J}from"../../shared/trackUrlRef.js";const S="image",T="product_shelf",K=999999999e-2,X=e=>typeof e=="object"?e?.amount:typeof e=="number"?e:0,Y=({data:e,configuration:r})=>{const{locale:i="us",copyWriting:f}=W(),h=P({query:"(max-width: 768px)"}),y=(o,s)=>r?.event?.primaryButton?.(o,s+1),a=(o,s)=>r?.event?.secondaryButton?.(o,s+1),n=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},v=!n?.availableForSale&&n?.price?.amount===K,x=r?.isShowTag,{price:b,basePrice:l}=O({locale:i,amount:X(n?.price),baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),p=()=>{const o=e?.sku,s=e?.variants;return s?.find(w=>w?.sku===o)?.image?.url||s?.[0]?.image?.url||""};return t("div",{className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":h}),children:u("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[t("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:t("a",{href:J(`${i==="us"||!i?"":`/${i}`}/products/${e?.handle}`,`${S}_${T}`),children:t(H,{source:p(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),x?t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((o,s)=>t(F,{children:o},s))}):null,e?.title?t(Q,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",html:e?.title||""}):null,e?.description?t(G,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:e?.description||""}):null,t("div",{className:"mb-2 mt-[20px] flex items-center",children:v?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:f?.soldOutText}):u(ee,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:l||""})]})}),u("div",{className:d("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[r?.secondaryButton?t(D,{variant:"secondary",onClick:()=>a(e,r?.index),className:`
2
+ ${r.direction==="vertical"?"w-full":""}
3
+ `,children:r?.secondaryButton||""}):null,r?.primaryButton?t(D,{variant:"primary",onClick:()=>y(e,r?.index),className:`
4
+ ${r.direction==="vertical"?"w-full":""}
5
+ `,children:r?.primaryButton||""}):null]})]})},e?.id||e?.handle)},Z=$.forwardRef(({data:e,buildData:r,className:i="",key:f,event:h},y)=>{const[a,n]=N(""),[v,x]=N([]),b=P({query:"(max-width: 768px)"}),l=V(null);q(y,()=>l.current),U(l,{componentType:S,componentName:T,componentTitle:e?.title,navigation:a});const{productsTab:p=[],productsCard:o=[],title:s,isShowTab:g=!0,tabShape:w="square",isShowTag:C=!1,...I}=e,k=c=>{const _=c?.map(m=>{const B=r?.products?.find(M=>M?.handle===m?.handle);if(B)return{sku:m.sku,...B}})?.filter(m=>m);x(_)};return E(()=>{if(g){n(p?.[0]?.tab||""),k(p?.[0]?.data||[]);return}k(o)},[]),u("div",{ref:l,className:d("w-full",i,{"aiui-dark":e?.theme==="dark"}),children:[s&&t(R,{data:{title:s}}),g&&t("div",{className:`${b?"w-full overflow-hidden":""}`,children:t(L,{value:a,tabs:p,tabShape:w,onTabClick:c=>{n(c?.tab),k(c?.data||[]),z({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:S,component_name:T,component_title:e?.title,component_position:1,navigation:c?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(j,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${f}${a}`,data:{list:v,configuration:{...I,event:h,isShowTag:C}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var xe=A(Z);export{xe as default};
6
6
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {basePrice || ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag, isShowOriginalPrice } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst getVariantPrice = (price: any) => {\n if (typeof price === 'object') {\n return price?.amount\n } else if (typeof price === 'number') {\n return price\n } else {\n return 0\n }\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: getVariantPrice(variant?.price),\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n html={data?.title || ''}\n />\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n html={data?.description || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "getVariantPrice", "price", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
7
7
  }
package/dist/esm/stories/category.stories.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as e,jsxs as r}from"react/jsx-runtime";import a from"../biz-components/Category/index.js";const o={title:"Biz-Components/Category",component:a,parameters:{layout:"fullscreen"},tags:["autodocs"]};var c=o;const t=[{name:"Anker Prime 22",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 22"}},{name:"Anker Prime 25",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 25"}},{name:"Anker Prime 37",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 37"}}],p={args:{data:{isShowSelect:!0,productData:[],products:t},className:"p-4"}},n={args:{data:{isShowSelect:!0,productData:[],shape:"round",products:t},className:"p-4"}},m=()=>r("div",{className:"flex size-full flex-col gap-6 p-4",children:[e("span",{className:"text-info-primary text-center text-sm font-bold",children:" 5 Items"}),e(a,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...t,...t.slice(0,2)]}}),e("span",{className:"text-info-primary text-center text-sm font-bold",children:" 6 Items"}),e(a,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...t,...t]}}),e("span",{className:"text-info-primary text-center text-sm font-bold",children:" 9 Items"}),e(a,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...t,...t,...t]}})]});export{p as Default,m as MoreThanFive,n as Round,c as default};
1
+ import{jsx as e,jsxs as a}from"react/jsx-runtime";import o from"../biz-components/Category/index.js";import"gsap";import"@gsap/react";import"gsap/dist/ScrollTrigger";import"gsap/dist/SplitText";const r={title:"Biz-Components/Category",component:o,parameters:{layout:"fullscreen"},tags:["autodocs"]};var u=r;const t=[{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}},{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}},{name:"Anker Prime 27",image:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554",alt:"Anker Prime 27"}}],y={args:{data:{isShowSelect:!0,productData:[],products:t},className:"p-4"}},g={args:{data:{isShowSelect:!0,productData:[],shape:"round",products:t},className:"p-4"}},b=()=>a("div",{className:"flex size-full flex-col gap-6 p-4",children:[e("span",{className:"text-info-primary text-center text-sm font-bold",children:" 5 Items"}),e(o,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...t,...t.slice(0,2)]}}),e("span",{className:"text-info-primary text-center text-sm font-bold",children:" 6 Items"}),e(o,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...t,...t]}}),e("span",{className:"text-info-primary text-center text-sm font-bold",children:" 9 Items"}),e(o,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...t,...t,...t]}})]});export{y as Default,b as MoreThanFive,g as Round,u as default};
2
2
  //# sourceMappingURL=category.stories.js.map
package/dist/esm/stories/category.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/stories/category.stories.tsx"],
4
- "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\n\nconst meta = {\n title: 'Biz-Components/Category',\n component: Category,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n name: 'Anker Prime 22',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 22',\n },\n },\n {\n name: 'Anker Prime 25',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 25',\n },\n },\n {\n name: 'Anker Prime 37',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 37',\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n shape: 'round',\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const MoreThanFive = () => {\n return (\n <div className=\"flex size-full flex-col gap-6 p-4\">\n <span className=\"text-info-primary text-center text-sm font-bold\"> 5 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock.slice(0, 2)],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 6 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 9 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock, ...mock],\n }}\n />\n </div>\n )\n}\n"],
5
- "mappings": "AAgEI,OACE,OAAAA,EADF,QAAAC,MAAA,oBA/DJ,OAAOC,MAAc,sCAErB,MAAMC,EAAO,CACX,MAAO,0BACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAO,CACX,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,SAAUD,CACZ,EACA,UAAW,KACb,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,MAAO,QACP,SAAUF,CACZ,EACA,UAAW,KACb,CACF,EAEaG,EAAe,IAExBP,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,QAAK,UAAU,kDAAkD,oBAAQ,EAC1EA,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGG,EAAM,GAAGA,EAAK,MAAM,EAAG,CAAC,CAAC,CACzC,EACF,EACAL,EAAC,QAAK,UAAU,kDAAkD,oBAAQ,EAC1EA,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGG,EAAM,GAAGA,CAAI,CAC7B,EACF,EACAL,EAAC,QAAK,UAAU,kDAAkD,oBAAQ,EAC1EA,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGG,EAAM,GAAGA,EAAM,GAAGA,CAAI,CACtC,EACF,GACF",
4
+ "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\nimport { gsap } from 'gsap'\nimport { useGSAP } from '@gsap/react'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { SplitText } from 'gsap/dist/SplitText'\n\nconst meta = {\n title: 'Biz-Components/Category',\n component: Category,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n {\n name: 'Anker Prime 27',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n alt: 'Anker Prime 27',\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n shape: 'round',\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const MoreThanFive = () => {\n return (\n <div className=\"flex size-full flex-col gap-6 p-4\">\n <span className=\"text-info-primary text-center text-sm font-bold\"> 5 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock.slice(0, 2)],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 6 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 9 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock, ...mock],\n }}\n />\n </div>\n )\n}\n"],
5
+ "mappings": "AAoEI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAnEJ,OAAOC,MAAc,sCACrB,MAAqB,OACrB,MAAwB,cACxB,MAA8B,0BAC9B,MAA0B,sBAE1B,MAAMC,EAAO,CACX,MAAO,0BACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAO,CACX,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,EACA,CACE,KAAM,iBACN,MAAO,CACL,IAAK,+HACL,IAAK,gBACP,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,SAAUD,CACZ,EACA,UAAW,KACb,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,MAAO,QACP,SAAUF,CACZ,EACA,UAAW,KACb,CACF,EAEaG,EAAe,IAExBP,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,QAAK,UAAU,kDAAkD,oBAAQ,EAC1EA,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGG,EAAM,GAAGA,EAAK,MAAM,EAAG,CAAC,CAAC,CACzC,EACF,EACAL,EAAC,QAAK,UAAU,kDAAkD,oBAAQ,EAC1EA,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGG,EAAM,GAAGA,CAAI,CAC7B,EACF,EACAL,EAAC,QAAK,UAAU,kDAAkD,oBAAQ,EAC1EA,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGG,EAAM,GAAGA,EAAM,GAAGA,CAAI,CACtC,EACF,GACF",
6
6
  "names": ["jsx", "jsxs", "Category", "meta", "category_stories_default", "mock", "Default", "Round", "MoreThanFive"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.60-beta.1750820856510",
3
+ "version": "0.0.60",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/dist/cjs/shared/throttle.d.ts DELETED
@@ -1 +0,0 @@
1
- export default function throttle<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
package/dist/cjs/shared/throttle.js DELETED
@@ -1,2 +0,0 @@
1
- "use strict";var u=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var o=(t,e)=>{for(var r in e)u(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of s(e))!T.call(t,n)&&n!==r&&u(t,n,{get:()=>e[n],enumerable:!(a=l(e,n))||a.enumerable});return t};var p=t=>m(u({},"__esModule",{value:!0}),t);var y={};o(y,{default:()=>i});module.exports=p(y);function i(t,e){let r=null;return function(...a){r||(r=setTimeout(()=>{t.apply(this,a),r=null},e))}}
2
- //# sourceMappingURL=throttle.js.map
package/dist/cjs/shared/throttle.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/shared/throttle.ts"],
4
- "sourcesContent": ["export default function throttle<T extends (...args: any[]) => any>(\n fn: T,\n delay: number\n): (...args: Parameters<T>) => void {\n let timer: ReturnType<typeof setTimeout> | null = null\n\n return function (this: ThisParameterType<T>, ...args: Parameters<T>) {\n if (timer) return\n\n timer = setTimeout(() => {\n fn.apply(this, args)\n timer = null\n }, delay)\n }\n}\n"],
5
- "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAAe,SAARE,EACLE,EACAC,EACkC,CAClC,IAAIC,EAA8C,KAElD,OAAO,YAAyCC,EAAqB,CAC/DD,IAEJA,EAAQ,WAAW,IAAM,CACvBF,EAAG,MAAM,KAAMG,CAAI,EACnBD,EAAQ,IACV,EAAGD,CAAK,EACV,CACF",
6
- "names": ["throttle_exports", "__export", "throttle", "__toCommonJS", "fn", "delay", "timer", "args"]
7
- }
package/dist/esm/shared/throttle.d.ts DELETED
@@ -1 +0,0 @@
1
- export default function throttle<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
package/dist/esm/shared/throttle.js DELETED
@@ -1,2 +0,0 @@
1
- function a(t,r){let e=null;return function(...n){e||(e=setTimeout(()=>{t.apply(this,n),e=null},r))}}export{a as default};
2
- //# sourceMappingURL=throttle.js.map
package/dist/esm/shared/throttle.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/shared/throttle.ts"],
4
- "sourcesContent": ["export default function throttle<T extends (...args: any[]) => any>(\n fn: T,\n delay: number\n): (...args: Parameters<T>) => void {\n let timer: ReturnType<typeof setTimeout> | null = null\n\n return function (this: ThisParameterType<T>, ...args: Parameters<T>) {\n if (timer) return\n\n timer = setTimeout(() => {\n fn.apply(this, args)\n timer = null\n }, delay)\n }\n}\n"],
5
- "mappings": "AAAe,SAARA,EACLC,EACAC,EACkC,CAClC,IAAIC,EAA8C,KAElD,OAAO,YAAyCC,EAAqB,CAC/DD,IAEJA,EAAQ,WAAW,IAAM,CACvBF,EAAG,MAAM,KAAMG,CAAI,EACnBD,EAAQ,IACV,EAAGD,CAAK,EACV,CACF",
6
- "names": ["throttle", "fn", "delay", "timer", "args"]
7
- }