@anker-in/headless-ui 0.0.32-alpha.3 → 0.0.32-alpha.4

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 (11) hide show
  1. package/dist/cjs/biz-components/Category/index.js +1 -1
  2. package/dist/cjs/biz-components/Category/index.js.map +3 -3
  3. package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +1 -0
  4. package/dist/cjs/biz-components/ShelfDisplay/index.js +5 -5
  5. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  6. package/dist/esm/biz-components/Category/index.js +1 -1
  7. package/dist/esm/biz-components/Category/index.js.map +3 -3
  8. package/dist/esm/biz-components/ShelfDisplay/index.d.ts +1 -0
  9. package/dist/esm/biz-components/ShelfDisplay/index.js +3 -3
  10. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  11. package/package.json +1 -1
package/dist/cjs/biz-components/Category/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var w=Object.create;var p=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},v=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of C(t))!I.call(e,a)&&a!==r&&p(e,a,{get:()=>t[a],enumerable:!(n=N(t,a))||n.enumerable});return e};var c=(e,t,r)=>(r=e!=null?w(_(e)):{},v(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),S=e=>v(p({},"__esModule",{value:!0}),e);var R={};j(R,{default:()=>P});module.exports=S(R);var o=require("react/jsx-runtime"),l=c(require("react")),i=require("../../helpers/utils.js"),s=c(require("../../components/picture.js")),y=require("../../shared/Styles.js"),b=c(require("../Title/index.js")),x=c(require("./SwiperCategory.js")),k=require("../../hooks/useExposure.js"),u=require("../../shared/trackUrlRef.js");const m="image",d="category_banner",z=(e,t)=>{const r=[];for(let n=0;n<e.length;n+=t)r.push(e.slice(n,n+t));return r},$=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,i.cn)("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,o.jsx)("a",{href:(0,u.trackUrlRef)(e?.link,`${m}_${d}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(s.default,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,o.jsx)("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),D=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("a",{href:(0,u.trackUrlRef)(e?.link,`${m}_${d}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(s.default,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),(0,o.jsx)("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),H=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,i.cn)("tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto","hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,o.jsx)("a",{href:(0,u.trackUrlRef)(e?.link,`${m}_${d}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(s.default,{className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})})}),(0,o.jsx)("p",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold ",children:e?.name})]}),B=({data:e,configuration:t,index:r})=>(0,o.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(s.default,{source:e?.image?.url||e?.image,className:(0,i.cn)("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),(0,o.jsx)("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),T=({data:e,configuration:t})=>(0,o.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,n)=>e?.length>5?(0,o.jsx)(D,{data:r,configuration:t},n):(0,o.jsx)(B,{index:n,data:r,configuration:t},n))}),M=l.default.forwardRef((e,t)=>{const{data:r,className:n="",key:a,event:f}=e,h=r?.isShowSelect?r?.products:r?.productData,g=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>g.current),(0,k.useExposure)(g,{componentType:m,componentName:d,componentTitle:r?.title}),(0,o.jsxs)("div",{ref:g,className:(0,i.cn)("w-full overflow-hidden",n,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&(0,o.jsx)(b.default,{data:{title:r?.title},className:"text-4xl"}),(0,o.jsx)("div",{className:"tablet:block hidden",children:(0,o.jsx)(x.default,{id:`Category${a}`,Slide:$,data:{list:h,configuration:{shape:r?.shape,event:f}}})}),(0,o.jsx)("div",{className:"tablet:hidden block",children:(0,o.jsx)(x.default,{id:`Category1${a}`,Slide:T,data:{list:z(h,6),configuration:{shape:r?.shape,event:f}}})}),(0,o.jsx)("div",{className:"h-7"})]})});var P=(0,y.withStyles)(M);
1
+ "use strict";"use client";var w=Object.create;var s=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},y=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of C(t))!_.call(e,a)&&a!==o&&s(e,a,{get:()=>t[a],enumerable:!(n=N(t,a))||n.enumerable});return e};var c=(e,t,o)=>(o=e!=null?w(I(e)):{},y(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),j=e=>y(s({},"__esModule",{value:!0}),e);var E={};S(E,{default:()=>R});module.exports=j(E);var r=require("react/jsx-runtime"),l=c(require("react")),i=require("../../helpers/utils.js"),m=c(require("../../components/picture.js")),v=require("../../shared/Styles.js"),b=c(require("../Title/index.js")),g=c(require("./SwiperCategory.js")),k=require("../../hooks/useExposure.js"),f=require("../../shared/trackUrlRef.js");const d="image",u="category_banner",D=(e,t)=>{const o=[];for(let n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o},$=({data:e,configuration:t})=>(0,r.jsxs)("div",{className:(0,i.cn)("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,r.jsx)("a",{href:(0,f.trackUrlRef)(e?.link,`${d}_${u}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,r.jsx)(m.default,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,r.jsx)("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),T=({data:e,configuration:t})=>(0,r.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("a",{href:(0,f.trackUrlRef)(e?.link,`${d}_${u}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,r.jsx)(m.default,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),(0,r.jsx)("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),z=({data:e,configuration:t,index:o})=>(0,r.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",o===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,r.jsx)(m.default,{source:e?.image?.url||e?.image,className:(0,i.cn)("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",o===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),(0,r.jsx)("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),B=({data:e,configuration:t})=>(0,r.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((o,n)=>e?.length>5?(0,r.jsx)(T,{data:o,configuration:t},n):(0,r.jsx)(z,{index:n,data:o,configuration:t},n))}),M=l.default.forwardRef((e,t)=>{const{data:o,className:n="",key:a,event:x}=e,h=o?.isShowSelect?o?.products:o?.productData,p=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>p.current),(0,k.useExposure)(p,{componentType:d,componentName:u,componentTitle:o?.title}),(0,r.jsxs)("div",{ref:p,className:(0,i.cn)("w-full overflow-hidden",n,{"aiui-dark":o?.theme==="dark"}),children:[o?.title&&(0,r.jsx)(b.default,{data:{title:o?.title},className:"text-4xl"}),(0,r.jsx)("div",{className:"tablet:block hidden",children:(0,r.jsx)(g.default,{id:`Category${a}`,Slide:$,data:{list:h,configuration:{shape:o?.shape,event:x}}})}),(0,r.jsx)("div",{className:"tablet:hidden block",children:(0,r.jsx)(g.default,{id:`Category1${a}`,Slide:B,data:{list:D(h,6),configuration:{shape:o?.shape,event:x}}})}),(0,r.jsx)("div",{className:"h-7"})]})});var R=(0,v.withStyles)(M);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Category/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Category/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto',\n 'hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold \">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\n// const SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n// return (\n// <>\n// <div className=\"tablet:block hidden\">\n// <div className=\"mx-auto flex w-full gap-4\">\n// {data?.map((item, index) => {\n// return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// <div className=\"tablet:hidden block\">\n// <div className=\"grid grid-cols-2 gap-3\">\n// {data?.map((item, index) => {\n// return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// </>\n// )\n// }\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\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 return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
5
- "mappings": "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",
6
- "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "Picture", "SingleItem", "SinglePcCategoryItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "React", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Title", "SwiperBox"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\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 return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
5
+ "mappings": "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",
6
+ "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "Picture", "SingleItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "React", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/ShelfDisplay/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export interface ShelfDisplayProps {
27
27
  data: {
28
28
  title?: string;
29
29
  isShowTab?: boolean;
30
+ isShowTag?: boolean;
30
31
  direction?: 'horizontal' | 'vertical';
31
32
  align?: 'left' | 'center' | 'right';
32
33
  productsTab?: any;
package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,6 +1,6 @@
1
- "use strict";"use client";var G=Object.create;var h=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,r)=>{for(var o in r)h(e,o,{get:r[o],enumerable:!0})},P=(e,r,o,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of K(r))!Y.call(e,a)&&a!==o&&h(e,a,{get:()=>r[a],enumerable:!(p=J(r,a))||p.enumerable});return e};var l=(e,r,o)=>(o=e!=null?G(X(e)):{},P(r||!e||!e.__esModule?h(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>P(h({},"__esModule",{value:!0}),e);var ne={};Z(ne,{default:()=>oe});module.exports=ee(ne);var t=require("react/jsx-runtime"),n=l(require("react")),f=require("../../helpers/utils.js"),_=l(require("../../components/picture.js")),M=l(require("./tabSwitch.js")),S=l(require("../../components/button.js")),E=l(require("../Title/index.js")),H=l(require("../SwiperBox/index.js")),q=require("../../shared/Styles.js"),V=require("./shelfDisplay.js"),R=require("../../components/container.js"),T=require("react-responsive"),$=require("../../hooks/useExposure.js"),A=require("../../shared/track.js"),L=require("../AiuiProvider/index.js"),O=l(require("../../components/badge.js")),z=require("../../components/heading.js"),U=require("../../components/text.js");const C="image",I="product_shelf",te=999999999e-2,re=({data:e,configuration:r})=>{const{locale:o="us",copyWriting:p}=(0,L.useAiuiContext)(),a=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),x=(i,s)=>r?.event?.primaryButton?.(i,s+1),d=(i,s)=>r?.event?.secondaryButton?.(i,s+1),c=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},y=!c?.availableForSale&&c?.price?.amount===te,{price:b,basePrice:g}=(0,V.formatVariantPrice)({locale:o,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),m=()=>{const i=e?.sku,s=e?.variants;return s?.find(N=>N?.sku===i)?.image?.url||s?.[0]?.image?.url||""};return(0,t.jsx)("div",{className:(0,f.cn)("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]":a}),children:(0,t.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsx)("div",{className:(0,f.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(_.default,{source:m(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,s)=>(0,t.jsx)(O.default,{children:i},s))}),(0,t.jsx)(z.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),(0,t.jsx)(U.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]",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:y?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:g||""})]})}),(0,t.jsxs)("div",{className:(0,f.cn)("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(S.default,{variant:"secondary",onClick:()=>d(e,r?.index),className:`
2
- ${r.direction==="vertical"?"w-full":""}
3
- `,children:r?.secondaryButton||""}),(0,t.jsx)(S.default,{variant:"primary",onClick:()=>x(e,r?.index),className:`
4
- ${r.direction==="vertical"?"w-full":""}
5
- `,children:r?.primaryButton||""})]})]})},e?.id||e?.handle)},ie=n.default.forwardRef(({data:e,buildData:r,className:o="",key:p,event:a},x)=>{const[d,c]=(0,n.useState)(""),[y,b]=(0,n.useState)([]),g=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,n.useRef)(null);(0,n.useImperativeHandle)(x,()=>m.current),(0,$.useExposure)(m,{componentType:C,componentName:I,componentTitle:e?.title,navigation:d});const{productsTab:i=[],productsCard:s=[],title:k,align:N="left",isShowTab:B=!0,tabShape:j="square",...F}=e,w=u=>{const Q=u?.map(v=>{const D=r?.products?.find(W=>W?.handle===v?.handle);if(D)return{sku:v.sku,...D}})?.filter(v=>v);b(Q)};return(0,n.useEffect)(()=>{if(B){c(i?.[0]?.tab||""),w(i?.[0]?.data||[]);return}w(s)},[]),(0,t.jsx)(R.Container,{...e?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:m,className:(0,f.cn)("w-full",o,{"aiui-dark":e?.theme==="dark"}),children:[k&&(0,t.jsx)(E.default,{data:{title:k}}),B&&(0,t.jsx)("div",{className:`${g?"w-full overflow-hidden":""}`,children:(0,t.jsx)(M.default,{value:d,tabs:i,tabShape:j,onTabClick:u=>{c(u?.tab),w(u?.data||[]),(0,A.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:C,component_name:I,component_title:e?.title,component_position:1,navigation:u?.tab}})}})}),(0,t.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,t.jsx)(H.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${d}`,data:{list:y,configuration:{...F,event:a}},Slide:re,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var oe=(0,q.withStyles)(ie);
1
+ "use strict";"use client";var J=Object.create;var y=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,o)=>{for(var r in o)y(e,r,{get:o[r],enumerable:!0})},D=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of X(o))!Z.call(e,a)&&a!==r&&y(e,a,{get:()=>o[a],enumerable:!(p=K(o,a))||p.enumerable});return e};var l=(e,o,r)=>(r=e!=null?J(Y(e)):{},D(o||!e||!e.__esModule?y(r,"default",{value:e,enumerable:!0}):r,e)),te=e=>D(y({},"__esModule",{value:!0}),e);var ne={};ee(ne,{default:()=>se});module.exports=te(ne);var t=require("react/jsx-runtime"),n=l(require("react")),h=require("../../helpers/utils.js"),I=l(require("../../components/picture.js")),_=l(require("./tabSwitch.js")),T=l(require("../../components/button.js")),M=l(require("../Title/index.js")),E=l(require("../SwiperBox/index.js")),H=require("../../shared/Styles.js"),q=require("./shelfDisplay.js"),L=require("../../components/container.js"),N=require("react-responsive"),V=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),A=l(require("../../components/badge.js")),O=require("../../components/heading.js"),z=require("../../components/text.js");const P="image",C="product_shelf",oe=999999999e-2,ie=({data:e,configuration:o})=>{const{locale:r="us",copyWriting:p}=(0,$.useAiuiContext)(),a=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),b=(i,s)=>o?.event?.primaryButton?.(i,s+1),m=(i,s)=>o?.event?.secondaryButton?.(i,s+1),c=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},g=!c?.availableForSale&&c?.price?.amount===oe,w=o?.isShowTag,{price:k,basePrice:d}=(0,q.formatVariantPrice)({locale:r,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const i=e?.sku,s=e?.variants;return s?.find(v=>v?.sku===i)?.image?.url||s?.[0]?.image?.url||""};return(0,t.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",o?.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,t.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:u(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:w?e?.tags?.filter(i=>i.startsWith("CLtag"))?.map(i=>i.replace("CLtag:",""))?.slice(0,2)?.map?.((i,s)=>(0,t.jsx)(A.default,{children:i},s)):null}),(0,t.jsx)(O.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),(0,t.jsx)(z.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]",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:g?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:d||""})]})}),(0,t.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",o.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(T.default,{variant:"secondary",onClick:()=>m(e,o?.index),className:`
2
+ ${o.direction==="vertical"?"w-full":""}
3
+ `,children:o?.secondaryButton||""}),(0,t.jsx)(T.default,{variant:"primary",onClick:()=>b(e,o?.index),className:`
4
+ ${o.direction==="vertical"?"w-full":""}
5
+ `,children:o?.primaryButton||""})]})]})},e?.id||e?.handle)},re=n.default.forwardRef(({data:e,buildData:o,className:r="",key:p,event:a},b)=>{const[m,c]=(0,n.useState)(""),[g,w]=(0,n.useState)([]),k=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),d=(0,n.useRef)(null);(0,n.useImperativeHandle)(b,()=>d.current),(0,V.useExposure)(d,{componentType:P,componentName:C,componentTitle:e?.title,navigation:m});const{productsTab:u=[],productsCard:i=[],title:s,align:U="left",isShowTab:v=!0,tabShape:j="square",isShowTag:W=!1,...F}=e,S=f=>{const Q=f?.map(x=>{const B=o?.products?.find(G=>G?.handle===x?.handle);if(B)return{sku:x.sku,...B}})?.filter(x=>x);w(Q)};return(0,n.useEffect)(()=>{if(v){c(u?.[0]?.tab||""),S(u?.[0]?.data||[]);return}S(i)},[]),(0,t.jsx)(L.Container,{...e?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:d,className:(0,h.cn)("w-full",r,{"aiui-dark":e?.theme==="dark"}),children:[s&&(0,t.jsx)(M.default,{data:{title:s}}),v&&(0,t.jsx)("div",{className:`${k?"w-full overflow-hidden":""}`,children:(0,t.jsx)(_.default,{value:m,tabs:u,tabShape:j,onTabClick:f=>{c(f?.tab),S(f?.data||[]),(0,R.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:P,component_name:C,component_title:e?.title,component_position:1,navigation:f?.tab}})}})}),(0,t.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,t.jsx)(E.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${m}`,data:{list:g,configuration:{...F,event:a,isShowTag:W}},Slide:ie,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var se=(0,H.withStyles)(re);
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 { Container } from '../../components/container.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'\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 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\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\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 overflow-hidden p-4\">\n <div\n className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n >\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\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 >\n {data?.title || ''}\n </Heading>\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 >\n {data?.description || ''}\n </Text>\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 <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 <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 </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 align = 'left',\n isShowTab = true,\n tabShape = 'square',\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 <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\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 } }}\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.1,\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 </Container>\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_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "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 { Container } from '../../components/container.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'\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 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: variant?.price?.amount || 0,\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 overflow-hidden p-4\">\n <div\n className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n >\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {isShowTag\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 : null}\n </div>\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 >\n {data?.title || ''}\n </Heading>\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 >\n {data?.description || ''}\n </Text>\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 <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 <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 </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 align = 'left',\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 <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\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.1,\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 </Container>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "ykBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAgIU,IAAAI,EAAA,6BA/HVC,EAAwE,oBACxEC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,6BACtBC,EAAmB,yCACnBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAmC,6BACnCC,EAA0B,yCAC1BC,EAA8B,4BAC9BC,EAA4B,sCAC5BC,EAAwB,iCACxBC,EAA+B,oCAC/BC,EAAkB,wCAClBC,EAAwB,uCACxBC,EAAqB,oCAGrB,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,GAAiB,aA2DjBC,GAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChDC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAExDC,EAAkB,CAACC,EAA0BC,IACjDN,GAAe,OAAO,gBAAgBK,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDN,GAAe,OAAO,kBAAkBK,EAAQC,EAAQ,CAAC,EAErDE,EAAUT,GAAM,UAAU,KAAMU,GAAcA,GAAM,MAAQV,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGW,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWX,GACrEc,EAAYX,GAAe,UAE3B,CAAE,MAAAY,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQZ,EACR,OAAQO,GAAS,OAAO,QAAU,EAClC,WAAYT,GAAM,gBAAgB,QAAUA,GAAM,OAAO,QAAU,EACnE,aAAcA,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKe,EAAY,IAAM,CACtB,MAAMC,EAAMhB,GAAM,IACZiB,EAAWjB,GAAM,SAEvB,OADgBiB,GAAU,KAAMP,GAAcA,GAAM,MAAQM,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,SACE,OAAC,OAEC,aAAW,MACT,oHACAhB,GAAe,QAAU,QAAU,cAAgB,eACnD,oGACA,qFACA,CACE,YAAaG,CACf,CACF,EAEA,oBAAC,OAAI,UAAU,gEACb,oBAAC,OACC,aAAW,MAAG,2FAA2F,EAEzG,mBAAC,EAAAc,QAAA,CAAQ,OAAQH,EAAU,EAAG,UAAU,yDAAyD,EACnG,KACA,OAAC,OAAI,UAAU,2DACZ,SAAAH,EACGZ,GAAM,MACF,OAAQU,GAAcA,EAAK,WAAW,OAAO,CAAC,GAC9C,IAAKA,GAAcA,EAAK,QAAQ,SAAU,EAAE,CAAC,GAC7C,MAAM,EAAG,CAAC,GACV,MAAM,CAACA,EAAWH,OAAkB,OAAC,EAAAY,QAAA,CAAmB,SAAAT,GAARH,CAAa,CAAQ,EACzE,KACN,KACA,OAAC,WACC,MAAOP,GAAM,OAAS,GACtB,KAAM,EACN,UAAU,6EAET,SAAAA,GAAM,OAAS,GAClB,KACA,OAAC,QACC,KAAM,EACN,UAAU,sJAET,SAAAA,GAAM,aAAe,GACxB,KACA,OAAC,OAAI,UAAU,mCACZ,SAAAW,KACC,OAAC,OAAI,UAAU,sDAAuD,SAAAR,GAAa,YAAY,KAE/F,oBACE,oBAAC,OAAI,UAAU,sDAAuD,SAAAU,GAAS,GAAG,KAClF,OAAC,OAAI,UAAU,6DAA8D,SAAAC,GAAa,GAAG,GAC/F,EAEJ,KAEA,QAAC,OACC,aAAW,MACT,2CACAb,EAAc,YAAc,WAAa,WAAa,EACxD,EAEA,oBAAC,EAAAmB,QAAA,CACC,QAAQ,YACR,QAAS,IAAMZ,EAAkBR,EAAMC,GAAe,KAAK,EAC3D,UAAW;AAAA,cACTA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGvD,SAAAA,GAAe,iBAAmB,GACrC,KACA,OAAC,EAAAmB,QAAA,CACC,QAAQ,UACR,QAAS,IAAMf,EAAgBL,EAAMC,GAAe,KAAK,EACzD,UAAW;AAAA,cACTA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGvD,SAAAA,GAAe,eAAiB,GACnC,GACF,GACF,GA3EKD,GAAM,IAAMA,GAAM,MA4EzB,CAEJ,EAEMqB,GAAe,EAAAC,QAAM,WACzB,CAAC,CAAE,KAAAtB,EAAM,UAAAuB,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAGC,IAAQ,CACxD,KAAM,CAACC,EAAOC,CAAQ,KAAI,YAAiB,EAAE,EACvC,CAACC,EAAcC,CAAe,KAAI,YAA6B,CAAC,CAAC,EAEjE3B,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAExD4B,KAAW,UAAuB,IAAI,KAC5C,uBAAoBL,EAAK,IAAMK,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAepC,EACf,cAAeC,EACf,eAAgBG,GAAM,MACtB,WAAY4B,CACd,CAAC,EAED,KAAM,CACJ,YAAAK,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,UAAA1B,EAAY,GACZ,GAAG2B,CACL,EAAIvC,EAEEwC,EAAoBC,GAAoC,CAC5D,MAAMC,EAAiBD,GACnB,IAAI/B,GAAQ,CACZ,MAAMiC,EAAWpB,GAAW,UAAU,KAAKjB,GAAUA,GAAQ,SAAWI,GAAM,MAAM,EACpF,GAAIiC,EACF,MAAO,CACL,IAAKjC,EAAK,IACV,GAAGiC,CACL,CAEJ,CAAC,GACC,OAAOjC,GAAQA,CAAI,EACvBqB,EAAgBW,CAAc,CAChC,EAEA,sBAAU,IAAM,CACd,GAAIL,EAAW,CACbR,EAASI,IAAc,CAAC,GAAG,KAAO,EAAE,EACpCO,EAAiBP,IAAc,CAAC,GAAG,MAAQ,CAAC,CAAC,EAC7C,MACF,CACAO,EAAiBN,CAAY,CAC/B,EAAG,CAAC,CAAC,KAGH,OAAC,aAAW,GAAIlC,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACrD,oBAAC,OAAI,IAAKgC,EAAU,aAAW,MAAG,SAAUR,EAAW,CAAE,YAAaxB,GAAM,QAAU,MAAO,CAAC,EAC3F,UAAAmC,MAAS,OAAC,EAAAS,QAAA,CAAM,KAAM,CAAE,MAAOT,CAAM,EAAG,EACxCE,MACC,OAAC,OAAI,UAAW,GAAGjC,EAAW,yBAA2B,EAAE,GACzD,mBAAC,EAAAyC,QAAA,CACC,MAAOjB,EACP,KAAMK,EACN,SAAUK,EACV,WAAYQ,GAAK,CACfjB,EAASiB,GAAG,GAAG,EACfN,EAAiBM,GAAG,MAAQ,CAAC,CAAC,KAC9B,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBlD,EAChB,eAAgBC,EAChB,gBAAiBG,GAAM,MACvB,mBAAoB,EACpB,WAAY8C,GAAG,GACjB,CACF,CAAC,CACH,EACF,EACF,KAEF,OAAC,OAAI,UAAU,2FACb,mBAAC,EAAAC,QAAA,CACC,UAAU,yBACV,GAAI,eAAetB,CAAG,GAAGG,CAAK,GAC9B,KAAM,CAAE,KAAME,EAAc,cAAe,CAAE,GAAGS,EAAO,MAAOb,EAAO,UAAAd,CAAU,CAAE,EACjF,MAAOb,GACP,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,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACF,GACF,EACF,CAEJ,CACF,EAEA,IAAOvB,MAAQ,cAAW6C,EAAY",
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_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
7
7
  }
