@anker-in/headless-ui 0.0.27-alpha.31 → 0.0.27-alpha.32
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 +4 -2
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.d.ts +6 -4
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.d.ts +4 -2
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +2 -2
- package/dist/cjs/biz-components/Evaluate/index.d.ts +7 -3
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.d.ts +3 -2
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/Marquee/index.d.ts +2 -1
- package/dist/cjs/biz-components/Marquee/index.js +1 -1
- package/dist/cjs/biz-components/Marquee/index.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts +4 -4
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +10 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/stories/MultiLayoutGraphicBlock.stories.js +1 -1
- package/dist/cjs/stories/MultiLayoutGraphicBlock.stories.js.map +2 -2
- package/dist/cjs/stories/accordionCards.stories.d.ts +4 -2
- package/dist/cjs/stories/accordionCards.stories.js +1 -1
- package/dist/cjs/stories/accordionCards.stories.js.map +2 -2
- package/dist/cjs/stories/brandEquity.stories.js +1 -1
- package/dist/cjs/stories/brandEquity.stories.js.map +3 -3
- package/dist/cjs/stories/category.stories.js +1 -1
- package/dist/cjs/stories/category.stories.js.map +3 -3
- package/dist/cjs/stories/evaluate.stories.js +1 -1
- package/dist/cjs/stories/evaluate.stories.js.map +2 -2
- package/dist/cjs/stories/graphic.stories.d.ts +4 -2
- package/dist/cjs/stories/graphic.stories.js +1 -1
- package/dist/cjs/stories/graphic.stories.js.map +3 -3
- package/dist/cjs/stories/marquee.stories.js +1 -1
- package/dist/cjs/stories/marquee.stories.js.map +2 -2
- package/dist/cjs/stories/shelfDisplay.stories.js +1 -1
- package/dist/cjs/stories/shelfDisplay.stories.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.d.ts +4 -2
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/BrandEquity/BrandEquity.d.ts +6 -4
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/esm/biz-components/Category/index.d.ts +4 -2
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.d.ts +7 -3
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.d.ts +3 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/Marquee/index.d.ts +2 -1
- package/dist/esm/biz-components/Marquee/index.js +1 -1
- package/dist/esm/biz-components/Marquee/index.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/types.d.ts +4 -4
- package/dist/esm/biz-components/ShelfDisplay/index.d.ts +10 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/stories/MultiLayoutGraphicBlock.stories.js +1 -1
- package/dist/esm/stories/MultiLayoutGraphicBlock.stories.js.map +2 -2
- package/dist/esm/stories/accordionCards.stories.d.ts +4 -2
- package/dist/esm/stories/accordionCards.stories.js +1 -1
- package/dist/esm/stories/accordionCards.stories.js.map +2 -2
- package/dist/esm/stories/brandEquity.stories.js +1 -1
- package/dist/esm/stories/brandEquity.stories.js.map +3 -3
- package/dist/esm/stories/category.stories.js +1 -1
- package/dist/esm/stories/category.stories.js.map +3 -3
- package/dist/esm/stories/evaluate.stories.js +1 -1
- package/dist/esm/stories/evaluate.stories.js.map +2 -2
- package/dist/esm/stories/graphic.stories.d.ts +4 -2
- package/dist/esm/stories/graphic.stories.js +1 -1
- package/dist/esm/stories/graphic.stories.js.map +3 -3
- package/dist/esm/stories/marquee.stories.js +1 -1
- package/dist/esm/stories/marquee.stories.js.map +2 -2
- package/dist/esm/stories/shelfDisplay.stories.js +1 -1
- package/dist/esm/stories/shelfDisplay.stories.js.map +2 -2
- package/package.json +1 -1
|
@@ -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 from '../biz-components/Marquee/index.js'\nimport { MarqueeList, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee/index.js'\n\nconst meta = {\n title: 'Biz Components/Marquee',\n component: Marquee,\n subcomponents: {\n MarqueeList: MarqueeList 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\u4E8Ereact-fast-marquee<br>\u53EF\u4F7F\u7528react-fast-marquee\u6240\u6709props',\n },\n },\n },\n tags: ['autodocs'],\n args: {\n speed: 50,\n },\n argTypes: {\n direction: {\n control: {\n type: 'inline-radio',\n },\n options: ['left', 'right', 'up', 'down'],\n description: '\u8DD1\u9A6C\u706F\u6ED1\u52A8\u7684\u65B9\u5411',\n table: {\n defaultValue: {\n summary: 'left',\n },\n },\n },\n speed: {\n control: {\n type: 'number',\n },\n description: '\u901F\u5EA6\uFF0C\u5355\u4F4D\uFF1A\u50CF\u7D20/\u79D2',\n },\n },\n} satisfies Meta<typeof Marquee>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n render: args => (\n <Marquee {...args}>\n <MarqueeList>\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317',\n }}\n />\n <MarqueeTextContent data={{ text: '\u8DD1\u9A6C\u706F\u7EC4\u4EF6' }} />\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317',\n }}\n />\n <MarqueeTextContent className=\"text-nowrap\" data={{ text: '\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6' }} />\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317',\n }}\n />\n </MarqueeList>\n </Marquee>\n ),\n}\n\nexport const MarqueeImage: Story = {\n render: args => (\n <Marquee {...args}>\n <MarqueeList>\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317',\n }}\n />\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317',\n }}\n />\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317',\n }}\n />\n </MarqueeList>\n </Marquee>\n ),\n}\n\nexport const MarqueeText: Story = {\n render: args => (\n <Marquee {...args}>\n <MarqueeList>\n <MarqueeTextContent className=\"w-40\" data={{ text: '47%<br>R&D Employees' }} />\n <MarqueeTextContent className=\"w-40\" data={{ text: '100 Million<br>Global Customers' }} />\n <MarqueeTextContent className=\"w-60\" data={{ text: 'Pioneering in Charging<br>Technology for 12 Years' }} />\n </MarqueeList>\n </Marquee>\n ),\n}\n\nexport const MarqueeDirection: Story = {\n render: args => (\n <Marquee {...args}>\n <MarqueeList>\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317',\n }}\n />\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317',\n }}\n />\n <MarqueeImageContent\n data={{\n image: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317',\n }}\n />\n </MarqueeList>\n </Marquee>\n ),\n args: {\n direction: 'right',\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,qBAAAC,EAAA,iBAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAsDM,IAAAQ,EAAA,6BAtDNC,EAA0C,iBAE1CC,EAAoB,iDACpBA,EAAqE,8CAErE,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,wHACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,KAAM,CACJ,MAAO,EACT,EACA,SAAU,CACR,UAAW,CACT,QAAS,CACP,KAAM,cACR,EACA,QAAS,CAAC,OAAQ,QAAS,KAAM,MAAM,EACvC,YAAa,mDACb,MAAO,CACL,aAAc,CACZ,QAAS,MACX,CACF,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,YAAa,yDACf,CACF,CACF,EAEA,IAAON,EAAQK,EAIR,MAAMT,EAAiB,CAC5B,OAAQW,MACN,OAAC,EAAAD,QAAA,CAAS,GAAGC,EACX,oBAAC,eACC,oBAAC,uBACC,KAAM,CACJ,MAAO,
|
|
4
|
+
"sourcesContent": ["import React, { type ComponentType } from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport Marquee from '../biz-components/Marquee/index.js'\nimport { MarqueeList, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee/index.js'\n\nconst meta = {\n title: 'Biz Components/Marquee',\n component: Marquee,\n subcomponents: {\n MarqueeList: MarqueeList 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\u4E8Ereact-fast-marquee<br>\u53EF\u4F7F\u7528react-fast-marquee\u6240\u6709props',\n },\n },\n },\n tags: ['autodocs'],\n args: {\n speed: 50,\n },\n argTypes: {\n direction: {\n control: {\n type: 'inline-radio',\n },\n options: ['left', 'right', 'up', 'down'],\n description: '\u8DD1\u9A6C\u706F\u6ED1\u52A8\u7684\u65B9\u5411',\n table: {\n defaultValue: {\n summary: 'left',\n },\n },\n },\n speed: {\n control: {\n type: 'number',\n },\n description: '\u901F\u5EA6\uFF0C\u5355\u4F4D\uFF1A\u50CF\u7D20/\u79D2',\n },\n },\n} satisfies Meta<typeof Marquee>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n render: args => (\n <Marquee {...args}>\n <MarqueeList>\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317',\n },\n }}\n />\n <MarqueeTextContent data={{ text: '\u8DD1\u9A6C\u706F\u7EC4\u4EF6' }} />\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317',\n },\n }}\n />\n <MarqueeTextContent className=\"text-nowrap\" data={{ text: '\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6' }} />\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317',\n },\n }}\n />\n </MarqueeList>\n </Marquee>\n ),\n}\n\nexport const MarqueeImage: Story = {\n render: args => (\n <Marquee {...args}>\n <MarqueeList>\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317',\n },\n }}\n />\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317',\n },\n }}\n />\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317',\n },\n }}\n />\n </MarqueeList>\n </Marquee>\n ),\n}\n\nexport const MarqueeText: Story = {\n render: args => (\n <Marquee {...args}>\n <MarqueeList>\n <MarqueeTextContent className=\"w-40\" data={{ text: '47%<br>R&D Employees' }} />\n <MarqueeTextContent className=\"w-40\" data={{ text: '100 Million<br>Global Customers' }} />\n <MarqueeTextContent className=\"w-60\" data={{ text: 'Pioneering in Charging<br>Technology for 12 Years' }} />\n </MarqueeList>\n </Marquee>\n ),\n}\n\nexport const MarqueeDirection: Story = {\n render: args => (\n <Marquee {...args}>\n <MarqueeList>\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317',\n },\n }}\n />\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317',\n },\n }}\n />\n <MarqueeImageContent\n data={{\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317',\n },\n }}\n />\n </MarqueeList>\n </Marquee>\n ),\n args: {\n direction: 'right',\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,qBAAAC,EAAA,iBAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAsDM,IAAAQ,EAAA,6BAtDNC,EAA0C,iBAE1CC,EAAoB,iDACpBA,EAAqE,8CAErE,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,wHACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,KAAM,CACJ,MAAO,EACT,EACA,SAAU,CACR,UAAW,CACT,QAAS,CACP,KAAM,cACR,EACA,QAAS,CAAC,OAAQ,QAAS,KAAM,MAAM,EACvC,YAAa,mDACb,MAAO,CACL,aAAc,CACZ,QAAS,MACX,CACF,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,YAAa,yDACf,CACF,CACF,EAEA,IAAON,EAAQK,EAIR,MAAMT,EAAiB,CAC5B,OAAQW,MACN,OAAC,EAAAD,QAAA,CAAS,GAAGC,EACX,oBAAC,eACC,oBAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,wFACP,CACF,EACF,KACA,OAAC,sBAAmB,KAAM,CAAE,KAAM,gCAAQ,EAAG,KAC7C,OAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,uFACP,CACF,EACF,KACA,OAAC,sBAAmB,UAAU,cAAc,KAAM,CAAE,KAAM,kDAAW,EAAG,KACxE,OAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,uFACP,CACF,EACF,GACF,EACF,CAEJ,EAEaT,EAAsB,CACjC,OAAQS,MACN,OAAC,EAAAD,QAAA,CAAS,GAAGC,EACX,oBAAC,eACC,oBAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,wFACP,CACF,EACF,KACA,OAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,uFACP,CACF,EACF,KACA,OAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,uFACP,CACF,EACF,GACF,EACF,CAEJ,EAEaR,EAAqB,CAChC,OAAQQ,MACN,OAAC,EAAAD,QAAA,CAAS,GAAGC,EACX,oBAAC,eACC,oBAAC,sBAAmB,UAAU,OAAO,KAAM,CAAE,KAAM,sBAAuB,EAAG,KAC7E,OAAC,sBAAmB,UAAU,OAAO,KAAM,CAAE,KAAM,iCAAkC,EAAG,KACxF,OAAC,sBAAmB,UAAU,OAAO,KAAM,CAAE,KAAM,mDAAoD,EAAG,GAC5G,EACF,CAEJ,EAEaV,EAA0B,CACrC,OAAQU,MACN,OAAC,EAAAD,QAAA,CAAS,GAAGC,EACX,oBAAC,eACC,oBAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,wFACP,CACF,EACF,KACA,OAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,uFACP,CACF,EACF,KACA,OAAC,uBACC,KAAM,CACJ,MAAO,CACL,IAAK,uFACP,CACF,EACF,GACF,EACF,EAEF,KAAM,CACJ,UAAW,OACb,CACF",
|
|
6
6
|
"names": ["marquee_stories_exports", "__export", "Default", "MarqueeDirection", "MarqueeImage", "MarqueeText", "marquee_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Marquee", "meta", "Marquee", "args"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var m=Object.create;var o=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var r in t)o(e,r,{get:t[r],enumerable:!0})},i=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of f(t))!b.call(e,s)&&s!==r&&o(e,s,{get:()=>t[s],enumerable:!(a=n(t,s))||a.enumerable});return e};var u=(e,t,r)=>(r=e!=null?m(l(e)):{},i(t||!e||!e.__esModule?o(r,"default",{value:e,enumerable:!0}):r,e)),h=e=>i(o({},"__esModule",{value:!0}),e);var _={};g(_,{Default:()=>P,Round:()=>F,default:()=>d});module.exports=h(_);var p=u(require("../biz-components/ShelfDisplay/index.js"));const y={title:"Biz-Components/ShelfDisplay",component:p.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var d=y;const c=[{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}}],P={args:{data:{productsCard:c,primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}},F={args:{data:{productsCard:c,shape:"round",itemShape:"round",primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}};
|
|
2
2
|
//# sourceMappingURL=shelfDisplay.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/shelfDisplay.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport ShelfDisplay from '../biz-components/ShelfDisplay/index.js'\n\nconst meta = {\n title: 'Biz-Components/ShelfDisplay',\n component: ShelfDisplay,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ShelfDisplay>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAAyB,sDAEzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EAAY,CAChB,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,CACF,EAEaP,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport ShelfDisplay from '../biz-components/ShelfDisplay/index.js'\n\nconst meta = {\n title: 'Biz-Components/ShelfDisplay',\n component: ShelfDisplay,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ShelfDisplay>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n },\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n },\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n },\n {\n price: '$1,999.00',\n basePrice: '$2,999.00',\n subTitle: 'Fast Charging for 3 Devices',\n title: 'Anker Prime 27,650mAh Power Bank (250W)',\n tagItems: ['New', '20% OFF'],\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n productsCard: mockItems,\n primaryButton: 'Learn More',\n secondaryButton: 'Shop Now',\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n productsCard: mockItems,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n secondaryButton: 'Shop Now',\n },\n className: 'p-4',\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAAyB,sDAEzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EAAY,CAChB,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,CACH,IAAK,8HACP,CACF,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,CACH,IAAK,8HACP,CACF,CACF,EAEaP,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAcO,EACd,cAAe,aACf,gBAAiB,UACnB,EACA,UAAW,KACb,CACF,EAEaN,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAcM,EACd,MAAO,QACP,UAAW,QACX,cAAe,aACf,gBAAiB,UACnB,EACA,UAAW,KACb,CACF",
|
|
6
6
|
"names": ["shelfDisplay_stories_exports", "__export", "Default", "Round", "shelfDisplay_stories_default", "__toCommonJS", "import_ShelfDisplay", "meta", "ShelfDisplay", "mockItems"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,9 @@ type ItemType = {
|
|
|
3
3
|
/** 标题文本 */
|
|
4
4
|
title: string;
|
|
5
5
|
/** 图片*/
|
|
6
|
-
img:
|
|
6
|
+
img: {
|
|
7
|
+
url: string;
|
|
8
|
+
};
|
|
7
9
|
/** 内容节点 */
|
|
8
10
|
subTitle: string;
|
|
9
11
|
};
|
|
@@ -12,7 +14,7 @@ type AccordionCardsType = {
|
|
|
12
14
|
data: {
|
|
13
15
|
key?: string;
|
|
14
16
|
title?: string;
|
|
15
|
-
|
|
17
|
+
products: Array<ItemType>;
|
|
16
18
|
/** 按钮形状 */
|
|
17
19
|
shape?: 'round' | 'square';
|
|
18
20
|
/** 卡片形状 */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as E,jsx as r,jsxs as i}from"react/jsx-runtime";import k from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import f from"../../components/picture.js";import F from"../../components/button.js";import N from"../SwiperBox/index.js";import{useState as v,useEffect as B,useRef as b}from"react";const T=({data:o,className:l="",event:
|
|
1
|
+
"use client";import{Fragment as E,jsx as r,jsxs as i}from"react/jsx-runtime";import k from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import f from"../../components/picture.js";import F from"../../components/button.js";import N from"../SwiperBox/index.js";import{useState as v,useEffect as B,useRef as b}from"react";const T=({data:o,className:l="",event:d})=>{const[a,x]=v(0),[h,y]=v({0:!0}),c=b([]),m=b({0:!0}),g=(t,e)=>{e&&(c.current[t]=e)},u=t=>{m.current?.[t]&&y({[t]:!0})};B(()=>{const t=c.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",()=>u(s))}),()=>{t?.forEach((e,s)=>{e.removeEventListener("transitionend",()=>u(s))})}},[]);const w=({data:t,configuration:e})=>i("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}),i("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[i("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(F,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>d?.primaryButton?.onClick?.(t),className:n("w-[116px] mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:e?.primaryButton})]})]});return i(E,{children:[o?.title&&r(k,{data:{title:o?.title}}),r("div",{className:"hidden tablet:block",children:r("div",{className:n("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",l),children:o?.products?.map((t,e)=>{const s=a===e;return i("div",{style:{flex:s?7:1},ref:p=>{p&&g(e,p)},className:n("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{a!==e&&(m.current={[e]:!0},x(e))},children:[r(f,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),h?.[e]&&s?i("div",{className:n("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[i("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(F,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>d?.primaryButton?.onClick?.(t),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:o?.primaryButton})]}):null]},e)})})}),r("div",{className:"block tablet:hidden",children:r(N,{className:n("!overflow-visible h-[400px]",l),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,primaryButton:o?.primaryButton}},Slide:w,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var j=T;export{j 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: string\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n
|
|
5
|
-
"mappings": "
|
|
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 /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }\n }\n}\n\nconst AccordionCards = ({\n data,\n className = '',\n event\n}: 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 onClick={() => event?.primaryButton?.onClick?.(data)}\n className={cn(\n 'w-[116px] mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n }\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className=\"hidden tablet:block\">\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 source={item?.img?.url} className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" />\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 onClick={() => event?.primaryButton?.onClick?.(item)}\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 {data?.primaryButton}\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"block tablet:hidden\">\n <SwiperBox\n className={cn('!overflow-visible h-[400px]', 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": "aAoFQ,OAwBJ,YAAAA,EAxBI,OAAAC,EAEE,QAAAC,MAFF,oBAnFR,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAOC,MAAe,wBACtB,OAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QAmC5C,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,CACF,IAA0B,CACxB,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAwB,CAAC,EACvD,CAACS,EAAcC,CAAe,EAAIV,EAAqC,CAAE,EAAG,EAAK,CAAC,EAElFW,EAAeT,EAAyB,CAAC,CAAC,EAC1CU,EAAWV,EAAmC,CAAE,EAAE,EAAK,CAAC,EAExDW,EAAS,CAACC,EAAeC,IAAuB,CAChDA,IACFJ,EAAa,QAAQG,CAAK,EAAIC,EAElC,EAEMC,EAAuBF,GAAkB,CACzCF,EAAS,UAAUE,CAAK,GAC1BJ,EAAgB,CAAE,CAACI,CAAK,EAAG,EAAK,CAAC,CAErC,EAEAb,EAAU,IAAM,CACd,MAAMgB,EAAUN,EAAa,QAC7B,OAAAM,GAAS,QAAQ,CAACC,EAAMJ,IAAU,CAC3BA,EAGHI,EAAK,MAAQ,sCAFbA,EAAK,MAAQ,sCAIfA,EAAK,iBAAiB,gBAAiB,IAAMF,EAAoBF,CAAK,CAAC,CACzE,CAAC,EACM,IAAM,CACXG,GAAS,QAAQ,CAACC,EAAMJ,IAAU,CAChCI,EAAK,oBAAoB,gBAAiB,IAAMF,EAAoBF,CAAK,CAAC,CAC5E,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEL,MAAMK,EAAa,CAAC,CAAE,KAAAf,EAAM,cAAAgB,CAAc,IAEtC1B,EAAC,OAAI,UAAU,2FACb,UAAAD,EAACI,EAAA,CAAQ,UAAU,6DAA6D,OAAQO,GAAM,KAAK,IAAK,EACxGV,EAAC,OAAI,UAAWE,EAAG,qEAAqE,EACtF,UAAAF,EAAC,OAAI,UAAU,8BACb,UAAAD,EAAC,KAAE,UAAU,yCAA0C,SAAAW,GAAM,MAAM,EACnEX,EAAC,MAAG,UAAU,qCAAsC,SAAAW,GAAM,SAAS,GACrE,EACAX,EAACK,EAAA,CACC,KAAK,KACL,YAAY,QACZ,QAAQ,YACR,QAAS,IAAMQ,GAAO,eAAe,UAAUF,CAAI,EACnD,UAAWR,EACT,oGACAwB,GAAe,QAAU,QAAU,cAAgB,EACrD,EAEC,SAAAA,GAAe,cAClB,GACF,GACF,EAIJ,OACE1B,EAAAF,EAAA,CACG,UAAAY,GAAM,OAASX,EAACE,EAAA,CAAM,KAAM,CAAE,MAAOS,GAAM,KAAM,EAAG,EACrDX,EAAC,OAAI,UAAU,sBACb,SAAAA,EAAC,OACC,UAAWG,EAAG,iFAAkFS,CAAS,EAExG,SAAAD,GAAM,UAAU,IAAI,CAACc,EAAMG,IAAQ,CAClC,MAAMC,EAAaf,IAAec,EAElC,OACE3B,EAAC,OAEC,MAAO,CACL,KALY4B,EAAa,EAAI,CAM/B,EACA,IAAMP,GAA8B,CAC9BA,GAAIF,EAAOQ,EAAKN,CAAE,CACxB,EACA,UAAWnB,EACT,0CACAQ,GAAM,YAAc,QAAU,cAAgB,EAChD,EACA,QAAS,IAAM,CACTG,IAAec,IAEnBT,EAAS,QAAU,CAAE,CAACS,CAAG,EAAG,EAAK,EAEjCb,EAAca,CAAG,EACnB,EAEA,UAAA5B,EAACI,EAAA,CAAQ,OAAQqB,GAAM,KAAK,IAAK,UAAU,6DAA6D,EACvGT,IAAeY,CAAG,GAAKC,EACtB5B,EAAC,OACC,UAAWE,EACT,sFACF,EAEA,UAAAF,EAAC,OAAI,UAAU,8BACb,UAAAD,EAAC,KAAE,UAAU,4EACV,SAAAyB,GAAM,MACT,EACAzB,EAAC,MAAG,UAAU,qDAAsD,SAAAyB,GAAM,SAAS,GACrF,EACAzB,EAACK,EAAA,CACC,KAAK,KACL,YAAY,QACZ,QAAQ,YACR,QAAS,IAAMQ,GAAO,eAAe,UAAUY,CAAI,EACnD,UAAWtB,EACT,4GACAQ,GAAM,QAAU,QAAU,cAAgB,EAC5C,EAEC,SAAAA,GAAM,cACT,GACF,EACE,OA7CCiB,CA8CP,CAEJ,CAAC,EACH,EACF,EACA5B,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACM,EAAA,CACC,UAAWH,EAAG,8BAA+BS,CAAS,EACtD,GAAI,iBAAmBD,GAAM,IAC7B,KAAM,CACJ,KAAMA,GAAM,SACZ,cAAe,CACb,MAAOA,GAAM,MACb,cAAeA,GAAM,aACvB,CACF,EACA,MAAOe,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,EACF,GACF,CAEJ,EAEA,IAAOI,EAAQpB",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "event", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "idx", "isExpanded", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type { ComponentCommonProps } from '../../types/props.js';
|
|
1
|
+
import type { ComponentCommonProps, Img } from '../../types/props.js';
|
|
3
2
|
export interface BrandEquityItem {
|
|
4
|
-
icon?:
|
|
3
|
+
icon?: Img;
|
|
4
|
+
type?: 'icon' | 'avatar';
|
|
5
5
|
title: string;
|
|
6
6
|
description: string;
|
|
7
|
-
avatarList?:
|
|
7
|
+
avatarList?: {
|
|
8
|
+
avatar: Img;
|
|
9
|
+
}[];
|
|
8
10
|
}
|
|
9
11
|
export interface BrandEquityProps extends ComponentCommonProps {
|
|
10
12
|
data: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import s from"../../components/picture.js";import{withStyles as c}from"../../shared/Styles.js";const m=({data:{items:i=[]},itemShape:l="square",className:d=""})=>e("div",{className:a("brand-equity-wrapper w-full",d),children:e("div",{className:a("grid gap-3","tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:grid-cols-10"),children:i.map((t,o)=>p("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6","desktop:gap-16 gap-12","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(o)},l==="round"?"rounded-[16px]":"rounded-none"),children:[p("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[e("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.type==="avatar"?e("div",{className:"flex -space-x-2",children:t?.avatarList?.map((r,n)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(s,{source:r.avatar.url,alt:r.avatar?.alt,className:"size-full object-cover"})},n))}):e(s,{className:"lg-desktop:size-[36px] size-[30px] object-cover",source:t.icon?.url,alt:t.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),e("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]},o))})});var y=c(m);export{y as default};
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?:
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "item", "index", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: Img\n type?: 'icon' | 'avatar'\n title: string\n description: string\n avatarList?: {\n avatar: Img\n }[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n data: {\n items: BrandEquityItem[]\n }\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ data: { items = [] }, itemShape = 'square', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full', className)}>\n <div className={cn('grid gap-3', 'tablet:grid-cols-2 grid-cols-1', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6',\n 'desktop:gap-16 gap-12',\n 'laptop:col-span-3',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {item.title}\n </h3>\n {item.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {item?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:size-[36px] size-[30px] object-cover\"\n source={item.icon?.url}\n alt={item.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "aA8CY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA7CZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAsB3B,MAAMC,EAA0C,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,CAAE,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,IAE1GR,EAAC,OAAI,UAAWE,EAAG,8BAA+BM,CAAS,EACzD,SAAAR,EAAC,OAAI,UAAWE,EAAG,aAAc,iCAAkC,kCAAkC,EAClG,SAAAI,EAAM,IAAI,CAACG,EAAMC,IAChBT,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASQ,CAAK,CACrD,EACAH,IAAc,QAAU,iBAAmB,cAC7C,EAEA,UAAAN,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,MAAG,UAAU,mGACX,SAAAS,EAAK,MACR,EACCA,EAAK,OAAS,SACbT,EAAC,OAAI,UAAU,kBACZ,SAAAS,GAAM,YAAY,IAAI,CAACA,EAAuBC,IAC7CV,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQM,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFC,CAQP,CACD,EACH,EAEAV,EAACG,EAAA,CACC,UAAU,kDACV,OAAQM,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,EACAT,EAAC,KAAE,UAAU,+FACV,SAAAS,EAAK,YACR,IA3CKC,CA4CP,CACD,EACH,EACF,EAIJ,IAAOC,EAAQP,EAAWC,CAAW",
|
|
6
|
+
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "item", "index", "BrandEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export interface CategoryItem {
|
|
2
2
|
/** 产品图片*/
|
|
3
|
-
img:
|
|
3
|
+
img: {
|
|
4
|
+
url: string;
|
|
5
|
+
};
|
|
4
6
|
title: string;
|
|
5
7
|
}
|
|
6
8
|
export interface CategoryProps {
|
|
@@ -8,7 +10,7 @@ export interface CategoryProps {
|
|
|
8
10
|
/** 主题色*/
|
|
9
11
|
theme?: 'light' | 'dark';
|
|
10
12
|
data: {
|
|
11
|
-
|
|
13
|
+
products: CategoryItem[];
|
|
12
14
|
/** 卡片形状 */
|
|
13
15
|
shape?: 'round' | 'square';
|
|
14
16
|
title?: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import l from"../../components/picture.js";import{withStyles as a}from"../../shared/Styles.js";import p from"../Title/index.js";import n from"../SwiperBox/index.js";const c=({data:e,configuration:r})=>s("div",{className:o("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 p-4 hover:bg-[#FFFFFF] cursor-pointer",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t(l,{className:"flex h-full items-center object-cover",source:e?.img?.url}),t("p",{className:"desktop:text-lg flex-1 text-center text-sm font-semibold",children:e?.title})]}),d=({data:e,className:r="",key:i})=>s("div",{className:o("w-full",r),children:[e?.title&&t(p,{data:{title:e?.title}}),t(n,{className:"!overflow-visible",id:"Category"+i,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 h=a(d);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 img: string\n title: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n
|
|
5
|
-
"mappings": "
|
|
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 img: {\n url: string\n }\n title: 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 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 p-4 hover:bg-[#FFFFFF] cursor-pointer',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"flex h-full items-center object-cover\" source={data?.img?.url} />\n <p className=\"desktop:text-lg flex-1 text-center text-sm font-semibold\">{data?.title}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, 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": "aA+BI,OAOE,OAAAA,EAPF,QAAAC,MAAA,oBA9BJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBAuBtB,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,wCAAwC,OAAQK,GAAM,KAAK,IAAK,EACnFR,EAAC,KAAE,UAAU,2DAA4D,SAAAQ,GAAM,MAAM,GACvF,EAIEE,EAAoC,CAAC,CAAE,KAAAF,EAAM,UAAAG,EAAY,GAAI,IAAAC,CAAI,IAEnEX,EAAC,OAAI,UAAWC,EAAG,SAAUS,CAAS,EACnC,UAAAH,GAAM,OAASR,EAACK,EAAA,CAAM,KAAM,CAAE,MAAOG,GAAM,KAAM,EAAG,EACrDR,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,WAAaM,EACjB,KAAM,CAAE,KAAMJ,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,IAAOM,EAAQT,EAAWM,CAAQ",
|
|
6
6
|
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "Title", "SwiperBox", "CategoryItem", "data", "configuration", "Category", "className", "key", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
export interface EvaluateItem {
|
|
2
2
|
/** 产品图片*/
|
|
3
|
-
img:
|
|
3
|
+
img: {
|
|
4
|
+
url: string;
|
|
5
|
+
};
|
|
4
6
|
title: string;
|
|
5
7
|
subTitle: string;
|
|
6
8
|
description: string;
|
|
7
|
-
avatar?:
|
|
9
|
+
avatar?: {
|
|
10
|
+
url: string;
|
|
11
|
+
};
|
|
8
12
|
rating: number;
|
|
9
13
|
}
|
|
10
14
|
export interface EvaluateProps {
|
|
@@ -13,7 +17,7 @@ export interface EvaluateProps {
|
|
|
13
17
|
theme?: 'light' | 'dark';
|
|
14
18
|
data: {
|
|
15
19
|
title?: string;
|
|
16
|
-
|
|
20
|
+
products: EvaluateItem[];
|
|
17
21
|
/** 形状 */
|
|
18
22
|
shape?: 'round' | 'square';
|
|
19
23
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as w,jsx as e,jsxs as
|
|
1
|
+
"use client";import{Fragment as w,jsx as e,jsxs as r}from"react/jsx-runtime";import"react";import d from"../Title/index.js";import{cn as i}from"../../helpers/utils.js";import m from"../../components/picture.js";import p from"../SwiperBox/index.js";import{withStyles as c}from"../../shared/Styles.js";import{Avatar as v,AvatarImage as f,AvatarFallback as u}from"../../components/avatar.js";const x=({data:t,configuration:s})=>{const o=l=>l?Array.from(new Array(Number(l)))||[]:[];return r("div",{className:i("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC] p-4","hover:bg-[#FFFFFF] cursor-pointer",s?.shape==="round"?"rounded-2xl":"rounded-none"),children:[r("div",{className:i("laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between"),children:[r("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-semibold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:o(t?.rating)?.map?.((l,a)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},a))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:r(v,{className:"size-full",children:[e(f,{src:t?.avatar?.url}),e(u,{children:t?.title})]})})]}),e("p",{className:"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]",children:t?.description||""}),r("div",{className:i("mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3",s?.shape==="round"?"rounded-[8px]":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(m,{className:"w-full object-cover",source:t?.img?.url})}),e("p",{className:"desktop:text-lg line-clamp-2 flex-1 text-sm font-semibold",children:t?.subTitle||""})]})]})},g=({className:t="",data:s,key:o})=>{const{products:l,title:a,...n}=s;return e(w,{children:r("div",{className:i("w-full",t),children:[a&&e(d,{data:{title:a}}),e(p,{className:"!overflow-visible",id:"Evaluate"+o,data:{list:l,configuration:{...n}},Slide:x,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})]})})};var A=c(g);export{A as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n subTitle: string\n description: string\n avatar?: string\n rating: number\n}\n\nexport interface EvaluateProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n title?: string\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "SwiperBox", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n}\n\nexport interface EvaluateProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC] p-4',\n 'hover:bg-[#FFFFFF] cursor-pointer',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-semibold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\">\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n </div>\n </div>\n <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">{data?.description || ''}</p>\n <div\n className={cn(\n 'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-[8px]' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"desktop:text-lg line-clamp-2 flex-1 text-sm font-semibold\">{data?.subTitle || ''}</p>\n </div>\n </div>\n )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key }) => {\n const { products, title, ...ohter } = data\n return (\n <>\n <div className={cn('w-full', className)}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\n breakpoints={{\n 0: {\n spaceBetween: '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 withStyles(Evaluate)\n"],
|
|
5
|
+
"mappings": "aAqDQ,OA2CJ,YAAAA,EA1CM,OAAAC,EADF,QAAAC,MAAA,oBApDR,MAAkB,QAClB,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BA6BpD,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OACEb,EAAC,OACC,UAAWE,EACT,mEACA,oCACAS,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,UAAAX,EAAC,OAAI,UAAWE,EAAG,6DAA6D,EAC9E,UAAAF,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,uCAAwC,SAAAW,GAAM,MAAM,EAClEX,EAAC,OAAI,UAAU,yBACZ,SAAAa,EAAaF,GAAM,MAAM,GAAG,MAAM,CAACI,EAAGC,IAEnChB,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQgB,CAOV,CAEH,EACH,GACF,EACAhB,EAAC,OAAI,UAAU,0CACb,SAAAC,EAACM,EAAA,CAAO,UAAU,YAChB,UAAAP,EAACQ,EAAA,CAAY,IAAKG,GAAM,QAAQ,IAAK,EACrCX,EAACS,EAAA,CAAgB,SAAAE,GAAM,MAAM,GAC/B,EACF,GACF,EACAX,EAAC,KAAE,UAAU,wEAAyE,SAAAW,GAAM,aAAe,GAAG,EAC9GV,EAAC,OACC,UAAWE,EACT,2DACAS,GAAe,QAAU,QAAU,gBAAkB,cACvD,EAEA,UAAAZ,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACI,EAAA,CAAQ,UAAU,sBAAsB,OAAQO,GAAM,KAAK,IAAK,EACnE,EACAX,EAAC,KAAE,UAAU,4DAA6D,SAAAW,GAAM,UAAY,GAAG,GACjG,GACF,CAEJ,EAEMM,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAP,EAAM,IAAAQ,CAAI,IAAM,CAC3E,KAAM,CAAE,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAM,EAAIX,EACtC,OACEX,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAWE,EAAG,SAAUe,CAAS,EACnC,UAAAG,GAASrB,EAACE,EAAA,CAAM,KAAM,CAAE,MAAOmB,CAAM,EAAG,EACzCrB,EAACK,EAAA,CACC,UAAU,oBACV,GAAI,WAAac,EACjB,KAAM,CAAE,KAAMC,EAAU,cAAe,CAAE,GAAGE,CAAM,CAAE,EACpD,MAAOZ,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,EACF,CAEJ,EAEA,IAAOa,EAAQjB,EAAWW,CAAQ",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "SwiperBox", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "products", "title", "ohter", "Evaluate_default"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import type { ComponentCommonProps, Img } from '../../types/props.js';
|
|
3
|
+
export interface GraphicProps extends ComponentCommonProps {
|
|
3
4
|
className?: string;
|
|
4
5
|
data: {
|
|
5
6
|
title?: string;
|
|
6
7
|
items?: {
|
|
7
|
-
imgUrl:
|
|
8
|
+
imgUrl: Img;
|
|
8
9
|
title: string;
|
|
9
10
|
textColor?: string;
|
|
10
11
|
}[];
|
|
@@ -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 r,{useMemo as f}from"react";import{cn as i}from"../../helpers/utils.js";import{withStyles as x}from"../../shared/Styles.js";import{Carousel as u,CarouselContent as g,CarouselItem as h}from"../../components/index.js";import{Picture as C,Text as b}from"../../components/index.js";import y from"../Title/index.js";const p=r.forwardRef(({data:l,shape:m,className:n,...v},d)=>{const o=l?.items?.length||0,c=f(()=>{const s="basis-[296px]";let e="";return o===1&&(e="basis-[100%]"),o===2&&(e="tablet:basis-1/2"),o===3&&(e="laptop:basis-1/3"),o>3&&(e="laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]"),`${s} ${e}`},[o]);return a("div",{children:[l?.title&&t(y,{data:{title:l?.title}}),t(u,{ref:d,opts:{align:"start"},className:n,children:t(r.Fragment,{children:t(g,{children:l?.items?.map((s,e)=>t(h,{className:i("laptop:pl-4 h-[360px] shrink-0 pl-3",c),children:a("div",{className:i("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":m==="round"}),children:[t(C,{className:"h-full ",imgClassName:"h-full object-cover",source:s?.imgUrl?.url}),t("div",{className:"laptop:p-6 absolute inset-0 z-[1] flex flex-col justify-end p-4",children:t(b,{html:s?.title,style:{color:s?.textColor},className:"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium"})})]})},e+s?.title))})},".0")})]})});p.displayName="Graphic";var w=x(p);export{w as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\n\nexport interface GraphicProps {\n className?: string\n data: {\n title?: string\n items?: {\n imgUrl:
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: {\n imgUrl: Img\n title: string\n textColor?: string\n }[]\n }\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, ...props }, ref) => {\n const itemsLength = data?.items?.length || 0\n\n const itemStyle = useMemo(() => {\n const basisStyle = 'basis-[296px]'\n let breakPointStyle = ''\n if (itemsLength === 1) {\n breakPointStyle = 'basis-[100%]'\n }\n if (itemsLength === 2) {\n breakPointStyle = 'tablet:basis-1/2'\n }\n if (itemsLength === 3) {\n breakPointStyle = 'laptop:basis-1/3'\n }\n if (itemsLength > 3) {\n breakPointStyle = 'laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]'\n }\n return `${basisStyle} ${breakPointStyle}`\n }, [itemsLength])\n\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={className}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {data?.items?.map((item, index) => (\n <CarouselItem key={index + item?.title} className={cn('laptop:pl-4 h-[360px] shrink-0 pl-3', itemStyle)}>\n <div\n className={cn('relative h-full', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n })}\n >\n <Picture className=\"h-full \" imgClassName=\"h-full object-cover\" source={item?.imgUrl?.url} />\n <div className=\"laptop:p-6 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n <Text\n html={item?.title}\n style={{\n color: item?.textColor,\n }}\n className=\"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium\"\n />\n </div>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n </React.Fragment>\n </Carousel>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "aA6CsB,cAAAA,EAYN,QAAAC,MAZM,oBA5CtB,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAgBlB,MAAMC,EAAUV,EAAM,WAAyC,CAAC,CAAE,KAAAW,EAAM,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC5G,MAAMC,EAAcL,GAAM,OAAO,QAAU,EAErCM,EAAYhB,EAAQ,IAAM,CAC9B,MAAMiB,EAAa,gBACnB,IAAIC,EAAkB,GACtB,OAAIH,IAAgB,IAClBG,EAAkB,gBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,EAAc,IAChBG,EAAkB,uEAEb,GAAGD,CAAU,IAAIC,CAAe,EACzC,EAAG,CAACH,CAAW,CAAC,EAEhB,OACEjB,EAAC,OACE,UAAAY,GAAM,OAASb,EAACW,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,EACrDb,EAACM,EAAA,CACC,IAAKW,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWF,EAEX,SAAAf,EAACE,EAAM,SAAN,CACC,SAAAF,EAACO,EAAA,CACE,SAAAM,GAAM,OAAO,IAAI,CAACS,EAAMC,IACvBvB,EAACQ,EAAA,CAAuC,UAAWJ,EAAG,sCAAuCe,CAAS,EACpG,SAAAlB,EAAC,OACC,UAAWG,EAAG,kBAAmB,CAC9B,gDAAkDU,IAAU,OAC/D,CAAC,EAED,UAAAd,EAACS,EAAA,CAAQ,UAAU,UAAU,aAAa,sBAAsB,OAAQa,GAAM,QAAQ,IAAK,EAC3FtB,EAAC,OAAI,UAAU,kEACb,SAAAA,EAACU,EAAA,CACC,KAAMY,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAhBiBC,EAAQD,GAAM,KAiBjC,CACD,EACH,GAtBkB,IAuBpB,EACF,GACF,CAEJ,CAAC,EAEDV,EAAQ,YAAc,UAEtB,IAAOY,EAAQnB,EAAWO,CAAO",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useMemo", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Picture", "Text", "Title", "Graphic", "data", "shape", "className", "props", "ref", "itemsLength", "itemStyle", "basisStyle", "breakPointStyle", "item", "index", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';
|
|
3
|
+
import type { Img } from '../../types/props.js';
|
|
3
4
|
interface MarqueeListProps {
|
|
4
5
|
children?: React.ReactNode;
|
|
5
6
|
className?: string;
|
|
@@ -7,7 +8,7 @@ interface MarqueeListProps {
|
|
|
7
8
|
declare const MarqueeList: React.ForwardRefExoticComponent<MarqueeListProps & React.RefAttributes<HTMLDivElement>>;
|
|
8
9
|
interface MarqueeImageContentProps {
|
|
9
10
|
data: {
|
|
10
|
-
image:
|
|
11
|
+
image: Img;
|
|
11
12
|
};
|
|
12
13
|
className?: string;
|
|
13
14
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as r}from"react/jsx-runtime";import o from"react";import l from"react-fast-marquee";import"react-fast-marquee";import{Picture as c,Text as M}from"../../components/index.js";import{cn as a}from"../../helpers/utils.js";import{withStyles as q}from"../../shared/Styles.js";const p=({children:e,...t})=>r(l,{...t,children:e});p.displayName="Marquee";const n=o.forwardRef(({className:e,children:t,...s},u)=>r("div",{className:a("laptop:gap-16 flex items-center gap-6",e),ref:u,children:t}));n.displayName="MarqueeList";const i=({data:{image:e},className:t})=>r(c,{source:e.url,alt:e.alt,className:a("laptop:h-[80px] laptop:w-[120px] h-[48px] w-[72px]",t),imgClassName:"object-cover"});i.displayName="MarqueeImageContent";const m=o.forwardRef(({data:{text:e},className:t},s)=>r(M,{as:"div",ref:s,html:e,className:a("text-lines-2 flex size-14 items-center justify-center text-nowrap font-medium leading-[1.2]",t)}));m.displayName="MarqueeTextContent";var C=q(p);export{i as MarqueeImageContent,n as MarqueeList,m as MarqueeTextContent,C as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport FastMarquee from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst Marquee = ({ children, ...props }: FastMarqueeProps) => {\n return <FastMarquee {...props}>{children}</FastMarquee>\n}\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n children?: React.ReactNode\n className?: string\n}\n\nconst MarqueeList = React.forwardRef<HTMLDivElement, MarqueeListProps>(({ className, children, ...props }, ref) => {\n return (\n <div className={cn('laptop:gap-16 flex items-center gap-6', className)} ref={ref}>\n {children}\n </div>\n )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n data: {\n image:
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport FastMarquee from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { Img } from '../../types/props.js'\n\nconst Marquee = ({ children, ...props }: FastMarqueeProps) => {\n return <FastMarquee {...props}>{children}</FastMarquee>\n}\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n children?: React.ReactNode\n className?: string\n}\n\nconst MarqueeList = React.forwardRef<HTMLDivElement, MarqueeListProps>(({ className, children, ...props }, ref) => {\n return (\n <div className={cn('laptop:gap-16 flex items-center gap-6', className)} ref={ref}>\n {children}\n </div>\n )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n data: {\n image: Img\n }\n className?: string\n}\n\nconst MarqueeImageContent = ({ data: { image }, className }: MarqueeImageContentProps) => {\n return (\n <Picture\n source={image.url}\n alt={image.alt}\n className={cn('laptop:h-[80px] laptop:w-[120px] h-[48px] w-[72px]', className)}\n imgClassName=\"object-cover\"\n />\n )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\ninterface MarqueeTextContentProps {\n data: {\n text: string\n }\n className?: string\n}\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(\n ({ data: { text }, className }, ref) => {\n return (\n <Text\n as=\"div\"\n ref={ref}\n html={text}\n className={cn(\n 'text-lines-2 flex size-14 items-center justify-center text-nowrap font-medium leading-[1.2]',\n className\n )}\n />\n )\n }\n)\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeList, MarqueeImageContent, MarqueeTextContent }\nexport type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }\n"],
|
|
5
|
+
"mappings": "aAUS,cAAAA,MAAA,oBATT,OAAOC,MAAW,QAClB,OAAOC,MAAiB,qBACxB,MAAsD,qBACtD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAU,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,IAC7BT,EAACE,EAAA,CAAa,GAAGO,EAAQ,SAAAD,EAAS,EAE3CD,EAAQ,YAAc,UAOtB,MAAMG,EAAcT,EAAM,WAA6C,CAAC,CAAE,UAAAU,EAAW,SAAAH,EAAU,GAAGC,CAAM,EAAGG,IAEvGZ,EAAC,OAAI,UAAWK,EAAG,wCAAyCM,CAAS,EAAG,IAAKC,EAC1E,SAAAJ,EACH,CAEH,EAEDE,EAAY,YAAc,cAS1B,MAAMG,EAAsB,CAAC,CAAE,KAAM,CAAE,MAAAC,CAAM,EAAG,UAAAH,CAAU,IAEtDX,EAACG,EAAA,CACC,OAAQW,EAAM,IACd,IAAKA,EAAM,IACX,UAAWT,EAAG,qDAAsDM,CAAS,EAC7E,aAAa,eACf,EAIJE,EAAoB,YAAc,sBASlC,MAAME,EAAqBd,EAAM,WAC/B,CAAC,CAAE,KAAM,CAAE,KAAAe,CAAK,EAAG,UAAAL,CAAU,EAAGC,IAE5BZ,EAACI,EAAA,CACC,GAAG,MACH,IAAKQ,EACL,KAAMI,EACN,UAAWX,EACT,8FACAM,CACF,EACF,CAGN,EAEAI,EAAmB,YAAc,qBAEjC,IAAOE,EAAQX,EAAWC,CAAO",
|
|
6
6
|
"names": ["jsx", "React", "FastMarquee", "Picture", "Text", "cn", "withStyles", "Marquee", "children", "props", "MarqueeList", "className", "ref", "MarqueeImageContent", "image", "MarqueeTextContent", "text", "Marquee_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as C,jsx as t,jsxs as i}from"react/jsx-runtime";import v from"react";import{withStyles as B}from"../../shared/Styles.js";import w from"../../components/picture.js";import b from"../../components/button.js";import{Heading as G}from"../../components/heading.js";import{Text as I}from"../../components/text.js";import{Carousel as y,CarouselContent as k,CarouselItem as x}from"../../components/carousel.js";import{Grid as N,GridItem as g}from"../../components/gird.js";import L from"../Title/index.js";import{cn as M}from"../../helpers/utils.js";import{Tabs as P,TabsList as S,TabsTrigger as H,TabsContent as R}from"../../components/tabs.js";const u=({item:c,shape:d="square"})=>{const{theme:o="light",title:p,description:f,imageUrl:m,
|
|
1
|
+
import{Fragment as C,jsx as t,jsxs as i}from"react/jsx-runtime";import v from"react";import{withStyles as B}from"../../shared/Styles.js";import w from"../../components/picture.js";import b from"../../components/button.js";import{Heading as G}from"../../components/heading.js";import{Text as I}from"../../components/text.js";import{Carousel as y,CarouselContent as k,CarouselItem as x}from"../../components/carousel.js";import{Grid as N,GridItem as g}from"../../components/gird.js";import L from"../Title/index.js";import{cn as M}from"../../helpers/utils.js";import{Tabs as P,TabsList as S,TabsTrigger as H,TabsContent as R}from"../../components/tabs.js";const u=({item:c,shape:d="square"})=>{const{theme:o="light",title:p,description:f,imageUrl:m,primaryButton:s,secondaryButton:l}=c;return i("div",{className:M("item-wrapper relative w-full",{"rounded-box":d==="rounded","aiui-dark":o==="dark"}),children:[t(w,{source:m?.url,className:"inset-0"}),i("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[i("div",{children:[t(G,{className:"item-title",children:p}),t(I,{className:"item-description",children:f})]}),i("div",{className:"flex gap-2",children:[l&&t(b,{variant:"secondary",asChild:!0,children:t("a",{href:l.link,children:l.text})}),s&&t(b,{variant:"primary",asChild:!0,children:t("a",{href:s.link,children:s.text})})]})]})]})},q=v.forwardRef((c,d)=>{const{shape:o,sectionTitle:p,groupByTab:f=!1,items:m=[],carousel:s}=c.data,l=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=m.map(e=>e.tabName).filter(Boolean).filter((e,a,r)=>r.indexOf(e)===a),T=n.map(e=>({tabName:e,items:m.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return i("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:d,className:"",children:[p&&t(L,{data:{title:p},className:"section-title"}),f?i(P,{shape:o,align:"left",defaultValue:n[0],children:[t(S,{children:n.map((e,a)=>t(H,{value:e,children:e},a))}),n.map((e,a)=>t(R,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:i(C,{children:[t(N,{className:"w-full",children:T[e].map((r,h)=>t(g,{span:l(r.width??"full"),children:t(u,{item:r})},h))}),s&&s?.items.length>0?t(y,{className:"laptop:mt-4 mt-3",children:t(k,{className:"flex",children:s.items.map((r,h)=>t(x,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(u,{item:r,shape:o})},h))})}):null]})},a))]}):i(C,{children:[t(N,{className:"w-full",children:m.map((e,a)=>t(g,{span:l(e.width??"full"),children:t(u,{item:e})},a))}),s&&s?.items.length>0?t(y,{className:"laptop:mt-4 mt-3",children:t(k,{className:"flex",children:s.items.map((e,a)=>t(x,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(u,{item:e,shape:o})},a))})}):null]})]})});var W=B(q);export{W as default};
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|