@anker-in/headless-ui 1.0.24 → 1.0.26-alpha.1761893017767
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/FeatureCards/FeatureCards.d.ts +7 -0
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js +2 -0
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map +7 -0
- package/dist/cjs/biz-components/FeatureCards/index.d.ts +2 -0
- package/dist/cjs/biz-components/FeatureCards/index.js +2 -0
- package/dist/cjs/biz-components/FeatureCards/index.js.map +7 -0
- package/dist/cjs/biz-components/FeatureCards/types.d.ts +25 -0
- package/dist/cjs/biz-components/FeatureCards/types.js +2 -0
- package/dist/cjs/biz-components/FeatureCards/types.js.map +7 -0
- package/dist/cjs/biz-components/FeatureShowcase/FeatureShowcase.d.ts +7 -0
- package/dist/cjs/biz-components/FeatureShowcase/FeatureShowcase.js +2 -0
- package/dist/cjs/biz-components/FeatureShowcase/FeatureShowcase.js.map +7 -0
- package/dist/cjs/biz-components/FeatureShowcase/index.d.ts +2 -0
- package/dist/cjs/biz-components/FeatureShowcase/index.js +2 -0
- package/dist/cjs/biz-components/FeatureShowcase/index.js.map +7 -0
- package/dist/cjs/biz-components/FeatureShowcase/types.d.ts +20 -0
- package/dist/cjs/biz-components/FeatureShowcase/types.js +2 -0
- package/dist/cjs/biz-components/FeatureShowcase/types.js.map +7 -0
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.d.ts +7 -0
- package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.js +2 -0
- package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.js.map +7 -0
- package/dist/cjs/biz-components/ImageTextFeature/index.d.ts +2 -0
- package/dist/cjs/biz-components/ImageTextFeature/index.js +2 -0
- package/dist/cjs/biz-components/ImageTextFeature/index.js.map +7 -0
- package/dist/cjs/biz-components/ImageTextFeature/types.d.ts +31 -0
- package/dist/cjs/biz-components/ImageTextFeature/types.js +2 -0
- package/dist/cjs/biz-components/ImageTextFeature/types.js.map +7 -0
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.d.ts +7 -0
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +2 -0
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +7 -0
- package/dist/cjs/biz-components/ImageWithText/index.d.ts +2 -0
- package/dist/cjs/biz-components/ImageWithText/index.js +2 -0
- package/dist/cjs/biz-components/ImageWithText/index.js.map +7 -0
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +23 -0
- package/dist/cjs/biz-components/ImageWithText/types.js +2 -0
- package/dist/cjs/biz-components/ImageWithText/types.js.map +7 -0
- package/dist/cjs/biz-components/Ksp/index.d.ts +40 -0
- package/dist/cjs/biz-components/Ksp/index.js +2 -0
- package/dist/cjs/biz-components/Ksp/index.js.map +7 -0
- package/dist/cjs/biz-components/MarqueeReview/index.d.ts +41 -0
- package/dist/cjs/biz-components/MarqueeReview/index.js +25 -0
- package/dist/cjs/biz-components/MarqueeReview/index.js.map +7 -0
- package/dist/cjs/biz-components/ProductCompare/index.d.ts +37 -0
- package/dist/cjs/biz-components/ProductCompare/index.js +2 -0
- package/dist/cjs/biz-components/ProductCompare/index.js.map +7 -0
- package/dist/cjs/biz-components/ProductHero/ProductHero.d.ts +7 -0
- package/dist/cjs/biz-components/ProductHero/ProductHero.js +2 -0
- package/dist/cjs/biz-components/ProductHero/ProductHero.js.map +7 -0
- package/dist/cjs/biz-components/ProductHero/index.d.ts +2 -0
- package/dist/cjs/biz-components/ProductHero/index.js +2 -0
- package/dist/cjs/biz-components/ProductHero/index.js.map +7 -0
- package/dist/cjs/biz-components/ProductHero/types.d.ts +20 -0
- package/dist/cjs/biz-components/ProductHero/types.js +2 -0
- package/dist/cjs/biz-components/ProductHero/types.js.map +7 -0
- package/dist/cjs/biz-components/Specs/dropdown.d.ts +11 -0
- package/dist/cjs/biz-components/Specs/dropdown.js +3 -0
- package/dist/cjs/biz-components/Specs/dropdown.js.map +7 -0
- package/dist/cjs/biz-components/Specs/index.d.ts +6 -0
- package/dist/cjs/biz-components/Specs/index.js +2 -0
- package/dist/cjs/biz-components/Specs/index.js.map +7 -0
- package/dist/cjs/biz-components/SpecsComparison/SpecsComparison.d.ts +7 -0
- package/dist/cjs/biz-components/SpecsComparison/SpecsComparison.js +2 -0
- package/dist/cjs/biz-components/SpecsComparison/SpecsComparison.js.map +7 -0
- package/dist/cjs/biz-components/SpecsComparison/index.d.ts +2 -0
- package/dist/cjs/biz-components/SpecsComparison/index.js +2 -0
- package/dist/cjs/biz-components/SpecsComparison/index.js.map +7 -0
- package/dist/cjs/biz-components/SpecsComparison/types.d.ts +34 -0
- package/dist/cjs/biz-components/SpecsComparison/types.js +2 -0
- package/dist/cjs/biz-components/SpecsComparison/types.js.map +7 -0
- package/dist/cjs/biz-components/TabWithImage/TabWithImage.d.ts +7 -0
- package/dist/cjs/biz-components/TabWithImage/TabWithImage.js +2 -0
- package/dist/cjs/biz-components/TabWithImage/TabWithImage.js.map +7 -0
- package/dist/cjs/biz-components/TabWithImage/index.d.ts +2 -0
- package/dist/cjs/biz-components/TabWithImage/index.js +2 -0
- package/dist/cjs/biz-components/TabWithImage/index.js.map +7 -0
- package/dist/cjs/biz-components/TabWithImage/types.d.ts +28 -0
- package/dist/cjs/biz-components/TabWithImage/types.js +2 -0
- package/dist/cjs/biz-components/TabWithImage/types.js.map +7 -0
- package/dist/cjs/biz-components/TabsGroup/index.d.ts +7 -0
- package/dist/cjs/biz-components/TabsGroup/index.js +2 -0
- package/dist/cjs/biz-components/TabsGroup/index.js.map +7 -0
- package/dist/cjs/biz-components/TabsGroup/types.d.ts +16 -0
- package/dist/cjs/biz-components/TabsGroup/types.js +2 -0
- package/dist/cjs/biz-components/TabsGroup/types.js.map +7 -0
- package/dist/cjs/biz-components/TabsWithMedia/TabsWithMedia.d.ts +7 -0
- package/dist/cjs/biz-components/TabsWithMedia/TabsWithMedia.js +2 -0
- package/dist/cjs/biz-components/TabsWithMedia/TabsWithMedia.js.map +7 -0
- package/dist/cjs/biz-components/TabsWithMedia/index.d.ts +2 -0
- package/dist/cjs/biz-components/TabsWithMedia/index.js +2 -0
- package/dist/cjs/biz-components/TabsWithMedia/index.js.map +7 -0
- package/dist/cjs/biz-components/TabsWithMedia/types.d.ts +40 -0
- package/dist/cjs/biz-components/TabsWithMedia/types.js +2 -0
- package/dist/cjs/biz-components/TabsWithMedia/types.js.map +7 -0
- package/dist/cjs/biz-components/VideoFeature/VideoFeature.d.ts +7 -0
- package/dist/cjs/biz-components/VideoFeature/VideoFeature.js +2 -0
- package/dist/cjs/biz-components/VideoFeature/VideoFeature.js.map +7 -0
- package/dist/cjs/biz-components/VideoFeature/index.d.ts +2 -0
- package/dist/cjs/biz-components/VideoFeature/index.js +2 -0
- package/dist/cjs/biz-components/VideoFeature/index.js.map +7 -0
- package/dist/cjs/biz-components/VideoFeature/types.d.ts +18 -0
- package/dist/cjs/biz-components/VideoFeature/types.js +2 -0
- package/dist/cjs/biz-components/VideoFeature/types.js.map +7 -0
- package/dist/cjs/biz-components/index.d.ts +61 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/cpn-components/CpnNavigation/index.js +1 -1
- package/dist/cjs/cpn-components/CpnNavigation/index.js.map +3 -3
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +3 -3
- package/dist/cjs/stories/MarqueeReview.stories.d.ts +73 -0
- package/dist/cjs/stories/MarqueeReview.stories.js +19 -0
- package/dist/cjs/stories/MarqueeReview.stories.js.map +7 -0
- package/dist/cjs/stories/featureCards.stories.d.ts +28 -0
- package/dist/cjs/stories/featureCards.stories.js +2 -0
- package/dist/cjs/stories/featureCards.stories.js.map +7 -0
- package/dist/cjs/stories/featureShowcase.stories.d.ts +28 -0
- package/dist/cjs/stories/featureShowcase.stories.js +2 -0
- package/dist/cjs/stories/featureShowcase.stories.js.map +7 -0
- package/dist/cjs/stories/imageTextFeature.stories.d.ts +27 -0
- package/dist/cjs/stories/imageTextFeature.stories.js +2 -0
- package/dist/cjs/stories/imageTextFeature.stories.js.map +7 -0
- package/dist/cjs/stories/imageWithText.stories.d.ts +27 -0
- package/dist/cjs/stories/imageWithText.stories.js +2 -0
- package/dist/cjs/stories/imageWithText.stories.js.map +7 -0
- package/dist/cjs/stories/ksp.stories.d.ts +63 -0
- package/dist/cjs/stories/ksp.stories.js +129 -0
- package/dist/cjs/stories/ksp.stories.js.map +7 -0
- package/dist/cjs/stories/productCompare.stories.d.ts +49 -0
- package/dist/cjs/stories/productCompare.stories.js +63 -0
- package/dist/cjs/stories/productCompare.stories.js.map +7 -0
- package/dist/cjs/stories/productHero.stories.d.ts +28 -0
- package/dist/cjs/stories/productHero.stories.js +2 -0
- package/dist/cjs/stories/productHero.stories.js.map +7 -0
- package/dist/cjs/stories/specs.stories.d.ts +13 -0
- package/dist/cjs/stories/specs.stories.js +57 -0
- package/dist/cjs/stories/specs.stories.js.map +7 -0
- package/dist/cjs/stories/specsComparison.stories.d.ts +27 -0
- package/dist/cjs/stories/specsComparison.stories.js +30 -0
- package/dist/cjs/stories/specsComparison.stories.js.map +7 -0
- package/dist/cjs/stories/tabWithImage.stories.d.ts +27 -0
- package/dist/cjs/stories/tabWithImage.stories.js +2 -0
- package/dist/cjs/stories/tabWithImage.stories.js.map +7 -0
- package/dist/cjs/stories/tabsWithMedia.stories.d.ts +27 -0
- package/dist/cjs/stories/tabsWithMedia.stories.js +2 -0
- package/dist/cjs/stories/tabsWithMedia.stories.js.map +7 -0
- package/dist/cjs/stories/videoFeature.stories.d.ts +28 -0
- package/dist/cjs/stories/videoFeature.stories.js +2 -0
- package/dist/cjs/stories/videoFeature.stories.js.map +7 -0
- package/dist/cjs/types/props.d.ts +4 -0
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/FeatureCards/FeatureCards.d.ts +7 -0
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js +2 -0
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map +7 -0
- package/dist/esm/biz-components/FeatureCards/index.d.ts +2 -0
- package/dist/esm/biz-components/FeatureCards/index.js +2 -0
- package/dist/esm/biz-components/FeatureCards/index.js.map +7 -0
- package/dist/esm/biz-components/FeatureCards/types.d.ts +25 -0
- package/dist/esm/biz-components/FeatureCards/types.js +1 -0
- package/dist/esm/biz-components/FeatureCards/types.js.map +7 -0
- package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.d.ts +7 -0
- package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.js +2 -0
- package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.js.map +7 -0
- package/dist/esm/biz-components/FeatureShowcase/index.d.ts +2 -0
- package/dist/esm/biz-components/FeatureShowcase/index.js +2 -0
- package/dist/esm/biz-components/FeatureShowcase/index.js.map +7 -0
- package/dist/esm/biz-components/FeatureShowcase/types.d.ts +20 -0
- package/dist/esm/biz-components/FeatureShowcase/types.js +1 -0
- package/dist/esm/biz-components/FeatureShowcase/types.js.map +7 -0
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.d.ts +7 -0
- package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.js +2 -0
- package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.js.map +7 -0
- package/dist/esm/biz-components/ImageTextFeature/index.d.ts +2 -0
- package/dist/esm/biz-components/ImageTextFeature/index.js +2 -0
- package/dist/esm/biz-components/ImageTextFeature/index.js.map +7 -0
- package/dist/esm/biz-components/ImageTextFeature/types.d.ts +31 -0
- package/dist/esm/biz-components/ImageTextFeature/types.js +1 -0
- package/dist/esm/biz-components/ImageTextFeature/types.js.map +7 -0
- package/dist/esm/biz-components/ImageWithText/ImageWithText.d.ts +7 -0
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +2 -0
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +7 -0
- package/dist/esm/biz-components/ImageWithText/index.d.ts +2 -0
- package/dist/esm/biz-components/ImageWithText/index.js +2 -0
- package/dist/esm/biz-components/ImageWithText/index.js.map +7 -0
- package/dist/esm/biz-components/ImageWithText/types.d.ts +23 -0
- package/dist/esm/biz-components/ImageWithText/types.js +1 -0
- package/dist/esm/biz-components/ImageWithText/types.js.map +7 -0
- package/dist/esm/biz-components/Ksp/index.d.ts +40 -0
- package/dist/esm/biz-components/Ksp/index.js +2 -0
- package/dist/esm/biz-components/Ksp/index.js.map +7 -0
- package/dist/esm/biz-components/MarqueeReview/index.d.ts +41 -0
- package/dist/esm/biz-components/MarqueeReview/index.js +25 -0
- package/dist/esm/biz-components/MarqueeReview/index.js.map +7 -0
- package/dist/esm/biz-components/ProductCompare/index.d.ts +37 -0
- package/dist/esm/biz-components/ProductCompare/index.js +2 -0
- package/dist/esm/biz-components/ProductCompare/index.js.map +7 -0
- package/dist/esm/biz-components/ProductHero/ProductHero.d.ts +7 -0
- package/dist/esm/biz-components/ProductHero/ProductHero.js +2 -0
- package/dist/esm/biz-components/ProductHero/ProductHero.js.map +7 -0
- package/dist/esm/biz-components/ProductHero/index.d.ts +2 -0
- package/dist/esm/biz-components/ProductHero/index.js +2 -0
- package/dist/esm/biz-components/ProductHero/index.js.map +7 -0
- package/dist/esm/biz-components/ProductHero/types.d.ts +20 -0
- package/dist/esm/biz-components/ProductHero/types.js +1 -0
- package/dist/esm/biz-components/ProductHero/types.js.map +7 -0
- package/dist/esm/biz-components/Specs/dropdown.d.ts +11 -0
- package/dist/esm/biz-components/Specs/dropdown.js +3 -0
- package/dist/esm/biz-components/Specs/dropdown.js.map +7 -0
- package/dist/esm/biz-components/Specs/index.d.ts +6 -0
- package/dist/esm/biz-components/Specs/index.js +2 -0
- package/dist/esm/biz-components/Specs/index.js.map +7 -0
- package/dist/esm/biz-components/SpecsComparison/SpecsComparison.d.ts +7 -0
- package/dist/esm/biz-components/SpecsComparison/SpecsComparison.js +2 -0
- package/dist/esm/biz-components/SpecsComparison/SpecsComparison.js.map +7 -0
- package/dist/esm/biz-components/SpecsComparison/index.d.ts +2 -0
- package/dist/esm/biz-components/SpecsComparison/index.js +2 -0
- package/dist/esm/biz-components/SpecsComparison/index.js.map +7 -0
- package/dist/esm/biz-components/SpecsComparison/types.d.ts +34 -0
- package/dist/esm/biz-components/SpecsComparison/types.js +1 -0
- package/dist/esm/biz-components/SpecsComparison/types.js.map +7 -0
- package/dist/esm/biz-components/TabWithImage/TabWithImage.d.ts +7 -0
- package/dist/esm/biz-components/TabWithImage/TabWithImage.js +2 -0
- package/dist/esm/biz-components/TabWithImage/TabWithImage.js.map +7 -0
- package/dist/esm/biz-components/TabWithImage/index.d.ts +2 -0
- package/dist/esm/biz-components/TabWithImage/index.js +2 -0
- package/dist/esm/biz-components/TabWithImage/index.js.map +7 -0
- package/dist/esm/biz-components/TabWithImage/types.d.ts +28 -0
- package/dist/esm/biz-components/TabWithImage/types.js +1 -0
- package/dist/esm/biz-components/TabWithImage/types.js.map +7 -0
- package/dist/esm/biz-components/TabsGroup/index.d.ts +7 -0
- package/dist/esm/biz-components/TabsGroup/index.js +2 -0
- package/dist/esm/biz-components/TabsGroup/index.js.map +7 -0
- package/dist/esm/biz-components/TabsGroup/types.d.ts +16 -0
- package/dist/esm/biz-components/TabsGroup/types.js +1 -0
- package/dist/esm/biz-components/TabsGroup/types.js.map +7 -0
- package/dist/esm/biz-components/TabsWithMedia/TabsWithMedia.d.ts +7 -0
- package/dist/esm/biz-components/TabsWithMedia/TabsWithMedia.js +2 -0
- package/dist/esm/biz-components/TabsWithMedia/TabsWithMedia.js.map +7 -0
- package/dist/esm/biz-components/TabsWithMedia/index.d.ts +2 -0
- package/dist/esm/biz-components/TabsWithMedia/index.js +2 -0
- package/dist/esm/biz-components/TabsWithMedia/index.js.map +7 -0
- package/dist/esm/biz-components/TabsWithMedia/types.d.ts +40 -0
- package/dist/esm/biz-components/TabsWithMedia/types.js +1 -0
- package/dist/esm/biz-components/TabsWithMedia/types.js.map +7 -0
- package/dist/esm/biz-components/VideoFeature/VideoFeature.d.ts +7 -0
- package/dist/esm/biz-components/VideoFeature/VideoFeature.js +2 -0
- package/dist/esm/biz-components/VideoFeature/VideoFeature.js.map +7 -0
- package/dist/esm/biz-components/VideoFeature/index.d.ts +2 -0
- package/dist/esm/biz-components/VideoFeature/index.js +2 -0
- package/dist/esm/biz-components/VideoFeature/index.js.map +7 -0
- package/dist/esm/biz-components/VideoFeature/types.d.ts +18 -0
- package/dist/esm/biz-components/VideoFeature/types.js +1 -0
- package/dist/esm/biz-components/VideoFeature/types.js.map +7 -0
- package/dist/esm/biz-components/index.d.ts +61 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +3 -3
- package/dist/esm/cpn-components/CpnNavigation/index.js +1 -1
- package/dist/esm/cpn-components/CpnNavigation/index.js.map +2 -2
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +3 -3
- package/dist/esm/stories/MarqueeReview.stories.d.ts +73 -0
- package/dist/esm/stories/MarqueeReview.stories.js +19 -0
- package/dist/esm/stories/MarqueeReview.stories.js.map +7 -0
- package/dist/esm/stories/featureCards.stories.d.ts +28 -0
- package/dist/esm/stories/featureCards.stories.js +2 -0
- package/dist/esm/stories/featureCards.stories.js.map +7 -0
- package/dist/esm/stories/featureShowcase.stories.d.ts +28 -0
- package/dist/esm/stories/featureShowcase.stories.js +2 -0
- package/dist/esm/stories/featureShowcase.stories.js.map +7 -0
- package/dist/esm/stories/imageTextFeature.stories.d.ts +27 -0
- package/dist/esm/stories/imageTextFeature.stories.js +2 -0
- package/dist/esm/stories/imageTextFeature.stories.js.map +7 -0
- package/dist/esm/stories/imageWithText.stories.d.ts +27 -0
- package/dist/esm/stories/imageWithText.stories.js +2 -0
- package/dist/esm/stories/imageWithText.stories.js.map +7 -0
- package/dist/esm/stories/ksp.stories.d.ts +63 -0
- package/dist/esm/stories/ksp.stories.js +129 -0
- package/dist/esm/stories/ksp.stories.js.map +7 -0
- package/dist/esm/stories/productCompare.stories.d.ts +49 -0
- package/dist/esm/stories/productCompare.stories.js +63 -0
- package/dist/esm/stories/productCompare.stories.js.map +7 -0
- package/dist/esm/stories/productHero.stories.d.ts +28 -0
- package/dist/esm/stories/productHero.stories.js +2 -0
- package/dist/esm/stories/productHero.stories.js.map +7 -0
- package/dist/esm/stories/specs.stories.d.ts +13 -0
- package/dist/esm/stories/specs.stories.js +57 -0
- package/dist/esm/stories/specs.stories.js.map +7 -0
- package/dist/esm/stories/specsComparison.stories.d.ts +27 -0
- package/dist/esm/stories/specsComparison.stories.js +30 -0
- package/dist/esm/stories/specsComparison.stories.js.map +7 -0
- package/dist/esm/stories/tabWithImage.stories.d.ts +27 -0
- package/dist/esm/stories/tabWithImage.stories.js +2 -0
- package/dist/esm/stories/tabWithImage.stories.js.map +7 -0
- package/dist/esm/stories/tabsWithMedia.stories.d.ts +27 -0
- package/dist/esm/stories/tabsWithMedia.stories.js +2 -0
- package/dist/esm/stories/tabsWithMedia.stories.js.map +7 -0
- package/dist/esm/stories/videoFeature.stories.d.ts +28 -0
- package/dist/esm/stories/videoFeature.stories.js +2 -0
- package/dist/esm/stories/videoFeature.stories.js.map +7 -0
- package/dist/esm/types/props.d.ts +4 -0
- package/dist/tokens/base.css +3 -0
- package/package.json +4 -1
- package/tailwind.config.js +2 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { Img, Theme } from '../../types/props.js';
|
|
2
|
+
export interface ImageTextFeatureItem {
|
|
3
|
+
/** 功能图标 */
|
|
4
|
+
icon: string;
|
|
5
|
+
/** 功能标题 */
|
|
6
|
+
text: string;
|
|
7
|
+
/** 功能描述 */
|
|
8
|
+
desc: string;
|
|
9
|
+
}
|
|
10
|
+
export interface ImageTextFeatureProps {
|
|
11
|
+
data: {
|
|
12
|
+
/** 主标题 */
|
|
13
|
+
title: string;
|
|
14
|
+
/** 副标题 */
|
|
15
|
+
subtitle?: string;
|
|
16
|
+
/** PC端图片 */
|
|
17
|
+
imageUrl: string | Img;
|
|
18
|
+
/** 移动端图片 */
|
|
19
|
+
mobImageUrl?: string | Img;
|
|
20
|
+
/** 平板端图片 */
|
|
21
|
+
padImageUrl?: string | Img;
|
|
22
|
+
/** 功能项列表 */
|
|
23
|
+
items: ImageTextFeatureItem[];
|
|
24
|
+
/** 图片位置,默认 left */
|
|
25
|
+
imagePosition?: 'left' | 'right';
|
|
26
|
+
/** 主题,默认 light */
|
|
27
|
+
theme?: Theme;
|
|
28
|
+
};
|
|
29
|
+
/** 自定义类名 */
|
|
30
|
+
className?: string;
|
|
31
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var I=(t,e,m,g)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!n.call(t,r)&&r!==m&&i(t,r,{get:()=>e[r],enumerable:!(g=s(e,r))||g.enumerable});return t};var o=t=>I(i({},"__esModule",{value:!0}),t);var p={};module.exports=o(p);
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ImageTextFeature/types.ts"],
|
|
4
|
+
"sourcesContent": ["import type { Img, Theme } from '../../types/props.js'\n\nexport interface ImageTextFeatureItem {\n /** \u529F\u80FD\u56FE\u6807 */\n icon: string\n /** \u529F\u80FD\u6807\u9898 */\n text: string\n /** \u529F\u80FD\u63CF\u8FF0 */\n desc: string\n}\n\nexport interface ImageTextFeatureProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** PC\u7AEF\u56FE\u7247 */\n imageUrl: string | Img\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n mobImageUrl?: string | Img\n /** \u5E73\u677F\u7AEF\u56FE\u7247 */\n padImageUrl?: string | Img\n /** \u529F\u80FD\u9879\u5217\u8868 */\n items: ImageTextFeatureItem[]\n /** \u56FE\u7247\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left */\n imagePosition?: 'left' | 'right'\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
|
+
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
|
+
"names": ["types_exports", "__toCommonJS"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ImageWithTextProps } from './types.js';
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ImageWithTextProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
4
|
+
className?: string;
|
|
5
|
+
data?: Record<string, any>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";"use client";var I=Object.create;var i=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of k(t))!D.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(s=w(t,a))||s.enumerable});return e};var W=(e,t,o)=>(o=e!=null?I(y(e)):{},d(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e)),b=e=>d(i({},"__esModule",{value:!0}),e);var z={};H(z,{default:()=>R});module.exports=b(z);var p=require("react/jsx-runtime"),x=W(require("react")),m=require("../../components/index.js"),g=require("../../helpers/utils.js"),h=require("../../shared/Styles.js"),u=require("../../hooks/useExposure.js");const E="image",L="image_with_text",f=x.default.forwardRef(({data:e,className:t},o)=>{const{title:s,subtitle:a,desc:n,descIcon:r,imageUrl:T,padImageUrl:v,mobImageUrl:N,theme:c="dark"}=e,l=(0,x.useRef)(null);return(0,u.useExposure)(l,{componentType:E,componentName:L,componentTitle:s,componentDescription:a}),(0,x.useImperativeHandle)(o,()=>l.current),(0,p.jsxs)("section",{ref:l,"data-ui-component-id":"ImageWithText",className:(0,g.cn)("flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]",{"text-white":c==="dark","text-[#1f1f1f]":c==="light"},t),children:[(0,p.jsxs)("div",{className:"flex flex-col justify-center",children:[(0,p.jsx)(m.Heading,{as:"h2",size:4,html:s}),a&&(0,p.jsx)(m.Text,{as:"p",size:3,html:a,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,p.jsxs)("div",{className:"flex flex-row gap-[8px]",children:[r&&(0,p.jsx)("img",{src:r,alt:"icon",className:"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),n&&(0,p.jsx)(m.Heading,{as:"h4",size:5,html:n,className:"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]})]}),(0,p.jsx)("div",{className:"",children:(0,p.jsx)(m.Picture,{source:`${T},${v} 1024, ${N} 768`,className:"rounded-[10px] laptop:rounded-[16px]"})})]})});f.displayName="ImageWithText";var R=(0,h.withLayout)(f);
|
|
2
|
+
//# sourceMappingURL=ImageWithText.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ImageWithTextProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n imageUrl,\n padImageUrl,\n mobImageUrl,\n theme = 'dark',\n } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]',\n {\n 'text-white': theme === 'dark',\n 'text-[#1f1f1f]': theme === 'light',\n },\n className\n )}\n >\n <div className=\"flex flex-col justify-center\">\n <Heading as={'h2'} size={4} html={title} />\n {subtitle && (\n <Text\n as={'p'}\n size={3}\n html={subtitle}\n className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n )}\n <div className=\"flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n />\n )}\n </div>\n </div>\n <div className=\"\">\n <Picture\n source={`${imageUrl},${padImageUrl} 1024, ${mobImageUrl} 768`}\n className=\"rounded-[10px] laptop:rounded-[16px]\"\n />\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgDQ,IAAAI,EAAA,6BA/CRC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,kBAEhBC,EAAgB,EAAAC,QAAM,WAA+C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvG,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,MAAAC,EAAQ,MACV,EAAIV,EAEEW,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMS,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,gBACrB,aAAW,MACT,mFACA,CACE,aAAcD,IAAU,OACxB,iBAAkBA,IAAU,OAC9B,EACAT,CACF,EAEA,qBAAC,OAAI,UAAU,+BACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,EACxCC,MACC,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,yHACZ,KAEF,QAAC,OAAI,UAAU,0BACZ,UAAAE,MACC,OAAC,OACC,IAAKA,EACL,IAAI,OACJ,UAAU,sDACZ,EAEDD,MACC,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMA,EACN,UAAU,4GACZ,GAEJ,GACF,KACA,OAAC,OAAI,UAAU,GACb,mBAAC,WACC,OAAQ,GAAGE,CAAQ,IAAIC,CAAW,UAAUC,CAAW,OACvD,UAAU,uCACZ,EACF,GACF,CAEJ,CAAC,EAEDX,EAAc,YAAc,gBAE5B,IAAOV,KAAQ,cAAWU,CAAa",
|
|
6
|
+
"names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "imageUrl", "padImageUrl", "mobImageUrl", "theme", "boxRef"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var x=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},m=(e,t,o,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of y(t))!g.call(e,p)&&p!==o&&r(e,p,{get:()=>t[p],enumerable:!(f=a(t,p))||f.enumerable});return e};var i=(e,t,o)=>(o=e!=null?x(d(e)):{},m(t||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),j=e=>m(r({},"__esModule",{value:!0}),e);var l={};h(l,{default:()=>s.default});module.exports=j(l);var s=i(require("./ImageWithText.js"));
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ImageWithText/index.ts"],
|
|
4
|
+
"sourcesContent": ["export { default } from './ImageWithText.js'\nexport type { ImageWithTextProps } from './types.js'\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
|
|
6
|
+
"names": ["ImageWithText_exports", "__export", "__toCommonJS", "import_ImageWithText"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { Theme } from '../../types/props.js';
|
|
2
|
+
export interface ImageWithTextProps {
|
|
3
|
+
data: {
|
|
4
|
+
/** 主标题 */
|
|
5
|
+
title: string;
|
|
6
|
+
/** 副标题/描述 */
|
|
7
|
+
subtitle?: string;
|
|
8
|
+
/** 描述文本(通常是大号高亮文本) */
|
|
9
|
+
desc?: string;
|
|
10
|
+
/** 描述文本图标 */
|
|
11
|
+
descIcon?: string;
|
|
12
|
+
/** PC端图片 URL */
|
|
13
|
+
imageUrl: string;
|
|
14
|
+
/** 平板端图片 URL */
|
|
15
|
+
padImageUrl?: string;
|
|
16
|
+
/** 移动端图片 URL */
|
|
17
|
+
mobImageUrl?: string;
|
|
18
|
+
/** 主题,默认 dark */
|
|
19
|
+
theme?: Theme;
|
|
20
|
+
};
|
|
21
|
+
/** 自定义类名 */
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var p=(t,e,g,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!n.call(t,r)&&r!==g&&i(t,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return t};var o=t=>p(i({},"__esModule",{value:!0}),t);var l={};module.exports=o(l);
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ImageWithText/types.ts"],
|
|
4
|
+
"sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface ImageWithTextProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n subtitle?: string\n /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF09 */\n desc?: string\n /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807 */\n descIcon?: string\n /** PC\u7AEF\u56FE\u7247 URL */\n imageUrl: string\n /** \u5E73\u677F\u7AEF\u56FE\u7247 URL */\n padImageUrl?: string\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImageUrl?: string\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n theme?: Theme\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
|
+
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
|
+
"names": ["types_exports", "__toCommonJS"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* KSP 卡片项数据结构
|
|
3
|
+
*/
|
|
4
|
+
export interface KspCardItem {
|
|
5
|
+
/** 标题 */
|
|
6
|
+
title?: string;
|
|
7
|
+
/** 描述 */
|
|
8
|
+
desc?: string;
|
|
9
|
+
/** 桌面端图片 URL */
|
|
10
|
+
imageUrl?: string;
|
|
11
|
+
/** 移动端图片 URL */
|
|
12
|
+
mobImageUrl?: string;
|
|
13
|
+
/** 桌面端视频 URL */
|
|
14
|
+
videoUrl?: string;
|
|
15
|
+
/** 移动端视频 URL */
|
|
16
|
+
mobVideoUrl?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* KSP 数据结构
|
|
20
|
+
*/
|
|
21
|
+
export interface KspData {
|
|
22
|
+
/** 主标题 */
|
|
23
|
+
title?: string;
|
|
24
|
+
/** KSP 卡片列表(需要 7 个项) */
|
|
25
|
+
items: KspCardItem[];
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Ksp 组件 Props
|
|
29
|
+
*/
|
|
30
|
+
export interface KspProps {
|
|
31
|
+
/** KSP 数据 */
|
|
32
|
+
data: KspData;
|
|
33
|
+
/** 自定义类名 */
|
|
34
|
+
className?: string;
|
|
35
|
+
}
|
|
36
|
+
declare const _default: import("react").ForwardRefExoticComponent<Omit<KspProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
37
|
+
className?: string;
|
|
38
|
+
data?: Record<string, any>;
|
|
39
|
+
} & import("react").RefAttributes<any>>;
|
|
40
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var w=(a,p)=>{for(var l in p)m(a,l,{get:p[l],enumerable:!0})},f=(a,p,l,t)=>{if(p&&typeof p=="object"||typeof p=="function")for(let o of k(p))!h.call(a,o)&&o!==l&&m(a,o,{get:()=>p[o],enumerable:!(t=n(p,o))||t.enumerable});return a};var b=a=>f(m({},"__esModule",{value:!0}),a);var v={};w(v,{default:()=>g});module.exports=b(v);var e=require("react/jsx-runtime"),i=require("../../components/index.js"),d=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const s=({title:a,desc:p,imageUrl:l,mobImageUrl:t,videoUrl:o,mobVideoUrl:r,className:c})=>(0,e.jsxs)("div",{className:(0,d.cn)("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]",c),children:[o&&r?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:o,poster:l,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:r,poster:t,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(l||t)&&(0,e.jsx)(i.Picture,{source:`${l}, ${t} 768`,className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,e.jsxs)("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[(0,e.jsx)(i.Heading,{size:3,html:a,className:"ksp-card-title hidden w-full tablet:block"}),(0,e.jsx)(i.Heading,{size:2,html:a,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),(0,e.jsx)(i.Text,{size:2,html:p,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]});function N({data:a,className:p}){const{title:l,items:t}=a;return(0,e.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,d.cn)("ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]",p),children:[(0,e.jsx)(i.Heading,{as:"h1",size:4,html:l,className:"ksp-title text-left text-white laptop:text-center"}),(0,e.jsxs)("div",{className:"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex",children:[(0,e.jsxs)("div",{className:"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[0]}),(0,e.jsx)(s,{className:"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[1]})]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[4]}),(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[3]}),(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[2]})]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]",...t[5]}),(0,e.jsx)(s,{className:"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]",...t[6]})]})]}),(0,e.jsxs)("div",{className:"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden",children:[(0,e.jsx)(s,{className:"h-[240px] w-[100%]",...t[0]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[(0,e.jsx)(s,{className:"w-[50%]",...t[1]}),(0,e.jsx)(s,{className:"w-[50%]",...t[2]})]}),(0,e.jsx)(s,{className:"max-h-[240px] w-[100%]",...t[6]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[(0,e.jsx)(s,{className:"w-[50%]",...t[3]}),(0,e.jsx)(s,{className:"w-[50%]",...t[4]})]}),(0,e.jsx)(s,{className:"max-h-[280px] w-[100%]",...t[5]})]})]})}var g=(0,x.withLayout)(N);
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/Ksp/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n /** \u6807\u9898 */\n title?: string\n /** \u63CF\u8FF0 */\n desc?: string\n /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n imageUrl?: string\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImageUrl?: string\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n videoUrl?: string\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideoUrl?: string\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst ImageCard = ({\n title,\n desc,\n imageUrl,\n mobImageUrl,\n videoUrl,\n mobVideoUrl,\n className,\n}: ImageCardProps) => {\n return (\n <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n {videoUrl && mobVideoUrl ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={videoUrl}\n poster={imageUrl}\n className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideoUrl}\n poster={mobImageUrl}\n className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n />\n </>\n ) : (\n (imageUrl || mobImageUrl) && (\n <Picture\n source={`${imageUrl}, ${mobImageUrl} 768`}\n className=\"ksp-card-image h-full w-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n </div>\n )\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n * \n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u9700\u8981 7 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n * \n * @example\n * ```tsx\n * <Ksp\n * data={{\n * title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n * items: [\n * {\n * title: '\u9AD8\u6027\u80FD',\n * desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n * imageUrl: '/desktop.jpg',\n * mobImageUrl: '/mobile.jpg'\n * },\n * // ... \u9700\u8981 7 \u4E2A\u9879\n * ]\n * }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n const { title, items } = data\n\n return (\n <section\n data-ui-component-id=\"ksp\"\n className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n {/* ipad, pc\u7AEF */}\n <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[0]}\n />\n <ImageCard\n className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[1]}\n />\n </div>\n\n <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[4]}\n />\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[3]}\n />\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[2]}\n />\n </div>\n\n <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n {...items[5]}\n />\n <ImageCard\n className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n {...items[6]}\n />\n </div>\n </div>\n\n {/* \u624B\u673A\u7AEF */}\n <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n <ImageCard className=\"w-[50%]\" {...items[1]} />\n <ImageCard className=\"w-[50%]\" {...items[2]} />\n </div>\n <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n <ImageCard className=\"w-[50%]\" {...items[3]} />\n <ImageCard className=\"w-[50%]\" {...items[4]} />\n </div>\n <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n </div>\n </section>\n )\n}\n\n\nexport default withLayout(Ksp)"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2DQ,IAAAI,EAAA,6BA3DRC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCA6C3B,MAAMC,EAAY,CAAC,CACjB,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,CACF,OAEI,QAAC,OAAI,aAAW,MAAG,gEAAiEA,CAAS,EAC1F,UAAAF,GAAYC,KACX,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,EACL,OAAQF,EACR,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,EACL,OAAQF,EACR,UAAU,4HACZ,GACF,GAECD,GAAYC,OACX,OAAC,WACC,OAAQ,GAAGD,CAAQ,KAAKC,CAAW,OACnC,UAAU,+BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,mIACZ,GACF,GAEF,EA4BJ,SAASM,EAAI,CAAE,KAAAC,EAAM,UAAAF,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAS,CAAM,EAAID,EAEzB,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MAAG,gGAAiGF,CAAS,EAExH,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KAErG,QAAC,OAAI,UAAU,+GACb,qBAAC,OAAI,UAAU,yDACb,oBAACD,EAAA,CACC,UAAU,iFACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,iFACT,GAAGU,EAAM,CAAC,EACb,GACF,KAEA,QAAC,OAAI,UAAU,yDACb,oBAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,GACF,KAEA,QAAC,OAAI,UAAU,yDACb,oBAACV,EAAA,CACC,UAAU,4HACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,4HACT,GAAGU,EAAM,CAAC,EACb,GACF,GACF,KAGA,QAAC,OAAI,UAAU,gFACb,oBAACV,EAAA,CAAU,UAAU,qBAAsB,GAAGU,EAAM,CAAC,EAAG,KACxD,QAAC,OAAI,UAAU,mFACb,oBAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,KAC7C,OAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,GAC/C,KACA,OAACV,EAAA,CAAU,UAAU,yBAA0B,GAAGU,EAAM,CAAC,EAAG,KAC5D,QAAC,OAAI,UAAU,mFACb,oBAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,KAC7C,OAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,GAC/C,KACA,OAACV,EAAA,CAAU,UAAU,yBAA0B,GAAGU,EAAM,CAAC,EAAG,GAC9D,GACF,CAEJ,CAGA,IAAOhB,KAAQ,cAAWc,CAAG",
|
|
6
|
+
"names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "imageUrl", "mobImageUrl", "videoUrl", "mobVideoUrl", "className", "Ksp", "data", "items"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { Theme } from '../../types/props.js';
|
|
2
|
+
/**
|
|
3
|
+
* 评论项数据结构
|
|
4
|
+
*/
|
|
5
|
+
export interface ReviewItem {
|
|
6
|
+
/** 评论者名称 */
|
|
7
|
+
name: string;
|
|
8
|
+
/** 评论者头像 URL */
|
|
9
|
+
avatar: string;
|
|
10
|
+
/** 评论内容 */
|
|
11
|
+
comment: string;
|
|
12
|
+
/** 评分(1-5星) */
|
|
13
|
+
rating?: number;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* 轮播评论数据结构
|
|
17
|
+
*/
|
|
18
|
+
export interface MarqueeReviewData {
|
|
19
|
+
/** 主标题 */
|
|
20
|
+
title: string;
|
|
21
|
+
/** 副标题 */
|
|
22
|
+
subtitle: string;
|
|
23
|
+
/** 评论列表 */
|
|
24
|
+
items: ReviewItem[];
|
|
25
|
+
/** 主题:light 或 dark */
|
|
26
|
+
theme?: Theme;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* MarqueeReview 组件 Props
|
|
30
|
+
*/
|
|
31
|
+
export interface MarqueeReviewProps {
|
|
32
|
+
/** 评论数据 */
|
|
33
|
+
data: MarqueeReviewData;
|
|
34
|
+
/** 自定义类名 */
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
declare const _default: import("react").ForwardRefExoticComponent<Omit<MarqueeReviewProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
38
|
+
className?: string;
|
|
39
|
+
data?: Record<string, any>;
|
|
40
|
+
} & import("react").RefAttributes<any>>;
|
|
41
|
+
export default _default;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var b=(t,a)=>{for(var r in a)m(t,r,{get:a[r],enumerable:!0})},u=(t,a,r,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of k(a))!w.call(t,s)&&s!==r&&m(t,s,{get:()=>a[s],enumerable:!(i=g(a,s))||i.enumerable});return t};var y=t=>u(m({},"__esModule",{value:!0}),t);var R={};b(R,{default:()=>M});module.exports=y(R);var e=require("react/jsx-runtime"),l=require("../../components/index.js"),o=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const c=9,N=3,C=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(r,i)=>t.slice(i*a,(i+1)*a)),L=()=>(0,e.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})}),T=({item:t})=>(0,e.jsxs)("div",{className:"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]",children:[(0,e.jsxs)("div",{className:"flex justify-between",children:[(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(l.Text,{size:4,html:t.name,className:"hidden laptop:block"}),(0,e.jsx)(l.Text,{size:2,html:t.name,className:"block laptop:hidden"}),(0,e.jsx)("div",{className:"mt-2 flex gap-1",children:new Array(t.rating||5).fill(0).map((a,r)=>(0,e.jsx)(L,{},r))})]}),(0,e.jsxs)(l.Avatar,{size:"small",className:" h-[40px] w-[40px] laptop:h-[48px] laptop:w-[48px]",children:[(0,e.jsx)(l.AvatarImage,{src:t.avatar,alt:"avatar"}),(0,e.jsx)(l.AvatarFallback,{children:(t.name??"").slice(0,2).toUpperCase()})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)(l.Heading,{as:"h6",size:2,html:`"${t.comment}`,className:"line-clamp-5 min-h-[120px] text-wrap"})})]});function I({data:t,className:a}){const{title:r,subtitle:i,items:s=[],theme:f="light"}=t,d=C(s.length<c?[...s,...s.slice(c-s.length)]:s,N).slice(0,3).map(n=>[...n,...n]);return(0,e.jsxs)("section",{className:(0,o.cn)("flex flex-col items-center justify-center py-3 text-info-primary",a,{"aiui-dark":f==="dark"}),children:[(0,e.jsx)("style",{jsx:!0,children:`
|
|
2
|
+
@keyframes scroll {
|
|
3
|
+
from {
|
|
4
|
+
transform: translateX(0%);
|
|
5
|
+
}
|
|
6
|
+
to {
|
|
7
|
+
transform: translateY(-50%);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.fade-edges {
|
|
12
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
|
|
13
|
+
mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
|
|
14
|
+
-webkit-mask-repeat: no-repeat;
|
|
15
|
+
mask-repeat: no-repeat;
|
|
16
|
+
-webkit-mask-size: 100% 100%;
|
|
17
|
+
mask-size: 100% 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.scroll-track {
|
|
21
|
+
animation: scroll 20s linear infinite;
|
|
22
|
+
height: fit-content;
|
|
23
|
+
}
|
|
24
|
+
`}),(0,e.jsx)(l.Heading,{as:"h1",size:4,html:r,className:"w-full text-left laptop:text-center"}),(0,e.jsx)(l.Text,{size:2,html:i,className:"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,e.jsx)("div",{className:(0,o.cn)("fade-edges mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]"),children:d.map((n,p)=>(0,e.jsx)("div",{className:(0,o.cn)("scroll-track relative flex flex-col gap-4 flex-1",{"top-10":p===0||p===2,"hidden desktop:flex":p===1,"hidden tablet:flex":p===2}),children:n.map((h,v)=>(0,e.jsx)(T,{item:h},v))},p))})]})}var M=(0,x.withLayout)(I);
|
|
25
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MarqueeReview/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Theme } from '../../types/props.js'\n\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n name: string\n /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n avatar: string\n /** \u8BC4\u8BBA\u5185\u5BB9 */\n comment: string\n /** \u8BC4\u5206(1-5\u661F) */\n rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898 */\n subtitle: string\n /** \u8BC4\u8BBA\u5217\u8868 */\n items: ReviewItem[]\n /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n /** \u8BC4\u8BBA\u6570\u636E */\n data: MarqueeReviewData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n array.slice(index * size, (index + 1) * size)\n )\n}\n\nconst StarIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n)\n\ninterface CardProps {\n item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n return (\n <div className=\"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]\">\n <div className=\"flex justify-between\">\n <div className=\"flex flex-col\">\n <Text size={4} html={item.name} className=\"hidden laptop:block\" />\n <Text size={2} html={item.name} className=\"block laptop:hidden\" />\n <div className=\"mt-2 flex gap-1\">\n {new Array(item.rating || 5).fill(0).map((_, index) => (\n <StarIcon key={index} />\n ))}\n </div>\n </div>\n <Avatar size=\"small\" className=\" h-[40px] w-[40px] laptop:h-[48px] laptop:w-[48px]\">\n <AvatarImage src={item.avatar} alt=\"avatar\" />\n <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n </Avatar>\n </div>\n <div>\n <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n </div>\n </div>\n )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n * data={{\n * title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n * subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n * items: [\n * {\n * name: \"\u5F20\u4E09\",\n * avatar: \"/avatar1.jpg\",\n * comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n * rating: 5\n * }\n * ]\n * }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n const { title, subtitle, items = [], theme = 'light' } = data\n\n const chunkItems = _chunk(\n items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n COUNT\n )\n .slice(0, 3)\n .map(item => [...item, ...item])\n\n return (\n <section className={cn('flex flex-col items-center justify-center py-3 text-info-primary', className, { 'aiui-dark': theme === 'dark' })}>\n <style jsx>\n {`\n @keyframes scroll {\n from {\n transform: translateX(0%);\n }\n to {\n transform: translateY(-50%);\n }\n }\n\n .fade-edges {\n -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);\n mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n }\n\n .scroll-track {\n animation: scroll 20s linear infinite;\n height: fit-content;\n }\n `}\n </style>\n <Heading as=\"h1\" size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n <Text\n size={2}\n html={subtitle}\n className=\"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n <div\n className={cn(\n 'fade-edges mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]'\n )}\n >\n {chunkItems.map((items, index) => (\n <div\n key={index}\n className={cn('scroll-track relative flex flex-col gap-4 flex-1', {\n 'top-10': index === 0 || index === 2,\n 'hidden desktop:flex': index === 1,\n 'hidden tablet:flex': index === 2,\n })}\n >\n {items.map((item, innerIndex) => (\n <Card key={innerIndex} item={item} />\n ))}\n </div>\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(MarqueeReview)"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsDI,IAAAI,EAAA,6BAtDJC,EAAmE,qCACnEC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,OACf,OAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,QAAC,OAAI,UAAU,uLACb,qBAAC,OAAI,UAAU,uBACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,OAAI,UAAU,kBACZ,aAAI,MAAMA,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,OAC3C,OAACC,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,KACA,QAAC,UAAO,KAAK,QAAQ,UAAU,sDAC7B,oBAAC,eAAY,IAAKG,EAAK,OAAQ,IAAI,SAAS,KAC5C,OAAC,kBAAiB,UAAAA,EAAK,MAAQ,IAAI,MAAM,EAAG,CAAC,EAAE,YAAY,EAAE,GAC/D,GACF,KACA,OAAC,OACC,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAM,IAAIA,EAAK,OAAO,GAAI,UAAU,uCAAuC,EACvG,GACF,EA2BJ,SAASC,EAAc,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAuB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,OAAQ,EAAIL,EAEnDM,EAAaf,EACjBa,EAAM,OAASf,EAAmB,CAAC,GAAGe,EAAO,GAAGA,EAAM,MAAMf,EAAmBe,EAAM,MAAM,CAAC,EAAIA,EAChGd,CACF,EACG,MAAM,EAAG,CAAC,EACV,IAAIQ,GAAQ,CAAC,GAAGA,EAAM,GAAGA,CAAI,CAAC,EAEjC,SACE,QAAC,WAAQ,aAAW,MAAG,mEAAqEG,EAAW,CAAE,YAAaI,IAAU,MAAO,CAAC,EACtI,oBAAC,SAAM,IAAG,GACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAwBH,KACA,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMH,EAAO,UAAU,sCAAsC,KACvF,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,8KACZ,KACA,OAAC,OACC,aAAW,MACT,mHACF,EAEC,SAAAG,EAAW,IAAI,CAACF,EAAOT,OACtB,OAAC,OAEC,aAAW,MAAG,mDAAoD,CAChE,SAAUA,IAAU,GAAKA,IAAU,EACnC,sBAAuBA,IAAU,EACjC,qBAAsBA,IAAU,CAClC,CAAC,EAEA,SAAAS,EAAM,IAAI,CAACN,EAAMS,OAChB,OAACV,EAAA,CAAsB,KAAMC,GAAlBS,CAAwB,CACpC,GATIZ,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOZ,KAAQ,cAAWgB,CAAa",
|
|
6
|
+
"names": ["MarqueeReview_exports", "__export", "MarqueeReview_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "FIX_ITEMS_LENGTH", "COUNT", "_chunk", "array", "size", "_", "index", "StarIcon", "Card", "item", "MarqueeReview", "data", "className", "title", "subtitle", "items", "theme", "chunkItems", "innerIndex"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { Media, Theme, Shape } from '../../types/props.js';
|
|
2
|
+
export interface ProductItemData {
|
|
3
|
+
/** 产品标签文本 */
|
|
4
|
+
text?: string;
|
|
5
|
+
/** 桌面端媒体(视频或图片) */
|
|
6
|
+
media?: Media;
|
|
7
|
+
/** 移动端媒体(视频或图片) */
|
|
8
|
+
mobMedia?: Media;
|
|
9
|
+
/** 桌面端封面图(仅用于视频) */
|
|
10
|
+
poster?: string;
|
|
11
|
+
/** 移动端封面图(仅用于视频) */
|
|
12
|
+
mobPoster?: string;
|
|
13
|
+
}
|
|
14
|
+
export interface ProductCompareProps {
|
|
15
|
+
/** 组件数据 */
|
|
16
|
+
data: {
|
|
17
|
+
/** 主标题 */
|
|
18
|
+
title?: string;
|
|
19
|
+
/** 副标题 */
|
|
20
|
+
subtitle?: string;
|
|
21
|
+
/** 我们的产品数据 */
|
|
22
|
+
ourProduct?: ProductItemData;
|
|
23
|
+
/** 竞品数据 */
|
|
24
|
+
competitor?: ProductItemData;
|
|
25
|
+
/** 主题:light 或 dark */
|
|
26
|
+
theme?: Theme;
|
|
27
|
+
/** 形状:rounded 或 square */
|
|
28
|
+
shape?: Shape;
|
|
29
|
+
};
|
|
30
|
+
/** 外层容器类名 */
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductCompareProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
34
|
+
className?: string;
|
|
35
|
+
data?: Record<string, any>;
|
|
36
|
+
} & import("react").RefAttributes<any>>;
|
|
37
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var a in o)n(e,a,{get:o[a],enumerable:!0})},N=(e,o,a,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of h(o))!g.call(e,p)&&p!==a&&n(e,p,{get:()=>o[p],enumerable:!(r=b(o,p))||r.enumerable});return e};var w=e=>N(n({},"__esModule",{value:!0}),e);var k={};v(k,{default:()=>P});module.exports=w(k);var t=require("react/jsx-runtime"),i=require("react"),l=require("../../components/index.js"),c=require("../../helpers/index.js"),f=require("../../shared/Styles.js");function x({children:e,offset:o=800}){const[a,r]=(0,i.useState)(!1),p=(0,i.useRef)(null);return(0,i.useEffect)(()=>{const d=new IntersectionObserver(([m])=>m.isIntersecting&&r(!0),{rootMargin:`${o}px`});return p.current&&d.observe(p.current),()=>d.disconnect()},[o]),(0,t.jsx)("div",{ref:p,className:"size-full",children:a&&e})}function s({media:e,poster:o,className:a}){return e?.url?e.mimeType?.startsWith("video/")?(0,t.jsx)("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:o,preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,"webkit-playsinline":"true","x5-video-player-type":"h5","x5-video-player-fullscreen":"false","x5-playsinline":"true",className:a,width:e.width,height:e.height}):(0,t.jsx)("img",{src:e.url,alt:e.alt||"",className:a,width:e.width,height:e.height}):null}function y(e){const{title:o,subtitle:a,ourProduct:r={},competitor:p={},theme:d="light",shape:m="rounded"}=e.data,u={rounded:"rounded-[12px] laptop:rounded-[16px]",square:"rounded-none"}[m];return(0,t.jsxs)("section",{className:(0,c.cn)("product-compare text-info-primary bg-container-primary",e.className,{"aiui-dark":d==="dark"}),children:[o&&(0,t.jsx)(l.Heading,{as:"h2",size:3,html:o,className:"section-title text-left"}),a&&(0,t.jsx)(l.Text,{as:"p",size:2,html:a,className:"section-subtitle mt-[4px] text-left text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,t.jsxs)("div",{className:"product-compare-container mt-[24px] flex w-full flex-col items-stretch gap-[16px] tablet:flex-row tablet:flex-nowrap",children:[(0,t.jsxs)("div",{className:(0,c.cn)("product-compare-item product-compare-competitor relative order-2 flex-shrink overflow-hidden tablet:order-1 tablet:w-[50%] laptop:w-[39.30%]",u),children:[(0,t.jsx)("div",{className:"product-compare-label product-compare-competitor-label absolute left-[16px] top-[16px] rounded-[24px] bg-[#000] bg-opacity-20 px-[20px] pb-[10px] pt-[11px] font-bold laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]",children:(0,t.jsx)(l.Heading,{as:"h6",className:"font-bold",size:1,children:p.text})}),(0,t.jsxs)(x,{offset:1500,children:[(0,t.jsx)(s,{media:p.media,poster:p.poster,className:"product-compare-media product-compare-competitor-media hidden w-full h-full object-cover laptop:block"}),(0,t.jsx)(s,{media:p.mobMedia,poster:p.mobPoster,className:"product-compare-media product-compare-competitor-media-mobile block laptop:hidden"})]})]}),(0,t.jsxs)("div",{className:(0,c.cn)("product-compare-item product-compare-our-product relative order-1 flex-shrink overflow-hidden tablet:order-2 tablet:w-[50%] laptop:w-[59.53%]",u),children:[(0,t.jsx)("div",{className:"product-compare-label product-compare-our-product-label absolute left-[16px] top-[16px] rounded-[24px] bg-brand-0 px-[20px] pb-[10px] pt-[11px] font-bold laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]",children:(0,t.jsx)(l.Heading,{as:"h6",className:"font-bold",size:1,children:r.text})}),(0,t.jsxs)(x,{offset:1500,children:[(0,t.jsx)(s,{media:r.media,poster:r.poster,className:"product-compare-media product-compare-our-product-media hidden w-full laptop:block"}),(0,t.jsx)(s,{media:r.mobMedia,poster:r.mobPoster,className:"product-compare-media product-compare-our-product-media-mobile block laptop:hidden"})]})]})]})]})}var P=(0,f.withLayout)(y);
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ProductCompare/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme, Shape } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js';\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n const [loaded, setLoaded] = useState(false)\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const observer = new IntersectionObserver(\n ([entry]) => entry.isIntersecting && setLoaded(true),\n { rootMargin: `${offset}px` }\n )\n ref.current && observer.observe(ref.current)\n return () => observer.disconnect()\n }, [offset])\n\n return <div ref={ref} className=\"size-full\">{loaded && children}</div>\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: string; className?: string }) {\n if (!media?.url) return null\n \n const isVideo = media.mimeType?.startsWith('video/')\n \n if (isVideo) {\n return (\n <video\n src={media.url}\n playsInline\n autoPlay\n muted\n loop\n poster={poster}\n preload=\"metadata\"\n disablePictureInPicture\n disableRemotePlayback\n webkit-playsinline=\"true\"\n x5-video-player-type=\"h5\"\n x5-video-player-fullscreen=\"false\"\n x5-playsinline=\"true\"\n className={className}\n width={media.width}\n height={media.height}\n />\n )\n }\n \n return (\n <img\n src={media.url}\n alt={media.alt || ''}\n className={className}\n width={media.width}\n height={media.height}\n />\n )\n}\n\nexport interface ProductItemData {\n /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n text?: string\n /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n media?: Media\n /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n mobMedia?: Media\n /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n poster?: string\n /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n mobPoster?: string\n}\n\nexport interface ProductCompareProps {\n /** \u7EC4\u4EF6\u6570\u636E */\n data: {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u6211\u4EEC\u7684\u4EA7\u54C1\u6570\u636E */\n ourProduct?: ProductItemData\n /** \u7ADE\u54C1\u6570\u636E */\n competitor?: ProductItemData\n /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n theme?: Theme\n /** \u5F62\u72B6\uFF1Arounded \u6216 square */\n shape?: Shape\n }\n /** \u5916\u5C42\u5BB9\u5668\u7C7B\u540D */\n className?: string\n}\n\nfunction ProductCompare(props: ProductCompareProps) {\n const { title, subtitle, ourProduct = {}, competitor = {}, theme = 'light', shape = 'rounded' } = props.data\n \n // \u6839\u636E\u5F62\u72B6\u8BBE\u7F6E\u5706\u89D2\n const shapeClass = {\n rounded: 'rounded-[12px] laptop:rounded-[16px]',\n square: 'rounded-none',\n }[shape]\n\n return (\n <section className={cn('product-compare text-info-primary bg-container-primary', props.className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Heading as={'h2'} size={3} html={title} className=\"section-title text-left\" />}\n {subtitle && <Text\n as=\"p\"\n size={2}\n html={subtitle}\n className=\"section-subtitle mt-[4px] text-left text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />}\n <div className=\"product-compare-container mt-[24px] flex w-full flex-col items-stretch gap-[16px] tablet:flex-row tablet:flex-nowrap\">\n <div className={cn('product-compare-item product-compare-competitor relative order-2 flex-shrink overflow-hidden tablet:order-1 tablet:w-[50%] laptop:w-[39.30%]', shapeClass)}>\n <div className=\"product-compare-label product-compare-competitor-label absolute left-[16px] top-[16px] rounded-[24px] bg-[#000] bg-opacity-20 px-[20px] pb-[10px] pt-[11px] font-bold laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]\">\n <Heading as={'h6'} className=\"font-bold\" size={1}>\n {competitor.text}\n </Heading>\n </div>\n <LazyMedia offset={1500}>\n <MediaElement\n media={competitor.media}\n poster={competitor.poster}\n className=\"product-compare-media product-compare-competitor-media hidden w-full h-full object-cover laptop:block\"\n />\n <MediaElement\n media={competitor.mobMedia}\n poster={competitor.mobPoster}\n className=\"product-compare-media product-compare-competitor-media-mobile block laptop:hidden\"\n />\n </LazyMedia>\n </div>\n <div className={cn('product-compare-item product-compare-our-product relative order-1 flex-shrink overflow-hidden tablet:order-2 tablet:w-[50%] laptop:w-[59.53%]', shapeClass)}>\n <div className=\"product-compare-label product-compare-our-product-label absolute left-[16px] top-[16px] rounded-[24px] bg-brand-0 px-[20px] pb-[10px] pt-[11px] font-bold laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]\">\n <Heading as={'h6'} className=\"font-bold\" size={1}>\n {ourProduct.text}\n </Heading>\n </div>\n <LazyMedia offset={1500}>\n <MediaElement\n media={ourProduct.media}\n poster={ourProduct.poster}\n className=\"product-compare-media product-compare-our-product-media hidden w-full laptop:block\"\n />\n <MediaElement\n media={ourProduct.mobMedia}\n poster={ourProduct.mobPoster}\n className=\"product-compare-media product-compare-our-product-media-mobile block laptop:hidden\"\n />\n </LazyMedia>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withLayout(ProductCompare)"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmBS,IAAAI,EAAA,6BAnBTC,EAA4C,iBAC5CC,EAA8B,qCAC9BC,EAAmB,kCAEnBC,EAA2B,kCAE3B,SAASC,EAAU,CAAE,SAAAC,EAAU,OAAAC,EAAS,GAAI,EAAmD,CAC7F,KAAM,CAACC,EAAQC,CAAS,KAAI,YAAS,EAAK,EACpCC,KAAM,UAAuB,IAAI,EAEvC,sBAAU,IAAM,CACd,MAAMC,EAAW,IAAI,qBACnB,CAAC,CAACC,CAAK,IAAMA,EAAM,gBAAkBH,EAAU,EAAI,EACnD,CAAE,WAAY,GAAGF,CAAM,IAAK,CAC9B,EACA,OAAAG,EAAI,SAAWC,EAAS,QAAQD,EAAI,OAAO,EACpC,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACJ,CAAM,CAAC,KAEJ,OAAC,OAAI,IAAKG,EAAK,UAAU,YAAa,SAAAF,GAAUF,EAAS,CAClE,CAEA,SAASO,EAAa,CAAE,MAAAC,EAAO,OAAAC,EAAQ,UAAAC,CAAU,EAA2D,CAC1G,OAAKF,GAAO,IAEIA,EAAM,UAAU,WAAW,QAAQ,KAI/C,OAAC,SACC,IAAKA,EAAM,IACX,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,OAAQC,EACR,QAAQ,WACR,wBAAuB,GACvB,sBAAqB,GACrB,qBAAmB,OACnB,uBAAqB,KACrB,6BAA2B,QAC3B,iBAAe,OACf,UAAWC,EACX,MAAOF,EAAM,MACb,OAAQA,EAAM,OAChB,KAKF,OAAC,OACC,IAAKA,EAAM,IACX,IAAKA,EAAM,KAAO,GAClB,UAAWE,EACX,MAAOF,EAAM,MACb,OAAQA,EAAM,OAChB,EAlCsB,IAoC1B,CAmCA,SAASG,EAAeC,EAA4B,CAClD,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,WAAAC,EAAa,CAAC,EAAG,WAAAC,EAAa,CAAC,EAAG,MAAAC,EAAQ,QAAS,MAAAC,EAAQ,SAAU,EAAIN,EAAM,KAGlGO,EAAa,CACjB,QAAS,uCACT,OAAQ,cACV,EAAED,CAAK,EAEP,SACE,QAAC,WAAQ,aAAW,MAAG,yDAA0DN,EAAM,UAAW,CAAE,YAAaK,IAAU,MAAO,CAAC,EAChI,UAAAJ,MAAS,OAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAMA,EAAO,UAAU,0BAA0B,EACtFC,MAAY,OAAC,QACZ,GAAG,IACH,KAAM,EACN,KAAMA,EACN,UAAU,mIACZ,KACA,QAAC,OAAI,UAAU,uHACb,qBAAC,OAAI,aAAW,MAAG,+IAAgJK,CAAU,EAC3K,oBAAC,OAAI,UAAU,uSACb,mBAAC,WAAQ,GAAI,KAAM,UAAU,YAAY,KAAM,EAC5C,SAAAH,EAAW,KACd,EACF,KACA,QAACjB,EAAA,CAAU,OAAQ,KACjB,oBAACQ,EAAA,CACC,MAAOS,EAAW,MAClB,OAAQA,EAAW,OACnB,UAAU,wGACZ,KACA,OAACT,EAAA,CACC,MAAOS,EAAW,SAClB,OAAQA,EAAW,UACnB,UAAU,oFACZ,GACF,GACF,KACA,QAAC,OAAI,aAAW,MAAG,gJAAiJG,CAAU,EAC5K,oBAAC,OAAI,UAAU,2RACb,mBAAC,WAAQ,GAAI,KAAM,UAAU,YAAY,KAAM,EAC5C,SAAAJ,EAAW,KACd,EACF,KACA,QAAChB,EAAA,CAAU,OAAQ,KACjB,oBAACQ,EAAA,CACC,MAAOQ,EAAW,MAClB,OAAQA,EAAW,OACnB,UAAU,qFACZ,KACA,OAACR,EAAA,CACC,MAAOQ,EAAW,SAClB,OAAQA,EAAW,UACnB,UAAU,qFACZ,GACF,GACF,GACF,GACF,CAEJ,CAEA,IAAOvB,KAAQ,cAAWmB,CAAc",
|
|
6
|
+
"names": ["ProductCompare_exports", "__export", "ProductCompare_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "LazyMedia", "children", "offset", "loaded", "setLoaded", "ref", "observer", "entry", "MediaElement", "media", "poster", "className", "ProductCompare", "props", "title", "subtitle", "ourProduct", "competitor", "theme", "shape", "shapeClass"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ProductHeroProps } from './types.js';
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ProductHeroProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
4
|
+
className?: string;
|
|
5
|
+
data?: Record<string, any>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";"use client";var P=Object.create;var i=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var s in e)i(t,s,{get:e[s],enumerable:!0})},c=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of N(e))!k.call(t,p)&&p!==s&&i(t,p,{get:()=>e[p],enumerable:!(r=v(e,p))||r.enumerable});return t};var T=(t,e,s)=>(s=t!=null?P(g(t)):{},c(e||!t||!t.__esModule?i(s,"default",{value:t,enumerable:!0}):s,t)),y=t=>c(i({},"__esModule",{value:!0}),t);var R={};w(R,{default:()=>E});module.exports=y(R);var o=require("react/jsx-runtime"),l=T(require("react")),a=require("../../components/index.js"),d=require("../../helpers/utils.js"),u=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const L="image",D="product_hero",n=l.default.forwardRef(({data:t,className:e},s)=>{const{title:r,subtitle:p,ctaText:x,poster:b,mobPoster:h,ctaLink:H}=t,m=(0,l.useRef)(null);return(0,f.useExposure)(m,{componentType:L,componentName:D,componentTitle:r,componentDescription:p}),(0,l.useImperativeHandle)(s,()=>m.current),(0,o.jsxs)("section",{ref:m,"data-ui-component-id":"ProductHero",className:(0,d.cn)("flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",e),children:[(0,o.jsxs)("div",{className:"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[(0,o.jsxs)("div",{children:[(0,o.jsx)(a.Heading,{as:"h3",size:4,html:r}),(0,o.jsx)(a.Heading,{as:"h4",size:2,html:p,className:"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),(0,o.jsx)(a.Text,{as:"p",size:2,html:p,className:"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),(0,o.jsx)("a",{href:H,children:(0,o.jsx)(a.Button,{className:"w-fit",children:x})})]}),(0,o.jsx)(a.Picture,{className:"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${b}, ${h} 768`})]})});n.displayName="ProductHero";var E=(0,u.withLayout)(n);
|
|
2
|
+
//# sourceMappingURL=ProductHero.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n const { title, subtitle, ctaText, poster, mobPoster, ctaLink } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ProductHero\"\n className={cn(\n 'flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n className\n )}\n >\n <div className=\"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n <div>\n <Heading as={'h3'} size={4} html={title} />\n <Heading\n as={'h4'}\n size={2}\n html={subtitle}\n className=\"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n />\n <Text\n as={'p'}\n size={2}\n html={subtitle}\n className=\"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n />\n </div>\n <a href={ctaLink}>\n <Button className=\"w-fit\">{ctaText}</Button>\n </a>\n </div>\n <Picture\n className=\"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n source={`${poster}, ${mobPoster} 768`}\n />\n </section>\n )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCQ,IAAAI,EAAA,6BAlCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,uHACAR,CACF,EAEA,qBAAC,OAAI,UAAU,oFACb,qBAAC,OACC,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,KACzC,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,kEACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,kEACZ,GACF,KACA,OAAC,KAAE,KAAMI,EACP,mBAAC,UAAO,UAAU,QAAS,SAAAH,EAAQ,EACrC,GACF,KACA,OAAC,WACC,UAAU,6FACV,OAAQ,GAAGC,CAAM,KAAKC,CAAS,OACjC,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,CAAW",
|
|
6
|
+
"names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "boxRef"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var m=Object.create;var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var a=(o,r)=>{for(var e in r)p(o,e,{get:r[e],enumerable:!0})},s=(o,r,e,f)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of x(r))!P.call(o,t)&&t!==e&&p(o,t,{get:()=>r[t],enumerable:!(f=u(r,t))||f.enumerable});return o};var c=(o,r,e)=>(e=o!=null?m(y(o)):{},s(r||!o||!o.__esModule?p(e,"default",{value:o,enumerable:!0}):e,o)),j=o=>s(p({},"__esModule",{value:!0}),o);var l={};a(l,{default:()=>d.default});module.exports=j(l);var d=c(require("./ProductHero.js"));
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ProductHero/index.ts"],
|
|
4
|
+
"sourcesContent": ["export { default } from './ProductHero.js'\nexport type { ProductHeroProps } from './types.js'\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
|
|
6
|
+
"names": ["ProductHero_exports", "__export", "__toCommonJS", "import_ProductHero"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface ProductHeroProps {
|
|
2
|
+
data: {
|
|
3
|
+
/** 主标题 */
|
|
4
|
+
title: string;
|
|
5
|
+
/** 副标题 */
|
|
6
|
+
subtitle: string;
|
|
7
|
+
/** CTA 按钮文本 */
|
|
8
|
+
ctaText: string;
|
|
9
|
+
/** CTA 按钮链接 */
|
|
10
|
+
ctaLink: string;
|
|
11
|
+
/** 桌面端图片 URL */
|
|
12
|
+
poster: string;
|
|
13
|
+
/** 移动端图片 URL */
|
|
14
|
+
mobPoster: string;
|
|
15
|
+
/** 3D 模型源(可选,暂未使用) */
|
|
16
|
+
modelSrc?: string;
|
|
17
|
+
};
|
|
18
|
+
/** 自定义类名 */
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(r,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of o(t))!a.call(r,s)&&s!==n&&e(r,s,{get:()=>t[s],enumerable:!(i=g(t,s))||i.enumerable});return r};var l=r=>c(e({},"__esModule",{value:!0}),r);var d={};module.exports=l(d);
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ProductHero/types.ts"],
|
|
4
|
+
"sourcesContent": ["export interface ProductHeroProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898 */\n subtitle: string\n /** CTA \u6309\u94AE\u6587\u672C */\n ctaText: string\n /** CTA \u6309\u94AE\u94FE\u63A5 */\n ctaLink: string\n /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n poster: string\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobPoster: string\n /** 3D \u6A21\u578B\u6E90\uFF08\u53EF\u9009\uFF0C\u6682\u672A\u4F7F\u7528\uFF09 */\n modelSrc?: string\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
|
+
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
|
+
"names": ["types_exports", "__toCommonJS"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type DropDownProps = {
|
|
2
|
+
index: number;
|
|
3
|
+
active: any;
|
|
4
|
+
list: any;
|
|
5
|
+
setActive: any;
|
|
6
|
+
setVisible: any;
|
|
7
|
+
visible: any;
|
|
8
|
+
filterActive: any;
|
|
9
|
+
};
|
|
10
|
+
declare const DropDown: ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default DropDown;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(o,e)=>{for(var a in e)p(o,a,{get:e[a],enumerable:!0})},D=(o,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!v.call(o,t)&&t!==a&&p(o,t,{get:()=>e[t],enumerable:!(s=x(e,t))||s.enumerable});return o};var k=o=>D(p({},"__esModule",{value:!0}),o);var C={};y(C,{default:()=>E});module.exports=k(C);var c=require("react/jsx-runtime"),l=require("react");const g="openDropDown",w=({index:o,active:e,list:a,setActive:s,setVisible:t,visible:u,filterActive:i})=>{const f=(0,l.useRef)(null);(0,l.useEffect)(()=>{const n=r=>{const d=r?.target?.getAttribute?.("class");!f?.current?.contains(r?.target)&&!d?.includes(g)&&t({...u,[o]:!1})};return document.addEventListener("click",n),()=>document.removeEventListener("click",n)},[]);const h=(0,l.useMemo)(()=>{const n=Object.keys(i||{});return a?.filter(r=>!n?.find(b=>i?.[b]?.handle===r?.handle))},[i,a]);return(0,c.jsx)("div",{ref:f,className:`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${u?.[o]?"block":"hidden"}`,children:(0,c.jsx)("div",{className:"m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0",children:h?.map((n,r)=>{const d=n?.sku||n?.variants?.[0]?.sku;return(0,c.jsx)("div",{onClick:()=>{s({...e,[r]:{sku:d,name:n?.name,handle:n?.handle}}),t({...u,[r]:!1})},title:n?.name,className:`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]
|
|
2
|
+
${n?.handle===e?.handle?"bg-[#EAEAEC]":""}`,children:n?.name},r)})})})};var E=w;
|
|
3
|
+
//# sourceMappingURL=dropdown.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/Specs/dropdown.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n index: number\n active: any\n list: any\n setActive: any\n setVisible: any\n visible: any\n filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n const dropDownRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: any) => {\n const isDel = event?.target?.getAttribute?.('class')\n const isContainer = !dropDownRef?.current?.contains(event?.target)\n if (isContainer && !isDel?.includes(clickContent)) {\n setVisible({ ...visible, [index]: false })\n }\n }\n document.addEventListener('click', handleClickOutside)\n return () => document.removeEventListener('click', handleClickOutside)\n }, [])\n\n const handleList = useMemo(() => {\n const activeIndex = Object.keys(filterActive || {})\n return list?.filter((item: { handle: any }) => {\n const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n return !currentIndex\n })\n }, [filterActive, list])\n\n return (\n <div\n ref={dropDownRef}\n className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${visible?.[index] ? 'block' : 'hidden'}`}\n >\n <div className={'m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0'}>\n {handleList?.map((item: any, index: number) => {\n const currentSku = item?.sku || item?.variants?.[0]?.sku\n return (\n <div\n key={index}\n onClick={() => {\n setActive({\n ...active,\n [index]: {\n sku: currentSku,\n name: item?.name,\n handle: item?.handle,\n },\n })\n setVisible({ ...visible, [index]: false })\n }}\n title={item?.name}\n className={`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]\n ${item?.handle === active?.handle ? 'bg-[#EAEAEC]' : ''}`}\n >\n {item?.name}\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default DropDown\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8CY,IAAAI,EAAA,6BA9CZC,EAA2C,iBAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,KAAc,UAAuB,IAAI,KAE/C,aAAU,IAAM,CACd,MAAMC,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,KAAa,WAAQ,IAAM,CAC/B,MAAMC,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,SACE,OAAC,OACC,IAAKK,EACL,UAAW,2GAA2GF,IAAUL,CAAK,EAAI,QAAU,QAAQ,GAE3J,mBAAC,OAAI,UAAW,+FACb,SAAAW,GAAY,IAAI,CAACE,EAAWb,IAAkB,CAC7C,MAAMe,EAAaF,GAAM,KAAOA,GAAM,WAAW,CAAC,GAAG,IACrD,SACE,OAAC,OAEC,QAAS,IAAM,CACbV,EAAU,CACR,GAAGF,EACH,CAACD,CAAK,EAAG,CACP,IAAKe,EACL,KAAMF,GAAM,KACZ,OAAQA,GAAM,MAChB,CACF,CAAC,EACDT,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAC3C,EACA,MAAOa,GAAM,KACb,UAAW;AAAA,kBACPA,GAAM,SAAWZ,GAAQ,OAAS,eAAiB,EAAE,GAExD,SAAAY,GAAM,MAhBFb,CAiBP,CAEJ,CAAC,EACH,EACF,CAEJ,EAEA,IAAON,EAAQK",
|
|
6
|
+
"names": ["dropdown_exports", "__export", "dropdown_default", "__toCommonJS", "import_jsx_runtime", "import_react", "clickContent", "DropDown", "index", "active", "list", "setActive", "setVisible", "visible", "filterActive", "dropDownRef", "handleClickOutside", "event", "isDel", "handleList", "activeIndex", "item", "items", "currentSku"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
3
|
+
className?: string;
|
|
4
|
+
data?: Record<string, any>;
|
|
5
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";"use client";var O=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var Q=(l,n)=>{for(var r in n)v(l,r,{get:n[r],enumerable:!0})},F=(l,n,r,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let b of $(n))!z.call(l,b)&&b!==r&&v(l,b,{get:()=>n[b],enumerable:!(u=V(n,b))||u.enumerable});return l};var S=(l,n,r)=>(r=l!=null?O(q(l)):{},F(n||!l||!l.__esModule?v(r,"default",{value:l,enumerable:!0}):r,l)),G=l=>F(v({},"__esModule",{value:!0}),l);var K={};Q(K,{default:()=>J});module.exports=G(K);var e=require("react/jsx-runtime"),A=S(require("./dropdown")),L=require("../AiuiProvider/index.js"),T=require("react-responsive"),f=require("react"),H=require("../../shared/Styles.js"),R=require("../ShelfDisplay/shelfDisplay.js"),d=require("../../components/index.js"),g=S(require("react"));const j=g.default.forwardRef((l,n)=>{const{data:r,buildData:u,onChange:b}=l||{},y=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),[i,h]=(0,f.useState)({}),[w,N]=(0,f.useState)({}),D=(0,g.useRef)(null),{locale:P="us"}=(0,L.useAiuiContext)(),{LeftMenu:E,RightMenu:C,DefaultSelectMenu:k}=(0,f.useMemo)(()=>r?.data||{},[r?.data]),_=t=>{try{const o=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(o)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},I=(t,s)=>{const o=C?.menus?.find?.(p=>p?.handle===t?.handle),a=t?.variants?.find?.(p=>p?.sku===t?.sku||o?.sku),c=a?.coupons?.[0],{price:m,basePrice:x}=(0,R.formatVariantPrice)({locale:P||"us",amount:c?c?.variant_price4wscode:a?.price,baseAmount:c?a?.price:0,currencyCode:t?.price?.currencyCode||"USD"});return(0,e.jsxs)("div",{className:"box-border overflow-hidden specs-sku-node-wrap",children:[(0,e.jsxs)(d.Text,{className:"relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text",onClick:()=>N({...w,[s]:!w?.[s]}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between overflow-hidden",children:[(0,e.jsx)("div",{className:"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title",title:i?.[s]?.name,children:i?.[s]?.name||""}),(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:(0,e.jsx)("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})})]}),(0,e.jsx)(A.default,{index:s,list:u?.products,active:i,filterActive:i,setActive:h,visible:w,setVisible:N})]}),(0,e.jsx)("div",{className:"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]",children:(0,e.jsx)(d.Picture,{source:a?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover"})}),a?.availableForSale?(0,e.jsxs)("div",{className:"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl",children:[(0,e.jsx)("div",{className:"text-[#1D1D1F] specs-sku-node-price",children:m||""}),x&&(0,e.jsx)("div",{className:"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price",children:x})]}):!1,k?.buttonText?(0,e.jsx)(d.Button,{onClick:()=>b?.(t),className:"specs-sku-node-button",children:k?.buttonText}):null]})},U=t=>{if(t)return t&&typeof t!="string"?(0,e.jsxs)("div",{className:"size-full",children:[(0,e.jsx)("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:t?.text||""}}),(0,e.jsx)(d.Picture,{source:t?.imgUrl,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"})]}):(0,e.jsx)("div",{className:"break-all",children:_(t)?(0,e.jsx)(d.Picture,{source:t,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"}):(0,e.jsx)("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:t||""}})})},M=t=>t.map((s,o)=>{const a=o===0;return(0,e.jsxs)("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col specs-product-node-wrap",children:[(0,e.jsx)(d.Heading,{as:"h3",html:s||"",className:"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title"}),(0,e.jsx)("div",{className:"col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body",children:Object.keys(i)?.map?.(c=>{const m=i?.[c],x=C?.menus?.find?.(p=>p?.handle===m?.handle)?.subTitle;return U(x?.[s])})})]},s)}),B=t=>{if(!i)return;const{subTitle:s,isProduct:o}=t;return o?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product",children:[t?.title&&(0,e.jsx)(d.Heading,{as:"h3",html:t?.title||"",className:"l:hidden specs-item-product-title"}),(0,e.jsx)("div",{className:"col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body",children:Object.keys(i)?.map((a,c)=>{const m=i?.[a],x=u?.products?.find?.(p=>p?.handle===m?.handle);return(0,e.jsx)("div",{children:I({...x,sku:m?.sku,item:a},c)},a)})})]}),s?.length?M(s):null]}):M(s)};return(0,g.useImperativeHandle)(n,()=>D.current),(0,f.useEffect)(()=>{if(!u?.products?.length)return;const t=k?.sku?.split?.(",")||[];let s={};t?.forEach?.((o,a)=>{const c=u?.products?.find?.(m=>{if(m?.variants?.find?.(p=>p?.sku===o))return!0});c&&(s={...s,[a]:{sku:o,name:c?.name,handle:c?.handle}})}),h(s)},[u]),(0,f.useEffect)(()=>{if(y){const t=Object.keys(i||{});if(t?.length>2){const s=t?.slice?.(0,2);let o={};s?.forEach?.(a=>{o={...o,[a]:i?.[a]}}),h(o)}}},[y]),(0,e.jsx)("div",{className:"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper",ref:D,children:E?.data?(0,e.jsx)("div",{className:"box-border w-full overflow-hidden specs-wrapper-content",children:E?.data?.map?.((t,s)=>(0,e.jsx)("div",{className:"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item",children:B(t)},s))}):null})});j.displayName="Specs";var J=(0,H.withLayout)(j);
|
|
2
|
+
//# sourceMappingURL=index.js.map
|