@anker-in/headless-ui 1.1.9-alpha.1764817121401 → 1.1.9-alpha.1764843603699
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 +1 -1
- 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/AiuiProvider/index.js.map +2 -2
- package/dist/cjs/biz-components/AplusDesc/index.js +1 -1
- package/dist/cjs/biz-components/AplusDesc/index.js.map +3 -3
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.d.ts +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.d.ts +1 -1
- 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/DownLoad/index.js +1 -1
- package/dist/cjs/biz-components/DownLoad/index.js.map +3 -3
- package/dist/cjs/biz-components/Evaluate/index.d.ts +1 -1
- 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/Faq/Faq.js +1 -1
- package/dist/cjs/biz-components/Faq/Faq.js.map +2 -2
- package/dist/cjs/biz-components/FootCharger/index.js +1 -1
- package/dist/cjs/biz-components/FootCharger/index.js.map +3 -3
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +1 -1
- package/dist/cjs/biz-components/FooterNavigation/types.d.ts +1 -1
- package/dist/cjs/biz-components/FooterNavigation/types.js.map +1 -1
- package/dist/cjs/biz-components/GiftBox/index.js +1 -1
- package/dist/cjs/biz-components/GiftBox/index.js.map +3 -3
- 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/GraphicMore/index.js +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.js.map +3 -3
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.d.ts +5 -5
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.d.ts +7 -7
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/types.d.ts +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/types.js.map +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/SelectStore/index.js.map +1 -1
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +1 -1
- package/dist/cjs/biz-components/Subscribe/index.js +2 -2
- package/dist/cjs/biz-components/Subscribe/index.js.map +1 -1
- package/dist/cjs/biz-components/TextModal/index.js +1 -1
- package/dist/cjs/biz-components/TextModal/index.js.map +1 -1
- package/dist/cjs/components/board.js +1 -1
- package/dist/cjs/components/board.js.map +1 -1
- package/dist/cjs/components/carousel.js +1 -1
- package/dist/cjs/components/carousel.js.map +1 -1
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/components/tabs.js.map +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.d.ts +5 -4
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +3 -3
- package/dist/cjs/stories/container.stories.js +1 -1
- package/dist/cjs/stories/container.stories.js.map +3 -3
- package/dist/cjs/stories/faq.stories.js.map +2 -2
- package/dist/cjs/stories/graphic.stories.js +1 -1
- package/dist/cjs/stories/graphic.stories.js.map +3 -3
- package/dist/cjs/stories/graphicAttractionBlock.stories.js +1 -1
- package/dist/cjs/stories/graphicAttractionBlock.stories.js.map +3 -3
- package/dist/esm/biz-components/AccordionCards/index.d.ts +1 -1
- 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/AiuiProvider/index.js.map +2 -2
- package/dist/esm/biz-components/AplusDesc/index.js +1 -1
- package/dist/esm/biz-components/AplusDesc/index.js.map +3 -3
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.d.ts +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/esm/biz-components/Category/index.d.ts +1 -1
- 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/DownLoad/index.js +1 -1
- package/dist/esm/biz-components/DownLoad/index.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.d.ts +1 -1
- 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/Faq/Faq.js +1 -1
- package/dist/esm/biz-components/Faq/Faq.js.map +2 -2
- package/dist/esm/biz-components/FootCharger/index.js +1 -1
- package/dist/esm/biz-components/FootCharger/index.js.map +2 -2
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +1 -1
- package/dist/esm/biz-components/FooterNavigation/types.d.ts +1 -1
- package/dist/esm/biz-components/FooterNavigation/types.js.map +1 -1
- package/dist/esm/biz-components/GiftBox/index.js +1 -1
- package/dist/esm/biz-components/GiftBox/index.js.map +3 -3
- 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/GraphicMore/index.js +1 -1
- package/dist/esm/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.d.ts +5 -5
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +7 -7
- package/dist/esm/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/types.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/types.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/types.d.ts +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/types.js.map +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/SelectStore/index.js.map +1 -1
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +1 -1
- package/dist/esm/biz-components/Subscribe/index.js +2 -2
- package/dist/esm/biz-components/Subscribe/index.js.map +1 -1
- package/dist/esm/biz-components/TextModal/index.js +1 -1
- package/dist/esm/biz-components/TextModal/index.js.map +1 -1
- package/dist/esm/components/board.js +1 -1
- package/dist/esm/components/board.js.map +1 -1
- package/dist/esm/components/carousel.js +1 -1
- package/dist/esm/components/carousel.js.map +1 -1
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/components/tabs.js.map +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.d.ts +5 -4
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/esm/stories/HeroBanner.stories.js +2 -2
- package/dist/esm/stories/HeroBanner.stories.js.map +3 -3
- package/dist/esm/stories/container.stories.js +2 -2
- package/dist/esm/stories/container.stories.js.map +2 -2
- package/dist/esm/stories/faq.stories.js.map +2 -2
- package/dist/esm/stories/graphic.stories.js +1 -1
- package/dist/esm/stories/graphic.stories.js.map +2 -2
- package/dist/esm/stories/graphicAttractionBlock.stories.js +1 -1
- package/dist/esm/stories/graphicAttractionBlock.stories.js.map +2 -2
- package/package.json +3 -2
- package/style.css +6 -6
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/container.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Container } from '../components/index.js'\nimport type { Meta, StoryObj } from '@storybook/react'\
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,6BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,
|
|
6
|
-
"names": ["container_stories_exports", "__export", "Basic", "NestedContent", "ResponsivePadding", "WithPaddingAndBackground", "container_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Container } from '../components/index.js'\nimport type { Meta, StoryObj } from '@storybook/react'\n\nconst meta = {\n title: 'Layout/Container',\n component: Container,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nContainer \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- \u57FA\u4E8E Tailwind CSS \u5B9E\u73B0\n- \u9ED8\u8BA4\u6700\u5927\u5BBD\u5EA6\u4E3A 1664px\n- \u54CD\u5E94\u5F0F\u8FB9\u8DDD\u8BBE\u8BA1\uFF1A\n - \u9ED8\u8BA4: \u5DE6\u53F3\u8FB9\u8DDD 16px (mx-4)\n - tablet: \u5DE6\u53F3\u8FB9\u8DDD 32px (mx-8)\n - laptop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n - desktop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n - lg-desktop: \u5DE6\u53F3\u8FB9\u8DDD 128px (mx-32)\n\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Container>\n\nexport default meta\n\ntype Story = StoryObj<typeof Container>\n\n// \u57FA\u7840\u793A\u4F8B\nexport const Basic = () => (\n <Container className=\"p-4\">\n <div className=\"rounded-lg bg-blue-100 p-4 text-center\">\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6</div>\n </Container>\n)\n\n// \u5E26\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\nexport const WithPaddingAndBackground = () => (\n <Container className=\"bg-gray-50 p-4\">\n <div className=\"space-y-4\">\n <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 1</h3>\n <p className=\"text-gray-600\">\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B</p>\n </div>\n <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 2</h3>\n <p className=\"text-gray-600\">\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F</p>\n </div>\n </div>\n </Container>\n)\n\n// \u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD\nexport const ResponsivePadding = () => (\n <Container className=\"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4\">\n <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n <h3 className=\"text-lg font-medium\">\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD</h3>\n <p className=\"text-gray-600\">\n \u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A\n <br />\n \u9ED8\u8BA4: px-4 (16px)\n <br />\n tablet: px-6 (24px)\n <br />\n laptop: px-8 (32px)\n </p>\n </div>\n </Container>\n)\n\n// \u5D4C\u5957\u5185\u5BB9\u793A\u4F8B\nexport const NestedContent = () => (\n <Container className=\"p-4\">\n <header className=\"rounded-t-lg bg-gray-800 p-4 text-white\">\n <h2 className=\"text-xl\">\u9875\u9762\u6807\u9898</h2>\n </header>\n <main className=\"border-x border-gray-200 bg-white p-4\">\n <p className=\"mb-4 text-gray-600\">\u4E3B\u8981\u5185\u5BB9\u533A\u57DF</p>\n <div className=\"laptop:grid-cols-2 grid grid-cols-1 gap-4\">\n <div className=\"rounded bg-blue-50 p-4\">\u5185\u5BB9\u5757 1</div>\n <div className=\"rounded bg-purple-50 p-4\">\u5185\u5BB9\u5757 2</div>\n </div>\n </main>\n <footer className=\"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4\">\n <p className=\"text-sm text-gray-500\">\u9875\u811A\u5185\u5BB9</p>\n </footer>\n </Container>\n)\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,6BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAsCI,IAAAQ,EAAA,6BAtCJC,EAAkB,iBAClBC,EAA0B,kCAG1B,MAAMC,EAAO,CACX,MAAO,mBACP,UAAW,YACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAcb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAKR,MAAMT,EAAQ,OACnB,OAAC,aAAU,UAAU,MACnB,mBAAC,OAAI,UAAU,yCAAyC,mGAAiB,EAC3E,EAIWG,EAA2B,OACtC,OAAC,aAAU,UAAU,iBACnB,oBAAC,OAAI,UAAU,YACb,qBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,gGAAc,GAC7C,KACA,QAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,kEAAS,GACxC,GACF,EACF,EAIWD,EAAoB,OAC/B,OAAC,aAAU,UAAU,yEACnB,oBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,gDAAM,KAC1C,QAAC,KAAE,UAAU,gBAAgB,4HAE3B,OAAC,OAAG,EAAE,+BAEN,OAAC,OAAG,EAAE,yBAEN,OAAC,OAAG,EAAE,uBAER,GACF,EACF,EAIWD,EAAgB,OAC3B,QAAC,aAAU,UAAU,MACnB,oBAAC,UAAO,UAAU,0CAChB,mBAAC,MAAG,UAAU,UAAU,oCAAI,EAC9B,KACA,QAAC,QAAK,UAAU,wCACd,oBAAC,KAAE,UAAU,qBAAqB,gDAAM,KACxC,QAAC,OAAI,UAAU,4CACb,oBAAC,OAAI,UAAU,yBAAyB,gCAAK,KAC7C,OAAC,OAAI,UAAU,2BAA2B,gCAAK,GACjD,GACF,KACA,OAAC,UAAO,UAAU,iEAChB,mBAAC,KAAE,UAAU,wBAAwB,oCAAI,EAC3C,GACF",
|
|
6
|
+
"names": ["container_stories_exports", "__export", "Basic", "NestedContent", "ResponsivePadding", "WithPaddingAndBackground", "container_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "meta"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/faq.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Faq from '../biz-components/Faq/Faq.js'\nimport type { FaqProps } from '../biz-components/Faq/types.js'\n\nconst meta = {\n title: 'Biz Components/Faq',\n component: Faq,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: 'Faq \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u5E38\u89C1\u95EE\u9898',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Faq>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst listData: FaqProps['data']['productData'] = [\n {\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n alt: 'Image1',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n mimeType: 'image/png',\n },\n title:\n 'F1: Was muss ich tun, wenn ich ein Solarladeger\u00E4t zum Aufladen der tragbaren Anker 767 Powerstation verwende?',\n desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n },\n {\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n alt: 'Image2',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n mimeType: 'image/png',\n },\n title: 'F2: Wie sollte ich die Powerstation lagern und warten?',\n desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n },\n {\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n alt: 'Image3',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n mimeType: 'image/png',\n },\n title: 'F3: Was muss ich bei der Nutzung der Anker App beachten?',\n desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n },\n {\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n alt: 'Image4',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n mimeType: 'image/png',\n },\n title: 'F4: Kann die Powerstation mein Elektroauto aufladen?',\n desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n },\n {\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n alt: 'Image5',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n mimeType: 'image/png',\n },\n title:\n 'F5: Kann ich die tragbare Anker 767 Powerstation gleichzeitig mit Wechselstrom und Gleichstrom aufgeladen werden?',\n desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n productData: listData,\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GACA,IAAAK,EAAgB,2CAGhB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,kEACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIf,MAAME,EAA4C,CAChD,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,mHACF,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,yDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,2DACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,uDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,oHACF,KAAM,2PACR,CACF,EAEaN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,YAAaM,CACf,CACF,CACF",
|
|
6
6
|
"names": ["faq_stories_exports", "__export", "Default", "faq_stories_default", "__toCommonJS", "import_Faq", "meta", "Faq", "listData"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var p=Object.create;var r=Object.defineProperty;var
|
|
1
|
+
"use strict";var p=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},a=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!h.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(n=d(e,o))||n.enumerable});return t};var g=(t,e,s)=>(s=t!=null?p(f(t)):{},a(e||!t||!t.__esModule?r(s,"default",{value:t,enumerable:!0}):s,t)),u=t=>a(r({},"__esModule",{value:!0}),t);var F={};y(F,{Default:()=>b,Round:()=>w,default:()=>v});module.exports=u(F);var i=require("react/jsx-runtime"),l=g(require("../biz-components/Graphic/index.js"));const x={title:"Biz-Components/Graphic",component:l.default,parameters:{layout:"fullscreen",docs:{description:{component:"\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/"}}},decorators:[t=>(0,i.jsx)("div",{style:{paddingTop:"2em"},children:(0,i.jsx)(t,{})})],tags:["autodocs"]};var v=x;const c=[{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",buttonText:"learn More",theme:"light",extension:{text:"Al Detection 1",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 2",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",theme:"light",buttonText:"learn More",extension:{text:"Al Detection 3",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 4",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}}],b={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c}}},w={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c,itemShape:"round"}}};
|
|
2
2
|
//# sourceMappingURL=graphic.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/graphic.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Graphic from '../biz-components/Graphic/index.js'\
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,
|
|
6
|
-
"names": ["graphic_stories_exports", "__export", "Default", "Round", "graphic_stories_default", "__toCommonJS", "import_jsx_runtime", "import_Graphic", "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Graphic from '../biz-components/Graphic/index.js'\n\nconst meta = {\n title: 'Biz-Components/Graphic',\n component: Graphic,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/',\n },\n },\n },\n decorators: [\n Story => (\n <div style={{ paddingTop: '2em' }}>\n <Story />\n </div>\n ),\n ],\n tags: ['autodocs'],\n} satisfies Meta<typeof Graphic>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n {\n imgUrl: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316',\n alt: 'imgUrlPc',\n },\n title: '<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off',\n buttonText: 'learn More',\n theme: 'light',\n extension: {\n text: 'Al Detection 1',\n textDesc:\n \"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.\",\n textTitle: 'Advanced BionicMind AI ',\n textPcImg: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442',\n },\n textMobileImg: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442',\n },\n },\n },\n {\n imgUrl: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318',\n alt: 'imgUrlPc',\n },\n title: '<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices',\n textColor: '#FFF',\n theme: 'dark',\n buttonText: 'learn More',\n extension: {\n text: 'Al Detection 2',\n textDesc:\n \"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.\",\n textTitle: 'Advanced BionicMind AI ',\n textPcImg: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442',\n },\n textMobileImg: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442',\n },\n },\n },\n {\n imgUrl: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316',\n alt: 'imgUrlPc',\n },\n title: '<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off',\n theme: 'light',\n buttonText: 'learn More',\n extension: {\n text: 'Al Detection 3',\n textDesc:\n \"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.\",\n textTitle: 'Advanced BionicMind AI ',\n textPcImg: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442',\n },\n textMobileImg: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442',\n },\n },\n },\n {\n imgUrl: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318',\n alt: 'imgUrlPc',\n },\n title: '<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices',\n textColor: '#FFF',\n theme: 'dark',\n buttonText: 'learn More',\n extension: {\n text: 'Al Detection 4',\n textDesc:\n \"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.\",\n textTitle: 'Advanced BionicMind AI ',\n textPcImg: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442',\n },\n textMobileImg: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442',\n },\n },\n },\n]\n\nexport const Default: Story = {\n args: {\n data: {\n title: 'Explore Anker\u2019s Top Products By<br>Category',\n items: mockItems as any,\n },\n },\n}\n\nexport const Round: Story = {\n args: {\n data: {\n title: 'Explore Anker\u2019s Top Products By<br>Category',\n items: mockItems as any,\n itemShape: 'round',\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GAiBQ,IAAAM,EAAA,6BAhBRC,EAAoB,iDAEpB,MAAMC,EAAO,CACX,MAAO,yBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,mIACb,CACF,CACF,EACA,WAAY,CACVC,MACE,OAAC,OAAI,MAAO,CAAE,WAAY,KAAM,EAC9B,mBAACA,EAAA,EAAM,EACT,CAEJ,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQI,EAGf,MAAMG,EAAY,CAChB,CACE,OAAQ,CACN,IAAK,2FACL,IAAK,UACP,EACA,MAAO,yEACP,WAAY,aACZ,MAAO,QACP,UAAW,CACT,KAAM,iBACN,SACE,oMACF,UAAW,0BACX,UAAW,CACT,IAAK,0FACP,EACA,cAAe,CACb,IAAK,0FACP,CACF,CACF,EACA,CACE,OAAQ,CACN,IAAK,2FACL,IAAK,UACP,EACA,MAAO,yEACP,UAAW,OACX,MAAO,OACP,WAAY,aACZ,UAAW,CACT,KAAM,iBACN,SACE,oMACF,UAAW,0BACX,UAAW,CACT,IAAK,0FACP,EACA,cAAe,CACb,IAAK,0FACP,CACF,CACF,EACA,CACE,OAAQ,CACN,IAAK,2FACL,IAAK,UACP,EACA,MAAO,yEACP,MAAO,QACP,WAAY,aACZ,UAAW,CACT,KAAM,iBACN,SACE,oMACF,UAAW,0BACX,UAAW,CACT,IAAK,0FACP,EACA,cAAe,CACb,IAAK,0FACP,CACF,CACF,EACA,CACE,OAAQ,CACN,IAAK,2FACL,IAAK,UACP,EACA,MAAO,yEACP,UAAW,OACX,MAAO,OACP,WAAY,aACZ,UAAW,CACT,KAAM,iBACN,SACE,oMACF,UAAW,0BACX,UAAW,CACT,IAAK,0FACP,EACA,cAAe,CACb,IAAK,0FACP,CACF,CACF,CACF,EAEaT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,mDACP,MAAOS,CACT,CACF,CACF,EAEaR,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAO,mDACP,MAAOQ,EACP,UAAW,OACb,CACF,CACF",
|
|
6
|
+
"names": ["graphic_stories_exports", "__export", "Default", "Round", "graphic_stories_default", "__toCommonJS", "import_jsx_runtime", "import_Graphic", "meta", "Graphic", "Story", "mockItems"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of f(e))!g.call(t,i)&&i!==o&&a(t,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return t};var b=(t,e,o)=>(o=t!=null?n(m(t)):{},l(e||!t||!t.__esModule?a(o,"default",{value:t,enumerable:!0}):o,t)),d=t=>l(a({},"__esModule",{value:!0}),t);var I={};h(I,{Default:()=>k,default:()=>y});module.exports=d(I);var c=require("react/jsx-runtime"),B=require("react"),r=b(require("../biz-components/GraphicAttractionBlock/index.js"));const u={title:"Biz-Components/GraphicAttractionBlock",component:r.default,tags:["autodocs"],parameters:{layout:"fullscreen",docs:{description:{component:"\u56FE\u6587\u5438\u5F15\u533A\u5757"}}},decorators:[t=>(0,c.jsx)("div",{style:{backgroundColor:"#f5f5f5",padding:"2rem"},children:(0,c.jsx)(t,{})})]};var y=u;const k={args:{data:{shape:"square",sectionTitle:"Install and save electricity costs",imageTitle:"Whole-Home Backup Power",imageDescription:"Maintain a high quality of life during blackouts by powering all kinds of home appliances.",imageUrlPc:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121235230.png?v=1747301568",alt:"Image1",thumbnailURL:"https://placehold.co/1920x1080?text=Image1",mimeType:"image/png"},imageUrlMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772031.png?v=1747301554",alt:"Image1",thumbnailURL:"https://placehold.co/1920x1080?text=Image1",mimeType:"image/png"},attractionItems:[{title:"storing energy",description:"Maintain a high quality of life during blackouts",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Image1"}},{title:"storing energy",description:"Store solar power for nighttime use with the solar bank.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Image1"}},{title:"Plug&Play",description:"Connect the Schuko plug to a power socket.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Image1"}},{title:"Plug&Play",description:"Connect the Schuko plug to a power socket.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Image1"}}]}}};
|
|
2
2
|
//# sourceMappingURL=graphicAttractionBlock.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/graphicAttractionBlock.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport GraphicAttractionBlock from '../biz-components/GraphicAttractionBlock/index.js'\nimport type { GraphicAttractionBlockProps } from '../biz-components/GraphicAttractionBlock/index.js'\
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,
|
|
6
|
-
"names": ["graphicAttractionBlock_stories_exports", "__export", "Default", "graphicAttractionBlock_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_GraphicAttractionBlock", "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport GraphicAttractionBlock from '../biz-components/GraphicAttractionBlock/index.js'\nimport type { GraphicAttractionBlockProps } from '../biz-components/GraphicAttractionBlock/index.js'\n\nconst meta: Meta<typeof GraphicAttractionBlock> = {\n title: 'Biz-Components/GraphicAttractionBlock',\n component: GraphicAttractionBlock,\n tags: ['autodocs'],\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '\u56FE\u6587\u5438\u5F15\u533A\u5757',\n },\n },\n },\n decorators: [\n Story => (\n <div style={{ backgroundColor: '#f5f5f5', padding: '2rem' }}>\n <Story />\n </div>\n ),\n ],\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof GraphicAttractionBlock>\n\nexport const Default: Story = {\n args: {\n data: {\n shape: 'square',\n sectionTitle: 'Install and save electricity costs',\n imageTitle: 'Whole-Home Backup Power',\n imageDescription: 'Maintain a high quality of life during blackouts by powering all kinds of home appliances.',\n imageUrlPc: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121235230.png?v=1747301568',\n alt: 'Image1',\n thumbnailURL: 'https://placehold.co/1920x1080?text=Image1',\n mimeType: 'image/png',\n },\n imageUrlMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772031.png?v=1747301554',\n alt: 'Image1',\n thumbnailURL: 'https://placehold.co/1920x1080?text=Image1',\n mimeType: 'image/png',\n },\n attractionItems: [\n {\n title: 'storing energy',\n description: 'Maintain a high quality of life during blackouts',\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Image1',\n },\n },\n {\n title: 'storing energy',\n description: 'Store solar power for nighttime use with the solar bank.',\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Image1',\n },\n },\n {\n title: 'Plug&Play',\n description: 'Connect the Schuko plug to a power socket.',\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Image1',\n },\n },\n {\n title: 'Plug&Play',\n description: 'Connect the Schuko plug to a power socket.',\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Image1',\n },\n },\n ],\n },\n } satisfies GraphicAttractionBlockProps,\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAoBQ,IAAAK,EAAA,6BAnBRC,EAAkB,iBAClBC,EAAmC,gEAGnC,MAAMC,EAA4C,CAChD,MAAO,wCACP,UAAW,EAAAC,QACX,KAAM,CAAC,UAAU,EACjB,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,sCACb,CACF,CACF,EACA,WAAY,CACVC,MACE,OAAC,OAAI,MAAO,CAAE,gBAAiB,UAAW,QAAS,MAAO,EACxD,mBAACA,EAAA,EAAM,EACT,CAEJ,CACF,EAEA,IAAOP,EAAQK,EAIR,MAAMN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,SACP,aAAc,qCACd,WAAY,0BACZ,iBAAkB,6FAClB,WAAY,CACV,IAAK,2FACL,IAAK,SACL,aAAc,6CACd,SAAU,WACZ,EACA,YAAa,CACX,IAAK,2FACL,IAAK,SACL,aAAc,6CACd,SAAU,WACZ,EACA,gBAAiB,CACf,CACE,MAAO,iBACP,YAAa,mDACb,KAAM,CACJ,IAAK,gJACL,IAAK,QACP,CACF,EACA,CACE,MAAO,iBACP,YAAa,2DACb,KAAM,CACJ,IAAK,gJACL,IAAK,QACP,CACF,EACA,CACE,MAAO,YACP,YAAa,6CACb,KAAM,CACJ,IAAK,gJACL,IAAK,QACP,CACF,EACA,CACE,MAAO,YACP,YAAa,6CACb,KAAM,CACJ,IAAK,gJACL,IAAK,QACP,CACF,CACF,CACF,CACF,CACF",
|
|
6
|
+
"names": ["graphicAttractionBlock_stories_exports", "__export", "Default", "graphicAttractionBlock_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_GraphicAttractionBlock", "meta", "GraphicAttractionBlock", "Story"]
|
|
7
7
|
}
|
|
@@ -28,7 +28,7 @@ export type AccordionCardsType = {
|
|
|
28
28
|
};
|
|
29
29
|
/** 按钮事件*/
|
|
30
30
|
event?: {
|
|
31
|
-
primaryButton?: (
|
|
31
|
+
primaryButton?: (_v: any, _index: number) => void;
|
|
32
32
|
};
|
|
33
33
|
};
|
|
34
34
|
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<AccordionCardsType & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as z,jsx as i,jsxs as a}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{Fragment as z,jsx as i,jsxs as a}from"react/jsx-runtime";import R from"../Title/index.js";import{cn as o}from"../../helpers/utils.js";import k from"../../components/picture.js";import $ from"../../components/button.js";import L from"../SwiperBox/index.js";import{withLayout as M}from"../../shared/Styles.js";import B,{useState as I,useRef as f,useCallback as E,useImperativeHandle as H,useEffect as C}from"react";import{useExposure as N}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import D from"../../shared/throttle.js";import{Heading as _}from"../../components/heading.js";const r="image",s="scene_banner",S=({item:e,idx:t,itemShape:m,hoverIndex:x,getRef:p,handleSwiperItemClick:b,isAnimation:u,contentWidth:c,primaryButton:d,event:g,data:w,accordionRef:v})=>{const h=x===t,T=h?8:1;return N({current:v.current[t]},{componentType:r,componentName:s,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),a("div",{style:{flex:`${T} 1 0%`,transition:"all 0.6s"},ref:n=>{n&&p(t,n)},className:o("relative cursor-pointer overflow-hidden",m==="round"?"rounded-2xl":""),onMouseEnter:()=>b(t),onMouseLeave:()=>{u.current=!1},onClick:()=>{b(t)},children:[i("a",{href:y(e?.imgLink,`${r}_${s}`),"data-headless-type-name":`${r}#${s}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:i(k,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}),a("div",{style:{width:c},className:o("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&&c?"opacity-100":"opacity-0"),children:[a("div",{className:"mr-16 flex-1 overflow-hidden",children:[i(_,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),i(_,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),a($,{className:o("mb-1.5 font-bold"),as:"a",href:y(e?.link,`${r}_${s}`),"data-headless-type-name":`${r}#${s}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${d}`,onClick:()=>g?.primaryButton?.(w,t),children:[d,i("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},A=({data:e,configuration:t})=>{const m=f(null);return N(m,{componentType:r,componentName:s,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),a("div",{ref:m,className:o("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[i("a",{href:y(e?.imgLink,`${r}_${s}`),"data-headless-type-name":`${r}#${s}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-postion":`''#${t?.index+1}`,children:i(k,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}),a("div",{className:o("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[a("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[i("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),i("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),i($,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:o("text-info-primary text-sm font-bold"),href:y(e.link,`${r}_${s}`),"data-headless-type-name":`${r}#${s}`,"data-headless-nav-postion":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},j=B.forwardRef(({data:e,className:t="",event:m},x)=>{const[p,b]=I(0),u=f(0),c=f([]),d=f(!1),[g,w]=I(0),v=f(null);H(x,()=>v.current);const h=(n,l)=>{l&&(c.current[n]=l)};C(()=>{const n=()=>{c.current[u.current]&&w(c.current[u.current].offsetWidth)};n();const l=D(n,300);return window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)},[]);const T=E(n=>{p===n||d.current||(d.current=!0,b(n),u.current=n)},[e?.products,p]);return a(z,{children:[e?.title&&i(R,{data:{title:e?.title}}),i("div",{ref:v,className:o("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:i("div",{className:o("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",t),children:e?.products?.map((n,l)=>i(S,{item:n,idx:l,itemShape:e?.itemShape,hoverIndex:p,getRef:h,handleSwiperItemClick:T,isAnimation:d,contentWidth:g,primaryButton:e?.primaryButton,event:m,data:e,accordionRef:c},l))})}),i("div",{className:o("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:i(L,{className:o("h-[400px] !overflow-visible",t),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:m,title:e?.title}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var X=M(j);export{X 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 { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.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: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type 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 AccordionCardsPcItem = ({\n item,\n idx,\n itemShape,\n hoverIndex,\n getRef,\n handleSwiperItemClick,\n isAnimation,\n contentWidth,\n primaryButton,\n event,\n data,\n accordionRef,\n}: {\n item: ItemType\n idx: number\n itemShape: 'round' | 'square' | undefined\n hoverIndex: number | null\n getRef: (idx: number, el: HTMLDivElement) => void\n handleSwiperItemClick: (idx: number) => void\n isAnimation: any\n contentWidth: number\n primaryButton: string | undefined\n event: any\n data: AccordionCardsType['data']\n accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n\n useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n componentTitle: item?.title,\n position: idx + 1,\n componentDescription: item?.subTitle,\n })\n\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('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <a\n href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n </a>\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 <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n </div>\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.subTitle,\n })\n\n return (\n <div\n ref={ref}\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 <a\n href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n </a>\n <div className={cn('absolute inset-x-0 bottom-0 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\n <Button\n as=\"a\"\n variant=\"secondary\"\n aria-label={data?.title ?? data?.subTitle}\n className={cn('text-info-primary text-sm font-bold')}\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\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\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[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\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 hoverIndexRef.current = idx\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 <AccordionCardsPcItem\n key={idx}\n item={item}\n idx={idx}\n itemShape={data?.itemShape}\n hoverIndex={hoverIndex}\n getRef={getRef}\n handleSwiperItemClick={handleSwiperItemClick}\n isAnimation={isAnimation}\n contentWidth={contentWidth}\n primaryButton={data?.primaryButton}\n event={event}\n data={data}\n accordionRef={accordionRef}\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 title: data?.title,\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.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
-
"mappings": "aAgHQ,
|
|
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 { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.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: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type 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 AccordionCardsPcItem = ({\n item,\n idx,\n itemShape,\n hoverIndex,\n getRef,\n handleSwiperItemClick,\n isAnimation,\n contentWidth,\n primaryButton,\n event,\n data,\n accordionRef,\n}: {\n item: ItemType\n idx: number\n itemShape: 'round' | 'square' | undefined\n hoverIndex: number | null\n getRef: (_idx: number, _el: HTMLDivElement) => void\n handleSwiperItemClick: (_idx: number) => void\n isAnimation: any\n contentWidth: number\n primaryButton: string | undefined\n event: any\n data: AccordionCardsType['data']\n accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n\n useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n componentTitle: item?.title,\n position: idx + 1,\n componentDescription: item?.subTitle,\n })\n\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('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <a\n href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n </a>\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 <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n </div>\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.subTitle,\n })\n\n return (\n <div\n ref={ref}\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 <a\n href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n </a>\n <div className={cn('absolute inset-x-0 bottom-0 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\n <Button\n as=\"a\"\n variant=\"secondary\"\n aria-label={data?.title ?? data?.subTitle}\n className={cn('text-info-primary text-sm font-bold')}\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\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\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[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\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 hoverIndexRef.current = idx\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\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 <AccordionCardsPcItem\n key={idx}\n item={item}\n idx={idx}\n itemShape={data?.itemShape}\n hoverIndex={hoverIndex}\n getRef={getRef}\n handleSwiperItemClick={handleSwiperItemClick}\n isAnimation={isAnimation}\n contentWidth={contentWidth}\n primaryButton={data?.primaryButton}\n event={event}\n data={data}\n accordionRef={accordionRef}\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 title: data?.title,\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.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withLayout", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "throttle", "Heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "isAnimation", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "MobileItem", "configuration", "ref", "AccordionCards", "className", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AiuiProvider/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n trackingData: Record<string, any>\n locale?: string\n copyWriting?: Record<string, string>\n pathname?: string\n storeDomain?: string\n isLogin?: boolean\n inApp?: boolean\n udcGroupIds?: number[]\n udcWhiteGroupIds?: number[]\n targetCode?: string\n channel?: string\n currencyCode?: string\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n useEffect(() => {\n const handleTrackClick = (e: any, el: any) => {\n // e?.stopPropagation?.()\n const out: any = {}\n if (!el || !el.attributes) return out\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as any)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name)\n }\n }\n const sku = out?.['data-headless-sku']\n const nameType = out?.['data-headless-type-name']?.split?.('#')\n const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: rest?.trackingData?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n },\n })\n }\n const observer = new MutationObserver(() => {\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n }\n })\n })\n observer.observe(document.body, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n return () => observer.disconnect()\n }, [])\n\n return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n trackingData: Record<string, any>\n locale?: string\n copyWriting?: Record<string, string>\n pathname?: string\n storeDomain?: string\n isLogin?: boolean\n inApp?: boolean\n udcGroupIds?: number[]\n udcWhiteGroupIds?: number[]\n targetCode?: string\n channel?: string\n currencyCode?: string\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n useEffect(() => {\n const handleTrackClick = (e: any, el: any) => {\n // e?.stopPropagation?.()\n const out: any = {}\n if (!el || !el.attributes) return out\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as any)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name)\n }\n }\n const sku = out?.['data-headless-sku']\n const nameType = out?.['data-headless-type-name']?.split?.('#')\n const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: rest?.trackingData?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n },\n })\n }\n const observer = new MutationObserver(() => {\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n }\n })\n })\n observer.observe(document.body, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n return () => observer.disconnect()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
+
"mappings": "AAyFS,cAAAA,MAAA,oBAzFT,OAAS,WAAAC,MAAe,wBACxB,OAAgB,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,MAAiB,QAiBrD,MAAMC,EAAcH,EAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYI,EAAiB,IAAM,CAElC,GAAI,CADYH,EAAWE,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOF,EAAWE,CAAW,CAC/B,EAEME,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,KAGEL,EAAU,IAAM,CACd,MAAMM,EAAmB,CAACC,EAAQC,IAAY,CAE5C,MAAMC,EAAW,CAAC,EAClB,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAAOC,EAClC,UAAWC,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAc,KACxBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,EAEpC,CACA,MAAMC,EAAMH,IAAM,mBAAmB,EAC/BI,EAAWJ,IAAM,yBAAyB,GAAG,QAAQ,GAAG,EACxDK,EAAYL,IAAM,iCAAiC,GAAG,QAAQ,GAAG,EACjEM,EAAcN,IAAM,2BAA2B,GAAG,QAAQ,GAAG,EACnEZ,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYQ,GAAM,cAAc,WAAa,YAC7C,eAAgBQ,IAAW,CAAC,GAAK,GACjC,eAAgBA,IAAW,CAAC,GAAK,GACjC,SAAUE,IAAc,CAAC,GAAK,GAC9B,WAAYA,IAAc,CAAC,GAAK,GAChC,YAAaD,IAAY,CAAC,GAAK,GAC/B,IAAKF,GAAO,GACZ,gBAAiBE,IAAY,CAAC,GAAK,GACnC,sBAAuBA,IAAY,CAAC,GAAK,EAC3C,CACF,CAAC,CACH,EACME,EAAW,IAAI,iBAAiB,IAAM,CAC1C,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAQ,EAAS,QAAQ,SAAS,KAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAElE,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EACM,IAAMQ,EAAS,WAAW,CAEnC,EAAG,CAAC,CAAC,EAEEpB,EAACK,EAAY,SAAZ,CAAqB,MAAOI,EAAO,SAAAD,EAAS,GAGtD,IAAOa,EAAQd",
|
|
6
6
|
"names": ["jsx", "gaTrack", "createContext", "useContext", "useEffect", "AiuiContext", "useAiuiContext", "AiuiProvider", "children", "rest", "handleTrackClick", "e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "observer", "AiuiProvider_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as v,jsx as t,jsxs as s}from"react/jsx-runtime";import{cn as n}from"../../helpers/utils.js";import{withLayout as g}from"../../shared/Styles.js";import{Picture as m,Text as p}from"../../components/index.js";import{useExposure as x}from"../../hooks/useExposure.js";import{useRef as u}from"react";const f="image",k="aplus_desc",N=({index:o,item:e})=>{const l=u(null);return x(l,{componentType:f,componentName:k,position:o+1,componentTitle:e.title,componentDescription:e.desc}),s("div",{ref:l,className:"relative",children:[t(m,{className:" rounded-2xl",imgClassName:"",source:e?.img?.url,alt:e?.img?.alt||""}),s("div",{className:n("text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col",{"aiui-dark":e.theme==="dark"}),children:[t(p,{html:e?.title,className:" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]"}),t(p,{html:e?.desc,className:" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]"})]})]})},b=o=>{const{data:e}=o,{title:l,img:d,mobileImg:a,list:r}=e;return t(v,{children:s("div",{className:"w-full",children:[s("div",{className:"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col",children:[t("div",{className:" desktop:w-[600px] lg-desktop:w-[800px]",children:l&&t(p,{html:l,className:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]"})}),s("div",{children:[d?.url&&t(m,{className:"desktop:block hidden w-[464px] rounded-2xl",imgClassName:"",source:e?.img?.url,alt:e?.img?.alt||""}),a?.url&&t(m,{className:"desktop:hidden block w-[224px] rounded-2xl",imgClassName:"",source:e?.mobileImg?.url,alt:e?.mobileImg?.alt||""})]})]}),t("div",{className:"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]",children:r.map((c,i)=>t(N,{index:i,item:c},i))})]})})};var A=g(b);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/AplusDesc/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\n\ntype AplusItem = {\n img: Img\n mobileImg: Img\n title: string\n desc: string\n theme: 'light' | 'dark'\n}\n\ntype AplusDescType = {\n data: {\n title: string\n img: Img\n mobileImg: Img\n list: AplusItem[]\n }\n className?: string\n}\n\nconst componentType = 'image'\nconst componentName = 'aplus_desc'\n\nconst Item = ({ index, item }: { index: number; item: AplusItem }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.desc,\n })\n\n return (\n <div ref={ref} className=\"relative\">\n <Picture className=\" rounded-2xl\" imgClassName=\"\" source={item?.img?.url} alt={item?.img?.alt || ''} />\n <div\n className={cn(\n 'text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col',\n {\n 'aiui-dark': item.theme === 'dark',\n }\n )}\n >\n <Text html={item?.title} className=\" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n <Text html={item?.desc} className=\" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]\" />\n </div>\n </div>\n )\n}\n\nconst AplusDesc = (props: AplusDescType) => {\n const { data
|
|
5
|
-
"mappings": "aA0CM,OAqBF,YAAAA,EArBE,OAAAC,EACA,QAAAC,MADA,oBAzCN,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,UAAAC,MAAc,QAoBvB,MAAMC,EAAgB,QAChBC,EAAgB,aAEhBC,EAAO,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,IAA0C,CACpE,MAAMC,EAAMN,EAAuB,IAAI,EAEvC,OAAAD,EAAYO,EAAK,CACf,cAAeL,EACf,cAAeC,EACf,SAAUE,EAAQ,EAClB,eAAgBC,EAAK,MACrB,qBAAsBA,EAAK,IAC7B,CAAC,EAGCX,EAAC,OAAI,IAAKY,EAAK,UAAU,WACvB,UAAAb,EAACI,EAAA,CAAQ,UAAU,eAAe,aAAa,GAAG,OAAQQ,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EACrGX,EAAC,OACC,UAAWC,EACT,+JACA,CACE,YAAaU,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAZ,EAACK,EAAA,CAAK,KAAMO,GAAM,MAAO,UAAU,8DAA8D,EACjGZ,EAACK,EAAA,CAAK,KAAMO,GAAM,KAAM,UAAU,8DAA8D,GAClG,GACF,CAEJ,EAEME,EAAaC,GAAyB,CAC1C,KAAM,CAAE,KAAAC,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Picture", "Text", "useExposure", "useRef", "componentType", "componentName", "Item", "index", "item", "ref", "AplusDesc", "props", "data", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\n\ntype AplusItem = {\n img: Img\n mobileImg: Img\n title: string\n desc: string\n theme: 'light' | 'dark'\n}\n\ntype AplusDescType = {\n data: {\n title: string\n img: Img\n mobileImg: Img\n list: AplusItem[]\n }\n className?: string\n}\n\nconst componentType = 'image'\nconst componentName = 'aplus_desc'\n\nconst Item = ({ index, item }: { index: number; item: AplusItem }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.desc,\n })\n\n return (\n <div ref={ref} className=\"relative\">\n <Picture className=\" rounded-2xl\" imgClassName=\"\" source={item?.img?.url} alt={item?.img?.alt || ''} />\n <div\n className={cn(\n 'text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col',\n {\n 'aiui-dark': item.theme === 'dark',\n }\n )}\n >\n <Text html={item?.title} className=\" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n <Text html={item?.desc} className=\" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]\" />\n </div>\n </div>\n )\n}\n\nconst AplusDesc = (props: AplusDescType) => {\n const { data } = props\n const { title, img, mobileImg, list } = data\n\n return (\n <>\n <div className=\"w-full\">\n <div className=\"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col\">\n <div className=\" desktop:w-[600px] lg-desktop:w-[800px]\">\n {title && (\n <Text\n html={title}\n className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n <div>\n {img?.url && (\n <Picture\n className=\"desktop:block hidden w-[464px] rounded-2xl\"\n imgClassName=\"\"\n source={data?.img?.url}\n alt={data?.img?.alt || ''}\n />\n )}\n {mobileImg?.url && (\n <Picture\n className=\"desktop:hidden block w-[224px] rounded-2xl\"\n imgClassName=\"\"\n source={data?.mobileImg?.url}\n alt={data?.mobileImg?.alt || ''}\n />\n )}\n </div>\n </div>\n <div className=\"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]\">\n {list.map((item, index) => (\n <Item key={index} index={index} item={item} />\n ))}\n </div>\n </div>\n </>\n )\n}\n\nexport default withLayout(AplusDesc)\n"],
|
|
5
|
+
"mappings": "aA0CM,OAqBF,YAAAA,EArBE,OAAAC,EACA,QAAAC,MADA,oBAzCN,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,UAAAC,MAAc,QAoBvB,MAAMC,EAAgB,QAChBC,EAAgB,aAEhBC,EAAO,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,IAA0C,CACpE,MAAMC,EAAMN,EAAuB,IAAI,EAEvC,OAAAD,EAAYO,EAAK,CACf,cAAeL,EACf,cAAeC,EACf,SAAUE,EAAQ,EAClB,eAAgBC,EAAK,MACrB,qBAAsBA,EAAK,IAC7B,CAAC,EAGCX,EAAC,OAAI,IAAKY,EAAK,UAAU,WACvB,UAAAb,EAACI,EAAA,CAAQ,UAAU,eAAe,aAAa,GAAG,OAAQQ,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EACrGX,EAAC,OACC,UAAWC,EACT,+JACA,CACE,YAAaU,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAZ,EAACK,EAAA,CAAK,KAAMO,GAAM,MAAO,UAAU,8DAA8D,EACjGZ,EAACK,EAAA,CAAK,KAAMO,GAAM,KAAM,UAAU,8DAA8D,GAClG,GACF,CAEJ,EAEME,EAAaC,GAAyB,CAC1C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,MAAAE,EAAO,IAAAC,EAAK,UAAAC,EAAW,KAAAC,CAAK,EAAIJ,EAExC,OACEhB,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAU,SACb,UAAAA,EAAC,OAAI,UAAU,qFACb,UAAAD,EAAC,OAAI,UAAU,0CACZ,SAAAiB,GACCjB,EAACK,EAAA,CACC,KAAMY,EACN,UAAU,iFACZ,EAEJ,EACAhB,EAAC,OACE,UAAAiB,GAAK,KACJlB,EAACI,EAAA,CACC,UAAU,6CACV,aAAa,GACb,OAAQY,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDG,GAAW,KACVnB,EAACI,EAAA,CACC,UAAU,6CACV,aAAa,GACb,OAAQY,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,GACF,EACAhB,EAAC,OAAI,UAAU,+EACZ,SAAAoB,EAAK,IAAI,CAACR,EAAMD,IACfX,EAACU,EAAA,CAAiB,MAAOC,EAAO,KAAMC,GAA3BD,CAAiC,CAC7C,EACH,GACF,EACF,CAEJ,EAEA,IAAOU,EAAQlB,EAAWW,CAAS",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Picture", "Text", "useExposure", "useRef", "componentType", "componentName", "Item", "index", "item", "ref", "AplusDesc", "props", "data", "title", "img", "mobileImg", "list", "AplusDesc_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{forwardRef as h,useEffect as k,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as E}from"../../shared/Styles.js";import{useMediaQuery as q}from"react-responsive";import{useExposure as M}from"../../hooks/useExposure.js";import{Swiper as S,SwiperSlide as B}from"swiper/react";import{Pagination as
|
|
1
|
+
"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{forwardRef as h,useEffect as k,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as E}from"../../shared/Styles.js";import{useMediaQuery as q}from"react-responsive";import{useExposure as M}from"../../hooks/useExposure.js";import{Swiper as S,SwiperSlide as B}from"swiper/react";import{Pagination as I,FreeMode as j,Mousewheel as A}from"swiper/modules";import P from"../Title/index.js";const T="copy",L="store_benefits",H=(e,a)=>{const r=[];for(let o=0;o<e.length;o+=a)r.push(e.slice(o,o+a));return r},D=h(({data:{items:e=[],title:a},className:r},o)=>{const[c,v]=w(!1),d=q({query:"(max-width: 768px)"}),m=f(null),n=f(null);N(o,()=>n.current),M(n,{componentType:T,componentName:L}),k(()=>{v(d)},[d]);const g=c?H(e,3):e;return p("div",{ref:n,className:i("brand-equity-wrapper w-full",r),children:[a&&t(P,{data:{title:a}}),c?p(S,{className:i(r),modules:[j,A,I],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:m.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,s)=>t(B,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((b,u)=>t(y,{data:b,index:u},u))},"SwiperSlide"+s)),t("div",{ref:m,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,s)=>t(y,{data:l,index:s},s))})]})}),y=({data:e,index:a})=>p("div",{className:i("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(a)},"rounded-box"),children:[p("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,o)=>t("div",{className:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar?.url,alt:r.avatar?.alt,className:"size-full object-cover"})},o))}):t(x,{className:"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]",children:e.description})]});var O=E(D);export{O 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 { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], 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 BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(({ data: { items = [], title }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => <BrandEquityItem key={index} data={item} index={index} />)}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n})\n\nconst BrandEquityItem = ({ data, index }: { data: BrandEquityItemProps; index: number }) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'box-border flex w-full flex-col bg-white p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n 'rounded-box'\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] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], 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 BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(({ data: { items = [], title }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => <BrandEquityItem key={index} data={item} index={index} />)}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n})\n\nconst BrandEquityItem = ({ data, index }: { data: BrandEquityItemProps; index: number }) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'box-border flex w-full flex-col bg-white p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n 'rounded-box'\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] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {data?.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:h-[36px] h-[30px] shrink-0 object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nexport default withLayout(BrandEquity)\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withLayout", "useMediaQuery", "useExposure", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "title", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as
|
|
1
|
+
"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as p,SwiperSlide as d}from"swiper/react";import{Pagination as f,FreeMode as c,Mousewheel as w}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const s=n.forwardRef(({data:e,Slide:t,id:a,isHalf:r},m)=>i(p,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[c,w,f],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:r?2:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:r?2:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((l,o)=>i(d,{className:"!h-[unset]",children:i(t,{data:l,configuration:{...e?.configuration,index:o}})},a+"SwiperSlide"+o))}));s.displayName="SwiperBox";var B=s;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
|
|
5
|
-
"mappings": "aA6DU,cAAAA,MAAA,oBA5DV,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,
|
|
6
|
-
"names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "
|
|
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 id: string\n className?: string\n isHalf?: boolean\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, isHalf }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isHalf ? 2 : 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isHalf ? 2 : 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: 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, index: jIndex }} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "aA6DU,cAAAA,MAAA,oBA5DV,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,OAAAC,CAAO,EAAGC,IAE7FZ,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,cAAeO,EAAS,EAAI,EAC5B,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,EAC5B,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGH,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACK,EAAMC,IACtBd,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMI,EAAM,cAAe,CAAE,GAAGL,GAAM,cAAe,MAAOM,CAAO,EAAG,GAD7DJ,EAAK,cAAgBI,CAEvC,CACD,EACH,CAEH,EAEDP,EAAU,YAAc,YAExB,IAAOQ,EAAQR",
|
|
6
|
+
"names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "isHalf", "ref", "item", "jIndex", "SwiperCategory_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as a,jsxs as d}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as a,jsxs as d}from"react/jsx-runtime";import k,{useImperativeHandle as C,useRef as c}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as w}from"../../shared/Styles.js";import N from"../Title/index.js";import f from"./SwiperCategory.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as v}from"../../shared/trackUrlRef.js";import{Heading as I}from"../../components/heading.js";const l="image",m="category_banner",$=(e,o)=>{const t=[];for(let r=0;r<e.length;r+=o)t.push(e.slice(r,r+o));return t},_=({data:e,configuration:o})=>{const t=c(null);return y(t,{componentType:l,componentName:m,componentTitle:e?.name,position:o?.index+1}),d("div",{ref:t,className:i("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",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("div",{className:"transition-all duration-300 group-hover:scale-110",children:a("a",{"aria-label":e?.name,href:v(e?.link,`${l}_${m}`),"data-headless-type-name":`${l}#${m}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>o?.event?.primaryButton(e,o?.index),children:a(x,{alt:e?.image?.alt||"",source:e?.image?.url||"",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"})})}),a(I,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]})},S=({data:e,configuration:o,index:t})=>{const r=c(null);y(r,{componentType:l,componentName:m,componentTitle:e?.name,position:o?.index+1});const s=(o?.totalCategories??0)<6,n=t===0;return d("div",{ref:r,className:i("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 duration-300",s?i("p-4",n?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("a",{href:v(e?.link,`${l}_${m}`),"data-headless-type-name":`${l}#${m}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${o?.index+1}`,onClick:()=>o?.event?.primaryButton(e,o?.index+1),children:a(x,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:i("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",s?i(n?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),a("p",{className:i("text-info-primary text-center text-sm font-bold",s?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},D=({data:e,configuration:o})=>a("div",{className:"flex h-full flex-col gap-3",children:e?.map((t,r)=>a(S,{index:r,data:t,configuration:o},r))}),H=k.forwardRef((e,o)=>{const{data:t,className:r="",key:p,event:s}=e,n=(t?.isShowSelect?t?.products:t?.productData)||[],u=n.length>5,g=n.length,b=$(n,u?3:5),h=c(null);return C(o,()=>h.current),d("div",{ref:h,className:i("w-full overflow-hidden",r,{"aiui-dark":t?.theme==="dark"}),children:[t?.title&&a(N,{data:{title:t?.title},className:"text-4xl"}),a("div",{className:"tablet:block hidden",children:a(f,{id:`Category${p}`,Slide:_,data:{list:n,configuration:{shape:t?.shape,event:s,title:t?.title,totalCategories:g}}})}),a("div",{className:"tablet:hidden block",children:a(f,{id:`Category1${p}`,Slide:D,data:{list:b,configuration:{shape:t?.shape,event:s,title:t?.title,totalCategories:g}},isHalf:u})}),a("div",{className:"h-7"})]})});var F=w(H);export{F as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|