@anker-in/headless-ui 1.0.26-alpha.1762489449442 → 1.0.26-alpha.1762494680050
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/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +1 -1
- package/dist/cjs/biz-components/ImageWithText/types.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/types.js.map +1 -1
- package/dist/cjs/biz-components/Ksp/index.d.ts +5 -4
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +2 -2
- package/dist/cjs/biz-components/MarqueeReview/index.d.ts +2 -2
- package/dist/cjs/biz-components/MarqueeReview/index.js +1 -1
- package/dist/cjs/biz-components/MarqueeReview/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +8 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +11 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.d.ts +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.js +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.d.ts +17 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.js +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.js.map +7 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +11 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +2 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +7 -0
- package/dist/cjs/biz-components/ThreeDCarousel/index.d.ts +2 -15
- package/dist/cjs/biz-components/ThreeDCarousel/index.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/index.js.map +4 -4
- package/dist/cjs/biz-components/ThreeDCarousel/types.d.ts +24 -0
- package/dist/cjs/biz-components/ThreeDCarousel/types.js +2 -0
- package/dist/cjs/biz-components/ThreeDCarousel/types.js.map +7 -0
- package/dist/cjs/biz-components/index.d.ts +5 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/stories/MediaSceneSwitcher.stories.js +2 -0
- package/dist/cjs/stories/MediaSceneSwitcher.stories.js.map +7 -0
- package/dist/cjs/stories/ThreeDCarousel.stories.js +128 -1
- package/dist/cjs/stories/ThreeDCarousel.stories.js.map +3 -3
- package/dist/cjs/stories/ksp.stories.js +2 -2
- package/dist/cjs/stories/ksp.stories.js.map +2 -2
- package/dist/cjs/types/props.d.ts +4 -1
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/types.d.ts +1 -1
- package/dist/esm/biz-components/Ksp/index.d.ts +5 -4
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +2 -2
- package/dist/esm/biz-components/MarqueeReview/index.d.ts +2 -2
- package/dist/esm/biz-components/MarqueeReview/index.js +1 -1
- package/dist/esm/biz-components/MarqueeReview/index.js.map +2 -2
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +8 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +11 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.d.ts +2 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.js +2 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.d.ts +17 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.js +1 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.js.map +7 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +11 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +2 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +7 -0
- package/dist/esm/biz-components/ThreeDCarousel/index.d.ts +2 -15
- package/dist/esm/biz-components/ThreeDCarousel/index.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/index.js.map +4 -4
- package/dist/esm/biz-components/ThreeDCarousel/types.d.ts +24 -0
- package/dist/esm/biz-components/ThreeDCarousel/types.js +1 -0
- package/dist/esm/biz-components/ThreeDCarousel/types.js.map +7 -0
- package/dist/esm/biz-components/index.d.ts +5 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/stories/MediaSceneSwitcher.stories.js +2 -0
- package/dist/esm/stories/MediaSceneSwitcher.stories.js.map +7 -0
- package/dist/esm/stories/ThreeDCarousel.stories.js +128 -1
- package/dist/esm/stories/ThreeDCarousel.stories.js.map +3 -3
- package/dist/esm/stories/ksp.stories.js +3 -3
- package/dist/esm/stories/ksp.stories.js.map +2 -2
- package/dist/esm/types/props.d.ts +4 -1
- package/package.json +1 -1
- package/tailwind.config.js +5 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/biz-components/ThreeDCarousel/index.
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Heading, Picture } from '../../components/index.js'\nimport { useRef, useState, useEffect, useCallback } from 'react'\nimport { cn } from '../../helpers/index.js'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\ninterface CarouselItem {\n imageUrl: string\n mobImageUrl?: string\n title?: string\n description?: string\n}\n\ninterface ThreeDCarouselProps {\n data: {\n title?: string\n items: CarouselItem[]\n }\n className?: string\n}\n\nexport default function ThreeDCarousel({ data, className }: ThreeDCarouselProps) {\n const containerRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const mobileTrackRef = useRef<HTMLDivElement>(null)\n const { title, items = [] } = data\n\n const [activeIndex, setActiveIndex] = useState(1)\n const [isDragging, setIsDragging] = useState(false)\n const [startX, setStartX] = useState(0)\n const [scrollLeft, setScrollLeft] = useState(0)\n\n // \u521B\u5EFA\u5FAA\u73AF\u6570\u7EC4\uFF08\u5728\u5F00\u5934\u548C\u7ED3\u5C3E\u6DFB\u52A0\u514B\u9686\uFF09\n const extendedItems = items.length > 0 ? [items[items.length - 1], ...items, items[0]] : []\n\n // \u5904\u7406\u684C\u9762\u7AEF\u5207\u6362\n const handlePrev = useCallback(() => {\n setActiveIndex(prev => {\n const newIndex = prev - 1\n if (newIndex < 0) {\n return extendedItems.length - 2\n }\n return newIndex\n })\n }, [extendedItems.length])\n\n const handleNext = useCallback(() => {\n setActiveIndex(prev => {\n const newIndex = prev + 1\n if (newIndex >= extendedItems.length - 1) {\n return 1\n }\n return newIndex\n })\n }, [extendedItems.length])\n\n // \u5904\u7406\u684C\u9762\u7AEF\u62D6\u62FD\n const handleMouseDown = (e: React.MouseEvent) => {\n setIsDragging(true)\n setStartX(e.pageX)\n setScrollLeft(activeIndex)\n }\n\n const handleMouseMove = useCallback(\n (e: MouseEvent) => {\n if (!isDragging) return\n e.preventDefault()\n const x = e.pageX\n const walk = (startX - x) / 100 // \u8C03\u6574\u7075\u654F\u5EA6\n const newIndex = Math.round(scrollLeft + walk)\n\n if (newIndex >= 0 && newIndex < extendedItems.length) {\n setActiveIndex(newIndex)\n }\n },\n [isDragging, startX, scrollLeft, extendedItems.length]\n )\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false)\n }, [])\n\n // \u5904\u7406\u79FB\u52A8\u7AEF\u6EDA\u52A8\uFF08\u7528\u4E8E\u672A\u6765\u53EF\u80FD\u7684\u6EDA\u52A8\u6307\u793A\u5668\uFF09\n const handleMobileScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {\n // \u53EF\u4EE5\u5728\u8FD9\u91CC\u6DFB\u52A0\u6EDA\u52A8\u4F4D\u7F6E\u8FFD\u8E2A\u903B\u8F91\n }, [])\n\n // \u952E\u76D8\u4E8B\u4EF6\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'ArrowLeft') {\n handlePrev()\n } else if (e.key === 'ArrowRight') {\n handleNext()\n }\n },\n [handlePrev, handleNext]\n )\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener('mousemove', handleMouseMove)\n document.addEventListener('mouseup', handleMouseUp)\n return () => {\n document.removeEventListener('mousemove', handleMouseMove)\n document.removeEventListener('mouseup', handleMouseUp)\n }\n }\n }, [isDragging, handleMouseMove, handleMouseUp])\n\n useEffect(() => {\n window.addEventListener('keydown', handleKeyDown)\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n }\n }, [handleKeyDown])\n\n // \u8BA1\u7B97\u6BCF\u4E2A\u5361\u7247\u7684\u53D8\u6362\n const getCardStyle = (index: number) => {\n const offset = index - activeIndex\n const absOffset = Math.abs(offset)\n\n // \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u8C03\u6574\u53C2\u6570\n const isLargeDesktop = typeof window !== 'undefined' && window.innerWidth >= 1921\n const isDesktop = typeof window !== 'undefined' && window.innerWidth >= 1441\n const isSmallDesktop = typeof window !== 'undefined' && window.innerWidth >= 1025\n\n let stretch = 427\n if (!isLargeDesktop && isDesktop) stretch = 334\n else if (!isDesktop && isSmallDesktop) stretch = 230\n else if (!isSmallDesktop) stretch = 286\n\n // \u8BA1\u7B97\u4F4D\u7F6E\n const translateX = offset * stretch\n const translateZ = absOffset === 0 ? 0 : -300 * absOffset\n const scale = absOffset === 0 ? 1 : 0.85 - absOffset * 0.1\n const opacity = absOffset === 0 ? 1 : 0.6\n const brightness = absOffset === 0 ? 100 : 50\n\n return {\n transform: `translateX(${translateX}px) translateZ(${translateZ}px) scale(${Math.max(scale, 0.5)})`,\n opacity: Math.max(opacity, 0.3),\n filter: `brightness(${brightness}%) contrast(120%)`,\n transition: isDragging ? 'none' : 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',\n zIndex: 100 - absOffset,\n }\n }\n\n if (!items || items.length === 0) {\n return null\n }\n\n return (\n <section className={cn('laptop:overflow-hidden w-full overflow-visible text-white', className)} ref={containerRef}>\n {title && <Heading as=\"h1\" size={4} html={title} className=\"laptop:text-center text-left\" />}\n\n {/* \u684C\u9762\u7AEF 3D \u8F6E\u64AD */}\n <div className=\"laptop:block relative mx-auto mt-[24px] hidden w-full\">\n <div className=\"relative mx-auto h-[480px] w-full overflow-visible\" style={{ perspective: '1200px' }}>\n <div\n ref={trackRef}\n className={cn(\n 'absolute left-1/2 top-1/2 h-full w-[824px] -translate-x-1/2 -translate-y-1/2',\n isDragging ? 'cursor-grabbing' : 'cursor-grab'\n )}\n style={{ transformStyle: 'preserve-3d' }}\n onMouseDown={handleMouseDown}\n >\n {extendedItems.map((item, index) => (\n <div\n key={index}\n className=\"absolute left-1/2 top-0 h-full w-[824px] -translate-x-1/2 overflow-hidden rounded-[16px]\"\n style={getCardStyle(index)}\n onClick={() => index !== activeIndex && setActiveIndex(index)}\n >\n <div className=\"relative size-full\">\n <Picture source={item.imageUrl} alt={item.title || ''} className=\"size-full object-cover\" />\n <div className=\"absolute inset-0 bg-black/60\" />\n {item.title && (\n <div className=\"absolute inset-x-0 bottom-0 p-8\">\n <h3 className=\"font-['Mont_For_Anker:SemiBold'] text-[32px] leading-[1.2] tracking-[-1.28px] text-white\">\n {item.title}\n </h3>\n {item.description && (\n <p className=\"mt-1 font-['Mont_For_Anker:SemiBold'] text-[18px] leading-[1.4] tracking-[-0.36px] text-white\">\n {item.description}\n </p>\n )}\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* \u5BFC\u822A\u6309\u94AE */}\n <div className=\"laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] pointer-events-none absolute left-1/2 top-1/2 z-[200] flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n <button\n onClick={handlePrev}\n className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n onClick={handleNext}\n className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n </div>\n\n {/* \u79FB\u52A8\u7AEF\u6A2A\u5411\u6EDA\u52A8 */}\n <div className=\"laptop:hidden mt-[24px] block w-full\">\n <div\n ref={mobileTrackRef}\n className=\"flex gap-3 overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n onScroll={handleMobileScroll}\n >\n {items.map((item, index) => (\n <div\n key={index}\n className=\"relative h-[360px] w-[296px] flex-shrink-0 overflow-hidden rounded-xl shadow-lg\"\n >\n <Picture\n source={item.mobImageUrl || item.imageUrl}\n alt={item.title || ''}\n className=\"size-full object-cover\"\n />\n {item.title && (\n <div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-6\">\n <p className=\"text-[24px] leading-[1.2] tracking-[-0.96px] text-white\">{item.title}</p>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../../src/biz-components/ThreeDCarousel/index.ts"],
|
|
4
|
+
"sourcesContent": ["export { default } from './ThreeDCarousel.js'\nexport type { ThreeDCarouselProps, ThreeDCarouselItem } from './types.js'\n"],
|
|
5
|
+
"mappings": "AAAA,OAAS,WAAAA,MAAe",
|
|
6
|
+
"names": ["default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { Media } from '../../types/props';
|
|
2
|
+
export interface ThreeDCarouselItem {
|
|
3
|
+
/** 桌面端图片 */
|
|
4
|
+
imageUrl: Media | null;
|
|
5
|
+
/** 移动端图片 */
|
|
6
|
+
mobImageUrl: Media | null;
|
|
7
|
+
/** 标题 */
|
|
8
|
+
title: string;
|
|
9
|
+
/** 描述 */
|
|
10
|
+
description: string;
|
|
11
|
+
/** 按钮文本 */
|
|
12
|
+
buttonText?: string;
|
|
13
|
+
/** 按钮链接 */
|
|
14
|
+
buttonLink?: string | null;
|
|
15
|
+
}
|
|
16
|
+
export interface ThreeDCarouselProps {
|
|
17
|
+
data: {
|
|
18
|
+
title: string;
|
|
19
|
+
/** 轮播项列表 */
|
|
20
|
+
items: ThreeDCarouselItem[];
|
|
21
|
+
};
|
|
22
|
+
/** 自定义类名 */
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -80,6 +80,10 @@ export { default as ProductHero } from './ProductHero/index.js';
|
|
|
80
80
|
export type { ProductHeroProps } from './ProductHero/index.js';
|
|
81
81
|
export { default as SpecsComparison } from './SpecsComparison/index.js';
|
|
82
82
|
export type { SpecsComparisonProps, SpecsComparisonMenuItem, SpecsComparisonLeftMenuItem, } from './SpecsComparison/index.js';
|
|
83
|
+
export { default as MediaSceneSwitcher } from './MediaSceneSwitcher/index.js';
|
|
84
|
+
export type { MediaSceneSwitcherProps } from './MediaSceneSwitcher/types.js';
|
|
85
|
+
export { default as ThreeDCarousel } from './ThreeDCarousel/index.js';
|
|
86
|
+
export type { ThreeDCarouselProps } from './ThreeDCarousel/index.js';
|
|
83
87
|
export declare const PAYLOAD_COMPONENT_MAP: {
|
|
84
88
|
'ipc-accordioncards': string;
|
|
85
89
|
'ipc-aplusdesc': string;
|
|
@@ -115,4 +119,5 @@ export declare const PAYLOAD_COMPONENT_MAP: {
|
|
|
115
119
|
'ipc-text-marquee': string;
|
|
116
120
|
'ipc-title': string;
|
|
117
121
|
'ipc-whychoose': string;
|
|
122
|
+
ksp: string;
|
|
118
123
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{default as t}from"./BrandEquity/index.js";import{default as p}from"./MemberEquity/index.js";import{default as i}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as c}from"./Spacer/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as n}from"./Evaluate/index.js";import{default as P}from"./Category/index.js";import{default as g}from"./HeroBanner/index.js";import{default as S}from"./AccordionCards/index.js";import{default as T}from"./Graphic/index.js";import{default as I}from"./MediaPlayerBase/index.js";import{default as F}from"./MediaPlayerSticky/index.js";import{default as G}from"./MediaPlayerMulti/index.js";import{default as j}from"./Marquee/index.js";import{default as k}from"./MarqueeReview/index.js";import{default as D}from"./WhyChoose/index.js";import{default as E}from"./Faq/index.js";import{MarqueeItem as H,MarqueeImageContent as
|
|
1
|
+
import{default as t}from"./BrandEquity/index.js";import{default as p}from"./MemberEquity/index.js";import{default as i}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as c}from"./Spacer/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as n}from"./Evaluate/index.js";import{default as P}from"./Category/index.js";import{default as g}from"./HeroBanner/index.js";import{default as S}from"./AccordionCards/index.js";import{default as T}from"./Graphic/index.js";import{default as I}from"./MediaPlayerBase/index.js";import{default as F}from"./MediaPlayerSticky/index.js";import{default as G}from"./MediaPlayerMulti/index.js";import{default as j}from"./Marquee/index.js";import{default as k}from"./MarqueeReview/index.js";import{default as D}from"./WhyChoose/index.js";import{default as E}from"./Faq/index.js";import{MarqueeItem as H,MarqueeImageContent as K,MarqueeTextContent as O}from"./Marquee/index.js";import{default as N}from"./MultiLayoutGraphicBlock/index.js";import{default as V}from"./GraphicAttractionBlock/index.js";import{default as Y}from"./HeaderNavigation/index.js";import{default as Q}from"./FooterNavigation/index.js";import{default as X}from"./SearchPage/index.js";import{IPC_SEARCH_PAGE as $,SearchPageTabType as ee}from"./SearchPage/types.js";import{withLayout as ae}from"../shared/Styles.js";import{default as oe}from"./AiuiProvider/index.js";import{default as se}from"./Tabs/index.js";import{default as fe}from"./CreativeModule/index.js";import{default as de}from"./GraphicOverlay/index.js";import{default as le}from"./Specs/index.js";import{default as xe}from"./TabsGroup/index.js";import{default as he}from"./Listing/index.js";import{default as ye}from"./Listing/BizProductProvider.js";import{default as Me}from"./Listing/components/PurchaseBar/index.js";import{default as Ce}from"./Listing/components/PurchaseBar/ProductActions/index.js";import{default as be}from"./Listing/components/ProductCard/index.js";import{default as Be}from"./Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js";import{default as qe}from"./Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js";import{default as ve}from"./Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js";import{default as we}from"./Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js";import{default as Ae}from"./Listing/components/ProductCard/ProductDetail/ProductOptions/index.js";import{default as We}from"./Listing/components/ProductCard/ProductDetail/ProductBundle/index.js";import{default as Le}from"./Listing/components/ProductCard/ProductGridBox.js";import{default as Ke}from"./Listing/components/ProductCard/ProductGallery/index.js";import{default as Re}from"./Listing/components/ProductCard/ProductDetail/index.js";import{default as _e}from"./Listing/components/ProductCard/ProductSummary/index.js";import{default as ze}from"./Listing/components/ProductCard/ProductDetail/BenefitsTab";import{default as Je}from"./Listing/components/PaidShipping/index.js";import{default as Ue}from"./GraphicMore/index.js";import{default as Ze}from"./Features/index.js";import{default as er}from"./AplusDesc/index.js";import{default as ar}from"./GiftBox/index.js";import{default as or}from"./SelectStore/index.js";import{default as sr}from"./DownLoad/index.js";import{default as fr}from"./FootCharger/index.js";import{default as dr}from"./ProductCompare/index.js";import{default as lr}from"./Ksp/index.js";import{default as xr}from"./ImageTextFeature/index.js";import{default as hr}from"./FeatureCards/index.js";import{default as yr}from"./ImageWithText/index.js";import{default as Mr}from"./VideoFeature/index.js";import{default as Cr}from"./TabsWithMedia/index.js";import{default as br}from"./TabWithImage/index.js";import{default as Br}from"./FeatureShowcase/index.js";import{default as qr}from"./ProductHero/index.js";import{default as vr}from"./SpecsComparison/index.js";import{default as wr}from"./MediaSceneSwitcher/index.js";import{default as Ar}from"./ThreeDCarousel/index.js";const e={"ipc-accordioncards":"AccordionCards","ipc-aplusdesc":"AplusDesc","ipc-banner":"HeroBanner","ipc-brand-equity":"BrandEquity","ipc-category":"Category","ipc-collection-banner":"CollectionBanner","ipc-collection-shelves":"CollectionShelves","ipc-creativemodule":"CreativeModule","ipc-download":"DownLoad","ipc-evaluate":"Evaluate","ipc-faq":"Faq","ipc-features":"Features","ipc-footcharger":"FootCharger","ipc-ga-block":"GraphicAttractionBlock","ipc-giftbox":"GiftBox","ipc-graphic":"Graphic","ipc-graphicmore":"GraphicMore","ipc-graphicoverlay":"GraphicOverlay","ipc-marquee":"Marquee","ipc-mediaplayerbase":"MediaPlayerBase","ipc-mediaplayermulti":"MediaPlayerMulti","ipc-mediaplayersticky":"MediaPlayerSticky","ipc-member-equity":"MemberEquity","ipc-mlg-block":"MultiLayoutGraphicBlock","ipc-search-page-tabs":"SearchPageBlock","ipc-selectstore":"SelectStore","ipc-shelfdisplay":"ShelfDisplay","ipc-slogan":"Slogan","ipc-spacer":"Spacer","ipc-specs":"Specs","ipc-tabs":"Tabs","ipc-text-marquee":"TextMarquee","ipc-title":"Title","ipc-whychoose":"WhyChoose",ksp:"Ksp"};export{S as AccordionCards,oe as AiuiProvider,er as AplusDesc,ze as BenefitsTab,ye as BizProductProvider,t as BrandEquity,P as Category,fe as CreativeModule,sr as DownLoad,n as Evaluate,E as Faq,hr as FeatureCards,Br as FeatureShowcase,Ze as Features,fr as FootCharger,Q as FooterNavigation,ar as GiftBox,T as Graphic,V as GraphicAttractionBlock,Ue as GraphicMore,de as GraphicOverlay,Y as HeaderNavigation,g as HeroBanner,$ as IPC_SEARCH_PAGE,xr as ImageTextFeature,yr as ImageWithText,lr as Ksp,he as Listing,j as Marquee,K as MarqueeImageContent,H as MarqueeItem,k as MarqueeReview,O as MarqueeTextContent,I as MediaPlayerBase,G as MediaPlayerMulti,F as MediaPlayerSticky,wr as MediaSceneSwitcher,p as MemberEquity,N as MultiLayoutGraphicBlock,e as PAYLOAD_COMPONENT_MAP,Je as PaidShipping,Ce as ProductActions,Be as ProductBenefitsTabs,We as ProductBundle,be as ProductCard,dr as ProductCompare,Re as ProductDetail,we as ProductExchangePurchase,ve as ProductFreeGift,Ke as ProductGallery,Le as ProductGridBox,qr as ProductHero,qe as ProductHighlight,Ae as ProductOptions,_e as ProductSummary,Me as PurchaseBar,X as SearchPage,ee as SearchPageTabType,or as SelectStore,m as ShelfDisplay,i as Slogan,c as Spacer,le as Specs,vr as SpecsComparison,xe as TabGroup,br as TabWithImage,se as Tabs,Cr as TabsWithMedia,Ar as ThreeDCarousel,u as Title,Mr as VideoFeature,D as WhyChoose,ae as withLayout};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/biz-components/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as MarqueeReview } from './MarqueeReview/index.js'\nexport type { MarqueeReviewProps, MarqueeReviewData, ReviewItem } from './MarqueeReview/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'\nexport { default as Listing } from './Listing/index.js'\nexport { default as BizProductProvider } from './Listing/BizProductProvider.js'\nexport { default as PurchaseBar } from './Listing/components/PurchaseBar/index.js'\nexport { default as ProductActions } from './Listing/components/PurchaseBar/ProductActions/index.js'\nexport { default as ProductCard } from './Listing/components/ProductCard/index.js'\nexport { default as ProductBenefitsTabs } from './Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js'\nexport { default as ProductHighlight } from './Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js'\nexport { default as ProductFreeGift } from './Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js'\nexport { default as ProductExchangePurchase } from './Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js'\nexport { default as ProductOptions } from './Listing/components/ProductCard/ProductDetail/ProductOptions/index.js'\nexport { default as ProductBundle } from './Listing/components/ProductCard/ProductDetail/ProductBundle/index.js'\nexport { default as ProductGridBox } from './Listing/components/ProductCard/ProductGridBox.js'\nexport { default as ProductGallery } from './Listing/components/ProductCard/ProductGallery/index.js'\nexport { default as ProductDetail } from './Listing/components/ProductCard/ProductDetail/index.js'\nexport { default as ProductSummary } from './Listing/components/ProductCard/ProductSummary/index.js'\nexport { default as BenefitsTab } from './Listing/components/ProductCard/ProductDetail/BenefitsTab'\nexport { default as PaidShipping } from './Listing/components/PaidShipping/index.js'\nexport { default as GraphicMore } from './GraphicMore/index.js'\nexport { default as Features } from './Features/index.js'\nexport { default as AplusDesc } from './AplusDesc/index.js'\nexport { default as GiftBox } from './GiftBox/index.js'\nexport { default as SelectStore } from './SelectStore/index.js'\nexport { default as DownLoad } from './DownLoad/index.js'\nexport { default as FootCharger } from './FootCharger/index.js'\n\nexport { default as ProductCompare } from './ProductCompare/index.js'\nexport type { ProductCompareProps, ProductItemData } from './ProductCompare/index.js'\nexport { default as Ksp } from './Ksp/index.js'\nexport type { KspProps, KspData, KspCardItem } from './Ksp/index.js'\nexport { default as ImageTextFeature } from './ImageTextFeature/index.js'\nexport type { ImageTextFeatureProps, ImageTextFeatureItem } from './ImageTextFeature/index.js'\nexport { default as FeatureCards } from './FeatureCards/index.js'\nexport type { FeatureCardsProps, FeatureCardItem } from './FeatureCards/index.js'\nexport { default as ImageWithText } from './ImageWithText/index.js'\nexport type { ImageWithTextProps } from './ImageWithText/index.js'\nexport { default as VideoFeature } from './VideoFeature/index.js'\nexport type { VideoFeatureProps } from './VideoFeature/index.js'\nexport { default as TabsWithMedia } from './TabsWithMedia/index.js'\nexport type { TabsWithMediaProps, TabItem, TimeIndex } from './TabsWithMedia/index.js'\nexport { default as TabWithImage } from './TabWithImage/index.js'\nexport type { TabWithImageProps, TabWithImageDataItem } from './TabWithImage/index.js'\nexport { default as FeatureShowcase } from './FeatureShowcase/index.js'\nexport type { FeatureShowcaseProps, FeatureShowcaseItem } from './FeatureShowcase/index.js'\nexport { default as ProductHero } from './ProductHero/index.js'\nexport type { ProductHeroProps } from './ProductHero/index.js'\nexport { default as SpecsComparison } from './SpecsComparison/index.js'\nexport type {\n SpecsComparisonProps,\n SpecsComparisonMenuItem,\n SpecsComparisonLeftMenuItem,\n} from './SpecsComparison/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n 'ipc-accordioncards': 'AccordionCards',\n 'ipc-aplusdesc': 'AplusDesc',\n 'ipc-banner': 'HeroBanner',\n 'ipc-brand-equity': 'BrandEquity',\n 'ipc-category': 'Category',\n 'ipc-collection-banner': 'CollectionBanner',\n 'ipc-collection-shelves': 'CollectionShelves',\n 'ipc-creativemodule': 'CreativeModule',\n 'ipc-download': 'DownLoad',\n 'ipc-evaluate': 'Evaluate',\n 'ipc-faq': 'Faq',\n 'ipc-features': 'Features',\n 'ipc-footcharger': 'FootCharger',\n 'ipc-ga-block': 'GraphicAttractionBlock',\n 'ipc-giftbox': 'GiftBox',\n 'ipc-graphic': 'Graphic',\n 'ipc-graphicmore': 'GraphicMore',\n 'ipc-graphicoverlay': 'GraphicOverlay',\n 'ipc-marquee': 'Marquee',\n 'ipc-mediaplayerbase': 'MediaPlayerBase',\n 'ipc-mediaplayermulti': 'MediaPlayerMulti',\n 'ipc-mediaplayersticky': 'MediaPlayerSticky',\n 'ipc-member-equity': 'MemberEquity',\n 'ipc-mlg-block': 'MultiLayoutGraphicBlock',\n 'ipc-search-page-tabs': 'SearchPageBlock',\n 'ipc-selectstore': 'SelectStore',\n 'ipc-shelfdisplay': 'ShelfDisplay',\n 'ipc-slogan': 'Slogan',\n 'ipc-spacer': 'Spacer',\n 'ipc-specs': 'Specs',\n 'ipc-tabs': 'Tabs',\n 'ipc-text-marquee': 'TextMarquee',\n 'ipc-title': 'Title',\n 'ipc-whychoose': 'WhyChoose',\n
|
|
5
|
-
"mappings": "AAAA,OAAoB,WAAXA,MAA8B,yBACvC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAAwB,mBACjC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA6B,wBACtC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAkC,6BAC3C,OAAoB,WAAXA,MAAoC,+BAC7C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAgC,2BAEzC,OAAoB,WAAXA,MAA4B,uBACrC,OAAoB,WAAXA,MAAsB,iBAC/B,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B,qBACrE,OAAoB,WAAXH,MAA0C,qCAEnD,OAAoB,WAAXA,MAAyC,oCAElD,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA6B,wBAEtC,OAAS,mBAAAI,EAAiB,qBAAAC,OAAyB,wBAEnD,OAAS,cAAAC,OAAkB,sBAC3B,OAAoB,WAAXN,OAA+B,0BACxC,OAAoB,WAAXA,OAAuB,kBAChC,OAAoB,WAAXA,OAAiC,4BAC1C,OAAoB,WAAXA,OAAiC,4BAC1C,OAAoB,WAAXA,OAAwB,mBACjC,OAAoB,WAAXA,OAA2B,uBACpC,OAAoB,WAAXA,OAA0B,qBACnC,OAAoB,WAAXA,OAAqC,kCAC9C,OAAoB,WAAXA,OAA8B,4CACvC,OAAoB,WAAXA,OAAiC,2DAC1C,OAAoB,WAAXA,OAA8B,4CACvC,OAAoB,WAAXA,OAAsC,8EAC/C,OAAoB,WAAXA,OAAmC,2EAC5C,OAAoB,WAAXA,OAAkC,0EAC3C,OAAoB,WAAXA,OAA0C,kFACnD,OAAoB,WAAXA,OAAiC,yEAC1C,OAAoB,WAAXA,OAAgC,wEACzC,OAAoB,WAAXA,OAAiC,qDAC1C,OAAoB,WAAXA,OAAiC,2DAC1C,OAAoB,WAAXA,OAAgC,0DACzC,OAAoB,WAAXA,OAAiC,2DAC1C,OAAoB,WAAXA,OAA8B,6DACvC,OAAoB,WAAXA,OAA+B,6CACxC,OAAoB,WAAXA,OAA8B,yBACvC,OAAoB,WAAXA,OAA2B,sBACpC,OAAoB,WAAXA,OAA4B,uBACrC,OAAoB,WAAXA,OAA0B,qBACnC,OAAoB,WAAXA,OAA8B,yBACvC,OAAoB,WAAXA,OAA2B,sBACpC,OAAoB,WAAXA,OAA8B,yBAEvC,OAAoB,WAAXA,OAAiC,4BAE1C,OAAoB,WAAXA,OAAsB,iBAE/B,OAAoB,WAAXA,OAAmC,8BAE5C,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAgC,2BAEzC,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAgC,2BAEzC,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAkC,6BAE3C,OAAoB,WAAXA,OAA8B,yBAEvC,OAAoB,WAAXA,OAAkC,
|
|
4
|
+
"sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as MarqueeReview } from './MarqueeReview/index.js'\nexport type { MarqueeReviewProps, MarqueeReviewData, ReviewItem } from './MarqueeReview/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'\nexport { default as Listing } from './Listing/index.js'\nexport { default as BizProductProvider } from './Listing/BizProductProvider.js'\nexport { default as PurchaseBar } from './Listing/components/PurchaseBar/index.js'\nexport { default as ProductActions } from './Listing/components/PurchaseBar/ProductActions/index.js'\nexport { default as ProductCard } from './Listing/components/ProductCard/index.js'\nexport { default as ProductBenefitsTabs } from './Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js'\nexport { default as ProductHighlight } from './Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js'\nexport { default as ProductFreeGift } from './Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js'\nexport { default as ProductExchangePurchase } from './Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js'\nexport { default as ProductOptions } from './Listing/components/ProductCard/ProductDetail/ProductOptions/index.js'\nexport { default as ProductBundle } from './Listing/components/ProductCard/ProductDetail/ProductBundle/index.js'\nexport { default as ProductGridBox } from './Listing/components/ProductCard/ProductGridBox.js'\nexport { default as ProductGallery } from './Listing/components/ProductCard/ProductGallery/index.js'\nexport { default as ProductDetail } from './Listing/components/ProductCard/ProductDetail/index.js'\nexport { default as ProductSummary } from './Listing/components/ProductCard/ProductSummary/index.js'\nexport { default as BenefitsTab } from './Listing/components/ProductCard/ProductDetail/BenefitsTab'\nexport { default as PaidShipping } from './Listing/components/PaidShipping/index.js'\nexport { default as GraphicMore } from './GraphicMore/index.js'\nexport { default as Features } from './Features/index.js'\nexport { default as AplusDesc } from './AplusDesc/index.js'\nexport { default as GiftBox } from './GiftBox/index.js'\nexport { default as SelectStore } from './SelectStore/index.js'\nexport { default as DownLoad } from './DownLoad/index.js'\nexport { default as FootCharger } from './FootCharger/index.js'\n\nexport { default as ProductCompare } from './ProductCompare/index.js'\nexport type { ProductCompareProps, ProductItemData } from './ProductCompare/index.js'\nexport { default as Ksp } from './Ksp/index.js'\nexport type { KspProps, KspData, KspCardItem } from './Ksp/index.js'\nexport { default as ImageTextFeature } from './ImageTextFeature/index.js'\nexport type { ImageTextFeatureProps, ImageTextFeatureItem } from './ImageTextFeature/index.js'\nexport { default as FeatureCards } from './FeatureCards/index.js'\nexport type { FeatureCardsProps, FeatureCardItem } from './FeatureCards/index.js'\nexport { default as ImageWithText } from './ImageWithText/index.js'\nexport type { ImageWithTextProps } from './ImageWithText/index.js'\nexport { default as VideoFeature } from './VideoFeature/index.js'\nexport type { VideoFeatureProps } from './VideoFeature/index.js'\nexport { default as TabsWithMedia } from './TabsWithMedia/index.js'\nexport type { TabsWithMediaProps, TabItem, TimeIndex } from './TabsWithMedia/index.js'\nexport { default as TabWithImage } from './TabWithImage/index.js'\nexport type { TabWithImageProps, TabWithImageDataItem } from './TabWithImage/index.js'\nexport { default as FeatureShowcase } from './FeatureShowcase/index.js'\nexport type { FeatureShowcaseProps, FeatureShowcaseItem } from './FeatureShowcase/index.js'\nexport { default as ProductHero } from './ProductHero/index.js'\nexport type { ProductHeroProps } from './ProductHero/index.js'\nexport { default as SpecsComparison } from './SpecsComparison/index.js'\nexport type {\n SpecsComparisonProps,\n SpecsComparisonMenuItem,\n SpecsComparisonLeftMenuItem,\n} from './SpecsComparison/index.js'\nexport { default as MediaSceneSwitcher } from './MediaSceneSwitcher/index.js'\nexport type { MediaSceneSwitcherProps } from './MediaSceneSwitcher/types.js'\nexport { default as ThreeDCarousel } from './ThreeDCarousel/index.js'\nexport type { ThreeDCarouselProps } from './ThreeDCarousel/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n 'ipc-accordioncards': 'AccordionCards',\n 'ipc-aplusdesc': 'AplusDesc',\n 'ipc-banner': 'HeroBanner',\n 'ipc-brand-equity': 'BrandEquity',\n 'ipc-category': 'Category',\n 'ipc-collection-banner': 'CollectionBanner',\n 'ipc-collection-shelves': 'CollectionShelves',\n 'ipc-creativemodule': 'CreativeModule',\n 'ipc-download': 'DownLoad',\n 'ipc-evaluate': 'Evaluate',\n 'ipc-faq': 'Faq',\n 'ipc-features': 'Features',\n 'ipc-footcharger': 'FootCharger',\n 'ipc-ga-block': 'GraphicAttractionBlock',\n 'ipc-giftbox': 'GiftBox',\n 'ipc-graphic': 'Graphic',\n 'ipc-graphicmore': 'GraphicMore',\n 'ipc-graphicoverlay': 'GraphicOverlay',\n 'ipc-marquee': 'Marquee',\n 'ipc-mediaplayerbase': 'MediaPlayerBase',\n 'ipc-mediaplayermulti': 'MediaPlayerMulti',\n 'ipc-mediaplayersticky': 'MediaPlayerSticky',\n 'ipc-member-equity': 'MemberEquity',\n 'ipc-mlg-block': 'MultiLayoutGraphicBlock',\n 'ipc-search-page-tabs': 'SearchPageBlock',\n 'ipc-selectstore': 'SelectStore',\n 'ipc-shelfdisplay': 'ShelfDisplay',\n 'ipc-slogan': 'Slogan',\n 'ipc-spacer': 'Spacer',\n 'ipc-specs': 'Specs',\n 'ipc-tabs': 'Tabs',\n 'ipc-text-marquee': 'TextMarquee',\n 'ipc-title': 'Title',\n 'ipc-whychoose': 'WhyChoose',\n ksp: 'Ksp',\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent", "IPC_SEARCH_PAGE", "SearchPageTabType", "withLayout", "PAYLOAD_COMPONENT_MAP"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import c from"../biz-components/MediaSceneSwitcher/index.js";const s={title:"Biz-Components/MediaSceneSwitcher",component:c,parameters:{layout:"fullscreen",docs:{description:{component:"Media Scene Switcher component - A versatile component for switching between multiple media scenes with auto-play functionality"}}},decorators:[i=>t("div",{style:{paddingTop:"2em",background:"#000",minHeight:"100vh"},children:t(i,{})})],tags:["autodocs"]};var l=s;const e={id:"690c3b11535a7c9975ffcd47",display:"visible",title:"360 Times/Minute",subtitle:"Self-Cleaning",container:{mobileSpan:"12",desktopSpan:"10"},blockName:"\u591A\u573A\u666F\u5207\u63621_10\u6805\u683C_public",blockType:"MediaSceneSwitcher",items:[{id:"690c3b32535a7c9975ffcd49",title:"Scrapes Off Dirt",tag:"20% OFF",videoUrl:{id:3066,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3067,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null},{id:"690c3b35535a7c9975ffcd4b",title:"Cleans the Mop with Water and Detergent",tag:"20% OFF",videoUrl:{id:3068,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3069,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null},{id:"690c3b38535a7c9975ffcd4d",title:"Squeezes Out Dirty Water",tag:"20% OFF",videoUrl:{id:3070,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3071,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null}]},d={args:{data:e}},o={args:{data:{...e,items:e.items.map(i=>({...i,tag:void 0}))}}},m={args:{data:{...e,items:e.items.map(i=>({...i,videoUrl:null}))}}},n={args:{data:{...e,items:e.items.slice(0,2)}}};export{d as Default,m as ImageOnly,n as TwoItems,o as WithoutTags,l as default};
|
|
2
|
+
//# sourceMappingURL=MediaSceneSwitcher.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/MediaSceneSwitcher.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaSceneSwitcher from '../biz-components/MediaSceneSwitcher/index.js'\n\nconst meta = {\n title: 'Biz-Components/MediaSceneSwitcher',\n component: MediaSceneSwitcher,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: 'Media Scene Switcher component - A versatile component for switching between multiple media scenes with auto-play functionality',\n },\n },\n },\n decorators: [\n Story => (\n <div style={{ paddingTop: '2em', background: '#000', minHeight: '100vh' }}>\n <Story />\n </div>\n ),\n ],\n tags: ['autodocs'],\n} satisfies Meta<typeof MediaSceneSwitcher>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockData = {\n id: '690c3b11535a7c9975ffcd47',\n display: 'visible' as const,\n title: '360 Times/Minute',\n subtitle: 'Self-Cleaning',\n container: {\n mobileSpan: '12',\n desktopSpan: '10',\n },\n blockName: '\u591A\u573A\u666F\u5207\u63621_10\u6805\u683C_public',\n blockType: 'MediaSceneSwitcher',\n items: [\n {\n id: '690c3b32535a7c9975ffcd49',\n title: 'Scrapes Off Dirt',\n tag: '20% OFF',\n videoUrl: {\n id: 3066,\n alt: null,\n baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n mimeType: 'video/mp4' as const,\n width: null,\n height: null,\n },\n imageUrl: {\n id: 3067,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n filename: 'Frame_2121235302.png',\n mimeType: 'image/png' as const,\n width: 1648,\n height: 1120,\n },\n mobVideoUrl: null,\n mobImageUrl: null,\n },\n {\n id: '690c3b35535a7c9975ffcd4b',\n title: 'Cleans the Mop with Water and Detergent',\n tag: '20% OFF',\n videoUrl: {\n id: 3068,\n alt: null,\n baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n mimeType: 'video/mp4' as const,\n width: null,\n height: null,\n },\n imageUrl: {\n id: 3069,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n filename: 'Frame_2121235302.png',\n mimeType: 'image/png' as const,\n width: 1648,\n height: 1120,\n },\n mobVideoUrl: null,\n mobImageUrl: null,\n },\n {\n id: '690c3b38535a7c9975ffcd4d',\n title: 'Squeezes Out Dirty Water',\n tag: '20% OFF',\n videoUrl: {\n id: 3070,\n alt: null,\n baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n mimeType: 'video/mp4' as const,\n width: null,\n height: null,\n },\n imageUrl: {\n id: 3071,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n filename: 'Frame_2121235302.png',\n mimeType: 'image/png' as const,\n width: 1648,\n height: 1120,\n },\n mobVideoUrl: null,\n mobImageUrl: null,\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: mockData,\n },\n}\n\nexport const WithoutTags: Story = {\n args: {\n data: {\n ...mockData,\n items: mockData.items.map(item => ({\n ...item,\n tag: undefined,\n })),\n },\n },\n}\n\nexport const ImageOnly: Story = {\n args: {\n data: {\n ...mockData,\n items: mockData.items.map(item => ({\n ...item,\n videoUrl: null,\n })),\n },\n },\n}\n\nexport const TwoItems: Story = {\n args: {\n data: {\n ...mockData,\n items: mockData.items.slice(0, 2),\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "AAiBQ,cAAAA,MAAA,oBAhBR,OAAOC,MAAwB,gDAE/B,MAAMC,EAAO,CACX,MAAO,oCACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,iIACb,CACF,CACF,EACA,WAAY,CACVE,GACEH,EAAC,OAAI,MAAO,CAAE,WAAY,MAAO,WAAY,OAAQ,UAAW,OAAQ,EACtE,SAAAA,EAACG,EAAA,EAAM,EACT,CAEJ,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOC,EAAQF,EAGf,MAAMG,EAAW,CACf,GAAI,2BACJ,QAAS,UACT,MAAO,mBACP,SAAU,gBACV,UAAW,CACT,WAAY,KACZ,YAAa,IACf,EACA,UAAW,wDACX,UAAW,qBACX,MAAO,CACL,CACE,GAAI,2BACJ,MAAO,mBACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,EACA,CACE,GAAI,2BACJ,MAAO,0CACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,EACA,CACE,GAAI,2BACJ,MAAO,2BACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,MAAOA,EAAS,MAAM,IAAIG,IAAS,CACjC,GAAGA,EACH,IAAK,MACP,EAAE,CACJ,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGJ,EACH,MAAOA,EAAS,MAAM,IAAIG,IAAS,CACjC,GAAGA,EACH,SAAU,IACZ,EAAE,CACJ,CACF,CACF,EAEaE,EAAkB,CAC7B,KAAM,CACJ,KAAM,CACJ,GAAGL,EACH,MAAOA,EAAS,MAAM,MAAM,EAAG,CAAC,CAClC,CACF,CACF",
|
|
6
|
+
"names": ["jsx", "MediaSceneSwitcher", "meta", "Story", "MediaSceneSwitcher_stories_default", "mockData", "Default", "WithoutTags", "item", "ImageOnly", "TwoItems"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,129 @@
|
|
|
1
|
-
import
|
|
1
|
+
import"react";import s from"../biz-components/ThreeDCarousel/index.js";const a={title:"Biz Components/ThreeDCarousel",component:s,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
|
+
3D \u8F6E\u64AD\u7EC4\u4EF6\uFF0C\u652F\u6301\u684C\u9762\u7AEF 3D \u89C6\u89C9\u6548\u679C\u548C\u79FB\u52A8\u7AEF\u6ED1\u52A8\u5C55\u793A\u3002\u9002\u7528\u4E8E\u4EA7\u54C1\u5C55\u793A\u3001\u56FE\u7247\u753B\u5ECA\u7B49\u573A\u666F\u3002
|
|
3
|
+
|
|
4
|
+
## \u529F\u80FD\u7279\u6027
|
|
5
|
+
|
|
6
|
+
- **\u684C\u9762\u7AEF 3D \u6548\u679C**\uFF1A\u4F7F\u7528 Swiper Coverflow \u6548\u679C\uFF0C\u63D0\u4F9B\u6C89\u6D78\u5F0F 3D \u89C6\u89C9\u4F53\u9A8C
|
|
7
|
+
- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u5E03\u5C40\u548C\u4EA4\u4E92\u65B9\u5F0F
|
|
8
|
+
- **\u5FAA\u73AF\u64AD\u653E**\uFF1A\u652F\u6301\u65E0\u9650\u5FAA\u73AF\u6ED1\u52A8
|
|
9
|
+
- **\u54CD\u5E94\u5F0F\u65AD\u70B9**\uFF1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574 3D \u6548\u679C\u53C2\u6570
|
|
10
|
+
- **\u56FE\u7247\u81EA\u9002\u5E94**\uFF1A\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u72EC\u7ACB\u56FE\u7247\u8D44\u6E90
|
|
11
|
+
|
|
12
|
+
## \u53EF\u7528\u7684\u8BED\u4E49\u5316 CSS \u7C7B\u540D
|
|
13
|
+
|
|
14
|
+
\u7EC4\u4EF6\u4F7F\u7528 BEM \u547D\u540D\u89C4\u8303\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u8BED\u4E49\u5316\u7C7B\u540D\u65B9\u4FBF\u6837\u5F0F\u5B9A\u5236\uFF1A
|
|
15
|
+
|
|
16
|
+
### \u6839\u5BB9\u5668
|
|
17
|
+
- \`.three-d-carousel\` - \u7EC4\u4EF6\u6839\u5143\u7D20
|
|
18
|
+
- \`.three-d-carousel__title\` - \u6807\u9898\u5143\u7D20
|
|
19
|
+
|
|
20
|
+
### \u684C\u9762\u7AEF\u5E03\u5C40
|
|
21
|
+
- \`.three-d-carousel__desktop\` - \u684C\u9762\u7AEF\u5BB9\u5668
|
|
22
|
+
- \`.three-d-carousel__swiper\` - Swiper \u5B9E\u4F8B
|
|
23
|
+
- \`.three-d-carousel__slide\` - \u5355\u4E2A\u6ED1\u5757
|
|
24
|
+
- \`.three-d-carousel__image\` - \u56FE\u7247\u5143\u7D20
|
|
25
|
+
- \`.three-d-carousel__nav-controls\` - \u5BFC\u822A\u63A7\u5236\u5BB9\u5668
|
|
26
|
+
- \`.three-d-carousel__nav-button\` - \u5BFC\u822A\u6309\u94AE
|
|
27
|
+
- \`.three-d-carousel__nav-button--prev\` - \u4E0A\u4E00\u5F20\u6309\u94AE
|
|
28
|
+
- \`.three-d-carousel__nav-button--next\` - \u4E0B\u4E00\u5F20\u6309\u94AE
|
|
29
|
+
- \`.three-d-carousel__nav-icon\` - \u5BFC\u822A\u56FE\u6807
|
|
30
|
+
|
|
31
|
+
### \u79FB\u52A8\u7AEF\u5E03\u5C40
|
|
32
|
+
- \`.three-d-carousel__mobile\` - \u79FB\u52A8\u7AEF\u5BB9\u5668
|
|
33
|
+
- \`.three-d-carousel__swiper-mobile\` - \u79FB\u52A8\u7AEF Swiper \u5B9E\u4F8B
|
|
34
|
+
- \`.three-d-carousel__slide-mobile\` - \u79FB\u52A8\u7AEF\u6ED1\u5757
|
|
35
|
+
- \`.three-d-carousel__image-mobile\` - \u79FB\u52A8\u7AEF\u56FE\u7247
|
|
36
|
+
|
|
37
|
+
### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B
|
|
38
|
+
|
|
39
|
+
\`\`\`css
|
|
40
|
+
/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u6837\u5F0F */
|
|
41
|
+
.three-d-carousel__nav-button {
|
|
42
|
+
opacity: 0.8;
|
|
43
|
+
transition: opacity 0.3s ease;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.three-d-carousel__nav-button:hover {
|
|
47
|
+
opacity: 1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */
|
|
51
|
+
.three-d-carousel__title {
|
|
52
|
+
font-size: 3rem;
|
|
53
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
54
|
+
-webkit-background-clip: text;
|
|
55
|
+
-webkit-text-fill-color: transparent;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* \u81EA\u5B9A\u4E49\u56FE\u7247\u5706\u89D2 */
|
|
59
|
+
.three-d-carousel__image,
|
|
60
|
+
.three-d-carousel__image-mobile {
|
|
61
|
+
border-radius: 24px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u56FE\u6807\u989C\u8272 */
|
|
65
|
+
.three-d-carousel__nav-icon {
|
|
66
|
+
color: #667eea;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.three-d-carousel__nav-icon:hover {
|
|
70
|
+
color: #764ba2;
|
|
71
|
+
}
|
|
72
|
+
\`\`\`
|
|
73
|
+
`}}},tags:["autodocs"]};var l=a;const e={title:"Conquer Every Mess",items:[{imageUrl:{id:3064,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718",filename:"pc-c1.png",mimeType:"image/png",width:1648,height:960},mobImageUrl:{id:3065,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762",url:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762",thumbnailURL:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762",filename:"mob-c1.png",mimeType:"image/png",width:592,height:720},title:"Text/Heading/h3",description:"Text/Body/t1",buttonText:"Learn More",buttonLink:null},{imageUrl:{id:3068,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924",filename:"pc-c2.png",mimeType:"image/png",width:1648,height:960},mobImageUrl:{id:3069,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954",filename:"mob-c2.png",mimeType:"image/png",width:592,height:720},title:"Text/Heading/h3",description:"Text/Body/t1",buttonText:"Learn More",buttonLink:null},{imageUrl:{id:3070,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983",filename:"pc-c3.png",mimeType:"image/png",width:1648,height:960},mobImageUrl:{id:3071,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000",filename:"mob-c3.png",mimeType:"image/png",width:592,height:720},title:"Text/Heading/h3",description:"Text/Body/t1",buttonText:"Learn More",buttonLink:null},{imageUrl:{id:3072,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037",filename:"pc-c4.png",mimeType:"image/png",width:1648,height:960},mobImageUrl:{id:3073,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058",filename:"mob-c4.png",mimeType:"image/png",width:592,height:720},title:"Text/Heading/h3",description:"Text/Body/t1",buttonText:"Learn More",buttonLink:null}]},n={args:{data:e},parameters:{docs:{description:{story:"\u9ED8\u8BA4\u573A\u666F\uFF0C\u5C55\u793A\u4E09\u4E2A\u6E05\u6D01\u573A\u666F\u7684 3D \u8F6E\u64AD\u6548\u679C\u3002\u684C\u9762\u7AEF\u652F\u6301\u70B9\u51FB\u5BFC\u822A\u6309\u94AE\u6216\u70B9\u51FB\u5E7B\u706F\u7247\u5207\u6362\uFF0C\u79FB\u52A8\u7AEF\u652F\u6301\u6ED1\u52A8\u5207\u6362\u3002"}}}},d={args:{data:{...e,items:[e.items[0]]}},parameters:{docs:{description:{story:"\u53EA\u6709\u4E00\u4E2A\u9879\u76EE\u7684\u60C5\u51B5\u3002\u4ECD\u7136\u53EF\u4EE5\u5FAA\u73AF\u6D4F\u89C8\u3002"}}}},p={args:{data:{...e,items:e.items.slice(0,2)}},parameters:{docs:{description:{story:"\u4E24\u4E2A\u9879\u76EE\u7684\u573A\u666F\uFF0C3D \u6548\u679C\u4F9D\u7136\u751F\u6548\u3002"}}}},m={args:{data:{...e,items:e.items.map(({mobImageUrl:o,...t})=>({...t,mobImageUrl:null}))}},parameters:{docs:{description:{story:"\u6CA1\u6709\u63D0\u4F9B\u79FB\u52A8\u7AEF\u4E13\u7528\u56FE\u7247\uFF0C\u5C06\u81EA\u52A8\u4F7F\u7528\u684C\u9762\u7AEF\u56FE\u7247\u8D44\u6E90\u3002"}}}},b={args:{data:e,className:"bg-gradient-to-b from-gray-900 to-black py-20"},parameters:{docs:{description:{story:`
|
|
74
|
+
\u901A\u8FC7 className \u5C5E\u6027\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5916\u89C2\u3002\u8BE5\u793A\u4F8B\u6DFB\u52A0\u4E86\u6E10\u53D8\u80CC\u666F\u548C\u5185\u8FB9\u8DDD\u3002
|
|
75
|
+
|
|
76
|
+
**\u53EF\u7528\u7684\u8BED\u4E49\u5316 CSS \u7C7B\u540D\uFF1A**
|
|
77
|
+
|
|
78
|
+
\`\`\`css
|
|
79
|
+
/* \u6839\u5BB9\u5668 */
|
|
80
|
+
.three-d-carousel { }
|
|
81
|
+
.three-d-carousel__title { }
|
|
82
|
+
|
|
83
|
+
/* \u684C\u9762\u7AEF\u5E03\u5C40 */
|
|
84
|
+
.three-d-carousel__desktop { }
|
|
85
|
+
.three-d-carousel__swiper { }
|
|
86
|
+
.three-d-carousel__slide { }
|
|
87
|
+
.three-d-carousel__image { }
|
|
88
|
+
.three-d-carousel__nav-controls { }
|
|
89
|
+
.three-d-carousel__nav-button { }
|
|
90
|
+
.three-d-carousel__nav-button--prev { }
|
|
91
|
+
.three-d-carousel__nav-button--next { }
|
|
92
|
+
.three-d-carousel__nav-icon { }
|
|
93
|
+
|
|
94
|
+
/* \u79FB\u52A8\u7AEF\u5E03\u5C40 */
|
|
95
|
+
.three-d-carousel__mobile { }
|
|
96
|
+
.three-d-carousel__swiper-mobile { }
|
|
97
|
+
.three-d-carousel__slide-mobile { }
|
|
98
|
+
.three-d-carousel__image-mobile { }
|
|
99
|
+
\`\`\`
|
|
100
|
+
|
|
101
|
+
**\u4F7F\u7528\u793A\u4F8B\uFF1A**
|
|
102
|
+
|
|
103
|
+
\`\`\`css
|
|
104
|
+
/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u6837\u5F0F */
|
|
105
|
+
.three-d-carousel__nav-button {
|
|
106
|
+
opacity: 0.8;
|
|
107
|
+
transition: opacity 0.3s ease;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.three-d-carousel__nav-button:hover {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */
|
|
115
|
+
.three-d-carousel__title {
|
|
116
|
+
font-size: 3rem;
|
|
117
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
118
|
+
-webkit-background-clip: text;
|
|
119
|
+
-webkit-text-fill-color: transparent;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* \u81EA\u5B9A\u4E49\u56FE\u7247\u5706\u89D2 */
|
|
123
|
+
.three-d-carousel__image,
|
|
124
|
+
.three-d-carousel__image-mobile {
|
|
125
|
+
border-radius: 24px;
|
|
126
|
+
}
|
|
127
|
+
\`\`\`
|
|
128
|
+
`}}}},h={args:{data:{...e,title:'Experience <span class="text-blue-400">Revolutionary</span> Cleaning'}},parameters:{docs:{description:{story:"\u4F7F\u7528 HTML \u6807\u7B7E\u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F\u3002\u6807\u9898\u652F\u6301 HTML \u5185\u5BB9\uFF0C\u53EF\u4EE5\u6DFB\u52A0\u6837\u5F0F\u548C\u683C\u5F0F\u3002"}}}};export{h as CustomTitle,n as Default,d as SingleItem,p as TwoItems,b as WithCustomClass,m as WithoutMobileImages,l as default};
|
|
2
129
|
//# sourceMappingURL=ThreeDCarousel.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/ThreeDCarousel.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport ThreeDCarousel from '../biz-components/ThreeDCarousel/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Biz-Components/ThreeDCarousel',\n component: ThreeDCarousel,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: '3D \u8F6E\u64AD\u7EC4\u4EF6\uFF0C\u684C\u9762\u7AEF\u6700\u591A\u540C\u65F6\u5C55\u793A3\u4E2A\u9879\u76EE\uFF08\u4E2D\u95F41\u4E2A\u9AD8\u4EAE\uFF0C\u4E24\u4FA7\u54041\u4E2A\uFF09\uFF0C\u652F\u6301\u62D6\u62FD\u3001\u952E\u76D8\u5BFC\u822A\uFF1B\u79FB\u52A8\u7AEF\u6A2A\u5411\u6EDA\u52A8\uFF0C\u652F\u6301\u89E6\u6478\u64CD\u4F5C',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n data: {\n description: '\u8F6E\u64AD\u6570\u636E\uFF0C\u5305\u542B\u6807\u9898\u548C\u9879\u76EE\u5217\u8868',\n control: {\n type: 'object',\n },\n },\n className: {\n description: '\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D',\n control: {\n type: 'text',\n },\n },\n },\n} satisfies Meta<typeof ThreeDCarousel>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst sampleImages = [\n 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=824&h=480&fit=crop',\n 'https://images.unsplash.com/photo-1682687221038-404cb8830901?w=824&h=480&fit=crop',\n 'https://images.unsplash.com/photo-1682687220063-4742bd7fd538?w=824&h=480&fit=crop',\n 'https://images.unsplash.com/photo-1682687220199-d0124f48f95b?w=824&h=480&fit=crop',\n 'https://images.unsplash.com/photo-1682687220945-922d7c4f3f3d?w=824&h=480&fit=crop',\n]\n\nconst sampleMobileImages = [\n 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=296&h=360&fit=crop',\n 'https://images.unsplash.com/photo-1682687221038-404cb8830901?w=296&h=360&fit=crop',\n 'https://images.unsplash.com/photo-1682687220063-4742bd7fd538?w=296&h=360&fit=crop',\n 'https://images.unsplash.com/photo-1682687220199-d0124f48f95b?w=296&h=360&fit=crop',\n 'https://images.unsplash.com/photo-1682687220945-922d7c4f3f3d?w=296&h=360&fit=crop',\n]\n\nexport const Default: Story = {\n args: {\n data: {\n title: 'Featured Products',\n items: [\n {\n imageUrl: sampleImages[0],\n mobImageUrl: sampleMobileImages[0],\n title: 'Product 1',\n description: 'Amazing features and design',\n },\n {\n imageUrl: sampleImages[1],\n mobImageUrl: sampleMobileImages[1],\n title: 'Product 2',\n description: 'Innovative technology',\n },\n {\n imageUrl: sampleImages[2],\n mobImageUrl: sampleMobileImages[2],\n title: 'Product 3',\n description: 'Premium quality',\n },\n {\n imageUrl: sampleImages[3],\n mobImageUrl: sampleMobileImages[3],\n title: 'Product 4',\n description: 'Enhanced performance',\n },\n {\n imageUrl: sampleImages[4],\n mobImageUrl: sampleMobileImages[4],\n title: 'Product 5',\n description: 'Superior experience',\n },\n ],\n },\n },\n}\nDefault.parameters = {\n docs: {\n description: {\n story: '5\u4E2A\u9879\u76EE\u7684\u5B8C\u6574\u793A\u4F8B\uFF0C\u652F\u6301\u5DE6\u53F3\u5207\u6362\u6D4F\u89C8\u3002\u684C\u9762\u7AEF\u4F7F\u7528\u65B9\u5411\u952E\u6216\u62D6\u62FD\u5207\u6362\uFF0C\u79FB\u52A8\u7AEF\u6A2A\u5411\u6ED1\u52A8',\n },\n },\n}\n\nexport const WithoutTitle: Story = {\n args: {\n data: {\n items: [\n {\n imageUrl: sampleImages[0],\n mobImageUrl: sampleMobileImages[0],\n title: 'Product 1',\n description: 'Amazing features and design',\n },\n {\n imageUrl: sampleImages[1],\n mobImageUrl: sampleMobileImages[1],\n title: 'Product 2',\n description: 'Innovative technology',\n },\n {\n imageUrl: sampleImages[2],\n mobImageUrl: sampleMobileImages[2],\n title: 'Product 3',\n description: 'Premium quality',\n },\n ],\n },\n },\n}\n\nexport const WithoutItemTitles: Story = {\n args: {\n data: {\n title: 'Image Gallery',\n items: [\n {\n imageUrl: sampleImages[0],\n mobImageUrl: sampleMobileImages[0],\n },\n {\n imageUrl: sampleImages[1],\n mobImageUrl: sampleMobileImages[1],\n },\n {\n imageUrl: sampleImages[2],\n mobImageUrl: sampleMobileImages[2],\n },\n {\n imageUrl: sampleImages[3],\n mobImageUrl: sampleMobileImages[3],\n },\n ],\n },\n },\n}\n\nexport const ThreeItems: Story = {\n args: {\n data: {\n title: '3 Items (All Visible)',\n items: [\n {\n imageUrl: sampleImages[0],\n mobImageUrl: sampleMobileImages[0],\n title: 'Item 1',\n description: 'Left side item',\n },\n {\n imageUrl: sampleImages[1],\n mobImageUrl: sampleMobileImages[1],\n title: 'Item 2',\n description: 'Center highlighted',\n },\n {\n imageUrl: sampleImages[2],\n mobImageUrl: sampleMobileImages[2],\n title: 'Item 3',\n description: 'Right side item',\n },\n ],\n },\n },\n}\nThreeItems.parameters = {\n docs: {\n description: {\n story: '\u6070\u597D3\u4E2A\u9879\u76EE\u65F6\uFF0C\u684C\u9762\u7AEF\u53EF\u540C\u65F6\u770B\u5230\u6240\u6709\u9879\u76EE\uFF1A\u4E2D\u95F4\u9AD8\u4EAE\u663E\u793A\uFF0C\u4E24\u4FA7\u5404\u4E00\u4E2A',\n },\n },\n}\n\nexport const CustomClassName: Story = {\n args: {\n data: {\n title: 'Custom Styled Carousel',\n items: [\n {\n imageUrl: sampleImages[0],\n mobImageUrl: sampleMobileImages[0],\n title: 'Product A',\n description: 'Description A',\n },\n {\n imageUrl: sampleImages[1],\n mobImageUrl: sampleMobileImages[1],\n title: 'Product B',\n description: 'Description B',\n },\n {\n imageUrl: sampleImages[2],\n mobImageUrl: sampleMobileImages[2],\n title: 'Product C',\n description: 'Description C',\n },\n ],\n },\n className: 'bg-gradient-to-b from-gray-900 to-black py-12',\n },\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["ThreeDCarousel", "meta", "ThreeDCarousel_stories_default", "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport ThreeDCarousel from '../biz-components/ThreeDCarousel/index.js'\nimport type { ThreeDCarouselProps } from '../biz-components/ThreeDCarousel/types.js'\n\nconst meta = {\n title: 'Biz Components/ThreeDCarousel',\n component: ThreeDCarousel,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\n3D \u8F6E\u64AD\u7EC4\u4EF6\uFF0C\u652F\u6301\u684C\u9762\u7AEF 3D \u89C6\u89C9\u6548\u679C\u548C\u79FB\u52A8\u7AEF\u6ED1\u52A8\u5C55\u793A\u3002\u9002\u7528\u4E8E\u4EA7\u54C1\u5C55\u793A\u3001\u56FE\u7247\u753B\u5ECA\u7B49\u573A\u666F\u3002\n\n## \u529F\u80FD\u7279\u6027\n\n- **\u684C\u9762\u7AEF 3D \u6548\u679C**\uFF1A\u4F7F\u7528 Swiper Coverflow \u6548\u679C\uFF0C\u63D0\u4F9B\u6C89\u6D78\u5F0F 3D \u89C6\u89C9\u4F53\u9A8C\n- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u5E03\u5C40\u548C\u4EA4\u4E92\u65B9\u5F0F\n- **\u5FAA\u73AF\u64AD\u653E**\uFF1A\u652F\u6301\u65E0\u9650\u5FAA\u73AF\u6ED1\u52A8\n- **\u54CD\u5E94\u5F0F\u65AD\u70B9**\uFF1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574 3D \u6548\u679C\u53C2\u6570\n- **\u56FE\u7247\u81EA\u9002\u5E94**\uFF1A\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u72EC\u7ACB\u56FE\u7247\u8D44\u6E90\n\n## \u53EF\u7528\u7684\u8BED\u4E49\u5316 CSS \u7C7B\u540D\n\n\u7EC4\u4EF6\u4F7F\u7528 BEM \u547D\u540D\u89C4\u8303\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u8BED\u4E49\u5316\u7C7B\u540D\u65B9\u4FBF\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n### \u6839\u5BB9\u5668\n- \\`.three-d-carousel\\` - \u7EC4\u4EF6\u6839\u5143\u7D20\n- \\`.three-d-carousel__title\\` - \u6807\u9898\u5143\u7D20\n\n### \u684C\u9762\u7AEF\u5E03\u5C40\n- \\`.three-d-carousel__desktop\\` - \u684C\u9762\u7AEF\u5BB9\u5668\n- \\`.three-d-carousel__swiper\\` - Swiper \u5B9E\u4F8B\n- \\`.three-d-carousel__slide\\` - \u5355\u4E2A\u6ED1\u5757\n- \\`.three-d-carousel__image\\` - \u56FE\u7247\u5143\u7D20\n- \\`.three-d-carousel__nav-controls\\` - \u5BFC\u822A\u63A7\u5236\u5BB9\u5668\n- \\`.three-d-carousel__nav-button\\` - \u5BFC\u822A\u6309\u94AE\n- \\`.three-d-carousel__nav-button--prev\\` - \u4E0A\u4E00\u5F20\u6309\u94AE\n- \\`.three-d-carousel__nav-button--next\\` - \u4E0B\u4E00\u5F20\u6309\u94AE\n- \\`.three-d-carousel__nav-icon\\` - \u5BFC\u822A\u56FE\u6807\n\n### \u79FB\u52A8\u7AEF\u5E03\u5C40\n- \\`.three-d-carousel__mobile\\` - \u79FB\u52A8\u7AEF\u5BB9\u5668\n- \\`.three-d-carousel__swiper-mobile\\` - \u79FB\u52A8\u7AEF Swiper \u5B9E\u4F8B\n- \\`.three-d-carousel__slide-mobile\\` - \u79FB\u52A8\u7AEF\u6ED1\u5757\n- \\`.three-d-carousel__image-mobile\\` - \u79FB\u52A8\u7AEF\u56FE\u7247\n\n### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B\n\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u6837\u5F0F */\n.three-d-carousel__nav-button {\n opacity: 0.8;\n transition: opacity 0.3s ease;\n}\n\n.three-d-carousel__nav-button:hover {\n opacity: 1;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.three-d-carousel__title {\n font-size: 3rem;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u5706\u89D2 */\n.three-d-carousel__image,\n.three-d-carousel__image-mobile {\n border-radius: 24px;\n}\n\n/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u56FE\u6807\u989C\u8272 */\n.three-d-carousel__nav-icon {\n color: #667eea;\n}\n\n.three-d-carousel__nav-icon:hover {\n color: #764ba2;\n}\n\\`\\`\\`\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ThreeDCarousel>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: ThreeDCarouselProps['data'] = {\n title: 'Conquer Every Mess',\n items: [\n {\n imageUrl: {\n id: 3064,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718',\n filename: 'pc-c1.png',\n mimeType: 'image/png',\n width: 1648,\n height: 960,\n },\n mobImageUrl: {\n id: 3065,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762',\n url: 'https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762',\n filename: 'mob-c1.png',\n mimeType: 'image/png',\n width: 592,\n height: 720,\n },\n title: 'Text/Heading/h3',\n description: 'Text/Body/t1',\n buttonText: 'Learn More',\n buttonLink: null,\n },\n {\n imageUrl: {\n id: 3068,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924',\n filename: 'pc-c2.png',\n mimeType: 'image/png',\n width: 1648,\n height: 960,\n },\n mobImageUrl: {\n id: 3069,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954',\n filename: 'mob-c2.png',\n mimeType: 'image/png',\n width: 592,\n height: 720,\n },\n title: 'Text/Heading/h3',\n description: 'Text/Body/t1',\n buttonText: 'Learn More',\n buttonLink: null,\n },\n {\n imageUrl: {\n id: 3070,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983',\n filename: 'pc-c3.png',\n mimeType: 'image/png',\n width: 1648,\n height: 960,\n },\n mobImageUrl: {\n id: 3071,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000',\n filename: 'mob-c3.png',\n mimeType: 'image/png',\n width: 592,\n height: 720,\n },\n title: 'Text/Heading/h3',\n description: 'Text/Body/t1',\n buttonText: 'Learn More',\n buttonLink: null,\n },\n {\n imageUrl: {\n id: 3072,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037',\n filename: 'pc-c4.png',\n mimeType: 'image/png',\n width: 1648,\n height: 960,\n },\n mobImageUrl: {\n id: 3073,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058',\n filename: 'mob-c4.png',\n mimeType: 'image/png',\n width: 592,\n height: 720,\n },\n title: 'Text/Heading/h3',\n description: 'Text/Body/t1',\n buttonText: 'Learn More',\n buttonLink: null,\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u9ED8\u8BA4\u573A\u666F\uFF0C\u5C55\u793A\u4E09\u4E2A\u6E05\u6D01\u573A\u666F\u7684 3D \u8F6E\u64AD\u6548\u679C\u3002\u684C\u9762\u7AEF\u652F\u6301\u70B9\u51FB\u5BFC\u822A\u6309\u94AE\u6216\u70B9\u51FB\u5E7B\u706F\u7247\u5207\u6362\uFF0C\u79FB\u52A8\u7AEF\u652F\u6301\u6ED1\u52A8\u5207\u6362\u3002',\n },\n },\n },\n}\n\nexport const SingleItem: Story = {\n args: {\n data: {\n ...defaultData,\n items: [defaultData.items[0]],\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u53EA\u6709\u4E00\u4E2A\u9879\u76EE\u7684\u60C5\u51B5\u3002\u4ECD\u7136\u53EF\u4EE5\u5FAA\u73AF\u6D4F\u89C8\u3002',\n },\n },\n },\n}\n\nexport const TwoItems: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.slice(0, 2),\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u4E24\u4E2A\u9879\u76EE\u7684\u573A\u666F\uFF0C3D \u6548\u679C\u4F9D\u7136\u751F\u6548\u3002',\n },\n },\n },\n}\n\nexport const WithoutMobileImages: Story = {\n args: {\n data: {\n ...defaultData,\n items: defaultData.items.map(({ mobImageUrl, ...item }) => ({\n ...item,\n mobImageUrl: null,\n })),\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u6CA1\u6709\u63D0\u4F9B\u79FB\u52A8\u7AEF\u4E13\u7528\u56FE\u7247\uFF0C\u5C06\u81EA\u52A8\u4F7F\u7528\u684C\u9762\u7AEF\u56FE\u7247\u8D44\u6E90\u3002',\n },\n },\n },\n}\n\nexport const WithCustomClass: Story = {\n args: {\n data: defaultData,\n className: 'bg-gradient-to-b from-gray-900 to-black py-20',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u901A\u8FC7 className \u5C5E\u6027\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5916\u89C2\u3002\u8BE5\u793A\u4F8B\u6DFB\u52A0\u4E86\u6E10\u53D8\u80CC\u666F\u548C\u5185\u8FB9\u8DDD\u3002\n\n**\u53EF\u7528\u7684\u8BED\u4E49\u5316 CSS \u7C7B\u540D\uFF1A**\n\n\\`\\`\\`css\n/* \u6839\u5BB9\u5668 */\n.three-d-carousel { }\n.three-d-carousel__title { }\n\n/* \u684C\u9762\u7AEF\u5E03\u5C40 */\n.three-d-carousel__desktop { }\n.three-d-carousel__swiper { }\n.three-d-carousel__slide { }\n.three-d-carousel__image { }\n.three-d-carousel__nav-controls { }\n.three-d-carousel__nav-button { }\n.three-d-carousel__nav-button--prev { }\n.three-d-carousel__nav-button--next { }\n.three-d-carousel__nav-icon { }\n\n/* \u79FB\u52A8\u7AEF\u5E03\u5C40 */\n.three-d-carousel__mobile { }\n.three-d-carousel__swiper-mobile { }\n.three-d-carousel__slide-mobile { }\n.three-d-carousel__image-mobile { }\n\\`\\`\\`\n\n**\u4F7F\u7528\u793A\u4F8B\uFF1A**\n\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u6837\u5F0F */\n.three-d-carousel__nav-button {\n opacity: 0.8;\n transition: opacity 0.3s ease;\n}\n\n.three-d-carousel__nav-button:hover {\n opacity: 1;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.three-d-carousel__title {\n font-size: 3rem;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u5706\u89D2 */\n.three-d-carousel__image,\n.three-d-carousel__image-mobile {\n border-radius: 24px;\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n\nexport const CustomTitle: Story = {\n args: {\n data: {\n ...defaultData,\n title: 'Experience <span class=\"text-blue-400\">Revolutionary</span> Cleaning',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u4F7F\u7528 HTML \u6807\u7B7E\u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F\u3002\u6807\u9898\u652F\u6301 HTML \u5185\u5BB9\uFF0C\u53EF\u4EE5\u6DFB\u52A0\u6837\u5F0F\u548C\u683C\u5F0F\u3002',\n },\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ThreeDCarousel", "meta", "ThreeDCarousel_stories_default", "defaultData", "Default", "SingleItem", "TwoItems", "WithoutMobileImages", "mobImageUrl", "item", "WithCustomClass", "CustomTitle"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from"../biz-components/Ksp/index.js";const a={title:"Biz-Components/Ksp",component:t,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
# Ksp \u5173\u952E\u5356\u70B9\u7EC4\u4EF6
|
|
3
3
|
|
|
4
4
|
\u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF08Key Selling Points\uFF09\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002
|
|
@@ -78,7 +78,7 @@ import o from"../biz-components/Ksp/index.js";const e={title:"Biz-Components/Ksp
|
|
|
78
78
|
\`\`\`
|
|
79
79
|
|
|
80
80
|
\u{1F4A1} \u67E5\u770B **CustomStyle** story \u4E86\u89E3\u5B8C\u6574\u793A\u4F8B
|
|
81
|
-
`}}},tags:["autodocs"],argTypes:{data:{description:"KSP \u6570\u636E\uFF0C\u5305\u542B title \u548C items\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09",control:{type:"object"}},className:{description:"\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0C\u53EF\u914D\u5408\u4EE5\u4E0B\u56FA\u5B9A class name \u4F7F\u7528 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n \n**\u5E03\u5C40\u76F8\u5173\uFF1A**\n- `.ksp-container` - \u4E3B\u5BB9\u5668\n- `.ksp-desktop-layout` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- `.ksp-mobile-layout` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- `.ksp-row` - \u884C\u5BB9\u5668\n- `.ksp-row-1/2/3` - \u684C\u9762\u7AEF\u5404\u884C\n- `.ksp-row-mobile-1/2` - \u624B\u673A\u7AEF\u5404\u884C\n\n**\u5361\u7247\u76F8\u5173\uFF1A**\n- `.ksp-card` - \u5361\u7247\u5BB9\u5668\n- `.ksp-card-image` - \u5361\u7247\u56FE\u7247\n- `.ksp-card-video` - \u5361\u7247\u89C6\u9891\n- `.ksp-card-video-desktop` - \u684C\u9762\u7AEF\u89C6\u9891\n- `.ksp-card-video-mobile` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- `.ksp-card-content` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- `.ksp-card-title` - \u5361\u7247\u6807\u9898\n- `.ksp-card-desc` - \u5361\u7247\u63CF\u8FF0\n\n**\u6587\u672C\u76F8\u5173\uFF1A**\n- `.ksp-title` - \u4E3B\u6807\u9898",control:{type:"text"}}}};var a=e;const t={title:"Why Choose Our Product",items:[{title:"Improved Cleaning Efficiency",desc:"HydroJet\u2122 Floor Washing System",imageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80"},{title:"100% Cleaning Coverage",desc:"Edge-Cleaning CornerRover\u2122 Arm",imageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80"},{title:"All You Need, All-in-One",desc:"Complete Cleaning Solution",imageUrl:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80"},{title:"Less Maintenance",desc:"DuoSpiral\u2122 Detangle Brushes",imageUrl:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80"},{title:"Cleaning Power Upgrade",desc:"20,000 Pa Turbo Suction",imageUrl:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80"},{title:"Intelligent Cleaning",desc:"Smart App Control & Scheduling",imageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80"},{title:"AI.See\u2122 Obstacle Avoidance",desc:"Advanced Object Recognition",imageUrl:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80"}]},p={args:{data:t}},c={args:{data:{title:"\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC\u7684\u4EA7\u54C1",items:[{title:"\u6E05\u6D01\u6548\u7387\u5927\u5E45\u63D0\u5347",desc:"HydroJet\u2122 \u5730\u677F\u6E05\u6D01\u7CFB\u7EDF",imageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80"},{title:"100% \u6E05\u6D01\u8986\u76D6",desc:"CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2",imageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80"},{title:"\u4E00\u673A\u591A\u7528\uFF0C\u5168\u80FD\u6E05\u6D01",desc:"\u5B8C\u6574\u7684\u6E05\u6D01\u89E3\u51B3\u65B9\u6848",imageUrl:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80"},{title:"\u66F4\u5C11\u7EF4\u62A4",desc:"DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934",imageUrl:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80"},{title:"\u6E05\u6D01\u80FD\u529B\u5347\u7EA7",desc:"20,000 Pa \u5F3A\u529B\u5438\u5C18",imageUrl:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80"},{title:"\u667A\u80FD\u6E05\u6D01",desc:"APP \u8FDC\u7A0B\u63A7\u5236\u4E0E\u5B9A\u65F6",imageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80"},{title:"AI \u667A\u80FD\u907F\u969C",desc:"\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F",imageUrl:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80"}]}}},i={args:{data:{title:"Experience the Difference",items:[{title:"Powerful Performance",desc:"See it in action",videoUrl:"https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",imageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80"},{title:"Smart Navigation",desc:"Advanced mapping technology",videoUrl:"https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",imageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80"},...t.items.slice(2)]}}},r={args:{data:{items:t.items}}},m={args:{data:t,className:"py-20",style:`
|
|
81
|
+
`}}},tags:["autodocs"],argTypes:{data:{description:"KSP \u6570\u636E\uFF0C\u5305\u542B title \u548C items\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09",control:{type:"object"}},className:{description:"\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0C\u53EF\u914D\u5408\u4EE5\u4E0B\u56FA\u5B9A class name \u4F7F\u7528 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n \n**\u5E03\u5C40\u76F8\u5173\uFF1A**\n- `.ksp-container` - \u4E3B\u5BB9\u5668\n- `.ksp-desktop-layout` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- `.ksp-mobile-layout` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- `.ksp-row` - \u884C\u5BB9\u5668\n- `.ksp-row-1/2/3` - \u684C\u9762\u7AEF\u5404\u884C\n- `.ksp-row-mobile-1/2` - \u624B\u673A\u7AEF\u5404\u884C\n\n**\u5361\u7247\u76F8\u5173\uFF1A**\n- `.ksp-card` - \u5361\u7247\u5BB9\u5668\n- `.ksp-card-image` - \u5361\u7247\u56FE\u7247\n- `.ksp-card-video` - \u5361\u7247\u89C6\u9891\n- `.ksp-card-video-desktop` - \u684C\u9762\u7AEF\u89C6\u9891\n- `.ksp-card-video-mobile` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- `.ksp-card-content` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- `.ksp-card-title` - \u5361\u7247\u6807\u9898\n- `.ksp-card-desc` - \u5361\u7247\u63CF\u8FF0\n\n**\u6587\u672C\u76F8\u5173\uFF1A**\n- `.ksp-title` - \u4E3B\u6807\u9898",control:{type:"text"}}}};var p=a;const e={title:"Why Choose Our Product",items:[{title:"Improved Cleaning Efficiency",desc:"HydroJet\u2122 Floor Washing System",image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"100% Cleaning Coverage",desc:"Edge-Cleaning CornerRover\u2122 Arm",image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"All You Need, All-in-One",desc:"Complete Cleaning Solution",image:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Less Maintenance",desc:"DuoSpiral\u2122 Detangle Brushes",image:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Cleaning Power Upgrade",desc:"20,000 Pa Turbo Suction",image:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Intelligent Cleaning",desc:"Smart App Control & Scheduling",image:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"AI.See\u2122 Obstacle Avoidance",desc:"Advanced Object Recognition",image:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}}]},s={args:{data:e}},i={args:{data:{title:"\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC\u7684\u4EA7\u54C1",items:[{title:"\u6E05\u6D01\u6548\u7387\u5927\u5E45\u63D0\u5347",desc:"HydroJet\u2122 \u5730\u677F\u6E05\u6D01\u7CFB\u7EDF",image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"100% \u6E05\u6D01\u8986\u76D6",desc:"CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2",image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u4E00\u673A\u591A\u7528\uFF0C\u5168\u80FD\u6E05\u6D01",desc:"\u5B8C\u6574\u7684\u6E05\u6D01\u89E3\u51B3\u65B9\u6848",image:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u66F4\u5C11\u7EF4\u62A4",desc:"DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934",image:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u6E05\u6D01\u80FD\u529B\u5347\u7EA7",desc:"20,000 Pa \u5F3A\u529B\u5438\u5C18",image:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u667A\u80FD\u6E05\u6D01",desc:"APP \u8FDC\u7A0B\u63A7\u5236\u4E0E\u5B9A\u65F6",imageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mobImage:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"AI \u667A\u80FD\u907F\u969C",desc:"\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F",image:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",alt:"AI \u667A\u80FD\u907F\u969C",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",alt:"AI \u667A\u80FD\u907F\u969C",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}}]}}},m={args:{data:{title:"Experience the Difference",items:[{title:"Powerful Performance",desc:"See it in action",videoUrl:"https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Powerful Performance",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Powerful Performance",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Smart Navigation",desc:"Advanced mapping technology",video:{url:"https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"video/mp4"},mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"video/mp4"},image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},...e.items.slice(2)]}}},c={args:{data:{items:e.items}}},h={args:{data:e,className:"py-20",style:`
|
|
82
82
|
/* \u4E3B\u6807\u9898 - \u6E10\u53D8\u8272\u6587\u5B57\u6548\u679C */
|
|
83
83
|
.ksp-title {
|
|
84
84
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
@@ -125,5 +125,5 @@ import o from"../biz-components/Ksp/index.js";const e={title:"Biz-Components/Ksp
|
|
|
125
125
|
.ksp-card:hover::before {
|
|
126
126
|
opacity: 1;
|
|
127
127
|
}
|
|
128
|
-
`}};export{
|
|
128
|
+
`}};export{i as Chinese,h as CustomStyle,s as Default,c as NoTitle,m as WithVideo,p as default};
|
|
129
129
|
//# sourceMappingURL=ksp.stories.js.map
|