@anker-in/headless-ui 1.3.19 → 1.3.20
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/BuyOneGetOneShelf/PriceAndActions.d.ts +1 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +1 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.d.ts +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductImage.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.d.ts +2 -5
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductInfo.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.d.ts +2 -0
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +2 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.d.ts +22 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js +2 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map +7 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts +18 -0
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map +1 -1
- package/dist/cjs/shared/Styles.d.ts +2 -0
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.d.ts +1 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.d.ts +1 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.d.ts +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.d.ts +2 -5
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.d.ts +2 -0
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +2 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.d.ts +22 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js +2 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map +7 -0
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/types.d.ts +18 -0
- package/dist/esm/shared/Styles.d.ts +2 -0
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +3 -3
- package/package.json +1 -1
- package/style.css +21 -0
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport Title from '../Title/index.js'\nimport { Button, Heading, Picture } from '../../components/index.js'\nimport { Text } from '../../components/text.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { MultiLayoutGraphicBlockProps } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 Size \u2192 aspect-ratio mapping (aligned with grid full-width) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u53C2\u8003 MultiLayoutGraphicBlock.tsx handleAspect() \u4E2D spanType='full' \u7684\u6BD4\u4F8B\n// mobile: h-400px \u56FA\u5B9A\u9AD8\u5EA6\uFF0Ctablet+: aspect-ratio \u5BF9\u9F50 grid full-width\n\nconst sizeClasses: Record<string, string> = {\n sm: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n base: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n lg: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n}\n\n// \u2500\u2500 Props \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\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\ninterface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {\n data: MultiLayoutGraphicBlockProps['data']\n onSecondaryButtonClick?: () => void\n onPrimaryButtonClick?: () => void\n}\n\n/**\n * MultiLayoutGraphicBlockCarousel \u2014 full-width banner carousel for MultiLayoutGraphicBlock.\n *\n * Architecture:\n * - slidesPerView=1, loop=true, each Item occupies full-width slide\n * - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)\n * - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2\n * - Video pause/play on slide change\n * - No withLayout wrapper (carousel is inner implementation)\n */\nconst MultiLayoutGraphicBlockCarousel = React.forwardRef<HTMLElement, MultiLayoutGraphicBlockCarouselProps>(\n ({ data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest }, ref) => {\n const items = data.items || []\n const carousel = data.carouselConfig\n\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n const showDots = carousel?.showDots ?? true\n const autoplaySeconds = carousel?.autoplaySeconds\n const size = carousel?.size ?? 'base'\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [activeIndex, setActiveIndex] = useState(0)\n const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n // Slide container refs for imperative video pause via querySelectorAll\n const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n items.map(() => React.createRef<HTMLDivElement>())\n )\n\n // paginationEl \u6302\u8F7D\u540E\u91CD\u65B0\u7ED1\u5B9A Swiper pagination\n // \u89E3\u51B3 next/dynamic + ssr:false \u73AF\u5883\u4E0B Swiper \u521D\u59CB\u5316\u65F6 paginationEl \u5C1A\u4E3A null \u7684\u65F6\u5E8F\u95EE\u9898\n useEffect(() => {\n const swiper = swiperRef.current\n if (!swiper || !paginationEl) return\n if (swiper.pagination) {\n swiper.pagination.el = paginationEl\n swiper.pagination.init()\n swiper.pagination.render()\n swiper.pagination.update()\n }\n }, [paginationEl])\n\n const activeTheme = items[activeIndex]?.theme ?? 'light'\n const isDark = activeTheme === 'dark'\n\n useEffect(() => {\n const handleVisibilityChange = () => {\n const swiper = swiperRef.current\n if (!swiper) return\n\n if (document.visibilityState === 'hidden') {\n swiper.autoplay?.stop()\n } else {\n swiper.autoplay?.start()\n const currentIndex = swiper.realIndex ?? 0\n slideContainerRefs.current.forEach((cRef, i) => {\n if (!cRef.current) return\n cRef.current.querySelectorAll('video').forEach(v => {\n if (i !== currentIndex) v.pause()\n })\n })\n }\n }\n document.addEventListener('visibilitychange', handleVisibilityChange)\n return () => document.removeEventListener('visibilitychange', handleVisibilityChange)\n }, [])\n\n const swiperModules =\n autoplaySeconds != null && autoplaySeconds > 0 ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds != null && autoplaySeconds > 0\n ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n : false\n\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n slideContainerRefs.current.forEach((cRef, i) => {\n if (i !== newIndex && cRef.current) {\n cRef.current.querySelectorAll('video').forEach(v => {\n v.pause()\n v.currentTime = 0\n })\n }\n })\n const activeContainer = slideContainerRefs.current[newIndex]\n if (activeContainer?.current) {\n activeContainer.current.querySelectorAll('video').forEach(v => {\n if (v.paused) {\n const p = v.play()\n p?.catch(() => {})\n }\n })\n }\n setActiveIndex(newIndex)\n }, [])\n\n const { locale } = useAiuiContext()\n const currentSizeClasses = sizeClasses[size] ?? sizeClasses.base\n const { sectionTitle, shape } = data\n\n return (\n <section\n ref={ref}\n className={cn(\n 'multilayout-graphic-block-carousel group relative w-full',\n 'laptop:overflow-hidden',\n 'laptop:block flex flex-col',\n currentSizeClasses,\n { 'aiui-dark': isDark },\n className\n )}\n {...rest}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n <div className=\"laptop:h-full laptop:pb-0 relative shrink-0 pb-5\">\n <Swiper\n className=\"laptop:h-full h-[400px]\"\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: paginationEl,\n renderBullet: (_index: number, className: string) =>\n `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((item, index) => (\n <SwiperSlide key={index} className=\"h-full\">\n <div\n ref={slideContainerRefs.current[index]}\n className={cn('item-wrapper text-info-primary relative size-full overflow-hidden', {\n 'aiui-dark': item.theme === 'dark',\n 'rounded-2xl': shape === 'rounded',\n })}\n >\n {/* Block link overlay */}\n {(item.blockLink || item.secondaryButton?.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={getLocalizedPath(item.blockLink || item.secondaryButton?.link || '', locale || 'us')}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n\n {/* Background media */}\n <div className=\"absolute inset-0\">\n {isVideo(item.imageUrl?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"tablet:block hidden size-full overflow-hidden object-cover\"\n >\n <source src={item.imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={item.imageUrl?.url}\n alt={item.imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full object-cover\"\n />\n )}\n {isVideo(item.imageMobileUrl?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"tablet:hidden block size-full overflow-hidden object-cover\"\n >\n <source src={item.imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={item.imageMobileUrl?.url || item.imageUrl?.url}\n alt={item.imageMobileUrl?.alt || item.imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full object-cover\"\n />\n )}\n </div>\n\n {/* Text content */}\n <div className=\"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end\">\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={item.title} />\n <Text\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={item.description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {item.secondaryButton?.text && (\n <Button\n aria-label={item.title ?? item.description}\n className=\"link-left\"\n variant=\"secondary\"\n as=\"a\"\n href={getLocalizedPath(item.secondaryButton.link || '', locale || 'us')}\n onClick={onSecondaryButtonClick}\n >\n {item.secondaryButton.text}\n <span className=\"sr-only\">{item.title ?? item.description}</span>\n </Button>\n )}\n {item.primaryButton?.text && (\n <Button\n aria-label={item.title ?? item.description}\n className=\"link-right\"\n variant=\"primary\"\n as=\"a\"\n href={getLocalizedPath(item.primaryButton.link || '', locale || 'us')}\n onClick={onPrimaryButtonClick}\n >\n {item.primaryButton.text}\n <span className=\"sr-only\">{item.title ?? item.description}</span>\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots */}\n {showDots && (\n <div\n ref={setPaginationEl}\n className={cn(\n 'multilayout-carousel-pagination swiper-pagination',\n '[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary',\n '[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8',\n '[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2',\n '[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out',\n '[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100',\n 'absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2',\n 'laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0',\n { 'aiui-dark': isDark }\n )}\n />\n )}\n </div>\n </section>\n )\n }\n)\n\nMultiLayoutGraphicBlockCarousel.displayName = 'MultiLayoutGraphicBlockCarousel'\n\nexport default MultiLayoutGraphicBlockCarousel\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useRef", "useCallback", "useState", "useEffect", "Swiper", "SwiperSlide", "Navigation", "Pagination", "Autoplay", "cn", "getLocalizedPath", "Title", "Button", "Heading", "Picture", "Text", "isVideo", "useAiuiContext", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "data", "className", "onSecondaryButtonClick", "onPrimaryButtonClick", "rest", "ref", "items", "carousel", "showArrowControls", "showDots", "autoplaySeconds", "size", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "slideContainerRefs", "swiper", "isDark", "handleVisibilityChange", "currentIndex", "cRef", "i", "v", "swiperModules", "autoplayConfig", "handleSlideChange", "newIndex", "activeContainer", "locale", "currentSizeClasses", "sectionTitle", "shape", "s", "_index", "item", "index", "MultiLayoutGraphicBlockCarousel_default"]
|
|
7
|
+
}
|
|
@@ -23,13 +23,31 @@ export type Item = {
|
|
|
23
23
|
isYouTube?: boolean;
|
|
24
24
|
id?: string;
|
|
25
25
|
};
|
|
26
|
+
export interface MultiLayoutCarouselConfig {
|
|
27
|
+
/** 是否显示 prev/next arrow 导航,items ≥ 2 时有效。默认 true */
|
|
28
|
+
showArrows?: boolean;
|
|
29
|
+
/** 是否显示 dots 分页指示器。默认 true */
|
|
30
|
+
showDots?: boolean;
|
|
31
|
+
/** 循环播放(Swiper loop)。默认 true */
|
|
32
|
+
loop?: boolean;
|
|
33
|
+
/** 自动轮播间隔秒数。未设置或 ≤ 0 时不自动轮播 */
|
|
34
|
+
autoplaySeconds?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Slide 宽高比尺寸,控制 carousel wrapper 高度。
|
|
37
|
+
* sm — 短横幅;base — 标准高度(默认);lg — 大尺寸
|
|
38
|
+
* @default 'base'
|
|
39
|
+
*/
|
|
40
|
+
size?: 'sm' | 'base' | 'lg';
|
|
41
|
+
}
|
|
26
42
|
export type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {
|
|
27
43
|
onSecondaryButtonClick?: () => void;
|
|
28
44
|
onPrimaryButtonClick?: () => void;
|
|
29
45
|
data: {
|
|
30
46
|
shape?: Shape;
|
|
31
47
|
sectionTitle?: string;
|
|
48
|
+
mode?: 'grid' | 'carousel';
|
|
32
49
|
groupByTab?: boolean;
|
|
50
|
+
carouselConfig?: MultiLayoutCarouselConfig;
|
|
33
51
|
items: ({
|
|
34
52
|
width?: 'full' | 'half' | 'one-third';
|
|
35
53
|
} & Item)[];
|
|
@@ -10,6 +10,7 @@ export interface StylesProps {
|
|
|
10
10
|
uid?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
containerClassName?: string;
|
|
13
|
+
idx?: string;
|
|
13
14
|
}
|
|
14
15
|
type LayoutProps<P> = Omit<P, keyof StylesProps | keyof ContainerProps> & StylesProps & ContainerProps;
|
|
15
16
|
type StaticComponentProperties<T> = Omit<T, keyof React.ComponentType<any> | 'displayName' | 'prototype'>;
|
|
@@ -18,6 +19,7 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
|
|
|
18
19
|
readonly className: `block-${string} `;
|
|
19
20
|
readonly StyleComponent: import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
readonly uid: string;
|
|
22
|
+
readonly idx: string | undefined;
|
|
21
23
|
};
|
|
22
24
|
export declare function withLayout<T extends React.ComponentType<any>>(WrappedComponent: T, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>> & StaticComponentProperties<T>;
|
|
23
25
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as O,jsx as s,jsxs as G}from"react/jsx-runtime";import m,{useMemo as u}from"react";import{simpleHash as f}from"./simpleHash.js";import S from"./getKeyPropsString.js";import{Grid as g,GridItem as b}from"../components/grid.js";import{Container as w}from"../components/container.js";import T from"./ErrorBoundary.js";const N={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},I={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},d=t=>{const n=S(t);return`style_${f(n)}`},k=t=>{const{style:n,uid:e,disabled:o,containerClassName:r,idx:a}=t;return{style:n,uid:e,disabled:o,containerClassName:r,idx:a}},h=({style:t,uid:n=d({}),disabled:e=!1})=>!t||e?null:s("style",{suppressHydrationWarning:!0,"data-style-id":n,dangerouslySetInnerHTML:{__html:`.block-${n} { ${t} }`}}),x=(t,n)=>{const e=u(()=>t?.uid||d({...t,...n??{}}),[n,t]),o=u(()=>s(h,{...t,uid:e}),[t,e]);return{className:`block-${e} `,StyleComponent:o,uid:e,idx:t?.idx}},$=t=>{const{desktopSpan:n,mobileSpan:e}=t||{},o=e?N[e]:"",r=n?I[n]:"";return`${o} ${r}`.trim()},j=t=>t?typeof t=="string"?t:typeof t=="object"&&Object.entries(t).length<=0?"":Object.entries(t).map(([n,e])=>`${n.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${e}`).join("; ")+";":"",L=(t,n)=>[t,n].map(j).filter(e=>!!e).map(e=>e.trim().endsWith(";")?e:`${e};`).join(" ");function E(t,n){const e=m.forwardRef((o,r)=>{const{container:a,containerClassName:i,className:c,...l}=o;if(!a||Reflect.ownKeys(a).length===0)return s(t,{...l,className:c,ref:r});const p=[n,i,c].filter(Boolean).join(" ").trim();return s(w,{className:p,children:s(g,{className:"container_grid",children:s(b,{className:$(a),children:s(t,{...l,ref:r})})})})});return e.displayName=`WithContainerLayout(${t.displayName||t.name||"Component"})`,e}function _(t,n){const e=m.forwardRef((o,r)=>{const a=k(o),i=L(n?.style,a.style),c={...n,...a,...i&&{style:i}},{className:l,StyleComponent:p,idx:y}=x(c,o.data),{style:A,uid:F,disabled:K,idx:v,className:C,...R}=o;return G(O,{children:[p,s(t,{...R,...y?{id:y}:{},className:[l,C].filter(Boolean).join(" ").trim(),ref:r})]})});return e.displayName=`WithStyleInjection(${t.displayName||t.name||"Component"})`,e}function B(t){const n=m.forwardRef((e,o)=>s(T,{children:s(t,{...e,ref:o})}));return n.displayName=`WithErrorBoundary(${t.displayName||t.name||"Component"})`,n}const P=new WeakMap;function z(t,n){if(P.has(t))return t;const e=B(_(E(t,n?.containerClassName),n));e.displayName=`WithLayout(${t.displayName||t.name||"Component"})`,P.set(t,!0);const o=e;return Object.getOwnPropertyNames(t).forEach(r=>{!(r in o)&&r!=="arguments"&&r!=="caller"&&r!=="length"&&r!=="name"&&(o[r]=t[r])}),o}export{k as getStylesProps,x as useStyles,z as withLayout};
|
|
2
2
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/shared/Styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n desktopSpan: number\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n style?: string | React.CSSProperties\n uid?: string\n disabled?: boolean\n containerClassName?: string\n}\n\ntype LayoutProps<P> = Omit<P, keyof StylesProps | keyof ContainerProps> & StylesProps & ContainerProps\n\ntype StaticComponentProperties<T> = Omit<T, keyof React.ComponentType<any> | 'displayName' | 'prototype'>\n\nconst generateUID = (props: Record<string, unknown>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\nexport const getStylesProps = <T extends StylesProps>(props: T): StylesProps => {\n const { style, uid, disabled, containerClassName } = props\n return { style, uid, disabled, containerClassName }\n}\n\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return (\n <style\n suppressHydrationWarning\n data-style-id={uid}\n dangerouslySetInnerHTML={{ __html: `.block-${uid} { ${style} }` }}\n />\n )\n}\n\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, unknown>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, ...(data ?? {}) }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\nconst getGridItemClassName = (container?: ContainerProps['container']) => {\n const { desktopSpan, mobileSpan } = container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\nconst styleToString = (style?: string | React.CSSProperties): string => {\n if (!style) return ''\n if (typeof style === 'string') return style\n if (typeof style === 'object' && Object.entries(style).length <= 0) return ''\n return (\n Object.entries(style)\n .map(([key, value]) => {\n const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()\n return `${cssKey}: ${value}`\n })\n .join('; ') + ';'\n )\n}\n\nconst mergeStyles = (a?: string | React.CSSProperties, b?: string | React.CSSProperties): string =>\n [a, b]\n .map(styleToString)\n .filter((s): s is string => Boolean(s))\n .map(s => (s.trim().endsWith(';') ? s : `${s};`))\n .join(' ')\n\ntype InternalProps = StylesProps &\n ContainerProps & { className?: string; data?: Record<string, unknown> } & Record<string, unknown>\n\nfunction withContainerLayout(\n WrappedComponent: React.ComponentType<InternalProps>,\n defaultContainerClassName?: string\n): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => {\n // eslint-disable-next-line no-unused-vars\n const { container, containerClassName, className, ...componentProps } = props\n\n if (!container || Reflect.ownKeys(container).length === 0) {\n return <WrappedComponent {...componentProps} className={className as string | undefined} ref={ref} />\n }\n\n const mergedContainerClassName = [defaultContainerClassName, containerClassName, className]\n .filter(Boolean)\n .join(' ')\n .trim()\n\n return (\n <Container className={mergedContainerClassName}>\n <Grid className=\"container_grid\">\n <GridItem className={getGridItemClassName(container as ContainerProps['container'])}>\n <WrappedComponent {...componentProps} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n })\n\n Wrapped.displayName = `WithContainerLayout(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n return Wrapped as React.ComponentType<InternalProps>\n}\n\nfunction withStyleInjection(\n WrappedComponent: React.ComponentType<InternalProps>,\n defaultStyleProps?: Partial<StylesProps>\n): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => {\n const propsStyleProps = getStylesProps(props)\n const mergedStyle = mergeStyles(defaultStyleProps?.style, propsStyleProps.style)\n\n const finalStyleProps: StylesProps = {\n ...defaultStyleProps,\n ...propsStyleProps,\n ...(mergedStyle && { style: mergedStyle }),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "containerClassName", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getGridItemClassName", "container", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "styleToString", "key", "value", "mergeStyles", "a", "b", "s", "withContainerLayout", "WrappedComponent", "defaultContainerClassName", "Wrapped", "ref", "className", "componentProps", "mergedContainerClassName", "withStyleInjection", "defaultStyleProps", "propsStyleProps", "mergedStyle", "finalStyleProps", "_s", "_u", "_d", "ownClassName", "rest", "withErrorBoundary", "wrappedComponents", "withLayout", "defaultLayoutProps", "composed", "result"]
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n 12: 'col-start-1 col-end-13',\n 10: 'col-start-2 col-end-12',\n 8: 'col-start-3 col-end-11',\n 6: 'col-start-4 col-end-10',\n 4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n 12: 'tablet:col-start-1 tablet:col-end-13',\n 10: 'tablet:col-start-2 tablet:col-end-12',\n 8: 'tablet:col-start-3 tablet:col-end-11',\n 6: 'tablet:col-start-4 tablet:col-end-10',\n 4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n container?: {\n desktopSpan: number\n mobileSpan: number\n }\n}\n\nexport interface StylesProps {\n style?: string | React.CSSProperties\n uid?: string\n disabled?: boolean\n containerClassName?: string\n idx?: string\n}\n\ntype LayoutProps<P> = Omit<P, keyof StylesProps | keyof ContainerProps> & StylesProps & ContainerProps\n\ntype StaticComponentProperties<T> = Omit<T, keyof React.ComponentType<any> | 'displayName' | 'prototype'>\n\nconst generateUID = (props: Record<string, unknown>) => {\n const keyString = getKeyPropsString(props)\n return `style_${simpleHash(keyString)}`\n}\n\nexport const getStylesProps = <T extends StylesProps>(props: T): StylesProps => {\n const { style, uid, disabled, containerClassName, idx } = props\n return { style, uid, disabled, containerClassName, idx }\n}\n\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return (\n <style\n suppressHydrationWarning\n data-style-id={uid}\n dangerouslySetInnerHTML={{ __html: `.block-${uid} { ${style} }` }}\n />\n )\n}\n\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, unknown>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, ...(data ?? {}) }), [data, styleProps])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n idx: styleProps?.idx,\n } as const\n}\n\nconst getGridItemClassName = (container?: ContainerProps['container']) => {\n const { desktopSpan, mobileSpan } = container || {}\n const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\nconst styleToString = (style?: string | React.CSSProperties): string => {\n if (!style) return ''\n if (typeof style === 'string') return style\n if (typeof style === 'object' && Object.entries(style).length <= 0) return ''\n return (\n Object.entries(style)\n .map(([key, value]) => {\n const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()\n return `${cssKey}: ${value}`\n })\n .join('; ') + ';'\n )\n}\n\nconst mergeStyles = (a?: string | React.CSSProperties, b?: string | React.CSSProperties): string =>\n [a, b]\n .map(styleToString)\n .filter((s): s is string => Boolean(s))\n .map(s => (s.trim().endsWith(';') ? s : `${s};`))\n .join(' ')\n\ntype InternalProps = StylesProps &\n ContainerProps & { className?: string; data?: Record<string, unknown> } & Record<string, unknown>\n\nfunction withContainerLayout(\n WrappedComponent: React.ComponentType<InternalProps>,\n defaultContainerClassName?: string\n): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => {\n // eslint-disable-next-line no-unused-vars\n const { container, containerClassName, className, ...componentProps } = props\n\n if (!container || Reflect.ownKeys(container).length === 0) {\n return <WrappedComponent {...componentProps} className={className as string | undefined} ref={ref} />\n }\n\n const mergedContainerClassName = [defaultContainerClassName, containerClassName, className]\n .filter(Boolean)\n .join(' ')\n .trim()\n\n return (\n <Container className={mergedContainerClassName}>\n <Grid className=\"container_grid\">\n <GridItem className={getGridItemClassName(container as ContainerProps['container'])}>\n <WrappedComponent {...componentProps} ref={ref} />\n </GridItem>\n </Grid>\n </Container>\n )\n })\n\n Wrapped.displayName = `WithContainerLayout(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n return Wrapped as React.ComponentType<InternalProps>\n}\n\nfunction withStyleInjection(\n WrappedComponent: React.ComponentType<InternalProps>,\n defaultStyleProps?: Partial<StylesProps>\n): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => {\n const propsStyleProps = getStylesProps(props)\n const mergedStyle = mergeStyles(defaultStyleProps?.style, propsStyleProps.style)\n\n const finalStyleProps: StylesProps = {\n ...defaultStyleProps,\n ...propsStyleProps,\n ...(mergedStyle && { style: mergedStyle }),\n }\n\n const { className, StyleComponent, idx } = useStyles(\n finalStyleProps,\n props.data as Record<string, unknown> | undefined\n )\n\n // eslint-disable-next-line no-unused-vars\n const { style: _s, uid: _u, disabled: _d, idx: _idx, className: ownClassName, ...rest } = props\n\n return (\n <>\n {StyleComponent}\n <WrappedComponent\n {...rest}\n {...(idx ? { id: idx } : {})}\n className={[className, ownClassName].filter(Boolean).join(' ').trim()}\n ref={ref}\n />\n </>\n )\n })\n\n Wrapped.displayName = `WithStyleInjection(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n return Wrapped as React.ComponentType<InternalProps>\n}\n\nfunction withErrorBoundary(WrappedComponent: React.ComponentType<InternalProps>): React.ComponentType<InternalProps> {\n const Wrapped = React.forwardRef<unknown, InternalProps>((props, ref) => (\n <ErrorBoundary>\n <WrappedComponent {...props} ref={ref} />\n </ErrorBoundary>\n ))\n\n Wrapped.displayName = `WithErrorBoundary(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n return Wrapped as React.ComponentType<InternalProps>\n}\n\nconst wrappedComponents = new WeakMap<React.ComponentType<never>, true>()\n\nexport function withLayout<T extends React.ComponentType<any>>(\n WrappedComponent: T,\n defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n): React.ForwardRefExoticComponent<LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>> &\n StaticComponentProperties<T> {\n if (wrappedComponents.has(WrappedComponent as React.ComponentType<never>)) {\n return WrappedComponent as unknown as React.ForwardRefExoticComponent<\n LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>\n > &\n StaticComponentProperties<T>\n }\n\n const composed = withErrorBoundary(\n withStyleInjection(\n withContainerLayout(\n WrappedComponent as unknown as React.ComponentType<InternalProps>,\n defaultLayoutProps?.containerClassName\n ),\n defaultLayoutProps\n )\n )\n\n composed.displayName = `WithLayout(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`\n\n wrappedComponents.set(WrappedComponent as React.ComponentType<never>, true)\n\n const result = composed as unknown as React.ForwardRefExoticComponent<\n LayoutProps<React.ComponentProps<T>> & React.RefAttributes<unknown>\n > &\n StaticComponentProperties<T>\n\n Object.getOwnPropertyNames(WrappedComponent).forEach(key => {\n if (!(key in result) && key !== 'arguments' && key !== 'caller' && key !== 'length' && key !== 'name') {\n ;(result as any)[key] = (WrappedComponent as any)[key]\n }\n })\n\n return result\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "containerClassName", "idx", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getGridItemClassName", "container", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "styleToString", "key", "value", "mergeStyles", "a", "b", "s", "withContainerLayout", "WrappedComponent", "defaultContainerClassName", "Wrapped", "ref", "className", "componentProps", "mergedContainerClassName", "withStyleInjection", "defaultStyleProps", "propsStyleProps", "mergedStyle", "finalStyleProps", "_s", "_u", "_d", "_idx", "ownClassName", "rest", "withErrorBoundary", "wrappedComponents", "withLayout", "defaultLayoutProps", "composed", "result"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -535,6 +535,9 @@ video {
|
|
|
535
535
|
top: 0px;
|
|
536
536
|
bottom: 0px;
|
|
537
537
|
}
|
|
538
|
+
.\!bottom-0 {
|
|
539
|
+
bottom: 0px !important;
|
|
540
|
+
}
|
|
538
541
|
.\!bottom-4 {
|
|
539
542
|
bottom: 1rem !important;
|
|
540
543
|
}
|
|
@@ -1696,6 +1699,9 @@ video {
|
|
|
1696
1699
|
.w-72 {
|
|
1697
1700
|
width: 18rem;
|
|
1698
1701
|
}
|
|
1702
|
+
.w-8 {
|
|
1703
|
+
width: 2rem;
|
|
1704
|
+
}
|
|
1699
1705
|
.w-\[--circle-size\] {
|
|
1700
1706
|
width: var(--circle-size);
|
|
1701
1707
|
}
|
|
@@ -5538,6 +5544,9 @@ video {
|
|
|
5538
5544
|
left: 4rem;
|
|
5539
5545
|
right: 4rem;
|
|
5540
5546
|
}
|
|
5547
|
+
.laptop\:\!bottom-4 {
|
|
5548
|
+
bottom: 1rem !important;
|
|
5549
|
+
}
|
|
5541
5550
|
.laptop\:-bottom-\[40px\] {
|
|
5542
5551
|
bottom: -40px;
|
|
5543
5552
|
}
|
|
@@ -5727,6 +5736,9 @@ video {
|
|
|
5727
5736
|
.laptop\:aspect-\[824\/560\] {
|
|
5728
5737
|
aspect-ratio: 824/560;
|
|
5729
5738
|
}
|
|
5739
|
+
.laptop\:aspect-\[896\/384\] {
|
|
5740
|
+
aspect-ratio: 896/384;
|
|
5741
|
+
}
|
|
5730
5742
|
.laptop\:aspect-auto {
|
|
5731
5743
|
aspect-ratio: auto;
|
|
5732
5744
|
}
|
|
@@ -6320,6 +6332,9 @@ video {
|
|
|
6320
6332
|
padding-top: 20px;
|
|
6321
6333
|
padding-bottom: 20px;
|
|
6322
6334
|
}
|
|
6335
|
+
.laptop\:pb-0 {
|
|
6336
|
+
padding-bottom: 0px;
|
|
6337
|
+
}
|
|
6323
6338
|
.laptop\:pb-3 {
|
|
6324
6339
|
padding-bottom: 0.75rem;
|
|
6325
6340
|
}
|
|
@@ -6722,6 +6737,9 @@ video {
|
|
|
6722
6737
|
.desktop\:aspect-\[1090\/488\] {
|
|
6723
6738
|
aspect-ratio: 1090/488;
|
|
6724
6739
|
}
|
|
6740
|
+
.desktop\:aspect-\[1312\/512\] {
|
|
6741
|
+
aspect-ratio: 1312/512;
|
|
6742
|
+
}
|
|
6725
6743
|
.desktop\:aspect-\[1440\/384\] {
|
|
6726
6744
|
aspect-ratio: 1440/384;
|
|
6727
6745
|
}
|
|
@@ -7383,6 +7401,9 @@ video {
|
|
|
7383
7401
|
.lg-desktop\:aspect-\[1384\/560\] {
|
|
7384
7402
|
aspect-ratio: 1384/560;
|
|
7385
7403
|
}
|
|
7404
|
+
.lg-desktop\:aspect-\[1664\/640\] {
|
|
7405
|
+
aspect-ratio: 1664/640;
|
|
7406
|
+
}
|
|
7386
7407
|
.lg-desktop\:aspect-\[1920\/480\] {
|
|
7387
7408
|
aspect-ratio: 1920/480;
|
|
7388
7409
|
}
|