@anker-in/headless-ui 1.1.9-temp.120203 → 1.1.9-temp.120204
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/Category/SwiperCategory.d.ts +1 -0
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/Category/SwiperCategory.d.ts +1 -0
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var M=(e,i)=>{for(var r in i)a(e,r,{get:i[r],enumerable:!0})},d=(e,i,r,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of S(i))!P.call(e,o)&&o!==r&&a(e,o,{get:()=>i[o],enumerable:!(l=u(i,o))||l.enumerable});return e};var y=(e,i,r)=>(r=e!=null?m(g(e)):{},d(i||!e||!e.__esModule?a(r,"default",{value:e,enumerable:!0}):r,e)),B=e=>d(a({},"__esModule",{value:!0}),e);var b={};M(b,{default:()=>h});module.exports=B(b);var t=require("react/jsx-runtime"),c=y(require("react")),n=require("swiper/react"),s=require("swiper/modules"),k=require("swiper/css"),G=require("swiper/css/pagination");const f=c.default.forwardRef(({data:e,Slide:i,id:r,pagination:l},o)=>(0,t.jsx)(n.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[s.FreeMode,s.Mousewheel,s.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((w,p)=>(0,t.jsx)(n.SwiperSlide,{className:"!h-[unset]",children:(0,t.jsx)(i,{data:w,configuration:{...e?.configuration,index:p}})},r+"SwiperSlide"+p))}));f.displayName="SwiperBox";var h=f;
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["SwiperCategory_exports", "__export", "SwiperCategory_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_css", "import_pagination", "SwiperBox", "React", "data", "Slide", "id", "ref", "item", "jIndex"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6DU,IAAAI,EAAA,6BA5DVC,EAAkB,oBAClBA,EAAoC,wBACpCC,EAAiD,0BACjDC,EAAO,sBACPC,EAAO,iCAcP,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,EAAGC,OAEjG,OAAC,UACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGJ,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACK,EAAMC,OACtB,OAAC,eAA8C,UAAU,aACvD,mBAACL,EAAA,CAAM,KAAMI,EAAM,cAAe,CAAE,GAAGL,GAAM,cAAe,MAAOM,CAAO,EAAG,GAD7DJ,EAAK,cAAgBI,CAEvC,CACD,EACH,CAEH,EAEDR,EAAU,YAAc,YAExB,IAAOP,EAAQO",
|
|
6
|
+
"names": ["SwiperCategory_exports", "__export", "SwiperCategory_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_css", "import_pagination", "SwiperBox", "React", "data", "Slide", "id", "pagination", "ref", "item", "jIndex"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var I=Object.create;var u=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var o in t)u(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of $(t))!H.call(e,r)&&r!==o&&u(e,r,{get:()=>t[r],enumerable:!(n=N(t,r))||n.enumerable});return e};var h=(e,t,o)=>(o=e!=null?I(S(e)):{},v(t||!e||!e.__esModule?u(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>v(u({},"__esModule",{value:!0}),e);var R={};M(R,{default:()=>P});module.exports=D(R);var a=require("react/jsx-runtime"),m=h(require("react")),s=require("../../helpers/utils.js"),f=h(require("../../components/picture.js")),C=require("../../shared/Styles.js"),k=h(require("../Title/index.js")),g=h(require("./SwiperCategory.js")),x=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js"),w=require("../../components/heading.js");const c="image",p="category_banner",T=(e,t)=>{const o=[];for(let n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o},_=(e,t=6)=>{const o=Math.ceil(t/2),n=T(e,t),r=[];return n.forEach(i=>{const l=i.slice(0,o),d=i.slice(o);l.length&&r.push({items:l,totalCount:i.length}),d.length&&r.push({items:d,totalCount:i.length})}),r},j=({data:e,configuration:t})=>{const o=(0,m.useRef)(null);return(0,x.useExposure)(o,{componentType:c,componentName:p,componentTitle:e?.name,position:t?.index+1}),(0,a.jsxs)("div",{ref:o,className:(0,s.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,a.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,a.jsx)("a",{"aria-label":e?.name,href:(0,y.trackUrlRef)(e?.link,`${c}_${p}`),"data-headless-type-name":`${c}#${p}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,a.jsx)(f.default,{alt:e?.image?.alt||"",source:e?.image?.url||"",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,a.jsx)(w.Heading,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]})},E=({data:e,configuration:t,index:o,totalCount:n})=>{const r=(0,m.useRef)(null);(0,x.useExposure)(r,{componentType:c,componentName:p,componentTitle:e?.name,position:t?.index+1});const i=n<6,l=o===0;return(0,a.jsxs)("div",{ref:r,className:(0,s.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 duration-300",i?(0,s.cn)("p-4",l?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,a.jsx)("a",{href:(0,y.trackUrlRef)(e?.link,`${c}_${p}`),"data-headless-type-name":`${c}#${p}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:(0,a.jsx)(f.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,s.cn)("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",i?(0,s.cn)(l?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,a.jsx)("p",{className:(0,s.cn)("text-info-primary text-center text-sm font-bold",i?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},L=({data:e,configuration:t})=>(0,a.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.items?.map((o,n)=>(0,a.jsx)(E,{index:n,data:o,configuration:t,totalCount:e?.totalCount},n))}),z=m.default.forwardRef((e,t)=>{const{data:o,className:n="",key:r,event:i}=e,l=o?.isShowSelect?o?.products:o?.productData,d=_(l||[],6),b=(0,m.useRef)(null);return(0,m.useImperativeHandle)(t,()=>b.current),(0,a.jsxs)("div",{ref:b,className:(0,s.cn)("w-full overflow-hidden",n,{"aiui-dark":o?.theme==="dark"}),children:[o?.title&&(0,a.jsx)(k.default,{data:{title:o?.title},className:"text-4xl"}),(0,a.jsx)("div",{className:"tablet:block hidden",children:(0,a.jsx)(g.default,{id:`Category${r}`,Slide:j,data:{list:l,configuration:{shape:o?.shape,event:i,title:o?.title}}})}),(0,a.jsx)("div",{className:"tablet:hidden block",children:(0,a.jsx)(g.default,{id:`Category1${r}`,Slide:L,data:{list:d,configuration:{shape:o?.shape,event:i,title:o?.title}}})}),(0,a.jsx)("div",{className:"h-7"})]})});var P=(0,C.withLayout)(z);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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 { withLayout } 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'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\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
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
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", "import_heading", "componentType", "componentName", "chunkArray", "arr", "size", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } 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'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\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 buildHalfPageSlides = (data: CategoryItem[], pageSize = 6) => {\n const halfSize = Math.ceil(pageSize / 2)\n const pages = chunkArray(data, pageSize)\n const slides: { items: CategoryItem[]; totalCount: number }[] = []\n\n pages.forEach(page => {\n const firstHalf = page.slice(0, halfSize)\n const secondHalf = page.slice(halfSize)\n if (firstHalf.length) {\n slides.push({ items: firstHalf, totalCount: page.length })\n }\n if (secondHalf.length) {\n slides.push({ items: secondHalf, totalCount: page.length })\n }\n })\n\n return slides\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\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 aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\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 <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\ntype CategoryMobileSlide = {\n items: CategoryItem[]\n totalCount: number\n}\n\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n totalCount,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n totalCount: number\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCount < 6\n const isFirstItem = index === 0\n\n return (\n <div\n ref={ref}\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 duration-300',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n isFirstItemLarger\n ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n : 'max-h-[126px] px-3 py-4',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n >\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'm-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n isFirstItemLarger\n ? cn(isFirstItem ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n : 'size-[72px]'\n )}\n />\n </a>\n <p\n className={cn(\n 'text-info-primary text-center text-sm font-bold',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n )}\n >\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryMobileSlide; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.items?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n configuration={configuration}\n totalCount={data?.totalCount}\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 const mobileSlides = buildHalfPageSlides(currentData || [], 6)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\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, title: data?.title } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{\n list: mobileSlides,\n configuration: { shape: data?.shape, event: event, title: data?.title },\n }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withLayout(Category)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmFI,IAAAI,EAAA,6BAlFJC,EAAmD,oBACnDC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,kCACtBC,EAA4B,sCAC5BC,EAA4B,uCAE5BC,EAAwB,uCAExB,MAAMC,EAAgB,QAChBC,EAAgB,kBAgChBC,EAAa,CAACC,EAAYC,IAAiB,CAC/C,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAI,OAAQG,GAAKF,EACnCC,EAAO,KAAKF,EAAI,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEpC,OAAOC,CACT,EAEME,EAAsB,CAACC,EAAsBC,EAAW,IAAM,CAClE,MAAMC,EAAW,KAAK,KAAKD,EAAW,CAAC,EACjCE,EAAQT,EAAWM,EAAMC,CAAQ,EACjCG,EAA0D,CAAC,EAEjE,OAAAD,EAAM,QAAQE,GAAQ,CACpB,MAAMC,EAAYD,EAAK,MAAM,EAAGH,CAAQ,EAClCK,EAAaF,EAAK,MAAMH,CAAQ,EAClCI,EAAU,QACZF,EAAO,KAAK,CAAE,MAAOE,EAAW,WAAYD,EAAK,MAAO,CAAC,EAEvDE,EAAW,QACbH,EAAO,KAAK,CAAE,MAAOG,EAAY,WAAYF,EAAK,MAAO,CAAC,CAE9D,CAAC,EAEMD,CACT,EAEMI,EAAiB,CAAC,CAAE,KAAAR,EAAM,cAAAS,CAAc,IAAmD,CAC/F,MAAMC,KAAM,UAAuB,IAAI,EAEvC,wBAAYA,EAAK,CACf,cAAAlB,EACA,cAAAC,EACA,eAAgBO,GAAM,KACtB,SAAUS,GAAe,MAAQ,CACnC,CAAC,KAGC,QAAC,OACC,IAAKC,EACL,aAAW,MACT,2EACA,mDACA,oIACAD,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,oBAAC,OAAI,UAAU,oDACb,mBAAC,KACC,aAAYT,GAAM,KAClB,QAAM,eAAYA,GAAM,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EACjE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGO,GAAM,IAAI,GAC9C,QAAS,IAAMS,GAAe,OAAO,cAAcT,EAAMS,GAAe,KAAK,EAE7E,mBAAC,EAAAE,QAAA,CACC,IAAKX,GAAM,OAAO,KAAO,GACzB,OAAQA,GAAM,OAAO,KAAO,GAC5B,UAAU,gLACZ,EACF,EACF,KACA,OAAC,WACC,GAAG,KACH,UAAU,4GAET,SAAAA,GAAM,KACT,GACF,CAEJ,EAQMY,EAAmB,CAAC,CACxB,KAAAZ,EACA,cAAAS,EACA,MAAAI,EACA,WAAAC,CACF,IAKM,CACJ,MAAMJ,KAAM,UAAuB,IAAI,KAEvC,eAAYA,EAAK,CACf,cAAAlB,EACA,cAAAC,EACA,eAAgBO,GAAM,KACtB,SAAUS,GAAe,MAAQ,CACnC,CAAC,EAGD,MAAMM,EAAoBD,EAAa,EACjCE,EAAcH,IAAU,EAE9B,SACE,QAAC,OACC,IAAKH,EACL,aAAW,MACT,gHACA,kDAEAK,KACI,MAAG,MAAOC,EAAc,4BAA8B,gBAAgB,EACtE,0BACJP,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,oBAAC,KACC,QAAM,eAAYT,GAAM,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EACjE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGO,GAAM,IAAI,GAC9C,4BAA2B,MAAMS,GAAe,MAAQ,CAAC,GACzD,QAAS,IAAMA,GAAe,OAAO,cAAcT,EAAMS,GAAe,MAAQ,CAAC,EAEjF,mBAAC,EAAAE,QAAA,CACC,OAAQX,GAAM,OAAO,KAAO,GAC5B,IAAKA,GAAM,OAAO,KAAO,GACzB,aAAW,MACT,kGAEAe,KACI,MAAGC,EAAc,gCAAkC,2BAA2B,EAC9E,aACN,EACF,EACF,KACA,OAAC,KACC,aAAW,MACT,kDAEAD,EAAoB,eAAiB,mBACvC,EAEC,SAAAf,GAAM,KACT,GACF,CAEJ,EAGMiB,EAAqB,CAAC,CAAE,KAAAjB,EAAM,cAAAS,CAAc,OAE9C,OAAC,OAAI,UAAU,yBACZ,SAAAT,GAAM,OAAO,IAAI,CAACkB,EAAML,OACvB,OAACD,EAAA,CAEC,MAAOC,EACP,KAAMK,EACN,cAAeT,EACf,WAAYT,GAAM,YAJba,CAKP,CACD,EACH,EAIEM,EAAW,EAAAC,QAAM,WAA0C,CAACC,EAAOX,IAAQ,CAC/E,KAAM,CAAE,KAAAV,EAAM,UAAAsB,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAIH,EAEvCI,EAAczB,GAAM,aAAeA,GAAM,SAAWA,GAAM,YAC1D0B,EAAe3B,EAAoB0B,GAAe,CAAC,EAAG,CAAC,EAEvDE,KAAW,UAAuB,IAAI,EAC5C,gCAAoBjB,EAAK,IAAMiB,EAAS,OAAyB,KAG/D,QAAC,OAAI,IAAKA,EAAU,aAAW,MAAG,yBAA0BL,EAAW,CAAE,YAAatB,GAAM,QAAU,MAAO,CAAC,EAC3G,UAAAA,GAAM,UAAS,OAAC,EAAA4B,QAAA,CAAM,KAAM,CAAE,MAAO5B,GAAM,KAAM,EAAG,UAAU,WAAW,KAC1E,OAAC,OAAI,UAAU,sBACb,mBAAC,EAAA6B,QAAA,CACC,GAAI,WAAWN,CAAG,GAClB,MAAOf,EACP,KAAM,CAAE,KAAMiB,EAAa,cAAe,CAAE,MAAOzB,GAAM,MAAO,MAAOwB,EAAO,MAAOxB,GAAM,KAAM,CAAE,EACrG,EACF,KACA,OAAC,OAAI,UAAU,sBACb,mBAAC,EAAA6B,QAAA,CACC,GAAI,YAAYN,CAAG,GACnB,MAAON,EACP,KAAM,CACJ,KAAMS,EACN,cAAe,CAAE,MAAO1B,GAAM,MAAO,MAAOwB,EAAO,MAAOxB,GAAM,KAAM,CACxE,EACF,EACF,KACA,OAAC,OAAI,UAAU,MAAM,GACvB,CAEJ,CAAC,EAED,IAAOpB,KAAQ,cAAWuC,CAAQ",
|
|
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", "import_heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "buildHalfPageSlides", "data", "pageSize", "halfSize", "pages", "slides", "page", "firstHalf", "secondHalf", "CategoryPcItem", "configuration", "ref", "Picture", "SingleMobileItem", "index", "totalCount", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "React", "props", "className", "key", "event", "currentData", "mobileSlides", "innerRef", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as i}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const o=n.forwardRef(({data:e,Slide:s,id:a,pagination:w},m)=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,r)=>i(p,{className:"!h-[unset]",children:i(s,{data:t,configuration:{...e?.configuration,index:r}})},a+"SwiperSlide"+r))}));o.displayName="SwiperBox";var y=o;export{y as default};
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "ref", "item", "jIndex", "SwiperCategory_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,EAAGC,IAEjGZ,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACK,EAAMC,IACtBd,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMI,EAAM,cAAe,CAAE,GAAGL,GAAM,cAAe,MAAOM,CAAO,EAAG,GAD7DJ,EAAK,cAAgBI,CAEvC,CACD,EACH,CAEH,EAEDP,EAAU,YAAc,YAExB,IAAOQ,EAAQR",
|
|
6
|
+
"names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "ref", "item", "jIndex", "SwiperCategory_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as a,jsxs as u}from"react/jsx-runtime";import b,{useImperativeHandle as v,useRef as d}from"react";import{cn as s}from"../../helpers/utils.js";import f from"../../components/picture.js";import{withLayout as C}from"../../shared/Styles.js";import k from"../Title/index.js";import g from"./SwiperCategory.js";import{useExposure as x}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{Heading as w}from"../../components/heading.js";const m="image",c="category_banner",I=(e,o)=>{const t=[];for(let n=0;n<e.length;n+=o)t.push(e.slice(n,n+o));return t},N=(e,o=6)=>{const t=Math.ceil(o/2),n=I(e,o),i=[];return n.forEach(r=>{const l=r.slice(0,t),p=r.slice(t);l.length&&i.push({items:l,totalCount:r.length}),p.length&&i.push({items:p,totalCount:r.length})}),i},$=({data:e,configuration:o})=>{const t=d(null);return x(t,{componentType:m,componentName:c,componentTitle:e?.name,position:o?.index+1}),u("div",{ref:t,className:s("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",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("div",{className:"transition-all duration-300 group-hover:scale-110",children:a("a",{"aria-label":e?.name,href:y(e?.link,`${m}_${c}`),"data-headless-type-name":`${m}#${c}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>o?.event?.primaryButton(e,o?.index),children:a(f,{alt:e?.image?.alt||"",source:e?.image?.url||"",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"})})}),a(w,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]})},S=({data:e,configuration:o,index:t,totalCount:n})=>{const i=d(null);x(i,{componentType:m,componentName:c,componentTitle:e?.name,position:o?.index+1});const r=n<6,l=t===0;return u("div",{ref:i,className:s("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 duration-300",r?s("p-4",l?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("a",{href:y(e?.link,`${m}_${c}`),"data-headless-type-name":`${m}#${c}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${o?.index+1}`,onClick:()=>o?.event?.primaryButton(e,o?.index+1),children:a(f,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:s("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r?s(l?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),a("p",{className:s("text-info-primary text-center text-sm font-bold",r?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},H=({data:e,configuration:o})=>a("div",{className:"grid grid-cols-2 gap-3",children:e?.items?.map((t,n)=>a(S,{index:n,data:t,configuration:o,totalCount:e?.totalCount},n))}),M=b.forwardRef((e,o)=>{const{data:t,className:n="",key:i,event:r}=e,l=t?.isShowSelect?t?.products:t?.productData,p=N(l||[],6),h=d(null);return v(o,()=>h.current),u("div",{ref:h,className:s("w-full overflow-hidden",n,{"aiui-dark":t?.theme==="dark"}),children:[t?.title&&a(k,{data:{title:t?.title},className:"text-4xl"}),a("div",{className:"tablet:block hidden",children:a(g,{id:`Category${i}`,Slide:$,data:{list:l,configuration:{shape:t?.shape,event:r,title:t?.title}}})}),a("div",{className:"tablet:hidden block",children:a(g,{id:`Category1${i}`,Slide:H,data:{list:p,configuration:{shape:t?.shape,event:r,title:t?.title}}})}),a("div",{className:"h-7"})]})});var B=C(M);export{B as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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 { withLayout } 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'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\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
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "Heading", "componentType", "componentName", "chunkArray", "arr", "size", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } 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'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\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 buildHalfPageSlides = (data: CategoryItem[], pageSize = 6) => {\n const halfSize = Math.ceil(pageSize / 2)\n const pages = chunkArray(data, pageSize)\n const slides: { items: CategoryItem[]; totalCount: number }[] = []\n\n pages.forEach(page => {\n const firstHalf = page.slice(0, halfSize)\n const secondHalf = page.slice(halfSize)\n if (firstHalf.length) {\n slides.push({ items: firstHalf, totalCount: page.length })\n }\n if (secondHalf.length) {\n slides.push({ items: secondHalf, totalCount: page.length })\n }\n })\n\n return slides\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\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 aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\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 <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\ntype CategoryMobileSlide = {\n items: CategoryItem[]\n totalCount: number\n}\n\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n totalCount,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n totalCount: number\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCount < 6\n const isFirstItem = index === 0\n\n return (\n <div\n ref={ref}\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 duration-300',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n isFirstItemLarger\n ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n : 'max-h-[126px] px-3 py-4',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n >\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'm-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n isFirstItemLarger\n ? cn(isFirstItem ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n : 'size-[72px]'\n )}\n />\n </a>\n <p\n className={cn(\n 'text-info-primary text-center text-sm font-bold',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n )}\n >\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryMobileSlide; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.items?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n configuration={configuration}\n totalCount={data?.totalCount}\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 const mobileSlides = buildHalfPageSlides(currentData || [], 6)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\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, title: data?.title } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{\n list: mobileSlides,\n configuration: { shape: data?.shape, event: event, title: data?.title },\n }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withLayout(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "Heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "buildHalfPageSlides", "data", "pageSize", "halfSize", "pages", "slides", "page", "firstHalf", "secondHalf", "CategoryPcItem", "configuration", "ref", "SingleMobileItem", "index", "totalCount", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "props", "className", "key", "event", "currentData", "mobileSlides", "innerRef", "Category_default"]
|
|
7
7
|
}
|