@anker-in/headless-ui 0.0.27-alpha.81 → 0.0.27-alpha.84
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/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +1 -1
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +2 -2
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
- package/dist/cjs/biz-components/Graphic/index.d.ts +7 -6
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +1 -1
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.d.ts +7 -6
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var A=Object.create;var u=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var L=(e,s)=>{for(var n in s)u(e,n,{get:s[n],enumerable:!0})},y=(e,s,n,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of M(s))!P.call(e,a)&&a!==n&&u(e,a,{get:()=>s[a],enumerable:!(c=C(s,a))||c.enumerable});return e};var m=(e,s,n)=>(n=e!=null?A(I(e)):{},y(s||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e)),j=e=>y(u({},"__esModule",{value:!0}),e);var R={};L(R,{default:()=>H});module.exports=j(R);var t=require("react/jsx-runtime"),w=m(require("../Title/index.js")),l=require("../../helpers/utils.js"),f=m(require("../../components/picture.js")),F=m(require("../../components/button.js")),g=m(require("../SwiperBox/index.js")),i=require("react");const z=({data:e,className:s="",GSAP:n})=>{const[c,a]=(0,i.useState)(0),[k,N]=(0,i.useState)({0:!0}),v=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),p=(0,i.useRef)(!1),T=(o,r)=>{r&&(v.current[o]=r)},x=o=>{b.current?.[o]&&(p.current=!1,N({[o]:!0}))};(0,i.useEffect)(()=>{const o=v.current;return o?.forEach((r,d)=>{d?(r.style.flex="1 1 0%",r.style.transition="all 0.6s"):(r.style.flex="5 1 0%",r.style.transition="all 0.6s"),r.addEventListener("transitionend",()=>{x(d)})}),()=>{o?.forEach((r,d)=>{r.removeEventListener("transitionend",()=>x(d))})}},[]);const B=({data:o,configuration:r})=>(0,t.jsxs)("div",{className:(0,l.cn)("relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]",r?.itemShape==="round"?"rounded-2xl":""),children:[(0,t.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img?.url}),(0,t.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,t.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"text-2xl font-bold leading-[1.2] text-[#FFFFFF]",children:o?.title}),(0,t.jsx)("h3",{className:"line-clamp-2 text-sm font-semibold text-[#FFFFFF]",children:o?.subTitle})]}),(0,t.jsx)(F.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":""),children:(0,t.jsx)("a",{href:o.link,children:r?.primaryButton})})]})]});return(0,t.jsxs)(t.Fragment,{children:[e?.title&&(0,t.jsx)(w.default,{data:{title:e?.title},GSAP:n}),(0,t.jsx)("div",{className:"laptop:block hidden",children:(0,t.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",s),children:e?.products?.map((o,r)=>{const d=c===r,E=d?5:1,S=k?.[r]&&d;return(0,t.jsxs)("div",{style:{flex:E},ref:h=>{h&&T(r,h)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{c===r||p.current||(p.current=!0,b.current={[r]:!0},a(r))},children:[(0,t.jsx)(f.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,t.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",S?"w-full translate-x-0 opacity-100 transition-transform ease-out":"w-0 opacity-0"),children:[(0,t.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:o?.title}),(0,t.jsx)("h3",{className:"desktop:text-lg line-clamp-2 text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,t.jsx)(F.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:(0,t.jsx)("a",{href:o?.link,children:e?.primaryButton})})]})]},r)})})}),(0,t.jsx)("div",{className:"laptop:hidden block",children:(0,t.jsx)(g.default,{className:(0,l.cn)("h-[400px] !overflow-visible",s),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton}},Slide:B,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.2},768:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3}}})})]})};var H=z;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n }\n GSAP: any\n}\n\nconst AccordionCards = ({ data, className = '', GSAP }: AccordionCardsType) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n const isAnimation = useRef<boolean>(false)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n isAnimation.current = false\n setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style.flex = '5 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n }\n GSAP: any\n}\n\nconst AccordionCards = ({ data, className = '', GSAP }: AccordionCardsType) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n const isAnimation = useRef<boolean>(false)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n isAnimation.current = false\n setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style.flex = '5 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-2xl font-bold leading-[1.2] text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"line-clamp-2 text-sm font-semibold text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n 'w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a href={data.link}>{configuration?.primaryButton}</a>\n </Button>\n </div>\n </div>\n )\n }\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} GSAP={GSAP} />}\n <div className=\"laptop:block hidden\">\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 5 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onClick={() => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0 ref \u72B6\u6001\n enterRef.current = { [idx]: true }\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n }}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n isShowContent ? 'w-full translate-x-0 opacity-100 transition-transform ease-out' : 'w-0 opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n {item?.title}\n </p>\n <h3 className=\"desktop:text-lg line-clamp-2 text-sm font-medium text-[#FFFFFF]\">\n {item?.subTitle}\n </h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n 'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n data?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a href={item?.link}>{data?.primaryButton}</a>\n </Button>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"laptop:hidden block\">\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_react", "AccordionCards", "data", "className", "GSAP", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "Picture", "Button", "Title", "idx", "isExpanded", "flexValue", "isShowContent", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var w=Object.create;var t=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var B=(e,i)=>{for(var r in i)t(e,r,{get:i[r],enumerable:!0})},l=(e,i,r,a)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of m(i))!S.call(e,o)&&o!==r&&t(e,o,{get:()=>i[o],enumerable:!(a=c(i,o))||a.enumerable});return e};var M=(e,i,r)=>(r=e!=null?w(u(e)):{},l(i||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),g=e=>l(t({},"__esModule",{value:!0}),e);var P={};B(P,{default:()=>y});module.exports=g(P);var n=require("react/jsx-runtime"),d=M(require("react")),b=require("../../helpers/utils.js"),p=require("swiper/react"),s=require("swiper/modules");const f=d.default.forwardRef(({data:e,Slide:i,id:r})=>(0,n.jsx)(p.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},className:"!overflow-visible",modules:[s.FreeMode,s.Mousewheel,s.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1},
|
|
1
|
+
"use strict";"use client";var w=Object.create;var t=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var B=(e,i)=>{for(var r in i)t(e,r,{get:i[r],enumerable:!0})},l=(e,i,r,a)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of m(i))!S.call(e,o)&&o!==r&&t(e,o,{get:()=>i[o],enumerable:!(a=c(i,o))||a.enumerable});return e};var M=(e,i,r)=>(r=e!=null?w(u(e)):{},l(i||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),g=e=>l(t({},"__esModule",{value:!0}),e);var P={};B(P,{default:()=>y});module.exports=g(P);var n=require("react/jsx-runtime"),d=M(require("react")),b=require("../../helpers/utils.js"),p=require("swiper/react"),s=require("swiper/modules");const f=d.default.forwardRef(({data:e,Slide:i,id:r})=>(0,n.jsx)(p.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},className:"!overflow-visible",modules:[s.FreeMode,s.Mousewheel,s.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:6}},children:e?.list?.map((a,o)=>(0,n.jsx)(p.SwiperSlide,{className:"!h-[unset]",children:(0,n.jsx)(i,{data:a,configuration:e?.configuration})},r+"SwiperSlide"+o))}));f.displayName="SwiperBox";var y=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 { cn } from '../../helpers/utils.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\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 }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\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 }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 6,\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
5
|
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDU,IAAAI,EAAA,6BAlDVC,EAAkB,oBAClBC,EAAmB,kCACnBD,EAAoC,wBACpCE,EAAiD,0BAajD,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,GAAAC,CAAG,OAElF,OAAC,UACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,UAAU,oBACV,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EAEC,SAAAF,GAAM,MAAM,IAAI,CAACG,EAAMC,OACtB,OAAC,eAA8C,UAAU,aACvD,mBAACH,EAAA,CAAM,KAAME,EAAM,cAAeH,GAAM,cAAe,GADvCE,EAAK,cAAgBE,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAON,EAAQM",
|
|
6
6
|
"names": ["SwiperCategory_exports", "__export", "SwiperCategory_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_modules", "SwiperBox", "React", "data", "Slide", "id", "item", "jIndex"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var b=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var C=(e,o)=>{for(var r in o)c(e,r,{get:o[r],enumerable:!0})},u=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of v(o))!y.call(e,n)&&n!==r&&c(e,n,{get:()=>o[n],enumerable:!(a=h(o,n))||a.enumerable});return e};var m=(e,o,r)=>(r=e!=null?b(x(e)):{},u(o||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),F=e=>u(c({},"__esModule",{value:!0}),e);var P={};C(P,{default:()=>A});module.exports=F(P);var t=require("react/jsx-runtime"),z=require("react"),i=require("../../helpers/utils.js"),l=m(require("../../components/picture.js")),p=require("../../shared/Styles.js"),g=m(require("../Title/index.js")),d=m(require("./SwiperCategory.js"));const N=(e,o)=>{const r=[];for(let a=0;a<e.length;a+=o)r.push(e.slice(a,a+o));return r},w=({data:e,configuration:o})=>(0,t.jsxs)("div",{className:(0,i.cn)("group box-border flex h-auto w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,t.jsx)(l.default,{source:e?.image?.url||e?.image,className:"laptop:size-[146px] m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})}),(0,t.jsx)("p",{className:"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold",children:e?.name})]}),k=({data:e,configuration:o})=>(0,t.jsxs)("div",{className:(0,i.cn)("box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]","cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)(l.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,t.jsx)("p",{className:"flex-1 truncate text-center text-sm font-semibold",children:e?.name})]},`${e?.name}`),I=({data:e,configuration:o})=>(0,t.jsxs)("div",{className:(0,i.cn)("aspect-h-[240] group box-border h-auto flex-1 shrink-0 overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,t.jsx)(l.default,{className:"laptop:size-[146px] 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,t.jsx)("p",{className:"tablet:text-lg text-center text-sm font-semibold",children:e?.name})]}),S=({data:e,configuration:o,index:r})=>(0,t.jsxs)("div",{className:(0,i.cn)("box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]","cursor-pointer p-4 hover:bg-[#FFFFFF]",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,i.cn)(r===0?"max-h-[146px]":"max-h-[72px] max-w-[72px]"),children:(0,t.jsx)(l.default,{className:(0,i.cn)("m-auto mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"),source:e?.image?.url||e?.image})}),(0,t.jsx)("p",{className:"line-clamp-2 text-center text-sm font-semibold",children:e?.name})]}),j=({data:e,configuration:o})=>(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>(0,t.jsx)(k,{data:r,configuration:o},a))}),E=({data:e,configuration:o})=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"mx-auto flex w-full gap-4",children:e?.map((r,a)=>(0,t.jsx)(I,{data:r,configuration:o},a))})}),(0,t.jsx)("div",{className:"tablet:hidden block",children:(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>(0,t.jsx)(S,{index:a,data:r,configuration:o},a))})})]}),_=({data:e,buildData:o,className:r="",key:a,GSAP:n})=>{const s=e?.isShowSelect?e?.products:e?.productData,f=s?.length<=5;return(0,t.jsxs)("div",{className:(0,i.cn)("w-full",r),children:[e?.title&&(0,t.jsx)(g.default,{data:{title:e?.title},GSAP:n}),f?(0,t.jsx)(E,{data:s,configuration:{shape:e?.shape}}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(d.default,{id:`Category${a}`,Slide:w,data:{list:s,configuration:{shape:e?.shape}}})}),(0,t.jsx)("div",{className:"tablet:hidden block overflow-hidden",children:(0,t.jsx)(d.default,{id:`Category1${a}`,Slide:j,data:{list:N(s,6),configuration:{shape:e?.shape}}})})]})]})};var A=(0,p.withStyles)(_);
|
|
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 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'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n}\n\nexport interface CategoryProps {\n GSAP: any\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\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 'group box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[146px] m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </div>\n <p className=\"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\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 <p className=\"flex-1 truncate text-center text-sm font-semibold\">{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 'group box-border flex
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4CI,IAAAI,EAAA,6BA3CJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,kCA4BtB,MAAMC,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,EAAiB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAE1C,QAAC,OACC,aAAW,MACT,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React 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'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n}\n\nexport interface CategoryProps {\n GSAP: any\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\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 'group box-border flex h-auto w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[146px] m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </div>\n <p className=\"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\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 <p className=\"flex-1 truncate text-center text-sm font-semibold\">{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 'aspect-h-[240] group box-border h-auto flex-1 shrink-0 overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <Picture\n className=\"laptop:size-[146px] 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 </div>\n <p className=\"tablet:text-lg text-center text-sm font-semibold\">{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 'box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer p-4 hover:bg-[#FFFFFF]',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn(index === 0 ? 'max-h-[146px]' : 'max-h-[72px] max-w-[72px]')}>\n <Picture\n className={cn(\n 'm-auto mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover'\n )}\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"line-clamp-2 text-center text-sm font-semibold\">{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 <SingleItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\nconst 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.FC<CategoryProps> = ({ data, buildData, className = '', key, GSAP }) => {\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 isSoundCore = currentData?.length <= 5\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} GSAP={GSAP} />}\n {isSoundCore ? (\n <SoundCoreCategoryItem data={currentData} configuration={{ shape: data?.shape }} />\n ) : (\n <>\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape } }}\n />\n </div>\n <div className=\"tablet:hidden block overflow-hidden\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape } }}\n />\n </div>\n </>\n )}\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "Picture", "SingleItem", "SinglePcCategoryItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "SoundCoreCategoryItem", "Category", "buildData", "className", "key", "GSAP", "currentData", "isSoundCore", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var w=Object.create;var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var F=(e,r)=>{for(var l in r)n(e,l,{get:r[l],enumerable:!0})},p=(e,r,l,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of b(r))!N.call(e,s)&&s!==l&&n(e,s,{get:()=>r[s],enumerable:!(a=x(r,s))||a.enumerable});return e};var d=(e,r,l)=>(l=e!=null?w(h(e)):{},p(r||!e||!e.__esModule?n(l,"default",{value:e,enumerable:!0}):l,e)),
|
|
1
|
+
"use strict";"use client";var w=Object.create;var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var F=(e,r)=>{for(var l in r)n(e,l,{get:r[l],enumerable:!0})},p=(e,r,l,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of b(r))!N.call(e,s)&&s!==l&&n(e,s,{get:()=>r[s],enumerable:!(a=x(r,s))||a.enumerable});return e};var d=(e,r,l)=>(l=e!=null?w(h(e)):{},p(r||!e||!e.__esModule?n(l,"default",{value:e,enumerable:!0}):l,e)),k=e=>p(n({},"__esModule",{value:!0}),e);var L={};F(L,{default:()=>E});module.exports=k(L);var t=require("react/jsx-runtime"),y=require("react"),c=d(require("../Title/index.js")),o=require("../../helpers/utils.js"),f=d(require("../../components/picture.js")),v=d(require("../SwiperBox/index.js")),u=require("../../shared/Styles.js"),i=require("../../components/avatar.js");const A=({data:e,configuration:r})=>{const l=a=>a?Array.from(new Array(Number(a)))||[]:[];return(0,t.jsxs)("div",{className:(0,o.cn)("box-border flex w-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":"rounded-none","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]"),children:[(0,t.jsxs)("div",{className:(0,o.cn)("laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}),(0,t.jsx)("div",{className:"mt-1 flex items-center",children:l(e?.rating)?.map?.((a,s)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},s))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:(0,t.jsx)(i.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:e?.avatar?.url?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(i.AvatarFallback,{children:e?.title})]}):e?.title})})]}),(0,t.jsx)("p",{className:"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.description||""}),(0,t.jsxs)("div",{className:(0,o.cn)("mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(f.default,{className:"w-full object-cover",source:e?.img?.url})}),(0,t.jsx)("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:e?.subTitle||""})]})]})},C=({className:e="",data:r,key:l,GSAP:a})=>{const{products:s,title:m,...g}=r;return(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)("div",{className:(0,o.cn)("w-full",e),children:[m&&(0,t.jsx)(c.default,{data:{title:m},GSAP:a}),(0,t.jsx)(v.default,{className:"!overflow-visible",id:"Evaluate"+l,data:{list:s,configuration:{...g}},Slide:A,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.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})};var E=(0,u.withStyles)(C);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n}\n\nexport interface EvaluateProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n }\n key?: string\n GSAP: any\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'box-border flex w-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">{data?.description || ''}</p>\n <div\n className={cn(\n 'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </div>\n )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key, GSAP }) => {\n const { products, title, ...ohter } = data\n return (\n <>\n <div className={cn('w-full', className)}>\n {title && <Title data={{ title: title }} GSAP={GSAP} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\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,\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 </>\n )\n}\n\nexport default withStyles(Evaluate)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n}\n\nexport interface EvaluateProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n }\n key?: string\n GSAP: any\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'box-border flex w-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]'\n )}\n >\n <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">{data?.description || ''}</p>\n <div\n className={cn(\n 'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </div>\n )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key, GSAP }) => {\n const { products, title, ...ohter } = data\n return (\n <>\n <div className={cn('w-full', className)}>\n {title && <Title data={{ title: title }} GSAP={GSAP} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\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.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default withStyles(Evaluate)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsDQ,IAAAI,EAAA,6BArDRC,EAAkB,iBAClBC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAoD,sCA8BpD,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,SACE,QAAC,OACC,aAAW,MACT,kHACAF,GAAe,QAAU,QAAU,cAAgB,eACnD,kDACF,EAEA,qBAAC,OAAI,aAAW,MAAG,6DAA6D,EAC9E,qBAAC,OAAI,UAAU,SACb,oBAAC,MAAG,UAAU,mCAAoC,SAAAD,GAAM,MAAM,KAC9D,OAAC,OAAI,UAAU,yBACZ,SAAAE,EAAaF,GAAM,MAAM,GAAG,MAAM,CAACI,EAAGC,OAEnC,OAAC,OAAgB,UAAU,OACzB,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQA,CAOV,CAEH,EACH,GACF,KACA,OAAC,OAAI,UAAU,0CACb,mBAAC,UAAO,UAAU,YAAY,aAAc,CAACL,GAAM,QAAQ,IACxD,SAAAA,GAAM,QAAQ,OACb,oBACE,oBAAC,eAAY,IAAKA,GAAM,QAAQ,IAAK,KACrC,OAAC,kBAAgB,SAAAA,GAAM,MAAM,GAC/B,EAEAA,GAAM,MAEV,EACF,GACF,KACA,OAAC,KAAE,UAAU,wEAAyE,SAAAA,GAAM,aAAe,GAAG,KAC9G,QAAC,OACC,aAAW,MACT,2DACAC,GAAe,QAAU,QAAU,aAAe,cACpD,EAEA,oBAAC,OAAI,UAAU,gEACb,mBAAC,EAAAK,QAAA,CAAQ,UAAU,sBAAsB,OAAQN,GAAM,KAAK,IAAK,EACnE,KACA,OAAC,KAAE,UAAU,2DAA4D,SAAAA,GAAM,UAAY,GAAG,GAChG,GACF,CAEJ,EAEMO,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAR,EAAM,IAAAS,EAAK,KAAAC,CAAK,IAAM,CACjF,KAAM,CAAE,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAM,EAAIb,EACtC,SACE,mBACE,oBAAC,OAAI,aAAW,MAAG,SAAUQ,CAAS,EACnC,UAAAI,MAAS,OAAC,EAAAE,QAAA,CAAM,KAAM,CAAE,MAAOF,CAAM,EAAG,KAAMF,EAAM,KACrD,OAAC,EAAAK,QAAA,CACC,UAAU,oBACV,GAAI,WAAaN,EACjB,KAAM,CAAE,KAAME,EAAU,cAAe,CAAE,GAAGE,CAAM,CAAE,EACpD,MAAOd,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,CAEJ,EAEA,IAAOV,KAAQ,cAAWkB,CAAQ",
|
|
6
6
|
"names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Picture", "Evaluate", "className", "key", "GSAP", "products", "title", "ohter", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ComponentCommonProps, Img } from '../../types/props.js';
|
|
3
|
+
type GraphicType = {
|
|
4
|
+
imgUrl: Img;
|
|
5
|
+
title: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
textColor?: string;
|
|
8
|
+
};
|
|
3
9
|
export interface GraphicProps extends ComponentCommonProps {
|
|
4
10
|
className?: string;
|
|
5
11
|
data: {
|
|
6
12
|
title?: string;
|
|
7
|
-
items?:
|
|
8
|
-
imgUrl: Img;
|
|
9
|
-
title: string;
|
|
10
|
-
description?: string;
|
|
11
|
-
textColor?: string;
|
|
12
|
-
}[];
|
|
13
|
+
items?: GraphicType[];
|
|
13
14
|
itemShape?: 'round' | 'square';
|
|
14
15
|
};
|
|
15
16
|
GSAP: any;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var w=Object.create;var r=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var s in t)r(e,s,{get:t[s],enumerable:!0})},d=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of y(t))!G.call(e,o)&&o!==s&&r(e,o,{get:()=>t[o],enumerable:!(p=v(t,o))||p.enumerable});return e};var n=(e,t,s)=>(s=e!=null?w(P(e)):{},d(t||!e||!e.__esModule?r(s,"default",{value:e,enumerable:!0}):s,e)),S=e=>d(r({},"__esModule",{value:!0}),e);var C={};N(C,{default:()=>k});module.exports=S(C);var i=require("react/jsx-runtime"),f=n(require("react")),m=require("../../helpers/utils.js"),h=require("../../shared/Styles.js"),x=n(require("../SwiperBox/index.js")),u=require("../../components/index.js"),l=require("../../components/index.js"),g=n(require("../Title/index.js"));const b=({data:e,configuration:t})=>(0,i.jsx)("div",{className:"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",children:(0,i.jsxs)("div",{className:(0,m.cn)("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:[(0,i.jsx)(l.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,i.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,i.jsx)(l.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2"}),e?.description&&(0,i.jsx)(u.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})}),c=f.default.forwardRef(({data:e,className:t,GSAP:s,...p},o)=>{const a=e?.items?.length>2;return(0,i.jsxs)("div",{children:[e?.title&&(0,i.jsx)(g.default,{data:{title:e?.title},GSAP:s}),(0,i.jsx)(x.default,{className:(0,m.cn)("!overflow-visible",t),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:b,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:a?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:a?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:a?4:2}}})]})});c.displayName="Graphic";var k=(0,h.withStyles)(c);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n }\n GSAP: any\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div className=\"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]\">\n <div\n className={cn('relative h-full', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, GSAP, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} GSAP={GSAP} />}\n <SwiperBox\n className={cn('!overflow-visible', className)}\n id={'Graphic'}\n data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n Slide={Item}\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: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkCQ,IAAAI,EAAA,6BAjCRC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAAkB,gCAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OAAI,UAAU,oFACb,oBAAC,OACC,aAAW,MAAG,kBAAmB,CAC9B,gDAAkDA,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQD,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,0EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CAC3G,MAAMC,EAAUR,GAAM,OAAyB,OAAS,EACxD,SACE,QAAC,OACE,UAAAA,GAAM,UAAS,OAAC,EAAAS,QAAA,CAAM,KAAM,CAAE,MAAOT,GAAM,KAAM,EAAG,KAAMK,EAAM,KACjE,OAAC,EAAAK,QAAA,CACC,aAAW,MAAG,oBAAqBN,CAAS,EAC5C,GAAI,UACJ,KAAM,CAAE,KAAMJ,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeS,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,CAEJ,CAAC,EAEDN,EAAQ,YAAc,UAEtB,IAAOZ,KAAQ,cAAWY,CAAO",
|
|
6
|
+
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "Item", "data", "configuration", "Graphic", "React", "className", "GSAP", "props", "ref", "isShow", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var S=Object.create;var
|
|
1
|
+
"use strict";var S=Object.create;var N=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var A=(a,o)=>{for(var s in o)N(a,s,{get:o[s],enumerable:!0})},v=(a,o,s,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of R(o))!z.call(a,i)&&i!==s&&N(a,i,{get:()=>o[i],enumerable:!(m=P(o,i))||m.enumerable});return a};var g=(a,o,s)=>(s=a!=null?S(q(a)):{},v(o||!a||!a.__esModule?N(s,"default",{value:a,enumerable:!0}):s,a)),H=a=>v(N({},"__esModule",{value:!0}),a);var O={};A(O,{default:()=>E});module.exports=H(O);var e=require("react/jsx-runtime"),T=g(require("react")),w=require("react-responsive"),G=require("../../shared/Styles.js"),B=g(require("../../components/picture.js")),C=g(require("../../components/button.js")),I=require("../../components/heading.js"),$=require("../../components/text.js"),r=require("../../components/carousel.js"),d=require("../../components/gird.js"),M=g(require("../Title/index.js")),L=require("../../helpers/utils.js"),u=require("../../components/tabs.js");const b=({item:a,shape:o="square",isTab:s=!1})=>{const m=(0,w.useMediaQuery)({query:"(max-width: 1024px)"}),{theme:i="light",title:h,description:n,imageUrl:x,primaryButton:f,secondaryButton:c}=a,k="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,L.cn)("item-wrapper group relative w-full overflow-hidden",{"rounded-box":o==="rounded","aiui-dark":i==="dark","h-[480px]":m&&!s,"h-[400px]":m&&s},"text-info-primary"),children:[(0,e.jsx)(B.default,{source:x?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${x?.width}/${x?.height}`}}),(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(I.Heading,{size:3,className:"item-title",html:h}),(0,e.jsx)($.Text,{className:"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3",html:n})]}),(0,e.jsxs)("div",{className:"flex gap-[16px]",children:[c&&(0,e.jsx)(C.default,{className:k,variant:"secondary",asChild:!0,children:(0,e.jsx)("a",{href:c.link,children:c.text})}),f&&(0,e.jsx)(C.default,{className:k,variant:"primary",asChild:!0,children:(0,e.jsx)("a",{href:f.link,children:f.text})})]})]})]})},D=T.default.forwardRef((a,o)=>{const{shape:s,sectionTitle:m,groupByTab:i=!1,items:h=[],carousel:n}=a.data,{GSAP:x}=a,f=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},c=h.map(t=>t.tabName).filter(Boolean).filter((t,l,p)=>p.indexOf(t)===l),k=c.map(t=>({tabName:t,items:h.filter(l=>l.tabName===t)})).reduce((t,l)=>(t[l.tabName]=l.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[m&&(0,e.jsx)(M.default,{data:{title:m},className:"section-title",GSAP:x}),i?(0,e.jsxs)(u.Tabs,{shape:s,align:"left",defaultValue:c[0],children:[(0,e.jsx)(u.TabsList,{children:c.map((t,l)=>(0,e.jsx)(u.TabsTrigger,{value:t,children:t},l))}),c.map((t,l)=>(0,e.jsx)(u.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(d.Grid,{className:"w-full",children:[k[t].map((p,y)=>(0,e.jsx)(d.GridItem,{span:f(p.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(b,{item:p,shape:s,isTab:i})},`${p?.title||""}${y}`)),(0,e.jsx)(d.GridItem,{className:"laptop:hidden block",span:12,children:(0,e.jsx)(r.Carousel,{className:"",children:(0,e.jsx)(r.CarouselContent,{className:"flex",children:k[t].map((p,y)=>(0,e.jsx)(r.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(b,{item:p,shape:s,isTab:i})},`${p?.title||""}${y}`))})})})]}),n&&n?.items.length>0?(0,e.jsx)(r.Carousel,{className:"laptop:mt-4 mt-3",children:(0,e.jsx)(r.CarouselContent,{className:"flex",children:n.items.map((p,y)=>(0,e.jsx)(r.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(b,{item:p,shape:s,isTab:i})},y))})}):null]})},l))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(d.Grid,{className:"w-full",children:[h.map((t,l)=>(0,e.jsx)(d.GridItem,{span:f(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(b,{item:t,shape:s})},`${t?.title||""}${l}`)),h.map((t,l)=>(0,e.jsx)(d.GridItem,{span:f("full"),className:"laptop:hidden block",children:(0,e.jsx)(b,{item:t,shape:s})},`${t?.title||""}${l}`))]}),n&&n?.items.length>0?(0,e.jsx)(r.Carousel,{className:"laptop:mt-4 mt-3",children:(0,e.jsx)(r.CarouselContent,{className:"flex",children:n.items.map((t,l)=>(0,e.jsx)(r.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(b,{item:t,shape:s})},`${t?.title||""}${l}`))})}):null]})]})});var E=(0,G.withStyles)(D);
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "import_Title", "import_utils", "import_tabs", "ItemBlock", "item", "shape", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "GSAP", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "Title"]
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({\n item,\n shape = 'square',\n isTab = false,\n}: { item: Item } & { shape?: Shape } & { isTab?: boolean }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n `item-wrapper group relative w-full overflow-hidden`,\n {\n 'rounded-box': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !isTab,\n 'h-[400px]': isMobile && isTab,\n },\n `text-info-primary`\n )}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text className=\"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && (\n <Button className={lgButtonSize} variant=\"secondary\" asChild>\n <a href={secondaryButton.link}>{secondaryButton.text}</a>\n </Button>\n )}\n {primaryButton && (\n <Button className={lgButtonSize} variant=\"primary\" asChild>\n <a href={primaryButton.link}>{primaryButton.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n const { GSAP } = props\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" GSAP={GSAP} />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger key={index} value={tabName!}>\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <Grid className=\"w-full\">\n {tabItemsMaps[tabName].map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </GridItem>\n ))}\n {\n <GridItem className=\"laptop:hidden block\" span={12}>\n <Carousel className=\"\">\n <CarouselContent className=\"flex\">\n {tabItemsMaps[tabName].map((item, index) => (\n <CarouselItem\n key={`${item?.title || ''}${index}`}\n className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n >\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n </GridItem>\n }\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem\n key={`${item?.title || ''}${index}`}\n className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n >\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "import_Title", "import_utils", "import_tabs", "ItemBlock", "item", "shape", "isTab", "isMobile", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "GSAP", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "Title"]
|
|
7
7
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var f=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var U=(e,t)=>{for(var s in t)f(e,s,{get:t[s],enumerable:!0})},N=(e,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of G(t))!R.call(e,o)&&o!==s&&f(e,o,{get:()=>t[o],enumerable:!(i=z(t,o))||i.enumerable});return e};var x=(e,t,s)=>(s=e!=null?j(L(e)):{},N(t||!e||!e.__esModule?f(s,"default",{value:e,enumerable:!0}):s,e)),Q=e=>N(f({},"__esModule",{value:!0}),e);var K={};U(K,{default:()=>J});module.exports=Q(K);var r=require("react/jsx-runtime"),u=require("react"),m=require("../../helpers/utils.js"),T=x(require("../../components/picture.js")),p=require("../../components/tabs.js"),k=x(require("../../components/button.js")),F=x(require("../Title/index.js")),P=x(require("../SwiperBox/index.js")),C=require("../../shared/Styles.js"),I=require("./shelfDisplay.js"),A=require("react-responsive");const _=({data:e,configuration:t})=>{const s=a=>t?.event?.primaryButton?.(a),i=a=>t?.event?.secondaryButton?.(a),{price:o,basePrice:y}=(0,I.formatVariantPrice)({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),h=()=>{const a=e?.sku,n=e?.variants;return n?.find(v=>v?.sku===a)?.image?.url||n?.[0]?.image?.url||""};return(0,r.jsxs)("div",{className:(0,m.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]",t?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:(0,m.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,r.jsx)(T.default,{source:h(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((a,n)=>(0,r.jsx)("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:a},n))}),(0,r.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),(0,r.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),(0,r.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:o||""}),(0,r.jsx)("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:y||""})]}),(0,r.jsxs)("div",{className:(0,m.cn)("flex items-center gap-3",t.direction==="vertical"?"flex-col":""),children:[(0,r.jsx)(k.default,{variant:"primary",onClick:()=>s(e),className:`
|
|
2
2
|
laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
|
|
3
3
|
border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black
|
|
4
4
|
${t?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
|
|
5
5
|
${t.direction==="vertical"?"w-full":""}
|
|
6
|
-
`,children:t?.primaryButton||""}),(0,r.jsx)(
|
|
6
|
+
`,children:t?.primaryButton||""}),(0,r.jsx)(k.default,{variant:"secondary",onClick:()=>i(e),className:`
|
|
7
7
|
laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
|
|
8
8
|
border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
|
|
9
9
|
${t?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
|
|
10
10
|
${t.direction==="vertical"?"w-full":""}
|
|
11
|
-
`,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},
|
|
11
|
+
`,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},H=({data:e,buildData:t,className:s="",key:i,event:o,GSAP:y})=>{const[h,a]=(0,u.useState)(""),[n,D]=(0,u.useState)([]),v=(0,A.useMediaQuery)({query:"(max-width: 768px)"}),{productsTab:b=[],productsCard:M=[],title:w,align:V="left",isShowTab:S=!0,tabShape:E="square",...q}=e,g=l=>{const c=l?.map(d=>{const B=t?.products?.find($=>$?.handle===d?.handle);if(B)return{sku:d.sku,...B}})?.filter(d=>d);D(c)};return(0,u.useEffect)(()=>{if(S){a(b?.[0]?.tab||""),g(b?.[0]?.data||[]);return}g(M)},[]),(0,r.jsxs)("div",{className:(0,m.cn)("w-full",s),children:[w&&(0,r.jsx)(F.default,{data:{title:w},GSAP:y}),S&&(0,r.jsx)("div",{className:`${v?"w-full overflow-hidden":""}`,children:(0,r.jsx)(p.Tabs,{shape:E,align:V,value:h,onValueChange:l=>{a(l);const c=b?.find(d=>d?.tab===l);g(c?.data||[])},className:"mb-8",children:(0,r.jsx)(p.TabsList,{children:b?.map((l,c)=>(0,r.jsx)(p.TabsTrigger,{value:l?.tab||"",children:l?.tab},c))})})}),(0,r.jsx)(P.default,{className:"!overflow-visible",id:"ShelfDisplay"+i,data:{list:n,configuration:{...q,event:o}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})};var J=(0,C.withStyles)(H);
|
|
12
12
|
//# sourceMappingURL=index.js.map
|