@anker-in/headless-ui 0.0.27-alpha.42 → 0.0.27-alpha.43
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.d.ts +2 -7
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +2 -2
- package/dist/cjs/stories/accordionCards.stories.d.ts +2 -6
- package/dist/esm/biz-components/AccordionCards/index.d.ts +2 -7
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +2 -2
- package/dist/esm/stories/accordionCards.stories.d.ts +2 -6
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ type ItemType = {
|
|
|
8
8
|
};
|
|
9
9
|
/** 内容节点 */
|
|
10
10
|
subTitle: string;
|
|
11
|
+
link?: string;
|
|
11
12
|
};
|
|
12
13
|
type AccordionCardsType = {
|
|
13
14
|
className?: string;
|
|
@@ -22,12 +23,6 @@ type AccordionCardsType = {
|
|
|
22
23
|
/** 主按钮配置 */
|
|
23
24
|
primaryButton?: string;
|
|
24
25
|
};
|
|
25
|
-
/** 按钮事件*/
|
|
26
|
-
event?: {
|
|
27
|
-
primaryButton?: {
|
|
28
|
-
onClick: (v: any) => void;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
26
|
};
|
|
32
|
-
declare const AccordionCards: ({ data, className
|
|
27
|
+
declare const AccordionCards: ({ data, className }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
|
|
33
28
|
export default AccordionCards;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var
|
|
1
|
+
"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,s)=>{for(var n in s)m(t,n,{get:s[n],enumerable:!0})},h=(t,s,n,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of E(s))!C.call(t,d)&&d!==n&&m(t,d,{get:()=>s[d],enumerable:!(c=B(s,d))||c.enumerable});return t};var u=(t,s,n)=>(n=t!=null?T(M(t)):{},h(s||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),A=t=>h(m({},"__esModule",{value:!0}),t);var V={};I(V,{default:()=>S});module.exports=A(V);var e=require("react/jsx-runtime"),y=u(require("../Title/index.js")),l=require("../../helpers/utils.js"),f=u(require("../../components/picture.js")),p=u(require("../../components/button.js")),g=u(require("../SwiperBox/index.js")),i=require("react");const L=({data:t,className:s=""})=>{const[n,c]=(0,i.useState)(0),[d,w]=(0,i.useState)({0:!0}),F=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),N=(o,r)=>{r&&(F.current[o]=r)},v=o=>{b.current?.[o]&&w({[o]:!0})};(0,i.useEffect)(()=>{const o=F.current;return o?.forEach((r,a)=>{a?r.style="flex: 1 1 0%; transition: all 0.15s":r.style="flex: 7 1 0%; transition: all 0.15s",r.addEventListener("transitionend",()=>v(a))}),()=>{o?.forEach((r,a)=>{r.removeEventListener("transitionend",()=>v(a))})}},[]);const k=({data:o,configuration:r})=>(0,e.jsxs)("div",{className:"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[(0,e.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img?.url}),(0,e.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[(0,e.jsxs)("div",{className:"mb-6 flex-1 overflow-hidden",children:[(0,e.jsx)("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:o?.title}),(0,e.jsx)("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,e.jsx)(p.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":""),children:(0,e.jsx)("a",{href:o.link,children:r?.primaryButton})})]})]});return(0,e.jsxs)(e.Fragment,{children:[t?.title&&(0,e.jsx)(y.default,{data:{title:t?.title}}),(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)("div",{className:(0,l.cn)("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",s),children:t?.products?.map((o,r)=>{const a=n===r;return(0,e.jsxs)("div",{style:{flex:a?7:1},ref:x=>{x&&N(r,x)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n!==r&&(b.current={[r]:!0},c(r))},children:[(0,e.jsx)(f.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),d?.[r]&&a?(0,e.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[(0,e.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,e.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:o?.title}),(0,e.jsx)("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,e.jsx)(p.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]",t?.shape==="round"?"rounded-2xl":""),children:(0,e.jsx)("a",{href:o?.link,children:t?.primaryButton})})]}):null]},r)})})}),(0,e.jsx)("div",{className:"tablet:hidden block",children:(0,e.jsx)(g.default,{className:(0,l.cn)("h-[400px] !overflow-visible",s),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,primaryButton:t?.primaryButton}},Slide:k,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var S=L;
|
|
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}\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
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
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", "
|
|
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\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 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: 7 1 0%; transition: all 0.15s'\n } else {\n item.style = 'flex: 1 1 0%; transition: all 0.15s'\n }\n item.addEventListener('transitionend', () => handleTransitionEnd(index))\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 className=\"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\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-6 pb-6')}>\n <div className=\"mb-6 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n 'mb-1.5 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=\"tablet:block hidden\">\n <div\n className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 7 : 1\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) return\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 {currentWidth?.[idx] && isExpanded ? (\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\n )}\n >\n <div className=\"mr-1 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 text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</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 ) : null}\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"tablet: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 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.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_react", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "Picture", "Button", "Title", "idx", "isExpanded", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var
|
|
1
|
+
"use strict";"use client";var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},n=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!w.call(e,a)&&a!==r&&i(e,a,{get:()=>t[a],enumerable:!(s=u(t,a))||s.enumerable});return e};var l=(e,t,r)=>(r=e!=null?g(b(e)):{},n(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),h=e=>n(i({},"__esModule",{value:!0}),e);var N={};y(N,{default:()=>F});module.exports=h(N);var o=require("react/jsx-runtime"),k=require("react"),p=require("../../helpers/utils.js"),c=l(require("../../components/picture.js")),d=require("../../shared/Styles.js"),m=l(require("../Title/index.js")),f=l(require("../SwiperBox/index.js"));const C=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,p.cn)("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]",t?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,o.jsx)(c.default,{className:"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover",source:e?.image}),(0,o.jsx)("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]}),v=({data:e,buildData:t,className:r="",key:s})=>(0,o.jsxs)("div",{className:(0,p.cn)("w-full",r),children:[e?.title&&(0,o.jsx)(m.default,{data:{title:e?.title}}),(0,o.jsx)(f.default,{className:"!overflow-visible",id:"Category"+s,data:{list:e?.products,configuration:{shape:e?.shape}},Slide:C,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:5}}})]});var F=(0,d.withStyles)(v);
|
|
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 '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: string\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n products: 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 CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiCI,IAAAI,EAAA,6BAhCJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,oCAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAExC,QAAC,OACC,aAAW,MACT,+DACA,+DACAA,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,oBAAC,EAAAC,QAAA,CAAQ,UAAU,uEAAuE,OAAQF,GAAM,MAAO,KAC/G,OAAC,KAAE,UAAU,0DAA2D,SAAAA,GAAM,KAAK,GACrF,EAIEG,EAAoC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,
|
|
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 '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: string\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n products: 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 CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Category' + key}\n data={{ list: data?.products, configuration: { shape: data?.shape } }}\n Slide={CategoryItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 5,\n },\n }}\n />\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiCI,IAAAI,EAAA,6BAhCJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,oCAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAExC,QAAC,OACC,aAAW,MACT,+DACA,+DACAA,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,oBAAC,EAAAC,QAAA,CAAQ,UAAU,uEAAuE,OAAQF,GAAM,MAAO,KAC/G,OAAC,KAAE,UAAU,0DAA2D,SAAAA,GAAM,KAAK,GACrF,EAIEG,EAAoC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,OAE9E,QAAC,OAAI,aAAW,MAAG,SAAUD,CAAS,EACnC,UAAAL,GAAM,UAAS,OAAC,EAAAO,QAAA,CAAM,KAAM,CAAE,MAAOP,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAQ,QAAA,CACC,UAAU,oBACV,GAAI,WAAaF,EACjB,KAAM,CAAE,KAAMN,GAAM,SAAU,cAAe,CAAE,MAAOA,GAAM,KAAM,CAAE,EACpE,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EAIJ,IAAOT,KAAQ,cAAWa,CAAQ",
|
|
6
6
|
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperBox", "CategoryItem", "data", "configuration", "Picture", "Category", "buildData", "className", "key", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ data, className
|
|
4
|
+
component: ({ data, className }: {
|
|
5
5
|
className?: string;
|
|
6
6
|
data: {
|
|
7
7
|
key?: string;
|
|
@@ -12,16 +12,12 @@ declare const meta: {
|
|
|
12
12
|
url: string;
|
|
13
13
|
};
|
|
14
14
|
subTitle: string;
|
|
15
|
+
link?: string;
|
|
15
16
|
}>;
|
|
16
17
|
shape?: "round" | "square";
|
|
17
18
|
itemShape?: "round" | "square";
|
|
18
19
|
primaryButton?: string;
|
|
19
20
|
};
|
|
20
|
-
event?: {
|
|
21
|
-
primaryButton?: {
|
|
22
|
-
onClick: (v: any) => void;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
21
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
26
22
|
parameters: {
|
|
27
23
|
layout: string;
|
|
@@ -8,6 +8,7 @@ type ItemType = {
|
|
|
8
8
|
};
|
|
9
9
|
/** 内容节点 */
|
|
10
10
|
subTitle: string;
|
|
11
|
+
link?: string;
|
|
11
12
|
};
|
|
12
13
|
type AccordionCardsType = {
|
|
13
14
|
className?: string;
|
|
@@ -22,12 +23,6 @@ type AccordionCardsType = {
|
|
|
22
23
|
/** 主按钮配置 */
|
|
23
24
|
primaryButton?: string;
|
|
24
25
|
};
|
|
25
|
-
/** 按钮事件*/
|
|
26
|
-
event?: {
|
|
27
|
-
primaryButton?: {
|
|
28
|
-
onClick: (v: any) => void;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
26
|
};
|
|
32
|
-
declare const AccordionCards: ({ data, className
|
|
27
|
+
declare const AccordionCards: ({ data, className }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
|
|
33
28
|
export default AccordionCards;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as B,jsx as r,jsxs as l}from"react/jsx-runtime";import w from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import f from"../../components/picture.js";import p from"../../components/button.js";import N from"../SwiperBox/index.js";import{useState as F,useEffect as k,useRef as b}from"react";const T=({data:o,className:i=""})=>{const[d,v]=F(0),[x,h]=F({0:!0}),a=b([]),c=b({0:!0}),y=(t,e)=>{e&&(a.current[t]=e)},m=t=>{c.current?.[t]&&h({[t]:!0})};k(()=>{const t=a.current;return t?.forEach((e,s)=>{s?e.style="flex: 1 1 0%; transition: all 0.15s":e.style="flex: 7 1 0%; transition: all 0.15s",e.addEventListener("transitionend",()=>m(s))}),()=>{t?.forEach((e,s)=>{e.removeEventListener("transitionend",()=>m(s))})}},[]);const g=({data:t,configuration:e})=>l("div",{className:"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[r(f,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),l("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[l("div",{className:"mb-6 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(p,{size:"sm",hoverEffect:"slide",variant:"secondary",className:n("mb-1.5 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(B,{children:[o?.title&&r(w,{data:{title:o?.title}}),r("div",{className:"tablet:block hidden",children:r("div",{className:n("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",i),children:o?.products?.map((t,e)=>{const s=d===e;return l("div",{style:{flex:s?7:1},ref:u=>{u&&y(e,u)},className:n("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{d!==e&&(c.current={[e]:!0},v(e))},children:[r(f,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),x?.[e]&&s?l("div",{className:n("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[l("div",{className:"mr-1 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 text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(p,{size:"sm",hoverEffect:"slide",variant:"secondary",className:n("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})})]}):null]},e)})})}),r("div",{className:"tablet:hidden block",children:r(N,{className:n("h-[400px] !overflow-visible",i),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,primaryButton:o?.primaryButton}},Slide:g,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var V=T;export{V 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}\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
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "
|
|
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\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 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: 7 1 0%; transition: all 0.15s'\n } else {\n item.style = 'flex: 1 1 0%; transition: all 0.15s'\n }\n item.addEventListener('transitionend', () => handleTransitionEnd(index))\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 className=\"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\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-6 pb-6')}>\n <div className=\"mb-6 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n 'mb-1.5 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=\"tablet:block hidden\">\n <div\n className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 7 : 1\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) return\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 {currentWidth?.[idx] && isExpanded ? (\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\n )}\n >\n <div className=\"mr-1 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 text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</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 ) : null}\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"tablet: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 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.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "idx", "isExpanded", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import l from"../../components/picture.js";import{withStyles as p}from"../../shared/Styles.js";import n from"../Title/index.js";import c from"../SwiperBox/index.js";const d=({data:e,configuration:r})=>a("div",{className:o("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t(l,{className:"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover",source:e?.image}),t("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]}),m=({data:e,buildData:r,className:s="",key:i})=>a("div",{className:o("w-full",s),children:[e?.title&&t(n,{data:{title:e?.title}}),t(c,{className:"!overflow-visible",id:"Category"+i,data:{list:e?.products,configuration:{shape:e?.shape}},Slide:d,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:5}}})]});var h=p(m);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/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 '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: string\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n products: 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 CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n
|
|
5
|
-
"mappings": "aAiCI,OAOE,OAAAA,EAPF,QAAAC,MAAA,oBAhCJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAExCR,EAAC,OACC,UAAWC,EACT,+DACA,+DACAO,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,UAAAT,EAACG,EAAA,CAAQ,UAAU,uEAAuE,OAAQK,GAAM,MAAO,EAC/GR,EAAC,KAAE,UAAU,0DAA2D,SAAAQ,GAAM,KAAK,GACrF,EAIEE,EAAoC,CAAC,CAAE,KAAAF,EAAM,UAAAG,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,
|
|
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 '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: string\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n products: 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 CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Category' + key}\n data={{ list: data?.products, configuration: { shape: data?.shape } }}\n Slide={CategoryItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 5,\n },\n }}\n />\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "aAiCI,OAOE,OAAAA,EAPF,QAAAC,MAAA,oBAhCJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAExCR,EAAC,OACC,UAAWC,EACT,+DACA,+DACAO,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,UAAAT,EAACG,EAAA,CAAQ,UAAU,uEAAuE,OAAQK,GAAM,MAAO,EAC/GR,EAAC,KAAE,UAAU,0DAA2D,SAAAQ,GAAM,KAAK,GACrF,EAIEE,EAAoC,CAAC,CAAE,KAAAF,EAAM,UAAAG,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,IAE9EZ,EAAC,OAAI,UAAWC,EAAG,SAAUU,CAAS,EACnC,UAAAJ,GAAM,OAASR,EAACK,EAAA,CAAM,KAAM,CAAE,MAAOG,GAAM,KAAM,EAAG,EACrDR,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,WAAaO,EACjB,KAAM,CAAE,KAAML,GAAM,SAAU,cAAe,CAAE,MAAOA,GAAM,KAAM,CAAE,EACpE,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EAIJ,IAAOO,EAAQV,EAAWM,CAAQ",
|
|
6
6
|
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "Title", "SwiperBox", "CategoryItem", "data", "configuration", "Category", "buildData", "className", "key", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ data, className
|
|
4
|
+
component: ({ data, className }: {
|
|
5
5
|
className?: string;
|
|
6
6
|
data: {
|
|
7
7
|
key?: string;
|
|
@@ -12,16 +12,12 @@ declare const meta: {
|
|
|
12
12
|
url: string;
|
|
13
13
|
};
|
|
14
14
|
subTitle: string;
|
|
15
|
+
link?: string;
|
|
15
16
|
}>;
|
|
16
17
|
shape?: "round" | "square";
|
|
17
18
|
itemShape?: "round" | "square";
|
|
18
19
|
primaryButton?: string;
|
|
19
20
|
};
|
|
20
|
-
event?: {
|
|
21
|
-
primaryButton?: {
|
|
22
|
-
onClick: (v: any) => void;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
21
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
26
22
|
parameters: {
|
|
27
23
|
layout: string;
|