@anker-in/headless-ui 0.0.27-alpha.90 → 0.0.27-alpha.92
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 +1 -1
- package/dist/cjs/biz-components/Marquee/Marquee.d.ts +2 -1
- package/dist/cjs/biz-components/Marquee/Marquee.js +1 -1
- package/dist/cjs/biz-components/Marquee/Marquee.js.map +3 -3
- package/dist/cjs/biz-components/Marquee/type.d.ts +4 -1
- package/dist/cjs/biz-components/Marquee/type.js +1 -1
- package/dist/cjs/biz-components/Marquee/type.js.map +1 -1
- package/dist/cjs/stories/marquee.stories.d.ts +1 -1
- package/dist/cjs/stories/marquee.stories.js +1 -1
- package/dist/cjs/stories/marquee.stories.js.map +3 -3
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +1 -1
- package/dist/esm/biz-components/Marquee/Marquee.d.ts +2 -1
- package/dist/esm/biz-components/Marquee/Marquee.js +1 -1
- package/dist/esm/biz-components/Marquee/Marquee.js.map +2 -2
- package/dist/esm/biz-components/Marquee/type.d.ts +4 -1
- package/dist/esm/stories/marquee.stories.d.ts +1 -1
- package/dist/esm/stories/marquee.stories.js +1 -1
- package/dist/esm/stories/marquee.stories.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var S=Object.create;var u=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,I=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))!I.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?S(A(e)):{},y(s||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e)),j=e=>y(u({},"__esModule",{value:!0}),e);var P={};L(P,{default:()=>H});module.exports=j(P);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=""})=>{const[n,c]=(0,i.useState)(0),[a,k]=(0,i.useState)({0:!0}),v=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),p=(0,i.useRef)(!1),N=(o,r)=>{r&&(v.current[o]=r)},x=o=>{b.current?.[o]&&(p.current=!1,k({[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 T=({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}}),(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=n===r,B=d?5:1,E=a?.[r]&&d;return(0,t.jsxs)("div",{style:{flex:B},ref:h=>{h&&N(r,h)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n===r||p.current||(p.current=!0,b.current={[r]:!0},c(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",E?"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:T,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.
|
|
1
|
+
"use strict";"use client";var S=Object.create;var u=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,I=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))!I.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?S(A(e)):{},y(s||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e)),j=e=>y(u({},"__esModule",{value:!0}),e);var P={};L(P,{default:()=>H});module.exports=j(P);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=""})=>{const[n,c]=(0,i.useState)(0),[a,k]=(0,i.useState)({0:!0}),v=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),p=(0,i.useRef)(!1),N=(o,r)=>{r&&(v.current[o]=r)},x=o=>{b.current?.[o]&&(p.current=!1,k({[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 T=({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}}),(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=n===r,B=d?5:1,E=a?.[r]&&d;return(0,t.jsxs)("div",{style:{flex:B},ref:h=>{h&&N(r,h)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n===r||p.current||(p.current=!0,b.current={[r]:!0},c(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",E?"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:T,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},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}\n\nconst AccordionCards = ({ data, className = '' }: 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 }} />}\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.
|
|
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}\n\nconst AccordionCards = ({ data, className = '' }: 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 }} />}\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.1,\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
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", "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,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js';
|
|
3
|
+
import type { Swiper as SwiperType } from 'swiper/types';
|
|
3
4
|
declare const MarqueeItem: {
|
|
4
5
|
({ data, configuration }: MarqueeItemProps): import("react/jsx-runtime").JSX.Element;
|
|
5
6
|
displayName: string;
|
|
@@ -10,7 +11,7 @@ declare const MarqueeImageContent: {
|
|
|
10
11
|
};
|
|
11
12
|
declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
13
|
declare const _default: {
|
|
13
|
-
(props: Omit<MarqueeProps & React.RefAttributes<
|
|
14
|
+
(props: Omit<MarqueeProps & React.RefAttributes<SwiperType>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
14
15
|
className?: string;
|
|
15
16
|
data?: Record<string, any>;
|
|
16
17
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var M=Object.create;var o=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var P=(e,r)=>{for(var a in r)o(e,a,{get:r[a],enumerable:!0})},d=(e,r,a,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of C(r))!N.call(e,s)&&s!==a&&o(e,s,{get:()=>r[s],enumerable:!(p=q(r,s))||p.enumerable});return e};var g=(e,r,a)=>(a=e!=null?M(S(e)):{},d(r||!e||!e.__esModule?o(a,"default",{value:e,enumerable:!0}):a,e)),I=e=>d(o({},"__esModule",{value:!0}),e);var h={};P(h,{MarqueeImageContent:()=>m,MarqueeItem:()=>l,MarqueeTextContent:()=>n,default:()=>T});module.exports=I(h);var t=require("react/jsx-runtime"),w=g(require("react")),u=require("../../components/index.js"),i=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),c=require("swiper/react"),y=require("swiper/modules");const f=w.default.forwardRef(({data:e,className:r},a)=>(0,t.jsx)(c.Swiper,{direction:"horizontal",className:(0,i.cn)("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",r),id:"Marquee"+e?.key,modules:[y.Autoplay],autoplay:{delay:1,disableOnInteraction:!1,reverseDirection:e?.reverseDirection},loop:!0,allowTouchMove:!1,centeredSlides:!0,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:"24px"},1025:{spaceBetween:"64px"}},children:e?.items?.map((p,s)=>(0,t.jsx)(c.SwiperSlide,{children:(0,t.jsx)(l,{data:p})},p?.id+"SwiperSlide"+s))}));f.displayName="Marquee";const l=({data:e,configuration:r})=>(0,t.jsxs)(t.Fragment,{children:[e.type==="image"&&(0,t.jsx)(m,{image:e?.image,imageClassName:r?.imageClassName}),e.type==="text"&&(0,t.jsx)(n,{text:e?.text,textClassName:r?.textClassName})]});l.displayName="MarqueeItem";const m=({image:e,imageClassName:r})=>(0,t.jsx)("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:(0,t.jsx)(u.Picture,{source:e?.url,alt:e?.alt||"",imgClassName:(0,i.cn)("object-cover",r)})});m.displayName="MarqueeImageContent";const n=w.default.forwardRef(({text:e,textClassName:r},a)=>(0,t.jsx)(u.Text,{as:"div",ref:a,html:e,className:(0,i.cn)("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",r)}));n.displayName="MarqueeTextContent";var T=(0,x.withStyles)(f);
|
|
2
2
|
//# sourceMappingURL=Marquee.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,
|
|
6
|
-
"names": ["Marquee_exports", "__export", "MarqueeImageContent", "MarqueeItem", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport type { Swiper as SwiperType } from 'swiper/types'\nimport { Autoplay } from 'swiper/modules'\n\nconst Marquee = React.forwardRef<SwiperType, MarqueeProps>(({ data, className }, ref) => {\n return (\n <Swiper\n direction=\"horizontal\"\n className={cn(\n 'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n className\n )}\n id={'Marquee' + data?.key}\n modules={[Autoplay]}\n autoplay={{\n delay: 1,\n disableOnInteraction: false,\n reverseDirection: data?.reverseDirection,\n }}\n loop={true}\n allowTouchMove={false}\n centeredSlides\n slidesPerView=\"auto\"\n speed={data?.speed || 3000}\n breakpoints={{\n 0: {\n spaceBetween: '24px',\n },\n 1025: {\n spaceBetween: '64px',\n },\n }}\n >\n {data?.items?.map((item, index) => (\n <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n <MarqueeItem data={item} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n return (\n <>\n {data.type === 'image' && (\n <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n )}\n {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n </>\n )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n return (\n <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n </div>\n )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n return (\n <Text\n as=\"div\"\n ref={ref}\n html={text}\n className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n />\n )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA0CU,IAAAO,EAAA,6BAzCVC,EAAkB,oBAClBC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAG3BH,EAAoC,wBAEpCI,EAAyB,0BAEzB,MAAMC,EAAU,EAAAC,QAAM,WAAqC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,OAE7E,OAAC,UACC,UAAU,aACV,aAAW,MACT,0GACAD,CACF,EACA,GAAI,UAAYD,GAAM,IACtB,QAAS,CAAC,UAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBA,GAAM,gBAC1B,EACA,KAAM,GACN,eAAgB,GAChB,eAAc,GACd,cAAc,OACd,MAAOA,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,MAChB,EACA,KAAM,CACJ,aAAc,MAChB,CACF,EAEC,SAAAA,GAAM,OAAO,IAAI,CAACG,EAAMC,OACvB,OAAC,eACC,mBAAChB,EAAA,CAAY,KAAMe,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEH,EACDN,EAAQ,YAAc,UAEtB,MAAMV,EAAc,CAAC,CAAE,KAAAY,EAAM,cAAAK,CAAc,OAEvC,oBACG,UAAAL,EAAK,OAAS,YACb,OAACb,EAAA,CAAoB,MAAOa,GAAM,MAAO,eAAgBK,GAAe,eAAgB,EAEzFL,EAAK,OAAS,WAAU,OAACX,EAAA,CAAmB,KAAMW,GAAM,KAAM,cAAeK,GAAe,cAAe,GAC9G,EAIJjB,EAAY,YAAc,cAE1B,MAAMD,EAAsB,CAAC,CAAE,MAAAmB,EAAO,eAAAC,CAAe,OAEjD,OAAC,OAAI,UAAU,4CACb,mBAAC,WAAQ,OAAQD,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,gBAAc,MAAG,eAAgBC,CAAc,EAAG,EACxG,EAIJpB,EAAoB,YAAc,sBAElC,MAAME,EAAqB,EAAAU,QAAM,WAAoD,CAAC,CAAE,KAAAS,EAAM,cAAAC,CAAc,EAAGP,OAE3G,OAAC,QACC,GAAG,MACH,IAAKA,EACL,KAAMM,EACN,aAAW,MAAG,oFAAqFC,CAAa,EAClH,CAEH,EAEDpB,EAAmB,YAAc,qBAEjC,IAAOC,KAAQ,cAAWQ,CAAO",
|
|
6
|
+
"names": ["Marquee_exports", "__export", "MarqueeImageContent", "MarqueeItem", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_modules", "Marquee", "React", "data", "className", "ref", "item", "index", "configuration", "image", "imageClassName", "text", "textClassName"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var s=Object.defineProperty;var
|
|
1
|
+
"use strict";var s=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var g=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!o.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(a=i(e,r))||a.enumerable});return t};var p=t=>g(s({},"__esModule",{value:!0}),t);var u={};module.exports=p(u);
|
|
2
2
|
//# sourceMappingURL=type.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/type.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Img } from '../../types/props.js'\n\ninterface MarqueeProps {\n data: {\n key?: string\n /** \u662F\u5426\u53CD\u5411 */\n reverseDirection?: boolean\n /** \u901F\u5EA6 */\n speed?: number\n /** \u8DD1\u9A6C\u706F\u5185\u5BB9 */\n items: any[]\n }\n className?: string\n}\n\ninterface MarqueeItemProps {\n data: {\n type: 'image' | 'text'\n image?: Img\n text?: string\n }\n configuration?:
|
|
4
|
+
"sourcesContent": ["import type { Img } from '../../types/props.js'\n\ninterface MarqueeProps {\n data: {\n key?: string\n /** \u662F\u5426\u53CD\u5411 */\n reverseDirection?: boolean\n /** \u901F\u5EA6 */\n speed?: number\n /** \u8DD1\u9A6C\u706F\u5185\u5BB9 */\n items: any[]\n }\n className?: string\n}\n\ninterface MarqueeItemProps {\n data: {\n type: 'image' | 'text'\n image?: Img\n text?: string\n }\n configuration?: {\n imageClassName?: string\n textClassName?: string\n }\n}\n\ninterface MarqueeImageContentProps {\n image?: Img\n imageClassName?: string\n}\n\ninterface MarqueeTextContentProps {\n text?: string\n textClassName?: string\n}\n\nexport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps }\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["type_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ import type { MarqueeProps } from '../biz-components/Marquee/type.js';
|
|
|
4
4
|
declare const meta: {
|
|
5
5
|
title: string;
|
|
6
6
|
component: {
|
|
7
|
-
(props: Omit<MarqueeProps & React.RefAttributes<
|
|
7
|
+
(props: Omit<MarqueeProps & React.RefAttributes<import("swiper/types").Swiper>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
8
8
|
className?: string;
|
|
9
9
|
data?: Record<string, any>;
|
|
10
10
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(e,t)=>{for(var a in t)r(e,a,{get:t[a],enumerable:!0})},n=(e,t,a,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of c(t))!y.call(e,o)&&o!==a&&r(e,o,{get:()=>t[o],enumerable:!(p=g(t,o))||p.enumerable});return e};var f=(e,t,a)=>(a=e!=null?m(l(e)):{},n(t||!e||!e.__esModule?r(a,"default",{value:e,enumerable:!0}):a,e)),M=e=>n(r({},"__esModule",{value:!0}),e);var b={};u(b,{Default:()=>d,MarqueeDirection:()=>T,MarqueeImage:()=>C,MarqueeText:()=>v,default:()=>h});module.exports=M(b);var k=require("react"),s=f(require("../biz-components/Marquee/index.js"));const q={title:"Biz Components/Marquee",component:s.default,subcomponents:{MarqueeItem:s.MarqueeItem,MarqueeImageContent:s.MarqueeImageContent,MarqueeTextContent:s.MarqueeTextContent},parameters:{layout:"fullscreen",docs:{description:{component:"\u8DD1\u9A6C\u706FMarquee\uFF0C\u57FA\u4E8Ehttps://swiperjs.com/swiper-api"}}},tags:["autodocs"]};var h=q;const i={key:"Marquee",items:[{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317"}},{type:"text",text:"\u8DD1\u9A6C\u706F\u7EC4\u4EF6"},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317"}},{type:"text",text:"\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6"},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317"}}]},d={args:{data:i}},x={key:"MarqueeImage",items:[{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317"}}]},C={args:{data:x}},R={key:"MarqueeText",items:[{type:"text",text:"47%<br>R&D Employees"},{type:"text",text:"100 Million<br>Global Customers"},{type:"text",text:"Pioneering in Charging<br>Technology for 12 Years"}]},v={args:{data:R}},T={args:{data:{...i,reverseDirection:!0}}};
|
|
2
2
|
//# sourceMappingURL=marquee.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/marquee.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { type ComponentType } from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport Marquee, { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee/index.js'\nimport type { MarqueeProps } from '../biz-components/Marquee/type.js'\n\nconst meta = {\n title: 'Biz Components/Marquee',\n component: Marquee,\n subcomponents: {\n MarqueeItem: MarqueeItem as ComponentType<unknown>,\n MarqueeImageContent: MarqueeImageContent as ComponentType<unknown>,\n MarqueeTextContent: MarqueeTextContent as ComponentType<unknown>,\n },\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u8DD1\u9A6C\u706FMarquee\uFF0C\u57FA\u4E8Ehttps://swiperjs.com/swiper-api',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Marquee>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst MarqueeData = {\n key: 'Marquee',\n items: [\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317' },\n },\n { type: 'text', text: '\u8DD1\u9A6C\u706F\u7EC4\u4EF6' },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317' },\n },\n { type: 'text', text: '\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6' },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317' },\n },\n ] as MarqueeProps['data']['items'],\n}\n\nexport const Default: Story = {\n args: {\n data: MarqueeData,\n },\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,qBAAAC,EAAA,iBAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,
|
|
6
|
-
"names": ["marquee_stories_exports", "__export", "Default", "MarqueeDirection", "MarqueeImage", "MarqueeText", "marquee_stories_default", "__toCommonJS", "
|
|
4
|
+
"sourcesContent": ["import React, { type ComponentType } from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport Marquee, { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee/index.js'\nimport type { MarqueeProps } from '../biz-components/Marquee/type.js'\n\nconst meta = {\n title: 'Biz Components/Marquee',\n component: Marquee,\n subcomponents: {\n MarqueeItem: MarqueeItem as ComponentType<unknown>,\n MarqueeImageContent: MarqueeImageContent as ComponentType<unknown>,\n MarqueeTextContent: MarqueeTextContent as ComponentType<unknown>,\n },\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u8DD1\u9A6C\u706FMarquee\uFF0C\u57FA\u4E8Ehttps://swiperjs.com/swiper-api',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Marquee>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst MarqueeData = {\n key: 'Marquee',\n items: [\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317' },\n },\n { type: 'text', text: '\u8DD1\u9A6C\u706F\u7EC4\u4EF6' },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317' },\n },\n { type: 'text', text: '\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6' },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317' },\n },\n ] as MarqueeProps['data']['items'],\n}\n\nexport const Default: Story = {\n args: {\n data: MarqueeData,\n },\n}\n\nconst MarqueeImageData = {\n key: 'MarqueeImage',\n items: [\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317' },\n },\n ] as MarqueeProps['data']['items'],\n}\n\nexport const MarqueeImage: Story = {\n args: {\n data: MarqueeImageData,\n },\n}\n\nconst MarqueeTextData = {\n key: 'MarqueeText',\n items: [\n { type: 'text', text: '47%<br>R&D Employees' },\n { type: 'text', text: '100 Million<br>Global Customers' },\n { type: 'text', text: 'Pioneering in Charging<br>Technology for 12 Years' },\n ] as MarqueeProps['data']['items'],\n}\nexport const MarqueeText: Story = {\n args: {\n data: MarqueeTextData,\n },\n}\n\nexport const MarqueeDirection: Story = {\n args: {\n data: {\n ...MarqueeData,\n reverseDirection: true,\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,qBAAAC,EAAA,iBAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAAA,IAAAQ,EAA0C,iBAE1CC,EAA8E,iDAG9E,MAAMC,EAAO,CACX,MAAO,yBACP,UAAW,EAAAC,QACX,cAAe,CACb,YAAa,cACb,oBAAqB,sBACrB,mBAAoB,oBACtB,EACA,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,4EACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIf,MAAME,EAAc,CAClB,IAAK,UACL,MAAO,CACL,CACE,KAAM,QACN,MAAO,CAAE,IAAK,wFAAyF,CACzG,EACA,CAAE,KAAM,OAAQ,KAAM,gCAAQ,EAC9B,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,EACA,CAAE,KAAM,OAAQ,KAAM,kDAAW,EACjC,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,CACF,CACF,EAEaV,EAAiB,CAC5B,KAAM,CACJ,KAAMU,CACR,CACF,EAEMC,EAAmB,CACvB,IAAK,eACL,MAAO,CACL,CACE,KAAM,QACN,MAAO,CAAE,IAAK,wFAAyF,CACzG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,wFAAyF,CACzG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,CACF,CACF,EAEaT,EAAsB,CACjC,KAAM,CACJ,KAAMS,CACR,CACF,EAEMC,EAAkB,CACtB,IAAK,cACL,MAAO,CACL,CAAE,KAAM,OAAQ,KAAM,sBAAuB,EAC7C,CAAE,KAAM,OAAQ,KAAM,iCAAkC,EACxD,CAAE,KAAM,OAAQ,KAAM,mDAAoD,CAC5E,CACF,EACaT,EAAqB,CAChC,KAAM,CACJ,KAAMS,CACR,CACF,EAEaX,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,GAAGS,EACH,iBAAkB,EACpB,CACF,CACF",
|
|
6
|
+
"names": ["marquee_stories_exports", "__export", "Default", "MarqueeDirection", "MarqueeImage", "MarqueeText", "marquee_stories_default", "__toCommonJS", "import_react", "import_Marquee", "meta", "Marquee", "MarqueeData", "MarqueeImageData", "MarqueeTextData"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as C,jsx as r,jsxs as l}from"react/jsx-runtime";import T from"../Title/index.js";import{cn as s}from"../../helpers/utils.js";import F from"../../components/picture.js";import v from"../../components/button.js";import B from"../SwiperBox/index.js";import{useState as b,useEffect as E,useRef as a}from"react";const S=({data:o,className:d=""})=>{const[c,x]=b(0),[h,y]=b({0:!0}),u=a([]),m=a({0:!0}),i=a(!1),w=(t,e)=>{e&&(u.current[t]=e)},p=t=>{m.current?.[t]&&(i.current=!1,y({[t]:!0}))};E(()=>{const t=u.current;return t?.forEach((e,n)=>{n?(e.style.flex="1 1 0%",e.style.transition="all 0.6s"):(e.style.flex="5 1 0%",e.style.transition="all 0.6s"),e.addEventListener("transitionend",()=>{p(n)})}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>p(n))})}},[]);const g=({data:t,configuration:e})=>l("div",{className:s("relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]",e?.itemShape==="round"?"rounded-2xl":""),children:[r(F,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),l("div",{className:s("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[l("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-2xl font-bold leading-[1.2] text-[#FFFFFF]",children:t?.title}),r("h3",{className:"line-clamp-2 text-sm font-semibold text-[#FFFFFF]",children:t?.subTitle})]}),r(v,{size:"sm",hoverEffect:"slide",variant:"secondary",className:s("w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t.link,children:e?.primaryButton})})]})]});return l(C,{children:[o?.title&&r(T,{data:{title:o?.title}}),r("div",{className:"laptop:block hidden",children:r("div",{className:s("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:o?.products?.map((t,e)=>{const n=c===e,k=n?5:1,N=h?.[e]&&n;return l("div",{style:{flex:k},ref:f=>{f&&w(e,f)},className:s("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{c===e||i.current||(i.current=!0,m.current={[e]:!0},x(e))},children:[r(F,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),l("div",{className:s("absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",N?"w-full translate-x-0 opacity-100 transition-transform ease-out":"w-0 opacity-0"),children:[l("div",{className:"mr-16 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"desktop:text-lg line-clamp-2 text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(v,{size:"sm",hoverEffect:"slide",variant:"secondary",className:s("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t?.link,children:o?.primaryButton})})]})]},e)})})}),r("div",{className:"laptop:hidden block",children:r(B,{className:s("h-[400px] !overflow-visible",d),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,itemShape:o?.itemShape,primaryButton:o?.primaryButton}},Slide:g,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.
|
|
1
|
+
"use client";import{Fragment as C,jsx as r,jsxs as l}from"react/jsx-runtime";import T from"../Title/index.js";import{cn as s}from"../../helpers/utils.js";import F from"../../components/picture.js";import v from"../../components/button.js";import B from"../SwiperBox/index.js";import{useState as b,useEffect as E,useRef as a}from"react";const S=({data:o,className:d=""})=>{const[c,x]=b(0),[h,y]=b({0:!0}),u=a([]),m=a({0:!0}),i=a(!1),w=(t,e)=>{e&&(u.current[t]=e)},p=t=>{m.current?.[t]&&(i.current=!1,y({[t]:!0}))};E(()=>{const t=u.current;return t?.forEach((e,n)=>{n?(e.style.flex="1 1 0%",e.style.transition="all 0.6s"):(e.style.flex="5 1 0%",e.style.transition="all 0.6s"),e.addEventListener("transitionend",()=>{p(n)})}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>p(n))})}},[]);const g=({data:t,configuration:e})=>l("div",{className:s("relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]",e?.itemShape==="round"?"rounded-2xl":""),children:[r(F,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),l("div",{className:s("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[l("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-2xl font-bold leading-[1.2] text-[#FFFFFF]",children:t?.title}),r("h3",{className:"line-clamp-2 text-sm font-semibold text-[#FFFFFF]",children:t?.subTitle})]}),r(v,{size:"sm",hoverEffect:"slide",variant:"secondary",className:s("w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t.link,children:e?.primaryButton})})]})]});return l(C,{children:[o?.title&&r(T,{data:{title:o?.title}}),r("div",{className:"laptop:block hidden",children:r("div",{className:s("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:o?.products?.map((t,e)=>{const n=c===e,k=n?5:1,N=h?.[e]&&n;return l("div",{style:{flex:k},ref:f=>{f&&w(e,f)},className:s("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{c===e||i.current||(i.current=!0,m.current={[e]:!0},x(e))},children:[r(F,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),l("div",{className:s("absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",N?"w-full translate-x-0 opacity-100 transition-transform ease-out":"w-0 opacity-0"),children:[l("div",{className:"mr-16 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"desktop:text-lg line-clamp-2 text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(v,{size:"sm",hoverEffect:"slide",variant:"secondary",className:s("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t?.link,children:o?.primaryButton})})]})]},e)})})}),r("div",{className:"laptop:hidden block",children:r(B,{className:s("h-[400px] !overflow-visible",d),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,itemShape:o?.itemShape,primaryButton:o?.primaryButton}},Slide:g,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},768:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3}}})})]})};var H=S;export{H as default};
|
|
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}\n\nconst AccordionCards = ({ data, className = '' }: 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 }} />}\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.
|
|
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}\n\nconst AccordionCards = ({ data, className = '' }: 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 }} />}\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.1,\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
5
|
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "idx", "isExpanded", "flexValue", "isShowContent", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js';
|
|
3
|
+
import type { Swiper as SwiperType } from 'swiper/types';
|
|
3
4
|
declare const MarqueeItem: {
|
|
4
5
|
({ data, configuration }: MarqueeItemProps): import("react/jsx-runtime").JSX.Element;
|
|
5
6
|
displayName: string;
|
|
@@ -10,7 +11,7 @@ declare const MarqueeImageContent: {
|
|
|
10
11
|
};
|
|
11
12
|
declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
13
|
declare const _default: {
|
|
13
|
-
(props: Omit<MarqueeProps & React.RefAttributes<
|
|
14
|
+
(props: Omit<MarqueeProps & React.RefAttributes<SwiperType>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
14
15
|
className?: string;
|
|
15
16
|
data?: Record<string, any>;
|
|
16
17
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as M,jsx as t,jsxs as q}from"react/jsx-runtime";import m from"react";import{Picture as c,Text as w}from"../../components/index.js";import{cn as a}from"../../helpers/utils.js";import{withStyles as d}from"../../shared/Styles.js";import{Swiper as f,SwiperSlide as x}from"swiper/react";import{Autoplay as y}from"swiper/modules";const n=m.forwardRef(({data:e,className:r},i)=>t(f,{direction:"horizontal",className:a("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",r),id:"Marquee"+e?.key,modules:[y],autoplay:{delay:1,disableOnInteraction:!1,reverseDirection:e?.reverseDirection},loop:!0,allowTouchMove:!1,centeredSlides:!0,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:"24px"},1025:{spaceBetween:"64px"}},children:e?.items?.map((l,u)=>t(x,{children:t(s,{data:l})},l?.id+"SwiperSlide"+u))}));n.displayName="Marquee";const s=({data:e,configuration:r})=>q(M,{children:[e.type==="image"&&t(p,{image:e?.image,imageClassName:r?.imageClassName}),e.type==="text"&&t(o,{text:e?.text,textClassName:r?.textClassName})]});s.displayName="MarqueeItem";const p=({image:e,imageClassName:r})=>t("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:t(c,{source:e?.url,alt:e?.alt||"",imgClassName:a("object-cover",r)})});p.displayName="MarqueeImageContent";const o=m.forwardRef(({text:e,textClassName:r},i)=>t(w,{as:"div",ref:i,html:e,className:a("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",r)}));o.displayName="MarqueeTextContent";var T=d(n);export{p as MarqueeImageContent,s as MarqueeItem,o as MarqueeTextContent,T as default};
|
|
2
2
|
//# sourceMappingURL=Marquee.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport type { Swiper as SwiperType } from 'swiper/types'\nimport { Autoplay } from 'swiper/modules'\n\nconst Marquee = React.forwardRef<SwiperType, MarqueeProps>(({ data, className }, ref) => {\n return (\n <Swiper\n direction=\"horizontal\"\n className={cn(\n 'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n className\n )}\n id={'Marquee' + data?.key}\n modules={[Autoplay]}\n autoplay={{\n delay: 1,\n disableOnInteraction: false,\n reverseDirection: data?.reverseDirection,\n }}\n loop={true}\n allowTouchMove={false}\n centeredSlides\n slidesPerView=\"auto\"\n speed={data?.speed || 3000}\n breakpoints={{\n 0: {\n spaceBetween: '24px',\n },\n 1025: {\n spaceBetween: '64px',\n },\n }}\n >\n {data?.items?.map((item, index) => (\n <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n <MarqueeItem data={item} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n return (\n <>\n {data.type === 'image' && (\n <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n )}\n {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n </>\n )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n return (\n <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n </div>\n )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n return (\n <Text\n as=\"div\"\n ref={ref}\n html={text}\n className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n />\n )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
|
|
5
|
+
"mappings": "aA0CU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBAzCV,OAAOC,MAAW,QAClB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,OAAS,YAAAC,MAAgB,iBAEzB,MAAMC,EAAUR,EAAM,WAAqC,CAAC,CAAE,KAAAS,EAAM,UAAAC,CAAU,EAAGC,IAE7Eb,EAACO,EAAA,CACC,UAAU,aACV,UAAWF,EACT,0GACAO,CACF,EACA,GAAI,UAAYD,GAAM,IACtB,QAAS,CAACF,CAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBE,GAAM,gBAC1B,EACA,KAAM,GACN,eAAgB,GAChB,eAAc,GACd,cAAc,OACd,MAAOA,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,MAChB,EACA,KAAM,CACJ,aAAc,MAChB,CACF,EAEC,SAAAA,GAAM,OAAO,IAAI,CAACG,EAAMC,IACvBf,EAACQ,EAAA,CACC,SAAAR,EAACgB,EAAA,CAAY,KAAMF,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEH,EACDL,EAAQ,YAAc,UAEtB,MAAMM,EAAc,CAAC,CAAE,KAAAL,EAAM,cAAAM,CAAc,IAEvChB,EAAAF,EAAA,CACG,UAAAY,EAAK,OAAS,SACbX,EAACkB,EAAA,CAAoB,MAAOP,GAAM,MAAO,eAAgBM,GAAe,eAAgB,EAEzFN,EAAK,OAAS,QAAUX,EAACmB,EAAA,CAAmB,KAAMR,GAAM,KAAM,cAAeM,GAAe,cAAe,GAC9G,EAIJD,EAAY,YAAc,cAE1B,MAAME,EAAsB,CAAC,CAAE,MAAAE,EAAO,eAAAC,CAAe,IAEjDrB,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACG,EAAA,CAAQ,OAAQiB,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,aAAcf,EAAG,eAAgBgB,CAAc,EAAG,EACxG,EAIJH,EAAoB,YAAc,sBAElC,MAAMC,EAAqBjB,EAAM,WAAoD,CAAC,CAAE,KAAAoB,EAAM,cAAAC,CAAc,EAAGV,IAE3Gb,EAACI,EAAA,CACC,GAAG,MACH,IAAKS,EACL,KAAMS,EACN,UAAWjB,EAAG,oFAAqFkB,CAAa,EAClH,CAEH,EAEDJ,EAAmB,YAAc,qBAEjC,IAAOK,EAAQlB,EAAWI,CAAO",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "Picture", "Text", "cn", "withStyles", "Swiper", "SwiperSlide", "Autoplay", "Marquee", "data", "className", "ref", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ import type { MarqueeProps } from '../biz-components/Marquee/type.js';
|
|
|
4
4
|
declare const meta: {
|
|
5
5
|
title: string;
|
|
6
6
|
component: {
|
|
7
|
-
(props: Omit<MarqueeProps & React.RefAttributes<
|
|
7
|
+
(props: Omit<MarqueeProps & React.RefAttributes<import("swiper/types").Swiper>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
8
8
|
className?: string;
|
|
9
9
|
data?: Record<string, any>;
|
|
10
10
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import"react";import t,{MarqueeItem as a,MarqueeImageContent as s,MarqueeTextContent as o}from"../biz-components/Marquee/index.js";const r={title:"Biz Components/Marquee",component:t,subcomponents:{MarqueeItem:a,MarqueeImageContent:s,MarqueeTextContent:o},parameters:{layout:"fullscreen",docs:{description:{component:"\u8DD1\u9A6C\u706FMarquee\uFF0C\u57FA\u4E8Ehttps://swiperjs.com/swiper-api"}}},tags:["autodocs"]};var c=r;const e={key:"Marquee",items:[{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317"}},{type:"text",text:"\u8DD1\u9A6C\u706F\u7EC4\u4EF6"},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317"}},{type:"text",text:"\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6"},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317"}}]},l={args:{data:e}},p={key:"MarqueeImage",items:[{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317"}},{type:"image",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317"}}]},y={args:{data:p}},n={key:"MarqueeText",items:[{type:"text",text:"47%<br>R&D Employees"},{type:"text",text:"100 Million<br>Global Customers"},{type:"text",text:"Pioneering in Charging<br>Technology for 12 Years"}]},u={args:{data:n}},f={args:{data:{...e,reverseDirection:!0}}};export{l as Default,f as MarqueeDirection,y as MarqueeImage,u as MarqueeText,c as default};
|
|
2
2
|
//# sourceMappingURL=marquee.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/marquee.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { type ComponentType } from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport Marquee, { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee/index.js'\nimport type { MarqueeProps } from '../biz-components/Marquee/type.js'\n\nconst meta = {\n title: 'Biz Components/Marquee',\n component: Marquee,\n subcomponents: {\n MarqueeItem: MarqueeItem as ComponentType<unknown>,\n MarqueeImageContent: MarqueeImageContent as ComponentType<unknown>,\n MarqueeTextContent: MarqueeTextContent as ComponentType<unknown>,\n },\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u8DD1\u9A6C\u706FMarquee\uFF0C\u57FA\u4E8Ehttps://swiperjs.com/swiper-api',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Marquee>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst MarqueeData = {\n key: 'Marquee',\n items: [\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317' },\n },\n { type: 'text', text: '\u8DD1\u9A6C\u706F\u7EC4\u4EF6' },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317' },\n },\n { type: 'text', text: '\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6' },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317' },\n },\n ] as MarqueeProps['data']['items'],\n}\n\nexport const Default: Story = {\n args: {\n data: MarqueeData,\n },\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["import React, { type ComponentType } from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport Marquee, { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee/index.js'\nimport type { MarqueeProps } from '../biz-components/Marquee/type.js'\n\nconst meta = {\n title: 'Biz Components/Marquee',\n component: Marquee,\n subcomponents: {\n MarqueeItem: MarqueeItem as ComponentType<unknown>,\n MarqueeImageContent: MarqueeImageContent as ComponentType<unknown>,\n MarqueeTextContent: MarqueeTextContent as ComponentType<unknown>,\n },\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u8DD1\u9A6C\u706FMarquee\uFF0C\u57FA\u4E8Ehttps://swiperjs.com/swiper-api',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Marquee>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst MarqueeData = {\n key: 'Marquee',\n items: [\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317' },\n },\n { type: 'text', text: '\u8DD1\u9A6C\u706F\u7EC4\u4EF6' },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317' },\n },\n { type: 'text', text: '\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6' },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317' },\n },\n ] as MarqueeProps['data']['items'],\n}\n\nexport const Default: Story = {\n args: {\n data: MarqueeData,\n },\n}\n\nconst MarqueeImageData = {\n key: 'MarqueeImage',\n items: [\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317' },\n },\n {\n type: 'image',\n image: { url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317' },\n },\n ] as MarqueeProps['data']['items'],\n}\n\nexport const MarqueeImage: Story = {\n args: {\n data: MarqueeImageData,\n },\n}\n\nconst MarqueeTextData = {\n key: 'MarqueeText',\n items: [\n { type: 'text', text: '47%<br>R&D Employees' },\n { type: 'text', text: '100 Million<br>Global Customers' },\n { type: 'text', text: 'Pioneering in Charging<br>Technology for 12 Years' },\n ] as MarqueeProps['data']['items'],\n}\nexport const MarqueeText: Story = {\n args: {\n data: MarqueeTextData,\n },\n}\n\nexport const MarqueeDirection: Story = {\n args: {\n data: {\n ...MarqueeData,\n reverseDirection: true,\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "AAAA,MAA0C,QAE1C,OAAOA,GAAW,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B,qCAG9E,MAAMC,EAAO,CACX,MAAO,yBACP,UAAWJ,EACX,cAAe,CACb,YAAaC,EACb,oBAAqBC,EACrB,mBAAoBC,CACtB,EACA,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,4EACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIf,MAAME,EAAc,CAClB,IAAK,UACL,MAAO,CACL,CACE,KAAM,QACN,MAAO,CAAE,IAAK,wFAAyF,CACzG,EACA,CAAE,KAAM,OAAQ,KAAM,gCAAQ,EAC9B,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,EACA,CAAE,KAAM,OAAQ,KAAM,kDAAW,EACjC,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEME,EAAmB,CACvB,IAAK,eACL,MAAO,CACL,CACE,KAAM,QACN,MAAO,CAAE,IAAK,wFAAyF,CACzG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,wFAAyF,CACzG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,EACA,CACE,KAAM,QACN,MAAO,CAAE,IAAK,uFAAwF,CACxG,CACF,CACF,EAEaC,EAAsB,CACjC,KAAM,CACJ,KAAMD,CACR,CACF,EAEME,EAAkB,CACtB,IAAK,cACL,MAAO,CACL,CAAE,KAAM,OAAQ,KAAM,sBAAuB,EAC7C,CAAE,KAAM,OAAQ,KAAM,iCAAkC,EACxD,CAAE,KAAM,OAAQ,KAAM,mDAAoD,CAC5E,CACF,EACaC,EAAqB,CAChC,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,GAAGN,EACH,iBAAkB,EACpB,CACF,CACF",
|
|
6
|
+
"names": ["Marquee", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent", "meta", "marquee_stories_default", "MarqueeData", "Default", "MarqueeImageData", "MarqueeImage", "MarqueeTextData", "MarqueeText", "MarqueeDirection"]
|
|
7
7
|
}
|