@anker-in/headless-ui 1.3.17 → 1.3.18
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/GiftShelf/index.js +1 -1
- package/dist/cjs/biz-components/GiftShelf/index.js.map +3 -3
- 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/MediaTextOverlay/MediaTextOverlay.js +1 -1
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +2 -2
- package/dist/cjs/biz-components/ProductCompare/index.js +1 -1
- package/dist/cjs/biz-components/ProductCompare/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/GiftShelf/index.js +1 -1
- package/dist/esm/biz-components/GiftShelf/index.js.map +3 -3
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +2 -2
- package/dist/esm/biz-components/ProductCompare/index.js +1 -1
- package/dist/esm/biz-components/ProductCompare/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/tokens/base.css +1 -0
- package/package.json +1 -1
- package/style.css +15 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaTextOverlay/MediaTextOverlay.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\ninterface ItemBlockProps {\n data: MediaTextOverlayItem\n configuration?: any\n jIndex?: number\n classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const { content, media } = item\n const theme = configuration?.theme || 'light'\n const size = configuration?.size || 'lg'\n const onlyOne = configuration?.onlyOne || false\n const isAutoPlay = configuration?.isAutoPlay ?? true\n\n const [isPlaying, setIsPlaying] = useState(false)\n\n useExposure(ref, {\n componentType,\n componentName,\n position: jIndex,\n componentTitle: content,\n navigation: configuration?.activeTab,\n })\n\n const hasVideo = useMemo(\n () =>\n [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n [media]\n )\n\n const handlePlayButtonClick = useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n } else {\n video.pause()\n setIsPlaying(false)\n }\n }\n }, [])\n\n useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo || !isAutoPlay) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n video.play().catch(error => {\n console.warn('Video autoplay failed:', error)\n })\n } else {\n video.pause()\n }\n })\n },\n { threshold: 0.5 }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [hasVideo, isAutoPlay])\n\n const sizeClasses = {\n lg: 'h-[400px] laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]',\n sm: 'h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]',\n }\n\n return (\n <div\n className={cn(\n 'item-wrapper rounded-box group relative box-border w-full overflow-hidden',\n onlyOne ? sizeClasses[size as keyof typeof sizeClasses] : 'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]',\n {\n 'aiui-dark': theme === 'dark',\n }\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Media\n pcImage={media.lgDesktop || media.desktop}\n desktopImage={media.desktop}\n laptopImage={media.laptop}\n padImage={media.pad}\n mobileImage={media.mobile}\n videoClassName=\"absolute inset-0 size-full object-cover\"\n imgClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={isAutoPlay}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n </div>\n\n {hasVideo && (\n <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n 'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n classNames.playButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n\n <div\n className={cn(\n 'text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20',\n classNames.overlay\n )}\n >\n <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n <Heading size={2} html={content} className=\"line-clamp-3\" />\n </div>\n </div>\n </div>\n )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n const { data, className, classNames = {}, ...rest } = props\n const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n const { locale = 'us' } = useAiuiContext()\n const swiperRef = useRef<any>(null)\n const [swiperState, setSwiperState] = useState({\n isBeginning: true,\n isEnd: false,\n })\n\n const breakpoints = useMemo(() => {\n const len = items?.length || 0\n return {\n 0: {\n spaceBetween: 12,\n slidesPerView: len > 1 ? 1.2 : 1,\n },\n 768: {\n spaceBetween: 12,\n slidesPerView: len > 2 ? 2.3 : len > 1 ? 2 : 1,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 3),\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 4),\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 4),\n },\n }\n }, [items?.length])\n\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n const nextButtonClass = `${id}-custom-swiper-button-next`\n const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n return (\n <section\n data-ui-component-id=\"MediaTextOverlay\"\n ref={ref}\n {...rest}\n className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n >\n {items && items.length > 0 ? (\n <div className=\"group relative\">\n <Swiper\n className=\"!overflow-visible\"\n modules={[Navigation]}\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n breakpoints={breakpoints}\n >\n {items.map((item, jIndex) => (\n <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className=\"!flex !h-[unset]\">\n <ItemBlock\n data={item}\n configuration={{\n theme,\n size,\n num: items.length,\n locale,\n onlyOne: items.length === 1,\n index: jIndex,\n isAutoPlay,\n }}\n jIndex={jIndex}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {isShowPagination && items.length > 1 && (\n <>\n <button\n className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Previous slide\"\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Next slide\"\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </>\n )}\n </div>\n ) : null}\n </section>\n )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
|
|
5
|
-
"mappings": "aAgBE,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\ninterface ItemBlockProps {\n data: MediaTextOverlayItem\n configuration?: any\n jIndex?: number\n classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const { content, media } = item\n const theme = configuration?.theme || 'light'\n const size = configuration?.size || 'lg'\n const onlyOne = configuration?.onlyOne || false\n const isAutoPlay = configuration?.isAutoPlay ?? true\n\n const [isPlaying, setIsPlaying] = useState(false)\n\n useExposure(ref, {\n componentType,\n componentName,\n position: jIndex,\n componentTitle: content,\n navigation: configuration?.activeTab,\n })\n\n const hasVideo = useMemo(\n () =>\n [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n [media]\n )\n\n const handlePlayButtonClick = useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n } else {\n video.pause()\n setIsPlaying(false)\n }\n }\n }, [])\n\n useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo || !isAutoPlay) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n video.play().catch(error => {\n console.warn('Video autoplay failed:', error)\n })\n } else {\n video.pause()\n }\n })\n },\n { threshold: 0.5 }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [hasVideo, isAutoPlay])\n\n const sizeClasses = {\n lg: 'aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]',\n sm: 'h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]',\n }\n\n return (\n <div\n className={cn(\n 'item-wrapper rounded-box group relative box-border w-full overflow-hidden',\n onlyOne\n ? sizeClasses[size as keyof typeof sizeClasses]\n : 'tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]',\n {\n 'aiui-dark': theme === 'dark',\n }\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Media\n pcImage={media.lgDesktop || media.desktop}\n desktopImage={media.desktop}\n laptopImage={media.laptop}\n padImage={media.pad}\n mobileImage={media.mobile}\n videoClassName=\"absolute inset-0 size-full object-cover\"\n imgClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={isAutoPlay}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n </div>\n\n {hasVideo && (\n <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n 'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n classNames.playButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n\n <div\n className={cn(\n 'text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20',\n classNames.overlay\n )}\n >\n <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n <Heading size={2} html={content} className=\"line-clamp-3\" />\n </div>\n </div>\n </div>\n )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n const { data, className, classNames = {}, ...rest } = props\n const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n const { locale = 'us' } = useAiuiContext()\n const swiperRef = useRef<any>(null)\n const [swiperState, setSwiperState] = useState({\n isBeginning: true,\n isEnd: false,\n })\n\n const breakpoints = useMemo(() => {\n const len = items?.length || 0\n return {\n 0: {\n spaceBetween: 12,\n slidesPerView: len > 1 ? 1.2 : 1,\n },\n 768: {\n spaceBetween: 12,\n slidesPerView: len > 2 ? 2.3 : len > 1 ? 2 : 1,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 3),\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 4),\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 4),\n },\n }\n }, [items?.length])\n\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n const nextButtonClass = `${id}-custom-swiper-button-next`\n const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n return (\n <section\n data-ui-component-id=\"MediaTextOverlay\"\n ref={ref}\n {...rest}\n className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n >\n {items && items.length > 0 ? (\n <div className=\"group relative\">\n <Swiper\n className=\"!overflow-visible\"\n modules={[Navigation]}\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n breakpoints={breakpoints}\n >\n {items.map((item, jIndex) => (\n <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className=\"!flex !h-[unset]\">\n <ItemBlock\n data={item}\n configuration={{\n theme,\n size,\n num: items.length,\n locale,\n onlyOne: items.length === 1,\n index: jIndex,\n isAutoPlay,\n }}\n jIndex={jIndex}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {isShowPagination && items.length > 1 && (\n <>\n <button\n className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Previous slide\"\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Next slide\"\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </>\n )}\n </div>\n ) : null}\n </section>\n )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useMemo", "useState", "useEffect", "useCallback", "withLayout", "cn", "useExposure", "useAiuiContext", "Media", "Heading", "Swiper", "SwiperSlide", "Navigation", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "configuration", "jIndex", "classNames", "ref", "videoRef", "content", "media", "theme", "size", "onlyOne", "isAutoPlay", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "MediaTextOverlay", "props", "data", "className", "rest", "items", "isShowPagination", "locale", "swiperRef", "swiperState", "setSwiperState", "breakpoints", "len", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev", "MediaTextOverlay_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as x}from"react/jsx-runtime";import{useEffect as N,useRef as P,useState as R}from"react";import{Heading as f,Text as z}from"../../components/index.js";import{cn as
|
|
1
|
+
import{jsx as t,jsxs as x}from"react/jsx-runtime";import{useEffect as N,useRef as P,useState as R}from"react";import{Heading as f,Text as z}from"../../components/index.js";import{cn as l}from"../../helpers/index.js";import{withLayout as k}from"../../shared/Styles.js";function L({children:e,offset:r=800}){const[o,i]=R(!1),p=P(null);return N(()=>{const s=new IntersectionObserver(([d])=>d.isIntersecting&&i(!0),{rootMargin:`${r}px`});return p.current&&s.observe(p.current),()=>s.disconnect()},[r]),t("div",{ref:p,className:"size-full",children:o&&e})}function b({media:e,poster:r,className:o}){return e?.url?e.mimeType?.startsWith("video/")?t("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:r?.url||"",preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,className:o,width:e.width,height:e.height}):t("img",{src:e.url,alt:e.alt||"",className:o,width:e.width,height:e.height}):null}function C(e,r,o){return r===2?o==="1:1"?"laptop:flex-[1]":e===0?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]"}function A({data:e,className:r,...o}){const{title:i,titleType:p="primary",titleIcon:s,subtitle:d,subtitleImage:n,textAlign:h="left",products:c=[],twoImageRatio:y="2:3",threeImageRatio:E="1:1:1",theme:T="light"}=e,u=h==="center"?"text-center":"text-left laptop:text-left",g=()=>p==="secondary"?3:4,v=()=>i?p==="selling-point"&&s?x("div",{className:l("product-compare-title-wrapper flex items-center gap-[8px]",u==="text-center"?"justify-center":""),children:[t("img",{src:s.url,alt:s.alt||"",className:"product-compare-title-icon laptop:size-[32px] size-[24px]"}),t(f,{as:"h2",size:g(),html:i,className:"product-compare-title",style:{color:"#00BEFA"}})]}):t(f,{as:"h2",size:g(),html:i,className:l("product-compare-title",u)}):null;return x("section",{...o,className:l("product-compare text-info-primary",r,{"aiui-dark":T==="dark"}),children:[v(),d&&t(z,{as:"p",size:2,html:d,className:l("product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",u)}),n&&t("div",{className:l("product-compare-subtitle-image laptop:mt-[24px] mt-[16px]",u==="text-center"?"flex justify-center":""),children:t("img",{src:n.url,alt:n.alt||"",className:"max-w-full",width:n.width,height:n.height})}),t("div",{className:"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]",children:c.map((a,m)=>{const w=m===c.length-1,I=C(m,c.length,y),M=w?"bg-brand-0":"bg-[rgba(0,0,0,0.2)]";return x("div",{className:l("product-compare-item rounded-box relative shrink overflow-hidden",I,{"order-2 tablet:order-1":m===0&&c.length===2,"order-1 tablet:order-2":m===1&&c.length===2}),children:[a.text&&t("div",{className:l("product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] text-badge-foreground absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold",M),children:t(f,{as:"h6",className:"font-bold",size:1,children:a.text})}),x(L,{offset:1500,children:[t(b,{media:a.media,poster:a.poster,className:"product-compare-media laptop:block hidden size-full object-cover"}),t(b,{media:a.mobMedia?a.mobMedia:a.media,poster:a.mobPoster?a.mobPoster:a.poster,className:"product-compare-media-mobile laptop:hidden block w-full"})]})]},m)})})]})}var S=k(A);export{S as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ProductCompare/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n const [loaded, setLoaded] = useState(false)\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setLoaded(true), {\n rootMargin: `${offset}px`,\n })\n ref.current && observer.observe(ref.current)\n return () => observer.disconnect()\n }, [offset])\n\n return (\n <div ref={ref} className=\"size-full\">\n {loaded && children}\n </div>\n )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; className?: string }) {\n if (!media?.url) return null\n\n const isVideo = media.mimeType?.startsWith('video/')\n\n if (isVideo) {\n return (\n <video\n src={media.url}\n playsInline\n autoPlay\n muted\n loop\n poster={poster?.url || ''}\n preload=\"metadata\"\n disablePictureInPicture\n disableRemotePlayback\n className={className}\n width={media.width}\n height={media.height}\n />\n )\n }\n\n return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\n}\n\nexport interface ProductItemData {\n /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n text?: string\n /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n media?: Media\n /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n mobMedia?: Media\n /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n poster?: Media\n /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n mobPoster?: Media\n}\n\n/** \u6807\u9898\u7C7B\u578B */\nexport type TitleType = 'selling-point' | 'primary' | 'secondary'\n\n/** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F */\nexport type TextAlign = 'left' | 'center'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF082\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type TwoImageRatio = '2:3' | '1:1'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF083\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type ThreeImageRatio = '1:1:1'\n\nexport interface ProductCompareProps extends React.HTMLAttributes<HTMLElement> {\n /** \u7EC4\u4EF6\u6570\u636E */\n data: {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u6807\u9898\u7C7B\u578B\uFF1Aselling-point\uFF08\u5356\u70B9\uFF09\u3001primary\uFF08\u4E00\u7EA7\u6807\u9898\uFF09\u3001secondary\uFF08\u4E8C\u7EA7\u6807\u9898\uFF09 */\n titleType?: TitleType\n /** \u6807\u9898\u56FE\u6807\uFF08\u4EC5\u5F53 titleType \u4E3A selling-point \u65F6\u6709\u6548\uFF09 */\n titleIcon?: Media\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u526F\u6807\u9898\u4E0B\u65B9\u7684\u56FE\u7247 */\n subtitleImage?: Media\n /** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF1Aleft\uFF08\u5DE6\u5BF9\u9F50\uFF09\u3001center\uFF08\u5C45\u4E2D\uFF09 */\n textAlign?: TextAlign\n /** \u4EA7\u54C1\u5217\u8868\uFF08\u652F\u63012-3\u4E2A\u4EA7\u54C1\uFF09 */\n products?: ProductItemData[]\n /** 2\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n twoImageRatio?: TwoImageRatio\n /** 3\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n threeImageRatio?: ThreeImageRatio\n /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n theme?: Theme\n }\n}\n\n/**\n * \u6839\u636E\u4EA7\u54C1\u6570\u91CF\u548C\u6BD4\u4F8B\u83B7\u53D6\u5E03\u5C40\u7C7B\u540D\n */\nfunction getProductLayoutClasses(index: number, totalProducts: number, twoImageRatio?: TwoImageRatio): string {\n if (totalProducts === 2) {\n if (twoImageRatio === '1:1') {\n return 'laptop:flex-[1]'\n }\n // \u9ED8\u8BA4 2:3 \u6BD4\u4F8B\n return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n }\n\n if (totalProducts === 3) {\n // 1:1:1 \u6BD4\u4F8B\n return 'laptop:flex-[1]'\n }\n\n return 'laptop:flex-[1]'\n}\n\nfunction ProductCompare({ data, className, ...rest }: ProductCompareProps) {\n const {\n title,\n titleType = 'primary',\n titleIcon,\n subtitle,\n subtitleImage,\n textAlign = 'left',\n products = [],\n twoImageRatio = '2:3',\n threeImageRatio = '1:1:1',\n theme = 'light',\n } = data\n\n // \u6587\u672C\u5BF9\u9F50\u7C7B\u540D\n const alignClasses = textAlign === 'center' ? 'text-center' : 'text-left laptop:text-left'\n\n // \u6839\u636E\u6807\u9898\u7C7B\u578B\u786E\u5B9A Heading size \u548C\u6837\u5F0F\n const getTitleSize = () => {\n if (titleType === 'secondary') return 3\n return 4\n }\n\n // \u6E32\u67D3\u6807\u9898\n const renderTitle = () => {\n if (!title) return null\n\n // \u5356\u70B9\u6807\u9898\uFF08\u5305\u542B\u56FE\u6807\uFF09\n if (titleType === 'selling-point' && titleIcon) {\n return (\n <div\n className={cn(\n 'product-compare-title-wrapper flex items-center gap-[8px]',\n alignClasses === 'text-center' ? 'justify-center' : ''\n )}\n >\n <img\n src={titleIcon.url}\n alt={titleIcon.alt || ''}\n className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n />\n <Heading\n as=\"h2\"\n size={getTitleSize()}\n html={title}\n className=\"product-compare-title\"\n style={{ color: '#00BEFA' }}\n />\n </div>\n )\n }\n\n // \u666E\u901A\u6807\u9898\n return <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n }\n\n return (\n <section\n {...rest}\n className={cn('product-compare text-info-primary', className, {\n 'aiui-dark': theme === 'dark',\n })}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {renderTitle()}\n\n {/* \u526F\u6807\u9898 */}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n html={subtitle}\n className={cn(\n 'product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n alignClasses\n )}\n />\n )}\n\n {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n {subtitleImage && (\n <div\n className={cn(\n 'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n alignClasses === 'text-center' ? 'flex justify-center' : ''\n )}\n >\n <img\n src={subtitleImage.url}\n alt={subtitleImage.alt || ''}\n className=\"max-w-full\"\n width={subtitleImage.width}\n height={subtitleImage.height}\n />\n </div>\n )}\n\n {/* \u4EA7\u54C1\u5BF9\u6BD4\u5361\u7247\u5BB9\u5668 */}\n <div className=\"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\n {products.map((product, index) => {\n const isLastProduct = index === products.length - 1\n const layoutClasses = getProductLayoutClasses(index, products.length, twoImageRatio)\n\n // \u6807\u7B7E\u6837\u5F0F\uFF1A\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1\u7528 bg-brand-0\uFF0C\u5176\u4ED6\u7528 rgba(0,0,0,0.2)\n const labelBgClass = isLastProduct ? 'bg-brand-0' : 'bg-[rgba(0,0,0,0.2)]'\n\n return (\n <div\n key={index}\n className={cn('product-compare-item rounded-box relative shrink overflow-hidden', layoutClasses, {\n 'order-2 tablet:order-1': index === 0 && products.length === 2,\n 'order-1 tablet:order-2': index === 1 && products.length === 2,\n })}\n >\n {/* \u4EA7\u54C1\u6807\u7B7E */}\n {product.text && (\n <div\n className={cn(\n 'product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n const [loaded, setLoaded] = useState(false)\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setLoaded(true), {\n rootMargin: `${offset}px`,\n })\n ref.current && observer.observe(ref.current)\n return () => observer.disconnect()\n }, [offset])\n\n return (\n <div ref={ref} className=\"size-full\">\n {loaded && children}\n </div>\n )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; className?: string }) {\n if (!media?.url) return null\n\n const isVideo = media.mimeType?.startsWith('video/')\n\n if (isVideo) {\n return (\n <video\n src={media.url}\n playsInline\n autoPlay\n muted\n loop\n poster={poster?.url || ''}\n preload=\"metadata\"\n disablePictureInPicture\n disableRemotePlayback\n className={className}\n width={media.width}\n height={media.height}\n />\n )\n }\n\n return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\n}\n\nexport interface ProductItemData {\n /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n text?: string\n /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n media?: Media\n /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n mobMedia?: Media\n /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n poster?: Media\n /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n mobPoster?: Media\n}\n\n/** \u6807\u9898\u7C7B\u578B */\nexport type TitleType = 'selling-point' | 'primary' | 'secondary'\n\n/** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F */\nexport type TextAlign = 'left' | 'center'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF082\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type TwoImageRatio = '2:3' | '1:1'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF083\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type ThreeImageRatio = '1:1:1'\n\nexport interface ProductCompareProps extends React.HTMLAttributes<HTMLElement> {\n /** \u7EC4\u4EF6\u6570\u636E */\n data: {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u6807\u9898\u7C7B\u578B\uFF1Aselling-point\uFF08\u5356\u70B9\uFF09\u3001primary\uFF08\u4E00\u7EA7\u6807\u9898\uFF09\u3001secondary\uFF08\u4E8C\u7EA7\u6807\u9898\uFF09 */\n titleType?: TitleType\n /** \u6807\u9898\u56FE\u6807\uFF08\u4EC5\u5F53 titleType \u4E3A selling-point \u65F6\u6709\u6548\uFF09 */\n titleIcon?: Media\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u526F\u6807\u9898\u4E0B\u65B9\u7684\u56FE\u7247 */\n subtitleImage?: Media\n /** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF1Aleft\uFF08\u5DE6\u5BF9\u9F50\uFF09\u3001center\uFF08\u5C45\u4E2D\uFF09 */\n textAlign?: TextAlign\n /** \u4EA7\u54C1\u5217\u8868\uFF08\u652F\u63012-3\u4E2A\u4EA7\u54C1\uFF09 */\n products?: ProductItemData[]\n /** 2\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n twoImageRatio?: TwoImageRatio\n /** 3\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n threeImageRatio?: ThreeImageRatio\n /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n theme?: Theme\n }\n}\n\n/**\n * \u6839\u636E\u4EA7\u54C1\u6570\u91CF\u548C\u6BD4\u4F8B\u83B7\u53D6\u5E03\u5C40\u7C7B\u540D\n */\nfunction getProductLayoutClasses(index: number, totalProducts: number, twoImageRatio?: TwoImageRatio): string {\n if (totalProducts === 2) {\n if (twoImageRatio === '1:1') {\n return 'laptop:flex-[1]'\n }\n // \u9ED8\u8BA4 2:3 \u6BD4\u4F8B\n return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n }\n\n if (totalProducts === 3) {\n // 1:1:1 \u6BD4\u4F8B\n return 'laptop:flex-[1]'\n }\n\n return 'laptop:flex-[1]'\n}\n\nfunction ProductCompare({ data, className, ...rest }: ProductCompareProps) {\n const {\n title,\n titleType = 'primary',\n titleIcon,\n subtitle,\n subtitleImage,\n textAlign = 'left',\n products = [],\n twoImageRatio = '2:3',\n threeImageRatio = '1:1:1',\n theme = 'light',\n } = data\n\n // \u6587\u672C\u5BF9\u9F50\u7C7B\u540D\n const alignClasses = textAlign === 'center' ? 'text-center' : 'text-left laptop:text-left'\n\n // \u6839\u636E\u6807\u9898\u7C7B\u578B\u786E\u5B9A Heading size \u548C\u6837\u5F0F\n const getTitleSize = () => {\n if (titleType === 'secondary') return 3\n return 4\n }\n\n // \u6E32\u67D3\u6807\u9898\n const renderTitle = () => {\n if (!title) return null\n\n // \u5356\u70B9\u6807\u9898\uFF08\u5305\u542B\u56FE\u6807\uFF09\n if (titleType === 'selling-point' && titleIcon) {\n return (\n <div\n className={cn(\n 'product-compare-title-wrapper flex items-center gap-[8px]',\n alignClasses === 'text-center' ? 'justify-center' : ''\n )}\n >\n <img\n src={titleIcon.url}\n alt={titleIcon.alt || ''}\n className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n />\n <Heading\n as=\"h2\"\n size={getTitleSize()}\n html={title}\n className=\"product-compare-title\"\n style={{ color: '#00BEFA' }}\n />\n </div>\n )\n }\n\n // \u666E\u901A\u6807\u9898\n return <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n }\n\n return (\n <section\n {...rest}\n className={cn('product-compare text-info-primary', className, {\n 'aiui-dark': theme === 'dark',\n })}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {renderTitle()}\n\n {/* \u526F\u6807\u9898 */}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n html={subtitle}\n className={cn(\n 'product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n alignClasses\n )}\n />\n )}\n\n {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n {subtitleImage && (\n <div\n className={cn(\n 'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n alignClasses === 'text-center' ? 'flex justify-center' : ''\n )}\n >\n <img\n src={subtitleImage.url}\n alt={subtitleImage.alt || ''}\n className=\"max-w-full\"\n width={subtitleImage.width}\n height={subtitleImage.height}\n />\n </div>\n )}\n\n {/* \u4EA7\u54C1\u5BF9\u6BD4\u5361\u7247\u5BB9\u5668 */}\n <div className=\"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\n {products.map((product, index) => {\n const isLastProduct = index === products.length - 1\n const layoutClasses = getProductLayoutClasses(index, products.length, twoImageRatio)\n\n // \u6807\u7B7E\u6837\u5F0F\uFF1A\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1\u7528 bg-brand-0\uFF0C\u5176\u4ED6\u7528 rgba(0,0,0,0.2)\n const labelBgClass = isLastProduct ? 'bg-brand-0' : 'bg-[rgba(0,0,0,0.2)]'\n\n return (\n <div\n key={index}\n className={cn('product-compare-item rounded-box relative shrink overflow-hidden', layoutClasses, {\n 'order-2 tablet:order-1': index === 0 && products.length === 2,\n 'order-1 tablet:order-2': index === 1 && products.length === 2,\n })}\n >\n {/* \u4EA7\u54C1\u6807\u7B7E */}\n {product.text && (\n <div\n className={cn(\n 'product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] text-badge-foreground absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold',\n labelBgClass\n )}\n >\n <Heading as=\"h6\" className=\"font-bold\" size={1}>\n {product.text}\n </Heading>\n </div>\n )}\n\n {/* \u4EA7\u54C1\u5A92\u4F53 */}\n <LazyMedia offset={1500}>\n <MediaElement\n media={product.media}\n poster={product.poster}\n className=\"product-compare-media laptop:block hidden size-full object-cover\"\n />\n <MediaElement\n media={product.mobMedia ? product.mobMedia : product.media}\n poster={product.mobPoster ? product.mobPoster : product.poster}\n className=\"product-compare-media-mobile laptop:hidden block w-full\"\n />\n </LazyMedia>\n </div>\n )\n })}\n </div>\n </section>\n )\n}\n\nexport default withLayout(ProductCompare)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useEffect", "useRef", "useState", "Heading", "Text", "cn", "withLayout", "LazyMedia", "children", "offset", "loaded", "setLoaded", "ref", "observer", "entry", "MediaElement", "media", "poster", "className", "getProductLayoutClasses", "index", "totalProducts", "twoImageRatio", "ProductCompare", "data", "rest", "title", "titleType", "titleIcon", "subtitle", "subtitleImage", "textAlign", "products", "threeImageRatio", "theme", "alignClasses", "getTitleSize", "renderTitle", "product", "isLastProduct", "layoutClasses", "labelBgClass", "ProductCompare_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as i,jsxs as k}from"react/jsx-runtime";import st,{useEffect as ot,useRef as g,useImperativeHandle as at,useState as lt}from"react";import{gsap as y}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as o}from"../../helpers/utils.js";import{cva as V}from"class-variance-authority";import{Heading as dt,Text as A,Countdown as ct}from"../../components/index.js";import{withLayout as ut}from"../../shared/Styles.js";import{trackUrlRef as mt}from"../../shared/trackUrlRef.js";import{useInView as pt}from"react-intersection-observer";const N="link",P="title";function ft(n){if(!n)return!1;if(typeof n=="string")return n.trim().length>0;const a=n?.root?.children;return!Array.isArray(a)||a.length===0?!1:a.some(e=>{const r=e?.children;return!Array.isArray(r)||r.length===0?!1:r.some(s=>typeof s?.text=="string"&&s.text.length>0)})}const ht=V("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),gt=V("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),S=({data:n,onClick:a,className:e})=>{const{theme:r="light",extensions:s,title:p,caption:x,align:f}=n;if(!s?.textLink)return null;const d=s?.link?mt(s.link,`${N}_${P}`):void 0;return k("a",{className:o({"aiui-dark":r==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":r==="light"},{"text-[#F5F6F7]":r==="dark"},{"justify-center mt-4":f==="center"},{"mt-1 laptop:mt-0":f==="left"},e),...d?{href:d}:{},"data-headless-type-name":`${N}#${P}`,"data-headless-title-desc-button":`${p}#${x}`,...a?{onClick:a}:{},children:[i("div",{className:"truncate whitespace-nowrap",children:s?.textLink}),i("div",{className:"lg-desktop:size-5 size-4",children:i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:i("path",{d:"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z",fill:r==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]})},$=st.forwardRef(({data:n,className:a,classNames:e,as:r="h2",weight:s="bold",onButtonClick:p,...x},f)=>{const{title:d,titleSize:_=4,caption:T,subtitle:F,content:H,countdown:t,showCountdown:B=!1,theme:h="light",extensions:I,align:c="left"}=n,L=g(null),u=g(null),l=g(null),m=g(null),[j,O]=lt(!0),{ref:U,inView:C}=pt();at(f,()=>L.current);const W=()=>{O(!1)},Z=t?.targetDateTime||t?.targetDate||"",q=t?.targetDateTime_tz,G=t?.labels?{day:t.labels.days||"Day",hour:t.labels.hours||"Hours",minute:t.labels.minutes||"Mins",second:t.labels.seconds||"Secs"}:void 0;return ot(()=>{y.registerPlugin(z,R);function J(){if(!u.current)return;const K=u.current?.clientHeight||80;l.current&&l.current.revert(),m.current&&m.current.kill(),l.current=new z(u.current,{type:"words",wordsClass:"word"});const w=l.current.words;y.set(w,{opacity:0}),m.current=R.create({trigger:u.current,start:"bottom bottom-=4%",end:`bottom+=${K*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:Q=>{const X=Q.progress,D=w.length||1,Y=.5,b=1/D,M=b*(1-Y),E=(D-1)*M+b,tt=Math.min(1,E>0?X/E:0);w.forEach((et,nt)=>{const rt=nt*M,it=b;let v=(tt-rt)/it;v=Math.max(0,Math.min(1,v)),y.set(et,{opacity:v})})}})}return C&&J(),()=>{l.current&&l.current.revert(),m.current&&m.current.kill()}},[C]),k("div",{...x,id:I?.id,className:o("titleBottom title-box flex items-end justify-between gap-2 pb-6",a,e?.wrapper),ref:L,children:[k("div",{ref:U,className:o("flex-1",e?.container,{"aiui-dark":h==="dark","text-center":c==="center","text-left":c==="left"}),children:[(T||d)&&i(dt,{ref:u,as:r,size:_,html:T||d,weight:s,className:o(ht({theme:h}),e?.title)}),F&&i(A,{html:F,as:"p",className:o(gt({theme:h}),e?.subtitle)}),ft(H)&&i(A,{html:H,as:"div",size:4,className:o("title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]",e?.content)}),i(S,{data:n,className:o({"laptop:hidden":c==="left"},e?.button),onClick:p}),B&&t&&j&&i(ct,{endDate:Z,endDate_tz:q,timeLabels:G,showDays:t?.showDays,showHours:t?.showHours,showMinutes:t?.showMinutes,showSeconds:t?.showSeconds,theme:h,onExpire:W,hideWhenExpired:!0,align:c==="center"?"center":"left",className:o("mt-4",e?.countdown)})]}),i(S,{data:n,className:o("hidden",{"laptop:flex":c==="left"},e?.button),onClick:p})]})});$.displayName="Title";var Ct=ut($);export{Ct as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text, Countdown, type HeadingProps } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n 'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst TitleButton = ({\n data,\n onClick,\n className,\n}: {\n data: TitleProps['data']\n onClick?: () => void\n className?: string\n}) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n\n const href = extensions?.link ? trackUrlRef(extensions.link, `${componentType}_${componentName}`) : undefined\n\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n {...(href ? { href } : {})}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n {...(onClick ? { onClick } : {})}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z\"\n fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n className=\"transition-all duration-[0.4s]\"\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, classNames, as = 'h2', weight = 'bold', onButtonClick, ...rest }, ref) => {\n const {\n title,\n titleSize = 4,\n caption,\n subtitle,\n content,\n countdown,\n showCountdown = false,\n theme = 'light',\n extensions,\n align = 'left',\n } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n const handleCountdownEnd = () => {\n setIsCountdownVisible(false)\n }\n\n // CMS field mapping: new targetDateTime > legacy targetDate\n const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n const countdownTz = countdown?.targetDateTime_tz\n // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n const countdownLabels = countdown?.labels\n ? {\n day: countdown.labels.days || 'Day',\n hour: countdown.labels.hours || 'Hours',\n minute: countdown.labels.minutes || 'Mins',\n second: countdown.labels.seconds || 'Secs',\n }\n : undefined\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div\n {...rest}\n id={extensions?.id}\n className={cn(\n 'titleBottom title-box flex items-end justify-between gap-2 pb-6',\n className,\n classNames?.wrapper\n )}\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', classNames?.container, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={titleSize as HeadingProps['size']}\n html={caption || title}\n weight={weight}\n className={cn(titleHeadingVariants({ theme }), classNames?.title)}\n />\n )}\n {subtitle && (\n <Text html={subtitle} as=\"p\" className={cn(subtitleVariants({ theme }), classNames?.subtitle)} />\n )}\n {content && (\n <Text\n html={content}\n as=\"div\"\n size={4}\n className={cn(\n 'title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]',\n classNames?.content\n )}\n />\n )}\n <TitleButton\n data={data}\n className={cn({ 'laptop:hidden': align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n endDate={countdownEndDate}\n endDate_tz={countdownTz}\n timeLabels={countdownLabels}\n showDays={countdown?.showDays}\n showHours={countdown?.showHours}\n showMinutes={countdown?.showMinutes}\n showSeconds={countdown?.showSeconds}\n theme={theme}\n onExpire={handleCountdownEnd}\n hideWhenExpired={true}\n align={align === 'center' ? 'center' : 'left'}\n className={cn('mt-4', classNames?.countdown)}\n />\n )}\n </div>\n <TitleButton\n data={data}\n className={cn('hidden', { ['laptop:flex']: align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n </div>\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "Countdown", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "onClick", "className", "theme", "extensions", "title", "caption", "align", "href", "Title", "classNames", "as", "weight", "onButtonClick", "rest", "ref", "titleSize", "subtitle", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text, Countdown, type HeadingProps } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u5224\u65AD content \u5B57\u6BB5\u662F\u5426\u6709\u5B9E\u9645\u53EF\u89C1\u5185\u5BB9\u3002\n * - string\uFF1A\u53BB\u6389\u7A7A\u767D\u540E\u975E\u7A7A\u5373\u6709\u5185\u5BB9\n * - SerializedEditorState\uFF1A\u68C0\u67E5 root.children \u5185\u662F\u5426\u5B58\u5728\u975E\u7A7A\u6587\u672C\u8282\u70B9\uFF0C\n * \u907F\u514D convertLexicalToHTML \u628A\u7A7A\u6587\u6863\u8F93\u51FA\u4E3A <div class=\"payload-richtext\"></div>\n */\nfunction hasVisibleContent(content: string | { root?: { children?: unknown[] } } | null | undefined): boolean {\n if (!content) return false\n if (typeof content === 'string') return content.trim().length > 0\n const children = content?.root?.children\n if (!Array.isArray(children) || children.length === 0) return false\n return children.some((node: any) => {\n const nodeChildren = node?.children\n if (!Array.isArray(nodeChildren) || nodeChildren.length === 0) return false\n return nodeChildren.some((child: any) => typeof child?.text === 'string' && child.text.length > 0)\n })\n}\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n 'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst TitleButton = ({\n data,\n onClick,\n className,\n}: {\n data: TitleProps['data']\n onClick?: () => void\n className?: string\n}) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n\n const href = extensions?.link ? trackUrlRef(extensions.link, `${componentType}_${componentName}`) : undefined\n\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n {...(href ? { href } : {})}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n {...(onClick ? { onClick } : {})}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z\"\n fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n className=\"transition-all duration-[0.4s]\"\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, classNames, as = 'h2', weight = 'bold', onButtonClick, ...rest }, ref) => {\n const {\n title,\n titleSize = 4,\n caption,\n subtitle,\n content,\n countdown,\n showCountdown = false,\n theme = 'light',\n extensions,\n align = 'left',\n } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n const handleCountdownEnd = () => {\n setIsCountdownVisible(false)\n }\n\n // CMS field mapping: new targetDateTime > legacy targetDate\n const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n const countdownTz = countdown?.targetDateTime_tz\n // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n const countdownLabels = countdown?.labels\n ? {\n day: countdown.labels.days || 'Day',\n hour: countdown.labels.hours || 'Hours',\n minute: countdown.labels.minutes || 'Mins',\n second: countdown.labels.seconds || 'Secs',\n }\n : undefined\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div\n {...rest}\n id={extensions?.id}\n className={cn(\n 'titleBottom title-box flex items-end justify-between gap-2 pb-6',\n className,\n classNames?.wrapper\n )}\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', classNames?.container, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={titleSize as HeadingProps['size']}\n html={caption || title}\n weight={weight}\n className={cn(titleHeadingVariants({ theme }), classNames?.title)}\n />\n )}\n {subtitle && (\n <Text html={subtitle} as=\"p\" className={cn(subtitleVariants({ theme }), classNames?.subtitle)} />\n )}\n {hasVisibleContent(content) && (\n <Text\n html={content}\n as=\"div\"\n size={4}\n className={cn(\n 'title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]',\n classNames?.content\n )}\n />\n )}\n <TitleButton\n data={data}\n className={cn({ 'laptop:hidden': align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n endDate={countdownEndDate}\n endDate_tz={countdownTz}\n timeLabels={countdownLabels}\n showDays={countdown?.showDays}\n showHours={countdown?.showHours}\n showMinutes={countdown?.showMinutes}\n showSeconds={countdown?.showSeconds}\n theme={theme}\n onExpire={handleCountdownEnd}\n hideWhenExpired={true}\n align={align === 'center' ? 'center' : 'left'}\n className={cn('mt-4', classNames?.countdown)}\n />\n )}\n </div>\n <TitleButton\n data={data}\n className={cn('hidden', { ['laptop:flex']: align === 'left' }, classNames?.button)}\n onClick={onButtonClick}\n />\n </div>\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "Countdown", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "hasVisibleContent", "content", "children", "node", "nodeChildren", "child", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "onClick", "className", "theme", "extensions", "title", "caption", "align", "href", "Title", "classNames", "as", "weight", "onButtonClick", "rest", "ref", "titleSize", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
|
|
7
7
|
}
|
package/dist/tokens/base.css
CHANGED
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1163,6 +1163,9 @@ video {
|
|
|
1163
1163
|
.aspect-\[358\/480\] {
|
|
1164
1164
|
aspect-ratio: 358/480;
|
|
1165
1165
|
}
|
|
1166
|
+
.aspect-\[390\/400\] {
|
|
1167
|
+
aspect-ratio: 390/400;
|
|
1168
|
+
}
|
|
1166
1169
|
.aspect-\[390\/480\] {
|
|
1167
1170
|
aspect-ratio: 390/480;
|
|
1168
1171
|
}
|
|
@@ -5097,6 +5100,9 @@ video {
|
|
|
5097
5100
|
.tablet\:aspect-\[704\/480\] {
|
|
5098
5101
|
aspect-ratio: 704/480;
|
|
5099
5102
|
}
|
|
5103
|
+
.tablet\:aspect-\[768\/400\] {
|
|
5104
|
+
aspect-ratio: 768/400;
|
|
5105
|
+
}
|
|
5100
5106
|
.tablet\:aspect-\[768\/480\] {
|
|
5101
5107
|
aspect-ratio: 768/480;
|
|
5102
5108
|
}
|
|
@@ -5685,6 +5691,9 @@ video {
|
|
|
5685
5691
|
.laptop\:hidden {
|
|
5686
5692
|
display: none;
|
|
5687
5693
|
}
|
|
5694
|
+
.laptop\:aspect-\[1024\/384\] {
|
|
5695
|
+
aspect-ratio: 1024/384;
|
|
5696
|
+
}
|
|
5688
5697
|
.laptop\:aspect-\[1024\/400\] {
|
|
5689
5698
|
aspect-ratio: 1024/400;
|
|
5690
5699
|
}
|
|
@@ -6716,6 +6725,9 @@ video {
|
|
|
6716
6725
|
.desktop\:aspect-\[1440\/384\] {
|
|
6717
6726
|
aspect-ratio: 1440/384;
|
|
6718
6727
|
}
|
|
6728
|
+
.desktop\:aspect-\[1440\/512\] {
|
|
6729
|
+
aspect-ratio: 1440/512;
|
|
6730
|
+
}
|
|
6719
6731
|
.desktop\:aspect-\[1440\/576\] {
|
|
6720
6732
|
aspect-ratio: 1440/576;
|
|
6721
6733
|
}
|
|
@@ -7374,6 +7386,9 @@ video {
|
|
|
7374
7386
|
.lg-desktop\:aspect-\[1920\/480\] {
|
|
7375
7387
|
aspect-ratio: 1920/480;
|
|
7376
7388
|
}
|
|
7389
|
+
.lg-desktop\:aspect-\[1920\/640\] {
|
|
7390
|
+
aspect-ratio: 1920/640;
|
|
7391
|
+
}
|
|
7377
7392
|
.lg-desktop\:aspect-\[1920\/720\] {
|
|
7378
7393
|
aspect-ratio: 1920/720;
|
|
7379
7394
|
}
|