@anker-in/headless-ui 0.0.32-alpha.1 → 0.0.32-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +2 -2
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +1 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +2 -0
- package/dist/cjs/biz-components/ShelfDisplay/index.js +5 -5
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/stories/accordionCards.stories.d.ts +1 -0
- package/dist/cjs/stories/accordionCards.stories.js +1 -1
- package/dist/cjs/stories/accordionCards.stories.js.map +3 -3
- package/dist/cjs/stories/category.stories.d.ts +1 -0
- package/dist/cjs/stories/category.stories.js +1 -1
- package/dist/cjs/stories/category.stories.js.map +3 -3
- 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/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +2 -2
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +1 -0
- package/dist/esm/biz-components/ShelfDisplay/index.d.ts +2 -0
- package/dist/esm/biz-components/ShelfDisplay/index.js +5 -5
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/stories/accordionCards.stories.d.ts +1 -0
- package/dist/esm/stories/accordionCards.stories.js +1 -1
- package/dist/esm/stories/accordionCards.stories.js.map +3 -3
- package/dist/esm/stories/category.stories.d.ts +1 -0
- package/dist/esm/stories/category.stories.js +1 -1
- package/dist/esm/stories/category.stories.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/accordionCards.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards/index.js'\n\nconst meta = {\n title: 'Biz-Components/AccordionCards',\n component: AccordionCards,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n products: mock,\n primaryButton: 'Learn More',\n theme: 'dark',\n shape: 'round',\n itemShape: 'round',\n },\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n products: mock,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,
|
|
6
|
-
"names": ["accordionCards_stories_exports", "__export", "Default", "Round", "accordionCards_stories_default", "__toCommonJS", "import_AccordionCards", "meta", "AccordionCards", "mock"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards/index.js'\nimport { Container } from '../components/container.js'\n\nconst meta = {\n title: 'Biz-Components/AccordionCards',\n component: AccordionCards,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n {\n title: 'Apple Charging Solutions',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n },\n subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n products: mock,\n primaryButton: 'Learn More',\n theme: 'dark',\n shape: 'round',\n itemShape: 'round',\n },\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n products: mock,\n shape: 'round',\n itemShape: 'round',\n primaryButton: 'Learn More',\n },\n },\n}\n\nexport const CustomLayout = () => {\n return (\n <div className=\"py-10\">\n <Container>\n <AccordionCards\n data={{ products: mock, shape: 'round', itemShape: 'round', primaryButton: 'Learn More', theme: 'dark' }}\n />\n </Container>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,YAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA0EQ,IAAAO,EAAA,6BAzERC,EAA2B,wDAC3BC,EAA0B,sCAE1B,MAAMC,EAAO,CACX,MAAO,gCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQK,EAGf,MAAME,EAAO,CACX,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,CACF,EAEaT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,SAAUS,EACV,cAAe,aACf,MAAO,OACP,MAAO,QACP,UAAW,OACb,CACF,CACF,EAEaR,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,SAAUQ,EACV,MAAO,QACP,UAAW,QACX,cAAe,YACjB,CACF,CACF,EAEaV,EAAe,OAExB,OAAC,OAAI,UAAU,QACb,mBAAC,aACC,mBAAC,EAAAS,QAAA,CACC,KAAM,CAAE,SAAUC,EAAM,MAAO,QAAS,UAAW,QAAS,cAAe,aAAc,MAAO,MAAO,EACzG,EACF,EACF",
|
|
6
|
+
"names": ["accordionCards_stories_exports", "__export", "CustomLayout", "Default", "Round", "accordionCards_stories_default", "__toCommonJS", "import_jsx_runtime", "import_AccordionCards", "import_container", "meta", "AccordionCards", "mock"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=Object.create;var
|
|
1
|
+
"use strict";var i=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},n=(t,e,r,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of l(e))!u.call(t,s)&&s!==r&&c(t,s,{get:()=>e[s],enumerable:!(m=f(e,s))||m.enumerable});return t};var g=(t,e,r)=>(r=t!=null?i(d(t)):{},n(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),b=t=>n(c({},"__esModule",{value:!0}),t);var v={};y(v,{Default:()=>x,MoreThanFive:()=>P,Round:()=>_,default:()=>h});module.exports=b(v);var a=require("react/jsx-runtime"),p=g(require("../biz-components/Category/index.js")),I=require("gsap"),k=require("@gsap/react"),A=require("gsap/dist/ScrollTrigger"),M=require("gsap/dist/SplitText");const S={title:"Biz-Components/Category",component:p.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var h=S;const o=[{name:"Anker Prime 27",image:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"},{name:"Anker Prime 27",image:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"},{name:"Anker Prime 27",image:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}],x={args:{data:{isShowSelect:!0,productData:[],products:o},className:"p-4"}},_={args:{data:{isShowSelect:!0,productData:[],shape:"round",products:o},className:"p-4"}},P=()=>(0,a.jsxs)("div",{className:"flex size-full flex-col gap-6 p-4",children:[(0,a.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 5 Items"}),(0,a.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o.slice(0,2)]}}),(0,a.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 6 Items"}),(0,a.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o]}}),(0,a.jsx)("span",{className:"text-info-primary text-center text-sm font-bold",children:" 9 Items"}),(0,a.jsx)(p.default,{data:{shape:"round",isShowSelect:!0,productData:[],products:[...o,...o,...o]}})]});
|
|
2
2
|
//# sourceMappingURL=category.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/category.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\nimport { gsap } from 'gsap'\nimport { useGSAP } from '@gsap/react'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { SplitText } from 'gsap/dist/SplitText'\n\nconst meta = {\n title: 'Biz-Components/Category',\n component: Category,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n name: 'Anker Prime 27',\n image:\n '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 name: 'Anker Prime 27',\n image:\n '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 name: 'Anker Prime 27',\n image:\n '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 isShowSelect: true,\n productData: [],\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n shape: 'round',\n products: mock,\n },\n className: 'p-4',\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,
|
|
6
|
-
"names": ["category_stories_exports", "__export", "Default", "Round", "category_stories_default", "__toCommonJS", "import_Category", "import_gsap", "import_react", "import_ScrollTrigger", "import_SplitText", "meta", "Category", "mock"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Category from '../biz-components/Category/index.js'\nimport { gsap } from 'gsap'\nimport { useGSAP } from '@gsap/react'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { SplitText } from 'gsap/dist/SplitText'\n\nconst meta = {\n title: 'Biz-Components/Category',\n component: Category,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Category>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n {\n name: 'Anker Prime 27',\n image:\n '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 name: 'Anker Prime 27',\n image:\n '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 name: 'Anker Prime 27',\n image:\n '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 isShowSelect: true,\n productData: [],\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n isShowSelect: true,\n productData: [],\n shape: 'round',\n products: mock,\n },\n className: 'p-4',\n },\n}\n\nexport const MoreThanFive = () => {\n return (\n <div className=\"flex size-full flex-col gap-6 p-4\">\n <span className=\"text-info-primary text-center text-sm font-bold\"> 5 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock.slice(0, 2)],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 6 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock],\n }}\n />\n <span className=\"text-info-primary text-center text-sm font-bold\"> 9 Items</span>\n <Category\n data={{\n shape: 'round',\n isShowSelect: true,\n productData: [],\n products: [...mock, ...mock, ...mock],\n }}\n />\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,iBAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA8DI,IAAAO,EAAA,6BA7DJC,EAAqB,kDACrBC,EAAqB,gBACrBC,EAAwB,uBACxBC,EAA8B,mCAC9BC,EAA0B,+BAE1B,MAAMC,EAAO,CACX,MAAO,0BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOT,EAAQQ,EAGf,MAAME,EAAO,CACX,CACE,KAAM,iBACN,MACE,8HACJ,EACA,CACE,KAAM,iBACN,MACE,8HACJ,EACA,CACE,KAAM,iBACN,MACE,8HACJ,CACF,EAEab,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,SAAUa,CACZ,EACA,UAAW,KACb,CACF,EAEaX,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,aAAc,GACd,YAAa,CAAC,EACd,MAAO,QACP,SAAUW,CACZ,EACA,UAAW,KACb,CACF,EAEaZ,EAAe,OAExB,QAAC,OAAI,UAAU,oCACb,oBAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAW,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,EAAK,MAAM,EAAG,CAAC,CAAC,CACzC,EACF,KACA,OAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,CAAI,CAC7B,EACF,KACA,OAAC,QAAK,UAAU,kDAAkD,oBAAQ,KAC1E,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,QACP,aAAc,GACd,YAAa,CAAC,EACd,SAAU,CAAC,GAAGC,EAAM,GAAGA,EAAM,GAAGA,CAAI,CACtC,EACF,GACF",
|
|
6
|
+
"names": ["category_stories_exports", "__export", "Default", "MoreThanFive", "Round", "category_stories_default", "__toCommonJS", "import_jsx_runtime", "import_Category", "import_gsap", "import_react", "import_ScrollTrigger", "import_SplitText", "meta", "Category", "mock"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as P,jsx as o,jsxs as i}from"react/jsx-runtime";import M from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import y from"../../components/picture.js";import w from"../../components/button.js";import C from"../SwiperBox/index.js";import{withStyles as I}from"../../shared/Styles.js";import S,{useState as g,useRef as d,useCallback as H,useImperativeHandle as L,useEffect as R}from"react";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";import{gaTrack as D}from"../../shared/track.js";const s="image",l="scene_banner",z=S.forwardRef(({data:t,className:u="",event:f},_)=>{const[a,N]=g(0),m=d([]),c=d(!1),[v,T]=g(0),p=d(null);L(_,()=>p.current),A(p,{componentType:s,componentName:l,componentTitle:t?.title});const B=(e,r)=>{r&&(m.current[e]=r)};R(()=>{const e=()=>{m.current[0]&&T(m.current[0].offsetWidth)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]);const E=({data:e,configuration:r})=>i("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",r?.itemShape==="round"?"rounded-2xl":""),children:[o(y,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||""}),i("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[i("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[o("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),o("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:k(e.link,`${s}_${l}`),onClick:()=>r?.event?.primaryButton(e,r),children:o(w,{variant:"secondary",className:n("text-info-primary text-sm font-bold"),children:r?.primaryButton})})]})]}),b=H(e=>{a===e||c.current||(c.current=!0,N(e),D({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:s,component_name:l,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,a]);return i(P,{children:[t?.title&&o(M,{data:{title:t?.title}}),o("div",{ref:p,className:n("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:o("div",{className:n("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",u),children:t?.products?.map((e,r)=>{const h=a===r;return i("div",{style:{flex:`${h?8:1} 1 0%`,transition:"all 0.6s"},ref:x=>{x&&B(r,x)},className:n("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>b(r),onMouseLeave:()=>{c.current=!1},onClick:()=>b(r),children:[o(y,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),i("div",{style:{width:v},className:n("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",h&&v?"opacity-100":"opacity-0"),children:[i("div",{className:"mr-16 flex-1 overflow-hidden",children:[o("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),o("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),o("a",{href:k(e?.link,`${s}_${l}`),onClick:()=>f?.primaryButton?.(t,r),children:o(w,{className:n("desktop:text-base mb-1.5 text-sm font-bold"),children:t?.primaryButton})})]})]},r)})})}),o("div",{className:n("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:o(C,{className:n("h-[400px] !overflow-visible",u),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:f}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var Q=I(z);export{Q 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 { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\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 mobileImg?: {\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 theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n if (accordionRef.current[0]) {\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
|
|
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 { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\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 mobileImg?: {\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 theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[0]) {\n setContentWidth(accordionRef.current[0].offsetWidth)\n }\n }\n handleResize()\n window.addEventListener('resize', handleResize)\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration)}\n >\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\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 onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\">\n {item?.subTitle}\n </h3>\n </div>\n <a\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n <Button className={cn('desktop:text-base mb-1.5 text-sm font-bold')}>{data?.primaryButton}</Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withStyles(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import s from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const r=s.forwardRef(({data:e,Slide:o,id:a,pagination:w})=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!0},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,n)=>i(p,{className:"!h-[unset]",children:i(o,{data:t,configuration:e?.configuration})},a+"SwiperSlide"+n))}));r.displayName="SwiperBox";var B=r;export{B as default};
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 6,\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
-
"mappings": "aAyDU,cAAAA,MAAA,oBAxDV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n pagination?: any\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: true,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "aAyDU,cAAAA,MAAA,oBAxDV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,CAC/C,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,IACtBb,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMG,EAAM,cAAeJ,GAAM,cAAe,GADvCE,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAOO,EAAQP",
|
|
6
6
|
"names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "item", "jIndex", "SwiperCategory_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{
|
|
1
|
+
"use client";import{jsx as o,jsxs as i}from"react/jsx-runtime";import f,{useImperativeHandle as h,useRef as v}from"react";import{cn as a}from"../../helpers/utils.js";import l from"../../components/picture.js";import{withStyles as y}from"../../shared/Styles.js";import b from"../Title/index.js";import x from"./SwiperCategory.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as m}from"../../shared/trackUrlRef.js";const s="image",p="category_banner",w=(e,t)=>{const r=[];for(let n=0;n<e.length;n+=t)r.push(e.slice(n,n+t));return r},N=({data:e,configuration:t})=>i("div",{className:a("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),o("p",{className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]}),C=({data:e,configuration:t})=>i("div",{className:a("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),o("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),R=({data:e,configuration:t})=>i("div",{className:a("tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto","hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"transition-all duration-300 group-hover:scale-110",children:o("a",{href:m(e?.link,`${s}_${p}`),onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})})}),o("p",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold ",children:e?.name})]}),_=({data:e,configuration:t,index:r})=>i("div",{className:a("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:e?.link||"",onClick:()=>t?.event?.primaryButton(e,t?.index),children:o(l,{source:e?.image?.url||e?.image,className:a("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),o("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),I=({data:e,configuration:t})=>o("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,n)=>e?.length>5?o(C,{data:r,configuration:t},n):o(_,{index:n,data:r,configuration:t},n))}),j=f.forwardRef((e,t)=>{const{data:r,className:n="",key:d,event:u}=e,g=r?.isShowSelect?r?.products:r?.productData,c=v(null);return h(t,()=>c.current),k(c,{componentType:s,componentName:p,componentTitle:r?.title}),i("div",{ref:c,className:a("w-full overflow-hidden",n,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&o(b,{data:{title:r?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(x,{id:`Category${d}`,Slide:N,data:{list:g,configuration:{shape:r?.shape,event:u}}})}),o("div",{className:"tablet:hidden block",children:o(x,{id:`Category1${d}`,Slide:I,data:{list:w(g,6),configuration:{shape:r?.shape,event:u}}})}),o("div",{className:"h-7"})]})});var E=y(j);export{E as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto',\n 'hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold \">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\
|
|
5
|
-
"mappings": "aAqDI,
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden',\n 'hover:bg-info-white cursor-pointer px-3 py-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n <p className=\"text-info-primary flex-1 truncate text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto',\n 'hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-center text-[14px] font-bold \">\n {data?.name}\n </p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer p-4',\n index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a href={data?.link || ''} onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}>\n <Picture\n source={data?.image?.url || data?.image}\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n )}\n />\n </a>\n <p className=\"text-info-primary line-clamp-2 text-center text-sm font-bold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return data?.length > 5 ? (\n <SingleItem key={index} data={item} configuration={configuration} />\n ) : (\n <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n )\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\n// const SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n// return (\n// <>\n// <div className=\"tablet:block hidden\">\n// <div className=\"mx-auto flex w-full gap-4\">\n// {data?.map((item, index) => {\n// return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// <div className=\"tablet:hidden block\">\n// <div className=\"grid grid-cols-2 gap-3\">\n// {data?.map((item, index) => {\n// return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n// })}\n// </div>\n// </div>\n// </>\n// )\n// }\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape, event: event } }}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withStyles", "Title", "SwiperBox", "useExposure", "trackUrlRef", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "SingleItem", "SinglePcCategoryItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "Category", "props", "ref", "className", "key", "event", "currentData", "innerRef", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as c,forwardRef as g,useRef as b}from"react";import{cn as
|
|
1
|
+
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as c,forwardRef as g,useRef as b}from"react";import{cn as k}from"../../helpers/utils.js";import{withStyles as y}from"../../shared/Styles.js";import{Picture as M,Link as N}from"../../components/index.js";import{Dialog as P,DialogContent as C}from"../../components/dialog.js";import B from"../Title/index.js";import L from"../SwiperBox/index.js";import{Container as V}from"../../components/container.js";import{convertLexicalToHTML as T}from"@payloadcms/richtext-lexical/html";import{useExposure as _}from"../../hooks/useExposure.js";const z="video",D="media_player_multi",j=({data:t,configuration:l})=>o("div",{className:k("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(M,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&e("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e(N,{href:t?.href,className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),S=g(({data:{items:t=[],shape:l="square",title:i,containerProps:f},className:r="",key:x,onVideoPlayBtnClick:u},h)=>{const[n,a]=c(!1),[v,s]=c(""),p=typeof i=="string"?i:i&&T({data:i}),d=b(null);_(d,{componentType:z,componentName:D,componentTitle:p});const m=t.length;return o("div",{className:r,ref:d,children:[e("div",{className:"mediaplayermulti-box",children:e(V,{...f||{},className:"overflow-hidden",children:o("div",{className:r,ref:h,children:[i&&e(B,{className:"mediaplayermulti-title",data:{title:p||""}}),e(L,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+x,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:u,setVisible:a,setVideoUrl:s}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:m===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:m===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(P,{open:n,onOpenChange:w=>{a(w),s("")},children:o(C,{className:"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[n?e("video",{className:"size-full object-cover",src:v,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{a(!1),s("")},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var F=y(S);export{F as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <
|
|
5
|
-
"mappings": "aA0BM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAzBN,OAAS,YAAAC,EAAU,cAAAC,EAAY,UAAAC,MAAc,QAC7C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "wrapperRef", "itemsLength", "flag", "MediaPlayerMulti_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={data?.href}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "wrapperRef", "itemsLength", "flag", "MediaPlayerMulti_default"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { ContainerProps } from '../../types/props.js';
|
|
2
3
|
export interface ShelfDisplayItem {
|
|
3
4
|
id?: string;
|
|
4
5
|
/** 产品图片*/
|
|
@@ -41,6 +42,7 @@ export interface ShelfDisplayProps {
|
|
|
41
42
|
/** 副按钮配置 */
|
|
42
43
|
secondaryButton?: string;
|
|
43
44
|
theme?: 'light' | 'dark';
|
|
45
|
+
containerProps?: ContainerProps;
|
|
44
46
|
};
|
|
45
47
|
buildData?: {
|
|
46
48
|
categories: any[];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
2
|
-
${
|
|
3
|
-
`,children:
|
|
4
|
-
${
|
|
5
|
-
`,children:
|
|
1
|
+
"use client";import{Fragment as Z,jsx as t,jsxs as d}from"react/jsx-runtime";import E,{useState as T,useEffect as H,useRef as q,useImperativeHandle as V}from"react";import{cn as c}from"../../helpers/utils.js";import R from"../../components/picture.js";import $ from"./tabSwitch.js";import N from"../../components/button.js";import A from"../Title/index.js";import L from"../SwiperBox/index.js";import{withStyles as O}from"../../shared/Styles.js";import{formatVariantPrice as z}from"./shelfDisplay.js";import{Container as U}from"../../components/container.js";import{useMediaQuery as B}from"react-responsive";import{useExposure as j}from"../../hooks/useExposure.js";import{gaTrack as F}from"../../shared/track.js";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import W from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";const D="image",P="product_shelf",K=999999999e-2,X=({data:e,configuration:i})=>{const{locale:m="us",copyWriting:u}=Q(),f=B({query:"(max-width: 768px)"}),v=(r,o)=>i?.event?.primaryButton?.(r,o+1),s=(r,o)=>i?.event?.secondaryButton?.(r,o+1),n=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},h=!n?.availableForSale&&n?.price?.amount===K,{price:x,basePrice:y}=z({locale:m,amount:n?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),a=()=>{const r=e?.sku,o=e?.variants;return o?.find(k=>k?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return t("div",{className:c("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",i?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":f}),children:d("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[t("div",{className:c("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(R,{source:a(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>t(W,{children:r},o))}),t(G,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),t(J,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:h?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u?.soldOutText}):d(Z,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:x||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:y||""})]})}),d("div",{className:c("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[t(N,{variant:"secondary",onClick:()=>s(e,i?.index),className:`
|
|
2
|
+
${i.direction==="vertical"?"w-full":""}
|
|
3
|
+
`,children:i?.secondaryButton||""}),t(N,{variant:"primary",onClick:()=>v(e,i?.index),className:`
|
|
4
|
+
${i.direction==="vertical"?"w-full":""}
|
|
5
|
+
`,children:i?.primaryButton||""})]})]})},e?.id||e?.handle)},Y=E.forwardRef(({data:e,buildData:i,className:m="",key:u,event:f},v)=>{const[s,n]=T(""),[h,x]=T([]),y=B({query:"(max-width: 768px)"}),a=q(null);V(v,()=>a.current),j(a,{componentType:D,componentName:P,componentTitle:e?.title,navigation:s});const{productsTab:r=[],productsCard:o=[],title:b,align:k="left",isShowTab:w=!0,tabShape:C="square",...I}=e,g=l=>{const _=l?.map(p=>{const S=i?.products?.find(M=>M?.handle===p?.handle);if(S)return{sku:p.sku,...S}})?.filter(p=>p);x(_)};return H(()=>{if(w){n(r?.[0]?.tab||""),g(r?.[0]?.data||[]);return}g(o)},[]),t(U,{...e?.containerProps||{},className:"overflow-hidden",children:d("div",{ref:a,className:c("w-full",m,{"aiui-dark":e?.theme==="dark"}),children:[b&&t(A,{data:{title:b}}),w&&t("div",{className:`${y?"w-full overflow-hidden":""}`,children:t($,{value:s,tabs:r,tabShape:C,onTabClick:l=>{n(l?.tab),g(l?.data||[]),F({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:D,component_name:P,component_title:e?.title,component_position:1,navigation:l?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(L,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${u}${s}`,data:{list:h,configuration:{...I,event:f}},Slide:X,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})})});var xe=O(Y);export{xe as default};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|