@anker-in/headless-ui 1.1.97 → 1.1.98-alpha.1777465616268
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/ActiveShelf/index.js.map +2 -2
- package/dist/cjs/biz-components/ActivityMechanism/index.js +1 -1
- package/dist/cjs/biz-components/ActivityMechanism/index.js.map +3 -3
- package/dist/cjs/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/cjs/biz-components/ActivitySchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/AiuiProvider/index.js +1 -1
- package/dist/cjs/biz-components/AiuiProvider/index.js.map +3 -3
- package/dist/cjs/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/cjs/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/BrandCardLink/BrandCardLink.js +1 -1
- package/dist/cjs/biz-components/BrandCardLink/BrandCardLink.js.map +3 -3
- 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.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/EventSchedule/index.js +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js +1 -1
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map +3 -3
- package/dist/cjs/biz-components/GiftBox/index.js +1 -1
- package/dist/cjs/biz-components/GiftBox/index.js.map +2 -2
- package/dist/cjs/biz-components/GiftShelf/index.js +1 -1
- package/dist/cjs/biz-components/GiftShelf/index.js.map +3 -3
- package/dist/cjs/biz-components/GiftTierShelf/index.js +1 -1
- package/dist/cjs/biz-components/GiftTierShelf/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/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/MobileTextLinksMenu.d.ts +12 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileTextLinksMenu.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileTextLinksMenu.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/TextLinksDropdown.d.ts +10 -0
- package/dist/cjs/biz-components/HeaderNavigation/TextLinksDropdown.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/TextLinksDropdown.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/types.d.ts +8 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.d.ts +1 -0
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/ImageOverlayShelf/index.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.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 +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/cjs/biz-components/LotteryShared/ErrorModal.d.ts +4 -0
- package/dist/cjs/biz-components/LotteryShared/ErrorModal.js.map +2 -2
- package/dist/cjs/biz-components/LotteryShared/MyRewardsModal.d.ts +13 -13
- package/dist/cjs/biz-components/LotteryShared/MyRewardsModal.js +1 -1
- package/dist/cjs/biz-components/LotteryShared/MyRewardsModal.js.map +3 -3
- package/dist/cjs/biz-components/LotteryShared/WinnerModal.d.ts +1 -1
- package/dist/cjs/biz-components/LotteryShared/WinnerModal.js +1 -1
- package/dist/cjs/biz-components/LotteryShared/WinnerModal.js.map +3 -3
- package/dist/cjs/biz-components/LotteryShared/types.d.ts +14 -0
- package/dist/cjs/biz-components/LotteryShared/types.js +1 -1
- package/dist/cjs/biz-components/LotteryShared/types.js.map +2 -2
- package/dist/cjs/biz-components/Marquee/Marquee.d.ts +11 -4
- package/dist/cjs/biz-components/Marquee/Marquee.js +1 -1
- package/dist/cjs/biz-components/Marquee/Marquee.js.map +3 -3
- package/dist/cjs/biz-components/Marquee/index.d.ts +1 -1
- package/dist/cjs/biz-components/Marquee/index.js +1 -1
- package/dist/cjs/biz-components/Marquee/index.js.map +2 -2
- package/dist/cjs/biz-components/Marquee/type.d.ts +19 -4
- package/dist/cjs/biz-components/Marquee/type.js +1 -1
- package/dist/cjs/biz-components/Marquee/type.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaShelf/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.d.ts +8 -0
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js +2 -0
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +7 -0
- package/dist/cjs/biz-components/MediaTextOverlay/index.d.ts +2 -0
- package/dist/cjs/biz-components/MediaTextOverlay/index.js +2 -0
- package/dist/cjs/biz-components/MediaTextOverlay/index.js.map +7 -0
- package/dist/cjs/biz-components/MediaTextOverlay/types.d.ts +22 -0
- package/dist/cjs/biz-components/MediaTextOverlay/types.js +2 -0
- package/dist/cjs/biz-components/MediaTextOverlay/types.js.map +7 -0
- package/dist/cjs/biz-components/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/cjs/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/cjs/biz-components/ProductHero/ProductHero.js.map +3 -3
- package/dist/cjs/biz-components/ProductLottery/index.js +1 -1
- package/dist/cjs/biz-components/ProductLottery/index.js.map +2 -2
- package/dist/cjs/biz-components/ProductLottery/types.d.ts +62 -5
- package/dist/cjs/biz-components/ProductLottery/types.js +1 -1
- package/dist/cjs/biz-components/ProductLottery/types.js.map +2 -2
- package/dist/cjs/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/cjs/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/cjs/biz-components/PromotionalBar/index.js +1 -1
- package/dist/cjs/biz-components/PromotionalBar/index.js.map +3 -3
- package/dist/cjs/biz-components/SceneShelfV3/index.js.map +2 -2
- package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/biz-components/Subscribe/index.js +1 -1
- package/dist/cjs/biz-components/Subscribe/index.js.map +2 -2
- package/dist/cjs/biz-components/SwiperBox/index.js +1 -1
- package/dist/cjs/biz-components/SwiperBox/index.js.map +3 -3
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +3 -3
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/WebPushPopup/index.d.ts +44 -0
- package/dist/cjs/biz-components/WebPushPopup/index.js +2 -0
- package/dist/cjs/biz-components/WebPushPopup/index.js.map +7 -0
- package/dist/cjs/biz-components/WheelLottery/WinnerModal.d.ts +1 -1
- package/dist/cjs/biz-components/WheelLottery/WinnerModal.js +1 -1
- package/dist/cjs/biz-components/WheelLottery/WinnerModal.js.map +3 -3
- package/dist/cjs/biz-components/WheelLottery/index.js +1 -1
- package/dist/cjs/biz-components/WheelLottery/index.js.map +3 -3
- package/dist/cjs/biz-components/index.d.ts +6 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/Countdown.js +1 -1
- package/dist/cjs/components/Countdown.js.map +3 -3
- package/dist/cjs/components/button.js.map +2 -2
- package/dist/cjs/components/checkbox.js.map +2 -2
- package/dist/cjs/components/link.js +1 -1
- package/dist/cjs/components/link.js.map +2 -2
- package/dist/cjs/components/progress.js.map +2 -2
- package/dist/cjs/components/radio.js.map +2 -2
- package/dist/cjs/helpers/index.d.ts +1 -1
- package/dist/cjs/helpers/index.js +1 -1
- package/dist/cjs/helpers/index.js.map +2 -2
- package/dist/cjs/helpers/isLexicalEmpty.d.ts +5 -0
- package/dist/cjs/helpers/isLexicalEmpty.js +1 -1
- package/dist/cjs/helpers/isLexicalEmpty.js.map +3 -3
- package/dist/cjs/hooks/useEmarsysWebPush.d.ts +111 -0
- package/dist/cjs/hooks/useEmarsysWebPush.js +2 -0
- package/dist/cjs/hooks/useEmarsysWebPush.js.map +7 -0
- package/dist/cjs/hooks/useProductListTrack.d.ts +43 -0
- package/dist/cjs/hooks/useProductListTrack.js +2 -0
- package/dist/cjs/hooks/useProductListTrack.js.map +7 -0
- package/dist/cjs/stories/ClassNamesVisualizer.d.ts +17 -0
- package/dist/cjs/stories/ClassNamesVisualizer.js +2 -0
- package/dist/cjs/stories/ClassNamesVisualizer.js.map +7 -0
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/ActiveShelf/index.js.map +2 -2
- package/dist/esm/biz-components/ActivityMechanism/index.js +1 -1
- package/dist/esm/biz-components/ActivityMechanism/index.js.map +3 -3
- package/dist/esm/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/esm/biz-components/ActivitySchedule/index.js.map +3 -3
- package/dist/esm/biz-components/AiuiProvider/index.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.js.map +3 -3
- package/dist/esm/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/esm/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/BrandCardLink/BrandCardLink.js +1 -1
- package/dist/esm/biz-components/BrandCardLink/BrandCardLink.js.map +3 -3
- 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.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/EventSchedule/index.js +1 -1
- package/dist/esm/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js +1 -1
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map +3 -3
- package/dist/esm/biz-components/GiftBox/index.js +1 -1
- package/dist/esm/biz-components/GiftBox/index.js.map +2 -2
- package/dist/esm/biz-components/GiftShelf/index.js +1 -1
- package/dist/esm/biz-components/GiftShelf/index.js.map +3 -3
- package/dist/esm/biz-components/GiftTierShelf/index.js +1 -1
- package/dist/esm/biz-components/GiftTierShelf/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +3 -3
- 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/MobileTextLinksMenu.d.ts +12 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileTextLinksMenu.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileTextLinksMenu.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/TextLinksDropdown.d.ts +10 -0
- package/dist/esm/biz-components/HeaderNavigation/TextLinksDropdown.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/TextLinksDropdown.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +8 -1
- 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/HeaderNavigation/withCategory.d.ts +1 -0
- package/dist/esm/biz-components/HeaderNavigation/withCategory.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/withCategory.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/ImageOverlayShelf/index.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.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 +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/esm/biz-components/LotteryShared/ErrorModal.d.ts +4 -0
- package/dist/esm/biz-components/LotteryShared/ErrorModal.js.map +2 -2
- package/dist/esm/biz-components/LotteryShared/MyRewardsModal.d.ts +13 -13
- package/dist/esm/biz-components/LotteryShared/MyRewardsModal.js +1 -1
- package/dist/esm/biz-components/LotteryShared/MyRewardsModal.js.map +3 -3
- package/dist/esm/biz-components/LotteryShared/WinnerModal.d.ts +1 -1
- package/dist/esm/biz-components/LotteryShared/WinnerModal.js +1 -1
- package/dist/esm/biz-components/LotteryShared/WinnerModal.js.map +3 -3
- package/dist/esm/biz-components/LotteryShared/types.d.ts +14 -0
- package/dist/esm/biz-components/LotteryShared/types.js.map +2 -2
- package/dist/esm/biz-components/Marquee/Marquee.d.ts +11 -4
- package/dist/esm/biz-components/Marquee/Marquee.js +1 -1
- package/dist/esm/biz-components/Marquee/Marquee.js.map +3 -3
- package/dist/esm/biz-components/Marquee/index.d.ts +1 -1
- package/dist/esm/biz-components/Marquee/index.js +1 -1
- package/dist/esm/biz-components/Marquee/index.js.map +3 -3
- package/dist/esm/biz-components/Marquee/type.d.ts +19 -4
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaShelf/index.js.map +2 -2
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.d.ts +8 -0
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js +2 -0
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +7 -0
- package/dist/esm/biz-components/MediaTextOverlay/index.d.ts +2 -0
- package/dist/esm/biz-components/MediaTextOverlay/index.js +2 -0
- package/dist/esm/biz-components/MediaTextOverlay/index.js.map +7 -0
- package/dist/esm/biz-components/MediaTextOverlay/types.d.ts +22 -0
- package/dist/esm/biz-components/MediaTextOverlay/types.js +1 -0
- package/dist/esm/biz-components/MediaTextOverlay/types.js.map +7 -0
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/esm/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/esm/biz-components/ProductHero/ProductHero.js.map +3 -3
- package/dist/esm/biz-components/ProductLottery/index.js +1 -1
- package/dist/esm/biz-components/ProductLottery/index.js.map +2 -2
- package/dist/esm/biz-components/ProductLottery/types.d.ts +62 -5
- package/dist/esm/biz-components/ProductLottery/types.js.map +2 -2
- package/dist/esm/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/esm/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/esm/biz-components/PromotionalBar/index.js +1 -1
- package/dist/esm/biz-components/PromotionalBar/index.js.map +3 -3
- package/dist/esm/biz-components/SceneShelfV3/index.js.map +2 -2
- package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/Subscribe/index.js +1 -1
- package/dist/esm/biz-components/Subscribe/index.js.map +2 -2
- package/dist/esm/biz-components/SwiperBox/index.js +1 -1
- package/dist/esm/biz-components/SwiperBox/index.js.map +3 -3
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +3 -3
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/WebPushPopup/index.d.ts +44 -0
- package/dist/esm/biz-components/WebPushPopup/index.js +2 -0
- package/dist/esm/biz-components/WebPushPopup/index.js.map +7 -0
- package/dist/esm/biz-components/WheelLottery/WinnerModal.d.ts +1 -1
- package/dist/esm/biz-components/WheelLottery/WinnerModal.js +1 -1
- package/dist/esm/biz-components/WheelLottery/WinnerModal.js.map +3 -3
- package/dist/esm/biz-components/WheelLottery/index.js +1 -1
- package/dist/esm/biz-components/WheelLottery/index.js.map +2 -2
- package/dist/esm/biz-components/index.d.ts +6 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +3 -3
- package/dist/esm/components/Countdown.js +1 -1
- package/dist/esm/components/Countdown.js.map +3 -3
- package/dist/esm/components/button.js.map +2 -2
- package/dist/esm/components/checkbox.js.map +2 -2
- package/dist/esm/components/link.js +1 -1
- package/dist/esm/components/link.js.map +2 -2
- package/dist/esm/components/progress.js.map +2 -2
- package/dist/esm/components/radio.js.map +2 -2
- package/dist/esm/helpers/index.d.ts +1 -1
- package/dist/esm/helpers/index.js +1 -1
- package/dist/esm/helpers/index.js.map +3 -3
- package/dist/esm/helpers/isLexicalEmpty.d.ts +5 -0
- package/dist/esm/helpers/isLexicalEmpty.js +1 -1
- package/dist/esm/helpers/isLexicalEmpty.js.map +3 -3
- package/dist/esm/hooks/useEmarsysWebPush.d.ts +111 -0
- package/dist/esm/hooks/useEmarsysWebPush.js +2 -0
- package/dist/esm/hooks/useEmarsysWebPush.js.map +7 -0
- package/dist/esm/hooks/useProductListTrack.d.ts +43 -0
- package/dist/esm/hooks/useProductListTrack.js +2 -0
- package/dist/esm/hooks/useProductListTrack.js.map +7 -0
- package/dist/esm/stories/ClassNamesVisualizer.d.ts +17 -0
- package/dist/esm/stories/ClassNamesVisualizer.js +2 -0
- package/dist/esm/stories/ClassNamesVisualizer.js.map +7 -0
- package/package.json +4 -2
- package/static/emarsys-service-worker.js +31 -0
- package/style.css +148 -6
- package/tailwind.config.js +10 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var k=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var o in t)k(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of P(t))!V.call(e,l)&&l!==o&&k(e,l,{get:()=>t[l],enumerable:!(m=z(t,l))||m.enumerable});return e};var h=(e,t,o)=>(o=e!=null?j(O(e)):{},E(t||!e||!e.__esModule?k(o,"default",{value:e,enumerable:!0}):o,e)),q=e=>E(k({},"__esModule",{value:!0}),e);var G={};W(G,{default:()=>F});module.exports=q(G);var n=require("react/jsx-runtime"),D=h(require("../Title/index.js")),s=require("../../helpers/utils.js"),H=h(require("../../components/picture.js")),N=h(require("../../components/button.js")),S=h(require("../SwiperBox/index.js")),C=require("../../shared/Styles.js"),i=h(require("react")),L=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js"),M=require("../AiuiProvider/index.js"),A=h(require("../../shared/throttle.js")),R=require("../../components/heading.js");const c="image",d="scene_banner",J=({item:e,idx:t,itemShape:o,hoverIndex:m,getRef:l,handleSwiperItemClick:g,contentWidth:p,primaryButton:u,event:f,data:v,accordionRef:w})=>{const T=m===t,$=T?8:1,{trackingData:_}=(0,M.useAiuiContext)(),x=_?.contextHandle||"";return(0,L.useExposure)({current:w.current[t]},{componentType:c,componentName:d,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),(0,n.jsxs)("div",{style:{flex:`${$} 1 0%`,transition:"all 0.6s"},ref:r=>{r&&l(t,r)},className:(0,s.cn)("relative cursor-pointer overflow-hidden",o==="round"?"rounded-2xl":""),onMouseEnter:()=>g(t),onClick:()=>{g(t)},children:[(0,n.jsx)("a",{href:(0,y.trackUrlRef)(e?.imgLink,`${x}_${c}_${d}`),"data-headless-type-name":`${c}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:(0,n.jsx)(H.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}),(0,n.jsxs)("div",{style:{width:p},className:(0,s.cn)("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",T&&p?"opacity-100":"opacity-0"),children:[(0,n.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,n.jsx)(R.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),(0,n.jsx)(R.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),u&&(0,n.jsxs)(N.default,{className:(0,s.cn)("mb-1.5 font-bold"),as:"a",href:(0,y.trackUrlRef)(e?.link,`${x}_${c}_${d}`),"data-headless-type-name":`${c}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${u}`,onClick:()=>f?.primaryButton?.(v,t),children:[u,(0,n.jsx)("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},U=({data:e,configuration:t})=>{const o=(0,i.useRef)(null),{trackingData:m}=(0,M.useAiuiContext)(),l=m?.contextHandle||"";return(0,L.useExposure)(o,{componentType:c,componentName:d,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),(0,n.jsxs)("div",{ref:o,className:(0,s.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[(0,n.jsx)("a",{href:(0,y.trackUrlRef)(e?.imgLink,`${l}_${c}_${d}`),"data-headless-type-name":`${c}#${d}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-position":`''#${t?.index+1}`,children:(0,n.jsx)(H.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}),(0,n.jsxs)("div",{className:(0,s.cn)("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[(0,n.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,n.jsx)("h3",{className:"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]",dangerouslySetInnerHTML:{__html:e?.title}}),(0,n.jsx)("h4",{className:"text-info-primary line-clamp-2 text-sm font-bold",dangerouslySetInnerHTML:{__html:e?.subTitle}})]}),t?.primaryButton&&(0,n.jsx)(N.default,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:(0,s.cn)("text-info-primary text-sm font-bold"),href:(0,y.trackUrlRef)(e.link,`${l}_${c}_${d}`),"data-headless-type-name":`${c}#${d}`,"data-headless-nav-position":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},B=i.default.forwardRef(({data:e,autoplay:t={enabled:!1,loop:!1,interval:1500},className:o="",event:m,...l},g)=>{const[p,u]=(0,i.useState)(0),f=(0,i.useRef)(0),v=(0,i.useRef)([]),[w,T]=(0,i.useState)(0),$=(0,i.useRef)(null);(0,i.useImperativeHandle)(g,()=>$.current);const _=(r,a)=>{a&&(v.current[r]=a)};(0,i.useEffect)(()=>{const r=()=>{v.current[f.current]&&T(v.current[f.current].offsetWidth)};r();const a=(0,A.default)(r,300);return window.addEventListener("resize",a),()=>window.removeEventListener("resize",a)},[]);const x=(0,i.useCallback)(r=>{p!==r&&(u(r),f.current=r)},[e?.products,p]);return(0,i.useEffect)(()=>{let r;return t?.enabled&&(r=setInterval(()=>{u(a=>{const I=a??0;let b;if(t.loop!==!1)b=(I+1)%e?.products?.length;else if(b=I+1,b>=e?.products?.length)return b=e?.products?.length-1,r&&clearInterval(r),I;return f.current=b,b})},t?.interval)),()=>{r&&clearInterval(r)}},[t?.enabled,t?.interval,t?.loop,e?.products?.length,x]),(0,n.jsxs)("div",{...l,ref:$,children:[e?.title&&(0,n.jsx)(D.default,{data:{title:e?.title}}),(0,n.jsx)("div",{className:(0,s.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,n.jsx)("div",{className:(0,s.cn)("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",o),children:e?.products?.map((r,a)=>(0,n.jsx)(J,{item:r,idx:a,itemShape:e?.itemShape,hoverIndex:p,getRef:_,handleSwiperItemClick:x,contentWidth:w,primaryButton:e?.primaryButton,event:m,data:e,accordionRef:v},a))})}),(0,n.jsx)("div",{className:(0,s.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,n.jsx)(S.default,{className:(0,s.cn)("h-[400px] !overflow-visible",o),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:m,title:e?.title}},Slide:U,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});B.displayName="AccordionCards";var F=(0,C.withLayout)(B);
|
|
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 = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\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 /**\n * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n */\n autoplay?: {\n /**\n * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n */\n enabled: boolean\n /**\n * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n */\n loop?: boolean\n /**\n * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n */\n interval?: number\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 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 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 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 {primaryButton && (\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 )}\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-position={`''#${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 <h3\n className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n ></h3>\n <h4\n className=\"text-info-primary line-clamp-2 text-sm font-bold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n ></h4>\n </div>\n\n {configuration?.primaryButton && (\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-position={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\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) return\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 useEffect(() => {\n let autoPlayTimer: NodeJS.Timeout\n if (autoplay?.enabled) {\n autoPlayTimer = setInterval(() => {\n setHoverIndex(prev => {\n const currentIndex = prev ?? 0\n let nextIndex: number\n\n if (autoplay.loop !== false) {\n // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n nextIndex = (currentIndex + 1) % data?.products?.length\n } else {\n // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n nextIndex = currentIndex + 1\n if (nextIndex >= data?.products?.length) {\n nextIndex = data?.products?.length - 1\n // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n }\n }\n\n hoverIndexRef.current = nextIndex\n return nextIndex\n })\n }, autoplay?.interval)\n }\n return () => {\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n }\n }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n return (\n <div {...rest} ref={innerRef}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div 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 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 </div>\n )\n }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "Picture", "Button", "MobileItem", "configuration", "ref", "AccordionCards", "React", "autoplay", "className", "rest", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "throttle", "autoPlayTimer", "prev", "currentIndex", "nextIndex", "Title", "SwiperBox"]
|
|
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 { useAiuiContext } from '../AiuiProvider/index.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 = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\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 /**\n * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n */\n autoplay?: {\n /**\n * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n */\n enabled: boolean\n /**\n * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n */\n loop?: boolean\n /**\n * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n */\n interval?: number\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 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 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 const { trackingData } = useAiuiContext()\n const contextHandle = trackingData?.contextHandle || ''\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 onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <a\n href={trackUrlRef(item?.imgLink, `${contextHandle}_${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 {primaryButton && (\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${contextHandle}_${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 )}\n </div>\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const { trackingData } = useAiuiContext()\n const contextHandle = trackingData?.contextHandle || ''\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, `${contextHandle}_${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-position={`''#${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 <h3\n className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n ></h3>\n <h4\n className=\"text-info-primary line-clamp-2 text-sm font-bold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n ></h4>\n </div>\n\n {configuration?.primaryButton && (\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, `${contextHandle}_${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\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) return\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 useEffect(() => {\n let autoPlayTimer: NodeJS.Timeout\n if (autoplay?.enabled) {\n autoPlayTimer = setInterval(() => {\n setHoverIndex(prev => {\n const currentIndex = prev ?? 0\n let nextIndex: number\n\n if (autoplay.loop !== false) {\n // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n nextIndex = (currentIndex + 1) % data?.products?.length\n } else {\n // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n nextIndex = currentIndex + 1\n if (nextIndex >= data?.products?.length) {\n nextIndex = data?.products?.length - 1\n // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n }\n }\n\n hoverIndexRef.current = nextIndex\n return nextIndex\n })\n }, autoplay?.interval)\n }\n return () => {\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n }\n }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n return (\n <div {...rest} ref={innerRef}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div 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 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 </div>\n )\n }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "trackingData", "contextHandle", "el", "Picture", "Button", "MobileItem", "configuration", "ref", "AccordionCards", "React", "autoplay", "className", "rest", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "throttle", "autoPlayTimer", "prev", "currentIndex", "nextIndex", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ActiveShelf/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Text, Heading, Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\n// Import Swiper styles\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport {\n ProductCard,\n type ProductCardData,\n type ActiveShelfSemanticName,\n type StockDisplayMode,\n} from './ProductCard.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'shelf'\nconst componentName = 'active_shelf'\n\n/**\n * \u7EC4\u4EF6\u5E03\u5C40\u6A21\u5F0F\n */\nexport type ActiveShelfLayoutMode = 'flex' | 'horizontal'\n\n/**\n * Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00\n */\nexport type CodeChannelConfig = string\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]\"\n >\n <path\n d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]\"\n >\n <path\n d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n/**\n * \u4EA7\u54C1\u5206\u7EC4Tab\u6570\u636E\u63A5\u53E3\n */\nexport interface ProductTab {\n /** Tab ID */\n id: string\n /** Tab \u6807\u9898 */\n tab: string\n /** \u8BE5\u5206\u7EC4\u4E0B\u7684\u4EA7\u54C1\u6570\u636E */\n data: ProductCardData[]\n}\n\n/**\n * ActiveShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ActiveShelfData {\n theme?: 'light' | 'dark'\n /** \u7EC4\u4EF6\u6807\u9898 */\n title?: string\n /** \u7EC4\u4EF6\u63CF\u8FF0 */\n description?: string\n /** \u5206\u7EC4\u4EA7\u54C1Tab\u5217\u8868 */\n productsTab?: ProductTab[]\n /** \u662F\u5426\u663E\u793A Tab\uFF08\u9ED8\u8BA4\uFF1Atrue\uFF09 */\n isShowTab?: boolean\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n secondaryButtonFun: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n primaryButtonFun: ButtonFunctionType\n /** \u5E03\u5C40\u6A21\u5F0F\uFF1A\u7F51\u683C\u5E03\u5C40\u6216\u6A2A\u5411\u6ED1\u52A8 */\n layoutMode?: ActiveShelfLayoutMode\n /** Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00 */\n codeChannel?: CodeChannelConfig\n /** \u662F\u5426\u5C55\u793A\u4F1A\u5458\u4EF7\u683C */\n showMemberPrice?: boolean\n /** \u662F\u5426\u5C55\u793A\u6298\u6263\u6807\u7B7E */\n showDiscount?: boolean\n /** \u662F\u5426\u5C55\u793A\u6807\u7B7E\u7CFB\u7EDF */\n showTags?: boolean\n /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n stockDisplayMode?: StockDisplayMode\n /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n stockThresholdValue?: number\n /**\n * \u5E93\u5B58\u6587\u672C\u6A21\u677F\uFF0C\u652F\u6301 {count} \u5360\u4F4D\u7B26\n */\n stockDisplayText?: string\n /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n showOriginalPrice?: boolean\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n /**\n * \u4EA7\u54C1\u5217\u8868\uFF08\u5F53\u4E0D\u4F7F\u7528 Tab \u5206\u7EC4\u65F6\u53EF\u76F4\u63A5\u4F20\u5165\u4EA7\u54C1\u5217\u8868\uFF09\n */\n productsCard: ProductCardData[]\n}\n\nexport interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: ActiveShelfData\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n}\n\n/**\n * ActiveShelf \u590D\u5408\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface ActiveShelfComponent extends React.ForwardRefExoticComponent<\n ActiveShelfProps & React.RefAttributes<HTMLDivElement>\n> {\n /** \u72EC\u7ACB\u7684 ProductCard \u7EC4\u4EF6 */\n ProductCard: typeof ProductCard\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 Props\n */\ninterface ProductsListProps {\n products: ProductCardData[]\n layoutMode: ActiveShelfLayoutMode\n className?: string\n copy?: CopyConfig\n showTags?: boolean\n stockDisplayMode?: StockDisplayMode\n stockThresholdValue?: number\n onLearnMore?: (product: ProductCardData) => void\n onShopNow?: (product: ProductCardData) => void\n onAddToCart?: (product: ProductCardData) => void\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n showOriginalPrice?: boolean\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 - \u652F\u6301\u7F51\u683C\u548C\u6A2A\u5411\u6ED1\u52A8\u4E24\u79CD\u5E03\u5C40\n */\nconst ProductsList = React.forwardRef<HTMLDivElement, ProductsListProps>(\n (\n {\n products,\n layoutMode,\n className,\n copy,\n showTags,\n stockDisplayMode,\n stockThresholdValue,\n onLearnMore,\n onShopNow,\n onAddToCart,\n classNames,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n showOriginalPrice,\n },\n ref\n ) => {\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n // \u9884\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u9009\u62E9\u5668\uFF0C\u907F\u514D\u591A\u6B21\u62FC\u63A5\n const nextButtonClass = `swiper-button-next-custom-${id}`\n const prevButtonClass = `swiper-button-prev-custom-${id}`\n\n // Swiper \u5BFC\u822A\u72B6\u6001\n const [swiperState, setSwiperState] = React.useState({\n isBeginning: true,\n isEnd: false,\n })\n\n // Swiper \u5B9E\u4F8B\u5F15\u7528\n const swiperRef = React.useRef<any>(null)\n\n // \u8BA1\u7B97\u5E76\u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u9AD8\u9AD8\u5EA6\n const equalizeSlideHeights = React.useCallback(() => {\n const swiper = swiperRef.current\n if (!swiper?.slides || swiper.slides.length === 0) return\n\n // \u5148\u91CD\u7F6E\u6240\u6709 slide \u9AD8\u5EA6\u4EE5\u83B7\u53D6\u771F\u5B9E\u5185\u5BB9\u9AD8\u5EA6\n swiper.slides.forEach((slide: HTMLElement) => {\n slide.style.height = 'auto'\n })\n\n // \u8BA1\u7B97\u6700\u5927\u9AD8\u5EA6\n // @ts-ignore\n const heights = Array.from(swiper.slides).map((slide: HTMLElement) => slide.scrollHeight)\n const maxHeight = Math.max(...heights)\n\n // \u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u5927\u9AD8\u5EA6\n if (maxHeight > 0) {\n swiper.slides.forEach((slide: HTMLElement) => {\n slide.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n // \u76D1\u542C\u7A97\u53E3 resize \u91CD\u65B0\u8BA1\u7B97\u9AD8\u5EA6\n React.useEffect(() => {\n const handleResize = () => {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u66F4\u65B0\u5B8C\u6210\n requestAnimationFrame(equalizeSlideHeights)\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [equalizeSlideHeights])\n\n if (products?.length === 0) {\n return null\n }\n\n return (\n <div ref={ref} className={className}>\n {layoutMode === 'flex' ? (\n /* \u7F51\u683C\u5E03\u5C40 */\n <div className=\"lg-desktop:gap-4 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 laptop:gap-4 grid grid-cols-1 justify-start gap-3\">\n {products.map((product, index) => (\n <ProductCard\n key={product.shopify_id + '-' + product.sku || index}\n product={product}\n className=\"shrink-0\"\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n copy={copy}\n />\n ))}\n </div>\n ) : (\n /* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */\n <div className=\"group relative\">\n <Swiper\n modules={[Navigation]}\n spaceBetween={16}\n slidesPerView=\"auto\"\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n // \u5EF6\u8FDF\u6267\u884C\u4EE5\u786E\u4FDD\u5185\u5BB9\u6E32\u67D3\u5B8C\u6210\n setTimeout(equalizeSlideHeights, 100)\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n className=\"!overflow-visible\"\n >\n {products.map((product, index) => (\n <SwiperSlide\n key={product.shopify_id + '-' + product.sku || index}\n className=\"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] !w-[296px] overflow-hidden\"\n >\n <ProductCard\n product={product}\n className=\"w-full max-w-full\"\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n copy={copy}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE - \u9ED8\u8BA4\u9690\u85CF\uFF0Chover \u65F6\u663E\u793A\uFF0Cdisabled \u65F6\u9690\u85CF */}\n <button\n className={`${prevButtonClass} tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-0 group-hover:opacity-100'}`}\n aria-label={copy?.previousSlideLabel}\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-0 group-hover:opacity-100'}`}\n aria-label={copy?.nextSlideLabel}\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </div>\n )}\n </div>\n )\n }\n)\n\nProductsList.displayName = 'ProductsList'\n\n/**\n * ActiveShelf - \u6D3B\u52A8\u8D27\u67B6\n *\n * @description \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C\u591A\u79CD\u914D\u7F6E\u9009\u9879\n */\nconst ActiveShelf = React.forwardRef<HTMLDivElement, ActiveShelfProps>(\n ({ className, data, onLearnMore, onShopNow, onAddToCart, classNames, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: data.title,\n componentDescription: data.description,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // \u4ECE data \u4E2D\u89E3\u6784\u914D\u7F6E\u9879\uFF0C\u5E76\u8BBE\u7F6E\u9ED8\u8BA4\u503C\n const {\n theme = 'light',\n layoutMode = 'flex',\n showTags = true,\n stockDisplayMode,\n stockThresholdValue,\n showOriginalPrice = true,\n secondaryButtonText,\n primaryButtonText,\n secondaryButtonFun,\n primaryButtonFun,\n isShowTab = true,\n copy,\n } = data\n\n // \u6784\u5EFA copy \u914D\u7F6E\uFF0C\u4F7F\u7528\u4F20\u5165\u7684 copy \u914D\u7F6E\n const finalCopy: CopyConfig = copy || {}\n\n // \u83B7\u53D6\u8981\u663E\u793A\u7684\u4EA7\u54C1\u6570\u636E\n const hasTabData = data.productsTab && data.productsTab.length > 0\n const shouldShowTab = isShowTab && hasTabData\n\n return (\n <div\n ref={boxRef}\n className={cn(\n 'w-full',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.root\n )}\n style={\n {\n '--progress-track-bg': theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',\n } as React.CSSProperties\n }\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {data.title && (\n <Heading as=\"h2\" html={data.title} size={4} className={cn('text-info-primary mb-4', classNames?.title)} />\n )}\n {data.description && (\n <Text\n size={3}\n as=\"p\"\n html={data.description}\n className={cn('text-info-primary mb-6', classNames?.description)}\n />\n )}\n\n {/* \u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n\n <Tabs defaultValue={data.productsTab?.[0]?.id} className=\"w-full\">\n {shouldShowTab && (\n <TabsList className=\"mb-6\">\n {data.productsTab?.map(tab => (\n <TabsTrigger key={'tab-' + tab.id} value={tab.id}>\n {tab.tab}\n </TabsTrigger>\n ))}\n </TabsList>\n )}\n {shouldShowTab ? (\n data.productsTab?.map(tab => (\n <TabsContent key={'tab-content-' + tab.id} value={tab.id}>\n <ProductsList\n products={tab.data}\n layoutMode={layoutMode}\n copy={finalCopy}\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n />\n </TabsContent>\n ))\n ) : (\n <ProductsList\n products={data.productsCard}\n layoutMode={layoutMode}\n copy={finalCopy}\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n />\n )}\n </Tabs>\n </div>\n )\n }\n)\n\nActiveShelf.displayName = 'ActiveShelf'\n\n// \u521B\u5EFA\u590D\u5408\u7EC4\u4EF6\nconst ActiveShelfWithProductCard = ActiveShelf as ActiveShelfComponent\nActiveShelfWithProductCard.ProductCard = ProductCard\n\nconst ActiveShelfWrapped = withLayout(ActiveShelfWithProductCard)\n\nexport default ActiveShelfWrapped\nexport type { StockDisplayMode, ActiveShelfSemanticName, ProductCardData }\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,EAAAH,IAoCE,IAAAI,EAAA,6BAlCFC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwE,qCAExEC,EAAoC,wBACpCC,EAA2B,0BAG3BC,GAAO,sBACPC,GAAO,iCAEPC,EAKO,4BACPC,EAA4B,sCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,eAYhBC,EAAW,CAAC,CAAE,SAAAC,CAAS,OAC3B,QAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,2EAEV,oBAAC,QACC,EAAE,2GACF,KAAK,eACL,YAAaA,EAAW,MAAQ,MAClC,KACA,OAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,GAC3G,EAGIC,EAAW,CAAC,CAAE,SAAAD,CAAS,OAC3B,QAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,2EAEV,oBAAC,QACC,EAAE,2GACF,KAAK,eACL,YAAaA,EAAW,MAAQ,MAClC,KACA,OAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,GAC3G,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Text, Heading, Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\n// Import Swiper styles\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport {\n ProductCard,\n type ProductCardData,\n type ActiveShelfSemanticName,\n type StockDisplayMode,\n} from './ProductCard.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'shelf'\nconst componentName = 'active_shelf'\n\n/**\n * \u7EC4\u4EF6\u5E03\u5C40\u6A21\u5F0F\n */\nexport type ActiveShelfLayoutMode = 'flex' | 'horizontal'\n\n/**\n * Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00\n */\nexport type CodeChannelConfig = string\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]\"\n >\n <path\n d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]\"\n >\n <path\n d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n/**\n * \u4EA7\u54C1\u5206\u7EC4Tab\u6570\u636E\u63A5\u53E3\n */\nexport interface ProductTab {\n /** Tab ID */\n id: string\n /** Tab \u6807\u9898 */\n tab: string\n /** \u8BE5\u5206\u7EC4\u4E0B\u7684\u4EA7\u54C1\u6570\u636E */\n data: ProductCardData[]\n}\n\n/**\n * ActiveShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ActiveShelfData {\n theme?: 'light' | 'dark'\n /** \u7EC4\u4EF6\u6807\u9898 */\n title?: string\n /** \u7EC4\u4EF6\u63CF\u8FF0 */\n description?: string\n /** \u5206\u7EC4\u4EA7\u54C1Tab\u5217\u8868 */\n productsTab?: ProductTab[]\n /** \u662F\u5426\u663E\u793A Tab\uFF08\u9ED8\u8BA4\uFF1Atrue\uFF09 */\n isShowTab?: boolean\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n secondaryButtonFun: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n primaryButtonFun: ButtonFunctionType\n /** \u5E03\u5C40\u6A21\u5F0F\uFF1A\u7F51\u683C\u5E03\u5C40\u6216\u6A2A\u5411\u6ED1\u52A8 */\n layoutMode?: ActiveShelfLayoutMode\n /** Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00 */\n codeChannel?: CodeChannelConfig\n /** \u662F\u5426\u5C55\u793A\u4F1A\u5458\u4EF7\u683C */\n showMemberPrice?: boolean\n /** \u662F\u5426\u5C55\u793A\u6298\u6263\u6807\u7B7E */\n showDiscount?: boolean\n /** \u662F\u5426\u5C55\u793A\u6807\u7B7E\u7CFB\u7EDF */\n showTags?: boolean\n /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n stockDisplayMode?: StockDisplayMode\n /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n stockThresholdValue?: number\n /**\n * \u5E93\u5B58\u6587\u672C\u6A21\u677F\uFF0C\u652F\u6301 {count} \u5360\u4F4D\u7B26\n */\n stockDisplayText?: string\n /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n showOriginalPrice?: boolean\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n /**\n * \u4EA7\u54C1\u5217\u8868\uFF08\u5F53\u4E0D\u4F7F\u7528 Tab \u5206\u7EC4\u65F6\u53EF\u76F4\u63A5\u4F20\u5165\u4EA7\u54C1\u5217\u8868\uFF09\n */\n productsCard: ProductCardData[]\n}\n\nexport interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: ActiveShelfData\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n}\n\n/**\n * ActiveShelf \u590D\u5408\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface ActiveShelfComponent\n extends React.ForwardRefExoticComponent<ActiveShelfProps & React.RefAttributes<HTMLDivElement>> {\n /** \u72EC\u7ACB\u7684 ProductCard \u7EC4\u4EF6 */\n ProductCard: typeof ProductCard\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 Props\n */\ninterface ProductsListProps {\n products: ProductCardData[]\n layoutMode: ActiveShelfLayoutMode\n className?: string\n copy?: CopyConfig\n showTags?: boolean\n stockDisplayMode?: StockDisplayMode\n stockThresholdValue?: number\n onLearnMore?: (product: ProductCardData) => void\n onShopNow?: (product: ProductCardData) => void\n onAddToCart?: (product: ProductCardData) => void\n classNames?: Partial<Record<ActiveShelfSemanticName, string>>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n showOriginalPrice?: boolean\n}\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 - \u652F\u6301\u7F51\u683C\u548C\u6A2A\u5411\u6ED1\u52A8\u4E24\u79CD\u5E03\u5C40\n */\nconst ProductsList = React.forwardRef<HTMLDivElement, ProductsListProps>(\n (\n {\n products,\n layoutMode,\n className,\n copy,\n showTags,\n stockDisplayMode,\n stockThresholdValue,\n onLearnMore,\n onShopNow,\n onAddToCart,\n classNames,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n showOriginalPrice,\n },\n ref\n ) => {\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n // \u9884\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u9009\u62E9\u5668\uFF0C\u907F\u514D\u591A\u6B21\u62FC\u63A5\n const nextButtonClass = `swiper-button-next-custom-${id}`\n const prevButtonClass = `swiper-button-prev-custom-${id}`\n\n // Swiper \u5BFC\u822A\u72B6\u6001\n const [swiperState, setSwiperState] = React.useState({\n isBeginning: true,\n isEnd: false,\n })\n\n // Swiper \u5B9E\u4F8B\u5F15\u7528\n const swiperRef = React.useRef<any>(null)\n\n // \u8BA1\u7B97\u5E76\u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u9AD8\u9AD8\u5EA6\n const equalizeSlideHeights = React.useCallback(() => {\n const swiper = swiperRef.current\n if (!swiper?.slides || swiper.slides.length === 0) return\n\n // \u5148\u91CD\u7F6E\u6240\u6709 slide \u9AD8\u5EA6\u4EE5\u83B7\u53D6\u771F\u5B9E\u5185\u5BB9\u9AD8\u5EA6\n swiper.slides.forEach((slide: HTMLElement) => {\n slide.style.height = 'auto'\n })\n\n // \u8BA1\u7B97\u6700\u5927\u9AD8\u5EA6\n // @ts-ignore\n const heights = Array.from(swiper.slides).map((slide: HTMLElement) => slide.scrollHeight)\n const maxHeight = Math.max(...heights)\n\n // \u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u5927\u9AD8\u5EA6\n if (maxHeight > 0) {\n swiper.slides.forEach((slide: HTMLElement) => {\n slide.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n // \u76D1\u542C\u7A97\u53E3 resize \u91CD\u65B0\u8BA1\u7B97\u9AD8\u5EA6\n React.useEffect(() => {\n const handleResize = () => {\n // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u66F4\u65B0\u5B8C\u6210\n requestAnimationFrame(equalizeSlideHeights)\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [equalizeSlideHeights])\n\n if (products?.length === 0) {\n return null\n }\n\n return (\n <div ref={ref} className={className}>\n {layoutMode === 'flex' ? (\n /* \u7F51\u683C\u5E03\u5C40 */\n <div className=\"lg-desktop:gap-4 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 laptop:gap-4 grid grid-cols-1 justify-start gap-3\">\n {products.map((product, index) => (\n <ProductCard\n key={product.shopify_id + '-' + product.sku || index}\n product={product}\n className=\"shrink-0\"\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n copy={copy}\n />\n ))}\n </div>\n ) : (\n /* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */\n <div className=\"group relative\">\n <Swiper\n modules={[Navigation]}\n spaceBetween={16}\n slidesPerView=\"auto\"\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n // \u5EF6\u8FDF\u6267\u884C\u4EE5\u786E\u4FDD\u5185\u5BB9\u6E32\u67D3\u5B8C\u6210\n setTimeout(equalizeSlideHeights, 100)\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n className=\"!overflow-visible\"\n >\n {products.map((product, index) => (\n <SwiperSlide\n key={product.shopify_id + '-' + product.sku || index}\n className=\"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] !w-[296px] overflow-hidden\"\n >\n <ProductCard\n product={product}\n className=\"w-full max-w-full\"\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n copy={copy}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE - \u9ED8\u8BA4\u9690\u85CF\uFF0Chover \u65F6\u663E\u793A\uFF0Cdisabled \u65F6\u9690\u85CF */}\n <button\n className={`${prevButtonClass} tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-0 group-hover:opacity-100'}`}\n aria-label={copy?.previousSlideLabel}\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-0 group-hover:opacity-100'}`}\n aria-label={copy?.nextSlideLabel}\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </div>\n )}\n </div>\n )\n }\n)\n\nProductsList.displayName = 'ProductsList'\n\n/**\n * ActiveShelf - \u6D3B\u52A8\u8D27\u67B6\n *\n * @description \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C\u591A\u79CD\u914D\u7F6E\u9009\u9879\n */\nconst ActiveShelf = React.forwardRef<HTMLDivElement, ActiveShelfProps>(\n ({ className, data, onLearnMore, onShopNow, onAddToCart, classNames, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: data.title,\n componentDescription: data.description,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // \u4ECE data \u4E2D\u89E3\u6784\u914D\u7F6E\u9879\uFF0C\u5E76\u8BBE\u7F6E\u9ED8\u8BA4\u503C\n const {\n theme = 'light',\n layoutMode = 'flex',\n showTags = true,\n stockDisplayMode,\n stockThresholdValue,\n showOriginalPrice = true,\n secondaryButtonText,\n primaryButtonText,\n secondaryButtonFun,\n primaryButtonFun,\n isShowTab = true,\n copy,\n } = data\n\n // \u6784\u5EFA copy \u914D\u7F6E\uFF0C\u4F7F\u7528\u4F20\u5165\u7684 copy \u914D\u7F6E\n const finalCopy: CopyConfig = copy || {}\n\n // \u83B7\u53D6\u8981\u663E\u793A\u7684\u4EA7\u54C1\u6570\u636E\n const hasTabData = data.productsTab && data.productsTab.length > 0\n const shouldShowTab = isShowTab && hasTabData\n\n return (\n <div\n ref={boxRef}\n className={cn(\n 'w-full',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.root\n )}\n style={\n {\n '--progress-track-bg': theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',\n } as React.CSSProperties\n }\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {data.title && (\n <Heading as=\"h2\" html={data.title} size={4} className={cn('text-info-primary mb-4', classNames?.title)} />\n )}\n {data.description && (\n <Text\n size={3}\n as=\"p\"\n html={data.description}\n className={cn('text-info-primary mb-6', classNames?.description)}\n />\n )}\n\n {/* \u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n\n <Tabs defaultValue={data.productsTab?.[0]?.id} className=\"w-full\">\n {shouldShowTab && (\n <TabsList className=\"mb-6\">\n {data.productsTab?.map(tab => (\n <TabsTrigger key={'tab-' + tab.id} value={tab.id}>\n {tab.tab}\n </TabsTrigger>\n ))}\n </TabsList>\n )}\n {shouldShowTab ? (\n data.productsTab?.map(tab => (\n <TabsContent key={'tab-content-' + tab.id} value={tab.id}>\n <ProductsList\n products={tab.data}\n layoutMode={layoutMode}\n copy={finalCopy}\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n />\n </TabsContent>\n ))\n ) : (\n <ProductsList\n products={data.productsCard}\n layoutMode={layoutMode}\n copy={finalCopy}\n showTags={showTags}\n stockDisplayMode={stockDisplayMode}\n stockThresholdValue={stockThresholdValue}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n classNames={classNames}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n showOriginalPrice={showOriginalPrice}\n />\n )}\n </Tabs>\n </div>\n )\n }\n)\n\nActiveShelf.displayName = 'ActiveShelf'\n\n// \u521B\u5EFA\u590D\u5408\u7EC4\u4EF6\nconst ActiveShelfWithProductCard = ActiveShelf as ActiveShelfComponent\nActiveShelfWithProductCard.ProductCard = ProductCard\n\nconst ActiveShelfWrapped = withLayout(ActiveShelfWithProductCard)\n\nexport default ActiveShelfWrapped\nexport type { StockDisplayMode, ActiveShelfSemanticName, ProductCardData }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ActiveShelf_exports", "__export", "ActiveShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_Styles", "import_components", "import_react", "import_modules", "import_css", "import_navigation", "import_ProductCard", "import_useExposure", "componentType", "componentName", "PrevIcon", "disabled", "NextIcon", "ProductsList", "products", "layoutMode", "className", "copy", "showTags", "stockDisplayMode", "stockThresholdValue", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "ref", "id", "nextButtonClass", "prevButtonClass", "swiperState", "setSwiperState", "swiperRef", "equalizeSlideHeights", "swiper", "slide", "heights", "maxHeight", "handleResize", "product", "index", "prev", "ActiveShelf", "data", "props", "boxRef", "theme", "isShowTab", "finalCopy", "hasTabData", "shouldShowTab", "tab", "ActiveShelfWithProductCard", "ActiveShelfWrapped"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var C=Object.create;var h=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var P=(t,e)=>{for(var i in e)h(t,i,{get:e[i],enumerable:!0})},M=(t,e,i,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!L.call(t,r)&&r!==i&&h(t,r,{get:()=>e[r],enumerable:!(l=D(e,r))||l.enumerable});return t};var w=(t,e,i)=>(i=t!=null?C(H(t)):{},M(e||!t||!t.__esModule?h(i,"default",{value:t,enumerable:!0}):i,t)),B=t=>M(h({},"__esModule",{value:!0}),t);var K={};P(K,{default:()=>j});module.exports=B(K);var s=require("react/jsx-runtime"),c=w(require("react")),a=require("../../components/index.js"),U=require("../../shared/Styles.js"),o=require("../../helpers/index.js"),T=require("../../hooks/useExposure.js"),k=require("../../shared/trackUrlRef.js"),g=require("class-variance-authority"),$=require("../../helpers/index.js"),V=require("../AiuiProvider/index.js");const u="image",f="activity_mechanism",z=(0,g.cva)("line-clamp-2",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{theme:"light"}}),E=(0,g.cva)("desktop:text-[16px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] tracking-[-0.02em]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white/80"}},defaultVariants:{theme:"light"}}),S=(0,g.cva)("mt-2 !p-0 text-[14px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{theme:"light"}}),v={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},_=t=>{if(!t)return"";const e=[];return t.lgDesktop?.url&&e.push(`${t.lgDesktop.url}`),t.desktop?.url&&e.push(`${t.desktop.url} ${v.desktop}`),t.laptop?.url&&e.push(`${t.laptop.url} ${v.laptop}`),t.tablet?.url&&e.push(`${t.tablet.url} ${v.tablet}`),t.default?.url&&e.push(`${t.default.url} ${v.default}`),e.join(", ")},F=t=>t&&(t.default?.alt||t.tablet?.alt||t.laptop?.alt||t.desktop?.alt||t.lgDesktop?.alt)||"",b=({item:t,theme:e,classNames:i})=>{const{title:l,description:r,linkText:n,linkHref:p,backgroundImage:m}=t,d=_(m),x=F(m),{locale:y="us",trackingData:A}=(0,V.useAiuiContext)();return(0,s.jsx)("div",{className:(0,o.cn)("rounded-card relative flex flex-col overflow-hidden","desktop:px-6 h-[280px] p-4","laptop:gap-4 gap-3","laptop:h-[320px] lg-desktop:[400px]",i?.card),"data-headless-type-name":`${u}#${f}`,"data-headless-title-desc-button":`${t.title||""}#${t.description||""}#${t.linkText||""}`,children:(0,s.jsxs)(a.Link,{asChild:!p,href:(0,$.getLocalizedPath)((0,k.trackUrlRef)(p,`${A?.contextHandle||""}_${u}_${f}`),y),className:"no-underline",children:[d&&(0,s.jsx)(a.Picture,{source:d,alt:x||l,className:(0,o.cn)("absolute inset-0 size-full",i?.background),imgClassName:"size-full object-cover"}),(0,s.jsxs)("div",{className:"relative z-10",children:[(0,s.jsx)(a.Heading,{as:"h3",size:3,className:(0,o.cn)(z({theme:e}),i?.title),children:l}),(0,s.jsx)(a.Text,{as:"p",className:(0,o.cn)(E({theme:e}),i?.description),children:r}),n&&p&&(0,s.jsx)(a.Button,{variant:"link",as:"a",href:(0,$.getLocalizedPath)((0,k.trackUrlRef)(p,`${A?.contextHandle||""}_${u}_${f}`),y),className:(0,o.cn)(S({theme:e}),i?.link),"data-headless-title-desc-button":`${l}#${r}#${n}`,children:n})]})]})})},R=c.default.forwardRef(({data:t,classNames:e},i)=>{const{items:l=[],theme:r="light"}=t,n=(0,c.useRef)(null);if((0,c.useImperativeHandle)(i,()=>n.current),(0,T.useExposure)(n,{componentType:u,componentName:f,componentTitle:(0,o.extractLexicalText)(l[0]?.title)||"",componentDescription:(0,o.extractLexicalText)(l[0]?.description)||""}),!l||l.length===0)return null;const p={1:"laptop:grid-cols-1 desktop:grid-cols-1 lg-desktop:grid-cols-1",2:"laptop:grid-cols-2 desktop:grid-cols-2 lg-desktop:grid-cols-2",3:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-3 lg-desktop:grid-cols-3",4:"laptop:grid-cols-4 desktop:grid-cols-4 lg-desktop:grid-cols-4"},m=p[Math.min(l.length,4)]||p[4];return(0,s.jsx)(a.Container,{"data-ui-component-id":"ActivityMechanism",className:(0,o.cn)("activity-mechanism","w-full",e?.root),ref:n,children:(0,s.jsx)("div",{className:(0,o.cn)("tablet:grid-cols-2 laptop:gap-4 grid grid-cols-1 gap-3",m,e?.grid),children:l.map((d,x)=>(0,s.jsx)(b,{item:d,theme:r,classNames:{...e,...l?.length===3&&{card:e?.card+" first:tablet:col-span-full first:laptop:col-span-1"}}},`${d.title}-${x}`))})})});R.displayName="ActivityMechanism";var j=R;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ActivityMechanism/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text, Button, Link, Container } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n ActivityMechanismProps,\n ActivityMechanismItem,\n ActivityMechanismSemanticName,\n ResponsiveBackgroundImage,\n} from './types.js'\nimport { cn } from '../../helpers/
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ActivityMechanism_exports", "__export", "ActivityMechanism_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text, Button, Link, Container } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n ActivityMechanismProps,\n ActivityMechanismItem,\n ActivityMechanismSemanticName,\n ResponsiveBackgroundImage,\n} from './types.js'\nimport { cn, extractLexicalText } from '../../helpers/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'activity_mechanism'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleVariants = cva('line-clamp-2', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-white',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u63CF\u8FF0\u6837\u5F0F\u53D8\u4F53\n */\nconst descriptionVariants = cva(\n 'desktop:text-[16px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] tracking-[-0.02em]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-white/80',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\n/**\n * \u94FE\u63A5\u6837\u5F0F\u53D8\u4F53\n */\nconst linkVariants = cva('mt-2 !p-0 text-[14px]', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-white',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\ntype ThemeVariants = VariantProps<typeof titleVariants>\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5C0F\u5230\u5927\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px (\u6700\u5927\u503C\uFF0C\u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247)\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 767, url2 1024, url3 1439, url4 1919, url5\"\n */\nconst buildResponsiveSource = (backgroundImage?: ResponsiveBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // \u6309\u65AD\u70B9\u987A\u5E8F\u6DFB\u52A0\u56FE\u7247 URL\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\u503C\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getDefaultAlt = (backgroundImage?: ResponsiveBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n/**\n * \u5355\u4E2A\u6D3B\u52A8\u673A\u5236\u5361\u7247\u7EC4\u4EF6\n */\nconst ActivityMechanismCard: React.FC<{\n item: ActivityMechanismItem\n theme?: ThemeVariants['theme']\n classNames?: Partial<Record<ActivityMechanismSemanticName, string>>\n}> = ({ item, theme, classNames }) => {\n const { title, description, linkText, linkHref, backgroundImage } = item\n const responsiveSource = buildResponsiveSource(backgroundImage)\n const defaultAlt = getDefaultAlt(backgroundImage)\n const { locale = 'us', trackingData } = useAiuiContext()\n\n return (\n <div\n className={cn(\n 'rounded-card relative flex flex-col overflow-hidden',\n 'desktop:px-6 h-[280px] p-4',\n 'laptop:gap-4 gap-3',\n 'laptop:h-[320px] lg-desktop:[400px]',\n classNames?.card\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item.title || ''}#${item.description || ''}#${item.linkText || ''}`}\n >\n <Link\n asChild={!linkHref}\n href={getLocalizedPath(\n trackUrlRef(linkHref, `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`),\n locale\n )}\n className=\"no-underline\"\n >\n {/* \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247 */}\n {responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || title}\n className={cn('absolute inset-0 size-full', classNames?.background)}\n imgClassName=\"size-full object-cover\"\n />\n )}\n\n {/* \u6587\u672C\u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-10\">\n <Heading as=\"h3\" size={3} className={cn(titleVariants({ theme }), classNames?.title)}>\n {title}\n </Heading>\n <Text as=\"p\" className={cn(descriptionVariants({ theme }), classNames?.description)}>\n {description}\n </Text>\n {linkText && linkHref && (\n <Button\n variant=\"link\"\n as=\"a\"\n href={getLocalizedPath(\n trackUrlRef(linkHref, `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`),\n locale\n )}\n className={cn(linkVariants({ theme }), classNames?.link)}\n data-headless-title-desc-button={`${title}#${description}#${linkText}`}\n >\n {linkText}\n </Button>\n )}\n </div>\n </Link>\n </div>\n )\n}\n\n/**\n * ActivityMechanism - \u6D3B\u52A8\u673A\u5236\u7EC4\u4EF6\n *\n * @description \u5C55\u793A\u6D3B\u52A8\u673A\u5236/\u4F1A\u5458\u6743\u76CA\u7B49\u5361\u7247\u5217\u8868\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C\u4E3B\u9898\u5207\u6362\n */\nconst ActivityMechanism = React.forwardRef<HTMLDivElement, ActivityMechanismProps>(({ data, classNames }, ref) => {\n const { items = [], theme = 'light' } = data\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: extractLexicalText(items[0]?.title) || '',\n componentDescription: extractLexicalText(items[0]?.description) || '',\n })\n\n if (!items || items.length === 0) {\n return null\n }\n\n // \u6839\u636E items \u6570\u91CF\u6620\u5C04 laptop/desktop/lg-desktop \u7684\u5217\u6570\u7C7B\u540D\n // \u4F7F\u7528\u663E\u5F0F\u7C7B\u540D\u6620\u5C04\u4EE5\u786E\u4FDD Tailwind \u80FD\u6B63\u786E\u626B\u63CF\n const gridColsMap: Record<number, string> = {\n 1: 'laptop:grid-cols-1 desktop:grid-cols-1 lg-desktop:grid-cols-1',\n 2: 'laptop:grid-cols-2 desktop:grid-cols-2 lg-desktop:grid-cols-2',\n 3: 'tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-3 lg-desktop:grid-cols-3',\n 4: 'laptop:grid-cols-4 desktop:grid-cols-4 lg-desktop:grid-cols-4',\n }\n const gridColsClass = gridColsMap[Math.min(items.length, 4)] || gridColsMap[4]\n\n return (\n <Container\n data-ui-component-id=\"ActivityMechanism\"\n className={cn('activity-mechanism', 'w-full', classNames?.root)}\n ref={innerRef}\n >\n <div className={cn('tablet:grid-cols-2 laptop:gap-4 grid grid-cols-1 gap-3', gridColsClass, classNames?.grid)}>\n {items.map((item, index) => (\n <ActivityMechanismCard\n key={`${item.title}-${index}`}\n item={item}\n theme={theme}\n classNames={{\n ...classNames,\n ...(items?.length === 3 && {\n card: classNames?.card + ' ' + 'first:tablet:col-span-full first:laptop:col-span-1',\n }),\n }}\n />\n ))}\n </div>\n </Container>\n )\n})\n\nActivityMechanism.displayName = 'ActivityMechanism'\n\nexport default ActivityMechanism\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ActivityMechanism_exports", "__export", "ActivityMechanism_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_helpers", "import_useExposure", "import_trackUrlRef", "import_class_variance_authority", "import_AiuiProvider", "componentType", "componentName", "titleVariants", "descriptionVariants", "linkVariants", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getDefaultAlt", "ActivityMechanismCard", "item", "theme", "classNames", "title", "description", "linkText", "linkHref", "responsiveSource", "defaultAlt", "locale", "trackingData", "ActivityMechanism", "React", "data", "ref", "items", "innerRef", "gridColsMap", "gridColsClass", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var E=Object.create;var m=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var s in t)m(e,s,{get:t[s],enumerable:!0})},k=(e,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of H(t))!D.call(e,a)&&a!==s&&m(e,a,{get:()=>t[a],enumerable:!(o=$(t,a))||o.enumerable});return e};var M=(e,t,s)=>(s=e!=null?E(T(e)):{},k(t||!e||!e.__esModule?m(s,"default",{value:e,enumerable:!0}):s,e)),j=e=>k(m({},"__esModule",{value:!0}),e);var F={};R(F,{default:()=>q});module.exports=j(F);var i=require("react/jsx-runtime"),d=M(require("react")),p=require("../../helpers/index.js"),A=require("../AiuiProvider/index.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../helpers/index.js"),l=require("../../components/index.js"),y=require("class-variance-authority"),u=require("swiper/react"),P=require("../../shared/Styles.js"),z=require("../../hooks/useExposure.js");const g="image",w="activity_schedule",_=(0,y.cva)("rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3",{variants:{state:{"active-light":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","active-dark":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","inactive-light":"bg-[#EAEAEC]","inactive-dark":"bg-[#1E2024]"},size:{small:"laptop:h-[160px] h-[120px]",large:"laptop:h-[240px] h-[200px]"}},defaultVariants:{state:"inactive-light",size:"small"}}),x=(0,y.cva)("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-white","active-dark":"text-white","inactive-light":"text-[#080A0F]","inactive-dark":"text-white"}},defaultVariants:{state:"inactive-light"}}),S=d.memo(({item:e,theme:t="light",className:s,size:o})=>{const a=e.isActive||!1,{locale:v="us",trackingData:h}=(0,A.useAiuiContext)(),c=h?.contextHandle||"",n=`${a?"active":"inactive"}-${t}`;return(0,i.jsx)("div",{className:(0,p.cn)(_({state:n,size:o}),s),"data-ui-component-id":"ActivityScheduleCard","data-headless-type-name":`${g}#${w}`,"data-headless-title-desc-button":`${e.title}##`,children:(0,i.jsxs)(l.Link,{asChild:!e?.link,href:e?.link?(0,N.trackUrlRef)((0,C.getLocalizedPath)(e.link,v),`${c}_${g}_${w}`):void 0,className:"size-full no-underline hover:text-current",children:[(a?e.activeIcon:e.inactiveIcon)&&(0,i.jsx)("div",{className:"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]",children:(0,i.jsx)(l.Picture,{source:a?e.activeIcon.url:e.inactiveIcon.url,alt:a?e.activeIcon.alt:e.inactiveIcon.alt,className:"aspect-square"})}),(0,i.jsxs)("div",{className:"relative z-20 flex h-full flex-col justify-between",children:[(0,i.jsx)(l.Heading,{as:"h3",size:3,html:e.title,className:(0,p.cn)(x({state:n}))}),(0,i.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,i.jsx)("div",{className:"flex flex-col justify-end overflow-hidden",children:(0,i.jsx)(l.Heading,{as:"h4",size:2,html:e.subtitle,className:(0,p.cn)(" line-clamp-2",x({state:n}))})}),o==="large"&&e.description&&(0,i.jsx)(l.Text,{html:e.description,className:(0,p.cn)("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]",x({state:n}))})]})]})]})})});S.displayName="ActivityScheduleCard";const b=d.forwardRef(({classNames:e={},data:t,...s},o)=>{const a=d.useRef(null);d.useImperativeHandle(o,()=>a.current),(0,z.useExposure)(a,{componentType:g,componentName:w,componentTitle:t.scheduleList?.[0]?.title||"",componentDescription:""});const v=t.theme||"light",h=t.size||"large",c=d.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),n=d.useMemo(()=>{const r=B=>{switch(B){case"mobile":return{slidesPerView:1.17,spaceBetween:12};case"tablet":return c===2?{slidesPerView:2,spaceBetween:12}:{slidesPerView:2.4,spaceBetween:12};case"laptop":return c===2?{}:c===4?{slidesPerView:3.2,spaceBetween:16}:{slidesPerView:c,spaceBetween:16};case"desktop":return c===2?{slidesPerView:2,spaceBetween:16}:{slidesPerView:c,spaceBetween:16}}},f=r("mobile"),I=r("tablet"),L=r("laptop"),V=r("desktop");return{0:f,768:I,1024:L,1440:V}},[c]);return(0,i.jsx)(l.Container,{ref:a,className:(0,p.cn)(e?.root),childClassName:"overflow-hidden","data-ui-component-id":"ActivitySchedule",...s,children:(0,i.jsx)(u.Swiper,{breakpoints:n,className:"w-full !overflow-visible",children:t.scheduleList.map((r,f)=>(0,i.jsx)(u.SwiperSlide,{children:(0,i.jsx)(S,{item:r,theme:v,size:h,className:e?.card})},"activityScheduleCardItem"+f))})})});b.displayName="ActivitySchedule";var q=(0,P.withLayout)(b);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ActivitySchedule/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading, Container, Link } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { ActivityScheduleProps, ActivityScheduleItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\n\n/**\n * Card style variants for activity schedule\n */\nconst activityCardVariants = cva(\n 'rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3',\n {\n variants: {\n state: {\n // Active state - gradient background\n 'active-light': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n 'active-dark': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n // Inactive state - solid background\n 'inactive-light': 'bg-[#EAEAEC]',\n 'inactive-dark': 'bg-[#1E2024]',\n },\n size: {\n // Small size - 120px height with responsive scaling\n small: 'laptop:h-[160px] h-[120px]',\n // Large size - 200px height with responsive scaling\n large: 'laptop:h-[240px] h-[200px]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n size: 'small',\n },\n }\n)\n\n/**\n * Text style variants for card\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n // Active state - white text\n 'active-light': 'text-white',\n 'active-dark': 'text-white',\n // Inactive state - dark text\n 'inactive-light': 'text-[#080A0F]',\n 'inactive-dark': 'text-white',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * Activity Schedule Card Component\n */\nconst ActivityScheduleCard = React.memo(\n ({\n item,\n theme = 'light',\n className,\n size,\n }: {\n item: ActivityScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n size: 'small' | 'large'\n }) => {\n const isActive = item.isActive || false\n\n // Calculate combined state\n const cardState = `${isActive ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'active-dark'\n | 'inactive-light'\n | 'inactive-dark'\n\n return (\n <div\n className={cn(activityCardVariants({ state: cardState, size }), className)}\n data-ui-component-id=\"ActivityScheduleCard\"\n >\n <Link
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ActivitySchedule_exports", "__export", "ActivitySchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_class_variance_authority", "import_react", "import_Styles", "activityCardVariants", "cardTextVariants", "ActivityScheduleCard", "item", "theme", "className", "size", "isActive", "cardState", "ActivitySchedule", "classNames", "data", "rest", "ref", "itemsPerRow", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "index"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { Text, Picture, Heading, Container, Link } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { ActivityScheduleProps, ActivityScheduleItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'activity_schedule'\n/**\n * Card style variants for activity schedule\n */\nconst activityCardVariants = cva(\n 'rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3',\n {\n variants: {\n state: {\n // Active state - gradient background\n 'active-light': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n 'active-dark': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n // Inactive state - solid background\n 'inactive-light': 'bg-[#EAEAEC]',\n 'inactive-dark': 'bg-[#1E2024]',\n },\n size: {\n // Small size - 120px height with responsive scaling\n small: 'laptop:h-[160px] h-[120px]',\n // Large size - 200px height with responsive scaling\n large: 'laptop:h-[240px] h-[200px]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n size: 'small',\n },\n }\n)\n\n/**\n * Text style variants for card\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n // Active state - white text\n 'active-light': 'text-white',\n 'active-dark': 'text-white',\n // Inactive state - dark text\n 'inactive-light': 'text-[#080A0F]',\n 'inactive-dark': 'text-white',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * Activity Schedule Card Component\n */\nconst ActivityScheduleCard = React.memo(\n ({\n item,\n theme = 'light',\n className,\n size,\n }: {\n item: ActivityScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n size: 'small' | 'large'\n }) => {\n const isActive = item.isActive || false\n const { locale = 'us', trackingData } = useAiuiContext()\n const contextHandle = trackingData?.contextHandle || ''\n // Calculate combined state\n const cardState = `${isActive ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'active-dark'\n | 'inactive-light'\n | 'inactive-dark'\n\n return (\n <div\n className={cn(activityCardVariants({ state: cardState, size }), className)}\n data-ui-component-id=\"ActivityScheduleCard\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item.title}##`}\n >\n <Link\n asChild={!item?.link}\n href={\n item?.link\n ? trackUrlRef(getLocalizedPath(item.link, locale), `${contextHandle}_${componentType}_${componentName}`)\n : undefined\n }\n className=\"size-full no-underline hover:text-current\"\n >\n {/* Background decoration icon - show activeIcon when active, inactiveIcon when inactive */}\n {(isActive ? item.activeIcon : item.inactiveIcon) && (\n <div className=\"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]\">\n <Picture\n source={isActive ? item.activeIcon!.url : item.inactiveIcon!.url}\n alt={isActive ? item.activeIcon!.alt : item.inactiveIcon!.alt}\n className=\"aspect-square\"\n />\n </div>\n )}\n\n {/* Content area */}\n <div className=\"relative z-20 flex h-full flex-col justify-between\">\n {/* Title */}\n <Heading as=\"h3\" size={3} html={item.title} className={cn(cardTextVariants({ state: cardState }))} />\n\n <div className=\"flex flex-col gap-1\">\n {/* Subtitle */}\n <div className=\"flex flex-col justify-end overflow-hidden\">\n <Heading\n as=\"h4\"\n size={2}\n html={item.subtitle}\n className={cn(' line-clamp-2', cardTextVariants({ state: cardState }))}\n />\n </div>\n {/* Detailed description - only show when size is large */}\n {size === 'large' && item.description && (\n <Text\n html={item.description}\n className={cn(\n 'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]',\n cardTextVariants({ state: cardState })\n )}\n />\n )}\n </div>\n </div>\n </Link>\n </div>\n )\n }\n)\n\nActivityScheduleCard.displayName = 'ActivityScheduleCard'\n\n/**\n * ActivitySchedule - Activity Schedule Component\n *\n * @description Display activity schedule card list with active/inactive states, theme switching, and responsive layout\n */\nconst ActivitySchedule = React.forwardRef<HTMLDivElement, ActivityScheduleProps>(\n ({ classNames = {}, data, ...rest }, ref) => {\n const innerRef = React.useRef<HTMLDivElement>(null)\n\n React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data.scheduleList?.[0]?.title || '',\n componentDescription: '',\n })\n\n const theme = data.theme || 'light'\n const size = data.size || 'large'\n\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n const swiperBreakpoints = React.useMemo(() => {\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.17, spaceBetween: 12 }\n case 'tablet':\n if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 12 }\n return { slidesPerView: 2.4, spaceBetween: 12 }\n case 'laptop':\n if (itemsPerRow === 2) return {}\n if (itemsPerRow === 4) return { slidesPerView: 3.2, spaceBetween: 16 }\n return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n case 'desktop':\n if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 16 }\n return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n }\n }\n\n const mobileConfig = getBreakpointConfig('mobile')\n const tabletConfig = getBreakpointConfig('tablet')\n const laptopConfig = getBreakpointConfig('laptop')\n const desktopConfig = getBreakpointConfig('desktop')\n\n return {\n 0: mobileConfig,\n 768: tabletConfig,\n 1024: laptopConfig,\n 1440: desktopConfig,\n }\n }, [itemsPerRow])\n\n return (\n <Container\n ref={innerRef}\n className={cn(classNames?.root)}\n childClassName=\"overflow-hidden\"\n data-ui-component-id=\"ActivitySchedule\"\n {...rest}\n >\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.scheduleList.map((item, index) => (\n <SwiperSlide key={'activityScheduleCardItem' + index}>\n <ActivityScheduleCard item={item} theme={theme} size={size} className={classNames?.card} />\n </SwiperSlide>\n ))}\n </Swiper>\n </Container>\n )\n }\n)\n\nActivitySchedule.displayName = 'ActivitySchedule'\n\nexport default withLayout(ActivitySchedule)\nexport type { ActivityScheduleProps, ActivityScheduleData, ActivityScheduleItem } from './types.js'\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ActivitySchedule_exports", "__export", "ActivitySchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_AiuiProvider", "import_trackUrlRef", "import_components", "import_class_variance_authority", "import_react", "import_Styles", "import_useExposure", "componentType", "componentName", "activityCardVariants", "cardTextVariants", "ActivityScheduleCard", "item", "theme", "className", "size", "isActive", "locale", "trackingData", "contextHandle", "cardState", "ActivitySchedule", "classNames", "data", "rest", "ref", "innerRef", "itemsPerRow", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},T=(e,t,i,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of E(t))!C.call(e,n)&&n!==i&&d(e,n,{get:()=>t[n],enumerable:!(c=A(t,n))||c.enumerable});return e};var _=e=>T(d({},"__esModule",{value:!0}),e);var w={};D(w,{AiuiContext:()=>l,default:()=>L,useAiuiContext:()=>P});module.exports=_(w);var m=require("react/jsx-runtime"),f=require("../../shared/track.js"),a=require("react");const l=(0,a.createContext)({trackingData:{},locale:void 0,copyWriting:{}}),P=()=>{const e=(0,a.useContext)(l);if(!e)throw new Error("useAiui must be used in <AiuiProvider>");return e},R=({children:e,...t})=>{const i=(0,a.useRef)(null),c=(0,a.useRef)(t?.trackingData);return(0,a.useEffect)(()=>{c.current=t?.trackingData},[t?.trackingData]),(0,a.useEffect)(()=>{const n=i.current;if(!n)return;const g=(r,o)=>{const s={};if(!o||!o.attributes)return;for(const x of Array.from(o.attributes)){const p=x?.name;p?.startsWith("data-headless-")&&(s[p]=o.getAttribute(p)||"")}const h=s["data-headless-sku"],v=s["data-headless-type-name"]?.split?.("#"),u=s["data-headless-title-desc-button"]?.split?.("#"),b=s["data-headless-nav-position"]?.split?.("#"),k=s["data-headless-creative-id"];(0,f.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:c.current?.pageGroup||"Home Page",component_type:v?.[0]||"",component_name:v?.[1]||"",position:b?.[1]||"",navigation:b?.[0]||"",button_name:u?.[2]||"",SKU:h||"",component_title:u?.[0]||"",component_description:u?.[1]||"",creative_id:k}})},y=new MutationObserver(()=>{n.querySelectorAll("[data-headless-type-name]").forEach(r=>{r.hasAttribute("data-headless-track-bound")||(r.addEventListener("click",o=>g(o,r)),r.setAttribute("data-headless-track-bound","true"))})});return y.observe(n,{childList:!0,subtree:!0}),n.querySelectorAll("[data-headless-type-name]").forEach(r=>{r.hasAttribute("data-headless-track-bound")||(r.addEventListener("click",o=>g(o,r)),r.setAttribute("data-headless-track-bound","true"))}),()=>y.disconnect()},[]),(0,m.jsx)(l.Provider,{value:t,children:(0,m.jsx)("div",{ref:i,children:e})})};var L=R;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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, useRef } from 'react'\nimport type { CurrencyDisplayType } from '../../types/props.js'\n\n/**\n * Exposure tracking parameters\n */\nexport interface ExposureParams {\n componentType: string\n componentName: string\n componentTitle?: string\n componentDescription?: string\n navigation?: string\n pageGroup?: string\n position?: number\n}\n\n/**\n * Callback function for custom exposure handling\n */\nexport type OnExposureCallback = (params: ExposureParams) => void\n\ninterface AiuiContextType {\n /**\n * \u5168\u5C40\u57CB\u70B9\u6570\u636E\uFF0C\u81F3\u5C11\u5E94\u5305\u542B pageGroup \u5B57\u6BB5\u7528\u4E8E\u533A\u5206\u9875\u9762\uFF0C\u5176\u4ED6\u5B57\u6BB5\u53EF\u6839\u636E\u9700\u8981\u6DFB\u52A0\n */\n trackingData: Record<string, any>\n /**\n * \u5F53\u524D\u8BED\u8A00\u73AF\u5883\uFF0C\u9ED8\u8BA4\u4E3A\u6D4F\u89C8\u5668\u8BED\u8A00\n */\n locale?: string\n /**\n * \u5F53\u524D\u9875\u9762\u8DEF\u5F84\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u9875\u9762\uFF0C\u9ED8\u8BA4\u4E3A window.location.pathname\n */\n pathname?: string\n /**\n * \u5546\u6237\u81EA\u5B9A\u4E49\u7684\u5E97\u94FA\u57DF\u540D\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u5546\u6237\uFF0C\u9ED8\u8BA4\u4E3A\u7A7A\u5B57\u7B26\u4E32\n */\n storeDomain?: string\n /**\n * \u5F53\u524D\u9875\u9762\u7684 handle\uFF08slug\uFF09\uFF0C\u7528\u4E8E tracking \u57CB\u70B9\u533A\u5206\u9875\u9762\u8D44\u6E90\uFF0C\u7531\u6D88\u8D39\u65B9\u4F20\u5165\u3002\n * \u4F8B\u5982\uFF1A<AiuiProvider pageHandle={page.handle} ...>\n * ProductLottery\u3001Media Endorsement \u7B49\u7EC4\u4EF6\u53EF\u901A\u8FC7 useAiuiContext() \u8BFB\u53D6\u6B64\u5B57\u6BB5\u3002\n */\n pageHandle?: string\n /**\n * \u7528\u6237\u662F\u5426\u767B\u5F55\n */\n isLogin?: boolean\n\n /**\n * \u7528\u6237\u662F\u5426\u4E3APlus\u4F1A\u5458\n */\n isPlusMember?: boolean\n /**\n * \u8D27\u5E01\u4EE3\u7801\uFF0C\u9ED8\u8BA4\u4E3AUSD\n */\n currencyCode?: string\n /**\n * \u8D27\u5E01\u663E\u793A\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u4E3Asymbol\uFF08\u7B26\u53F7\uFF09\uFF0C\u53EF\u9009\u503C\u5305\u62EC\uFF1A'symbol'\uFF08\u7B26\u53F7\uFF0C\u5982$\uFF09\u3001'code'\uFF08\u8D27\u5E01\u4EE3\u7801\uFF0C\u5982USD\uFF09\u548C'name'\uFF08\u8D27\u5E01\u540D\u79F0\uFF0C\u5982\u7F8E\u5143\uFF09\u3002\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay for more details\n */\n currencyDisplay?: CurrencyDisplayType\n /**\n * \u6587\u6848\u914D\u7F6E\uFF0C\u5546\u6237\u53EF\u901A\u8FC7\u6B64\u5B57\u6BB5\u8986\u76D6\u9ED8\u8BA4\u6587\u6848\n */\n copyWriting?: Record<string, string>\n /**\n * \u81EA\u5B9A\u4E49\u66DD\u5149\u56DE\u8C03\u3002\u4F20\u5165\u540E\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 GA \u57CB\u70B9\u903B\u8F91\u3002\n *\n * @example\n * <AiuiProvider\n * trackingData={{ pageGroup: 'Home Page' }}\n * onExposure={(params) => {\n * // \u4F7F\u7528\u5546\u6237\u81EA\u5DF1\u7684\u57CB\u70B9\u7CFB\u7EDF\u8BB0\u5F55\u66DD\u5149\u4E8B\u4EF6\n * ga.track('component_impression', params)\n * }}\n * >\n * {children}\n * </AiuiProvider>\n */\n onExposure?: OnExposureCallback\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 context\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n const rootRef = useRef<HTMLDivElement>(null)\n const trackingDataRef = useRef(rest?.trackingData)\n useEffect(() => {\n trackingDataRef.current = rest?.trackingData\n }, [rest?.trackingData])\n\n useEffect(() => {\n const root = rootRef.current\n if (!root) return\n\n const handleTrackClick = (_e: Event, el: Element) => {\n const out:
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,EAAA,mBAAAC,IAAA,eAAAC,EAAAL,
|
|
6
|
-
"names": ["AiuiProvider_exports", "__export", "AiuiContext", "AiuiProvider_default", "useAiuiContext", "__toCommonJS", "import_jsx_runtime", "import_track", "import_react", "context", "AiuiProvider", "children", "rest", "rootRef", "trackingDataRef", "root", "handleTrackClick", "_e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "observer", "e"]
|
|
4
|
+
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect, useRef } from 'react'\nimport type { CurrencyDisplayType } from '../../types/props.js'\n\n/**\n * Exposure tracking parameters\n */\nexport interface ExposureParams {\n componentType: string\n componentName: string\n componentTitle?: string\n componentDescription?: string\n navigation?: string\n pageGroup?: string\n position?: number\n}\n\n/**\n * Callback function for custom exposure handling\n */\nexport type OnExposureCallback = (params: ExposureParams) => void\n\ninterface AiuiContextType {\n /**\n * \u5168\u5C40\u57CB\u70B9\u6570\u636E\uFF0C\u81F3\u5C11\u5E94\u5305\u542B pageGroup \u5B57\u6BB5\u7528\u4E8E\u533A\u5206\u9875\u9762\uFF0C\u5176\u4ED6\u5B57\u6BB5\u53EF\u6839\u636E\u9700\u8981\u6DFB\u52A0\n */\n trackingData: Record<string, any>\n /**\n * \u5F53\u524D\u8BED\u8A00\u73AF\u5883\uFF0C\u9ED8\u8BA4\u4E3A\u6D4F\u89C8\u5668\u8BED\u8A00\n */\n locale?: string\n /**\n * \u5F53\u524D\u9875\u9762\u8DEF\u5F84\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u9875\u9762\uFF0C\u9ED8\u8BA4\u4E3A window.location.pathname\n */\n pathname?: string\n /**\n * \u5546\u6237\u81EA\u5B9A\u4E49\u7684\u5E97\u94FA\u57DF\u540D\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u5546\u6237\uFF0C\u9ED8\u8BA4\u4E3A\u7A7A\u5B57\u7B26\u4E32\n */\n storeDomain?: string\n /**\n * \u5F53\u524D\u9875\u9762\u7684 handle\uFF08slug\uFF09\uFF0C\u7528\u4E8E tracking \u57CB\u70B9\u533A\u5206\u9875\u9762\u8D44\u6E90\uFF0C\u7531\u6D88\u8D39\u65B9\u4F20\u5165\u3002\n * \u4F8B\u5982\uFF1A<AiuiProvider pageHandle={page.handle} ...>\n * ProductLottery\u3001Media Endorsement \u7B49\u7EC4\u4EF6\u53EF\u901A\u8FC7 useAiuiContext() \u8BFB\u53D6\u6B64\u5B57\u6BB5\u3002\n */\n pageHandle?: string\n /**\n * \u7528\u6237\u662F\u5426\u767B\u5F55\n */\n isLogin?: boolean\n\n /**\n * \u7528\u6237\u662F\u5426\u4E3APlus\u4F1A\u5458\n */\n isPlusMember?: boolean\n /**\n * \u8D27\u5E01\u4EE3\u7801\uFF0C\u9ED8\u8BA4\u4E3AUSD\n */\n currencyCode?: string\n /**\n * \u8D27\u5E01\u663E\u793A\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u4E3Asymbol\uFF08\u7B26\u53F7\uFF09\uFF0C\u53EF\u9009\u503C\u5305\u62EC\uFF1A'symbol'\uFF08\u7B26\u53F7\uFF0C\u5982$\uFF09\u3001'code'\uFF08\u8D27\u5E01\u4EE3\u7801\uFF0C\u5982USD\uFF09\u548C'name'\uFF08\u8D27\u5E01\u540D\u79F0\uFF0C\u5982\u7F8E\u5143\uFF09\u3002\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay for more details\n */\n currencyDisplay?: CurrencyDisplayType\n /**\n * \u6587\u6848\u914D\u7F6E\uFF0C\u5546\u6237\u53EF\u901A\u8FC7\u6B64\u5B57\u6BB5\u8986\u76D6\u9ED8\u8BA4\u6587\u6848\n */\n copyWriting?: Record<string, string>\n /**\n * \u81EA\u5B9A\u4E49\u66DD\u5149\u56DE\u8C03\u3002\u4F20\u5165\u540E\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 GA \u57CB\u70B9\u903B\u8F91\u3002\n *\n * @example\n * <AiuiProvider\n * trackingData={{ pageGroup: 'Home Page' }}\n * onExposure={(params) => {\n * // \u4F7F\u7528\u5546\u6237\u81EA\u5DF1\u7684\u57CB\u70B9\u7CFB\u7EDF\u8BB0\u5F55\u66DD\u5149\u4E8B\u4EF6\n * ga.track('component_impression', params)\n * }}\n * >\n * {children}\n * </AiuiProvider>\n */\n onExposure?: OnExposureCallback\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 context\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n const rootRef = useRef<HTMLDivElement>(null)\n const trackingDataRef = useRef(rest?.trackingData)\n useEffect(() => {\n trackingDataRef.current = rest?.trackingData\n }, [rest?.trackingData])\n\n useEffect(() => {\n const root = rootRef.current\n if (!root) return\n\n const handleTrackClick = (_e: Event, el: Element) => {\n const out: Record<string, string> = {}\n if (!el || !el.attributes) return\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as Attr)?.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-position']?.split?.('#')\n const creativeId = out['data-headless-creative-id']\n\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: trackingDataRef.current?.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 creative_id: creativeId,\n },\n })\n }\n\n const observer = new MutationObserver(() => {\n root.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 })\n observer.observe(root, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n root.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\n return () => observer.disconnect()\n }, [])\n\n return (\n <AiuiContext.Provider value={rest}>\n <div ref={rootRef}>{children}</div>\n </AiuiContext.Provider>\n )\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,EAAA,mBAAAC,IAAA,eAAAC,EAAAL,GAyKM,IAAAM,EAAA,6BAzKNC,EAAwB,iCACxBC,EAAoE,iBAmF7D,MAAMN,KAAc,iBAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYE,EAAiB,IAAM,CAClC,MAAMK,KAAU,cAAWP,CAAW,EACtC,GAAI,CAACO,EACH,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOA,CACT,EAEMC,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,IAEwB,CACtB,MAAMC,KAAU,UAAuB,IAAI,EACrCC,KAAkB,UAAOF,GAAM,YAAY,EACjD,sBAAU,IAAM,CACdE,EAAgB,QAAUF,GAAM,YAClC,EAAG,CAACA,GAAM,YAAY,CAAC,KAEvB,aAAU,IAAM,CACd,MAAMG,EAAOF,EAAQ,QACrB,GAAI,CAACE,EAAM,OAEX,MAAMC,EAAmB,CAACC,EAAWC,IAAgB,CACnD,MAAMC,EAA8B,CAAC,EACrC,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAC3B,UAAWE,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAe,KACzBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,GAAK,GAEzC,CACA,MAAMC,EAAMH,EAAI,mBAAmB,EAC7BI,EAAWJ,EAAI,yBAAyB,GAAG,QAAQ,GAAG,EACtDK,EAAYL,EAAI,iCAAiC,GAAG,QAAQ,GAAG,EAC/DM,EAAcN,EAAI,4BAA4B,GAAG,QAAQ,GAAG,EAC5DO,EAAaP,EAAI,2BAA2B,KAElD,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYL,EAAgB,SAAS,WAAa,YAClD,eAAgBS,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,GACzC,YAAaE,CACf,CACF,CAAC,CACH,EAEMC,EAAW,IAAI,iBAAiB,IAAM,CAC1CZ,EAAK,iBAAiB,2BAA2B,EAAE,QAAQG,GAAM,CAC1DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAASU,GAAKZ,EAAiBY,EAAGV,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAS,EAAS,QAAQZ,EAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAEzDA,EAAK,iBAAiB,2BAA2B,EAAE,QAAQG,GAAM,CAC1DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAASU,GAAKZ,EAAiBY,EAAGV,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EAEM,IAAMS,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,KAGH,OAACzB,EAAY,SAAZ,CAAqB,MAAOU,EAC3B,mBAAC,OAAI,IAAKC,EAAU,SAAAF,EAAS,EAC/B,CAEJ,EAEA,IAAOR,EAAQO",
|
|
6
|
+
"names": ["AiuiProvider_exports", "__export", "AiuiContext", "AiuiProvider_default", "useAiuiContext", "__toCommonJS", "import_jsx_runtime", "import_track", "import_react", "context", "AiuiProvider", "children", "rest", "rootRef", "trackingDataRef", "root", "handleTrackClick", "_e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "creativeId", "observer", "e"]
|
|
7
7
|
}
|