package/dist/esm/biz-components/Category/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import f,{useImperativeHandle as h,useRef as v}from"react";import{cn as a}from"../../helpers/utils.js";import l from"../../components/picture.js";import{withStyles as y}from"../../shared/Styles.js";import b from"../Title/index.js";import x from"./SwiperCategory.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as m}from"../../shared/trackUrlRef.js";const s="image",p="category_banner",w=(e,t)=>{const r=[];for(let n=0;n<e.length;n+=t)r.push(e.slice(n,n+t));return r},N=({data:e,configuration:t})=>i("div",{className:a("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),o("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),C=({data:e,configuration:t})=>i("div",{className:a("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),o("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),R=({data:e,configuration:t})=>i("div",{className:a("tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto","hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})})}),o("p",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold ",children:e?.name})]}),_=({data:e,configuration:t,index:r})=>i("div",{className:a("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{source:e?.image?.url||e?.image,className:a("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),o("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),I=({data:e,configuration:t})=>o("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,n)=>e?.length>5?o(C,{data:r,configuration:t},n):o(_,{index:n,data:r,configuration:t},n))}),j=f.forwardRef((e,t)=>{const{data:r,className:n="",key:d,event:u}=e,g=r?.isShowSelect?r?.products:r?.productData,c=v(null);return h(t,()=>c.current),k(c,{componentType:s,componentName:p,componentTitle:r?.title}),i("div",{ref:c,className:a("w-full overflow-hidden",n,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&o(b,{data:{title:r?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(x,{id:`Category${d}`,Slide:N,data:{list:g,configuration:{shape:r?.shape,event:u}}})}),o("div",{className:"tablet:hidden block",children:o(x,{id:`Category1${d}`,Slide:I,data:{list:w(g,6),configuration:{shape:r?.shape,event:u}}})}),o("div",{className:"h-7"})]})});var E=y(j);export{E as default};
1
+ "use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import x,{useImperativeHandle as h,useRef as y}from"react";import{cn as a}from"../../helpers/utils.js";import s from"../../components/picture.js";import{withStyles as v}from"../../shared/Styles.js";import b from"../Title/index.js";import g from"./SwiperCategory.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as f}from"../../shared/trackUrlRef.js";const c="image",m="category_banner",w=(e,t)=>{const r=[];for(let n=0;n<e.length;n+=t)r.push(e.slice(n,n+t));return r},N=({data:e,configuration:t})=>i("div",{className:a("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:f(e?.link,`${c}_${m}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),o("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),C=({data:e,configuration:t})=>i("div",{className:a("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:f(e?.link,`${c}_${m}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),o("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),I=({data:e,configuration:t,index:r})=>i("div",{className:a("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(s,{source:e?.image?.url||e?.image,className:a("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),o("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),_=({data:e,configuration:t})=>o("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,n)=>e?.length>5?o(C,{data:r,configuration:t},n):o(I,{index:n,data:r,configuration:t},n))}),S=x.forwardRef((e,t)=>{const{data:r,className:n="",key:p,event:d}=e,u=r?.isShowSelect?r?.products:r?.productData,l=y(null);return h(t,()=>l.current),k(l,{componentType:c,componentName:m,componentTitle:r?.title}),i("div",{ref:l,className:a("w-full overflow-hidden",n,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&o(b,{data:{title:r?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(g,{id:`Category${p}`,Slide:N,data:{list:u,configuration:{shape:r?.shape,event:d}}})}),o("div",{className:"tablet:hidden block",children:o(g,{id:`Category1${p}`,Slide:_,data:{list:w(u,6),configuration:{shape:r?.shape,event:d}}})}),o("div",{className:"h-7"})]})});var E=v(S);export{E as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Category/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Category/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto',\n 'hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold \">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\n// const SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n// return (\n// <>\n// <div className=\"tablet:block hidden\">\n// <div className=\"mx-auto flex w-full gap-4\">\n// {data?.map((item, index) => {\n// return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// <div className=\"tablet:hidden block\">\n// <div className=\"grid grid-cols-2 gap-3\">\n// {data?.map((item, index) => {\n// return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// </>\n// )\n// }\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\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 return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "useExposure", "trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "SingleItem", "SinglePcCategoryItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Category_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\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 return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "useExposure", "trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "SingleItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Category_default"]
7
7
  }
package/dist/esm/biz-components/ShelfDisplay/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export interface ShelfDisplayProps {
27
27
  data: {
28
28
  title?: string;
29
29
  isShowTab?: boolean;
30
+ isShowTag?: boolean;
30
31
  direction?: 'horizontal' | 'vertical';
31
32
  align?: 'left' | 'center' | 'right';
32
33
  productsTab?: any;
package/dist/esm/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,6 +1,6 @@
1
- "use client";import{Fragment as Z,jsx as t,jsxs as d}from"react/jsx-runtime";import E,{useState as T,useEffect as H,useRef as q,useImperativeHandle as V}from"react";import{cn as c}from"../../helpers/utils.js";import R from"../../components/picture.js";import $ from"./tabSwitch.js";import N from"../../components/button.js";import A from"../Title/index.js";import L from"../SwiperBox/index.js";import{withStyles as O}from"../../shared/Styles.js";import{formatVariantPrice as z}from"./shelfDisplay.js";import{Container as U}from"../../components/container.js";import{useMediaQuery as B}from"react-responsive";import{useExposure as j}from"../../hooks/useExposure.js";import{gaTrack as F}from"../../shared/track.js";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import W from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";const D="image",P="product_shelf",K=999999999e-2,X=({data:e,configuration:i})=>{const{locale:m="us",copyWriting:u}=Q(),f=B({query:"(max-width: 768px)"}),v=(r,o)=>i?.event?.primaryButton?.(r,o+1),s=(r,o)=>i?.event?.secondaryButton?.(r,o+1),n=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},h=!n?.availableForSale&&n?.price?.amount===K,{price:x,basePrice:y}=z({locale:m,amount:n?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),a=()=>{const r=e?.sku,o=e?.variants;return o?.find(k=>k?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return t("div",{className:c("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]":f}),children:d("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[t("div",{className:c("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(R,{source:a(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>t(W,{children:r},o))}),t(G,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),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]",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:h?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u?.soldOutText}):d(Z,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:x||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:y||""})]})}),d("div",{className:c("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[t(N,{variant:"secondary",onClick:()=>s(e,i?.index),className:`
1
+ "use client";import{Fragment as ee,jsx as t,jsxs as u}from"react/jsx-runtime";import H,{useState as S,useEffect as q,useRef as L,useImperativeHandle as V}from"react";import{cn as d}from"../../helpers/utils.js";import R from"../../components/picture.js";import $ from"./tabSwitch.js";import T from"../../components/button.js";import A from"../Title/index.js";import O from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as U}from"./shelfDisplay.js";import{Container as j}from"../../components/container.js";import{useMediaQuery as N}from"react-responsive";import{useExposure as W}from"../../hooks/useExposure.js";import{gaTrack as F}from"../../shared/track.js";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import G from"../../components/badge.js";import{Heading as J}from"../../components/heading.js";import{Text as K}from"../../components/text.js";const B="image",D="product_shelf",X=999999999e-2,Y=({data:e,configuration:i})=>{const{locale:f="us",copyWriting:h}=Q(),v=N({query:"(max-width: 768px)"}),x=(o,r)=>i?.event?.primaryButton?.(o,r+1),n=(o,r)=>i?.event?.secondaryButton?.(o,r+1),s=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},y=!s?.availableForSale&&s?.price?.amount===X,b=i?.isShowTag,{price:g,basePrice:a}=U({locale:f,amount:s?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),l=()=>{const o=e?.sku,r=e?.variants;return r?.find(c=>c?.sku===o)?.image?.url||r?.[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",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]":v}),children:u("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[t("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(R,{source:l(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:b?e?.tags?.filter(o=>o.startsWith("CLtag"))?.map(o=>o.replace("CLtag:",""))?.slice(0,2)?.map?.((o,r)=>t(G,{children:o},r)):null}),t(J,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),t(K,{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]",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:y?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):u(ee,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:a||""})]})}),u("div",{className:d("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[t(T,{variant:"secondary",onClick:()=>n(e,i?.index),className:`
2
2
  ${i.direction==="vertical"?"w-full":""}
3
- `,children:i?.secondaryButton||""}),t(N,{variant:"primary",onClick:()=>v(e,i?.index),className:`
3
+ `,children:i?.secondaryButton||""}),t(T,{variant:"primary",onClick:()=>x(e,i?.index),className:`
4
4
  ${i.direction==="vertical"?"w-full":""}
5
- `,children:i?.primaryButton||""})]})]})},e?.id||e?.handle)},Y=E.forwardRef(({data:e,buildData:i,className:m="",key:u,event:f},v)=>{const[s,n]=T(""),[h,x]=T([]),y=B({query:"(max-width: 768px)"}),a=q(null);V(v,()=>a.current),j(a,{componentType:D,componentName:P,componentTitle:e?.title,navigation:s});const{productsTab:r=[],productsCard:o=[],title:b,align:k="left",isShowTab:w=!0,tabShape:C="square",...I}=e,g=l=>{const _=l?.map(p=>{const S=i?.products?.find(M=>M?.handle===p?.handle);if(S)return{sku:p.sku,...S}})?.filter(p=>p);x(_)};return H(()=>{if(w){n(r?.[0]?.tab||""),g(r?.[0]?.data||[]);return}g(o)},[]),t(U,{...e?.containerProps||{},className:"overflow-hidden",children:d("div",{ref:a,className:c("w-full",m,{"aiui-dark":e?.theme==="dark"}),children:[b&&t(A,{data:{title:b}}),w&&t("div",{className:`${y?"w-full overflow-hidden":""}`,children:t($,{value:s,tabs:r,tabShape:C,onTabClick:l=>{n(l?.tab),g(l?.data||[]),F({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:D,component_name:P,component_title:e?.title,component_position:1,navigation:l?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(L,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${u}${s}`,data:{list:h,configuration:{...I,event:f}},Slide:X,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var xe=O(Y);export{xe as default};
5
+ `,children:i?.primaryButton||""})]})]})},e?.id||e?.handle)},Z=H.forwardRef(({data:e,buildData:i,className:f="",key:h,event:v},x)=>{const[n,s]=S(""),[y,b]=S([]),g=N({query:"(max-width: 768px)"}),a=L(null);V(x,()=>a.current),W(a,{componentType:B,componentName:D,componentTitle:e?.title,navigation:n});const{productsTab:l=[],productsCard:o=[],title:r,align:P="left",isShowTab:c=!0,tabShape:C="square",isShowTag:I=!1,..._}=e,w=p=>{const M=p?.map(m=>{const k=i?.products?.find(E=>E?.handle===m?.handle);if(k)return{sku:m.sku,...k}})?.filter(m=>m);b(M)};return q(()=>{if(c){s(l?.[0]?.tab||""),w(l?.[0]?.data||[]);return}w(o)},[]),t(j,{...e?.containerProps||{},className:"overflow-hidden",children:u("div",{ref:a,className:d("w-full",f,{"aiui-dark":e?.theme==="dark"}),children:[r&&t(A,{data:{title:r}}),c&&t("div",{className:`${g?"w-full overflow-hidden":""}`,children:t($,{value:n,tabs:l,tabShape:C,onTabClick:p=>{s(p?.tab),w(p?.data||[]),F({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:B,component_name:D,component_title:e?.title,component_position:1,navigation:p?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(O,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${h}${n}`,data:{list:y,configuration:{..._,event:v,isShowTag:I}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var ye=z(Z);export{ye 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 { Container } from '../../components/container.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'\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 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\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\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 overflow-hidden p-4\">\n <div\n className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n >\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\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 >\n {data?.title || ''}\n </Heading>\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 >\n {data?.description || ''}\n </Text>\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 <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 <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 </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 align = 'left',\n isShowTab = true,\n tabShape = 'square',\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 <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\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 } }}\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.1,\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 </Container>\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", "Container", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "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 { Container } from '../../components/container.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'\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 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: variant?.price?.amount || 0,\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 overflow-hidden p-4\">\n <div\n className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n >\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {isShowTag\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 : null}\n </div>\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 >\n {data?.title || ''}\n </Heading>\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 >\n {data?.description || ''}\n </Text>\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 <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 <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 </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 align = 'left',\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 <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\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.1,\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 </Container>\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", "Container", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.32-alpha.3",
3
+ "version": "0.0.32-alpha.4",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",